PythonーWEBアプリケーションフレームワークDashの使い方(plotly.py関連)③

# 信頼できないプログラム例->実行せず
df = pd.DataFrame({
    'a': [1, 2, 3],
    'b': [4, 1, 4],
    'c': ['x', 'y', 'z'],
})

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in df['c'].unique()],
        value='a'
    ),
    html.Div(id='output'),
])

@app.callback(Output('output', 'children'),
              [Input('dropdown', 'value')])
def update_output_1(value):  
    # ここで「df」は"この関数の外側にある"変数(グローバル変数)の一例。
    # コールバックの中で(下のように)この変数を修正したり、新たな値を割り当てるのは安全ではない
    global df = df[df['c'] == value]    #(変数を修正している部分)安全でないため、これをしてはならない。
    return len(df)

#上記の例を修正したプログラム
df = pd.DataFrame({
    'a': [1, 2, 3],
    'b': [4, 1, 4],
    'c': ['x', 'y', 'z'],
})

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in df['c'].unique()],
        value='a'
    ),
    html.Div(id='output'),
])

@app.callback(Output('output', 'children'),
              [Input('dropdown', 'value')])
def update_output_1(value):
    # 安全のために、フィルターしたデータを新しい変数に割り当てている
    filtered_df = df[df['c'] == value]
    return len(filtered_df)

global_df = pd.read_csv('...')  #データ

app.layout = html.Div([
    dcc.Graph(id='graph'),
    html.Table(id='table'),
    dcc.Dropdown(id='dropdown'),
    # 中間値を保存する、アプリア内の隠れdivタグ
    html.Div(id='intermediate-value', style={'display': 'none'})
])


#①入力=Dropdown -> 出力=Div(中間保存場所)
@app.callback(Output('intermediate-value', 'children'),
              [Input('dropdown', 'value')])
def clean_data(value):
     # 負荷の高いデータ処理を処理し、Json化
     cleaned_df = your_expensive_clean_or_compute_step(value)
     ・・・・
     return cleaned_df.to_json(date_format='iso', orient='split')


#②入力=Div(中間保存場所にある①で計算したデータ) -> 出力=Graph
@app.callback(Output('graph', 'figure'),
              [Input('intermediate-value', 'children')])
def update_graph(jsonified_cleaned_data):
    #Jsonをpythonのデータ型に変換し再処理
    ・・・・
    dff = pd.read_json(jsonified_cleaned_data, orient='split')
    figure = create_figure(dff)
    return figure


#③入力=Div(中間保存場所にある①で計算したデータ) -> 出力=Table
@app.callback(Output('table', 'children'),
              [Input('intermediate-value', 'children')])
def update_table(jsonified_cleaned_data):
    #Jsonをpythonのデータ型に変換し再処理
    dff = pd.read_json(jsonified_cleaned_data, orient='split')
    table = create_table(dff)
    return table

#データの計算部
#入力=Dropdown -> データ計算 -> 出力=中間保管場所
@app.callback(
    Output('intermediate-value', 'children'),
    [Input('dropdown', 'value')])
def clean_data(value):
     # an expensive query step
     cleaned_df = your_expensive_clean_or_compute_step(value)

     # a few filter steps that compute the data
     # as it's needed in the future callbacks
     df_1 = cleaned_df[cleaned_df['fruit'] == 'apples']
     df_2 = cleaned_df[cleaned_df['fruit'] == 'oranges']
     df_3 = cleaned_df[cleaned_df['fruit'] == 'figs']

     datasets = {
         'df_1': df_1.to_json(orient='split', date_format='iso'),
         'df_2': df_2.to_json(orient='split', date_format='iso'),
         'df_3': df_3.to_json(orient='split', date_format='iso'),
     }

     return json.dumps(datasets)

#入力=中間保管場所のデータ -> 出力=Graph(1)
@app.callback(
    Output('graph', 'figure'),
    [Input('intermediate-value', 'children')])
def update_graph_1(jsonified_cleaned_data):
    datasets = json.loads(jsonified_cleaned_data)
    dff = pd.read_json(datasets['df_1'], orient='split')
    figure = create_figure_1(dff)
    return figure

#入力=中間保管場所のデータ -> 出力=Graph(2)
@app.callback(
    Output('graph', 'figure'),
    [Input('intermediate-value', 'children')])
def update_graph_2(jsonified_cleaned_data):
    datasets = json.loads(jsonified_cleaned_data)
    dff = pd.read_json(datasets['df_2'], orient='split')
    figure = create_figure_2(dff)
    return figure

#入力=中間保管場所のデータ -> 出力=Graph(3)
@app.callback(
    Output('graph', 'figure'),
    [Input('intermediate-value', 'children')])
def update_graph_3(jsonified_cleaned_data):
    datasets = json.loads(jsonified_cleaned_data)
    dff = pd.read_json(datasets['df_3'], orient='split')
    figure = create_figure_3(dff)
    return figure

#app6-1.py
import os
import copy
import time
import datetime

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd
from dash.dependencies import Input, Output
from flask_caching import Cache


app = dash.Dash(__name__)

CACHE_CONFIG = {
    'CACHE_TYPE': 'redis',  #redisにセットしたくない場合は、"filesystem"を指定する
    'CACHE_REDIS_URL': os.environ.get('REDIS_URL', 'localhost:6379')}
    
cache = Cache()  #flask_caching

cache.init_app(app.server, config=CACHE_CONFIG)

N = 100

df = pd.DataFrame({
    'category': (
        (['apples'] * 5 * N) +
        (['oranges'] * 10 * N) +
        (['figs'] * 20 * N) +
        (['pineapples'] * 15 * N)
    )
})

df['x'] = np.random.randn(len(df['category']))
df['y'] = np.random.randn(len(df['category']))

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in df['category'].unique()],
        value='apples'),
    html.Div([
        html.Div(dcc.Graph(id='graph-1'), className="six columns"),
        html.Div(dcc.Graph(id='graph-2'), className="six columns"),],
        className="row"),
    html.Div([
        html.Div(dcc.Graph(id='graph-3'), className="six columns"),
        html.Div(dcc.Graph(id='graph-4'), className="six columns"),],
        className="row"),
    # 隠しDiv(シグナル)
    html.Div(id='signal', style={'display': 'none'})
])


# グローバルスコープで負荷の高い計算を実行
# これらの計算結果はグローバルで利用可能なredisメモリーストアにキャッシュされる
# このredisメモリーストアはプロセスをまたぎ、かつ、いつでも利用可能
@cache.memoize()
def global_store(value):
    # ここでは負荷の高い計算をシミュレートしている
    print('Computing value with {}'.format(value))
    time.sleep(5)
    return df[df['category'] == value]


#figureオブジェクト生成用関数
def generate_figure(value, figure):
    fig = copy.deepcopy(figure)
    filtered_dataframe = global_store(value)
    fig['data'][0]['x'] = filtered_dataframe['x']
    fig['data'][0]['y'] = filtered_dataframe['y']
    fig['layout'] = {'margin': {'l': 20, 'r': 10, 'b': 20, 't': 10}}
    return fig


#入力=Dropdown -> 負荷の高い計算を実行 -> 出力=隠しDiv(signal)
@app.callback(Output('signal', 'children'),
              [Input('dropdown', 'value')])
def compute_value(value):
    #負荷の高い計算を実行し、完了した時にシグナルを送る
    global_store(value)
    return value


#入力=隠しDiv(シグナル、利用するデータを保持) -> 出力=Graph-1
@app.callback(Output('graph-1', 'figure'),
              [Input('signal', 'children')])
def update_graph_1(value):
    # generate_figureは、グローバルストアからデータを取得。
    # グローバルストアの中のデータはcompute_valueコールバックで既に計算が完了し、グローバルなredisキャッシュの中で結果が保存されている
    return generate_figure(value, {
        'data': [{
            'type': 'scatter',
            'mode': 'markers',
            'marker': {
                'opacity': 0.5,
                'size': 14,
                'line': {'border': 'thin darkgrey solid'}}
        }]
    })


#入力=隠しDiv(シグナル、利用するデータを保持) -> 出力=Graph-2
@app.callback(Output('graph-2', 'figure'),
              [Input('signal', 'children')])
def update_graph_2(value):
    return generate_figure(value, {
        'data': [{
            'type': 'scatter',
            'mode': 'lines',
            'line': {'shape': 'spline', 'width': 0.5},
        }]
    })


#入力=隠しDiv(シグナル、利用するデータを保持) -> 出力=Graph-3
@app.callback(Output('graph-3', 'figure'),
              [Input('signal', 'children')])
def update_graph_3(value):
    return generate_figure(value, {
        'data': [{
            'type': 'histogram2d',}]
    })


#入力=隠しDiv(シグナル、利用するデータを保持) -> 出力=Graph-4
@app.callback(Output('graph-4', 'figure'),
              [Input('signal', 'children')])
def update_graph_4(value):
    return generate_figure(value, {
        'data': [{
            'type': 'histogram2dcontour',}]
    })


# DashのCSS
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
# screen CSSのロード
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/brPBPO.css"})

if __name__ == '__main__':
    app.run_server(debug=True, processes=6)

#app6-2.py
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import datetime
from flask_caching import Cache
import os
import pandas as pd
import time
import uuid

external_stylesheets = [
    # Dash CSS
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    # screen CSSのロード
    'https://codepen.io/chriddyp/pen/brPBPO.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

cache = Cache(app.server, config={
    'CACHE_TYPE': 'redis',
    #ファイルシステムキャッシュは、Herokuのような短命なファイルシステムを持ったシステムでは機能しない
    'CACHE_TYPE': 'filesystem',
    'CACHE_DIR': 'cache-directory',
    # アプリ上で一度に対応できる数の最大数と等しくすべし
    # より高い数字はファイルシステムやredisキャッシュにより多くのデータを保存する
    'CACHE_THRESHOLD': 200
})


def get_dataframe(session_id):
    @cache.memoize()
    def query_and_serialize_data(session_id):
        # 高価なデータ処理や一意のセッションでのデータ処理はここで行われる
        # 時間に依存するデータを生成することで一意のセッションデータ処理をシミュレート
        now = datetime.datetime.now()
        time.sleep(5)
        df = pd.DataFrame({
            'time': [
                str(now - datetime.timedelta(seconds=15)),
                str(now - datetime.timedelta(seconds=10)),
                str(now - datetime.timedelta(seconds=5)),
                str(now)],
            'values': ['a', 'b', 'a', 'c']})
        return df.to_json()
    return pd.read_json(query_and_serialize_data(session_id))


def serve_layout():
    session_id = str(uuid.uuid4())
    return html.Div([
        html.Div(session_id, id='session-id', style={'display': 'none'}),  #隠しDiv
        html.Button('Get data', id='button'),
        html.Div(id='output-1'),
        html.Div(id='output-2')
    ])


app.layout = serve_layout


@app.callback(Output('output-1', 'children'),
              [Input('button', 'n_clicks'),
               Input('session-id', 'children')])
def display_value_1(value, session_id):
    df = get_dataframe(session_id)
    return html.Div([
        'Output 1 - Button has been clicked {} times'.format(value),
        html.Pre(df.to_csv()) ])


@app.callback(Output('output-2', 'children'),
              [Input('button', 'n_clicks'),
               Input('session-id', 'children')])
def display_value_2(value, session_id):
    df = get_dataframe(session_id)
    return html.Div([
        'Output 2 - Button has been clicked {} times'.format(value),
        html.Pre(df.to_csv())
    ])


if __name__ == '__main__':
    app.run_server(debug=True)

import dash
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

#n_clicks_timestamp属性をそれぞれ指定
app.layout = html.Div([
    html.Button('Button 1', id='btn-1', n_clicks_timestamp='0'),
    html.Button('Button 2', id='btn-2', n_clicks_timestamp='0'),
    html.Button('Button 3', id='btn-3', n_clicks_timestamp='0'),
    html.Div(id='container')
])


@app.callback(Output('container', 'children'),
              [Input('btn-1', 'n_clicks_timestamp'),
               Input('btn-2', 'n_clicks_timestamp'),
               Input('btn-3', 'n_clicks_timestamp')])
def display(btn1, btn2, btn3):
    if int(btn1) > int(btn2) and int(btn1) > int(btn3):
        msg = 'Button 1 was most recently clicked'
    elif int(btn2) > int(btn1) and int(btn2) > int(btn3):
        msg = 'Button 2 was most recently clicked'
    elif int(btn3) > int(btn1) and int(btn3) > int(btn2):
        msg = 'Button 3 was most recently clicked'
    else:
        msg = 'None of the buttons have been clicked yet'
    return html.Div([
        html.Div('btn1: {}'.format(btn1)),
        html.Div('btn2: {}'.format(btn2)),
        html.Div('btn3: {}'.format(btn3)),
        html.Div(msg)
    ])


if __name__ == '__main__':
    app.run_server(debug=True)

app.layout = html.Div(
    children=[....])

@app.callback(Output("id","property"),  <--ここのコンポーネントがapp.layoutに存在しているか検証
              [Input("id","property")]) <--ここのコンポーネントがapp.layoutに存在しているか検証
def some_function():
    ....
    return some_return

@app.callback(Output(),      <-アウトプットは1つだけ
             [Input(),...])  <-インプットはリストで複数与えることができる
def some_functions():
    ....
    return some_return

#コールバック(1)
@app.callback(Output(component_id='graph-1',...),   <--アウトプット先が異なる
             [Input(component_id='input',...)])
def some_function():
    ...

#コールバック(2)
@app.callback(Output(component_id='graph-2',...),   <--アウトプット先が異なる
             [Input(component_id='input',...)])
def some_function():
    ...
    
#コールバック(3)
@app.callback(Output(component_id='graph-3',...),   <--アウトプット先が異なる
             [Input(component_id='input',...)])
def some_function():
    ...

#コールバック(4)
@app.callback(Output(component_id='graph-4',...),   <--アウトプット先が異なる
             [Input(component_id='input',...)])
def some_function():
    ...

@app.layout=html.Div(
    children=[html.div(id='input_a',value=...),
              html.div(id='graphs')])

@app.callback(Output(component_id='graphs',component_property='children'),
             [Input(component_id='input_a',),...])
def some_function():
    ....
    return html.Div(id='graph-1',...), html.Div(id='graph-2',...), ...   #html.Div4つ
※コールバックのリターンがlayoutの'graphs'に順に格納されるイメージ?このコードが機能するか自信無し...