Merge pull request #4 from delsim/master

Improved example

Author: GibbsConsulting

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.
 

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([

docs/index.rst

@@ -11,7 +11,6 @@ Contents
 
 .. toctree::
    :maxdepth: 2
-   :caption: Contents:
 
    installation
    simple_use

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:::