Py.Cafe

vizro-official/

superstore-dashboard

Exploring Superstore with Vizro

DocsPricing
  • app.py
  • custom_charts.py
  • requirements.txt
  • superstore.csv
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

"""Dev app to try things out."""

import random

from vizro import Vizro
import vizro.models as vm
import vizro.actions as va
import pandas as pd
from custom_charts import custom_line, create_kpi_card, create_monthly_sales_by_segment, bar_chart_by_category, orders_ag_grid


def make_superstore_df():
    """Load and preprocess the Superstore dataset.
    Returns:
        pd.DataFrame: Processed dataframe with state codes, filtered to latest 2 years,
            and enriched with Year, Month, and Order Status columns.
    """
    df = pd.read_csv("superstore.csv", encoding="latin1", parse_dates=["Order Date", "Ship Date"])

    # Filter dataframe for only the latest 2 years and add a month column.
    df["Year"] = df["Order Date"].dt.year
    df["Month"] = df["Order Date"].dt.month
    df["Month Name"] = df["Order Date"].dt.strftime("%b")
    df = df[df["Year"].isin([2015, 2016])]

    # Create order status - randomly assign with weights: 60% Delivered, 10% In Transit, 30% Processing
    df["Order Status"] = random.choices(["Delivered", "In Transit", "Processing"], weights=[0.6, 0.1, 0.3], k=len(df))

    return df


superstore_df = make_superstore_df()

page_one = vm.Page(
    title="Superstore Sales Dashboard",
    components=[
        vm.Container(
            title="",
            components=[
                create_kpi_card(superstore_df, column="Sales", icon="Bar Chart", prefix="$"),
                vm.Graph(figure=custom_line(superstore_df)),
            ],
            variant="filled",
            layout=vm.Grid(grid=[[0], [0], [1], [1], [1]]),
        ),
        vm.Container(
            title="",
            components=[
                create_kpi_card(superstore_df, column="Profit", icon="Money Bag", prefix="$"),
                vm.Graph(figure=custom_line(superstore_df, value_col="Profit")),
            ],
            variant="filled",
            layout=vm.Grid(grid=[[0], [0], [1], [1], [1]]),
        ),
        vm.Container(
            title="",
            components=[
                create_kpi_card(superstore_df, column="Customer ID", icon="Group"),
                vm.Graph(figure=custom_line(superstore_df, value_col="Customer ID")),
            ],
            variant="filled",
            layout=vm.Grid(grid=[[0], [0], [1], [1], [1]]),
        ),
        vm.Container(
            title="Monthly Sales by Segment",
            components=[
                vm.Graph(figure=create_monthly_sales_by_segment(superstore_df), header="Consumer"),
                vm.Graph(
                    figure=create_monthly_sales_by_segment(superstore_df, segment="Corporate"), header="Corporate"
                ),
                vm.Graph(
                    figure=create_monthly_sales_by_segment(superstore_df, segment="Home Office"), header="Home Office"
                ),
            ],
            layout=vm.Grid(grid=[[0, 1, 2]], col_gap="12px"),
            variant="filled",
        ),
        vm.Container(
            title="",
            components=[
                vm.Graph(
                    figure=bar_chart_by_category(superstore_df, custom_data=["Category"]),
                    actions=va.set_control(control="product_category_filter", value="Category"),
                )
            ],
            variant="filled",
        ),
    ],
    layout=vm.Grid(grid=[[0, 1, 2], [3, 3, 4]]),
    controls=[
        vm.Filter(id="product_category_filter", column="Category", visible=False),
        vm.Filter(column="Region"),
        vm.Filter(column="Category"),
        vm.Filter(column="Segment"),
    ],
)
page_two = vm.Page(
    title="Orders",
    layout=vm.Flex(),
    components=[
        vm.AgGrid(figure=orders_ag_grid(superstore_df)),
    ],
)


dashboard = vm.Dashboard(
    pages=[page_one, page_two],
    navigation=vm.Navigation(
        pages=["Superstore Sales Dashboard", "Orders"],
        nav_selector=vm.NavBar(
            items=[
                vm.NavLink(pages=["Superstore Sales Dashboard"], icon="Bar Chart", label="Overview"),
                vm.NavLink(pages=["Orders"], icon="Shopping Cart", label="Orders"),
            ]
        ),
    )
)

Vizro().build(dashboard).run()