Introduction

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.

What is Dash

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

table

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.

UI parts are essential

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

Output has only one law

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.

Button Callback

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

Impressions

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.

Impressions of touching Dash, a data visualization tool made by python