Repository files navigation

Exposeplotly dash apps asDjango tags. Multiple Dash apps canthen be embedded into a single web page, persist and share internal state, and also have access to thecurrent user and session variables.

See the source for this project here:https://github.com/GibbsConsulting/django-plotly-dash

This README file provides a short guide to installing and using the package, and alsooutlines how to run the demonstration application.

More detailed informationcan be found in the online documentation athttps://readthedocs.org/projects/django-plotly-dash

An online version of the demo can be found athttps://djangoplotlydash.com

First, install the package. This will also install plotly and some dash packages if they are not already present.

pip install django_plotly_dash

Then, adddjango_plotly_dash toINSTALLED_APPS in your Djangosettings.py file

INSTALLED_APPS = [    ...    'django_plotly_dash.apps.DjangoPlotlyDashConfig',    ...    ]

The application's routes need to be registered within the routing structure by an appropriateinclude statement inaurls.py file. Note:django_plotly_dash is not a name of your application, it is referring to the inner namespace of this library. Please do not skip this step:

urlpatterns = [    ...    path('django_plotly_dash/', include('django_plotly_dash.urls')),]

The name within the URL is not important and can be changed.

For the final installation step, a migration is needed to update thedatabase:

./manage.py migrate

The use of frames withinHTML documents has to be enabled by adding to thesettings.py file:

X_FRAME_OPTIONS = 'SAMEORIGIN'

Further configuration, including live updating to share applicationstate, is described in theonline documentation.

The source repository contains a demo application. To clone the repo and lauch the demo:

git clone https://github.com/GibbsConsulting/django-plotly-dash.gitcd django-plotly-dash./make_env# sets up a virtual environment for development#   with direct use of the source code for the package./prepare_redis# downloads a redis docker container#   and launches it with default settings#   *THIS STEP IS OPTIONAL*./prepare_demo# prepares and launches the demo#   using the Django debug server at http://localhost:8000

To use existing dash applications, first register them using theDjangoDash class. Thisreplaces theDash class of thedash package.

Taking a very simple example inspired by the excellentgetting started documentation:

importdashfromdashimportdcc,htmlfromdjango_plotly_dashimportDjangoDashapp=DjangoDash('SimpleExample')app.layout=html.Div([dcc.RadioItems(id='dropdown-color',options=[{'label':c,'value':c.lower()}forcin ['Red','Green','Blue']],value='red'    ),html.Div(id='output-color'),dcc.RadioItems(id='dropdown-size',options=[{'label':i,'value':j}fori,jin [('L','large'), ('M','medium'), ('S','small')]],value='medium'    ),html.Div(id='output-size')])@app.callback(dash.dependencies.Output('output-color','children'),    [dash.dependencies.Input('dropdown-color','value')])defcallback_color(dropdown_value):return"The selected color is %s."%dropdown_value@app.callback(dash.dependencies.Output('output-size','children'),    [dash.dependencies.Input('dropdown-color','value'),dash.dependencies.Input('dropdown-size','value')])defcallback_size(dropdown_color,dropdown_size):return"The chosen T-shirt is a %s %s one."%(dropdown_size,dropdown_color)

Note that theDjangoDash constructor requires a name to be specified. This name is then used to identify the dash app intemplates:

{%loadplotly_dash%}{%plotly_appname="SimpleExample"%}

The registration code needs to be in a locationthat will be imported into the Django process before any model or template tag attempts to use it. The example Django applicationin the demo subdirectory achieves this through an import in the mainurls.py file; anyviews.py would also be sufficient.

Whilst this example allows for the direct use of existingDash applications, it does not provide for the sharing or updating ofinternal state. Theonline documentation provides details on using theseand other additional features.

Themake_env script sets up the development environment, and pulls in the packagesspecified in thedev_requirements.txt file. Thecheck_code script invokes the test suite (usingpytest) as wellas invokingpylint on both the package and the associated demo.