Eine Key-Stats-Tabelle stylen

Die Leitung der Finanzabteilung war begeistert von der Key-Stats-Tabelle, die du zuvor erstellt hast. Als großer Excel-Fan hat er jedoch zusätzliche Formatierungen für die Tabelle angefragt.

Konkret hat er Folgendes gewünscht:

Alle Zellinhalte sollen linksbündig sein.
Der Hintergrund der Zellen soll schwarz sein, mit weißem Text.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>

Kurs ansehen

Übungsanweisungen

Wende Styling auf alle Zellen an, indem du den Parameter cellStyle in defaultColDef unterhalb von Zeile 23 verwendest.
Style Zellen linksbündig mit der Eigenschaft textAlign unterhalb von Zeile 25.
Style Zellen mit schwarzem Hintergrund und weißem Text mit den Eigenschaften backgroundColor und color unterhalb von Zeile 27.

Interaktive praktische Ü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