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

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

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

Руководитель финансового отдела — один из ключевых стейкхолдеров в вашей e-commerce компании — слышал о вашей отличной работе, но предпочитает работать с данными в табличном, а не визуальном формате. Он попросил создать дашборд с агрегированными показателями в виде таблицы. При этом он задался вопросом: можно ли добавить немного «магии Dash», чтобы таблица была чуть интерактивнее его привычных таблиц Excel?

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

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

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

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

  • Создайте объект money_fmt для форматирования валюты USD после строки 9, используя подходящие параметры функции и стиля.
  • Добавьте форматтер money_fmt в столбец 'Total Sales ($)' в словаре column_defs после строки 15.

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

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

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