feat(ui): dashboard cross-filter for DB-source charts (DASH-7)#153
Merged
Conversation
Add an optional cross-filter binding to database-source kit charts: a named kit input (e.g. a Quarter dropdown) whose value scopes every DB chart bound to it at once. Picking a value re-aggregates + re-renders every bound chart live (editor) and is reflected in exports. - chartData: `ChartDbBinding.filterInput`/`filterProp`; `scopeRowsByFilter` pre-filters rows via the SDK `rowMatchesCondition` (equals) before aggregating, resolving select/status inputs (id/label/slug) to the stored option id; "all"/empty = no filter (additive no-op). - charts.tsx: `useDbChartSeries` + `ChartBlock` read the bound input's live value from `inputScope`; `ChartDbConfig` gains an optional "Filter by input" + "On property" pair with a sensible auto-suggest. - export: `resolveDbChartSeries` resolves each chart's filter from the serialized input value (`namedInputValue`) — no snapshot-on-view write. - templates: the Dashboard ships a Quarter control scoping the KPI tiles + region/channel breakdowns (the quarterly trend stays full-year). - y-gutter: compact y-axis tick labels (25000 -> 25k) so wide values no longer clip the left gutter — editor + export runtime in lockstep. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KFk2T9k3p7ghCjdzMfkA5w
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Dashboard-level cross-filter for database-source kit charts. A chart binding gains optional
filterInput(a named kit input) +filterProp(a DB property), stored as block propsdbFilterInput/dbFilterProp. When set, the chart's rows are pre-filtered by the live value of that named input before aggregation, in both the editor (live) and export. Both absent → unchanged whole-database path (fully additive, backward-compatible).Demoed by a Quarter dropdown on the Dashboard template: selecting Q2 scopes the KPI tiles (244,000/12/1,195 → 60,000/3/290), the region bar (collapses to North+East), and the channel pie (rebalances) — while the quarterly-trend line stays unbound as full-year context.
Also fixes the y-axis 5-digit left-gutter clip via compact tick labels (
25000 → "25k",1.5e6 → "1.5M") — a sharedaxisTickLabel(chartMath) + mirroredkitTickin the export runtime, with zero plot-geometry change.How
chartData.ts:scopeRowsByFilterpre-filters rows via the SDK'srowMatchesCondition(aggregation itself doesn't apply view filters).filterTargetForresolves an input's published value (label/slug) to the stored select/status option id; non-select types compare verbatim; multi-select arrays match ANY (OR);null/empty/"all"/[]= no filter.namedInputValuereads input values from the serialized block tree for the export path (cycle-free, avoids importing scope.ts).charts.tsx:ChartBlockthreads the bound input's live value intouseDbChartSeriesvia a stablefilterKeymemo dep (re-aggregates only on actual value change).ChartDbConfiggains a "Filter by input" + "On property" pair.export/kitChart.ts:resolveDbChartSeriesresolves each chart's filter → same series the editor shows. No snapshot-on-view write.templates.ts: Quarter control on the Dashboard template.Verification
pnpm verifygreen foreground (build:libs → typecheck → lint → 1049 UI + 188 SDK unit + server/MCP e2e).kitTickbyte-mirrorsaxisTickLabel), (d) SDK 188 + touched UI 61 tests pass, tsc clean. Non-blocking nits (namedInputValue parity for grouped/richtext/toggle inputs — unreachable via the picker) noted for follow-up.Board: DASH-7 (Dashboards epic).
🤖 Generated with Claude Code