root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-6818: keep Activity line markers circular

Browse Source 
Use uniform SVG scaling so Command Center Activity line charts preserve proportional geometry.\n\n- Switch the shared hand-rolled LineChart from non-uniform stretching to centered uniform scaling.\n- Cover marker distortion invariants in chart and Activity area tests.\n- Document the Activity chart rendering invariant for desktop and mobile layouts.\n\nFiles changed:\n docs/dashboard-guide.md                            |  1 +\n .../command-center/__tests__/charts.test.tsx       | 22 ++++++++++++++++++++++\n .../command-center/areas/__tests__/areas.test.tsx  | 12 ++++++++++++\n .../components/command-center/charts/LineChart.tsx |  5 ++++-\n .../components/command-center/charts/charts.css    |  3 +++\n 5 files changed, 42 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-6818

Fusion-Task-Lineage: 304dc64b-688d-42e4-ba7f-c7db16c49de9
This commit is contained in:
gsxdsm
2026-06-20 23:24:57 -07:00
parent 34b555f5d2
commit 5d3f63e875
5 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/dashboard-guide.md
View File

@@ -698,6 +698,7 @@ Features:
Rendering invariants:
- On mobile (`max-width: 768px`), `.cc-tabpanel` remains the sole vertical scroll owner for every chart-bearing tab. Shared chart primitives (`Bar`, `StackedBar`, `Sparkline`, `LineChart`, `RadialGauge`, `Funnel`, `TokenSeriesChart`, and the Command Center recharts wrappers) must shrink within the tabpanel, keep non-zero usable height, avoid stretch/clipping artifacts, and never introduce a competing vertical overflow container.
- The hand-rolled Activity `LineChart` uses uniform SVG scaling so point markers remain true circles and line geometry remains proportional even when the CSS chart box is wide/short on desktop or auto-aspect on mobile.
- Mobile chart text must not rely on min-content luck: bar labels, values, token-series axis labels, funnel headers, radial labels, legends, and chart tracks need explicit `min-inline-size: 0`, wrapping, or ellipsis rules so long model/agent/repo labels cannot crush the track or create hidden horizontal overflow in a real browser.
- On tablet (`min-width: 769px` and `max-width: 1024px`), `.project-content`, `.command-center`, and `.cc-tabpanel` keep the same definite flex/min-height scroll-owner chain, while the live strip and chart grids collapse before they can create document-level horizontal overflow.
- Command Center stat cards, overview chart cards, live strips, table wrappers, Team chart panels, token-series plots, system control cards, and gauge/chart cards share the same tokenized rhythm: `--space-md` gaps/padding for card-like surfaces, `1px solid var(--border-subtle)` borders, `--radius-md` radii, and `--surface-1` backgrounds. Area-specific accents may use `color-mix(...)`, but layout, border, radius, text color, and motion must stay on design tokens, with the named 4px spacing scale (`--space-xs`/`sm`/`md`/`lg`/`xl`/`2xl`) as the canonical vocabulary.