I'm working on a project to collect data using python and pandas. When I was looking for a python dashboard creation tool, I arrived at dash. The following is a summary and memorandum of findings obtained during dash verification and sample creation.
plotly web application creation tool Based on Flask, written in python will be converted to React.js https://plot.ly/dash/
There are many components that display data graphically. The feature is that the data can be easily visualized. Example) https://dash-gallery.plotly.host/Portal/
Html Elements
app.layout = html.Div(children=[
html.H1(id='elm1', className='hoge' children=[]),
#Abbreviation
html.Div(id='elm2', className='hoge' children=[]),
]
An html component is provided, https://dash.plot.ly/dash-html-components It is drawn by passing it to app.layout.
When the structure is nested, more child elements are added to the children of the child element put in children = ... It seems to be complicated in the form of, so it may be better to component it in parts
If it's partially static html
import dash_core_components as dcc
dcc.Markdown('''
#Heading
##Heading 2
Text
''')
Markdown can also be described, so it seems better to use this https://dash.plot.ly/dash-core-components/markdown
Graphs
https://dash-gallery.plotly.host/Portal/
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
You can easily create a bar chart by passing a value to the Graph component
import pandas as pd
dataframe = pd.read_csv('url')
dash_table.DataTable(
id='table',
columns=[ {"name": i, "id": i} for i in dataframe.columns],
hidden_columns=[],
row_selectable="single",
data=dataframe.to_dict('records'),
),
You can create a table from a dictionary or pandas dataframe
Callback
@app.callback(
Output('table', 'data'),
[Input('region-dropdown', 'value')])
def update_table(value):
return df.query('City name== @value').to_dict('records')
UI callback can be fired by associating Input and Output of UI parts.
The point is to link UI parts,
#app.layout
dcc.Location(id='location', refresh=False),
@app.callback(
[Output('hoge', 'value1'),
Input('location', 'pathname')])
def pass_change(value1, pathname):
Put a UI part called dcc.Location to receive the change of url path Must receive the change value as its callback
In Dash, callback output is limited to only one
@app.callback(
Output('hoge', 'children'),
Input('fuga', 'value2'))
def func(value2):
@app.callback(
Output('hoge', 'children'),
[Input('fuga', 'value'),
Input('hoyo', 'value')
])
def func(value1, value2):
As mentioned above, if there are duplicate callbacks with hoge as output,
DuplicateCallbackOutput You have already assigned a callback to the output An output can only havea single callback function.
I get angry as above.
It is necessary to combine Input for Output, but I want to process another Output for Input In some cases, you have to design well.
@app.callback(
[Output('hoge', 'children'),
Output('hoge', 'children'),
Output('hoge', 'children'),
Output('hoge', 'children'),
Output('hoge', 'children'),
],
[Input('fuga1', 'value'),
Input('fuga2', 'value'),
Input('fuga3', 'value'),
Input('fuga4', 'value'),
Input('fuga5', 'value'),
])
Please note that it will be a huge Callback with many Outputs gathered for many Inputs.
When I investigated whether I could take the click event of the button, There was an Event class in the past, but it is now removed.
There is something called n_clicks in the property of the button class, Looking at the official example, n_clicks increases every time you press a button https://dash.plot.ly/dash-core-components/button
It's painful not to know that it was pressed without caching the n_clicks of all the buttons So when I searched for property, there was something called n_clicks_timestamp, so The click judgment is performed by comparing the timestamp with the current time as shown below.
@app.callback(
Output('hoge', 'children'),
Input('close-button', 'n_clicks_timestamp')])
def click(n_clicks_timestamp):
if n_clicks_timestamp != None:
if (time.time() * 1000 - n_clicks_timestamp) < 1000:
return something
I'm not sure if this is really the right way to do it Please tell me who is familiar with Dash
There are some quirks in usability, but it is attractive to be able to write tables and graphs with a very small amount of code. If there is a solution for the cons listed this time, I would like to add them one by one.
Recommended Posts