diff --git a/src/components/charts/radial-gauge.tsx b/src/components/charts/radial-gauge.tsx index e4ba67d..c989a5b 100644 --- a/src/components/charts/radial-gauge.tsx +++ b/src/components/charts/radial-gauge.tsx @@ -18,6 +18,7 @@ export function RadialGauge({ sublabel, size = 180, ticks = 24, + centerLabelOverride, }: { value: number; total: number; @@ -26,6 +27,14 @@ export function RadialGauge({ sublabel?: string; size?: number; ticks?: number; + /** + * Overrides the big center text (normally the computed `value/total` + * percentage) with an arbitrary string — for callers where the ring's + * fraction and the headline number are different things (e.g. the rep + * dashboard's markup % gauge, where the ring shows cost's share of + * selling price but the headline is the unbounded markup percentage). + */ + centerLabelOverride?: string; }) { const cx = size / 2; const cy = size * 0.62; @@ -121,7 +130,7 @@ export function RadialGauge({ fill: "var(--foreground)", }} > - {pct}% + {centerLabelOverride ?? `${pct}%`} {label && (