Mulai sekarangMulai gratis

Tabel statistik kunci interaktif

Menggunakan grafik untuk menampilkan data secara visual adalah cara yang bagus untuk melihat angka agregat. Namun, terkadang Anda juga perlu melihat lebih banyak angka daripada yang layak ditampilkan dalam format visualisasi umum.

Seorang pemangku kepentingan kunci di perusahaan e-commerce, kepala departemen keuangan, telah mendengar hasil kerja Anda yang baik, tetapi ia perlu melihat beberapa angka dalam format tabel, bukan visual. Ia meminta sebuah dashboard yang menampilkan beberapa statistik agregat dalam format tabel. Namun, ia bertanya apakah Anda dapat menyertakan sedikit 'sihir Dash' agar lebih interaktif dibandingkan spreadsheet Excel yang ia gunakan saat ini?

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Siapkan objek money_fmt untuk pemformatan mata uang USD di bawah baris 9 dengan parameter function dan style yang sesuai.
  • Tambahkan formatter money_fmt ke kolom 'Total Sales ($)' dalam column_defs di bawah baris 15.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode