Skip to content

feat: responsive trend charts, hover crosshair, snapshot limit, tooltip improvements#16

Merged
Lefix2 merged 2 commits intomainfrom
feat/trends-chart-improvements
May 6, 2026
Merged

feat: responsive trend charts, hover crosshair, snapshot limit, tooltip improvements#16
Lefix2 merged 2 commits intomainfrom
feat/trends-chart-improvements

Conversation

@Lefix2
Copy link
Copy Markdown
Owner

@Lefix2 Lefix2 commented May 6, 2026

Summary

  • Trend charts rendered at exact card pixel width via DOM measurement; ResizeObserver on container rebuilds SVGs on every panel resize (grow and shrink)
  • Crosshair snaps to nearest data point using live svgEl.getBoundingClientRect() — no stored scale factor, no drift
  • maxChartSnapshots setting (default 20) limits history points shown in both New-vs-Fixed and Total Over Time charts
  • Layout floor: #dashboard min-width: 500px, min-width: 0 on .card / .kpi-sev / .trend-chart-area + overflow: hidden so the whole page scrolls horizontally together instead of individual elements breaking
  • In-file decoration tooltip: replaced [SEVERITY] tag and lines/file footer with a colored circle emoji (🟣🔴🟠🟡🔵) + bold check name + italic description

Test plan

  • Open Trends tab — charts fill card width
  • Resize panel wider and narrower — charts rebuild at new width in both directions
  • Shrink panel below ~500px — horizontal scroll on full page, no individual element breakage
  • Hover over a gutter decoration — tooltip shows colored dot, bold check name, italic description; no severity tag or lines/file footer
  • Set maxChartSnapshots to a small number — charts show only last N snapshots

🤖 Generated with Claude Code

TREFOU Felix and others added 2 commits May 6, 2026 11:07
- Crosshair snaps to nearest data point using live SVG getBoundingClientRect
- Charts rendered at exact card pixel width via DOM measurement before build
- ResizeObserver on container rebuilds SVGs on panel resize (grow + shrink)
- overflow:hidden + min-width:0 on .card/.trend-chart-area/.kpi-sev allows
  CSS layout to drive width freely; #dashboard min-width:500px sets global floor
- New maxChartSnapshots setting (default 20) limits points shown in trend charts
- Slices to last N snapshots for both New-vs-Fixed and Total Over Time charts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace [SEVERITY] tag and lines/file footer with a colored circle emoji
(🟣🔴🟠🟡🔵) matching severity, bold check name, and italic description.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Lefix2 Lefix2 merged commit b019d2d into main May 6, 2026
1 check passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 6, 2026

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant