Interactive key stats table

Using graphs to display your data visually is a great way to see aggregated figures at a glance. Yet sometimes, you also need to see more numbers than is feasible to display in common visualization formats.

A key stakeholder in the e-commerce company, the finance department head, has heard of your great work but is someone who needs to see some figures in tabular rather than visual format. He has requested a dashboard displaying some aggregated stats in a tabular format. However, he wonders if you could also include some 'Dash magic' to make it a bit more interactive than his existing Excel spreadsheets?

Este exercício faz parte do curso

Building Dashboards with Dash and Plotly

Ver Curso

Instruções de exercício

Use the dash_table module FormatTemplate to create a money format to two decimal places for use in constructing the Data Table columns below line 13.
Use the columns created on line 18 and the data from the DataFrame created on line 11 to create a DataTable below line 22.
Ensure the DataTable has the built-in sorting below line 27.
Ensure the DataTable has the built-in filtering below line 29.

Exercício interativo prático

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

import dash
from dash import dcc, html
import plotly.express as px
import dash_table
from dash_table import DataTable, FormatTemplate
import pandas as pd
from dash.dependencies import Input, Output
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 money format for relevant columns
money_format = FormatTemplate.____(____)
money_cols = ['Total Sales ($)', 'Average Order Value ($)']
data_cols = [x for x in key_stats_tb.columns if x not in money_cols]
d_columns = [{'name': x, 'id': x} for x in data_cols]
d_columns +=[{'name': x, 'id': x, 
              'type':'numeric', 'format': money_format
  			} for x in money_cols]

# Create a Data Table
d_table = ____(
            columns=____,
            data=key_stats_tb.____('records'),
            cell_selectable=False,
            # Add sorting
            ____='____',
            # Add filtering
            filter_action='____'
            )

app = dash.Dash(__name__)

app.layout = html.Div([
  html.Img(src=logo_link, 
        style={'margin':'30px 0px 0px 0px' }),
  html.H1('Sales Aggregations'),
  html.Div(
    children=[
      html.H2('Key Aggregations'),
      d_table
      ],
      style={'width':'850px', 'height':'750px', 'margin':'0 auto'}
    ),
    ], 
  style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
  )

if __name__ == '__main__':
    app.run_server(debug=True)

Editar e executar código