ПочатиПочніть безкоштовно

Інтерактивна таблиця ключових показників

Використовувати графіки для візуального подання даних — чудовий спосіб бачити агреговані показники. Проте інколи потрібно показати більше чисел, ніж доцільно вмістити у звичних форматах візуалізації.

Ключовий стейкґолдер у компанії електронної комерції — керівник фінансового відділу — чув про вашу чудову роботу, але йому потрібні показники саме в табличному, а не візуальному форматі. Він попросив створити дашборд, що показує деякі агреговані статистики у вигляді таблиці. Водночас він цікавиться, чи могли б ви додати трохи «магії 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)
Редагувати та запускати код