From 904f699cfc70ed6ddf52cc5a8250ef798b501575 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Fri, 5 Jun 2026 09:54:58 +0200
Subject: [PATCH] fix(charts): use the app's sans money treatment in tooltips,
 not mono

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.
---
 app/javascript/controllers/sankey_chart_controller.js      | 2 +-
 app/javascript/controllers/time_series_chart_controller.js | 4 ++--
 app/javascript/utils/chart_tooltip.js                      | 7 ++++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/javascript/controllers/sankey_chart_controller.js b/app/javascript/controllers/sankey_chart_controller.js
index 60f01143f..0f14383a2 100644
--- a/app/javascript/controllers/sankey_chart_controller.js
+++ b/app/javascript/controllers/sankey_chart_controller.js
@@ -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;
diff --git a/app/javascript/controllers/time_series_chart_controller.js b/app/javascript/controllers/time_series_chart_controller.js
index 696ce1af4..0628d0315 100644
--- a/app/javascript/controllers/time_series_chart_controller.js
+++ b/app/javascript/controllers/time_series_chart_controller.js
@@ -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>
         `
diff --git a/app/javascript/utils/chart_tooltip.js b/app/javascript/utils/chart_tooltip.js
index 942a11cee..228095602 100644
--- a/app/javascript/utils/chart_tooltip.js
+++ b/app/javascript/utils/chart_tooltip.js
@@ -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`.