introduction

Je travaille sur un projet de collecte de données en utilisant python et pandas. Quand je cherchais un outil de création de tableau de bord réalisé par python, je suis arrivé à dash. Ce qui suit est un résumé et un mémorandum des résultats obtenus lors de la vérification du tableau de bord et de la création de l'échantillon.

Qu'est-ce que Dash

outil de création d'applications Web sur mesure Basé sur Flask, écrit en python sera converti en React.js https://plot.ly/dash/

Il existe de nombreux composants qui affichent les données graphiquement. La caractéristique est que les données peuvent être facilement visualisées Exemple) https://dash-gallery.plotly.host/Portal/

Html Elements

app.layout = html.Div(children=[
  html.H1(id='elm1', className='hoge' children=[]),
  #Abréviation
  html.Div(id='elm2', className='hoge' children=[]),
]

Un composant html est fourni https://dash.plot.ly/dash-html-components Il est dessiné en le passant à app.layout.

Lorsque la structure est imbriquée, d'autres éléments enfants sont ajoutés aux enfants de l'élément enfant mis dans children = ... Cela semble compliqué sous la forme de, il peut donc être préférable de le composant en plusieurs parties

S'il s'agit d'un HTML partiellement statique


import dash_core_components as dcc

dcc.Markdown('''

#Titre
##Titre 2
Texte
''')

Markdown peut également être décrit, il semble donc préférable d'utiliser ceci 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'},
        ],

Vous pouvez facilement créer un graphique à barres en passant une valeur au composant Graph

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'),
),

Vous pouvez créer une table à partir d'un dictionnaire ou d'un cadre de données pandas

Callback


@app.callback(
    Output('table', 'data'),
    [Input('region-dropdown', 'value')])
def update_table(value):
    return df.query('Nom de Ville== @value').to_dict('records')

Le rappel de l'interface utilisateur peut être déclenché en associant l'entrée et la sortie des parties de l'interface utilisateur.

Les pièces de l'interface utilisateur sont essentielles

Le but est de lier les parties de l'interface utilisateur,


#app.layout
dcc.Location(id='location', refresh=False),
　　　

@app.callback(
    [Output('hoge', 'value1'),
    Input('location', 'pathname')])
def pass_change(value1, pathname):

Placez une partie d'interface utilisateur appelée dcc.Location pour recevoir les modifications dans le chemin de l'url Doit recevoir la valeur de modification comme rappel

La sortie n'a qu'une seule loi

Dans Dash, la sortie de rappel est limitée à un seul


@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):

Comme mentionné ci-dessus, si le rappel avec hoge en sortie est dupliqué,

DuplicateCallbackOutput You have already assigned a callback to the output An output can only havea single callback function.

Je me fâche comme ci-dessus.

Il est nécessaire de combiner l'entrée pour la sortie, mais je veux traiter une autre sortie pour l'entrée Dans certains cas, vous devez bien concevoir.

@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'),
   ])

Veuillez noter que ce sera un énorme rappel où de nombreuses sorties sont rassemblées pour de nombreuses entrées.

Rappel de bouton

Lorsque j'ai vérifié si je pouvais prendre l'événement de clic du bouton, Il y avait une classe Event dans le passé, mais elle est maintenant supprimée.

Il y a quelque chose appelé n_clicks dans la propriété de la classe button, En regardant l'exemple officiel, n_clicks augmente chaque fois que vous appuyez sur un bouton https://dash.plot.ly/dash-core-components/button

C'est douloureux de ne pas savoir qu'il a été pressé sans mettre en cache les n_clicks de tous les boutons Donc, quand j'ai cherché une propriété, il y avait quelque chose qui s'appelait n_clicks_timestamp, donc Le jugement de clic est effectué en comparant l'horodatage avec l'heure actuelle, comme indiqué ci-dessous.


@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

Je ne sais pas si c'est vraiment la bonne façon de le faire Veuillez me dire qui est familier avec Dash

Impressions

Il y a quelques bizarreries dans la convivialité, mais il est intéressant de pouvoir écrire des tableaux et des graphiques avec une très petite quantité de code. S'il y a une solution pour les inconvénients énumérés cette fois, je voudrais les ajouter un par un.

Impressions de toucher Dash, un outil de visualisation de données réalisé par python