ComeçarComece de graça

Tabela interativa de indicadores-chave

Usar gráficos para exibir seus dados é uma ótima forma de visualizar valores agregados. Ainda assim, às vezes você precisa ver mais números do que é viável mostrar nos formatos de visualização mais comuns.

Um dos principais stakeholders da empresa de e-commerce, o chefe do departamento financeiro, ouviu falar do seu ótimo trabalho, mas é alguém que precisa ver alguns valores em formato tabular, e não visual. Ele solicitou um dashboard exibindo algumas estatísticas agregadas em tabela. No entanto, ele quer saber se você também pode incluir um pouco de “magia do Dash” para deixá-lo mais interativo do que as planilhas de Excel que ele usa atualmente.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Configure o objeto money_fmt para formatação de moeda em USD abaixo da linha 9, usando os parâmetros adequados de função e estilo.
  • Adicione o formatador money_fmt à coluna 'Total Sales ($)' em column_defs abaixo da linha 15.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código