syncing things up

Author: chriddyp

.gitignore

@@ -1,4 +1,5 @@
 vv
 *.pyc
 cache/
+cache-directory/
 .ropeproject

app_layout_function.py

@@ -14,9 +14,10 @@ def serve_layout():
         html.Div(id='output-1'),
         html.Div(id='output-2'),
         dcc.Dropdown(
-            id='input',
-            options=[{'label': i, 'value': i} for i in ['a', 'b']]
-        )
+            id='input', options=[{
+                'label': i,
+                'value': i
+            } for i in ['a', 'b']])
     ])
 
 

dash-a-target-blank-external-link.gif

@@ -0,0 +1,11 @@
+import dash
+import dash_html_components as html
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    html.A("Link to external site", href='https://plot.ly', target="_blank")
+])
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-a-target-blank-external-link.py

@@ -0,0 +1,50 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+import datetime
+from flask_caching import Cache
+import pandas as pd
+import time
+import uuid
+
+app = dash.Dash()
+cache = Cache(app.server, config={
+    'CACHE_TYPE': 'filesystem',
+    'CACHE_DIR': 'cache-directory',
+    'CACHE_THRESHOLD': 50  # should be equal to maximum number of active users
+})
+
+@cache.memoize()
+def query_data(session_id):
+    df = pd.DataFrame({'a': [datetime.datetime.now()]})
+    return df.to_json()
+
+
+def dataframe(session_id):
+    return pd.read_json(query_data(session_id))
+
+def serve_layout():
+    session_id = str(uuid.uuid4())
+    df = dataframe(session_id)
+    return html.Div([
+        html.Div(session_id, id='session-id', style={'display': 'none'}),
+        dcc.Dropdown(id='dropdown', value='a', options=[
+            {'label': i, 'value': i} for i in ['a', 'b', 'c', 'd']
+        ]),
+        html.Pre(id='output')
+    ])
+
+app.layout = serve_layout
+
+
+@app.callback(Output('output', 'children'),
+              [Input('dropdown', 'value'),
+               Input('session-id', 'children')])
+def display_value(value, session_id):
+    df = dataframe(session_id)
+    return df.to_csv()
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-cache-signal-session.py

@@ -0,0 +1,55 @@
+import dash
+from dash.dependencies import Input, Output, State
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_table_experiments as dt
+from flask import send_from_directory
+import json
+import pandas as pd
+import numpy as np
+import os
+import plotly
+
+app = dash.Dash()
+server = app.server
+
+app.scripts.config.serve_locally = True
+app.css.config.serve_locally = True
+
+ROWS = [
+    {'a': 'AA', 'b': 1},
+    {'a': 'AB', 'b': 2},
+    {'a': 'BB', 'b': 3},
+    {'a': 'BC', 'b': 4},
+    {'a': 'CC', 'b': 5},
+    {'a': 'CD', 'b': 6}
+]
+
+
+app.layout = html.Div([
+    html.Link(rel='stylesheet', href='/static/dash-datatable.css'),
+
+    dt.DataTable(
+        rows=ROWS,
+
+        row_selectable=True,
+        filterable=True,
+        sortable=True,
+        selected_row_indices=[],
+        id='datatable'
+    ),
+    html.Div(id='selected-indexes'),
+    dcc.Graph(
+        id='graph-gapminder'
+    ),
+], className="container")
+
+
+@app.server.route('/static/<path:path>')
+def static_file(path):
+    static_folder = os.path.join(os.getcwd(), 'static')
+    return send_from_directory(static_folder, path)
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-datatable-custom-css.py

@@ -0,0 +1,31 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+import dash_core_components as dcc
+import dash_table_experiments as dt
+
+app = dash.Dash()
+app.layout = html.Div([
+    dcc.RadioItems(
+        id='toggle-editable',
+        options=[
+            {'label': 'Editable', 'value': True},
+            {'label': 'Non-Editable', 'value': False},
+        ],
+        value=True
+    ),
+    dt.DataTable(
+        id='datatable',
+        rows=[{'x': 1, 'y': 3}, {'x': 5, 'y': 1}],
+    )
+])
+
+@app.callback(
+    Output('datatable', 'editable'),
+    [Input('toggle-editable', 'value')])
+def update_editable(value):
+    return value
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-datatable-editable-toggle.gif

@@ -0,0 +1,51 @@
+import dash
+from dash.dependencies import Input, Output, State
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_table_experiments as dt
+from flask import send_from_directory
+import json
+import pandas as pd
+import numpy as np
+import os
+import plotly
+
+app = dash.Dash()
+server = app.server
+
+app.scripts.config.serve_locally = True
+app.css.config.serve_locally = True
+
+ROWS = [
+    {'a': 'AA', 'b': 1},
+    {'a': 'AB', 'b': 2},
+    {'a': 'BB', 'b': 3},
+    {'a': 'BC', 'b': 4},
+    {'a': 'CC', 'b': 5},
+    {'a': 'CD', 'b': 6}
+]
+
+
+app.layout = html.Div([
+    html.Link(rel='stylesheet', href='/static/dash-datatable-light-dark.css'),
+
+    html.Div(
+        dt.DataTable(rows=ROWS),
+        className='dark-table'
+    ),
+
+    html.Div(
+        dt.DataTable(rows=ROWS),
+        className='light-table'
+    )
+])
+
+
+@app.server.route('/static/<path:path>')
+def static_file(path):
+    static_folder = os.path.join(os.getcwd(), 'static')
+    return send_from_directory(static_folder, path)
+
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-datatable-editable-toggle.py

@@ -0,0 +1,47 @@
+import dash
+from dash.dependencies import Input, Output, State
+import dash_core_components as dcc
+import dash_html_components as html
+import dash_table_experiments as dt
+import json
+import pandas as pd
+import numpy as np
+import plotly
+
+app = dash.Dash()
+server = app.server
+
+app.scripts.config.serve_locally = True
+app.css.config.serve_locally = True
+
+ROWS = [
+    {'a': 'AA', 'b': 1},
+    {'a': 'AB', 'b': 2},
+    {'a': 'BB', 'b': 3},
+    {'a': 'BC', 'b': 4},
+    {'a': 'CC', 'b': 5},
+    {'a': 'CD', 'b': 6}
+]
+
+
+app.layout = html.Div([
+    dt.DataTable(
+        rows=ROWS,
+        column_widths=[50, 50],
+        enable_drag_and_drop=True,
+        row_selectable=True,
+        filterable=True,
+        sortable=True,
+        selected_row_indices=[],
+        id='datatable'
+    ),
+    html.Div(id='selected-indexes'),
+], className="container")
+
+
+app.css.append_css({
+    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
+})
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-datatable-multiple-css-selectors.py

@@ -0,0 +1,45 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+import flask
+import os
+import pandas as pd
+
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    html.A(id='download-link', children='Download File'),
+    dcc.Dropdown(
+        id='dropdown',
+        options=[{'label': i, 'value': i} for i in ['NYC', 'LA' 'SF']],
+        value='NYC',
+        clearable=False
+    )
+])
+
+@app.callback(Output('download-link', 'href'),
+              [Input('dropdown', 'value')])
+def update_href(dropdown_value):
+    df = pd.DataFrame({dropdown_value: [1, 2, 3]})
+    relative_filename = os.path.join(
+        'downloads',
+        '{}-download.xlsx'.format(dropdown_value)
+    )
+    absolute_filename = os.path.join(os.getcwd(), relative_filename)
+    writer = pd.ExcelWriter(absolute_filename)
+    df.to_excel(writer, 'Sheet1')
+    writer.save()
+    return '/{}'.format(relative_filename)
+
+
+@app.server.route('/downloads/<path:path>')
+def serve_static(path):
+    root_dir = os.getcwd()
+    return flask.send_from_directory(
+        os.path.join(root_dir, 'downloads'), path
+    )
+
+if __name__ == '__main__':
+    app.run_server(debug=True)

dash-datatable-resizable-columns.py

@@ -0,0 +1,23 @@
+import dash
+from dash.dependencies import Input, Output
+import dash_html_components as html
+import dash_core_components as dcc
+
+app = dash.Dash()
+
+app.layout = html.Div([
+    dcc.Dropdown(
+        value=['a'],
+        options=[{'label': i, 'value': i} for i in ['a', 'b', 'c', 'd']],
+        multi=True,
+        id='dropdown'
+    ),
+    html.H3(id='output')
+])
+
+@app.callback(Output('output', 'children'), [Input('dropdown', 'value')])
+def display_output(value):
+    return str(value)
+
+if __name__ == '__main__':
+    app.run_server(debug=True)