Skip to content

feat: add LatencyChart page with HelpPopover for P95 metric explanation - #822

Merged
greatest0fallt1me merged 3 commits into
CalloraOrg:mainfrom
ololadedavidvictor-bit:feat/latency-chart-help-popover
Jul 29, 2026
Merged

feat: add LatencyChart page with HelpPopover for P95 metric explanation#822
greatest0fallt1me merged 3 commits into
CalloraOrg:mainfrom
ololadedavidvictor-bit:feat/latency-chart-help-popover

Conversation

@ololadedavidvictor-bit

@ololadedavidvictor-bit ololadedavidvictor-bit commented Jul 28, 2026

Copy link
Copy Markdown

Summary

  • Create src/pages/LatencyChart.tsx with a responsive bar chart and summary stat cards (min, avg, P95, max)
  • Integrate HelpPopover next to the chart title to explain P95 latency to first-time users
  • Add className prop to HelpPopover for flexible layout alignment
  • Add focused tests for LatencyChart rendering, accessibility, and HelpPopover integration
  • Extend HelpPopover.test.tsx to cover className forwarding
  • Add page-specific CSS and :focus-visible styles in index.css and focus.css
  • Register /latency-chart route in main.tsx

Accessibility (WCAG 2.1 AA)

  • HelpPopover trigger uses aria-label and aria-describedby
  • Chart bars include role="img" and aria-label for screen readers
  • Focus-visible ring applied to chart bars via design-token --accent
  • Responsive breakpoints at 768px and 480px

Design tokens & theme

  • All colours and spacing use existing CSS custom properties (--surface, --accent, --muted, etc.)
  • Light and dark mode verified via token overrides

Test plan

  • npx vitest run src/components/HelpPopover.test.tsx src/pages/LatencyChart.test.tsx

Closes #714
Closes #678
Closes #679
Closes #686

- Create src/pages/LatencyChart.tsx with responsive bar chart and stat cards
- Integrate HelpPopover next to chart title explaining P95 latency for first-time users
- Add className prop to HelpPopover for layout alignment flexibility
- Include LatencyChart.test.tsx with focused accessibility and rendering tests
- Update HelpPopover.test.tsx to cover className forwarding
- Add page-specific CSS and focus-visible styles in index.css and focus.css
- Register /latency-chart route in main.tsx
@drips-wave

drips-wave Bot commented Jul 28, 2026

Copy link
Copy Markdown

@ololadedavidvictor-bit Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@greatest0fallt1me
greatest0fallt1me merged commit e175504 into CalloraOrg:main Jul 29, 2026
3 checks passed
@greatest0fallt1me

Copy link
Copy Markdown
Contributor

Merged into main via admin resolver (-X theirs).

@greatest0fallt1me

Copy link
Copy Markdown
Contributor

LGTM 🎉 merging now.

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

Labels

None yet

Projects

None yet

2 participants