Skip to content

Commit 188e934

Browse files
committed
refactor(dashboard): inline traffic trends chart, remove MetricsChart
Replace MetricsChart and MetricsChartWithAnnotations with TrafficTrendsRechartsPlot inside traffic-trends-chart alongside Chart shell and chartQueryOutcome. Move interactive feature types to composable chart; update range popup and docs.
1 parent 7d86931 commit 188e934

File tree

8 files changed

+954
-1040
lines changed

8 files changed

+954
-1040
lines changed

.cursor/rules/design-system.mdc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ All list views use the `List` compound component (`components/ui/composables/lis
4242

4343
Use the `Chart` compound component (`components/ui/composables/chart.tsx`) with `chart-query-outcome.ts` the same way lists use `List` + `list-query-outcome`: wrap the shell in `<Chart>`, put Recharts (or any plot) inside `<Chart.Plot>`, optional `<Chart.Header>` / `<Chart.Footer>`, and drive loading / empty / error with `<Chart.Content query={…}>` or `outcome={…}`. Default loading is `<Chart.DefaultLoading />`. Canonical ref: `components/charts/simple-metrics-chart.tsx`.
4444

45-
- **Partial / in-progress period:** `SimpleMetricsChart` supports `partialLastSegment` (dashed stroke on the last segment via `use-dynamic-dasharray.ts`, same split rule as `metrics-chart.tsx`). Enable when the final bucket may still be filling (e.g. vitals trend). Main overview traffic chart uses `MetricsChart`, not `SimpleMetricsChart`.
45+
- **Partial / in-progress period:** `SimpleMetricsChart` supports `partialLastSegment` (dashed stroke on the last segment via `use-dynamic-dasharray.ts`, same split rule as the overview `TrafficTrendsRechartsPlot`). Enable when the final bucket may still be filling (e.g. vitals trend). Main overview traffic chart is inlined in `traffic-trends-chart.tsx`, not `SimpleMetricsChart`.
4646
- **Stat card mini charts:** `StatCard` (`analytics/stat-card.tsx`) uses the `Chart` shell (`Chart` → `Chart.Plot` → `Chart.Footer` with `border-t-0` so the stat row matches the old card). `MiniChart` uses the same dash helper for **area** and **line** (not bar). `partialLastSegment` defaults to **true**; set `false` for fully historical series.
4747

4848
## Component reuse principle

0 commit comments

Comments
 (0)