Reorder chart functions by usage order in app.py

- Move helper functions (_aggregate_data, _relabel_years,
_create_year_comparison_bar_chart) to top after constants
- Reorder chart functions to match their actual usage in app.py:
1. overview_by_month
2. overview_by_order_status
3. overview_by_region
4. overview_by_customer_segment
5. overview_by_product_category
6. create_map_bubble_new
7. bar_chart_top_n
8. bar_chart_by_category
9. scatter_with_quadrants
10. pareto_customers_chart
- Improves code readability and maintainability

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

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

app.py

@@ -113,7 +113,7 @@ overview_page = vm.Page(
             id="metric",
             selector=vm.RadioItems(options=["Sales", "Profit", "Order ID", "Customer ID"]),
             targets=[
-                "region_bar_chart.value_col",
+                "region_bar_chart.column",
                 "category_bar_chart.column",
                 "order_status_pie_chart.column",
                 "month_line_chart.column",

charts.py

@@ -1,5 +1,7 @@
 """Collection of custom charts."""
 
+import calendar
+
 import pandas as pd
 import plotly.graph_objects as go
 import vizro.plotly.express as px
@@ -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",
@@ -38,35 +42,136 @@ DIVERGING_RED_BLUE = [
 ]
 
 
+# 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(
+        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 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"
+def overview_by_month(data_frame, column="Sales"):
+    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(
+        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 overview_by_order_status(data_frame, column="Sales"):
+    grouped_df = _aggregate_data(data_frame, "Order Status", column)
+
+    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(
+        legend={"yanchor": "bottom", "y": -0.2, "xanchor": "right", "orientation": "v"},
+    )
+
+    return fig
+
+
+@capture("graph")
+def overview_by_region(data_frame, column="Sales"):
+    grouped_df = _aggregate_data(data_frame, "Region", column)
+    grouped_df = grouped_df.sort_values(ascending=True)
 
     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,
+        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=grouped_df[column],
+            y=grouped_df["Region"],
+            mode="markers",
+            marker={"size": 14, "color": PRIMARY_COLOR, "line": {"color": PRIMARY_COLOR, "width": 1.5}},
+            showlegend=False,
+        )
+    )
+
     fig.update_layout(
-        yaxis={"visible": False},
-        showlegend=False,
-        bargap=0.6,
         xaxis_title=None,
         yaxis_title=None,
+        bargap=0.8,
+        showlegend=False,
     )
 
+    # Make the bars appear thinner for lollipop effect
+    fig.update_traces(hoverinfo="skip", selector={"type": "bar"})
+
     return fig
 
 
+@capture("graph")
+def overview_by_customer_segment(data_frame, column="Sales"):
+    """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 overview_by_product_category(data_frame, column="Sales"):
+    """Bar chart comparing current year vs previous year by category."""
+    return _create_year_comparison_bar_chart(data_frame, "Category", column, "By Product Category")
+
+
 @capture("graph")
 def create_map_bubble_new(data_frame, custom_data, value_col="Sales"):
     """Custom map chart made with Plotly."""
@@ -112,152 +217,52 @@ def create_map_bubble_new(data_frame, custom_data, value_col="Sales"):
 
 
 @capture("graph")
-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":
-        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()
-
-    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.add_trace(
-        go.Scatter(
-            x=region_metric[agg_col],
-            y=region_metric["Region"],
-            mode="markers",
-            marker={"size": 14, "color": PRIMARY_COLOR, "line": {"color": PRIMARY_COLOR, "width": 1.5}},
-            showlegend=False,
-        )
-    )
-
-    fig.update_layout(
-        title=f"{agg_col} | By Region",
-        xaxis_title=None,
-        yaxis_title=None,
-        bargap=0.8,
-    )
-
-    return fig
-
-
-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 bar_chart_top_n(data_frame, x="Sales", y="City", 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(n).reset_index()
 
-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)
+    # 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(
-        grouped_df,
-        x=group_column,
-        y=column,
-        color="Year",
-        barmode="group",
-        title=f"{COLUMN_TO_METRIC[column]} | {title_suffix}",
-        color_discrete_map={"This year": PRIMARY_COLOR, "Last year": SECONDARY_COLOR},
+        df_top,
+        x=x,
+        y=y,
+        orientation="h",
+        color_discrete_sequence=[PRIMARY_COLOR],
+        title=f"Top {n} {y} by {x}",
     )
 
-    fig.update_layout(xaxis_title=None, yaxis_title=None, bargap=0.4, showlegend=False)
-
-    return fig
-
-
-@capture("graph")
-def overview_by_customer_segment(data_frame, column="Sales"):
-    """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 overview_by_product_category(data_frame, column="Sales"):
-    """Bar chart comparing current year vs previous year by category."""
-    return _create_year_comparison_bar_chart(data_frame, "Category", column, "By Product Category")
-
-
-import calendar
-
-
-@capture("graph")
-def overview_by_month(data_frame, column="Sales"):
-    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={"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, "range": [-0.1, 11.1]},
-        yaxis_title=None,
-        title=f"{column} | By Month",
-        legend={"yanchor": "top", "y": 1.2, "xanchor": "right", "x": 1, "title": None},
-    )
     return fig
 
 
 @capture("graph")
-def overview_by_order_status(data_frame, column="Sales"):
-    grouped_df = _aggregate_data(data_frame, "Order Status", column)
+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"
 
-    fig = px.pie(
-        grouped_df,
-        names="Order Status",
-        values=column,
-        color="Order Status",
-        title=f"{column} | 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(
-        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
@@ -450,27 +455,4 @@ def pareto_customers_chart(data_frame, value_col="Sales", highlight_customer=Non
         xaxis={"range": [0, 105]},
     )
 
-    return fig
-
-
-@capture("graph")
-def bar_chart_top_n(data_frame, x="Sales", y="City", 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(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 {n} {y} by {x}",
-    )
-
-    return fig
+    return fig