НачатьНачать бесплатно

Стилизация таблицы ключевых показателей

Руководителю финансового отдела очень понравилась таблица ключевых показателей, которую вы создали ранее. Однако, будучи большим поклонником Excel, он попросил добавить дополнительное форматирование.

Конкретно он запросил следующее:

  • Содержимое всех ячеек должно выравниваться по левому краю.
  • Фон ячеек должен быть чёрным, а текст — белым.

Это упражнение является частью курса

Создание дашбордов с помощью Dash и Plotly

Посмотреть курс

Инструкции к упражнению

  • Примените стилизацию ко всем ячейкам с помощью параметра cellStyle в defaultColDef ниже строки 23.
  • Выровняйте содержимое ячеек по левому краю, используя свойство textAlign ниже строки 25.
  • Задайте ячейкам чёрный фон и белый текст с помощью свойств backgroundColor и color ниже строки 27.

Интерактивное практическое упражнение

Попробуйте выполнить это упражнение, дополнив этот пример кода.

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)
Редактировать и запускать код