QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-06 03:09:02 +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

2
app/javascript/controllers/sankey_chart_controller.js
View File

@@ -528,7 +528,7 @@ export default class extends Controller {
(c) =>
({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c],
);
const valueLine = `<span class="font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
const valueLine = `<span class="font-mono font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
const content = title
? `<div class="text-xs text-secondary mb-1">${esc(title)}</div><div>${valueLine}</div>`
: valueLine;

4
app/javascript/controllers/time_series_chart_controller.js
View File

@@ -389,7 +389,7 @@ export default class extends Controller {
${datum.date_formatted}
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 text-primary font-medium tabular-nums">
<div class="flex items-center gap-2 text-primary font-mono font-medium tabular-nums">
<div class="flex items-center justify-center h-4 w-4">
${this._getTrendIcon(datum)}
</div>
@@ -400,7 +400,7 @@ export default class extends Controller {
datum.trend.value === 0
? `<span class="w-20"></span>`
: `
<span class="tabular-nums" style="color: ${datum.trend.color};">
<span class="font-mono tabular-nums" style="color: ${datum.trend.color};">
${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
</span>
`