Plotly Dash 데이터 대시보드에 데이터 저장

Plotly Dash 은 Python, R 및 Javascript를 사용하여 대화형 데이터 대시보드를 개발하기 위한 훌륭한 프레임워크입니다. Plotly 과 함께 작동하여 아름다운 시각화를 대중에게 제공합니다.

앱을 개발할 때 자주 발생하는 한 가지 문제Dash는 앱에서 데이터를 전달할 수 있다는 것입니다. 운 좋게도 dcc.Store 구성 요소를 사용하는 작은 데이터 세트에 대해 쉽게 수행할 수 있습니다. dcc.Store는 데이터를 사용자의 브라우저 내부에 JSON 객체로 저장합니다.

데이터 과학자의 도구 키트에서 데이터 작업을 위한 가장 일반적인 라이브러리는 pandas 입니다. 그렇다면 대시 앱에 pandas DataFrame를 어떻게 저장할 수 있습니까? 쉽지만 명심해야 할 것이 있습니다.

1) '특수' 데이터 유형은 직렬화할 수 없습니다JSON. TimeDelta 및 DateTime 데이터 유형을 str 또는 float 로 변환해야 합니다.
2) 데이터 대화에서 index 정보를 잃게 되므로 pd.DataFrame.reset_index() 저장하기 전에 반드시 DataFrame

앱에서 데이터 저장소 생성

dcc.Store는 앱 레이아웃의 아무 곳에나 배치할 수 있습니다.

from dash import dcc
def layout():
   return html.Div(
      [
      dcc.Store(id="current-data"),
      dcc.Graph(id="graph")
      ]
   )   

dcc.Store를 사용하여 Pandas DataFrame 저장

이제 데이터 프레임을 저장하려면 인덱스를 재설정한 후 pd.DataFrame.to_json() 메서드를 사용할 수 있습니다.

@callback(
    output=[Output("current-data", "data")],
)
def store_current_data():
    # Some loading from file/remote and data processing
    return [data.reset_index().to_json(orient="split")]

dcc.Store에 저장된 Pandas DataFrame에 액세스

이제 우리는 pd.read_json() 다른 콜백에서 상점에서 DataFrame를 검색할 수 있습니다! Plotly Figure를 dcc.Graph 출력으로 반환하여 데이터를 플로팅합니다.

@callback(
    inputs=[Input("current-data", "data")],
    output=[Output("graph", "figure")]
)
def retrieve_current_data_and_plot(data):
    df = pd.read_json(orient="split")
    # You can `set_index` here to get your original index back.
    # Create plotly figure here to display our data!
    fig = ...
    return [fig]

dcc.Store는 데이터 처리를 중앙 집중화하고 앱 전체에서 데이터에 액세스할 수 있도록 하는 좋은 방법입니다.