dash0.

Dash APP = Layout(HTML:구조/배치, Core:그래프/인터액티브) + Callback (Input/Output)

https://dash.plotly.com/
https://crong-dev.tistory.com/category/Dash%20Plotly

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
from sixx import *
print("Hello dash")

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

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

def generate_table(dataframe, max_rows=10): 
    return html.Table([
        html.Thead( 
            html.Tr([
                html.Th(col) for col in dataframe.columns
            ]) 
        ), 
        html.Tbody([ 
            html.Tr([ 
                html.Td(
                    dataframe.iloc[i][col]
                ) for col in dataframe.columns 
            ]) for i in range(min(len(dataframe), max_rows)) 
        ]) 
    ])

# 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"]
# })
df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')

fig = px.scatter(df, 
        x="gdp per capita", y="life expectancy",
        size="population", size_max=60, color="continent", 
        hover_name="country", log_x=True)

app.layout = html.Div(children=[
    html.H1('''
        Hello Dash
    '''),

    html.Div('''
        #Dash: A web application framework for Python.
    '''),

    dcc.Graph(id='example-graph',
        figure=fig
    ),
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

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

dcc

편의를 위해 component (그래프, 슬라이더, 여러 컨트롤) 제공

import dash_core_components as dcc
help(dcc.Dropdown)

callback

사용자의 입력에 따라 반응하는 App개발을 위해

dash.dependencies.Input 객체 ==> Callback에서 사용  
cf> dash_core_components.Input 객체 ==> 실제 component

# -*- coding: utf-8 -*-
from sixx import *
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

import pandas as pd
import plotly.express as px

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(
    __name__, 
    external_stylesheets=external_stylesheets
)

app.layout = html.Div([ 
    html.Div(["Input: ", dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    # Children 없음, Children값 설정해도 callback값으로 초기화 됨
    html.Div(id='my-output'), #children='FUXXX'),
])

@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input('my-input', 'value')
)
def whateverName_update_div(inputVal):
    return 'Result: {}'.format(inputVal)

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

Multi-Input

app.layout = html.Div([ 
    dcc.Input(id="my-input1", type="text", value="Seoul"),
    dcc.Input(id="my-input2", type="text", value="Canada"),
    html.Div(id="my-output"),
])

@app.callback(
    Output('my-output', 'children'),
    Input('my-input1', 'value'),
    Input('my-input2', 'value')
)
def whateverName_update_div(inputVal1,inputVal2 ):
    return 'Result: 1.{}, 2.{}'.format(inputVal1, inputVal2)

State

결과(출력)값에는 사용되지만, 값이 변할 때 자동으로 콜백함수를 호출하고 싶지 않은 경우

app.layout = html.Div([ 
    dcc.Input(id="my-input1", type="text", value="Seoul"),html.Br(),
    dcc.Input(id="my-input2", type="text", value="Canada"),
    html.Button(id="btn_submit", n_clicks=0, children='submit'),
    html.Div(id="my-output"),
])

@app.callback(
    Output('my-output', 'children'),
    Input('btn_submit', 'n_clicks'),
    State('my-input1', 'value'),
    State('my-input2', 'value')
)
def whateverName_update_div(Input_nclicks, stateVal1, stateVal2 ):
    return 'Result: From :{}  to: {}'.format(stateVal1, stateVal2)

Chained callback

한 입력 컴포넌트의 변화가 다른 입력 컴포넌트의 변화를 이끌어내는 연쇄적인 콜백을 사용가능

#------------------------------------------------------------------------------
all_options = { 'America': ['New York', 'San Francisco', 'chicago'],
                'Korea': ['Seoul', 'Busan', 'Jeju'] }
#------------------------------------------------------------------------------
app.layout = html.Div([
    dcc.RadioItems(id='rdo_countries',
        options=[{'label':k, 'value':k} for k in all_options.keys()],
        value='Korea'), html.Hr(),
    dcc.RadioItems(id='rdo_cities'), html.Hr(),
    html.Div(id="my-output_selectedVal"),
])

@app.callback(
    Output('rdo_cities',    'options'),
    Input( 'rdo_countries', 'value')
)
def set_cities_options(selected_country):
    return [{'label': i, 'value': i} for i in all_options[selected_country]]

@app.callback( 
    Output('rdo_cities', 'value'),
    Input('rdo_cities',  'options')
) 
def set_cities_value(available_options): 
     return available_options[0]['value'] 

@app.callback( 
    Output('my-output_selectedVal', 'children'), 
    Input('rdo_countries', 'value'), 
    Input('rdo_cities',    'value')
) 
def set_display_children(selected_country, selected_city): 
    return '{} is a city in {}'.format( selected_city, selected_country)

Dash Plotly 콜백함수 간 데이터 공유

콜백함수 간 데이터 공유

State를 sharing

여러 Callback이 큰 비용의 데이터 처리 작업(SQL 쿼리작성, 시뮬레이션실행 또는 데이터 다운로드…)에 의존할 때,
하나의 콜백이 해당 작업을 실행하도록 한 다음, 나머지 콜백과 결과만 공유 가능하다.

cf.> Callback함수 내에서 외부Scope에 선언되어 있는 변수의 값을 바꾸지 못한다
==> 아무 전역 변수의 값을 바꾸는 건 안전하지 않다.

.

콜백간에 데이터 공유

여러 파이썬 프로세스에서 데이터를 안전하게 공유하려면, 각 프로세스에서 액세스 할 수 있는 어딘가에 데이터를 저장해야한다. 이 데이터를 저장하는 세 가지 주요 위치는 다음과 같다.

1. 사용자의 브라우저 세션 
2. 디스크 (예 : 파일 또는 새 데이터베이스)
3. Redis와 같은 공유 메모리 공간

Dash Enterprise

최적의 User-Interaction과 차트 로딩 성능을 위해, dash 앱 Production버전은 아래 사항을 고려해야 한다.