Responsive template using Bootstrap (#201)

* Add a plotly_app_bootstrap template that uses Bootstrap4 to make the iframe containing the app responsive.

demo/demo/templates/demo_seven.html

@@ -11,16 +11,25 @@ <h1>Dash Bootstrap Components</h1>
 <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" ratio=0.2 %}</p>
-    <p>&lt;\div>
+    <p>&lt;div class="container"></p>
+    <p>&lt;div class="row"> &lt;div class="col-sm-6"></p>
+    <p class="ml-2">&lt;div class="<span>{</span>% plotly_class name="BootstrapApplication"%}"></p>
+    <p class="ml-3"><span>{</span>% plotly_app_bootstrap name="BootstrapApplication" aspect="21by9" %}</p>
+    <p class="ml-2">&lt;\div></p>
+    <p>&lt;\div> &lt;\div></p>
   </div>
 </div>
 <p></p>
 <div class="card border-dark">
   <div class="card-body">
-    <div class="{%plotly_class name="BootstrapApplication"%}">
-      {%plotly_app name="BootstrapApplication" ratio=0.2 %}
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-6">
+          <div class="{%plotly_class name="BootstrapApplication"%}">
+            {%plotly_app_bootstrap name="BootstrapApplication" aspect="21by9" %}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

django_plotly_dash/models.py

@@ -54,6 +54,9 @@ def __str__(self):
     def save(self, *args, **kwargs): # pylint: disable=arguments-differ
         if not self.slug or len(self.slug) < 2:
             self.slug = slugify(self.app_name)
+            exist_count = StatelessApp.objects.filter(slug__startswith=self.slug).count()
+            if exist_count > 0:
+                self.slug = self.slug + str(exist_count+1)
         return super(StatelessApp, self).save(*args, **kwargs)
 
     def as_dash_app(self):

django_plotly_dash/templates/django_plotly_dash/plotly_app.html

@@ -1,3 +1,3 @@
 <div style="{{dstyle}}">
-  <iframe src="{{app.base_url}}" style="{{istyle}}"frameborder="{{fbs}}"></iframe>
+  <iframe src="{{app.base_url}}" style="{{istyle}}" frameborder="{{fbs}}"></iframe>
 </div>

django_plotly_dash/templates/django_plotly_dash/plotly_app_bootstrap.html

@@ -0,0 +1,3 @@
+<div class="embed-responsive embed-responsive-{{aspect}}">
+  <iframe src="{{app.base_url}}" class="embed-responsive-item"></iframe>
+</div>

django_plotly_dash/templatetags/plotly_dash.py

@@ -77,6 +77,26 @@ def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborde
 
     return locals()
 
+@register.inclusion_tag("django_plotly_dash/plotly_app_bootstrap.html", takes_context=True)
+def plotly_app_bootstrap(context, name=None, slug=None, da=None, aspect="4by3", initial_arguments=None):
+    'Insert a dash application using a html iframe'
+
+    valid_ratios = ['21by9',
+                    '16by9',
+                    '4by3',
+                    '1by1',
+                    ]
+
+    if aspect not in valid_ratios:
+        raise ValueError("plotly_app_bootstrap requires a valid aspect ratio from %s, but was supplied %s" % (str(valid_ratios),
+                                                                                                              aspect))
+
+    cache_id = store_initial_arguments(context['request'], initial_arguments)
+
+    da, app = _locate_daapp(name, slug, da, cache_id=cache_id)
+
+    return locals()
+
 @register.simple_tag(takes_context=True)
 def plotly_header(context):
     'Insert placeholder for django-plotly-dash header content'

docs/template_tags.rst

@@ -42,6 +42,39 @@ a JSON-encoded string representation. Each entry in the dictionary has the ``id`
 value is a dictionary mapping property
 name keys to initial values.
 
+.. _plotly_app_bootstrap
+
+The ``plotly_app_bootstrap`` template tag
+-----------------------------------------
+
+This is a variant of the ``plotly_app`` template for use with responsive layouts using the Bootstrap library
+
+.. code-block:: jinja
+
+  {%load plotly_dash%}
+
+  {%plotly_app_bootstrap name="SimpleExample" aspect="16by9"%}
+
+The tag arguments are similar to the ``plotly_app`` ones:
+
+:name = None: The name of the application, as passed to a ``DjangoDash`` constructor.
+:slug = None: The slug of an existing ``DashApp`` instance.
+:da = None: An existing ``django_plotly_dash.models.DashApp`` model instance.
+:aspect= "4by3": The aspect ratio of the app. Should be one of 21by9, 16by9, 4by3 or 1by1.
+:initial_arguments = None: Initial arguments overriding app defaults and saved state.
+
+At least one of ``da``, ``slug`` or ``name`` must be provided. An object identified by ``slug`` will always be used, otherwise any
+identified by ``name`` will be. If either of these arguments are provided, they must resolve to valid objects even if
+not used. If neither are provided, then the model instance in ``da`` will be used.
+
+The aspect ratio has to be one of the available ones from
+the `Bootstrap <https://getbootstrap.com/docs/4.3/utilities/borders/>`_ framework.
+
+The ``initial_arguments`` are specified as a python dictionary. This can be the actual ``dict`` object, or
+a JSON-encoded string representation. Each entry in the dictionary has the ``id`` as key, and the corresponding
+value is a dictionary mapping property
+name keys to initial values.
+
 .. _plotly_direct:
 
 The ``plotly_direct`` template tag