Dash (Plotly)

Dash는 Plotly 기반으로 만들어진 것으로, 파이썬과 html을 통해 웹사이트나 대시보드를 만들 수 있다. 

웹서비스 까지 구현이 가능한 것이 큰 장점이다. 따라서 기존에는 front-end 에서 데이터를 보여줘야 했던 것을

Dash와 Plotly를 통해 front-end 화면을 구성 할 수 있다. 

 

1. Import

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import pandas as pd

 

2. 개요

    - dash.Dash 함수를 통해 대시보드 앱을 생성한다. 

    - html과 dcc 를 이용하여 화면을 구성한다

    - callback 함수에서 UI와 연계한다

    - run_server 함수를 통해 front-end로 표시한다. 

 

3. dcc

    - Dash Core Components 의 약자로, 화면 구성을 하는 컴포넌트들이다 (예 : 드롭다운)

    -  html 내부에 화면을 구성할때 사용한다.

 

4. html

    - front-end 를 구성한다. 

    - html 태그들이 클래스화 되어 있어, 이를 이용하여 화면을 구성한다. (dcc 로도 구성 가능)

    - callback 함수에서 Output과 Input 간의 연계를 위해 각 UI 별 ID 등을 설정해야 한다. 

 

5. Dash 함수 

     - 대시보드 앱을 생성한다. 

     - 해당 앱은 callback 함수가 있다

     - layout 을 통해 화면 구성을 할 수 있다 (html 로 구성)

     - callback 함수에서, Input을 통해 UI와 연계하여 작업 할 수 있다. 

     - callback 함수에서, Output을 통해 차트를 UI로 보낼 수 있다. 

     - run_server 함수를 통해 브라우저로 표시 할 수 있다.

 

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import pandas as pd


# dashboard app
app = dash.Dash('타이틀명',
                external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])


app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            # dropdown 메뉴 딕셔너리 형태이며, label과 value 를 무조건 갖는다.
            {'label':'라벨명1','value':'데이터1'},
            {'label':'라벨명2','value':'데이터2'},
            {'label':'라벨명3','value':'데이터3'},
            
        ],  
        value= '데이터 기본값'
    ),  
    dcc.Graph(id='my-graph')
], style={'width': '600'})

#output의 figure는 고정으로 사용하면 된다. 콜백의 리턴값에서 figure 를 가져와
#사용하겠다는 의미이다. 

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
   
    #selected_dropdown_value 에는 html-> dcc.dropdown 에서 명시한 value 값인
    #데이터1, 데이터2, 데이터3 중 하나가 들어오게 된다. 
    
    
    df = 데이터 프레임 생성 혹은 불러오기 (selected_dropdown_value 활용)    
    
    #plotly 차트를 구성한 후  return 하면 해당 차트를 화면에 보여준다.
    #여기서는 단순히 데이터만 리턴하여 라인차트를 기본으로 그린다. 
    
    return {
        'data': [
            # dash가 보여줄 dashboard의 그래프를 dict 형태로 지정.
            {'x':df.컬럼명,'y':df.컬럼명}
        
        ],
        'layout': {'margin': {'l': 40, 'r': 0, 't': 20, 'b': 30}}
    }   

# dash app 실행.
app.run_server(debug=True, use_reloader=False)

# app.run_server(host="ip주소", port=숫자)를 통해 외부에 호스팅 할 수 있다

 

5.1. Plotly 연계

콜백 함수에서 plotly와 연계하여 차트를 표현 할 수 있다. 

plotly 차트를 구성하고, return 으로 리턴하면 된다. 

import plotly.express as px

.....

@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
    # 내가 선택한 label에 해당하는 파일 이름
    df = dataframe 생성 혹은 읽어오기(pandas로)
    fig = px.line(df,x='컬럼명1',y='컬렴명2')
    return fig
    
    .....

브라우저에 이런식으로 표시가 된다.