LoslegenKostenlos loslegen

Styling a key stats table

The finance department head loved the key stats table you created for them previously. However, being a big fan of Excel, he has requested some additional formatting of the table.

Specifically, he has requested:

  • All the cell contents should align on the left.
  • The background of the cells should be black with white text.

Diese Übung ist Teil des Kurses

Building Dashboards with Dash and Plotly

Kurs anzeigen

Anleitung zur Übung

  • Apply styling to all cells using the cellStyle parameter in defaultColDef below line 23.
  • Style cells to be left aligned using the textAlign property below line 25.
  • Style cells with a black background and white text using the backgroundColor and color properties below line 27.

Interaktive Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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 ($)'})

money_fmt = {"function": ("params.value.toLocaleString('en-US', {style: 'currency', currency: 'USD'})")}
column_defs = [
  {"field": "Country"},
  {"field": "Major Category"},
  {"field": "Minor Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"},
]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  defaultColDef={
    # Apply styling to all cells
    "____": {
      # Style content aligned left
      "____": "____",
      # Style background color and text color
      "____": "____",
      "____": "____"}}
)

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 bearbeiten und ausführen