EmpezarEmpieza gratis

Tabla interactiva de métricas clave

Usar gráficos para mostrar tus datos es una forma estupenda de ver cifras agregadas de un vistazo. Aun así, a veces necesitas ver más números de los que es posible mostrar en formatos de visualización habituales.

Un actor clave de la empresa de e-commerce, el responsable de finanzas, ha oído hablar de tu gran trabajo, pero es alguien que necesita ver algunas cifras en formato tabular y no solo visual. Te ha pedido un panel que muestre estadísticas agregadas en una tabla. Sin embargo, se pregunta si también podrías incluir un poco de "magia de Dash" para que sea más interactivo que sus hojas de cálculo de Excel actuales.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Configura el objeto money_fmt para el formato de moneda en USD debajo de la línea 9, usando los parámetros de función y estilo adecuados.
  • Añade el formateador money_fmt a la columna 'Total Sales ($)' en column_defs debajo de la línea 15.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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 y ejecutar código