Tidy and a couple of new features (#2)

- Refactor overview page to simplify navigation and reduce code repetition (e6217b4cc55dea4c4f9dba7ed7abad845d5df17c)
- Further refactor KPI cards and simplify page structure (5d3ed2fba6752b0a5f2db4b41368721fe1786008)
- Simplify actions arguments and remove unnecessary trailing commas (7795980e5fe8aacbd1eb39c47c459a6f991f7d84)
- Remove unnecessary trailing commas from last items in structures (0b9114b421e1bc959742cf9ba64ef93c1b7f6353)
- Move variant argument to last position in Container (f3c4f1b9e84368fd4d94903569cd4c6fbec39190)
- Refactor navigation using list comprehension (ed14a62117822c93730d4a59488038abdf79f58a)
- Fix argument ordering in Container definitions (c62cec4a2eab3d93eddc7501126e3562e9a823f8)
- Convert pages to dictionary with nav icons as values (1e4d086ba6dba2d35ad93b26388e88c432ca36b1)
- Swap dictionary keys and values for pages (3399bddfa999cf14613fdd4ad28d3dff9718ad51)
- Update CSS selectors to match renamed IDs (4afa104559cd97f52ca16699ff3fbebce02a0ac5)
- Refactor and clean up data processing and app code (32b31c949621adcd3c8991903b9e3e73597389b6)
- Add docstrings and rename data.py to data_processing.py (756cacef8e2672ef000fb9ec29250b6842031359)
- Separate AG Grid tables from Plotly charts (d267326fe2e70010c578af3cb0ef380b9f34295c)
- Refactor KPI cards and chart functions with shared constants (22e2ea0e7075da2e87d37f4a3b0a5a7275e4dc8b)
- Simplify overview_by_order_status function (0511d441b291b9d9decd7dcc1506deb9f099f29a)
- Refactor overview charts with shared helper functions (a4e7aa2147784fb942480374062e9bdb2891e620)
- Reorder chart functions by usage order in app.py (82a8080b980ebedf6f75ce2b2f15403967e4cd8a)
- Refactor and simplify Pareto chart with improved data processing (8ba00b62948109e54726dcdb8b442977cc42175e)
- Clean up imports and CSS formatting (a72697dfc02eeb70b9acb6cd288e209effec14a4)

app.py

@@ -1,505 +1,298 @@
 """Dev app to try things out."""
 
-import json
-import base64
-
-import vizro.plotly.express as px
-from vizro import Vizro
-import vizro.models as vm
 import vizro.actions as va
-from vizro.figures import kpi_card, kpi_card_reference
-from vizro.models.types import capture
-from vizro.tables import dash_ag_grid
-
-from data import superstore_df, create_superstore_product, pareto_customers_table, create_kpi_data
+import vizro.models as vm
 from charts import (
     bar_chart_by_category,
-    create_map_bubble_new,
-    create_line_chart_per_month,
-    create_bar_current_vs_previous_segment,
-    create_bar_current_vs_previous_category,
+    overview_by_customer_segment,
+    overview_by_month,
+    overview_by_order_status,
+    overview_by_product_category,
+    overview_by_region,
     pareto_customers_chart,
+    regions_map_chart,
+    regions_top_n_chart,
     scatter_with_quadrants,
-    pie_chart_by_order_status,
-    bar_chart_top_n,
-    custom_orders_aggrid,
-    create_lollipop_chart_by_region,
 )
-from charts import COLUMN_DEFS_PRODUCT, COLUMN_DEFS_CUSTOMERS
-
-df = px.data.iris()
-
-vm.Page.add_type("controls", vm.Button)
-vm.Container.add_type("controls", vm.Button)
-
-superstore_product_df = create_superstore_product(superstore_df)
-aggrid_df = pareto_customers_table(superstore_df)
-state_list = superstore_df["State_Code"].unique().tolist()
-categories = superstore_df["Category"].unique().tolist()
-subcategories = superstore_df["Sub-Category"].unique().tolist()
-subcategories.append("NONE")
-customer_name = superstore_df["Customer Name"].unique().tolist()
-customer_name.append("NONE")
-product_name = superstore_df["Product Name"].unique().tolist()
-product_name.append("NONE")
-
-sales_kpi_df = create_kpi_data(superstore_df, value_col="Sales")
-profit_kpi_df = create_kpi_data(superstore_df, value_col="Profit")
-order_kpi_df = create_kpi_data(superstore_df, value_col="Order ID")
-customer_kpi_df = create_kpi_data(superstore_df, value_col="Customer ID")
+from data_processing import (
+    COLUMN_TO_AGGFUNC,
+    COLUMN_TO_METRIC,
+    LAST_YEAR,
+    THIS_YEAR,
+    make_superstore_df,
+    make_superstore_profit_df,
+)
+from tables import COLUMN_DEFS_PRODUCT, customers_ag_grid, orders_ag_grid
+from vizro import Vizro
+from vizro.figures import kpi_card_reference
+from vizro.tables import dash_ag_grid
 
+###############################################################################
+# Dataframes and utility functions
+###############################################################################
+df = make_superstore_df()
+profit_df = make_superstore_profit_df(df)
 
-def _encode_to_base64(value):
-    json_bytes = json.dumps(value, separators=(",", ":")).encode("utf-8")
-    b64_bytes = base64.urlsafe_b64encode(json_bytes)
-    return f"b64_{b64_bytes.decode('utf-8').rstrip('=')}"
 
+def create_filled_container(**kwargs):
+    return vm.Container(**kwargs, variant="filled")
 
-@capture("action")
-def nav_region(parameter_value):
-    url_query_params = f"?pg2-parameter-2={_encode_to_base64(parameter_value)}"
-    return "/regions", url_query_params
 
+###############################################################################
+# Overview page
+###############################################################################
+def create_kpi_card_with_action(data_frame, column, icon, prefix=""):
+    """Create a KPI card figure that updates the metric control when clicked."""
+    # Pivot and aggregate to produce dataframe with column for each year for specified metric.
+    data_frame = data_frame.pivot_table(values=column, columns="Year", aggfunc=COLUMN_TO_AGGFUNC[column])
 
-@capture("action")
-def nav_product():
-    return "/products"
+    return vm.Figure(
+        figure=kpi_card_reference(
+            data_frame=data_frame,
+            value_column=THIS_YEAR,  # This year
+            reference_column=LAST_YEAR,  # Last year
+            value_format=f"{prefix}{{value:,.0f}}",
+            reference_format=f"{{delta_relative:+.1%}} vs. last year ({prefix}{{reference:,.0f}})",
+            title=COLUMN_TO_METRIC[column],
+            icon=icon,
+        ),
+        actions=va.set_control(control="metric", value=column),
+    )
 
 
-@capture("action")
-def nav_customer():
-    return "/customers"
+def create_chart_container_with_nav(graph, nav_href):
+    """Create a container with a chart and optional navigation button."""
+    components = [graph, vm.Button(text="View Deep Dive", icon="Jump to Element", variant="outlined", href=nav_href)]
+    return create_filled_container(components=components, layout=vm.Grid(grid=[[0]] * 5 + [[1]], row_gap="8px"))
 
 
-@capture("action")
-def nav_orders():
-    return "/orders"
+# TODO: chart title spacing, use container.title?
 
+kpi_card_container = vm.Container(
+    id="kpi-cards",
+    title="💡 Click on a KPI card to update the charts below.",
+    layout=vm.Grid(grid=[[0, 1, 2, 3]]),
+    components=[
+        create_kpi_card_with_action(df, column="Sales", icon="Bar Chart", prefix="$"),
+        create_kpi_card_with_action(df, column="Profit", icon="Money Bag", prefix="$"),
+        create_kpi_card_with_action(df, column="Order ID", icon="Orders"),
+        create_kpi_card_with_action(df, column="Customer ID", icon="Group"),
+    ],
+)
 
-page_1 = vm.Page(
+overview_page = vm.Page(
     title="Overview",
+    # Grid that consists of rows with height ratio 3:5:5.
+    layout=vm.Grid(grid=[[0, 0, 0]] * 3 + [[1, 1, 2]] * 5 + [[3, 4, 5]] * 5),
     components=[
-        vm.Container(
-            id="pg1-container-1",
-            title="💡 Click on a KPI card to update the charts below.",
-            components=[
-                vm.Figure(
-                    figure=kpi_card_reference(
-                        data_frame=sales_kpi_df,
-                        value_column="total_2017",
-                        reference_column="total_2016",
-                        reference_format="{delta_relative:+.1%} vs. last year (${reference:,.0f})",
-                        title="Sales",
-                        value_format="${value:,.0f}",
-                        icon="bar_chart",
-                    ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Sales"),
-                ),
-                vm.Figure(
-                    figure=kpi_card_reference(
-                        data_frame=profit_kpi_df,
-                        value_column="total_2017",
-                        reference_column="total_2016",
-                        reference_format="{delta_relative:+.1%} vs. last year (${reference:,.0f})",
-                        title="Profit",
-                        value_format="${value:,.0f}",
-                        icon="money_bag",
-                    ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Profit"),
-                ),
-                vm.Figure(
-                    figure=kpi_card_reference(
-                        data_frame=order_kpi_df,
-                        value_column="total_2017",
-                        reference_column="total_2016",
-                        reference_format="{delta_relative:+.1%} vs. last year ({reference:,.0f})",
-                        title="Orders",
-                        value_format="{value:,.0f}",
-                        icon="orders",
-                        # agg_func="nunique",
-                    ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Order ID"),
-                ),
-                vm.Figure(
-                    figure=kpi_card_reference(
-                        data_frame=customer_kpi_df,
-                        value_column="total_2017",
-                        reference_column="total_2016",
-                        title="Customers",
-                        reference_format="{delta_relative:+.1%} vs. last year ({reference:,.0f})",
-                        value_format="{value:,.0f}",
-                        icon="group",
-                        # agg_func="nunique",
-                    ),
-                    actions=va.set_control(control="pg1_parameter_1", value="Customer ID"),
-                ),
-            ],
-            layout=vm.Grid(grid=[[0, 1, 2, 3]]),
-        ),
-        vm.Container(
-            title="",
-            components=[
-                vm.Graph(
-                    id="line_chart_by_month",
-                    figure=create_line_chart_per_month(
-                        superstore_df,
-                        value_col="Sales",
-                    ),
-                ),
-            ],
-            variant="filled",
+        kpi_card_container,
+        create_filled_container(
+            components=[vm.Graph(id="month_line_chart", figure=overview_by_month(df, column="Sales"))]
         ),
-        vm.Container(
-            title="",
-            components=[
-                vm.Graph(id="order_status_chart", figure=pie_chart_by_order_status(superstore_df, value_col="Sales")),
-                vm.Button(
-                    id="orders-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_orders(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            variant="filled",
+        create_chart_container_with_nav(
+            graph=vm.Graph(id="order_status_pie_chart", figure=overview_by_order_status(df, column="Sales")),
+            nav_href="/orders",
         ),
-        vm.Container(
-            components=[
-                vm.Graph(
-                    id="region_bar_chart", figure=create_lollipop_chart_by_region(superstore_df, value_col="Sales")
-                ),
-                vm.Button(
-                    id="region-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(
-                        function=nav_region("pg1_parameter_1"), outputs=["vizro_url.pathname", "vizro_url.search"]
-                    ),
-                ),
-            ],
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            variant="filled",
+        create_chart_container_with_nav(
+            graph=vm.Graph(id="region_bar_chart", figure=overview_by_region(df, column="Sales")),
+            nav_href="/regions",
         ),
-        vm.Container(
-            components=[
-                vm.Graph(
-                    id="bar_chart_by_segment",
-                    figure=create_bar_current_vs_previous_segment(superstore_df, value_col="Sales"),
-                ),
-                vm.Button(
-                    id="segment-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_customer(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            variant="filled",
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
+        create_chart_container_with_nav(
+            graph=vm.Graph(id="segment_bar_chart", figure=overview_by_customer_segment(df, column="Sales")),
+            nav_href="/customers",
         ),
-        vm.Container(
-            title="",
-            layout=vm.Grid(grid=[[0], [0], [0], [0], [0], [1]], row_gap="8px"),
-            components=[
-                vm.Graph(
-                    id="category_bar_chart",
-                    figure=create_bar_current_vs_previous_category(superstore_df, value_col="Sales"),
-                ),
-                vm.Button(
-                    id="customer-nav-btn",
-                    text="View Deep Dive",
-                    icon="jump_to_element",
-                    variant="outlined",
-                    actions=vm.Action(function=nav_product(), outputs=["vizro_url.pathname"]),
-                ),
-            ],
-            variant="filled",
+        create_chart_container_with_nav(
+            graph=vm.Graph(id="category_bar_chart", figure=overview_by_product_category(df, column="Sales")),
+            nav_href="/products",
         ),
     ],
     controls=[
         vm.Parameter(
-            id="pg1_parameter_1",
-            selector=vm.RadioItems(
-                options=[
-                    {"value": "Sales", "label": "Sales"},
-                    {"value": "Profit", "label": "Profit"},
-                    {"value": "Order ID", "label": "Orders"},
-                    {"value": "Customer ID", "label": "Customers"},
-                ],
-                title="Metric",
-            ),
+            id="metric",
+            selector=vm.RadioItems(options=["Sales", "Profit", "Order ID", "Customer ID"]),
             targets=[
-                "region_bar_chart.value_col",
-                "category_bar_chart.value_col",
-                "order_status_chart.value_col",
-                "line_chart_by_month.value_col",
-                "bar_chart_by_segment.value_col",
+                "region_bar_chart.column",
+                "category_bar_chart.column",
+                "order_status_pie_chart.column",
+                "month_line_chart.column",
+                "segment_bar_chart.column",
             ],
-            show_in_url=True,
             visible=False,
-        ),
+        )
     ],
-    layout=vm.Grid(
-        grid=[
-            [0, 0, 0],
-            [0, 0, 0],
-            [0, 0, 0],
-            [1, 1, 2],
-            [1, 1, 2],
-            [1, 1, 2],
-            [1, 1, 2],
-            [1, 1, 2],
-            [3, 4, 5],
-            [3, 4, 5],
-            [3, 4, 5],
-            [3, 4, 5],
-            [3, 4, 5],
-        ],
-    ),
 )
 
-page_2 = vm.Page(
-    title="Regions",
+###############################################################################
+# Regions page
+###############################################################################
+map_container = create_filled_container(
     components=[
-        vm.Container(
-            controls=[
-                vm.Filter(
-                    id="pg2-filter-1",
-                    column="State_Code",
-                    selector=vm.Dropdown(),
-                    visible=False,
-                ),
-                vm.Filter(
-                    column="Segment",
-                    selector=vm.Checklist(title="Choose segment"),
-                ),
-                vm.Filter(
-                    column="Category",
-                    selector=vm.Checklist(title="Choose category"),
-                ),
-                vm.Parameter(
-                    id="pg2-parameter-2",
-                    selector=vm.RadioItems(
-                        options=["Sales", "Profit"],
-                        title="Choose metric",
-                    ),
-                    targets=[
-                        "region_map_chart.value_col",
-                        "pg2-chart-1.x",
-                    ],
-                ),
-            ],
-            layout=vm.Grid(grid=[[0, 1]]),
-            components=[
-                vm.Container(
-                    variant="filled",
-                    title="",
-                    components=[
-                        vm.Graph(
-                            id="region_map_chart",
-                            header="💡 Click on a state to filter charts on the right.",
-                            figure=create_map_bubble_new(superstore_df, value_col="Sales", custom_data=["State_Code"]),
-                            actions=[
-                                va.set_control(control="pg2-filter-1", value="State_Code"),
-                            ],
-                        ),
-                    ],
-                ),
-                vm.Container(
-                    controls=[
-                        vm.Parameter(
-                            targets=["pg2-chart-1.top_n"],
-                            selector=vm.Slider(min=5, max=30, step=5, value=20, title="Choose top N"),
-                        ),
-                        vm.Parameter(
-                            selector=vm.RadioItems(
-                                options=["City", "Customer Name", "Sub-Category"],
-                                title="Choose y-axis",
-                            ),
-                            targets=["pg2-chart-1.y"],
-                        ),
-                    ],
-                    components=[
-                        vm.Graph(
-                            id="pg2-chart-1",
-                            figure=bar_chart_top_n(superstore_df, x="Sales", y="City"),
-                        ),
-                    ],
-                    variant="filled",
-                ),
-            ],
+        vm.Graph(
+            id="usa_map",
+            header="💡 Click on a state to filter ranked bars on the right.",
+            figure=regions_map_chart(df, column="Sales", custom_data=["State Code"]),
+            actions=va.set_control(control="state_filter", value="State Code"),
+        )
+    ],
+)
+
+regions_top_n_chart_container = create_filled_container(
+    components=[vm.Graph(id="regions_top_n_chart", figure=regions_top_n_chart(df, x="Sales", y="City", n=20))],
+    controls=[
+        vm.Parameter(
+            targets=["regions_top_n_chart.n"], selector=vm.Slider(min=5, max=30, step=5, value=20, title="Choose top N")
+        ),
+        vm.Parameter(
+            targets=["regions_top_n_chart.y"],
+            selector=vm.RadioItems(options=["City", "Customer Name", "Sub-Category"], title="Choose y-axis"),
         ),
     ],
 )
 
-page_3 = vm.Page(
-    title="Customers",
+regions_page = vm.Page(
+    title="Regions",
     components=[
         vm.Container(
             layout=vm.Grid(grid=[[0, 1]]),
+            components=[map_container, regions_top_n_chart_container],
             controls=[
-                vm.Filter(column="Region", selector=vm.Checklist(title="Choose region")),
+                vm.Filter(id="state_filter", column="State Code", visible=False),
                 vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
                 vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
-            ],
-            components=[
-                vm.AgGrid(
-                    id="table-2",
-                    header="💡 Click on a row to highlight the customer.",
-                    figure=dash_ag_grid(
-                        aggrid_df,
-                        columnDefs=COLUMN_DEFS_CUSTOMERS,
-                    ),
-                    actions=va.set_control(control="pg3_parameter_1", value="Customer Name"),
+                vm.Parameter(
+                    targets=["usa_map.column", "regions_top_n_chart.x"],
+                    selector=vm.RadioItems(options=["Sales", "Profit"], title="Choose metric"),
                 ),
-                vm.Graph(id="pg3_pareto_chart", figure=pareto_customers_chart(superstore_df, highlight_customer=None)),
             ],
-        ),
+        )
+    ],
+)
+
+# TODO: highlight state instead of filter?
+###############################################################################
+# Products page
+###############################################################################
+
+product_category_container = create_filled_container(
+    components=[
+        vm.Graph(
+            id="product_category_bar",
+            figure=bar_chart_by_category(df, custom_data=["Category"]),
+            actions=va.set_control(control="product_category_filter", value="Category"),
+        )
+    ],
+    controls=[vm.Filter(id="product_category_filter", column="Category", visible=False)],
+)
+
+product_table_container = create_filled_container(
+    components=[
+        vm.AgGrid(
+            header="💡 Click on a row to highlight the data point in the matrix on the right.",
+            figure=dash_ag_grid(profit_df, columnDefs=COLUMN_DEFS_PRODUCT),
+            actions=va.set_control(control="quadrant_subcategory", value="Sub-Category"),
+        )
+    ],
+)
+
+profit_vs_sales_container = create_filled_container(
+    components=[
+        vm.Graph(
+            id="profit_vs_sales_chart",
+            figure=scatter_with_quadrants(
+                profit_df,
+                x="Sales",
+                y="Profit",
+                custom_data=["Sub-Category"],
+            ),
+        )
     ],
     controls=[
         vm.Parameter(
-            id="pg3_parameter_1",
-            targets=["pg3_pareto_chart.highlight_customer"],
-            selector=vm.Dropdown(options=customer_name, value="NONE", multi=False),
+            id="quadrant_subcategory",
+            targets=["profit_vs_sales_chart.highlight_sub_category"],
+            selector=vm.Dropdown(options=["NONE", *df["Sub-Category"]], multi=False),
             visible=False,
         ),
     ],
 )
 
+# TODO: bar chart into histogram
+# TODO: fix quadrant highlight
 
-page_4 = vm.Page(
+products_page = vm.Page(
     title="Products",
     components=[
         vm.Container(
-            title="",
+            layout=vm.Grid(grid=[[0, 2], [1, 2], [1, 2]]),
+            components=[product_category_container, product_table_container, profit_vs_sales_container],
+        )
+    ],
+)
+
+
+###############################################################################
+# Customers page
+###############################################################################
+
+customers_page = vm.Page(
+    title="Customers",
+    components=[
+        vm.Container(
+            layout=vm.Grid(grid=[[0, 1]]),
             components=[
-                vm.Container(
-                    title="",
-                    components=[
-                        vm.Graph(
-                            id="pg4-chart-1",
-                            figure=bar_chart_by_category(superstore_df, custom_data=["Category"]),
-                            actions=[
-                                va.set_control(control="pg4-filter-1", value="Category"),
-                            ],
-                        ),
-                    ],
-                    variant="filled",
-                ),
-                vm.Container(
-                    title="",
-                    components=[
-                        vm.AgGrid(
-                            id="table",
-                            header="💡 Click on a row to highlight the data point in the matrix on the right.",
-                            figure=dash_ag_grid(superstore_product_df, columnDefs=COLUMN_DEFS_PRODUCT),
-                            actions=va.set_control(control="pg4_parameter_1", value="Sub-Category"),
-                        )
-                    ],
-                    variant="filled",
+                vm.AgGrid(
+                    header="💡 Click on a row to highlight the customer.",
+                    figure=customers_ag_grid(df),
+                    actions=va.set_control(control="customer_parameter", value="Customer Name"),
                 ),
-                vm.Container(
-                    title="",
-                    components=[
-                        vm.Graph(
-                            id="pg4-chart-3",
-                            figure=scatter_with_quadrants(
-                                data_frame=superstore_product_df,
-                                x="Sales",
-                                y="Profit",
-                                custom_data=["Sub-Category"],
-                            ),
-                        ),
-                    ],
-                    variant="filled",
+                vm.Graph(id="pareto_chart", figure=pareto_customers_chart(df)),
+            ],
+            controls=[
+                vm.Filter(column="Region", selector=vm.Checklist(title="Choose region")),
+                vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
+                vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
+                vm.Parameter(
+                    id="customer_parameter",
+                    targets=["pareto_chart.highlight_customer"],
+                    selector=vm.RadioItems(options=["NONE", *df["Customer Name"]]),
+                    visible=False,
                 ),
             ],
-            layout=vm.Grid(
-                grid=[
-                    [0, 0, 2, 2],
-                    [1, 1, 2, 2],
-                    [1, 1, 2, 2],
-                ]
-            ),
-        ),
-    ],
-    controls=[
-        vm.Filter(
-            id="pg4-filter-1",
-            column="Category",
-            targets=["pg4-chart-1"],
-            selector=vm.Checklist(title="Product Category"),
-            visible=False,
-        ),
-        # vm.Filter(
-        #     column="Category / Sub-Category",
-        #     targets=["pg4-chart-3"],
-        #     selector=vm.Dropdown(multi=False, value="Technology / Phones"),
-        # ),
-        vm.Parameter(
-            id="pg4_parameter_1",
-            targets=["pg4-chart-3.highlight_sub_category"],
-            selector=vm.Dropdown(options=subcategories, value="NONE", multi=False),
-            visible=False,
-        ),
+        )
     ],
 )
 
-page_5 = vm.Page(
+###############################################################################
+# Orders page
+###############################################################################
+
+orders_page = vm.Page(
     title="Orders",
     layout=vm.Flex(),
     components=[
-        vm.AgGrid(id="table_id", figure=custom_orders_aggrid(superstore_df)),
-        vm.Button(
-            text="Export data",
-            icon="download",
-            actions=[va.export_data(targets=["table_id"], file_format="xlsx")],
-        ),
+        vm.AgGrid(figure=orders_ag_grid(df)),
+        vm.Button(text="Export data", icon="download", actions=va.export_data(file_format="xlsx")),
     ],
 )
 
+###############################################################################
+# Overall dashboard configuration
+###############################################################################
+pages = {
+    "Home": overview_page,
+    "Globe Asia": regions_page,
+    "Barcode": products_page,
+    "Group": customers_page,
+    "Shopping Cart": orders_page,
+}
 
 navigation = vm.Navigation(
-    pages=["Overview", "Regions", "Customers", "Products", "Orders"],
     nav_selector=vm.NavBar(
-        items=[
-            vm.NavLink(
-                pages=["Overview"],
-                label="Overview",
-                icon="Home",
-            ),
-            vm.NavLink(
-                pages=["Regions"],
-                label="Regions",
-                icon="Globe Asia",
-            ),
-            vm.NavLink(
-                pages=["Products"],
-                label="Products",
-                icon="Barcode",
-            ),
-            vm.NavLink(
-                pages=["Customers"],
-                label="Customers",
-                icon="Group",
-            ),
-            vm.NavLink(
-                pages=["Orders"],
-                icon="Shopping Cart",
-                label="Orders",
-            ),
-        ]
+        items=[vm.NavLink(pages=[page.id], label=page.title, icon=icon) for icon, page in pages.items()]
     ),
 )
 
-dashboard = vm.Dashboard(
-    title="Superstore dashboard",
-    pages=[page_1, page_2, page_3, page_4, page_5],
-    navigation=navigation,
-    theme="vizro_light",
-)
+dashboard = vm.Dashboard(title="Superstore dashboard", pages=pages.values(), navigation=navigation, theme="vizro_light")
 
 app = Vizro().build(dashboard)
 

assets/{css/custom.css → custom.css}

@@ -4,23 +4,7 @@
   --bs-pink: #e33b3b;
 }
 
-.flex-item .card-kpi {
-  height: 150px;
-  width: 300px;
-}
-
-#p3-filter-1 {
-  display: none;
-}
-
-#p3-parameter-1 {
-  display: none;
-}
-
-#pg2-filter-1,
-#pg2-filter-3 {
-  display: none;
-}
+/* KPI cards. */
 
 .card-kpi .card-header .material-symbols-outlined {
   font-size: 32px;
@@ -30,39 +14,31 @@
   font-size: 1.3rem;
 }
 
-#pg1-container-1_title_content {
+#kpi-cards_title_content {
   font-size: 14px;
 }
 
-#pg1-container-1.container-fluid {
+#kpi-cards.container-fluid {
   gap: 0;
 }
 
-#header {
-  padding-left: 4px;
-}
+/* TODO: do this part with callback to remain highlighted. */
 
+/*.card-kpi:hover {*/
+/*  border: 8px solid var(--bs-border);*/
+/*}*/
 
-.form-label {
-  font-weight: 600;
-}
+/*.card-kpi:has(.color-pos):hover {*/
+/*  border-left: 4px solid var(--bs-blue);*/
+/*}*/
 
-.container-controls-panel .dropdown {
-  width: 360px;
-}
+/*.card-kpi:has(.color-neg):hover {*/
+/*  border-left: 4px solid var(--bs-pink);*/
+/*}*/
 
-.container-controls-panel {
-  padding-bottom: 1rem;
-}
 
-.card-kpi:hover {
-  border: 8px solid var(--bs-border);
-}
+/* Font tweaks. */
 
-.card-kpi:has(.color-pos):hover {
-  border-left: 4px solid var(--bs-blue);
-}
-
-.card-kpi:has(.color-neg):hover {
-  border-left: 4px solid var(--bs-pink);
-}
+.form-label {
+  font-weight: 600;
+}

charts.py

@@ -1,9 +1,11 @@
 """Collection of custom charts."""
 
+import calendar
+
 import pandas as pd
 import plotly.graph_objects as go
 import vizro.plotly.express as px
-from dash_ag_grid import AgGrid
+from data_processing import COLUMN_TO_AGGFUNC, COLUMN_TO_METRIC, LAST_YEAR, THIS_YEAR, make_customer_sales_pareto_df
 from vizro.models.types import capture
 
 CURRENT_YEAR = 2017
@@ -13,6 +15,8 @@ PRIMARY_COLOR = "#2251ff"
 SECONDARY_COLOR = "#A0A2A8"
 ORANGE_COLOR = "#f6c343"
 GREEN_COLOR = "#60c96c"
+
+YEAR_COLOR_MAP = {"This year": PRIMARY_COLOR, "Last year": SECONDARY_COLOR}
 RED_COLOR = "#f17e7e"
 DIVERGING_RED_GREEN = [
     "#a84545",
@@ -37,121 +41,107 @@ DIVERGING_RED_BLUE = [
     "#051c2c",  # highest value
 ]
 
+# TODO: modify Vizro chart template instead of putting colors here? Put colors in colors SimpleNamespace?
 
-@capture("graph")
-def bar_chart_by_category(data_frame, custom_data):
-    """Custom bar chart made with Plotly."""
-    if not data_frame["Category"].eq(data_frame["Category"].iloc[0]).all():
-        x = "Category"
-    else:
-        x = "Sub-Category"
+
+# Helper functions
+def _aggregate_data(data_frame, group_columns, column):
+    """Aggregate data using the appropriate function for the column."""
+    return data_frame.groupby(group_columns, as_index=False).agg({column: COLUMN_TO_AGGFUNC[column]})
+
+
+# TODO: move to data_processing?
+def _relabel_years(data_frame):
+    """Relabel years for human-readable plotting."""
+    data_frame["Year"] = data_frame["Year"].map({THIS_YEAR: "This year", LAST_YEAR: "Last year"})
+    return data_frame
+
+
+def _create_year_comparison_bar_chart(data_frame, group_column, column, title_suffix):
+    """Helper function to create a grouped bar chart comparing years."""
+    grouped_df = _aggregate_data(data_frame, [group_column, "Year"], column)
+    grouped_df = _relabel_years(grouped_df)
 
     fig = px.bar(
-        data_frame,
-        x=x,
-        y="Sales",
-        title=f"Sales | By {x} <br><sup> 💡 Click on the category to drill-down to sub-category. "
-        f"Reset by using reset button next to the theme switch.</sup>",
-        custom_data=custom_data,
-        color_discrete_sequence=[PRIMARY_COLOR],
+        grouped_df,
+        x=group_column,
+        y=column,
+        color="Year",
+        barmode="group",
+        title=f"{COLUMN_TO_METRIC[column]} | {title_suffix}",
+        color_discrete_map=YEAR_COLOR_MAP,
     )
 
+    fig.update_layout(xaxis_title=None, yaxis_title=None, bargap=0.4, showlegend=False)
+
+    return fig
+
+
+# Chart functions in order of usage in app.py
+@capture("graph")
+def overview_by_month(data_frame, column):
+    grouped_df = _aggregate_data(data_frame, ["Year", "Month"], column)
+    # Relabel for plotting in human-readable way.
+    grouped_df["Month"] = grouped_df["Month"].map({i: calendar.month_abbr[i] for i in range(1, 13)})
+    grouped_df = _relabel_years(grouped_df)
+
+    fig = px.line(
+        grouped_df,
+        x="Month",
+        color="Year",
+        y=column,
+        markers=True,
+        title=f"{COLUMN_TO_METRIC[column]} | By Month",
+        color_discrete_map=YEAR_COLOR_MAP,
+    )
+    fig.data[1].update(line_width=2, fill="tozeroy")
     fig.update_layout(
-        yaxis={"visible": False},
-        showlegend=False,
-        bargap=0.6,
-        xaxis_title=None,
+        xaxis={"showgrid": False, "title": None, "range": [-0.1, 11.1]},
         yaxis_title=None,
+        legend={"yanchor": "top", "y": 1.2, "xanchor": "right", "x": 1, "title": None},
     )
-
     return fig
 
 
 @capture("graph")
-def create_map_bubble_new(data_frame, custom_data, value_col="Sales"):
-    """Custom map chart made with Plotly."""
-    if value_col == "Order ID":
-        state_metric = (
-            data_frame.groupby(["State_Code", "Region"], as_index=False)["Order ID"]
-            .nunique()
-            .rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        state_metric = (
-            data_frame.groupby(["State_Code", "Region"], as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
-    else:
-        state_metric = data_frame.groupby(["State_Code", "Region"], as_index=False)[value_col].sum()
-        agg_col = value_col
+def overview_by_order_status(data_frame, column):
+    grouped_df = _aggregate_data(data_frame, "Order Status", column)
 
-    # Choropleth
-    fig = px.choropleth(
-        state_metric,
-        locations="State_Code",
-        locationmode="USA-states",
-        color=agg_col,
-        hover_name="Region",
-        hover_data=["Region", agg_col],
-        scope="usa",
-        custom_data=custom_data,
-        color_continuous_scale=DIVERGING_RED_BLUE,
-        color_continuous_midpoint=0,
+    fig = px.pie(
+        grouped_df,
+        names="Order Status",
+        values=column,
+        color="Order Status",
+        title=f"{COLUMN_TO_METRIC[column]} | By Order Status",
+        color_discrete_map={"In Transit": PRIMARY_COLOR, "Processing": ORANGE_COLOR, "Delivered": GREEN_COLOR},
+        hole=0.6,
     )
 
     fig.update_layout(
-        margin={"l": 10, "r": 10, "t": 10, "b": 10},
+        legend={"yanchor": "bottom", "y": -0.2, "xanchor": "right", "orientation": "v"},
     )
-    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "bottom"}, "orientation": "h", "x": 0.5, "y": 0})
 
     return fig
 
 
 @capture("graph")
-def create_lollipop_chart_by_region(data_frame, value_col="Sales"):
-    """Create a lollipop chart showing aggregated metrics by region using Plotly."""
-    # --- Aggregate based on chosen metric ---
-    if value_col == "Order ID":
-        region_metric = (
-            data_frame.groupby("Region", as_index=False)["Order ID"].nunique().rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        region_metric = (
-            data_frame.groupby("Region", as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
-    else:
-        region_metric = (
-            data_frame.groupby("Region", as_index=False)[value_col].sum().rename(columns={value_col: value_col})
-        )
-        agg_col = value_col
-
-    # --- Sort regions for visual clarity ---
-    region_metric = region_metric.sort_values(by=agg_col, ascending=True)
-
-    fig = go.Figure()
+def overview_by_region(data_frame, column):
+    grouped_df = _aggregate_data(data_frame, "Region", column).sort_values(column, ascending=True)
 
-    fig.add_trace(
-        go.Bar(
-            x=region_metric[agg_col],
-            y=region_metric["Region"],
-            showlegend=False,
-            hoverinfo="skip",
-            orientation="h",
-            marker={"color": PRIMARY_COLOR},
-        )
+    fig = px.bar(
+        grouped_df,
+        x=column,
+        y="Region",
+        orientation="h",
+        title=f"{COLUMN_TO_METRIC[column]} | By Region",
+        color_discrete_sequence=[PRIMARY_COLOR],
     )
 
+    # Add scatter markers on top to create lollipop effect
     fig.add_trace(
         go.Scatter(
-            x=region_metric[agg_col],
-            y=region_metric["Region"],
+            x=grouped_df[column],
+            y=grouped_df["Region"],
             mode="markers",
             marker={"size": 14, "color": PRIMARY_COLOR, "line": {"color": PRIMARY_COLOR, "width": 1.5}},
             showlegend=False,
@@ -159,244 +149,100 @@ def create_lollipop_chart_by_region(data_frame, value_col="Sales"):
     )
 
     fig.update_layout(
-        title=f"{agg_col} | By Region",
         xaxis_title=None,
         yaxis_title=None,
         bargap=0.8,
+        showlegend=False,
     )
 
+    fig.update_traces(hoverinfo="skip", selector={"type": "bar"})
+
     return fig
 
 
 @capture("graph")
-def create_bar_current_vs_previous_segment(data_frame, value_col="Sales"):
-    """Custom bar chart made with Plotly."""
-    data_frame["Order Date"] = pd.to_datetime(data_frame["Order Date"])
-    data_frame["Year"] = data_frame["Order Date"].dt.year
-
-    if value_col == "Order ID":
-        agg_df = (
-            data_frame.groupby(["Segment", "Year"], as_index=False)["Order ID"]
-            .nunique()
-            .rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        agg_df = (
-            data_frame.groupby(["Segment", "Year"], as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
-    else:
-        agg_df = data_frame.groupby(["Segment", "Year"], as_index=False)[value_col].sum()
-        agg_col = value_col
-
-    pivot_df = agg_df.pivot_table(index="Segment", columns="Year", values=agg_col).reset_index()
-
-    fig = go.Figure()
-
-    if PREVIOUS_YEAR in pivot_df.columns:
-        fig.add_trace(
-            go.Bar(
-                x=pivot_df["Segment"],
-                y=pivot_df[PREVIOUS_YEAR],
-                name="Previous year",
-                marker_color=SECONDARY_COLOR,
-            )
-        )
-
-    if CURRENT_YEAR in pivot_df.columns:
-        fig.add_trace(
-            go.Bar(
-                x=pivot_df["Segment"],
-                y=pivot_df[CURRENT_YEAR],
-                name="Current year",
-                marker_color=PRIMARY_COLOR,
-            )
-        )
-
-    fig.update_layout(
-        barmode="group",
-        xaxis_title=None,
-        yaxis_title=None,
-        bargap=0.4,
-        title=f"{agg_col} | By Customer Segment",
-        showlegend=False,
-    )
-
-    return fig
+def overview_by_customer_segment(data_frame, column):
+    """Bar chart comparing current year vs previous year by customer segment."""
+    return _create_year_comparison_bar_chart(data_frame, "Segment", column, "By Customer Segment")
 
 
 @capture("graph")
-def create_bar_current_vs_previous_category(data_frame, value_col="Sales"):
+def overview_by_product_category(data_frame, column):
     """Bar chart comparing current year vs previous year by category."""
-    data_frame["Year"] = data_frame["Order Date"].dt.year
+    return _create_year_comparison_bar_chart(data_frame, "Category", column, "By Product Category")
 
-    if value_col == "Order ID":
-        agg_df = (
-            data_frame.groupby(["Category", "Year"], as_index=False)["Order ID"]
-            .nunique()
-            .rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        agg_df = (
-            data_frame.groupby(["Category", "Year"], as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
-    else:
-        agg_df = data_frame.groupby(["Category", "Year"], as_index=False)[value_col].sum()
-        agg_col = value_col
-
-    pivot_df = agg_df.pivot_table(index="Category", columns="Year", values=agg_col).reset_index()
 
-    fig = go.Figure()
-
-    if PREVIOUS_YEAR in pivot_df.columns:
-        fig.add_trace(
-            go.Bar(
-                x=pivot_df["Category"],
-                y=pivot_df[PREVIOUS_YEAR],
-                name="Previous year",
-                marker_color=SECONDARY_COLOR,
-            )
-        )
+# TODO: label with dollars, change color scale depending on metric.
+@capture("graph")
+def regions_map_chart(data_frame, custom_data, column):
+    grouped_df = _aggregate_data(data_frame, ["State Code", "Region"], column)
 
-    if CURRENT_YEAR in pivot_df.columns:
-        fig.add_trace(
-            go.Bar(
-                x=pivot_df["Category"],
-                y=pivot_df[CURRENT_YEAR],
-                name="Current year",
-                marker_color=PRIMARY_COLOR,
-            )
-        )
+    fig = px.choropleth(
+        grouped_df,
+        locations="State Code",
+        locationmode="USA-states",
+        color=column,
+        hover_name="Region",
+        hover_data=column,
+        scope="usa",
+        custom_data=custom_data,
+        color_continuous_scale=DIVERGING_RED_BLUE,
+        color_continuous_midpoint=0,
+    )
 
     fig.update_layout(
-        barmode="group",
-        xaxis_title=None,
-        yaxis_title=None,
-        bargap=0.4,
-        title=f"{agg_col} | By Product Category",
-        showlegend=False,
+        margin={"l": 10, "r": 10, "t": 10, "b": 10},
     )
+    fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "bottom"}, "orientation": "h", "x": 0.5, "y": 0})
 
     return fig
 
 
+# TODO: label with dollars
 @capture("graph")
-def create_line_chart_per_month(data_frame, value_col="Sales"):
-    """Custom line chart made with Plotly."""
-    data_frame["Order Date"] = pd.to_datetime(data_frame["Order Date"])
-    data_frame["Year"] = data_frame["Order Date"].dt.year
-    data_frame["Month"] = data_frame["Order Date"].dt.month
-
-    if value_col == "Order ID":
-        monthly = (
-            data_frame.groupby(["Year", "Month"], as_index=False)["Order ID"]
-            .nunique()
-            .rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        monthly = (
-            data_frame.groupby(["Year", "Month"], as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
-    else:
-        monthly = data_frame.groupby(["Year", "Month"], as_index=False)[value_col].sum()
-        agg_col = value_col
-
-    prev_year = monthly[monthly["Year"] == PREVIOUS_YEAR]
-    curr_year = monthly[monthly["Year"] == CURRENT_YEAR]
-
-    fig = go.Figure()
-    fig.add_trace(
-        go.Scatter(
-            x=curr_year["Month"],
-            y=curr_year[agg_col],
-            name="Current Year",
-            marker_color=PRIMARY_COLOR,
-            line_width=2,
-            fill="tozeroy",
-        )
-    )
-    fig.add_trace(
-        go.Scatter(
-            x=prev_year["Month"],
-            y=prev_year[agg_col],
-            name="Previous Year",
-            marker_color=SECONDARY_COLOR,
-        )
-    )
-
-    fig.update_layout(
-        xaxis={
-            "showgrid": False,
-            "title": None,
-            "tickmode": "array",
-            "tickvals": list(range(1, 13)),
-            "range": [1, 12],
-            "ticktext": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-        },
-        yaxis_title=None,
-        title=f"{agg_col} | By Month",
-        legend={"yanchor": "top", "y": 1.2, "xanchor": "right", "x": 1},
-    )
-
+def regions_top_n_chart(data_frame, x, y, n):
+    top_df = data_frame.groupby(y).agg({x: COLUMN_TO_AGGFUNC[x]}).sort_values(x).head(n).reset_index()
+    fig = px.bar(top_df, x=x, y=y, orientation="h", color_discrete_sequence=[PRIMARY_COLOR], title=f"Top {n} by {x}")
     return fig
 
 
+# TODO: check and refactor
 @capture("graph")
-def pie_chart_by_order_status(data_frame, value_col="Sales"):
-    """Pie chart showing distribution by Order Status."""
-    if value_col == "Order ID":
-        status_metric = (
-            data_frame.groupby("Order Status", as_index=False)["Order ID"]
-            .nunique()
-            .rename(columns={"Order ID": "Orders"})
-        )
-        agg_col = "Orders"
-    elif value_col == "Customer ID":
-        status_metric = (
-            data_frame.groupby("Order Status", as_index=False)["Customer ID"]
-            .nunique()
-            .rename(columns={"Customer ID": "Customers"})
-        )
-        agg_col = "Customers"
+def bar_chart_by_category(data_frame, custom_data):
+    """Custom bar chart made with Plotly."""
+    if not data_frame["Category"].eq(data_frame["Category"].iloc[0]).all():
+        x = "Category"
     else:
-        status_metric = data_frame.groupby("Order Status", as_index=False)[value_col].sum()
-        agg_col = value_col
+        x = "Sub-Category"
 
-    fig = px.pie(
-        status_metric,
-        names="Order Status",
-        values=agg_col,
-        color="Order Status",
-        title=f"{agg_col} by Order Status",
-        color_discrete_map={"In Transit": PRIMARY_COLOR, "Processing": ORANGE_COLOR, "Delivered": GREEN_COLOR},
-        hole=0.6,
+    fig = px.bar(
+        data_frame,
+        x=x,
+        y="Sales",
+        title=f"Sales | By {x} <br><sup> 💡 Click on the category to drill-down to sub-category. "
+        f"Reset by using reset button next to the theme switch.</sup>",
+        custom_data=custom_data,
+        color_discrete_sequence=[PRIMARY_COLOR],
     )
 
     fig.update_layout(
-        title=f"{agg_col} | By Order Status",
-        legend={"yanchor": "bottom", "y": -0.2, "xanchor": "right", "orientation": "v"},
+        yaxis={"visible": False},
+        showlegend=False,
+        bargap=0.6,
+        xaxis_title=None,
+        yaxis_title=None,
     )
 
     return fig
 
 
+# TODO: check and refactor
 @capture("graph")
 def scatter_with_quadrants(
+    data_frame: pd.DataFrame,
     x: str,
     y: str,
     custom_data: list[str],
-    data_frame: pd.DataFrame = None,
     highlight_sub_category=None,
 ):
     """Custom scatter plot with quadrants grouped by Sub-Category."""
@@ -514,304 +360,49 @@ def scatter_with_quadrants(
 
 
 @capture("graph")
-def pareto_customers_chart(data_frame, value_col="Sales", highlight_customer=None):
-    """Custom chart made with Plotly."""
-    customer_df = (
-        data_frame.groupby("Customer Name", as_index=False)[value_col].sum().sort_values(by=value_col, ascending=False)
+def pareto_customers_chart(data_frame, highlight_customer=None):
+    # Need to run make_customer_sales_pareto_df after Filters are applied, hence it's inside this custom chart
+    # rather than passing a pareto df into this function.
+    data_frame = make_customer_sales_pareto_df(data_frame)
+    x, y = "% of Total Customers", "Cumulative % of Sales"
+
+    # Add origin point (0, 0) to the start of the dataframe so line joins to origin.
+    origin_row = pd.DataFrame(
+        {x: [0], y: [0], "Customer Name": [""], "Sales": [0], "Cumulative Sales": [0], "Rank": [0]}
     )
-
-    customer_df["Cumulative Value"] = customer_df[value_col].cumsum()
-    total_value = customer_df[value_col].sum()
-    customer_df["Cumulative % Value"] = 100 * customer_df["Cumulative Value"] / total_value
-
-    customer_df["Customer Rank"] = range(1, len(customer_df) + 1)
-    customer_df["Cumulative % Customers"] = 100 * customer_df["Customer Rank"] / len(customer_df)
-
-    thresholds = {
-        "A": 20,
-        "B": 50,
-        "C": 100,
-    }
-
-    def assign_segment(cust_pct):
-        if cust_pct <= thresholds["A"]:
-            return "A"
-        elif cust_pct <= thresholds["B"]:
-            return "B"
-        else:
-            return "C"
-
-    customer_df["Segment"] = customer_df["Cumulative % Customers"].apply(assign_segment)
+    data_frame = pd.concat([origin_row, data_frame], ignore_index=True)
 
     fig = px.line(
-        customer_df,
-        x="Cumulative % Customers",
-        y="Cumulative % Value",
+        data_frame,
+        x=x,
+        y=y,
         markers=True,
-        title=f"Pareto Analysis of Customers ({value_col})",
-        hover_data=["Customer Name", value_col, "Cumulative % Value"],
+        title="Pareto Analysis of Customer Sales",
         color_discrete_sequence=[ORANGE_COLOR],
     )
-    fig.update_traces(showlegend=False)
-    fig.add_vrect(x0=0, x1=thresholds["A"], fillcolor=PRIMARY_COLOR, opacity=0.6, layer="below")
-    fig.add_vrect(x0=thresholds["A"], x1=thresholds["B"], fillcolor=PRIMARY_COLOR, opacity=0.3, layer="below")
-    fig.add_vrect(x0=thresholds["B"], x1=100, fillcolor=PRIMARY_COLOR, opacity=0.1, layer="below")
-
-    if highlight_customer and highlight_customer in customer_df["Customer Name"].to_numpy():
-        cust = customer_df[customer_df["Customer Name"] == highlight_customer].iloc[0]
-        fig.add_trace(
-            go.Scatter(
-                x=[cust["Cumulative % Customers"]],
-                y=[cust["Cumulative % Value"]],
+
+    # Add another trace for the highlighted customers.
+    if highlight_customer is not None:
+        highlight_customer_data = data_frame[data_frame["Customer Name"] == highlight_customer]
+        if not highlight_customer_data.empty:
+            highlight_customer_data = highlight_customer_data.iloc[0]
+            fig.add_scatter(
+                x=[highlight_customer_data[x]],
+                y=[highlight_customer_data[y]],
                 mode="markers+text",
-                text=[highlight_customer],
                 textposition="top right",
-                marker={"color": ORANGE_COLOR, "size": 12, "line": {"width": 2}},
-                showlegend=False,
+                text=[highlight_customer_data["Customer Name"]],
+                marker=dict(size=12, color=ORANGE_COLOR, line=dict(width=2)),
             )
-        )
-
-    fig.update_layout(
-        xaxis_title="% of Total Customers",
-        yaxis_title=f"Cumulative % of {value_col}",
-        yaxis={"range": [0, 105]},
-        xaxis={"range": [0, 105]},
-    )
-
-    return fig
 
+    thresholds = [0, 20, 50, 100]
+    opacities = [0.6, 0.3, 0.1]
 
-CELL_STYLE_PRODUCT = {
-    "styleConditions": [
-        {
-            "condition": "params.value < -0.5",
-            "style": {"backgroundColor": "#e33b3b"},
-        },
-        {
-            "condition": "params.value >= -0.5 && params.value <= 0",
-            "style": {"backgroundColor": "#f19791"},
-        },
-        {
-            "condition": "params.value > 0 && params.value <= 0.30",
-            "style": {"backgroundColor": "#728aff"},
-        },
-        {
-            "condition": "params.value > 0.30",
-            "style": {"backgroundColor": "#2251ff"},
-        },
-    ]
-}
-
-
-COLUMN_DEFS_PRODUCT = [
-    # {"field": "Product Name", "cellDataType": "text", "headerName": "Product", "flex": 3},
-    {"field": "Sub-Category", "cellDataType": "text", "headerName": "Sub-Category", "flex": 3},
-    {
-        "field": "Profit",
-        "cellDataType": "number",
-        "flex": 2,
-        "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
-    },
-    {
-        "field": "Sales",
-        "cellDataType": "number",
-        "flex": 2,
-        "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
-    },
-    {
-        "field": "Profit Margin",
-        "flex": 2,
-        "cellDataType": "number",
-        "valueFormatter": {"function": "d3.format('.0%')(params.value)"},
-        "cellStyle": CELL_STYLE_PRODUCT,
-    },
-]
-
-
-CELL_STYLE_CUSTOMERS = {
-    "styleConditions": [
-        {
-            "condition": "params.value < -0.1",
-            "style": {"backgroundColor": "#ff9222"},
-        },
-        {
-            "condition": "params.value >= -0.1 && params.value <= 0",
-            "style": {"backgroundColor": "#ffba7f"},
-        },
-        {
-            "condition": "params.value > 0 && params.value <= 0.05",
-            "style": {"backgroundColor": "#e4e4e4"},
-        },
-        {
-            "condition": "params.value > 0.05 && params.value <= 0.15",
-            "style": {"backgroundColor": "#b7d4ee"},
-        },
-        {
-            "condition": "params.value > 0.15 && params.value <= 0.20",
-            "style": {"backgroundColor": "#80c4f6"},
-        },
-        {
-            "condition": "params.value > 0.20",
-            "style": {"backgroundColor": "#00b4ff"},
-        },
-    ]
-}
-
-
-COLUMN_DEFS_CUSTOMERS = [
-    {"field": "Rank", "cellDataType": "number", "headerName": "Rank", "flex": 2},
-    {
-        "field": "Customer Name",
-        "cellDataType": "text",
-        "flex": 3,
-        # "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
-    },
-    {
-        "field": "Sales",
-        "cellDataType": "number",
-        "flex": 3,
-        "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
-    },
-    {
-        "headerName": "Cumulative %",
-        "field": "Cumulative %",
-        "type": "numericColumn",
-        "valueFormatter": {"function": "d3.format('.1f')(params.value) + '%'"},
-        "width": 130,
-    },
-]
-
+    # Add coloured background for different thresholds.
+    for (x0, x1), opacity in zip(zip(thresholds, thresholds[1:]), opacities):
+        fig.add_shape(type="rect", x0=x0, x1=x1, opacity=opacity)
+    fig.update_shapes(y0=0, y1=100, fillcolor=PRIMARY_COLOR, layer="below", line_width=0)
 
-@capture("graph")
-def bar_chart_top_n(data_frame, x="Sales", y="City", top_n=10):
-    """Generic bar chart to show top N by any dimension."""
-    # TODO: Needs to be fixed when prefiltered on city. Otherwise, top N is not properly recalculated
-    # after clicking on a state.
-    df_top = data_frame.groupby(y).agg({x: "sum"}).sort_values(x, ascending=False).head(top_n).reset_index()
-
-    # Sort ascending so highest appears at top in horizontal bar chart
-    df_top = df_top.sort_values(x, ascending=True)
-
-    # Create bar chart
-    fig = px.bar(
-        df_top,
-        x=x,
-        y=y,
-        orientation="h",
-        color_discrete_sequence=[PRIMARY_COLOR],
-        title=f"Top {top_n} {y} by {x}",
-    )
+    fig.update_layout(showlegend=False, yaxis={"range": [0, 102]}, xaxis={"range": [0, 102]})
 
     return fig
-
-
-@capture("ag_grid")
-def custom_orders_aggrid(data_frame):
-    """Custom aggrid table."""
-    data_frame["Profit Ratio"] = (data_frame["Profit"] / data_frame["Sales"]).round(3)
-    column_defs_orders = [
-        {"headerName": "Order ID", "field": "Order ID", "minWidth": 150},
-        {"headerName": "Status", "field": "Order Status", "minWidth": 150, "cellRenderer": "statusCellRenderer"},
-        {
-            "headerName": "Segment",
-            "field": "Segment",
-            "minWidth": 140,
-        },
-        {"headerName": "Customer", "field": "Customer Name", "minWidth": 170},
-        {"headerName": "State", "field": "State", "minWidth": 150},
-        {"headerName": "City", "field": "City", "minWidth": 150},
-        {"headerName": "Category", "field": "Category", "minWidth": 150},
-        {"headerName": "Sub-Category", "field": "Sub-Category", "minWidth": 150},
-        {"headerName": "Sales", "field": "Sales", "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"}},
-        {
-            "headerName": "Profit",
-            "field": "Profit",
-            "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
-        },
-        {
-            "headerName": "Profit Ratio",
-            "field": "Profit Ratio",
-            "minWidth": 140,
-            "valueFormatter": {"function": "d3.format('.1%')(params.value)"},
-            "cellStyle": {
-                "styleConditions": [
-                    {
-                        "condition": "Number(params.value) < -0.5",
-                        "style": {
-                            "backgroundColor": "#e33b3b",
-                            "color": "white",
-                            "borderRadius": "18px",
-                            "padding": "4px",
-                            "fontWeight": "600",
-                            "justifyContent": "center",
-                            "alignItems": "center",
-                            "display": "flex",
-                            "marginTop": "8px",
-                            "height": "30px",
-                        },
-                    },
-                    {
-                        "condition": "Number(params.value) >= -0.5 && Number(params.value) < 0",
-                        "style": {
-                            "backgroundColor": "#f19791",
-                            "color": "white",
-                            "borderRadius": "18px",
-                            "padding": "4px",
-                            "fontWeight": "600",
-                            "justifyContent": "center",
-                            "alignItems": "center",
-                            "display": "flex",
-                            "marginTop": "8px",
-                            "height": "30px",
-                        },
-                    },
-                    {
-                        "condition": "Number(params.value) >= 0 && Number(params.value) < 0.30",
-                        "style": {
-                            "backgroundColor": "#728aff",
-                            "color": "white",
-                            "borderRadius": "18px",
-                            "padding": "4px",
-                            "fontWeight": "600",
-                            "justifyContent": "center",
-                            "alignItems": "center",
-                            "display": "flex",
-                            "marginTop": "8px",
-                            "height": "30px",
-                        },
-                    },
-                    {
-                        "condition": "Number(params.value) >= 0.30",
-                        "style": {
-                            "backgroundColor": "#2251ff",
-                            "color": "white",
-                            "borderRadius": "18px",
-                            "padding": "4px",
-                            "fontWeight": "600",
-                            "justifyContent": "center",
-                            "alignItems": "center",
-                            "display": "flex",
-                            "marginTop": "8px",
-                            "height": "30px",
-                        },
-                    },
-                ]
-            },
-        },
-    ]
-
-    aggrid = AgGrid(
-        columnDefs=column_defs_orders,
-        defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth": 30, "flex": 1},
-        style={"height": "800px", "width": "100%"},
-        rowData=data_frame.to_dict("records"),
-        dashGridOptions={
-            "rowHeight": 55,
-            "animateRows": True,
-            "suppressMovableColumns": True,
-            "pagination": True,
-            "paginationPageSize": 20,
-        },
-        dangerously_allow_code=True,
-    )
-    return aggrid

data.py

@@ -1,119 +0,0 @@
-"""Data for custom charts."""
-
-import random
-
-import pandas as pd
-
-# Map state names to state codes
-state_code_map = {
-    "Alabama": "AL",
-    "Alaska": "AK",
-    "Arizona": "AZ",
-    "Arkansas": "AR",
-    "California": "CA",
-    "Colorado": "CO",
-    "Connecticut": "CT",
-    "Delaware": "DE",
-    "Florida": "FL",
-    "Georgia": "GA",
-    "Hawaii": "HI",
-    "Idaho": "ID",
-    "Illinois": "IL",
-    "Indiana": "IN",
-    "Iowa": "IA",
-    "Kansas": "KS",
-    "Kentucky": "KY",
-    "Louisiana": "LA",
-    "Maine": "ME",
-    "Maryland": "MD",
-    "Massachusetts": "MA",
-    "Michigan": "MI",
-    "Minnesota": "MN",
-    "Mississippi": "MS",
-    "Missouri": "MO",
-    "Montana": "MT",
-    "Nebraska": "NE",
-    "Nevada": "NV",
-    "New Hampshire": "NH",
-    "New Jersey": "NJ",
-    "New Mexico": "NM",
-    "New York": "NY",
-    "North Carolina": "NC",
-    "North Dakota": "ND",
-    "Ohio": "OH",
-    "Oklahoma": "OK",
-    "Oregon": "OR",
-    "Pennsylvania": "PA",
-    "Rhode Island": "RI",
-    "South Carolina": "SC",
-    "South Dakota": "SD",
-    "Tennessee": "TN",
-    "Texas": "TX",
-    "Utah": "UT",
-    "Vermont": "VT",
-    "Virginia": "VA",
-    "Washington": "WA",
-    "West Virginia": "WV",
-    "Wisconsin": "WI",
-    "Wyoming": "WY",
-}
-
-superstore_df = pd.read_csv("superstore.csv", encoding="latin1")
-
-superstore_df["State_Code"] = superstore_df["State"].map(state_code_map)
-
-superstore_df["Order Date"] = pd.to_datetime(superstore_df["Order Date"], errors="coerce")
-superstore_df["Ship Date"] = pd.to_datetime(superstore_df["Ship Date"], errors="coerce")
-
-superstore_df["Year"] = superstore_df["Order Date"].dt.year
-superstore_df["Month"] = superstore_df["Order Date"].dt.month
-superstore_df["Day"] = superstore_df["Order Date"].dt.day
-
-# Find the latest 2 years in the dataset
-latest_two_years = sorted(superstore_df["Year"].unique())[-2:]
-
-# Filter dataframe for only those two years
-superstore_df = superstore_df[superstore_df["Year"].isin(latest_two_years)].copy()
-
-# Create Order Status - randomly assign one of three status values
-
-random.seed(42)  # For reproducibility
-superstore_df["Order Status"] = superstore_df.apply(
-    lambda x: random.choice(["Delivered", "In Transit", "Processing"]), axis=1
-)
-
-
-def create_superstore_product(data_frame):
-    """Creates pandas data frame."""
-    # data_frame["Category / Sub-Category"] = data_frame["Category"] + " / " + data_frame["Sub-Category"]
-    data_frame = data_frame.groupby(["Sub-Category"]).agg({"Sales": "sum", "Profit": "sum"}).reset_index()
-    data_frame["Profit Margin"] = data_frame["Profit"] / data_frame["Sales"]
-    data_frame["Profit Absolute"] = abs(data_frame["Profit"])
-
-    return data_frame
-
-
-def pareto_customers_table(data_frame):
-    """Creates pandas data frame."""
-    df = data_frame.groupby("Customer Name")["Sales"].sum().reset_index().sort_values(by="Sales", ascending=False)
-
-    df["Cumulative Sales"] = df["Sales"].cumsum()
-    df["Cumulative %"] = 100 * df["Cumulative Sales"] / df["Sales"].sum()
-    df["Rank"] = range(1, len(df) + 1)
-
-    return df[["Rank", "Customer Name", "Sales", "Cumulative Sales", "Cumulative %"]]
-
-
-def create_kpi_data(df, value_col="Sales"):
-    """Creates pandas data frame."""
-    df["Year"] = df["Order Date"].dt.year
-    # sales_by_year = df.groupby('Year')[value_col].sum()
-
-    if value_col in ["Order ID", "Customer ID"]:
-        result_by_year = df.groupby("Year")[value_col].nunique()
-    else:
-        result_by_year = df.groupby("Year")[value_col].sum()
-
-    new_df = pd.DataFrame({"total_2016": [result_by_year.get(2016, 0)], "total_2017": [result_by_year.get(2017, 0)]})
-
-    return new_df

data_processing.py

@@ -0,0 +1,66 @@
+"""Data processing functions for the Superstore BI dashboard."""
+
+import random
+
+import pandas as pd
+import us
+
+THIS_YEAR = 2017
+LAST_YEAR = 2016
+COLUMN_TO_METRIC = {"Sales": "Sales", "Profit": "Profit", "Order ID": "Orders", "Customer ID": "Customers"}
+COLUMN_TO_AGGFUNC = {"Sales": "sum", "Profit": "sum", "Order ID": "nunique", "Customer ID": "nunique"}
+
+
+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"])
+
+    # Map state names to state codes using us library. Needed for px.choropleth.
+    df["State Code"] = df["State"].map({state.name: state.abbr for state in us.states.STATES})
+
+    # 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 = df[df["Year"].isin([THIS_YEAR, LAST_YEAR])]
+
+    # 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
+
+
+def make_superstore_profit_df(df):
+    """Aggregate product data by sub-category with profit metrics.
+
+    Args:
+        df: Source dataframe containing Sales and Profit columns.
+
+    Returns:
+        pd.DataFrame: Aggregated dataframe with Sub-Category, Sales, Profit,
+            Profit Margin, and Profit Absolute columns.
+    """
+    df = df.groupby("Sub-Category", as_index=False).agg({"Sales": "sum", "Profit": "sum"})
+    df["Profit Margin"] = df["Profit"] / df["Sales"]
+    df["Profit Absolute"] = df["Profit"].abs()
+    return df
+
+
+def make_customer_sales_pareto_df(df):
+    """Create Pareto analysis dataframe for customer sales.
+
+    Args:
+        df: Source dataframe containing Customer Name and Sales columns.
+
+    Returns:
+        pd.DataFrame: Customer sales ranked with cumulative totals and percentages.
+    """
+    df = df.groupby("Customer Name", as_index=False)["Sales"].sum().sort_values("Sales", ascending=False)
+    df["Cumulative Sales"] = df["Sales"].cumsum()
+    df["Cumulative % of Sales"] = 100 * df["Cumulative Sales"] / df["Sales"].sum()
+    df["Rank"] = range(1, len(df) + 1)
+    df["% of Total Customers"] = 100 * df["Rank"] / len(df)
+    return df[["Rank", "Customer Name", "Sales", "Cumulative Sales", "Cumulative % of Sales", "% of Total Customers"]]

requirements.in

@@ -1,4 +1,4 @@
 gunicorn
 openpyxl
 vizro==0.1.47
-numpy!=2.0.2  # there is an issue with this specific version that the whl can't be built
+us

requirements.txt

@@ -43,11 +43,11 @@ gunicorn==23.0.0
 idna==3.11
     # via requests
 importlib-metadata==8.7.0
-    # via
-    #   dash
-    #   flask
+    # via dash
 itsdangerous==2.2.0
     # via flask
+jellyfish==1.2.1
+    # via us
 jinja2==3.1.6
     # via flask
 markupsafe==3.0.3
@@ -62,9 +62,7 @@ narwhals==2.10.0
 nest-asyncio==1.6.0
     # via dash
 numpy==2.0.1
-    # via
-    #   -r requirements.in
-    #   pandas
+    # via pandas
 openpyxl==3.1.5
     # via -r requirements.in
 packaging==25.0
@@ -105,13 +103,8 @@ setuptools==80.9.0
     # via dash
 six==1.17.0
     # via python-dateutil
-tomli==2.3.0
-    # via
-    #   autoflake
-    #   black
 typing-extensions==4.15.0
     # via
-    #   black
     #   dash
     #   pydantic
     #   pydantic-core
@@ -122,6 +115,8 @@ tzdata==2025.2
     # via pandas
 urllib3==2.5.0
     # via requests
+us==3.2.0
+    # via -r requirements.in
 vizro==0.1.47
     # via -r requirements.in
 werkzeug==3.1.3

tables.py

@@ -0,0 +1,188 @@
+"""AG Grid table configurations for the Superstore BI dashboard."""
+
+from dash_ag_grid import AgGrid
+from data_processing import make_customer_sales_pareto_df
+from vizro.models.types import capture
+from vizro.tables import dash_ag_grid
+
+# TODO: check and refactor
+CELL_STYLE_PRODUCT = {
+    "styleConditions": [
+        {
+            "condition": "params.value < -0.5",
+            "style": {"backgroundColor": "#e33b3b"},
+        },
+        {
+            "condition": "params.value >= -0.5 && params.value <= 0",
+            "style": {"backgroundColor": "#f19791"},
+        },
+        {
+            "condition": "params.value > 0 && params.value <= 0.30",
+            "style": {"backgroundColor": "#728aff"},
+        },
+        {
+            "condition": "params.value > 0.30",
+            "style": {"backgroundColor": "#2251ff"},
+        },
+    ]
+}
+
+
+COLUMN_DEFS_PRODUCT = [
+    {"field": "Sub-Category", "cellDataType": "text", "headerName": "Sub-Category", "flex": 3},
+    {
+        "field": "Profit",
+        "cellDataType": "number",
+        "flex": 2,
+        "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
+    },
+    {
+        "field": "Sales",
+        "cellDataType": "number",
+        "flex": 2,
+        "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
+    },
+    {
+        "field": "Profit Margin",
+        "flex": 2,
+        "cellDataType": "number",
+        "valueFormatter": {"function": "d3.format('.0%')(params.value)"},
+        "cellStyle": CELL_STYLE_PRODUCT,
+    },
+]
+
+
+@capture("ag_grid")
+def orders_ag_grid(data_frame):
+    """Create custom AG Grid table for orders with conditional formatting.
+
+    Args:
+        data_frame: Source dataframe containing order data.
+
+    Returns:
+        AgGrid: Configured AG Grid component with custom column definitions and styling.
+    """
+    data_frame["Profit Ratio"] = (data_frame["Profit"] / data_frame["Sales"]).round(3)
+    column_defs_orders = [
+        {"headerName": "Order ID", "field": "Order ID", "minWidth": 150},
+        {"headerName": "Status", "field": "Order Status", "minWidth": 150, "cellRenderer": "statusCellRenderer"},
+        {
+            "headerName": "Segment",
+            "field": "Segment",
+            "minWidth": 140,
+        },
+        {"headerName": "Customer", "field": "Customer Name", "minWidth": 170},
+        {"headerName": "State", "field": "State", "minWidth": 150},
+        {"headerName": "City", "field": "City", "minWidth": 150},
+        {"headerName": "Category", "field": "Category", "minWidth": 150},
+        {"headerName": "Sub-Category", "field": "Sub-Category", "minWidth": 150},
+        {"headerName": "Sales", "field": "Sales", "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"}},
+        {
+            "headerName": "Profit",
+            "field": "Profit",
+            "valueFormatter": {"function": "d3.format('$,.2f')(params.value)"},
+        },
+        {
+            "headerName": "Profit Ratio",
+            "field": "Profit Ratio",
+            "minWidth": 140,
+            "valueFormatter": {"function": "d3.format('.1%')(params.value)"},
+            "cellStyle": {
+                "styleConditions": [
+                    {
+                        "condition": "Number(params.value) < -0.5",
+                        "style": {
+                            "backgroundColor": "#e33b3b",
+                            "color": "white",
+                            "borderRadius": "18px",
+                            "padding": "4px",
+                            "fontWeight": "600",
+                            "justifyContent": "center",
+                            "alignItems": "center",
+                            "display": "flex",
+                            "marginTop": "8px",
+                            "height": "30px",
+                        },
+                    },
+                    {
+                        "condition": "Number(params.value) >= -0.5 && Number(params.value) < 0",
+                        "style": {
+                            "backgroundColor": "#f19791",
+                            "color": "white",
+                            "borderRadius": "18px",
+                            "padding": "4px",
+                            "fontWeight": "600",
+                            "justifyContent": "center",
+                            "alignItems": "center",
+                            "display": "flex",
+                            "marginTop": "8px",
+                            "height": "30px",
+                        },
+                    },
+                    {
+                        "condition": "Number(params.value) >= 0 && Number(params.value) < 0.30",
+                        "style": {
+                            "backgroundColor": "#728aff",
+                            "color": "white",
+                            "borderRadius": "18px",
+                            "padding": "4px",
+                            "fontWeight": "600",
+                            "justifyContent": "center",
+                            "alignItems": "center",
+                            "display": "flex",
+                            "marginTop": "8px",
+                            "height": "30px",
+                        },
+                    },
+                    {
+                        "condition": "Number(params.value) >= 0.30",
+                        "style": {
+                            "backgroundColor": "#2251ff",
+                            "color": "white",
+                            "borderRadius": "18px",
+                            "padding": "4px",
+                            "fontWeight": "600",
+                            "justifyContent": "center",
+                            "alignItems": "center",
+                            "display": "flex",
+                            "marginTop": "8px",
+                            "height": "30px",
+                        },
+                    },
+                ]
+            },
+        },
+    ]
+
+    aggrid = AgGrid(
+        columnDefs=column_defs_orders,
+        defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth": 30, "flex": 1},
+        style={"height": "800px", "width": "100%"},
+        rowData=data_frame.to_dict("records"),
+        dashGridOptions={
+            "rowHeight": 55,
+            "animateRows": True,
+            "suppressMovableColumns": True,
+            "pagination": True,
+            "paginationPageSize": 20,
+        },
+        dangerously_allow_code=True,
+    )
+    return aggrid
+
+
+@capture("ag_grid")
+def customers_ag_grid(data_frame):
+    data_frame = make_customer_sales_pareto_df(data_frame)
+    # Convert back to fraction since percentage is handled by cellDataType=percent.
+    data_frame["Cumulative %"] = data_frame["Cumulative % of Sales"] / 100
+
+    return dash_ag_grid(
+        data_frame,
+        columnDefs=[
+            {"field": "Rank", "width": 50},
+            {"field": "Customer Name"},
+            {"field": "Sales", "cellDataType": "dollar"},
+            {"field": "Cumulative %", "cellDataType": "percent", "width": 130},
+        ],
+    )()