Separate AG Grid tables from Plotly charts

Move all AG Grid table functions and configurations from charts.py to new tables.py file for better code organization and separation of concerns.

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

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

app.py

@@ -17,10 +17,9 @@ from charts import (
     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
+from tables import COLUMN_DEFS_PRODUCT, COLUMN_DEFS_CUSTOMERS, custom_orders_aggrid
 
 
 ###############################################################################
@@ -250,7 +249,8 @@ customers_page = vm.Page(
                 vm.Parameter(
                     id="customer_parameter",
                     targets=["pareto_chart.highlight_customer"],
-                    selector=vm.RadioItems(options=["NONE", *df["Customer Name"]], visible=False),
+                    selector=vm.RadioItems(options=["NONE", *df["Customer Name"]]),
+                    visible=False,
                 ),
             ],
         )

charts.py

@@ -3,7 +3,6 @@
 import pandas as pd
 import plotly.graph_objects as go
 import vizro.plotly.express as px
-from dash_ag_grid import AgGrid
 from vizro.models.types import capture
 
 CURRENT_YEAR = 2017
@@ -394,10 +393,10 @@ def pie_chart_by_order_status(data_frame, value_col="Sales"):
 
 @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."""
@@ -582,107 +581,6 @@ def pareto_customers_chart(data_frame, value_col="Sales", highlight_customer=Non
     return fig
 
 
-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,
-    },
-]
-
-
 @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."""
@@ -704,115 +602,3 @@ def bar_chart_top_n(data_frame, x="Sales", y="City", n=10):
     )
 
     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

tables.py

@@ -0,0 +1,222 @@
+"""AG Grid table configurations for the Superstore BI dashboard."""
+
+from dash_ag_grid import AgGrid
+from vizro.models.types import capture
+
+
+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,
+    },
+]
+
+
+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,
+    },
+    {
+        "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,
+    },
+]
+
+
+@capture("ag_grid")
+def custom_orders_aggrid(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