Zacznij terazZacznij za darmo

Interaktywna tabela kluczowych statystyk

Wykresy to świetny sposób na wizualne przedstawienie zagregowanych danych. Czasem jednak trzeba pokazać więcej liczb, niż da się wygodnie zmieścić na standardowym wykresie.

Szef działu finansów – jeden z kluczowych interesariuszy firmy e-commerce – słyszał o twoich dokonaniach, ale woli analizować dane w formie tabelarycznej, a nie wizualnej. Poprosił o dashboard z zagregowanymi statystykami w postaci tabeli. Chciałby też wiedzieć, czy można dodać trochę „magii Dash", żeby całość była bardziej interaktywna niż jego dotychczasowe arkusze Excel.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Skonfiguruj obiekt money_fmt do formatowania walutowego w USD poniżej linii 9, używając odpowiedniej funkcji i parametrów stylu.
  • Dodaj formatter money_fmt do kolumny 'Total Sales ($)' w column_defs poniżej linii 15.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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)
Edytuj i uruchom kod