Repository navigation
feat(roadmap-planner): chart help icons on Team Analytics Dashboard - #187
Conversation
Adds a small info button next to every chart title (and the KPI strip) on the Team Analytics → Dashboard tab. Clicking it toggles a popover that explains what the chart shows, how its data is derived, how to read the deltas/legend, and how the active-metric selection cascades through the page. Covered: KPI tiles · Throughput trend · Pillar mix over time · Inflow vs outflow · Distribution by pillar · Top movers · Per-member ranking. Click-outside / Esc closes. Styling uses only the existing semantic theme tokens so light/dark/Atlas all paint correctly.
…line Two follow-ups based on dev-preview feedback: 1. Pillar palette: the 5-token semantic palette (accent/ocean/amber/ forest/crimson) collapses to 4 distinct colors in the default light theme — both --accent and --ocean resolve to blue, so the first two pillars looked identical. With 7+ pillars in the DEVOPS project the modulo wrap also forced extra duplicates. Swap to a Tableau-10 inspired 11-color categorical palette tuned for perceptual distance under the 0.85 paint opacity, in both TeamAnalyticsDashboard.jsx and TeamAnalytics.jsx so the Dashboard donut/stack/ranking and the Team Overview throughput-by-pillar chart stay in sync. 2. Move the Metric KPI tiles help icon out of the right edge of the tile strip and inline it with the hint line below it, so the icon sits next to "Click a metric tile to drive the panels below." instead of breaking the 5-column tile grid.
Two related collisions surfaced in the dev preview: 1. METRIC_COLOR mapped prs→--accent and opened→--ocean. Both tokens resolve to the same blue in the default light theme, so the PRs merged and PRs opened lines on the Throughput trend, plus the Inflow vs outflow bars (which hardcoded the same two vars), all rendered as a single blue. Swap to d3 schemeCategory10 hex values for guaranteed distinctness across light / dark / Atlas. Update Inflow vs outflow + its description to route through METRIC_COLOR. 2. Pillar palette: tighten the two soft slots that still read as ambiguous at 0.85 opacity — replace Tableau's muted #B07AA1 purple with #8E44AD and Tableau's #FF9DA7 pink with #E377C2 magenta, so the purple / pink / red triplet stays clearly separated.
| // [data-mode], so dark mode and the Atlas theme need no per-mode | ||
| // branching here. | ||
| const PILLAR_PALETTE = ['var(--accent)', 'var(--ocean)', 'var(--amber)', 'var(--forest)', 'var(--crimson)']; | ||
| // Categorical palette for pillar bands. The semantic theme tokens |
There was a problem hiding this comment.
Warning (refactor/duplication): PILLAR_PALETTE is defined in both this file and TeamAnalyticsDashboard.jsx with identical values. The comment notes "Keep in sync with TeamAnalyticsDashboard.jsx" but having duplicate code creates a maintenance burden. Consider extracting to a shared constants file.
| * `overflow: hidden` for clean borders, so the popover is positioned | ||
| * relatively but uses a high z-index and a wide box; it can extend | ||
| * below the panel head over the chart body (panels are tall enough). */ | ||
| .ta-help { |
There was a problem hiding this comment.
Warning (style/compatibility): The .ta-panel:has(.ta-help__pop) CSS selector uses the :has() pseudo-class which has limited support on older browsers (not supported in IE11, limited support in older Safari versions before 15.4). Consider adding a fallback or ensuring the target browser versions support this selector.
| reviews: 'var(--amber)', | ||
| jira: 'var(--forest)', | ||
| points: 'var(--crimson)', | ||
| prs: '#1F77B4', // blue |
There was a problem hiding this comment.
Suggestion (refactor/consistency): Consider extracting METRIC_COLOR and PILLAR_PALETTE to a shared constants module that can be imported by both files. This would eliminate the duplication and ensure single-source maintenance.
🤖 AI Code Review
SummaryThis PR adds info/help popovers to the Team Analytics Dashboard, allowing users to understand what each chart displays, its data derivation, and how to interpret it. The implementation includes a new Review Statistics
Critical Issues
None identified. Warnings
Suggestions
Positive Feedback
ℹ️ About this reviewThis review was automatically generated using the
|
3 participants
Summary
Adds a small
(?)info button next to every chart title (and the KPI strip) on the Team Analytics → Dashboard tab. Clicking it toggles a popover explaining what the chart shows, how its data is derived, what the deltas / legend / colors mean, and how the active-metric selection cascades through the page.Covered: KPI tiles · Throughput trend · Pillar mix over time · Inflow vs outflow · Distribution by pillar · Top movers · Per-member ranking. Click-outside or Esc closes the popover. Theme tokens only — light / dark / Atlas all paint correctly.
This PR is opened in draft mode to trigger the image build pipeline for a dev preview on the edge-int cluster.
Test plan
npm run lintclean on touched filesvitest run— Dashboard + parent TeamAnalytics smoke tests pass (10/10)🤖 Generated with Claude Code