turbo_dash
automated Dash framework with templates
Quickstart
pip install turbo-dash
Goal
The goal of the turbo_dash project is to create a wrapper for plotly dash that allows an
inexperienced python developer to quickly create a simple, clean, interactive, easy to manipulate dashboard.
OKRs
| Objectives | Key Results | Status |
|---|---|---|
| 1. `turbo_dash` requires minimal python, plotly, or dash knowledge to create a fully functional dashboard, as measured by: | i. less than 10 lines of code required per object | grey |
| ii. full documentation with examples for every developer-facing object | grey | |
| iii. a suite of user-friendly templates that design the layout for the developer | grey | |
| 2. `turbo_dash` executes commands quickly and displays minimal lag between input and output, as measured by: | i. less than 1s load times for datasets up to 1M rows on a standard laptop CPU | grey |
| 3. `turbo_dash` doesn't break, as measured by: | i. comprehensive test suite | grey |
| ii. full type-hinting with no errors shown by `mypy` | grey |
Example app
./app.py
import turbo_dash
# grab our data
df = turbo_dash.data.gapminder()
# Here's where all the magic happens. This creates our dashboard.
turbo_dashboard = turbo_dash.turbo_dashboard(
# template
template='turbo-dark',
# dashboard pages
dashboard_page_list=[
# App 1
turbo_dash.turbo_dashboard_page(
# page information
url='/app1',
name='App 1',
# data
df=df, # setting our data at the page level allows us to use different datasets for each page
# menu filters, i.e. dropdown, slider, etc
menu_filter_list=[
turbo_dash.turbo_filter(filter_type='Dropdown-multi', column='country'),
turbo_dash.turbo_filter(filter_type='RangeSlider', column='year'),
],
# outputs, i.e. graphs, images, etc
output_list=[
# bar graph of population vs year
turbo_dash.turbo_output(
output_type='bar',
x='year',
y='pop',
color='continent',
hover_name='country',
),
# line graph of life expectancy vs year with an input to change the y axis to a different column
turbo_dash.turbo_output(
output_type='line',
x='year',
y='lifeExp',
color='country',
chart_input_list=['y'],
),
],
),
# App 2
turbo_dash.turbo_dashboard_page(
# page information
url='/app2',
name='App 2',
# data
df=df, # setting our data at the page level allows us to use different datasets for each page
# menu filters, i.e. dropdown, slider, etc
menu_filter_list=[
turbo_dash.turbo_filter(filter_type='Checklist', column='continent'),
],
# outputs, i.e. graphs, images, etc
output_list=[
# line graph of gdpPercap vs year
turbo_dash.turbo_output(
output_type='line',
x='year',
y='gdpPercap',
color='country',
),
],
),
# Playground
turbo_dash.turbo_dashboard_page(
# page information
url='/playground',
name='Playground',
# data
df=df, # setting our data at the page level allows us to use different datasets for each page
# menu filters, i.e. dropdown, slider, etc
menu_filter_list=[
turbo_dash.turbo_filter(filter_type='Checklist', column='continent'),
turbo_dash.turbo_filter(filter_type='Dropdown-multi', column='country'),
turbo_dash.turbo_filter(filter_type='RangeSlider', column='year'),
],
# outputs, i.e. graphs, images, etc
output_list=[
# line graph of gdpPercap vs year
turbo_dash.turbo_output(
output_type='line',
x='year',
y='gdpPercap',
color='country',
chart_input_list=[
'output_type',
'x',
'y',
'z',
'color',
'size',
'hover_name',
'hover_data',
'locations',
'locationmode',
'projection',
],
),
],
),
],
)
# Execute the code in a development environment. For deploying in production, see the "Deploying in Production"
# section of the README here: https://github.com/turbo3136/turbo_dash/blob/master/README.md
if __name__ == '__main__':
server = turbo_dashboard.run_dashboard(app_name=__name__)Screenshots
app1:
playground:
Deploying in Production
What I did (probably unstable and stupid):
Combining Flask, Gunicorn, and Docker reference
- Follow that guide above, kind of. Our strategy is going to be using
- Docker to create a container that keeps our code nice and tidy
- Gunicorn to create the WSGI HTTP server (sure, I know some of these words)
- Create the files and structure you see in the
servicesdirectory- Notice that the
project/__init__.pyfile contains your dashboard code- Also notice that you can still use the Dash functionality that automatically
imports CSS from the
assetsdirectory - You can also use the
staticdirectory to save any content you want to display like the homepage image, logo, or 404 page. Just add an argument for those files when you create theturbo_dash.turbo_dashboard()instance
- Also notice that you can still use the Dash functionality that automatically
imports CSS from the
- Everything else is docker and flask stuff in service of making that code run
- Notice that the
- You'll also need the
docker-compose.ymlanddocker-compose.prod.ymlfiles that create your docker image - And you'll need the
.env.devand.env.prodfiles that the docker compose files pull from - Good luck! If you're reading this doc, there's at least an 80% chance you know more than I do, so there's no point in asking me why I did X.
