so many more examples

app_layout_function.py

@@ -8,6 +8,7 @@ def serve_layout():
     return html.Div('hlo world')
 
 app.layout = serve_layout
+app.server.secret_key='secret'
 
 if __name__ == '__main__':
     app.run_server(debug=False)

component-library.py

@@ -0,0 +1,130 @@
+# -*- coding: utf-8 -*-
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+import dash_core_components as dcc
+import json
+
+app = dash.Dash()
+
+def layout(id):
+    return html.Div([
+        html.Label('Dropdown'),
+        dcc.Dropdown(
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': u'Montréal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'}
+            ],
+            value='MTL',
+            id='{}-dropdown'.format(id)
+        ),
+
+        html.Label('Multi-Select Dropdown'),
+        dcc.Dropdown(
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': u'Montréal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'}
+            ],
+            value=['MTL', 'SF'],
+            multi=True,
+            id='{}-multi-dropdown'.format(id)
+        ),
+
+        html.Label('Radio Items'),
+        dcc.RadioItems(
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': u'Montréal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'}
+            ],
+            value='MTL',
+            id='{}-radio-items'.format(id)
+        ),
+
+        html.Label('Checkboxes'),
+        dcc.Checklist(
+            options=[
+                {'label': 'New York City', 'value': 'NYC'},
+                {'label': u'Montréal', 'value': 'MTL'},
+                {'label': 'San Francisco', 'value': 'SF'}
+            ],
+            values=['MTL', 'SF'],
+            id='{}-checkboxes'.format(id)
+        ),
+
+        html.Label('Text Input'),
+        dcc.Input(
+            value='MTL',
+            type='text',
+            id='{}-input'.format(id)
+        ),
+
+        html.Label('Slider'),
+        dcc.Slider(
+            min=0,
+            max=9,
+            marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
+            value=5,
+            id='{}-slider'.format(id)
+        ),
+
+        html.Label('Range Slider'),
+        dcc.RangeSlider(
+            min=0,
+            max=9,
+            marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
+            value=[5, 8],
+            id='{}-range-slider'.format(id)
+        ),
+
+        html.Label('Slider on Drag'),
+        dcc.Slider(
+            min=0,
+            max=9,
+            marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
+            value=5,
+            updatemode='drag',
+            id='{}-slider-drag'.format(id)
+        ),
+
+        html.Label('Range Slider'),
+        dcc.RangeSlider(
+            min=0,
+            max=9,
+            marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
+            value=[5, 8],
+            updatemode='drag',
+            id='{}-range-slider-drag'.format(id)
+        )
+
+    ])
+
+
+app.scripts.config.serve_locally = True
+
+app.layout = html.Div([
+    html.H3('Uncontrolled Components'),
+    layout('xx'),
+    html.Hr(),
+    html.H3('Controlled Components'),
+    layout('controlled'),
+    html.Div(id='output-value')
+])
+
+INPUTS = [
+    Input(id_, 'value') for id_ in app.layout.keys()
+    if 'controlled' in id_ and 'checkboxes' not in id_]
+INPUTS.append(Input('controlled-checkboxes', 'values'))
+
+
+@app.callback(
+    Output('output-value', 'children'),
+    INPUTS)
+def display_values(*args):
+    return json.dumps(args)
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

config_bar.py

@@ -0,0 +1,12 @@
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    dcc.Graph(id='my-graph', figure={'data': [{'x': [1, 2, 3]}]}, config={'editable': True, 'modeBarButtonsToRemove': ['pan2d', 'lasso2d']})
+])
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

copy-figure.py

@@ -0,0 +1,36 @@
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+import copy
+
+app = dash.Dash()
+
+FIGURE = {
+    'data': [
+        {'x': [1, 2, 3], 'y': [4, 2, 1], 'type': 'bar'}
+    ]
+}
+
+app.layout = html.Div([
+    dcc.Dropdown(
+        id='color',
+        options=[
+            {'label': i, 'value': i} for i in ['blue', 'red', 'black']
+        ],
+        value='blue'
+    ),
+    dcc.Graph(id='graph', figure=FIGURE)
+])
+
+
+@app.callback(
+    dash.dependencies.Output('graph', 'figure'),
+    [dash.dependencies.Input('color', 'value')])
+def update_graph(color):
+    copied_figure = copy.deepcopy(FIGURE)
+    copied_figure['data'][0]['marker'] = {'color': color}
+    return copied_figure
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-click.py

@@ -0,0 +1,50 @@
+import dash
+from dash.dependencies import Input, Output, State
+import dash_html_components as html
+import dash_core_components as dcc
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    html.Button('Click Me', id='button'),
+    html.H3(id='button-clicks'),
+
+    html.Hr(),
+
+    html.Label('Input 1'),
+    dcc.Input(id='input-1'),
+
+    html.Label('Input 2'),
+    dcc.Input(id='input-2'),
+
+    html.Label('Slider 1'),
+    dcc.Slider(id='slider-1'),
+
+    html.Button('Click Me', id='button-2'),
+
+    html.Div(id='output')
+], className='container')
+
+@app.callback(
+    Output('button-clicks', 'children'),
+    [Input('button', 'n_clicks')])
+def clicks(n_clicks):
+    return 'Button has been clicked {} times'.format(n_clicks)
+
+@app.callback(
+    Output('output', 'children'),
+    [Input('button-2', 'n_clicks')],
+    state=[State('input-1', 'value'),
+     State('input-2', 'value'),
+     State('slider-1', 'value')])
+def compute(n_clicks, input1, input2, slider1):
+    return 'A computation based off of {}, {}, and {}'.format(
+        input1, input2, slider1
+    )
+
+
+app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-modebar.py

@@ -0,0 +1,31 @@
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+
+app = dash.Dash()
+app.layout = html.Div([
+    dcc.Graph(
+	id='my-graph',
+	figure={
+		'data': [{'x': [1, 2, 3]}]
+	},
+	config={
+	      'modeBarButtonsToRemove': [
+        	'sendDataToCloud',
+	        'pan2d',
+        	'zoomIn2d',
+	        'zoomOut2d',
+	        'autoScale2d',
+	        'resetScale2d',
+	        'hoverCompareCartesian',
+	        'hoverClosestCartesian',        
+	        'toggleSpikelines'        
+	      ],
+		'displayModeBar': True,
+		'displaylogo': False
+	}
+    )
+])
+
+if __name__ == '__main__':
+	app.run_server(debug=True)

dash-urls-hide-show-tabs.py

@@ -0,0 +1,117 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+
+app = dash.Dash()
+
+
+tab_style = {
+    'color': '#0074D9',
+    'text-decoration': 'underline',
+    'margin': 30,
+    'cursor': 'pointer'
+}
+
+app.layout = html.Div([
+    dcc.Location(id='url'),
+    dcc.Link('Tab 1', href='/', style=tab_style),
+    dcc.Link('Tab 2', href='/tab-2', style=tab_style),
+    dcc.Link('Tab 3', href='/tab-3', style=tab_style),
+    html.Div([
+
+        # Tab 1
+        html.Div(
+            id='tab-1',
+            style={'display': 'none'},
+            children=[
+                html.H1('Tab 1'),
+                dcc.Dropdown(
+                    id='dropdown-1',
+                    options=[
+                        {'label': 'Tab 1: {}'.format(i), 'value': i}
+                        for i in ['A', 'B', 'C']
+                    ]
+                ),
+                html.Div(id='display-1')
+            ]
+        ),
+
+        # Tab 2
+        html.Div(
+            id='tab-2',
+            style={'display': 'none'},
+            children=[
+                html.H1('Tab 2'),
+                dcc.Dropdown(
+                    id='dropdown-2',
+                    options=[
+                        {'label': 'Tab 2: {}'.format(i), 'value': i}
+                        for i in ['A', 'B', 'C']
+                    ]
+                ),
+                html.Div(id='display-2')
+            ]
+        ),
+
+        # Tab 3
+        html.Div(
+            id='tab-3',
+            style={'display': 'none'},
+            children=[
+                html.H1('Tab 3'),
+                dcc.Dropdown(
+                    id='dropdown-3',
+                    options=[
+                        {'label': 'Tab 3: {}'.format(i), 'value': i}
+                        for i in ['A', 'B', 'C']
+                    ]
+                ),
+                html.Div(id='display-3')
+            ]
+        ),
+    ])
+])
+
+
+def generate_display_tab(tab):
+    def display_tab(pathname):
+        if tab == 'tab-1' and (pathname is None or pathname == '/'):
+            return {'display': 'block'}
+        elif pathname == '/{}'.format(tab):
+            return {'display': 'block'}
+        else:
+            return {'display': 'none'}
+    return display_tab
+
+
+for tab in ['tab-1', 'tab-2', 'tab-3']:
+    app.callback(Output(tab, 'style'), [Input('url', 'pathname')])(
+        generate_display_tab(tab)
+    )
+
+
+@app.callback(
+    Output('display-1', 'children'),
+    [Input('dropdown-1', 'value')])
+def display_value(value):
+    return 'You have selected {}'.format(value)
+
+
+@app.callback(
+    Output('display-2', 'children'),
+    [Input('dropdown-2', 'value')])
+def display_value(value):
+    return 'You have selected {}'.format(value)
+
+
+@app.callback(
+    Output('display-3', 'children'),
+    [Input('dropdown-3', 'value')])
+def display_value(value):
+    return 'You have selected {}'.format(value)
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)