Skip to content

feat(roadmap-planner): chart help icons on Team Analytics Dashboard #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielfbm merged 3 commits into from
May 11, 2026
Merged

feat(roadmap-planner): chart help icons on Team Analytics Dashboard #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3734d9a
feat(roadmap-planner): chart help icons on Team Analytics Dashboard
danielalauda May 11, 2026
dec8ece
fix(roadmap-planner): distinct pillar colors + move KPI help to hint …
danielalauda May 11, 2026
36b8e11
fix(roadmap-planner): make metric line + pillar colors fully distinct
danielalauda May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions roadmap-planner/frontend/src/components/TeamAnalytics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -799,6 +799,95 @@

.ta-bars { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Chart help popovers ----------
* Small info-icon button next to a chart title that toggles a popover
* with prose explaining what the chart shows. The wrapper is positioned
* (relative) so the popover anchors to the icon. Panels use
* `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 {

@alaudabot alaudabot May 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

display: inline-flex;
align-items: center;
position: relative;
margin-left: 8px;
vertical-align: middle;
}
/* When a help popover is open, let it escape the panel's clipped frame
* (panels use overflow:hidden so their head background stays inside the
* rounded corners). :has() flips that off only for the open panel, so
* the popover can extend over the chart area below the head. */
.ta-panel:has(.ta-help__pop) { overflow: visible; }
.ta-help__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--bg-elevated);
color: var(--fg-muted);
cursor: pointer;
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.ta-help__btn:hover,
.ta-help__btn[aria-expanded="true"] {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-tint);
}
.ta-help__pop {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 30;
width: min(420px, 80vw);
padding: 14px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-default, 4px);
box-shadow: var(--shadow-plate);
font-family: var(--font-ui);
font-size: 12.5px;
line-height: 1.55;
color: var(--fg);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-style: normal;
}
.ta-help__pop-title {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: 8px;
}
.ta-help__pop-body p { margin: 0 0 8px; }
.ta-help__pop-body p:last-child { margin-bottom: 0; }
.ta-help__pop-body ul {
margin: 0 0 8px;
padding-left: 18px;
}
.ta-help__pop-body li { margin-bottom: 4px; }
.ta-help__pop-body strong { color: var(--fg); font-weight: 600; }
.ta-help__pop-body em { color: var(--fg-subtle); font-style: italic; }

/* KPI-strip hint row sits directly under the 5-tile grid and carries
* the help icon inline. Flex layout keeps the icon vertically centered
* against the small-caps hint text. */
.ta-kpis-hint {
display: flex;
align-items: center;
gap: 8px;
}

/* Donut layout */
.ta-donut-row {
display: flex;
Expand Down
23 changes: 22 additions & 1 deletion roadmap-planner/frontend/src/components/TeamAnalytics.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,28 @@ import './TeamAnalytics.css';
// properties resolve at paint time against the active [data-theme] /
// [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

@alaudabot alaudabot May 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

// (--accent / --ocean / …) don't work here: in the default light theme
// --accent and --ocean both resolve to blue (first two slots collide),
// and the project routinely has more pillars than the 5-token semantic
// palette, so modulo wrapping causes explicit duplicates. These values
// are tuned for perceptual distance (Tableau-10 inspired) and survive
// the 0.85 opacity used by the stacked-area paint. Pillar colors carry
// no theme semantics — they're purely categorical codes — so fixed
// values are appropriate. Keep in sync with TeamAnalyticsDashboard.jsx.
const PILLAR_PALETTE = [
'#4E79A7', // blue
'#F28E2B', // orange
'#59A14F', // green
'#E15759', // red
'#8E44AD', // purple
'#EDC948', // yellow
'#76B7B2', // teal
'#E377C2', // magenta
'#9C755F', // brown
'#17BECF', // cyan
'#7F7F7F', // gray
];

const formatHours = (h) => (h == null ? '—' : `${(+h).toFixed(1)}h`);
const formatPct = (p) => (p == null || isNaN(p) ? '—' : `${Math.round(p)}%`);
Expand Down
Loading
Loading