Aan de slagBegin gratis

Interactieve tabel met kerncijfers

Grafieken gebruiken om je gegevens visueel weer te geven is een fijne manier om geaggregeerde cijfers te zien. Soms heb je echter meer getallen nodig dan praktisch is in een standaardvisualisatie.

Een belangrijke stakeholder in het e-commercebedrijf, het hoofd van de financiële afdeling, heeft over je goede werk gehoord, maar ziet cijfers liever in tabelvorm dan in een grafiek. Hij heeft een dashboard gevraagd met enkele geaggregeerde statistieken in tabelvorm. Hij vraagt zich echter af of je ook wat 'Dash-magic' kunt toevoegen om het interactiever te maken dan zijn huidige Excel-spreadsheets?

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Stel onder regel 9 het object money_fmt in voor USD-valutaopmaak met de juiste functie- en stijlparameters.
  • Voeg de formatter money_fmt toe aan de kolom 'Total Sales ($)' in column_defs onder regel 15.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren