'fruits': [{'val': c, 'label': c} for c in ['apples', 'oranges']],
'vegetables': [{'val': c, 'label': c} for c in ['kale', 'radishes']]
}
colors = {
'apples': [{'val': c, 'label': c} for c in
['apple green', 'apple red']],
'oranges': [{'val': c, 'label': c} for c in
['orange ruby', 'orange pink']],
'kale': [{'val': c, 'label': c} for c in
['kale green', 'kale evergreen']],
'radishes': [{'val': c, 'label': c} for c in
['radish red', 'radish pink']]
}
dash.layout = div([
Dropdown(id='xdata', options=[{'val': c, 'label': c} for c in food_groups])
])
dash.layout['xdata'].selected = dash.layout['xdata'].options[0]['val']
dash.layout.append(
Dropdown(id='ydata', options=food_varities[dash.layout['xdata'].selected])
)
dash.layout['ydata'].selected = dash.layout['ydata'].options[0]['val']
dash.layout.append(
Dropdown(id='zdata', options=colors[dash.layout['ydata'].selected])
)
dash.layout['zdata'].selected = dash.layout['zdata'].options[0]['val']
@dash.react('ydata', ['xdata'])
def update_ydata(xdata):
dash.layout = div(
style=container_style,
content=[
div(
className="row",
content=[
div(
className="six columns",
style=column_style,
content=[
h4('Dash Components'),
hr(),
# display all of the components with a <pre> container
div([
div(className="row",
content=[
component,
pre(id=component.id + '-repr'),
hr()
]) for component in component_list
]),
]),
# Display this app code on the right column
div(className="six columns",
style=dict(borderLeft='1px solid #E1E1E1',
paddingLeft='4%',
**column_style),
content=[
h4('App Code'),
hr(),
pre(open(os.path.basename(__file__)).read())
])
])
])
container_style = {'width': '90%', 'marginLeft': 'auto', 'marginRight': 'auto'}
column_style = {'overflowX': 'scroll'}
dash.layout = div(style=container_style, content=[
div(className="row", content=[
div(className="six columns", style=column_style, content=[
h4('Dash Components'),
hr(),
# display all of the components with a <pre> container
div([
div(className="row", content=[
component,
pre(id=component.id + '-repr'),
hr()
]) for component in component_list]),
]),
# Display this app code on the right column
div(className="six columns",
style=dict(borderLeft='1px solid #E1E1E1', paddingLeft='4%',
**column_style),
content=[
h4('App Code'),
hr(),
pre(open(os.path.basename(__file__)).read())
])
])
])
def display_component_repr(component):
def gen_dropdown(id):
return Dropdown(id=id,
options=[{
'val': c,
'label': c
} for c in ['a', 'b', 'c']],
selected='a')
components = []
for id in ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'O']:
components.append(label(id))
components.append(gen_dropdown(id))
dash.layout = div(components)
import time
@dash.react('O', ['C', 'B', 'D', 'E'])
def update_odata(c, b, d, e):
print 'O'
time.sleep(10)
return {'selected': 'b'}
@dash.react('A', ['C'])
def update_adata(c):
print 'A'
time.sleep(10)
from datetime import datetime as dt
df = web.DataReader("aapl", 'yahoo', dt(2007, 10, 1), dt(2009, 4, 1))
dash = Dash(__name__)
dash.layout = div([
h2('hello dash'),
div(className='row', content=[
div(className='two columns', content=[
div([
label('select x data'),
Dropdown(id='xdata', options=[{'val': c, 'label': c}
for c in df.columns])
]),
div([
label('select y data'),
Dropdown(id='ydata', options=[{'val': c, 'label': c}
for c in df.columns])
]),
]),
div(className='ten columns', content=[
PlotlyGraph(id='graph')
])
])
])
@dash.react('graph', ['xdata', 'ydata'])
def update_graph(xdata_dropdown, ydata_dropdown):
return {
'figure': {
from react import Dash
from components import div, Dropdown, label
dash = Dash(__name__)
def gen_dropdown(id):
return Dropdown(id=id, options=[{"val": c, "label": c} for c in ["a", "b", "c"]], selected="a")
components = []
for id in ["A", "B", "C", "D", "E", "F", "G", "O"]:
components.append(label(id))
components.append(gen_dropdown(id))
dash.layout = div(components)
import time
@dash.react("O", ["C", "B", "D", "E"])
def update_odata(c, b, d, e):
print "O"
time.sleep(10)
return {"selected": "b"}
@dash.react("A", ["C"])
def update_adata(c):
print "A"
time.sleep(10)
dash = Dash(__name__)
dash.layout = div([
h2('hello dash'),
div(className='row',
content=[
div(className='two columns',
content=[
div([
label('select x data'),
Dropdown(id='xdata',
options=[{
'val': c,
'label': c
} for c in df.columns])
]),
div([
label('select y data'),
Dropdown(id='ydata',
options=[{
'val': c,
'label': c
} for c in df.columns])
]),
]),
div(className='ten columns', content=[PlotlyGraph(id='graph')])
])
])
@dash.react('graph', ['xdata', 'ydata'])
dash = Dash(__name__)
food_groups = ["fruits", "vegetables"]
food_varities = {
"fruits": [{"val": c, "label": c} for c in ["apples", "oranges"]],
"vegetables": [{"val": c, "label": c} for c in ["kale", "radishes"]],
}
colors = {
"apples": [{"val": c, "label": c} for c in ["apple green", "apple red"]],
"oranges": [{"val": c, "label": c} for c in ["orange ruby", "orange pink"]],
"kale": [{"val": c, "label": c} for c in ["kale green", "kale evergreen"]],
"radishes": [{"val": c, "label": c} for c in ["radish red", "radish pink"]],
}
dash.layout = div([Dropdown(id="xdata", options=[{"val": c, "label": c} for c in food_groups])])
dash.layout["xdata"].selected = dash.layout["xdata"].options[0]["val"]
dash.layout.append(Dropdown(id="ydata", options=food_varities[dash.layout["xdata"].selected]))
dash.layout["ydata"].selected = dash.layout["ydata"].options[0]["val"]
dash.layout.append(Dropdown(id="zdata", options=colors[dash.layout["ydata"].selected]))
dash.layout["zdata"].selected = dash.layout["zdata"].options[0]["val"]
@dash.react("ydata", ["xdata"])
def update_ydata(xdata):
new_dropdown = {"options": food_varities[xdata.selected]}
new_dropdown["selected"] = new_dropdown["options"][0]["val"]
return new_dropdown
