---
title: Cross-Filtering
description: A regional dashboard where a single dropdown instantly filters every chart and metric.
icon: filter
mode: wide
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

A dashboard where one control filters everything. Pick a region from the dropdown and every metric, bar chart, radar chart, and trend line updates instantly — no server round-trip, no page reload. This is the pattern that makes Prefab's client-side state model fundamentally different from frameworks that rerun your script on every interaction.

<ComponentPreview json={{"view":{"let":{"m":"{{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : region == 'east' ? metrics_east : region == 'west' ? metrics_west : metrics_all }}","chart":"{{ region == 'north' ? monthly_north : region == 'south' ? monthly_south : region == 'east' ? monthly_east : region == 'west' ? monthly_west : monthly_all }}","cat":"{{ region == 'north' ? categories_north : region == 'south' ? categories_south : region == 'east' ? categories_east : region == 'west' ? categories_west : categories_all }}","t":"{{ region == 'north' ? trend_north : region == 'south' ? trend_south : region == 'east' ? trend_east : region == 'west' ? trend_west : trend_all }}"},"type":"Column","children":[{"cssClass":"gap-4","type":"Dashboard","columns":12,"rowHeight":"auto","children":[{"type":"DashboardItem","col":1,"row":1,"colSpan":12,"rowSpan":1,"children":[{"type":"Card","children":[{"type":"CardContent","children":[{"cssClass":"gap-4 items-center","type":"Row","children":[{"content":"Region","type":"Muted"},{"cssClass":"w-48","name":"region","type":"Select","size":"default","disabled":false,"required":false,"children":[{"type":"SelectOption","value":"all","label":"All Regions","selected":false,"disabled":false},{"type":"SelectOption","value":"north","label":"North","selected":false,"disabled":false},{"type":"SelectOption","value":"south","label":"South","selected":false,"disabled":false},{"type":"SelectOption","value":"east","label":"East","selected":false,"disabled":false},{"type":"SelectOption","value":"west","label":"West","selected":false,"disabled":false}]}]}]}]}]},{"type":"DashboardItem","col":1,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Revenue","value":"{{ m.revenue | currency }}"}]},{"type":"DashboardItem","col":4,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Units Sold","value":"{{ m.units | number }}"}]},{"type":"DashboardItem","col":7,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Avg Price","value":"{{ m.avg_price | currency }}"}]},{"type":"DashboardItem","col":10,"row":2,"colSpan":3,"rowSpan":1,"children":[{"type":"Metric","label":"Stores","value":"{{ m.stores }}"}]},{"type":"DashboardItem","col":1,"row":3,"colSpan":7,"rowSpan":1,"children":[{"cssClass":"h-full","type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Monthly Sales"}]},{"type":"CardContent","children":[{"type":"BarChart","data":"{{ chart }}","series":[{"dataKey":"sales","label":"Sales","color":"#2563eb"},{"dataKey":"returns","label":"Returns","color":"#e76e50"}],"xAxis":"month","height":250,"stacked":true,"horizontal":false,"barRadius":0,"showLegend":true,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}]}]}]},{"type":"DashboardItem","col":8,"row":3,"colSpan":5,"rowSpan":1,"children":[{"cssClass":"h-full","type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Category Performance"}]},{"type":"CardContent","children":[{"type":"RadarChart","data":"{{ cat }}","series":[{"dataKey":"score","label":"Score"}],"axisKey":"category","height":250,"filled":true,"showDots":true,"showLegend":false,"showTooltip":true,"showGrid":true}]}]}]},{"type":"DashboardItem","col":1,"row":4,"colSpan":12,"rowSpan":1,"children":[{"type":"Card","children":[{"type":"CardHeader","children":[{"type":"CardTitle","content":"Revenue Trend (12 months)"}]},{"type":"CardContent","children":[{"type":"LineChart","data":"{{ t }}","series":[{"dataKey":"revenue","label":"Revenue","color":"#2563eb"}],"xAxis":"month","height":200,"curve":"smooth","showDots":true,"showLegend":false,"showTooltip":true,"showGrid":true,"showYAxis":true,"yAxisFormat":"auto"}]}]}]}]}]},"state":{"region":"all","metrics_all":{"revenue":284750,"units":12450,"avg_price":22.87,"stores":48},"metrics_north":{"revenue":142800,"units":4200,"avg_price":34.0,"stores":8},"metrics_south":{"revenue":38900,"units":3850,"avg_price":10.1,"stores":18},"metrics_east":{"revenue":67200,"units":1680,"avg_price":40.0,"stores":6},"metrics_west":{"revenue":35850,"units":2720,"avg_price":13.18,"stores":16},"monthly_all":[{"month":"Jan","sales":42000,"returns":3200},{"month":"Feb","sales":48500,"returns":3800},{"month":"Mar","sales":45200,"returns":3400},{"month":"Apr","sales":51800,"returns":4100},{"month":"May","sales":47600,"returns":3600},{"month":"Jun","sales":53200,"returns":4200}],"monthly_north":[{"month":"Jan","sales":22000,"returns":800},{"month":"Feb","sales":25500,"returns":900},{"month":"Mar","sales":24200,"returns":850},{"month":"Apr","sales":27800,"returns":1000},{"month":"May","sales":23100,"returns":750},{"month":"Jun","sales":29200,"returns":1100}],"monthly_south":[{"month":"Jan","sales":5800,"returns":1200},{"month":"Feb","sales":6400,"returns":1400},{"month":"Mar","sales":5600,"returns":1100},{"month":"Apr","sales":7200,"returns":1600},{"month":"May","sales":6100,"returns":1300},{"month":"Jun","sales":7800,"returns":1700}],"monthly_east":[{"month":"Jan","sales":8200,"returns":400},{"month":"Feb","sales":10600,"returns":500},{"month":"Mar","sales":9800,"returns":450},{"month":"Apr","sales":11800,"returns":550},{"month":"May","sales":12400,"returns":500},{"month":"Jun","sales":14200,"returns":600}],"monthly_west":[{"month":"Jan","sales":6000,"returns":800},{"month":"Feb","sales":6000,"returns":1000},{"month":"Mar","sales":5600,"returns":1000},{"month":"Apr","sales":5000,"returns":950},{"month":"May","sales":6000,"returns":1050},{"month":"Jun","sales":2000,"returns":800}],"categories_all":[{"category":"Electronics","score":82},{"category":"Clothing","score":75},{"category":"Home","score":80},{"category":"Books","score":65},{"category":"Sports","score":70}],"categories_north":[{"category":"Electronics","score":98},{"category":"Clothing","score":40},{"category":"Home","score":92},{"category":"Books","score":35},{"category":"Sports","score":45}],"categories_south":[{"category":"Electronics","score":45},{"category":"Clothing","score":95},{"category":"Home","score":50},{"category":"Books","score":90},{"category":"Sports","score":88}],"categories_east":[{"category":"Electronics","score":95},{"category":"Clothing","score":60},{"category":"Home","score":90},{"category":"Books","score":55},{"category":"Sports","score":40}],"categories_west":[{"category":"Electronics","score":50},{"category":"Clothing","score":88},{"category":"Home","score":55},{"category":"Books","score":82},{"category":"Sports","score":92}],"trend_all":[{"month":"Mar","revenue":32000},{"month":"Apr","revenue":35000},{"month":"May","revenue":33500},{"month":"Jun","revenue":38000},{"month":"Jul","revenue":41000},{"month":"Aug","revenue":39500},{"month":"Sep","revenue":43000},{"month":"Oct","revenue":45500},{"month":"Nov","revenue":48000},{"month":"Dec","revenue":52000},{"month":"Jan","revenue":49000},{"month":"Feb","revenue":54000}],"trend_north":[{"month":"Mar","revenue":18000},{"month":"Apr","revenue":20500},{"month":"May","revenue":19000},{"month":"Jun","revenue":22000},{"month":"Jul","revenue":24500},{"month":"Aug","revenue":23000},{"month":"Sep","revenue":26000},{"month":"Oct","revenue":28000},{"month":"Nov","revenue":30000},{"month":"Dec","revenue":35000},{"month":"Jan","revenue":32000},{"month":"Feb","revenue":38000}],"trend_south":[{"month":"Mar","revenue":4200},{"month":"Apr","revenue":4800},{"month":"May","revenue":5100},{"month":"Jun","revenue":5500},{"month":"Jul","revenue":5200},{"month":"Aug","revenue":5800},{"month":"Sep","revenue":5500},{"month":"Oct","revenue":6000},{"month":"Nov","revenue":5800},{"month":"Dec","revenue":6200},{"month":"Jan","revenue":6000},{"month":"Feb","revenue":6500}],"trend_east":[{"month":"Mar","revenue":5500},{"month":"Apr","revenue":6200},{"month":"May","revenue":7000},{"month":"Jun","revenue":7800},{"month":"Jul","revenue":8800},{"month":"Aug","revenue":9500},{"month":"Sep","revenue":10500},{"month":"Oct","revenue":11500},{"month":"Nov","revenue":12800},{"month":"Dec","revenue":14000},{"month":"Jan","revenue":15500},{"month":"Feb","revenue":17000}],"trend_west":[{"month":"Mar","revenue":8500},{"month":"Apr","revenue":8200},{"month":"May","revenue":7800},{"month":"Jun","revenue":7200},{"month":"Jul","revenue":6800},{"month":"Aug","revenue":6500},{"month":"Sep","revenue":6000},{"month":"Oct","revenue":5500},{"month":"Nov","revenue":5200},{"month":"Dec","revenue":4800},{"month":"Jan","revenue":4200},{"month":"Feb","revenue":3500}]}}} playground=" ">
<CodeGroup>
```python Python icon="python" expandable
from prefab_ui.app import set_initial_state
from prefab_ui.components import (
    Card, CardContent, CardHeader, CardTitle,
    Column, Dashboard, DashboardItem,
    Muted, Row, Select, SelectOption,
)
from prefab_ui.components.charts import BarChart, ChartSeries, LineChart, RadarChart
from prefab_ui.components.metric import Metric
from prefab_ui.rx import Rx

# Pre-segmented data for each region. The Select writes to `region` in state,
# and a `let` binding picks the right dataset via a ternary chain.

REGIONS = ["all", "north", "south", "east", "west"]

metrics = {
    "all":   {"revenue": 284750, "units": 12450, "avg_price": 22.87, "stores": 48},
    "north": {"revenue": 142800, "units": 4200,  "avg_price": 34.00, "stores": 8},
    "south": {"revenue": 38900,  "units": 3850,  "avg_price": 10.10, "stores": 18},
    "east":  {"revenue": 67200,  "units": 1680,  "avg_price": 40.00, "stores": 6},
    "west":  {"revenue": 35850,  "units": 2720,  "avg_price": 13.18, "stores": 16},
}

monthly = {
    "all": [
        {"month": "Jan", "sales": 42000, "returns": 3200},
        {"month": "Feb", "sales": 48500, "returns": 3800},
        {"month": "Mar", "sales": 45200, "returns": 3400},
        {"month": "Apr", "sales": 51800, "returns": 4100},
        {"month": "May", "sales": 47600, "returns": 3600},
        {"month": "Jun", "sales": 53200, "returns": 4200},
    ],
    "north": [
        {"month": "Jan", "sales": 22000, "returns": 800},
        {"month": "Feb", "sales": 25500, "returns": 900},
        {"month": "Mar", "sales": 24200, "returns": 850},
        {"month": "Apr", "sales": 27800, "returns": 1000},
        {"month": "May", "sales": 23100, "returns": 750},
        {"month": "Jun", "sales": 29200, "returns": 1100},
    ],
    "south": [
        {"month": "Jan", "sales": 5800,  "returns": 1200},
        {"month": "Feb", "sales": 6400,  "returns": 1400},
        {"month": "Mar", "sales": 5600,  "returns": 1100},
        {"month": "Apr", "sales": 7200,  "returns": 1600},
        {"month": "May", "sales": 6100,  "returns": 1300},
        {"month": "Jun", "sales": 7800,  "returns": 1700},
    ],
    "east": [
        {"month": "Jan", "sales": 8200,  "returns": 400},
        {"month": "Feb", "sales": 10600, "returns": 500},
        {"month": "Mar", "sales": 9800,  "returns": 450},
        {"month": "Apr", "sales": 11800, "returns": 550},
        {"month": "May", "sales": 12400, "returns": 500},
        {"month": "Jun", "sales": 14200, "returns": 600},
    ],
    "west": [
        {"month": "Jan", "sales": 6000,  "returns": 800},
        {"month": "Feb", "sales": 6000,  "returns": 1000},
        {"month": "Mar", "sales": 5600,  "returns": 1000},
        {"month": "Apr", "sales": 5000,  "returns": 950},
        {"month": "May", "sales": 6000,  "returns": 1050},
        {"month": "Jun", "sales": 2000,  "returns": 800},
    ],
}

categories = {
    "all":   [{"category": "Electronics", "score": 82}, {"category": "Clothing", "score": 75}, {"category": "Home", "score": 80}, {"category": "Books", "score": 65}, {"category": "Sports", "score": 70}],
    "north": [{"category": "Electronics", "score": 98}, {"category": "Clothing", "score": 40}, {"category": "Home", "score": 92}, {"category": "Books", "score": 35}, {"category": "Sports", "score": 45}],
    "south": [{"category": "Electronics", "score": 45}, {"category": "Clothing", "score": 95}, {"category": "Home", "score": 50}, {"category": "Books", "score": 90}, {"category": "Sports", "score": 88}],
    "east":  [{"category": "Electronics", "score": 95}, {"category": "Clothing", "score": 60}, {"category": "Home", "score": 90}, {"category": "Books", "score": 55}, {"category": "Sports", "score": 40}],
    "west":  [{"category": "Electronics", "score": 50}, {"category": "Clothing", "score": 88}, {"category": "Home", "score": 55}, {"category": "Books", "score": 82}, {"category": "Sports", "score": 92}],
}

trend = {
    "all":   [{"month": "Mar", "revenue": 32000}, {"month": "Apr", "revenue": 35000}, {"month": "May", "revenue": 33500}, {"month": "Jun", "revenue": 38000}, {"month": "Jul", "revenue": 41000}, {"month": "Aug", "revenue": 39500}, {"month": "Sep", "revenue": 43000}, {"month": "Oct", "revenue": 45500}, {"month": "Nov", "revenue": 48000}, {"month": "Dec", "revenue": 52000}, {"month": "Jan", "revenue": 49000}, {"month": "Feb", "revenue": 54000}],
    "north": [{"month": "Mar", "revenue": 18000}, {"month": "Apr", "revenue": 20500}, {"month": "May", "revenue": 19000}, {"month": "Jun", "revenue": 22000}, {"month": "Jul", "revenue": 24500}, {"month": "Aug", "revenue": 23000}, {"month": "Sep", "revenue": 26000}, {"month": "Oct", "revenue": 28000}, {"month": "Nov", "revenue": 30000}, {"month": "Dec", "revenue": 35000}, {"month": "Jan", "revenue": 32000}, {"month": "Feb", "revenue": 38000}],
    "south": [{"month": "Mar", "revenue": 4200},  {"month": "Apr", "revenue": 4800},  {"month": "May", "revenue": 5100},  {"month": "Jun", "revenue": 5500},  {"month": "Jul", "revenue": 5200},  {"month": "Aug", "revenue": 5800},  {"month": "Sep", "revenue": 5500},  {"month": "Oct", "revenue": 6000},  {"month": "Nov", "revenue": 5800},  {"month": "Dec", "revenue": 6200},  {"month": "Jan", "revenue": 6000},  {"month": "Feb", "revenue": 6500}],
    "east":  [{"month": "Mar", "revenue": 5500},  {"month": "Apr", "revenue": 6200},  {"month": "May", "revenue": 7000},  {"month": "Jun", "revenue": 7800},  {"month": "Jul", "revenue": 8800},  {"month": "Aug", "revenue": 9500},  {"month": "Sep", "revenue": 10500}, {"month": "Oct", "revenue": 11500}, {"month": "Nov", "revenue": 12800}, {"month": "Dec", "revenue": 14000}, {"month": "Jan", "revenue": 15500}, {"month": "Feb", "revenue": 17000}],
    "west":  [{"month": "Mar", "revenue": 8500},  {"month": "Apr", "revenue": 8200},  {"month": "May", "revenue": 7800},  {"month": "Jun", "revenue": 7200},  {"month": "Jul", "revenue": 6800},  {"month": "Aug", "revenue": 6500},  {"month": "Sep", "revenue": 6000},  {"month": "Oct", "revenue": 5500},  {"month": "Nov", "revenue": 5200},  {"month": "Dec", "revenue": 4800},  {"month": "Jan", "revenue": 4200},  {"month": "Feb", "revenue": 3500}],
}

# Helper: build a ternary expression that picks the right dataset by region
def pick(prefix):
    return (
        f"{{{{ region == 'north' ? {prefix}_north"
        f" : region == 'south' ? {prefix}_south"
        f" : region == 'east' ? {prefix}_east"
        f" : region == 'west' ? {prefix}_west"
        f" : {prefix}_all }}}}"
    )

set_initial_state(
    region="all",
    **{f"metrics_{r}": metrics[r] for r in REGIONS},
    **{f"monthly_{r}": monthly[r] for r in REGIONS},
    **{f"categories_{r}": categories[r] for r in REGIONS},
    **{f"trend_{r}": trend[r] for r in REGIONS},
)

# A `let` on the outer Column computes intermediate values once.
# Everything inside references `m`, `chart`, `cat`, `t` instead
# of repeating the ternary chain for every prop.
with Column(let={
    "m": pick("metrics"),
    "chart": pick("monthly"),
    "cat": pick("categories"),
    "t": pick("trend"),
}):
    with Dashboard(columns=12, row_height="auto", gap=4):
        # Row 1: Region filter
        with DashboardItem(col=1, row=1, col_span=12):
            with Card():
                with CardContent():
                    with Row(align="center", gap=4):
                        Muted("Region")
                        with Select(name="region", css_class="w-48"):
                            SelectOption(value="all", label="All Regions")
                            SelectOption(value="north", label="North")
                            SelectOption(value="south", label="South")
                            SelectOption(value="east", label="East")
                            SelectOption(value="west", label="West")

        # Row 2: Metrics — all driven by `m` from the let binding
        m = Rx("m")
        with DashboardItem(col=1, row=2, col_span=3):
            Metric(label="Revenue", value=m.revenue.currency())
        with DashboardItem(col=4, row=2, col_span=3):
            Metric(label="Units Sold", value=m.units.number())
        with DashboardItem(col=7, row=2, col_span=3):
            Metric(label="Avg Price", value=m.avg_price.currency())
        with DashboardItem(col=10, row=2, col_span=3):
            Metric(label="Stores", value=m.stores)

        # Row 3: Bar chart + radar chart
        chart = Rx("chart")
        cat = Rx("cat")
        t = Rx("t")
        with DashboardItem(col=1, row=3, col_span=7):
            with Card(css_class="h-full"):
                with CardHeader():
                    CardTitle("Monthly Sales")
                with CardContent():
                    BarChart(
                        data=chart,
                        series=[
                            ChartSeries(data_key="sales", label="Sales", color="#2563eb"),
                            ChartSeries(data_key="returns", label="Returns", color="#e76e50"),
                        ],
                        x_axis="month",
                        stacked=True,
                        bar_radius=0,
                        show_legend=True,
                        height=250,
                    )

        with DashboardItem(col=8, row=3, col_span=5):
            with Card(css_class="h-full"):
                with CardHeader():
                    CardTitle("Category Performance")
                with CardContent():
                    RadarChart(
                        data=cat,
                        series=[ChartSeries(data_key="score", label="Score")],
                        axis_key="category",
                        show_dots=True,
                        height=250,
                    )

        # Row 4: 12-month trend
        with DashboardItem(col=1, row=4, col_span=12):
            with Card():
                with CardHeader():
                    CardTitle("Revenue Trend (12 months)")
                with CardContent():
                    LineChart(
                        data=t,
                        series=[ChartSeries(data_key="revenue", label="Revenue", color="#2563eb")],
                        x_axis="month",
                        curve="smooth",
                        show_dots=True,
                        height=200,
                    )
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "let": {
      "m": "{{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : region == 'east' ? metrics_east : region == 'west' ? metrics_west : metrics_all }}",
      "chart": "{{ region == 'north' ? monthly_north : region == 'south' ? monthly_south : region == 'east' ? monthly_east : region == 'west' ? monthly_west : monthly_all }}",
      "cat": "{{ region == 'north' ? categories_north : region == 'south' ? categories_south : region == 'east' ? categories_east : region == 'west' ? categories_west : categories_all }}",
      "t": "{{ region == 'north' ? trend_north : region == 'south' ? trend_south : region == 'east' ? trend_east : region == 'west' ? trend_west : trend_all }}"
    },
    "type": "Column",
    "children": [
      {
        "cssClass": "gap-4",
        "type": "Dashboard",
        "columns": 12,
        "rowHeight": "auto",
        "children": [
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 1,
            "colSpan": 12,
            "rowSpan": 1,
            "children": [
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "cssClass": "gap-4 items-center",
                        "type": "Row",
                        "children": [
                          {"content": "Region", "type": "Muted"},
                          {
                            "cssClass": "w-48",
                            "name": "region",
                            "type": "Select",
                            "size": "default",
                            "disabled": false,
                            "required": false,
                            "children": [
                              {
                                "type": "SelectOption",
                                "value": "all",
                                "label": "All Regions",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "north",
                                "label": "North",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "south",
                                "label": "South",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "east",
                                "label": "East",
                                "selected": false,
                                "disabled": false
                              },
                              {
                                "type": "SelectOption",
                                "value": "west",
                                "label": "West",
                                "selected": false,
                                "disabled": false
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Revenue", "value": "{{ m.revenue | currency }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 4,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Units Sold", "value": "{{ m.units | number }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 7,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [
              {
                "type": "Metric",
                "label": "Avg Price",
                "value": "{{ m.avg_price | currency }}"
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 10,
            "row": 2,
            "colSpan": 3,
            "rowSpan": 1,
            "children": [{"type": "Metric", "label": "Stores", "value": "{{ m.stores }}"}]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 3,
            "colSpan": 7,
            "rowSpan": 1,
            "children": [
              {
                "cssClass": "h-full",
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Monthly Sales"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "BarChart",
                        "data": "{{ chart }}",
                        "series": [
                          {"dataKey": "sales", "label": "Sales", "color": "#2563eb"},
                          {"dataKey": "returns", "label": "Returns", "color": "#e76e50"}
                        ],
                        "xAxis": "month",
                        "height": 250,
                        "stacked": true,
                        "horizontal": false,
                        "barRadius": 0,
                        "showLegend": true,
                        "showTooltip": true,
                        "showGrid": true,
                        "showYAxis": true,
                        "yAxisFormat": "auto"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 8,
            "row": 3,
            "colSpan": 5,
            "rowSpan": 1,
            "children": [
              {
                "cssClass": "h-full",
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Category Performance"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "RadarChart",
                        "data": "{{ cat }}",
                        "series": [{"dataKey": "score", "label": "Score"}],
                        "axisKey": "category",
                        "height": 250,
                        "filled": true,
                        "showDots": true,
                        "showLegend": false,
                        "showTooltip": true,
                        "showGrid": true
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "DashboardItem",
            "col": 1,
            "row": 4,
            "colSpan": 12,
            "rowSpan": 1,
            "children": [
              {
                "type": "Card",
                "children": [
                  {
                    "type": "CardHeader",
                    "children": [{"type": "CardTitle", "content": "Revenue Trend (12 months)"}]
                  },
                  {
                    "type": "CardContent",
                    "children": [
                      {
                        "type": "LineChart",
                        "data": "{{ t }}",
                        "series": [{"dataKey": "revenue", "label": "Revenue", "color": "#2563eb"}],
                        "xAxis": "month",
                        "height": 200,
                        "curve": "smooth",
                        "showDots": true,
                        "showLegend": false,
                        "showTooltip": true,
                        "showGrid": true,
                        "showYAxis": true,
                        "yAxisFormat": "auto"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "state": {
    "region": "all",
    "metrics_all": {"revenue": 284750, "units": 12450, "avg_price": 22.87, "stores": 48},
    "metrics_north": {"revenue": 142800, "units": 4200, "avg_price": 34.0, "stores": 8},
    "metrics_south": {"revenue": 38900, "units": 3850, "avg_price": 10.1, "stores": 18},
    "metrics_east": {"revenue": 67200, "units": 1680, "avg_price": 40.0, "stores": 6},
    "metrics_west": {"revenue": 35850, "units": 2720, "avg_price": 13.18, "stores": 16},
    "monthly_all": [
      {"month": "Jan", "sales": 42000, "returns": 3200},
      {"month": "Feb", "sales": 48500, "returns": 3800},
      {"month": "Mar", "sales": 45200, "returns": 3400},
      {"month": "Apr", "sales": 51800, "returns": 4100},
      {"month": "May", "sales": 47600, "returns": 3600},
      {"month": "Jun", "sales": 53200, "returns": 4200}
    ],
    "monthly_north": [
      {"month": "Jan", "sales": 22000, "returns": 800},
      {"month": "Feb", "sales": 25500, "returns": 900},
      {"month": "Mar", "sales": 24200, "returns": 850},
      {"month": "Apr", "sales": 27800, "returns": 1000},
      {"month": "May", "sales": 23100, "returns": 750},
      {"month": "Jun", "sales": 29200, "returns": 1100}
    ],
    "monthly_south": [
      {"month": "Jan", "sales": 5800, "returns": 1200},
      {"month": "Feb", "sales": 6400, "returns": 1400},
      {"month": "Mar", "sales": 5600, "returns": 1100},
      {"month": "Apr", "sales": 7200, "returns": 1600},
      {"month": "May", "sales": 6100, "returns": 1300},
      {"month": "Jun", "sales": 7800, "returns": 1700}
    ],
    "monthly_east": [
      {"month": "Jan", "sales": 8200, "returns": 400},
      {"month": "Feb", "sales": 10600, "returns": 500},
      {"month": "Mar", "sales": 9800, "returns": 450},
      {"month": "Apr", "sales": 11800, "returns": 550},
      {"month": "May", "sales": 12400, "returns": 500},
      {"month": "Jun", "sales": 14200, "returns": 600}
    ],
    "monthly_west": [
      {"month": "Jan", "sales": 6000, "returns": 800},
      {"month": "Feb", "sales": 6000, "returns": 1000},
      {"month": "Mar", "sales": 5600, "returns": 1000},
      {"month": "Apr", "sales": 5000, "returns": 950},
      {"month": "May", "sales": 6000, "returns": 1050},
      {"month": "Jun", "sales": 2000, "returns": 800}
    ],
    "categories_all": [
      {"category": "Electronics", "score": 82},
      {"category": "Clothing", "score": 75},
      {"category": "Home", "score": 80},
      {"category": "Books", "score": 65},
      {"category": "Sports", "score": 70}
    ],
    "categories_north": [
      {"category": "Electronics", "score": 98},
      {"category": "Clothing", "score": 40},
      {"category": "Home", "score": 92},
      {"category": "Books", "score": 35},
      {"category": "Sports", "score": 45}
    ],
    "categories_south": [
      {"category": "Electronics", "score": 45},
      {"category": "Clothing", "score": 95},
      {"category": "Home", "score": 50},
      {"category": "Books", "score": 90},
      {"category": "Sports", "score": 88}
    ],
    "categories_east": [
      {"category": "Electronics", "score": 95},
      {"category": "Clothing", "score": 60},
      {"category": "Home", "score": 90},
      {"category": "Books", "score": 55},
      {"category": "Sports", "score": 40}
    ],
    "categories_west": [
      {"category": "Electronics", "score": 50},
      {"category": "Clothing", "score": 88},
      {"category": "Home", "score": 55},
      {"category": "Books", "score": 82},
      {"category": "Sports", "score": 92}
    ],
    "trend_all": [
      {"month": "Mar", "revenue": 32000},
      {"month": "Apr", "revenue": 35000},
      {"month": "May", "revenue": 33500},
      {"month": "Jun", "revenue": 38000},
      {"month": "Jul", "revenue": 41000},
      {"month": "Aug", "revenue": 39500},
      {"month": "Sep", "revenue": 43000},
      {"month": "Oct", "revenue": 45500},
      {"month": "Nov", "revenue": 48000},
      {"month": "Dec", "revenue": 52000},
      {"month": "Jan", "revenue": 49000},
      {"month": "Feb", "revenue": 54000}
    ],
    "trend_north": [
      {"month": "Mar", "revenue": 18000},
      {"month": "Apr", "revenue": 20500},
      {"month": "May", "revenue": 19000},
      {"month": "Jun", "revenue": 22000},
      {"month": "Jul", "revenue": 24500},
      {"month": "Aug", "revenue": 23000},
      {"month": "Sep", "revenue": 26000},
      {"month": "Oct", "revenue": 28000},
      {"month": "Nov", "revenue": 30000},
      {"month": "Dec", "revenue": 35000},
      {"month": "Jan", "revenue": 32000},
      {"month": "Feb", "revenue": 38000}
    ],
    "trend_south": [
      {"month": "Mar", "revenue": 4200},
      {"month": "Apr", "revenue": 4800},
      {"month": "May", "revenue": 5100},
      {"month": "Jun", "revenue": 5500},
      {"month": "Jul", "revenue": 5200},
      {"month": "Aug", "revenue": 5800},
      {"month": "Sep", "revenue": 5500},
      {"month": "Oct", "revenue": 6000},
      {"month": "Nov", "revenue": 5800},
      {"month": "Dec", "revenue": 6200},
      {"month": "Jan", "revenue": 6000},
      {"month": "Feb", "revenue": 6500}
    ],
    "trend_east": [
      {"month": "Mar", "revenue": 5500},
      {"month": "Apr", "revenue": 6200},
      {"month": "May", "revenue": 7000},
      {"month": "Jun", "revenue": 7800},
      {"month": "Jul", "revenue": 8800},
      {"month": "Aug", "revenue": 9500},
      {"month": "Sep", "revenue": 10500},
      {"month": "Oct", "revenue": 11500},
      {"month": "Nov", "revenue": 12800},
      {"month": "Dec", "revenue": 14000},
      {"month": "Jan", "revenue": 15500},
      {"month": "Feb", "revenue": 17000}
    ],
    "trend_west": [
      {"month": "Mar", "revenue": 8500},
      {"month": "Apr", "revenue": 8200},
      {"month": "May", "revenue": 7800},
      {"month": "Jun", "revenue": 7200},
      {"month": "Jul", "revenue": 6800},
      {"month": "Aug", "revenue": 6500},
      {"month": "Sep", "revenue": 6000},
      {"month": "Oct", "revenue": 5500},
      {"month": "Nov", "revenue": 5200},
      {"month": "Dec", "revenue": 4800},
      {"month": "Jan", "revenue": 4200},
      {"month": "Feb", "revenue": 3500}
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## How It Works

The key technique is **pre-segmenting data by filter value and using ternary expressions to select the active dataset.** All five variants of the data (one per region, plus "all") live in state from the start. When the user picks a region, the renderer re-evaluates every expression that references `region` and swaps in the matching data — no network call, no script rerun.

### The `let` binding pattern

Rather than repeating the ternary expression in every metric and chart prop, a `let` binding on the outer [Column](/components/column) computes four intermediate values once:

```python
with Column(let={
    "m": pick("metrics"),       # resolves to the active metrics dict
    "chart": pick("monthly"),   # resolves to the active monthly data
    "cat": pick("categories"),  # resolves to the active category scores
    "t": pick("trend"),         # resolves to the active trend data
}):
```

Everything inside that Column can reference `{{ m.revenue }}` or `data="{{ chart }}"` directly. The `pick()` helper builds the ternary chain: `{{ region == 'north' ? metrics_north : region == 'south' ? metrics_south : ... : metrics_all }}`.

### How the Select drives state

The [Select](/components/select) component uses `name="region"` to auto-bind its value to `state.region`. When the user picks "North", the renderer sets `region = "north"`, which triggers the `let` binding to re-evaluate, which swaps every metric value, chart dataset, and radar shape simultaneously.

### Expression pipes for formatting

The [Metric](/components/metric) values use pipes to format raw numbers from state:

- `{{ m.revenue | currency }}` renders as "$284,750"
- `{{ m.units | number }}` renders as "12,450" with locale separators
- `{{ m.avg_price | currency }}` renders as "$22.87"

These are live expressions — when the region changes, the formatted output updates with the new values.
