QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-06 19:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(charts): match the tooltip surface to the design reference exactly

Browse Source 
The previous pass approximated the reference with utility guesses
(rounded-2xl, p-4, shadow-xl, dark ring). The actual spec is a hairline
border ring composed with a soft 0 8px 24px drop shadow, 10px radius,
12x14 padding, and an 80ms left/top glide. Tailwind shadow utilities
can't compose a ring with a custom drop shadow, so the surface moves
into the design system as .chart-tooltip (theme-aware: dark swaps the
ring to alpha-white and lets it carry the edge).

Money/numeric figures also pick up the reference's mono treatment:
font-mono + tabular-nums on every value across time-series, sankey,
and goal-projection, so digits don't jitter while the scrubber moves.
This commit is contained in:
Guillem Arias
2026-06-05 09:22:23 +02:00
parent a3eb33b8a6
commit 434886e766
4 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/utils/chart_tooltip.js
View File

@@ -11,20 +11,21 @@
// Not to be confused with DS::Tooltip — that is the info-icon hint primitive
// (bg-inverse, aria-describedby, anchored to a static trigger). This is a
// data-card surface created and updated inside D3 handler code.
// Visual target: the borderless soft-shadow card from the design reference —
// generous padding, large radius, no edge ring in light mode (the shadow alone
// defines the surface). Dark mode keeps a 1px alpha ring because a shadow is
// nearly invisible against dark surfaces and the card would otherwise melt
// into the chart background.
// The surface itself lives in the design system as `.chart-tooltip`
// (sure-design-system/components.css): container bg, 10px radius, 12x14
// padding, hairline ring composed with a soft 8/24 drop shadow, 80ms
// left/top glide. It's a component class because Tailwind shadow utilities
// can't compose a ring with a custom drop shadow. This constant adds the
// behavioural classes shared by every chart tooltip.
export const CHART_TOOLTIP_CLASSES =
"bg-container text-primary text-sm font-sans absolute p-4 rounded-2xl shadow-xl theme-dark:ring-1 theme-dark:ring-alpha-white-200 pointer-events-none z-50 privacy-sensitive";
"chart-tooltip text-primary text-sm font-sans absolute pointer-events-none z-50 privacy-sensitive";
// Content conventions (kept here so the controllers stay aligned):
// - context line (date / node title): `text-xs text-secondary mb-1`
// - value figures: `font-medium tabular-nums`, secondary parentheticals in
// `text-secondary`
// - money / numeric figures: mono + tabular so digits don't jitter while
// the scrubber moves; secondary parentheticals in `text-secondary`
export const CHART_TOOLTIP_CONTEXT_CLASSES = "text-xs text-secondary mb-1";
export const CHART_TOOLTIP_VALUE_CLASSES = "font-medium tabular-nums";
export const CHART_TOOLTIP_VALUE_CLASSES = "font-mono font-medium tabular-nums";
// Convenience factory for the raw-DOM idiom (no d3.select). Creates a hidden
// tooltip div carrying the shared contract and appends it to `parent`.