def version_three():
app = Zig()
section = Div(section=[
H6("Title!"),
Div(section=[
Input_text("intial_value", id="my-put"),
Div("test")
]),
LINE_BREAK,
Div(id="my-output")
])
app.add(section)
def update_ouput_div(input_value):
return "Output: {}".format(input_value)
# Input uses id by default. use key arg for other attributes
add_interaction(Interact(Input(inp.id, "value"),
Output(ouput.id, "content"),
update_ouput_div)
)
def version_one():
app = Zig()
section = Div()
header = H6("Title!")
output = Div(id="my-output")
section2 = Div("Input :" )
inp = Input_text("initial_value", id="my-input")
section2.add(inp)
# wrap everything in div
section.add([header, section2, LINE_BREAK, ouput])
app.add(section)
def update_ouput_div(input_value):
return "Output: {}".format(input_value)
interaction = Interact(Input(inp.id, "value"),
Output(ouput.id, "content"),
update_ouput_div)
app.add_interaction(interaction)
def test_div_creation(self):
test_id = "123"
test_content = "test"
test_section = []
# HOW TO TEST ALL attributes efficiently?
div = Div(test_content, id=test_id)
assert div.content == test_content
assert div.id == test_id
assert div.section == test_section
def test_one():
app = Zig()
def return_fn(in_value):
return in_value
zig_interaction = Interact(InteractIn(Input(id="123"), "value"),
InteractOut(Div(id="456"), "content"),
return_fn)
app.add_interaction(zig_interaction)
# NOTE: able to run app with interaction alone?
# what if user forgotten to add element in?
return app
def version_two():
app = Zig()
section = Div()
header = H6("Title!")
output = Div(id="my-output")
# method 1
# possible to add siblings too?
section2 = Div(section=[
Input_text("intial_value", id="my-put"),
Div("test")
])
# mtd 2
section2 = Div().add([Input_text("intial_value", id="my-put"), Div("test")])
# wrap everything in div
section.add([header, section2, LINE_BREAK, ouput])
app.add(section)
def test():
app = Zig()
df = pd.read_csv(
'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
)
# how does Graph get the initial data from update_graph?
graph = Graph(id="graph-with-slider")
slider = Slider(
df['year'].min,
id="year-slider",
min=df['year'].min(),
max=df['year'].max(),
marks={str(year): str(year)
for year in df['year'].unique()},
step=None)
def update_graph(selected_year):
filtered_df = df[df.year == selected_year]
fig = px.scatter(filtered_df,
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
hover_name="country",
log_x=True,
size_max=55)
# important: how to send transition setting to angular?
fig.update_layout(transition_duration=500)
return fig
app.add(Div(section=[graph, slider]))
app.add_interaction(
Interact(Input(slider.id, "value"), Output(graph.id, 'figure'),
update_graph))
# add zig as package
setup()
from zig import Zig
from zig.main_components import Graph
from zig.html_components import Div
import pandas as pd
import plotly.express as px
# all default
app = Zig()
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.add(Graph(fig))
app.add(Graph(fig))
app.add(Div())
if __name__ == "__main__":
app.run()
from setup import setup
# add zig as package
setup()
from zig import Zig
from zig.main_components import Graph
from zig.html_components import Div
import pandas as pd
import plotly.express as px
# all default
app = Zig()
div = Div()
div_child = Div()
div_child.add([Div(), Div(), Graph()])
div.add([div_child, Div()])
app.add(div)
if __name__ == "__main__":
expected = {
'sections': {
0: {
'dom_type': 'div',
'data': {
'id': None,
'content': ''
},
from setup import setup
# add zig as package
setup()
from zig import Zig
from zig.main_components import Graph
from zig.html_components import Div
import pandas as pd
import plotly.express as px
# all default
app = Zig()
app.add(Div())
app.add(Div(id="123"))
app.add(Div())
app.add(Div())
if __name__ == "__main__":
result = app.run()
print(result)