Add an example using dash-bootstrap-components (#98)

* v0.9.5 packages for future reference

* Outline of application using dash-bootstrap-components

* Extended urls to cover components in path name

* Added use of existing bootstrap links

Author: delsim

demo/demo/bootstrap_app.py

@@ -0,0 +1,40 @@
+'''
+Dash bootstrap component demo app
+
+Copyright (c) 2018 Gibbs Consulting and others - see CONTRIBUTIONS.md
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+'''
+
+import dash
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+from django_plotly_dash import DjangoDash
+
+dd = DjangoDash("BootstrapApplication",
+                add_bootstrap_links=True)
+
+dd.layout = html.Div(
+    [
+    dbc.Alert("This is an alert", color="primary"),
+    dbc.Alert("Danger", color="danger"),
+    ]
+    )
+

demo/demo/settings.py

@@ -187,6 +187,7 @@
                              'dash_html_components',
                              'dash_renderer',
                              'dpd_components',
+                             'dash_bootstrap_components',
                             ]:
 
         module = importlib.import_module(dash_module_name)

demo/demo/templates/demo_seven.html

@@ -0,0 +1,27 @@
+{%extends "base.html"%}
+{%load plotly_dash%}
+
+{%block title%}Demo Seven - Dash Bootstrap Components{%endblock%}
+
+{%block content%}
+<h1>Dash Bootstrap Components</h1>
+<p>
+  This example demonstrates the use of the dash-bootstrap-components package.
+</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="BootstrapApplication"%}">
+    <p class="ml-3"><span>{</span>% plotly_app name="BootstrapApplication" %}</p>
+    <p>&lt;\div>
+  </div>
+</div>
+<p></p>
+<div class="card border-dark">
+  <div class="card-body">
+    <div class="{%plotly_class name="BootstrapApplication"%}">
+      {%plotly_app name="BootstrapApplication"%}
+    </div>
+  </div>
+</div>
+{%endblock%}

demo/demo/templates/index.html

@@ -13,5 +13,6 @@ <h1>Demonstration Application</h1>
     <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>
+    <li><a class="btn btn-primary btnspace" href="{%url "demo-seven"%}">Demo Seven</a> - dash-bootstrap-components example</li>
   </ul>
 {%endblock%}

demo/demo/urls.py

@@ -26,8 +26,9 @@
 from django.conf.urls.static import static
 
 # Load demo plotly apps - this triggers their registration
-import demo.plotly_apps # pylint: disable=unused-import
-import demo.dash_apps # pylint: disable=unused-import
+import demo.plotly_apps    # pylint: disable=unused-import
+import demo.dash_apps      # pylint: disable=unused-import
+import demo.bootstrap_app  # pylint: disable=unused-import
 
 from django_plotly_dash.views import add_to_session
 
@@ -41,6 +42,7 @@
     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('^demo-seven', TemplateView.as_view(template_name='demo_seven.html'), name="demo-seven"),
     url('^admin/', admin.site.urls),
     url('^django_plotly_dash/', include('django_plotly_dash.urls')),
 

django_plotly_dash/urls.py

@@ -27,7 +27,7 @@
 from django.urls import path
 from django.views.decorators.csrf import csrf_exempt
 
-from .views import routes, layout, dependencies, update, main_view, component_suites
+from .views import routes, layout, dependencies, update, main_view, component_suites, component_component_suites
 
 from .app_name import app_name, main_view_label
 
@@ -47,6 +47,7 @@
                                                       ('_dash-update-component', csrf_exempt(update), 'update-component', '', ),
                                                       ('', main_view, main_view_label, '', ),
                                                       ('_dash-component-suites', component_suites, 'component-suites', '/<slug:component>/<resource>', ),
+                                                      ('_dash-component-suites', component_component_suites, 'component-component-suites', '/<slug:component>/_components/<resource>', ),
                                                      ]:
 
         route_name = '%s%s%s' % (name_prefix, name, name_suffix)

django_plotly_dash/views.py

@@ -100,14 +100,21 @@ def main_view(request, ident, stateless=False, cache_id=None, **kwargs):
     resp = view_func()
     return HttpResponse(resp)
 
-def component_suites(request, resource=None, component=None, **kwargs):
+def component_component_suites(request, resource=None, component=None, **kwargs):
+    return component_suites(request,
+                            resource=resource,
+                            component=component,
+                            extra_element="_components/",
+                            **kwargs)
+
+def component_suites(request, resource=None, component=None, extra_element="", **kwargs):
     'Return part of a client-side component, served locally for some reason'
 
     get_params = request.GET.urlencode()
     if get_params:
-        redone_url = "/static/dash/%s/%s?%s" %(component, resource, get_params)
+        redone_url = "/static/dash/%s/%s%s?%s" %(component, extra_element, resource, get_params)
     else:
-        redone_url = "/static/dash/%s/%s" %(component, resource)
+        redone_url = "/static/dash/%s/%s%s" %(component, extra_element, resource)
 
     return HttpResponseRedirect(redirect_to=redone_url)
 

frozen_dev.txt

@@ -6,31 +6,35 @@ astroid==2.0.4
 async-timeout==2.0.1
 atomicwrites==1.2.1
 attrs==18.2.0
-autobahn==18.8.2
+autobahn==18.9.2
 Automat==0.7.0
 Babel==2.6.0
+bleach==3.0.2
 certifi==2018.8.24
+cffi==1.11.5
 channels==2.1.3
 channels-redis==2.3.0
 chardet==3.0.4
-click==6.7
+Click==7.0
+cmarkgfm==0.4.2
 constantly==15.1.0
 coverage==4.5.1
 daphne==2.2.2
-dash==0.28.5
-dash-core-components==0.28.1
-dash-html-components==0.11.0
-dash-renderer==0.13.2
+dash==0.28.2
+dash-core-components==0.33.0
+dash-html-components==0.13.2
+dash-renderer==0.14.3
 decorator==4.3.0
-Django==2.1.1
+Django==2.1.2
 django-bootstrap4==0.0.7
--e git+https://github.com/delsim/django-plotly-dash.git@1a6a184eac871a0a675fa971fe4c10c3dac195d8#egg=django_plotly_dash
+-e git+https://github.com/delsim/django-plotly-dash.git@affccd8b280b2fdbc7f7e2d975b9cf4c7ace5f06#egg=django_plotly_dash
 django-redis==4.9.0
 docopt==0.6.2
 docutils==0.14
 dpd-components==0.1.0
 Flask==1.0.2
 Flask-Compress==1.4.0
+future==0.16.0
 grip==4.5.2
 hiredis==0.2.0
 hyperlink==18.0.0
@@ -45,34 +49,36 @@ jsonschema==2.6.0
 jupyter-core==4.4.0
 lazy-object-proxy==1.3.1
 livereload==2.5.2
-Markdown==2.6.11
+Markdown==3.0.1
 MarkupSafe==1.0
 mccabe==0.6.1
 more-itertools==4.3.0
 msgpack==0.5.6
 nbformat==4.4.0
-numpy==1.15.1
+numpy==1.15.2
 packaging==18.0
 pandas==0.23.4
 path-and-address==2.0.1
 pathlib2==2.3.2
 pathtools==0.1.2
 pkg-resources==0.0.0
 pkginfo==1.4.2
-plotly==3.1.1
+plotly==3.3.0
 pluggy==0.7.1
 port-for==0.3.1
-py==1.6.0
+py==1.7.0
+pycparser==2.19
 Pygments==2.2.0
 PyHamcrest==1.9.0
 pylint==2.1.1
-pyparsing==2.3.0
-pytest==3.7.4
-pytest-cov==2.5.1
-pytest-django==3.4.2
+pyparsing==2.2.2
+pytest==3.8.2
+pytest-cov==2.6.0
+pytest-django==3.4.3
 python-dateutil==2.7.3
 pytz==2018.5
 PyYAML==3.13
+readme-renderer==22.0
 redis==2.10.6
 requests==2.19.1
 requests-toolbelt==0.8.0
@@ -83,15 +89,16 @@ Sphinx==1.8.1
 sphinx-autobuild==0.7.1
 sphinx-rtd-theme==0.4.2
 sphinxcontrib-websupport==1.1.0
-tornado==5.1
-tqdm==4.25.0
+tornado==5.1.1
+tqdm==4.26.0
 traitlets==4.3.2
-twine==1.11.0
+twine==1.12.1
 Twisted==18.7.0
 txaio==18.8.1
 typed-ast==1.1.0
 urllib3==1.23
 watchdog==0.9.0
+webencodings==0.5.1
 Werkzeug==0.14.1
 wrapt==1.10.11
 zope.interface==4.5.0

requirements.txt

@@ -5,5 +5,7 @@ dash-renderer
 plotly
 dpd-components
 
+dash-bootstrap-components
+
 Django>=2
 Flask>=1.0.2