インタラクティブな主要指標テーブル
グラフでデータを可視化するのは、集計値を直感的に把握するのにとても有効です。ただし、一般的な可視化では表示しきれない数の値を確認したい場面もあります。
Eコマース企業の重要なステークホルダーである財務部門長が、あなたの素晴らしい成果を耳にし、ビジュアルではなく表形式で数値を確認したいと依頼してきました。集計した統計量を表で表示するダッシュボードを求めています。さらに、既存の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)