Refactor KPI cards and chart functions with shared constants

- Add THIS_YEAR, LAST_YEAR, COLUMN_TO_METRIC, COLUMN_TO_AGGFUNC constants to data_processing.py
- Update create_kpi_card_with_action to use new constants
- Rename chart functions to use "overview_by_" prefix for consistency
- Simplify overview_by_month to use px.line instead of go.Figure with add_trace
- Update all function references in app.py

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -6,20 +6,28 @@ import vizro.actions as va
 from vizro.figures import kpi_card_reference
 from vizro.tables import dash_ag_grid
 
-from data_processing import make_superstore_profit_df, make_superstore_pareto_df, make_superstore_df
+from data_processing import (
+    make_superstore_profit_df,
+    make_superstore_pareto_df,
+    make_superstore_df,
+    COLUMN_TO_METRIC,
+    COLUMN_TO_AGGFUNC,
+    THIS_YEAR,
+    LAST_YEAR,
+)
 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_month,
+    overview_by_customer_segment,
+    overview_by_product_category,
     pareto_customers_chart,
     scatter_with_quadrants,
-    pie_chart_by_order_status,
+    overview_by_order_status,
     bar_chart_top_n,
-    create_lollipop_chart_by_region,
+    overview_by_region,
 )
-from tables import COLUMN_DEFS_PRODUCT, COLUMN_DEFS_CUSTOMERS, custom_orders_aggrid
+from tables import COLUMN_DEFS_PRODUCT, COLUMN_DEFS_CUSTOMERS, orders_ag_grid
 
 
 ###############################################################################
@@ -37,21 +45,19 @@ def create_filled_container(**kwargs):
 ###############################################################################
 # Overview page
 ###############################################################################
-def create_kpi_card_with_action(data_frame, title, icon, column=None, aggfunc="sum", prefix=""):
+def create_kpi_card_with_action(data_frame, column, icon, prefix=""):
     """Create a KPI card figure that updates the metric control when clicked."""
-    column = column or title
-
     # 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=aggfunc)
+    data_frame = data_frame.pivot_table(values=column, columns="Year", aggfunc=COLUMN_TO_AGGFUNC[column])
 
     return vm.Figure(
         figure=kpi_card_reference(
             data_frame=data_frame,
-            value_column=data_frame.columns.max(),  # This year
-            reference_column=data_frame.columns.min(),  # Last year
+            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=title,
+            title=COLUMN_TO_METRIC[column],
             icon=icon,
         ),
         actions=va.set_control(control="metric", value=column),
@@ -71,10 +77,10 @@ kpi_card_container = vm.Container(
     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, title="Sales", icon="Bar Chart", prefix="$"),
-        create_kpi_card_with_action(df, title="Profit", icon="Money Bag", prefix="$"),
-        create_kpi_card_with_action(df, title="Orders", icon="Orders", column="Order ID", aggfunc="nunique"),
-        create_kpi_card_with_action(df, title="Customers", icon="Group", column="Customer ID", aggfunc="nunique"),
+        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"),
     ],
 )
 
@@ -84,21 +90,21 @@ overview_page = vm.Page(
     layout=vm.Grid(grid=[[0, 0, 0]] * 3 + [[1, 1, 2]] * 5 + [[3, 4, 5]] * 5),
     components=[
         kpi_card_container,
-        create_filled_container(components=[vm.Graph(id="line_month_chart", figure=create_line_chart_per_month(df))]),
+        create_filled_container(components=[vm.Graph(id="month_line_chart", figure=overview_by_month(df))]),
         create_chart_container_with_nav(
-            graph=vm.Graph(id="order_status_chart", figure=pie_chart_by_order_status(df)),
+            graph=vm.Graph(id="order_status_pie_chart", figure=overview_by_order_status(df)),
             nav_href="/orders",
         ),
         create_chart_container_with_nav(
-            graph=vm.Graph(id="region_bar_chart", figure=create_lollipop_chart_by_region(df)),
+            graph=vm.Graph(id="region_bar_chart", figure=overview_by_region(df)),
             nav_href="/regions",
         ),
         create_chart_container_with_nav(
-            graph=vm.Graph(id="segment_bar_chart", figure=create_bar_current_vs_previous_segment(df)),
+            graph=vm.Graph(id="segment_bar_chart", figure=overview_by_customer_segment(df)),
             nav_href="/customers",
         ),
         create_chart_container_with_nav(
-            graph=vm.Graph(id="category_bar_chart", figure=create_bar_current_vs_previous_category(df)),
+            graph=vm.Graph(id="category_bar_chart", figure=overview_by_product_category(df)),
             nav_href="/products",
         ),
     ],
@@ -109,11 +115,10 @@ overview_page = vm.Page(
             targets=[
                 "region_bar_chart.value_col",
                 "category_bar_chart.value_col",
-                "order_status_chart.value_col",
-                "line_month_chart.value_col",
+                "order_status_pie_chart.value_col",
+                "month_line_chart.column",
                 "segment_bar_chart.value_col",
             ],
-            show_in_url=True,  # TODO: think about where this needed
             visible=False,
         )
     ],
@@ -157,7 +162,7 @@ regions_page = vm.Page(
                 vm.Filter(column="Segment", selector=vm.Checklist(title="Choose segment")),
                 vm.Filter(column="Category", selector=vm.Checklist(title="Choose category")),
                 vm.Parameter(
-                    targets=["usa_map.value_col", "top_n_bars.x"],
+                    targets=["usa_map.column", "top_n_bars.x"],
                     selector=vm.RadioItems(options=["Sales", "Profit"], title="Choose metric"),
                 ),
             ],
@@ -265,7 +270,7 @@ orders_page = vm.Page(
     title="Orders",
     layout=vm.Flex(),
     components=[
-        vm.AgGrid(figure=custom_orders_aggrid(df)),
+        vm.AgGrid(figure=orders_ag_grid(df)),
         vm.Button(text="Export data", icon="download", actions=va.export_data(file_format="xlsx")),
     ],
 )
@@ -287,9 +292,7 @@ navigation = vm.Navigation(
     ),
 )
 
-dashboard = vm.Dashboard(
-    title="Superstore dashboard", pages=list(pages.values()), navigation=navigation, theme="vizro_light"
-)
+dashboard = vm.Dashboard(title="Superstore dashboard", pages=pages.values(), navigation=navigation, theme="vizro_light")
 
 app = Vizro().build(dashboard)
 

charts.py

@@ -3,6 +3,7 @@
 import pandas as pd
 import plotly.graph_objects as go
 import vizro.plotly.express as px
+from data_processing import COLUMN_TO_METRIC, COLUMN_TO_AGGFUNC, LAST_YEAR, THIS_YEAR
 from vizro.models.types import capture
 
 CURRENT_YEAR = 2017
@@ -111,7 +112,7 @@ def create_map_bubble_new(data_frame, custom_data, value_col="Sales"):
 
 
 @capture("graph")
-def create_lollipop_chart_by_region(data_frame, value_col="Sales"):
+def overview_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":
@@ -169,7 +170,7 @@ def create_lollipop_chart_by_region(data_frame, value_col="Sales"):
 
 
 @capture("graph")
-def create_bar_current_vs_previous_segment(data_frame, value_col="Sales"):
+def overview_by_customer_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
@@ -229,7 +230,7 @@ def create_bar_current_vs_previous_segment(data_frame, value_col="Sales"):
 
 
 @capture("graph")
-def create_bar_current_vs_previous_category(data_frame, value_col="Sales"):
+def overview_by_product_category(data_frame, value_col="Sales"):
     """Bar chart comparing current year vs previous year by category."""
     data_frame["Year"] = data_frame["Order Date"].dt.year
 
@@ -287,73 +288,37 @@ def create_bar_current_vs_previous_category(data_frame, value_col="Sales"):
     return fig
 
 
-@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
+import calendar
 
-    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]
+@capture("graph")
+def overview_by_month(data_frame, column="Sales"):
+    grouped_df = data_frame.groupby(["Year", "Month"], as_index=False).agg({column: COLUMN_TO_AGGFUNC[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["Year"] = grouped_df["Year"].map({THIS_YEAR: "This year", LAST_YEAR: "Last 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 = px.line(
+        grouped_df,
+        x="Month",
+        color="Year",
+        y=column,
+        markers=True,
+        title=f"{COLUMN_TO_METRIC[column]} | By Month",
+        color_discrete_map={"This year": PRIMARY_COLOR, "Last year": SECONDARY_COLOR},
     )
-
+    fig.data[1].update(line_width=2, fill="tozeroy")
     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"],
-        },
+        xaxis={"showgrid": False, "title": None, "range": [-0.1, 11.1]},
         yaxis_title=None,
-        title=f"{agg_col} | By Month",
-        legend={"yanchor": "top", "y": 1.2, "xanchor": "right", "x": 1},
+        title=f"{column} | By Month",
+        legend={"yanchor": "top", "y": 1.2, "xanchor": "right", "x": 1, "title": None},
     )
-
     return fig
 
 
 @capture("graph")
-def pie_chart_by_order_status(data_frame, value_col="Sales"):
+def overview_by_order_status(data_frame, value_col="Sales"):
     """Pie chart showing distribution by Order Status."""
     if value_col == "Order ID":
         status_metric = (

data_processing.py

@@ -5,6 +5,11 @@ 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.
@@ -21,7 +26,7 @@ def make_superstore_df():
     # Filter dataframe for only the latest 2 years and add a month column.
     data_frame["Year"] = data_frame["Order Date"].dt.year
     data_frame["Month"] = data_frame["Order Date"].dt.month
-    data_frame = data_frame[data_frame["Year"].isin(sorted(data_frame["Year"].unique())[-2:])]
+    data_frame = data_frame[data_frame["Year"].isin([THIS_YEAR, LAST_YEAR])]
 
     # Create order status - randomly assign one of three status values
     data_frame["Order Status"] = random.choices(["Delivered", "In Transit", "Processing"], k=len(data_frame))

tables.py

@@ -104,7 +104,7 @@ COLUMN_DEFS_CUSTOMERS = [
 
 
 @capture("ag_grid")
-def custom_orders_aggrid(data_frame):
+def orders_ag_grid(data_frame):
     """Create custom AG Grid table for orders with conditional formatting.
 
     Args: