Skip to content

Add interactive tooltips and hover highlights to all charts#23

Merged
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G
Apr 19, 2026
Merged

Add interactive tooltips and hover highlights to all charts#23
islubee merged 1 commit intomainfrom
claude/explore-repo-overview-aYE7G

Conversation

@islubee
Copy link
Copy Markdown
Owner

@islubee islubee commented Apr 19, 2026

Summary

  • Adds a Tooltip component — absolute-positioned HTML overlay that renders near the cursor
  • All five charts (BarChart, Histogram, ScatterPlot, Timeline, PieChart) show contextual tooltips on hover
  • CSS :has() rules dim non-hovered siblings (bars, dots, pie slices) to 35% opacity with a 150ms transition
  • Timeline uses a transparent SVG overlay rect + d3.bisect to snap to the nearest data point, drawing a dashed hairline and dot indicator
  • Bars and Circles components updated to accept onMouseEnter(d, i, e) / onMouseLeave / onMouseMove callbacks

Tooltip content per chart

Chart Tooltip shows
BarChart category + value
Histogram bin range + count
ScatterPlot x value + y value
Timeline formatted date + y value
PieChart label + value + % of total

Test plan

  • Run npm test — all 72 tests pass
  • Hover over bars in BarChart — tooltip appears, non-hovered bars dim
  • Hover over bars in Histogram — tooltip shows bin range and count
  • Hover over dots in ScatterPlot — tooltip appears, other dots dim
  • Move mouse over Timeline — hairline snaps to nearest data point, tooltip updates
  • Hover over pie slices — tooltip shows label, value, and percentage; other slices dim
  • Tooltip stays within chart bounds on edge data points

Each chart now shows a tooltip on hover with relevant data values
(category + value for BarChart, bin range + count for Histogram,
x/y for ScatterPlot, date + value for Timeline, label + value +
percentage for PieChart). The Timeline uses a transparent SVG
overlay rect and d3.bisect to snap to the nearest data point and
draws a hairline + dot indicator. CSS :has() rules dim non-hovered
siblings for BarChart, Histogram, ScatterPlot, and PieChart.

https://claude.ai/code/session_01Bf9veNX9mqfMqrCEGnujAo
@islubee islubee merged commit af4a26e into main Apr 19, 2026
6 checks passed
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