A framework to create reusable Dash layout.
Project description
dash_component_template
A framework to create reusable Dash layout.
Free software: BSD license
Documentation: https://toltec-astro.github.io/dash_component_template
Features
This package provides a new API for creating Dash layout and callbacks.
The id and children are managed automatically. No deeply nested dicts and lists any more; unique ids of components are automatically created.
A re-usable template can be defined by sub-classing dash_component_template.ComponentTemplate. Instances of the template have children with unique ids and can be used anywhere in anyway inside a larger Dash app layout tree.
Get Started
Suppose we have the following Dash app (from Dash tutorial site):
# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for your data.
'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Let’s build a new app which have two columns of the same layout.
from dash_component_template import ComponentTemplate
import dash_bootstrap_components as dbc
import pandas as pd
import dash
import plotly.express as px
from dash import html, dcc
# This class defines a template that resembles the Dash example,
# with a title, subtitle, and graph for visualizing a data frame
class MyTableGraph(ComponentTemplate):
class Meta:
component_cls = dbc.Container
def __init__(self, title_text, subtitle_text, df, parent=None):
super().__init__(parent=parent)
self._title_text = title_text
self._subtitle_text = subtitle_text
self._df = df
def setup_layout(self, app):
container = self
container.child(html.Div, self._title_text)
container.child(html.Div, self._subtitle_text)
container.child(dcc.Graph, figure=self._make_fig())
super().setup_layout(app)
def _make_fig(self):
return px.bar(
self._df, x="Fruit", y="Amount", color="City", barmode="group")
# This class defines the app layout which have two columns each column
# contains an instance of the template defined above.
class MyPage(ComponentTemplate):
class Meta:
component_cls = dbc.Container
# define some data
df1 = pd.DataFrame({
"Fruit": [
"Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
df2 = pd.DataFrame({
"Fruit": [
"Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [5, 6, 7, 8, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
def setup_layout(self, app):
col1, col2 = self.grid(nrows=1, ncols=2, squeeze=True)
col1.child(MyTableGraph(
df=self.df1,
title_text='Hello Dash (left)',
subtitle_text='Re-usable template instance 1'
))
col2.child(MyTableGraph(
df=self.df2,
title_text='Hello Dash (right)',
subtitle_text='Re-usable template instance 2'
))
# this line is important which triggers children's setup_layout
super().setup_layout(app)
# Now create the app and set the bootstrap css
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# Instantiant the page tempalte, and call the setup layout function
# This only "declare" the structure of the Dash components. No actual
# Dash components are created yet.
page = MyPage()
page.setup_layout(app)
# Create and assign the app layout. The actual creation of Dash components
# are done here.
app.layout = page.layout
if __name__ == '__main__':
app.run_server(debug=True)
Live Examples
Live examples can be found in the TolTEC DR site.
Credits
This package was created with Cookiecutter and the audreyr/cookiecutter-pypackage project template.
History
0.1.0 (2021-11-09)
First release on PyPI.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for dash_component_template-0.1.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | c44dc477356abc8420a97dd1d1e850a813714eb45701a871426c7b2eb7a9cfd4 |
|
MD5 | 401bc2bee044ce3cd138b133e90eed97 |
|
BLAKE2b-256 | fadef32d82d1bf828ddda96fbcda723c182e2cef4a9bcd80c4ee2cab853d938c |
Hashes for dash_component_template-0.1.0-py2.py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 784f76428aefbabffb077610bd84766d7f90df63905c18ca523d734c6f5dd324 |
|
MD5 | c1d944700b9b36db5b0497002804c7c6 |
|
BLAKE2b-256 | e0d3b9ed20bcb4eb58c3dce29fa52c5ca00dcb2be14ca0d723e2121b59da562d |