Further refactor KPI cards and simplify page structure

- Create create_kpi_card_figure helper to reduce KPI card repetition
- Simplify RadioItems options to list of values instead of dictionaries
- Condense grid layout using list multiplication ([[0, 0, 0]] * 3 + ...)
- Reorder page arguments: title, layout, components, controls
- Restore layout comment explaining grid height ratios

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

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

app.py

@@ -45,6 +45,30 @@ order_kpi_df = create_kpi_data(superstore_df, value_col="Order ID")
 customer_kpi_df = create_kpi_data(superstore_df, value_col="Customer ID")
 
 
+def create_kpi_card_figure(data_frame, title, icon, metric_value=None, is_currency=True):
+    """Create a KPI card figure with click action."""
+    # TODO: make this consistent
+    if metric_value is None:
+        metric_value = title
+
+    currency_prefix = "$" if is_currency else ""
+    value_format = f"{currency_prefix}{{value:,.0f}}"
+    reference_format = f"{{delta_relative:+.1%}} vs. last year ({currency_prefix}{{reference:,.0f}})"
+
+    return vm.Figure(
+        figure=kpi_card_reference(
+            data_frame=data_frame,
+            value_column="total_2017",
+            reference_column="total_2016",
+            value_format=value_format,
+            reference_format=reference_format,
+            title=title,
+            icon=icon,
+        ),
+        actions=va.set_control(control="metric", value=metric_value),
+    )
+
+
 def create_chart_container_with_nav(id, figure, nav_href=None):
     """Create a container with a chart and optional navigation button."""
     components = [vm.Graph(id=f"{id}_chart", figure=figure)]
@@ -62,62 +86,22 @@ def create_chart_container_with_nav(id, figure, nav_href=None):
     return vm.Container(id=id, components=components, layout=layout, variant="filled")
 
 
+# TODO: chart title spacing, use container.title?
+
 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="kpi-cards",
             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="metric", 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="metric", 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="metric", 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="metric", value="Customer ID"),
+                create_kpi_card_figure(sales_kpi_df, "Sales", "bar_chart"),
+                create_kpi_card_figure(profit_kpi_df, "Profit", "money_bag"),
+                create_kpi_card_figure(order_kpi_df, "Orders", "orders", metric_value="Order ID", is_currency=False),
+                create_kpi_card_figure(
+                    customer_kpi_df, "Customers", "group", metric_value="Customer ID", is_currency=False
                 ),
             ],
             layout=vm.Grid(grid=[[0, 1, 2, 3]]),
@@ -150,15 +134,7 @@ overview_page = vm.Page(
     controls=[
         vm.Parameter(
             id="metric",
-            selector=vm.RadioItems(
-                options=[
-                    {"value": "Sales", "label": "Sales"},
-                    {"value": "Profit", "label": "Profit"},
-                    {"value": "Order ID", "label": "Orders"},
-                    {"value": "Customer ID", "label": "Customers"},
-                ],
-                title="Metric",
-            ),
+            selector=vm.RadioItems(options=["Sales", "Profit", "Order ID", "Customer ID"]),
             targets=[
                 "region_bar_chart.value_col",
                 "category_bar_chart.value_col",
@@ -166,72 +142,27 @@ overview_page = vm.Page(
                 "line_month_chart.value_col",
                 "segment_bar_chart.value_col",
             ],
-            show_in_url=True,
+            show_in_url=True,  # TODO: think about where this needed
             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],
-        ],
-    ),
 )
 
 regions_page = vm.Page(
     title="Regions",
     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"),
+                                va.set_control(control="state_filter", value="State_Code"),
                             ],
                         ),
                     ],
@@ -259,6 +190,31 @@ regions_page = vm.Page(
                     variant="filled",
                 ),
             ],
+            controls=[
+                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"),
+                ),
+                vm.Parameter(
+                    selector=vm.RadioItems(
+                        options=["Sales", "Profit"],
+                        title="Choose metric",
+                    ),
+                    targets=[
+                        "region_map_chart.value_col",
+                        "pg2-chart-1.x",
+                    ],
+                ),
+            ],
         ),
     ],
 )
@@ -302,10 +258,8 @@ products_page = vm.Page(
     title="Products",
     components=[
         vm.Container(
-            title="",
             components=[
                 vm.Container(
-                    title="",
                     components=[
                         vm.Graph(
                             id="pg4-chart-1",
@@ -318,7 +272,6 @@ products_page = vm.Page(
                     variant="filled",
                 ),
                 vm.Container(
-                    title="",
                     components=[
                         vm.AgGrid(
                             id="table",
@@ -330,7 +283,6 @@ products_page = vm.Page(
                     variant="filled",
                 ),
                 vm.Container(
-                    title="",
                     components=[
                         vm.Graph(
                             id="pg4-chart-3",