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

fix(charts): use the app's sans money treatment in tooltips, not mono

Browse Source 
font-mono in this codebase marks code, keys, and admin surfaces; money
is sans + tabular-nums everywhere else (cards, KPIs, tables). Keep the
tabular figures for scrub stability, drop the mono.
This commit is contained in:
Guillem Arias
2026-06-05 09:54:58 +02:00
parent 10b9291221
commit 904f699cfc
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -556,7 +556,7 @@ export default class extends Controller {
#showTooltip(event, value, percentage, contextHtml = null) {
if (!this.tooltip) this.#createTooltip();
const valueLine = `<span class="font-mono font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
const valueLine = `<span class="font-medium tabular-nums">${this.#formatCurrency(value)}</span> <span class="text-secondary">(${percentage || 0}%)</span>`;
const content = contextHtml
? `${contextHtml}<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-mono font-medium tabular-nums">
<div class="flex items-center gap-2 text-primary 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="font-mono tabular-nums" style="color: ${datum.trend.color};">
<span class="tabular-nums" style="color: ${datum.trend.color};">
${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
</span>
`

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

@@ -22,10 +22,11 @@ export const CHART_TOOLTIP_CLASSES =
// Content conventions (kept here so the controllers stay aligned):
// - context line (date / node title): `text-xs text-secondary mb-1`
// - money / numeric figures: mono + tabular so digits don't jitter while
// the scrubber moves; secondary parentheticals in `text-secondary`
// - money / numeric figures: tabular-nums so digits don't jitter while the
// scrubber moves (sans, not mono — the app's money convention everywhere
// else); secondary parentheticals in `text-secondary`
export const CHART_TOOLTIP_CONTEXT_CLASSES = "text-xs text-secondary mb-1";
export const CHART_TOOLTIP_VALUE_CLASSES = "font-mono font-medium tabular-nums";
export const CHART_TOOLTIP_VALUE_CLASSES = "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`.