Skip to content

fix: improve TrendChart readability and interaction#451

Merged
bruno-garcia merged 2 commits intomainfrom
fix/trend-chart-improvements
Feb 14, 2026
Merged

fix: improve TrendChart readability and interaction#451
bruno-garcia merged 2 commits intomainfrom
fix/trend-chart-improvements

Conversation

@bruno-garcia
Copy link
Member

Summary

  • Disable zoom (scroll + buttons) to prevent accidental zooming on the packages chart
  • Set X-axis Min to span the full search period so ApexCharts auto-selects appropriate label granularity (years for long ranges, months/days for short)
  • Abbreviate Y-axis values (K/M/B) while keeping exact numbers in hover tooltip
  • Increase axis label font size to 13px (matching Frameworks chart from fix: increase font size for chart labels on frameworks page #442)
  • Explicitly set Shared = true / Intersect = false on tooltip to show all series on hover
  • Always show full date (dd MMM yyyy) in tooltip regardless of time range

Test plan

  • On /packages with a single package at "All time" (169 months): X-axis shows yearly labels ("2018", "2019"...), Y-axis shows abbreviated values ("20M", "40M"...)
  • At "3 months": X-axis shows day/month labels ("20 Nov", "Dec 2025"...), markers visible
  • Hovering shows tooltip with full date and exact number (e.g. "03 Feb 2020 — Sentry: 1,365,619")
  • No zoom on scroll wheel, no zoom buttons in toolbar
  • With multiple packages: tooltip shows all series at hovered X position
  • Font size is readable on both axes

🤖 Generated with Claude Code

- Disable zoom (scroll wheel + buttons) to prevent accidental zooming
- Set x-axis min to span the full search period so labels scale correctly
- Use DatetimeFormatter with day/month/year granularity for clean labels
- Abbreviate Y-axis values (K/M/B) while keeping exact numbers in tooltip
- Increase axis label font size to 13px for readability
- Set tooltip Shared=true and Intersect=false to show all series on hover
- Always show full date (dd MMM yyyy) in tooltip for clarity

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings February 14, 2026 17:53
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Blazor TrendChart component to improve readability and hover interaction on the packages trend chart by adjusting axis ranges/formatting, tooltip behavior, and disabling zoom.

Changes:

  • Disable chart zoom interactions and hide zoom controls.
  • Force the X-axis to span the selected search period and standardize tooltip date formatting.
  • Improve readability via larger axis fonts and abbreviated Y-axis tick labels (K/M/B) while keeping full values in the tooltip.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Compute xMin from the earliest data point (or search period, whichever
  is earlier) so no data gets clipped off the chart
- Add null/NaN guard to Y-axis formatter and return locale string for
  values under 1K, matching the Frameworks chart defensive pattern

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@bruno-garcia
Copy link
Member Author

Review comments addressed

# Comment Author Verdict Action
1 Type mismatch between DateTime data and Unix ms for Min sentry[bot] Rejected False positive — ApexCharts datetime axes accept Unix ms for Min/Max
2 xMin from UtcNow may clip earliest data points vs backend's toMonday() logic Copilot Accepted Derived xMin from earliest data point in datasets (or period start, whichever is earlier)
3 Y-axis formatter missing null/NaN guard, returns number for < 1K Copilot Accepted Added defensive guard and val.toLocaleString() for small values

All changes in 6b02dd4.

@bruno-garcia bruno-garcia merged commit 300fb59 into main Feb 14, 2026
5 checks passed
@bruno-garcia bruno-garcia deleted the fix/trend-chart-improvements branch February 14, 2026 18:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants