> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Cross-Filtering
> A regional dashboard where a single dropdown instantly filters every chart and metric.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
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.
```python Python icon="python" expandable theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui import PrefabApp
from prefab_ui.components import (
Card, CardContent, CardHeader, CardTitle,
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}],
}
# Flatten the nested dicts into individual state keys (metrics_north,
# monthly_south, ...) so the ternary chain can resolve them.
state = {"region": "all"}
for prefix, data in (
("metrics", metrics),
("monthly", monthly),
("categories", categories),
("trend", trend),
):
for region in REGIONS:
state[f"{prefix}_{region}"] = data[region]
# 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 }}}}"
)
# A `let` on the Dashboard computes intermediate values once.
# Everything inside references `m`, `chart`, `cat`, `t` instead
# of repeating the ternary chain for every prop.
with PrefabApp(state=state, css_class="max-w-none p-0"):
with Dashboard(
columns=12,
row_height="auto",
gap=4,
let={
"m": pick("metrics"),
"chart": pick("monthly"),
"cat": pick("categories"),
"t": pick("trend"),
},
):
# 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" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "pf-app-root max-w-none p-0",
"type": "Div",
"children": [
{
"cssClass": "gap-4",
"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": "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,
"invalid": 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,
"animate": true,
"showGrid": true,
"showYAxis": true,
"valueFormat": "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": true,
"showTooltip": true,
"animate": 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": true,
"showTooltip": true,
"animate": true,
"showGrid": true,
"showYAxis": true,
"valueFormat": "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}
]
}
}
```
## 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 [Dashboard](/docs/components/dashboard-grid) computes four intermediate values once:
```python theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
with Dashboard(
columns=12,
row_height="auto",
gap=4,
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 the Dashboard 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](/docs/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](/docs/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.