대화형 핵심 지표 테이블
그래프로 데이터를 시각화하면 집계된 수치를 한눈에 파악하기 좋습니다. 하지만 일반적인 시각화 형식만으로는 보여 주기 어려운 숫자들이 더 필요할 때도 있습니다.
이커머스 회사의 핵심 이해관계자인 재무부서장이 여러분의 훌륭한 작업에 대해 들었지만, 시각화보다 표 형식으로 수치를 확인해야 하는 분입니다. 표 형식으로 몇 가지 집계 통계를 보여 주는 대시보드를 요청했습니다. 다만, 기존의 Excel 스프레드시트보다 조금 더 대화형으로 만들 수 있도록 'Dash의 마법'도 함께 넣어 줄 수 있는지 궁금해합니다.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 9번째 줄 아래에 USD 통화 서식을 위한
money_fmt객체를 적절한 함수와 스타일 매개변수로 설정하세요. - 15번째 줄 아래의
column_defs에서'Total Sales ($)'열에money_fmt포매터를 추가하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from dash_ag_grid import AgGrid
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})
# Set up the money object
money_fmt = {
"____": (
"""params.value.toLocaleString(
'en-US', {style: '____', currency: '____'})""")}
# Add the formatter to the relevant column
column_defs = [
{"field": "Major Category"},
{"field": "Total Sales ($)", "____": ____},
{"field": "Average Order Value ($)"},
{"field": "Sales Volume"}]
grid = AgGrid(
columnDefs=column_defs,
rowData=key_stats_tb.to_dict("records"))
app = Dash()
app.layout = [
html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
html.H1('Sales Aggregations'),
html.Div([
html.H2('Key Aggregations'),
grid],
style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]
if __name__ == '__main__':
app.run(debug=True)