Adding demo of injected html from eddy-ojb

Author: Mark Gibbs

demo/demo/dash_apps.py

@@ -0,0 +1,104 @@
+'''Dash demonstration application
+
+TODO attribution here
+'''
+
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+import plotly.graph_objs as go
+#import dpd_components as dpd
+import numpy as np
+from django_plotly_dash import DjangoDash
+
+#from .urls import app_name
+app_name ="DPD demo application"
+
+dashboard_name1 = 'dash_example_1'
+dash_example1 = DjangoDash(name=dashboard_name1,
+                 serve_locally=True,
+                 app_name=app_name
+                 )
+
+# Below is a random Dash app.
+# I encountered no major problems in using Dash this way. I did encounter problems but it was because
+# I was using e.g. Bootstrap inconsistenyly across the dash layout. Staying consistent worked fine for me.
+dash_example1.layout = html.Div(id='main',
+                      children=[
+
+                                 html.Div([
+                                            dcc.Dropdown(
+                                                id='my-dropdown1',
+                                                options=[
+                                                    {'label': 'New York City', 'value': 'NYC'},
+                                                    {'label': 'Montreal', 'value': 'MTL'},
+                                                    {'label': 'San Francisco', 'value': 'SF'}
+                                                ],
+                                                value='NYC',
+                                                className='col-md-12',
+
+                                            ),
+                                            html.Div(id='test-output-div')
+                                        ]),
+
+                                    dcc.Dropdown(
+                                        id='my-dropdown2',
+                                        options=[
+                                            {'label': 'Oranges', 'value': 'Oranges'},
+                                            {'label': 'Plums', 'value': 'Plums'},
+                                            {'label': 'Peaches', 'value': 'Peaches'}
+                                        ],
+                                        value='Oranges',
+                                        className='col-md-12',
+                                    ),
+
+                                    html.Div(id='test-output-div2')
+
+                                ]) # end of 'main'
+
+@dash_example1.expanded_callback(
+    dash.dependencies.Output('test-output-div', 'children'),
+    [dash.dependencies.Input('my-dropdown1', 'value')])
+def callback_test(*args, **kwargs):
+
+    # Creating a random Graph from a Plotly example:
+    N = 500
+    random_x = np.linspace(0, 1, N)
+    random_y = np.random.randn(N)
+
+    # Create a trace
+    trace = go.Scatter(
+        x = random_x,
+        y = random_y
+    )
+
+    data = [trace]
+
+    layout = dict(title='',
+               yaxis = dict(zeroline = False, title='Total Expense (£)',),
+               xaxis = dict(zeroline = False, title='Date', tickangle=0),
+               margin=dict(t=20, b=50, l=50, r=40),
+               height=350,
+              )
+
+
+    fig = dict(data=data, layout=layout)
+    line_graph = dcc.Graph(id='line-area-graph2', figure=fig, style={'display':'inline-block', 'width':'100%',
+                                                                 'height': '100%;'} )
+    children = [line_graph]
+
+    return children
+
+
+@dash_example1.expanded_callback(
+    dash.dependencies.Output('test-output-div2', 'children'),
+    [dash.dependencies.Input('my-dropdown2', 'value')])
+def callback_test2(*args, **kwargs):
+
+    print(args)
+    print(kwargs)
+
+    children = [html.Div(["You have selected %s." %(args[0])]),
+                html.Div(["The session context message is '%s'" %(kwargs['session_state']['django_to_dash_context'])])]
+
+    return children

demo/demo/templates/base.html

@@ -1,17 +1,17 @@
 <!DOCTYPE HTML>
 <html>
  <head>
-   {%load plotly_dash%}
-   {%load staticfiles%}
-   {%load bootstrap4%}
-   {%bootstrap_css%}
-   {%bootstrap_javascript jquery="full"%}
-   {%block extra_header%}{%endblock%}
-   {%block app_header_css%}
+   {% load plotly_dash%}
+   {% load staticfiles%}
+   {% load bootstrap4%}
+   {% bootstrap_css%}
+   {% bootstrap_javascript jquery="full"%}
+   {% block extra_header%}{% endblock%}
+   {% block app_header_css%}
    <link rel="stylesheet" type="text/css" href="{%static "demo/demo.css"%}"></link>
-   {%endblock%}
-   {%plotly_header%}
-   <title>Django Plotly Dash Examples - {%block title%}{%endblock%}</title>
+   {% endblock%}
+   {% plotly_header%}
+   <title>Django Plotly Dash Examples - {% block title%}{% endblock%}</title>
  </head>
  <body>
    <header>
@@ -20,28 +20,33 @@
          <a class="navbar-brand" href="#">
            <img src="{%static "demo/logo.svg"%}" alt="Logo"/>
          </a>
-         {%block demo_items%}
+         {% block demo_items %}
          <a class="nav-item nav-link btn btn-lg" href="{%url "home"%}">Contents</a>
+         {% block demo_menu_items %}
+         {% if 0 %}
          <a class="nav-item nav-link btn btn-lg" href="{%url "demo-one"%}">One - Simple Use</a>
          <a class="nav-item nav-link btn btn-lg" href="{%url "demo-two"%}">Two - Initial State</a>
          <a class="nav-item nav-link btn btn-lg" href="{%url "demo-three"%}">Three - Enhanced Callbacks</a>
          <a class="nav-item nav-link btn btn-lg" href="{%url "demo-four"%}">Four - Live Updating</a>
-         <a class="nav-item nav-link btn btn-lg" href="{%url "demo-five"%}">Five - Direct Embedding</a>
+         <a class="nav-item nav-link btn btn-lg" href="{%url "demo-five"%}">Five - Direct Injection</a>
+         <a class="nav-item nav-link btn btn-lg" href="{%url "demo-six"%}">Six - Simple Injection</a>
+         {% endif %}
+         {% endblock %}
          <a class="nav-item nav-link btn btn-lg"
             target="_blank"
             href="https://django-plotly-dash.readthedocs.io/en/latest/">Online Documentation</a>
-         {%endblock%}
+         {% endblock %}
        </div>
      </nav>
    </header>
    <main>
      <div class="container">
-       {%block content%}{%endblock%}
+       {% block content%}{% endblock%}
      </div>
    </main>
-   {%block footer%}
-   {%endblock%}
+   {% block footer%}
+   {% endblock%}
  </body>
- {%block post_body%}{%endblock%}
- {%plotly_footer%}
+ {% block post_body%}{% endblock%}
+ {% plotly_footer%}
 </html>

demo/demo/templates/demo_six.html

@@ -0,0 +1,36 @@
+{%extends "base.html"%}
+{%load plotly_dash%}
+
+{%block title%}Demo Six - Simple Injection{%endblock%}
+
+{%block content%}
+
+<h1>Simple embedding</h1>
+
+<p>
+Direct insertion of html into a web page.
+</p>
+
+<p>
+This demo is based on a contribution by, and
+with thanks to, <a href="https://github.com/eddy-ojb">@eddy-ojb</a>
+</p>
+
+<div class="card bg-light border-dark">
+  <div class="card-body">
+    <p><span>{</span>% load plotly_dash %}</p>
+    <p>&lt;div class="<span>{</span>% plotly_class name="dash_example_1" template_type="div-direct"%}">
+    <p class="ml-3"><span>{</span>% plotly_direct name="dash_example_1" %}</p>
+    <p>&lt;\div>
+  </div>
+</div>
+<p></p>
+<div class="card border-dark">
+  <div class="card-body">
+    <div class="{%plotly_class name="dash_example_1" template_type="div-direct"%}">
+      {%plotly_direct name="dash_example_1"%}
+    </div>
+  </div>
+</div>
+<p></p>
+{%endblock%}

demo/demo/templates/index.html

@@ -12,5 +12,6 @@ <h1>Demonstration Application</h1>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-three"%}">Demo Three</a> - adding Django features with enhanced callbacks</li>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-four"%}">Demo Four</a> - live updating of apps by pushing from the Django server</li>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-five"%}">Demo Five</a> - injection of a Dash application without embedding in an html iframe</li>
+    <li><a class="btn btn-primary btnspace" href="{%url "demo-six"%}">Demo Six</a> - simple html injection example</li>
   </ul>
 {%endblock%}

demo/demo/urls.py

@@ -27,16 +27,20 @@
 
 # Load demo plotly apps - this triggers their registration
 import demo.plotly_apps # pylint: disable=unused-import
+import demo.dash_apps # pylint: disable=unused-import
 
 from django_plotly_dash.views import add_to_session
 
+from .views import dash_example_1_view
+
 urlpatterns = [
     url('^$', TemplateView.as_view(template_name='index.html'), name="home"),
     url('^demo-one$', TemplateView.as_view(template_name='demo_one.html'), name="demo-one"),
     url('^demo-two$', TemplateView.as_view(template_name='demo_two.html'), name="demo-two"),
     url('^demo-three$', TemplateView.as_view(template_name='demo_three.html'), name="demo-three"),
     url('^demo-four$', TemplateView.as_view(template_name='demo_four.html'), name="demo-four"),
     url('^demo-five$', TemplateView.as_view(template_name='demo_five.html'), name="demo-five"),
+    url('^demo-six', dash_example_1_view, name="demo-six"),
     url('^admin/', admin.site.urls),
     url('^django_plotly_dash/', include('django_plotly_dash.urls')),
 

demo/demo/views.py

@@ -0,0 +1,16 @@
+'''
+Example view generating non-trivial content
+'''
+
+from django.shortcuts import render
+
+def dash_example_1_view(request, template_name="demo_six.html",**kwargs):
+    
+    context = {}
+    
+    # create some context to send over to Dash:
+    dash_context = request.session.get("django_plotly_dash", dict())
+    dash_context['django_to_dash_context'] = "I am Dash receiving context from Django"
+    request.session['django_plotly_dash'] = dash_context
+
+    return render(request, template_name=template_name, context=context)