Zacznij terazZacznij za darmo

Stylizacja tabeli kluczowych statystyk

Szef działu finansowego był zachwycony tabelą kluczowych statystyk, którą wcześniej dla niego przygotowano. Jako wielki fan Excela poprosił jednak o dodatkowe formatowanie tabeli.

Konkretnie zażądał:

  • Zawartość wszystkich komórek powinna być wyrównana do lewej.
  • Tło komórek powinno być czarne, a tekst – biały.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Zastosuj styl do wszystkich komórek, używając parametru cellStyle w defaultColDef poniżej linii 23.
  • Wyrównaj zawartość komórek do lewej, korzystając z właściwości textAlign poniżej linii 25.
  • Ustaw czarne tło i biały tekst w komórkach, używając właściwości backgroundColor i color poniżej linii 27.

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

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