Kom igångKom igång gratis

Interaktiv tabell med nyckelstatistik

Diagram är ett utmärkt sätt att visualisera aggregerade data. Men ibland behöver man också se fler siffror än vad som ryms i vanliga diagramformat.

Finanschefen – en viktig intressent i e-handelsföretaget – har hört talas om ditt arbete men föredrar att se siffror i tabellform snarare än som diagram. Han har efterfrågat en dashboard med aggregerad statistik i tabellformat. Han undrar dock om du kan tillföra lite 'Dash-magi' för att göra den lite mer interaktiv än hans befintliga Excel-kalkylblad.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Sätt upp objektet money_fmt för valutaformatering i USD nedanför rad 9 med rätt funktion och styleparametrar.
  • Lägg till formateraren money_fmt i kolumnen 'Total Sales ($)' i column_defs nedanför rad 15.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod