Every panel on a Status tab shares the same x-domain, but hovering one chart tells you nothing about the others. Recharts supports this natively via syncId — one prop on the LineChart/StackedAreaChart primitives (keyed per tab) gives "hover CPU at 14:32, see memory at 14:32" across all panels. Probably the biggest analytical upgrade available for the least code.
Acceptance criteria
- Hovering any time-series panel shows a synchronized crosshair/tooltip on every other time-series panel on the same tab (they share an x-domain).
- Heatmap and table-size snapshot panels are unaffected; the expand-to-fullscreen dialog chart is not synced (single chart).
- No syncing across tabs or across two instances' Status pages open simultaneously (key the id per instance+tab).
Implementation notes
- Recharts native: pass
syncId to <RLineChart>/<AreaChart> in primitives/LineChart.tsx and primitives/StackedAreaChart.tsx; thread it from MetricPanel (an AnalyticsContext field keyed ${entityId}:${tab} works).
- Use
syncMethod="value" — the default index-based sync mis-aligns sparse series that don't share point counts.
Filed from a Status tab code review.
Comment generated by kAIle (Claude Fable 5)
Every panel on a Status tab shares the same x-domain, but hovering one chart tells you nothing about the others. Recharts supports this natively via
syncId— one prop on theLineChart/StackedAreaChartprimitives (keyed per tab) gives "hover CPU at 14:32, see memory at 14:32" across all panels. Probably the biggest analytical upgrade available for the least code.Acceptance criteria
Implementation notes
syncIdto<RLineChart>/<AreaChart>inprimitives/LineChart.tsxandprimitives/StackedAreaChart.tsx; thread it fromMetricPanel(anAnalyticsContextfield keyed${entityId}:${tab}works).syncMethod="value"— the default index-based sync mis-aligns sparse series that don't share point counts.Filed from a Status tab code review.
Comment generated by kAIle (Claude Fable 5)