diff --git a/README.md b/README.md index f2a2070e..fedca74d 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ cd django-plotly-dash To use existing dash applications, first register them using the `DelayedDash` class. This replaces the `dash.Dash` class of `plotly.py.` -Taking as an example a slightly modified variant of one of the [getting started](https://dash.plot.ly/getting-started-part-2) examples: +Taking a very simple example inspired by the excellent [getting started](https://dash.plot.ly/) documentation: ```python import dash @@ -52,39 +52,52 @@ import dash_html_components as html from django_plotly_dash import DelayedDash -app = DelayedDash('SimpleExample') # replaces dash.Dash +app = DelayedDash('SimpleExample') app.layout = html.Div([ dcc.RadioItems( - id='dropdown-a', - options=[{'label': i, 'value': i} for i in ['Canada', 'USA', 'Mexico']], - value='Canada' + id='dropdown-color', + options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']], + value='red' ), - html.Div(id='output-a'), - + html.Div(id='output-color'), dcc.RadioItems( - id='dropdown-b', - options=[{'label': i, 'value': i} for i in ['MTL', 'NYC', 'SF']], - value='MTL' + id='dropdown-size', + options=[{'label': i, 'value': j} for i, j in [('L','large'), ('M','medium'), ('S','small')]], + value='medium' ), - html.Div(id='output-b') + html.Div(id='output-size') ]) @app.callback( - dash.dependencies.Output('output-a', 'children'), - [dash.dependencies.Input('dropdown-a', 'value')]) -def callback_a(dropdown_value): - return 'You\'ve selected "{}"'.format(dropdown_value) - + dash.dependencies.Output('output-color', 'children'), + [dash.dependencies.Input('dropdown-color', 'value')]) +def callback_color(dropdown_value): + return "The selected color is %s." % dropdown_value @app.callback( - dash.dependencies.Output('output-b', 'children'), - [dash.dependencies.Input('dropdown-a', 'value'), - dash.dependencies.Input('dropdown-b', 'value')]) -def callback_b(dropdown_value,other_dd): - return 'You\'ve selected "{}" and "{}"'.format(dropdown_value, - other_dd) + dash.dependencies.Output('output-size', 'children'), + [dash.dependencies.Input('dropdown-color', 'value'), + dash.dependencies.Input('dropdown-size', 'value')]) +def callback_size(dropdown_color, dropdown_size): + return "The chosen T-shirt is a %s %s one." %(dropdown_size, + dropdown_color) + +a2 = DelayedDash("Ex2") +a2.layout = html.Div([ + dcc.RadioItems(id="dropdown-one",options=[{'label':i,'value':j} for i,j in [ + ("O2","Oxygen"),("N2","Nitrogen"),] + ],value="Oxygen"), + html.Div(id="output-one") + ]) + +@a2.callback( + dash.dependencies.Output('output-one','children'), + [dash.dependencies.Input('dropdown-one','value')] + ) +def callback_c(*args,**kwargs): + return "Args are %s and kwargs are %s" %("".join(*args),str(kwargs)) ``` Note that the `DelayedDash` constructor requires a name to be specified. This name is then used to identify the dash app in @@ -96,7 +109,7 @@ templates: {% plotly_item "SimpleExample" %} ``` -Note that the registration code needs to be in a location +The registration code needs to be in a location that will be imported into the Django process before any template tag attempts to use it. The example Django application in the demo subdirectory achieves this through an import in the main urls.py file; any views.py would also be sufficient. diff --git a/demo/demo/plotly_apps.py b/demo/demo/plotly_apps.py index b223b815..f570b385 100644 --- a/demo/demo/plotly_apps.py +++ b/demo/demo/plotly_apps.py @@ -8,35 +8,33 @@ app.layout = html.Div([ dcc.RadioItems( - id='dropdown-a', - options=[{'label': i, 'value': i} for i in ['Canada', 'USA', 'Mexico']], - value='Canada' + id='dropdown-color', + options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']], + value='red' ), - html.Div(id='output-a'), - + html.Div(id='output-color'), dcc.RadioItems( - id='dropdown-b', - options=[{'label': i, 'value': i} for i in ['MTL', 'NYC', 'SF']], - value='MTL' + id='dropdown-size', + options=[{'label': i, 'value': j} for i, j in [('L','large'), ('M','medium'), ('S','small')]], + value='medium' ), - html.Div(id='output-b') + html.Div(id='output-size') ]) @app.callback( - dash.dependencies.Output('output-a', 'children'), - [dash.dependencies.Input('dropdown-a', 'value')]) -def callback_a(dropdown_value): - return 'You\'ve selected "{}"'.format(dropdown_value) - + dash.dependencies.Output('output-color', 'children'), + [dash.dependencies.Input('dropdown-color', 'value')]) +def callback_color(dropdown_value): + return "The selected color is %s." % dropdown_value @app.callback( - dash.dependencies.Output('output-b', 'children'), - [dash.dependencies.Input('dropdown-a', 'value'), - dash.dependencies.Input('dropdown-b', 'value')]) -def callback_b(dropdown_value,other_dd): - return 'You\'ve selected "{}" and "{}"'.format(dropdown_value, - other_dd) + dash.dependencies.Output('output-size', 'children'), + [dash.dependencies.Input('dropdown-color', 'value'), + dash.dependencies.Input('dropdown-size', 'value')]) +def callback_size(dropdown_color, dropdown_size): + return "The chosen T-shirt is a %s %s one." %(dropdown_size, + dropdown_color) a2 = DelayedDash("Ex2") a2.layout = html.Div([ diff --git a/docs/index.rst b/docs/index.rst index 07d06acc..0a169a27 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -11,7 +11,6 @@ Contents .. toctree:: :maxdepth: 2 - :caption: Contents: installation simple_use diff --git a/docs/simple_use.rst b/docs/simple_use.rst index 4d8c863a..d0d39825 100644 --- a/docs/simple_use.rst +++ b/docs/simple_use.rst @@ -18,35 +18,34 @@ Taking as an example a slightly modified variant of one of the `getting started app.layout = html.Div([ dcc.RadioItems( - id='dropdown-a', - options=[{'label': i, 'value': i} for i in ['Canada', 'USA', 'Mexico']], - value='Canada' + id='dropdown-color', + options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']], + value='red' ), - html.Div(id='output-a'), - + html.Div(id='output-color'), dcc.RadioItems( - id='dropdown-b', - options=[{'label': i, 'value': i} for i in ['MTL', 'NYC', 'SF']], - value='MTL' + id='dropdown-size', + options=[{'label': i, + 'value': j} for i, j in [('L','large'), ('M','medium'), ('S','small')]], + value='medium' ), - html.Div(id='output-b') + html.Div(id='output-size') ]) @app.callback( - dash.dependencies.Output('output-a', 'children'), - [dash.dependencies.Input('dropdown-a', 'value')]) - def callback_a(dropdown_value): - return 'You\'ve selected "{}"'.format(dropdown_value) - + dash.dependencies.Output('output-color', 'children'), + [dash.dependencies.Input('dropdown-color', 'value')]) + def callback_color(dropdown_value): + return "The selected color is %s." % dropdown_value @app.callback( - dash.dependencies.Output('output-b', 'children'), - [dash.dependencies.Input('dropdown-a', 'value'), - dash.dependencies.Input('dropdown-b', 'value')]) - def callback_b(dropdown_value,other_dd): - return 'You\'ve selected "{}" and "{}"'.format(dropdown_value, - other_dd) + dash.dependencies.Output('output-size', 'children'), + [dash.dependencies.Input('dropdown-color', 'value'), + dash.dependencies.Input('dropdown-size', 'value')]) + def callback_size(dropdown_color, dropdown_size): + return "The chosen T-shirt is a %s %s one." %(dropdown_size, + dropdown_color) Note that the ``DelayedDash`` constructor requires a name to be specified. This name is then used to identify the dash app in templates:::