Skip to content

Commit 44795fb

Browse files
author
Mark Gibbs
committed
Expanded demo to use bootstrap4 cards and also began separation into four parts
1 parent aa05e89 commit 44795fb

File tree

9 files changed

+102
-35
lines changed

9 files changed

+102
-35
lines changed

‎demo/demo/settings.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
'django.contrib.staticfiles',
4040

4141
'channels',
42+
'bootstrap4',
4243

4344
'django_plotly_dash.apps.DjangoPlotlyDashConfig',
4445
]

‎demo/demo/static/demo/demo.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/* Extra CSS markup for demo pages */
22

3+
.btnspace { margin-bottom: 10px; }

‎demo/demo/templates/base.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,26 @@
33
<head>
44
{%load plotly_dash%}
55
{%load staticfiles%}
6+
{%load bootstrap4%}
7+
{%bootstrap_css%}
8+
{%bootstrap_javascript jquery="full"%}
69
<link rel="stylesheet" type="text/css" href="{%static "demo/demo.css"%}"></link>
710
<title>Django Plotly Dash Examples - {%block title%}{%endblock%}</title>
811
</head>
9-
<body>
10-
<div>
11-
<p>Navigational links :
12-
<a href="{%url "home"%}">Contents</a>
13-
<a href="{%url "demo-one"%}">Demo Page One</a>
14-
<a href="{%url "demo-two"%}">Demo Page Two</a>
15-
</p>
16-
</div>
17-
<div>
12+
<body>
13+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14+
<div class="navbar-nav">
15+
<a class="navbar-brand" href="#">
16+
<img src="{%static "demo/logo.svg"%}" alt="Logo"/>
17+
</a>
18+
<a class="nav-item nav-link btn btn-lg" href="{%url "home"%}">Contents</a>
19+
<a class="nav-item nav-link btn btn-lg" href="{%url "demo-one"%}">Demo One - Simple Use</a>
20+
<a class="nav-item nav-link btn btn-lg" href="{%url "demo-two"%}">Demo Two - Initial State</a>
21+
<a class="nav-item nav-link btn btn-lg" href="{%url "demo-three"%}">Demo Three - Enhanced Callbacks</a>
22+
<a class="nav-item nav-link btn btn-lg" href="{%url "demo-four"%}">Demo Four - Live Updating</a>
23+
</div>
24+
</nav>
25+
<div class="container">
1826
{%block content%}{%endblock%}
1927
</div>
2028
</body>

‎demo/demo/templates/demo_four.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{%extends "base.html"%}
2+
{%load plotly_dash%}
3+
4+
{%block post_body%}{%plotly_message_pipe%}{%endblock%}
5+
6+
{%block title%}Demo Four - Live Updating{%endblock%}
7+
8+
{%block content%}
9+
<h1>Live Updating</h1>
10+
<div>
11+
WS Content here
12+
{%plotly_app slug="connected-2"%}
13+
</div>
14+
<div>
15+
WS Content here
16+
{%plotly_app slug="connected-2"%}
17+
</div>
18+
{%endblock%}

‎demo/demo/templates/demo_one.html‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
{%extends "base.html"%}
22
{%load plotly_dash%}
3+
34
{%block title%}Demo One - Simple Embedding{%endblock%}
4-
{%block post_body%}{%plotly_message_pipe%}{%endblock%}
5+
56
{%block content%}
67
<h1>Simple App Embedding</h1>
78
<div>
8-
This page demonstrates the simple embedding of plotly dash apps within a Django template.
9-
</div>
10-
<div>
11-
{%plotly_app slug="simpleexample-1" ratio=0.2 %}
12-
</div>
13-
<div>
14-
{%plotly_app name="SimpleExample"%}
9+
This is a simple example of use of a dash application within a Django template. Use of
10+
the plotly_app template tag with the name of a dash application represents the simplest use of
11+
the django_plotly_dash framework.
1512
</div>
16-
<div>
17-
Content here
18-
{%plotly_app name="Ex2"%}
13+
<div class="card bg-light border-dark">
14+
<div class="card-body">
15+
<p><span>{</span>% load plotly_dash %}</p>
16+
<p><span>{</span>% plotly_app name="SimpleExample" %}</p>
17+
</div>
1918
</div>
20-
<div>
21-
WS Content here
22-
{%plotly_app name="Connected"%}
23-
</div>
24-
<div>
25-
WS Content here
26-
{%plotly_app slug="connected-2"%}
19+
<p></p>
20+
<div class="card border-dark">
21+
<div class="card-body">
22+
{%plotly_app name="SimpleExample"%}
23+
</div>
2724
</div>
2825
{%endblock%}
2926

‎demo/demo/templates/demo_three.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{%extends "base.html"%}
2+
{%load plotly_dash%}
3+
4+
{%block post_body%}{%plotly_message_pipe%}{%endblock%}
5+
6+
{%block title%}Demo Three - Additional Callback Functionality{%endblock%}
7+
8+
{%block content%}
9+
<h1>Enhanced Callback Functionality</h1>
10+
<div>
11+
{%plotly_app slug="connected-2"%}
12+
</div>
13+
<div>
14+
WS Content here
15+
{%plotly_app name="Connected"%}
16+
</div>
17+
<div>
18+
WS Content here
19+
{%plotly_app slug="simpleexample-1"%}
20+
</div>
21+
{%endblock%}

‎demo/demo/templates/demo_two.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
{%extends "base.html"%}
22
{%load plotly_dash%}
3-
{%block post_body%}{%plotly_message_pipe%}{%endblock%}
4-
{%block title%}More Examples{%endblock%}
3+
4+
{%block title%}Demo Two - Initial State{%endblock%}
5+
56
{%block content%}
7+
<h1>Initial State</h1>
68
<div>
7-
WS Content here
8-
{%plotly_app slug="connected-2"%}
9+
Referring to an instance of a dash application, uniquely identified by a slug, will use the persisted
10+
representation of that app along with its initial state.
911
</div>
10-
<div>
11-
WS Content here
12-
{%plotly_app slug="simpleexample-1"%}
12+
<div class="card bg-light border-dark">
13+
<div class="card-body">
14+
<p><span>{</span>% load plotly_dash %}</p>
15+
<p><span>{</span>% plotly_app slug="simpleexample-1" ratio=0.2 %}</p>
16+
</div>
17+
</div>
18+
<p>
19+
</p>
20+
<div class="card border-dark">
21+
<div class="card-body">
22+
{%plotly_app slug="simpleexample-1" ratio=0.2 %}
23+
</div>
1324
</div>
1425
{%endblock%}

‎demo/demo/templates/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
{%extends "base.html"%}
22
{%block title%} Index{%endblock%}
33
{%block content%}
4+
<h1>django-plotly-dash demonstration application</h1>
45
<div>
5-
This is the django_plotly_dash demo application.
6+
This is the django_plotly_dash demo application. It contains a number of separate pages that
7+
exhibit different features of the integration of Plotly Dash into the Django framework.
68
</div>
9+
<ul class="btnspace">
10+
<li><a class="btn btn-primary btnspace" href="{%url "demo-one"%}">Demo One</a> - direct insertion of one or more Dash applications into a Django template</li>
11+
<li><a class="btn btn-primary btnspace" href="{%url "demo-two"%}">Demo Two</a> - storage of application initial state within Django</li>
12+
<li><a class="btn btn-primary btnspace" href="{%url "demo-three"%}">Demo Three</a> - adding Django features with enhanced callbacks</li>
13+
<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>
14+
</ul>
715
{%endblock%}

‎demo/demo/urls.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
url('^$', TemplateView.as_view(template_name='index.html'), name="home"),
2727
url('^demo-one$', TemplateView.as_view(template_name='demo_one.html'), name="demo-one"),
2828
url('^demo-two$', TemplateView.as_view(template_name='demo_two.html'), name="demo-two"),
29+
url('^demo-three$', TemplateView.as_view(template_name='demo_three.html'), name="demo-three"),
30+
url('^demo-four$', TemplateView.as_view(template_name='demo_four.html'), name="demo-four"),
2931
url('^admin/', admin.site.urls),
3032
url('^django_plotly_dash/', include('django_plotly_dash.urls')),
3133
]

0 commit comments

Comments
 (0)