feat(charts): allow RadialGauge to override its center label

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}%`}
           </text>
           {label && (
             <text