gridsmith-ui 0.24.0 → 0.25.0

package/dist/charts.js

@@ -1,8 +1,8 @@
-import { TITLE_TEXT, Skeleton } from './chunk-NCIZQYXQ.js';
+import { formatLocale, TITLE_TEXT, Skeleton } from './chunk-X2HEV7FB.js';
 import { mergeRefs } from './chunk-7Q46JXSK.js';
 import { cn, GLASS_SURFACE } from './chunk-M2QRNBDQ.js';
 import { createContext, forwardRef, useContext, useRef, useState, useMemo, useLayoutEffect, useEffect, useId, useSyncExternalStore, Children, isValidElement } from 'react';
-import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, Rectangle } from 'recharts';
+import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text, Legend, getNiceTickValues, Rectangle } from 'recharts';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -441,6 +441,7 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   axisTitle,
   className,
   children,
+  formatValue,
   "aria-label": ariaLabel
 }, ref) {
   const container = useContext(ChartContainerContext);
@@ -448,7 +449,7 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
   const plotRef = useRef(null);
   const [legend, setLegend] = useState(null);
   const [live, setLive] = useState(null);
-  const frame = useMemo(() => ({ legend, live }), [legend, live]);
+  const frame = useMemo(() => ({ legend, live, formatValue }), [legend, live, formatValue]);
   const [drawn, setDrawn] = useState(null);
   useLayoutEffect(() => {
     const plot = plotRef.current;
@@ -522,12 +523,82 @@ var ChartWrapper = forwardRef(function ChartWrapper2({
     }
   );
 });
+var TICK_COUNT = 5;
+var TIME_UNITS = [["hour", 36e5], ["minute", 6e4], ["second", 1e3], ["millisecond", 1]];
+var BYTE_UNITS = [["petabyte", 1e15], ["terabyte", 1e12], ["gigabyte", 1e9], ["megabyte", 1e6], ["kilobyte", 1e3], ["byte", 1]];
+var MAX_FRACTION = 10;
+function exact(format, maxDigits = MAX_FRACTION) {
+  for (let digits = 0; digits < maxDigits; digits++) {
+    const label = format(digits);
+    if (label === format(digits + 6)) return label;
+  }
+  return format(maxDigits);
+}
+var unitFormat = (unit, value) => (digits) => new Intl.NumberFormat(formatLocale(), { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
+var unitsOf = (format) => format === "bytes" ? BYTE_UNITS : TIME_UNITS;
+function unitReached(units, value) {
+  return units.find(([, size]) => Math.abs(value) >= size) ?? units[units.length - 1];
+}
+function axisUnit(units, ticks) {
+  const largest = Math.max(0, ...ticks.map(Math.abs));
+  const exactIn = (size) => ticks.every((t) => Math.abs(t / size * 100 - Math.round(t / size * 100)) < 1e-6);
+  return units.find(([, size]) => largest / size >= 1 && exactIn(size)) ?? units[units.length - 1];
+}
+function valueAxisTicks(values) {
+  const finite = values.filter(Number.isFinite);
+  if (!finite.length) return [];
+  const lo = Math.min(0, ...finite);
+  const hi = Math.max(0, ...finite);
+  if (lo === hi) return [lo];
+  return getNiceTickValues([lo, hi], TICK_COUNT, true).map(Number);
+}
+function axisTickFormatter(values, format = "number") {
+  if (typeof format === "function") return format;
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { style: "percent", maximumFractionDigits: d }).format(value / 100));
+  if (format === "milliseconds" || format === "bytes") {
+    const [unit, size] = axisUnit(unitsOf(format), valueAxisTicks(values));
+    return (value) => exact(unitFormat(unit, value / size));
+  }
+  const compact = (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { notation: "compact", maximumFractionDigits: d }).format(value));
+  const plain = (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { maximumFractionDigits: d }).format(value));
+  const largest = Math.max(0, ...values.filter(Number.isFinite).map(Math.abs));
+  return largest >= COMPACT_FROM ? compact : plain;
+}
+var COMPACT_FROM = 1e4;
+function fullValueFormatter(format = "number") {
+  if (typeof format === "function") return format;
+  if (format === "number") return (value) => value.toLocaleString(formatLocale());
+  if (format === "percent") return (value) => exact((d) => new Intl.NumberFormat(formatLocale(), { style: "percent", maximumFractionDigits: d }).format(value / 100), 4);
+  return (value) => {
+    const [unit, size] = unitReached(unitsOf(format), value);
+    return exact(unitFormat(unit, value / size), 4);
+  };
+}
+function axisExtent(data, series) {
+  return data.flatMap((row) => {
+    const own = [];
+    const up = /* @__PURE__ */ new Map();
+    const down = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      const raw = row[s.dataKey];
+      const v = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw) : NaN;
+      if (!Number.isFinite(v)) continue;
+      if (s.stack == null) own.push(v);
+      else if (v >= 0) up.set(s.stack, (up.get(s.stack) ?? 0) + v);
+      else down.set(s.stack, (down.get(s.stack) ?? 0) + v);
+    }
+    return [...own, ...up.values(), ...down.values()];
+  });
+}
+function seriesValues(data, keys, stacked = false) {
+  return axisExtent(data, keys.map((dataKey) => ({ dataKey, stack: stacked ? "stack" : null })));
+}
 var hasLabel = (label) => label != null && label !== "" && typeof label !== "number";
 var entryName = (entry, label) => !hasLabel(label) && typeof entry.payload?.name === "string" && entry.payload.name || entry.name;
-var entryValue = (entry) => typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value;
-function tooltipAnnouncement(label, payload) {
+var entryValue = (entry, format) => typeof entry.value === "number" ? format ? format(entry.value, entry.dataKey) : entry.value.toLocaleString(formatLocale()) : entry.value;
+function tooltipAnnouncement(label, payload, format) {
   if (!payload?.length) return "";
-  const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry)}`).join(", ");
+  const values = payload.map((entry) => `${entryName(entry, label)} ${entryValue(entry, format)}`).join(", ");
   return hasLabel(label) ? `${String(label)}: ${values}` : values;
 }
 function ChartTooltipContent({ active, payload, label }) {
@@ -535,7 +606,7 @@ function ChartTooltipContent({ active, payload, label }) {
   const borderSubtle = useResolvedToken("--ds-border-subtle");
   const textPrimary = useResolvedToken("--ds-text-primary");
   const textSecondary = useResolvedToken("--ds-text-secondary");
-  const { live } = useContext(ChartFrameContext);
+  const { live, formatValue } = useContext(ChartFrameContext);
   const on = !!active && !!payload?.length;
   const showLabel = hasLabel(label);
   const box = on ? /* @__PURE__ */ jsxs(
@@ -563,7 +634,7 @@ function ChartTooltipContent({ active, payload, label }) {
               entryName(entry, label),
               ":"
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: entryValue(entry) })
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", style: { color: textPrimary }, children: entryValue(entry, formatValue) })
           ] }, i);
         })
       ]
@@ -572,7 +643,7 @@ function ChartTooltipContent({ active, payload, label }) {
   if (live) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       box,
-      createPortal(on ? tooltipAnnouncement(label, payload) : "", live)
+      createPortal(on ? tooltipAnnouncement(label, payload, formatValue) : "", live)
     ] });
   }
   return /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: box });
@@ -691,13 +762,10 @@ function useAxisMeasure(ref, enabled = true) {
   }, [ref, enabled]);
   return state;
 }
-function valueAxisWidth(values, measure) {
-  const finite = values.filter(Number.isFinite);
-  const max = finite.length ? Math.max(...finite.map(Math.abs)) : 0;
-  const magnitude = max > 0 ? 10 ** Math.floor(Math.log10(max)) : 1;
-  const top = Math.ceil(max / magnitude) * magnitude;
-  const negative = finite.some((v) => v < 0) ? "-" : "";
-  return Math.ceil(measure(`${negative}${top}`)) + 8;
+function valueAxisWidth(values, measure, format = String) {
+  const ticks = valueAxisTicks(values);
+  if (!ticks.length) return Math.ceil(measure(format(0))) + 8;
+  return Math.ceil(Math.max(...ticks.map((t) => measure(format(t))))) + 8;
 }
 var SWITCH_HYSTERESIS = 32;
 function useSidewaysSwitch(enabled, names, m, axisWidth, sideMargins) {
@@ -795,18 +863,7 @@ function barShape(bars, index, stacked, radius, horizontal = false) {
   return Shape;
 }
 function valueExtent(data, bars, stacked) {
-  return data.flatMap((row) => {
-    const own = [];
-    const stacks = /* @__PURE__ */ new Map();
-    for (const bar of bars) {
-      const v = Number(row[bar.dataKey]);
-      if (!Number.isFinite(v)) continue;
-      const stack = barStackOf(bar, stacked);
-      if (stack == null) own.push(v);
-      else stacks.set(stack, (stacks.get(stack) ?? 0) + v);
-    }
-    return [...own, ...stacks.values()];
-  });
+  return axisExtent(data, bars.map((bar) => ({ dataKey: bar.dataKey, stack: barStackOf(bar, stacked) ?? null })));
 }
 var titleLine = (px) => Math.ceil(px * 1.5) + 4;
 var TITLE_LINE_CSS = "calc(1.5 * var(--ds-font-size-xs) + 4px)";
@@ -824,6 +881,7 @@ var BarChart = markChart(forwardRef(function BarChart2({
   showLegend,
   xAxisLabel,
   yAxisLabel,
+  valueFormat,
   animated,
   "aria-label": ariaLabel,
   className
@@ -833,9 +891,12 @@ var BarChart = markChart(forwardRef(function BarChart2({
   const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
   const names = kind === "names";
   const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
+  const values = useMemo(() => valueExtent(data ?? [], bars, stacked), [data, bars, stacked]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
   const axisWidth = useMemo(
-    () => measured.measure ? valueAxisWidth(valueExtent(data ?? [], bars, stacked), measured.measure) : 0,
-    [measured.measure, data, bars, stacked]
+    () => measured.measure ? valueAxisWidth(values, measured.measure, tickFormat) : 0,
+    [measured.measure, values, tickFormat]
   );
   const turned = useSidewaysSwitch(horizontal === void 0 && names, labels, measured, axisWidth, 8);
   const sideways = horizontal ?? turned;
@@ -879,6 +940,7 @@ var BarChart = markChart(forwardRef(function BarChart2({
       categoryAxis: sideways ? "y" : "x",
       sideways,
       axisTitle: topTitle,
+      formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
@@ -892,7 +954,7 @@ var BarChart = markChart(forwardRef(function BarChart2({
           children: [
             showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !sideways, horizontal: true }),
             sideways ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(XAxis, { type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel }),
+              /* @__PURE__ */ jsx(XAxis, { type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel, tickFormatter: tickFormat }),
               /* @__PURE__ */ jsx(
                 YAxis,
                 {
@@ -921,7 +983,7 @@ var BarChart = markChart(forwardRef(function BarChart2({
                   label: bottomLabel
                 }
               ),
-              /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false })
+              /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat })
             ] }),
             showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}), cursor: { fill: "var(--ds-bg-muted)", opacity: 0.5 } }),
             legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: bars.map((b) => b.dataKey) }),
@@ -959,11 +1021,15 @@ var LineChart = markChart(forwardRef(function LineChart2({
   showLegend,
   xAxisLabel,
   yAxisLabel,
+  valueFormat,
   animated,
   "aria-label": ariaLabel,
   className
 }, ref) {
   const wrapperRef = useRef(null);
+  const values = useMemo(() => seriesValues(data ?? [], lines.map((s) => s.dataKey), false), [data, lines]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
   const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(lines.length, false);
@@ -985,6 +1051,7 @@ var LineChart = markChart(forwardRef(function LineChart2({
       categories: data.length,
       categoryAxis: "x",
       axisTitle: yAxisLabel,
+      formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
@@ -1003,7 +1070,7 @@ var LineChart = markChart(forwardRef(function LineChart2({
             label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
           }
         ),
-        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat }),
         showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
         legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: lines.map((l) => l.dataKey) }),
         lines.map((line, i) => /* @__PURE__ */ jsx(
@@ -1039,11 +1106,15 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
   gradient = true,
   xAxisLabel,
   yAxisLabel,
+  valueFormat,
   animated,
   "aria-label": ariaLabel,
   className
 }, ref) {
   const wrapperRef = useRef(null);
+  const values = useMemo(() => seriesValues(data ?? [], areas.map((s) => s.dataKey), stacked), [data, areas, stacked]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, "scale");
   const measured = useAxisMeasure(wrapperRef, !!yAxisLabel && (data?.length ?? 0) > 0);
   const instanceId = useId();
@@ -1067,6 +1138,7 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
       categories: data.length,
       categoryAxis: "x",
       axisTitle: yAxisLabel,
+      formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
@@ -1089,7 +1161,7 @@ var AreaChart = markChart(forwardRef(function AreaChart2({
             label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
           }
         ),
-        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
+        /* @__PURE__ */ jsx(YAxis, { width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat }),
         showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
         legendVisible && /* @__PURE__ */ jsx(ChartLegend, { order: areas.map((a) => a.dataKey) }),
         areas.map((area, i) => /* @__PURE__ */ jsx(
@@ -1164,6 +1236,8 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   showLegend = true,
   xAxisLabel,
   yAxisLabel,
+  valueFormat,
+  lineValueFormat = valueFormat,
   animated,
   "aria-label": ariaLabel,
   className
@@ -1173,23 +1247,26 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
   const kind = categoryKind2 ?? categoryKind((data ?? []).map((d) => d[xAxisKey]));
   const names = kind === "names";
   const measured = useAxisMeasure(wrapperRef, (data?.length ?? 0) > 0);
+  const [values, lineValues] = useMemo(() => {
+    const values2 = axisExtent(data ?? [], [
+      ...bars.map((bar) => ({ dataKey: bar.dataKey, stack: barStackOf(bar, stacked) ?? null })),
+      ...dualAxis ? [] : lines.map((l) => ({ dataKey: l.dataKey, stack: null }))
+    ]);
+    const lineValues2 = (data ?? []).flatMap((row) => lines.map((l) => Number(row[l.dataKey])));
+    return [values2, lineValues2];
+  }, [data, bars, lines, stacked, dualAxis]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
+  const lineTickFormat = useMemo(() => axisTickFormatter(lineValues, lineValueFormat), [lineValues, lineValueFormat]);
+  const fullFormat = useMemo(() => {
+    const bar = fullValueFormatter(valueFormat);
+    const line = fullValueFormatter(dualAxis ? lineValueFormat : valueFormat);
+    const lineKeys = new Set(lines.map((l) => l.dataKey));
+    return (value, dataKey) => dataKey && lineKeys.has(dataKey) ? line(value) : bar(value);
+  }, [valueFormat, lineValueFormat, dualAxis, lines]);
   const axisWidth = useMemo(() => {
     if (!measured.measure) return 0;
-    const values = (data ?? []).flatMap((row) => {
-      const stacks = /* @__PURE__ */ new Map();
-      const own = [];
-      for (const bar of bars) {
-        const v = Number(row[bar.dataKey]);
-        if (!Number.isFinite(v)) continue;
-        const stack = barStackOf(bar, stacked);
-        if (stack == null) own.push(v);
-        else stacks.set(stack, (stacks.get(stack) ?? 0) + v);
-      }
-      return [...own, ...stacks.values(), ...dualAxis ? [] : lines.map((l) => Number(row[l.dataKey]))];
-    });
-    const lineValues = (data ?? []).flatMap((row) => lines.map((l) => Number(row[l.dataKey])));
-    return valueAxisWidth(values, measured.measure) + (dualAxis ? valueAxisWidth(lineValues, measured.measure) : 0);
-  }, [measured.measure, data, bars, lines, stacked, dualAxis]);
+    return valueAxisWidth(values, measured.measure, tickFormat) + (dualAxis ? valueAxisWidth(lineValues, measured.measure, lineTickFormat) : 0);
+  }, [measured.measure, values, lineValues, tickFormat, lineTickFormat, dualAxis]);
   const turned = useSidewaysSwitch(horizontal === void 0 && names, labels, measured, axisWidth, 8);
   const sideways = horizontal ?? turned;
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval, sideways ? "names" : kind);
@@ -1233,6 +1310,7 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
       categoryAxis: sideways ? "y" : "x",
       sideways,
       axisTitle: topTitle,
+      formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
@@ -1246,8 +1324,8 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
           children: [
             showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !sideways, horizontal: true }),
             sideways ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(XAxis, { xAxisId: "left", type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel }),
-              dualAxis && /* @__PURE__ */ jsx(XAxis, { xAxisId: "right", type: "number", orientation: "top", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto" }),
+              /* @__PURE__ */ jsx(XAxis, { xAxisId: "left", type: "number", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", label: bottomLabel, tickFormatter: tickFormat }),
+              dualAxis && /* @__PURE__ */ jsx(XAxis, { xAxisId: "right", type: "number", orientation: "top", ...axisStyle.tick, axisLine: false, tickLine: false, height: "auto", tickFormatter: lineTickFormat }),
               /* @__PURE__ */ jsx(
                 YAxis,
                 {
@@ -1276,8 +1354,8 @@ var CompositeChart = markChart(forwardRef(function CompositeChart2({
                   label: bottomLabel
                 }
               ),
-              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false }),
-              dualAxis && /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false })
+              /* @__PURE__ */ jsx(YAxis, { yAxisId: "left", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: tickFormat }),
+              dualAxis && /* @__PURE__ */ jsx(YAxis, { yAxisId: "right", orientation: "right", width: "auto", ...axisStyle.tick, axisLine: false, tickLine: false, tickFormatter: lineTickFormat })
             ] }),
             showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) }),
             showLegend && /* @__PURE__ */ jsx(ChartLegend, { order: [...bars.map((b) => b.dataKey), ...lines.map((l) => l.dataKey)] }),
@@ -1326,11 +1404,23 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
   showGrid = true,
   showTooltip = true,
   showLegend,
+  valueFormat,
+  xValueFormat,
   animated,
   "aria-label": ariaLabel,
   className
 }, ref) {
   const wrapperRef = useRef(null);
+  const [xTickFormat, yTickFormat, fullFormat] = useMemo(() => {
+    const points = (data ?? []).flatMap((s) => s.points);
+    const x = fullValueFormatter(xValueFormat);
+    const y = fullValueFormatter(valueFormat);
+    return [
+      axisTickFormatter(points.map((p) => p.x), xValueFormat),
+      axisTickFormatter(points.map((p) => p.y), valueFormat),
+      (value, dataKey) => dataKey === "x" ? x(value) : dataKey === "y" ? y(value) : value.toLocaleString(formatLocale())
+    ];
+  }, [data, valueFormat, xValueFormat]);
   const measured = useAxisMeasure(wrapperRef, !!yLabel && (data?.length ?? 0) > 0);
   const colors = useChartColors(data.length, false);
   const gridStroke = useGridStroke();
@@ -1347,6 +1437,7 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
       size: { model: "ratio" },
       chart: "scatter",
       axisTitle: yLabel,
+      formatValue: fullFormat,
       className,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
@@ -1365,6 +1456,7 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
                 ...axisStyle.tick,
                 axisLine: false,
                 tickLine: false,
+                tickFormatter: xTickFormat,
                 label: xLabel ? { value: xLabel, position: "bottom", offset: 0, style: { ...axisLabelStyle, textAnchor: "middle" } } : void 0
               }
             ),
@@ -1377,7 +1469,8 @@ var ScatterChart = markChart(forwardRef(function ScatterChart2({
                 width: "auto",
                 ...axisStyle.tick,
                 axisLine: false,
-                tickLine: false
+                tickLine: false,
+                tickFormatter: yTickFormat
               }
             ),
             /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", range: [40, 400] }),
@@ -1409,6 +1502,7 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   showTooltip = true,
   showLegend,
   animated,
+  valueFormat = "number",
   "aria-label": ariaLabel,
   className
 }, ref) {
@@ -1416,8 +1510,11 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
   const softColors = useChartColors(dataKeys.length, true);
   const isAnimated = useChartAnimation(animated);
   const legendVisible = showLegend ?? dataKeys.length >= 2;
+  const values = useMemo(() => seriesValues(data ?? [], dataKeys.map((dk) => dk.key)), [data, dataKeys]);
+  const tickFormat = useMemo(() => axisTickFormatter(values, valueFormat), [values, valueFormat]);
+  const fullFormat = useMemo(() => fullValueFormatter(valueFormat), [valueFormat]);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "square" }, chart: "radar", className, "aria-label": ariaLabel, formatValue: fullFormat, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "75%", accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx(PolarGrid, { stroke: "var(--ds-border-subtle)" }),
     /* @__PURE__ */ jsx(
       PolarAngleAxis,
@@ -1430,6 +1527,7 @@ var RadarChart = markChart(forwardRef(function RadarChart2({
       PolarRadiusAxis,
       {
         tick: { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: "var(--ds-text-muted)" },
+        tickFormatter: tickFormat,
         axisLine: false
       }
     ),
@@ -1527,19 +1625,139 @@ var FunnelChart = markChart(forwardRef(function FunnelChart2({
     showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
   ] }) }) });
 }));
-function contrastColor(hex) {
-  const c = hex.replace("#", "");
-  if (c.length < 6) return "#ffffff";
-  const r = parseInt(c.substring(0, 2), 16);
-  const g = parseInt(c.substring(2, 4), 16);
-  const b = parseInt(c.substring(4, 6), 16);
+
+// ../../showcase/src/lib/token-algorithms.ts
+function oklchCss(colour) {
+  return `oklch(${colour.L.toFixed(3)} ${colour.C.toFixed(4)} ${colour.H})`;
+}
+function parseOklch(value) {
+  const m = value.trim().match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?\s*(?:\/\s*[\d.%]+\s*)?\)$/i);
+  if (!m) return null;
+  const L = m[2] ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+  return { L, C: parseFloat(m[3]), H: parseFloat(m[4]) };
+}
+function oklchToLinearSrgb({ L, C, H }) {
+  const h = H * Math.PI / 180;
+  const a = C * Math.cos(h);
+  const b = C * Math.sin(h);
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function oklchToLinearSrgbClamped(colour) {
+  return oklchToLinearSrgb(colour).map((v) => Math.min(1, Math.max(0, v)));
+}
+var gammaEncode = (v) => v <= 31308e-7 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055;
+var gammaDecode = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+function oklchToSrgb(colour) {
+  return oklchToLinearSrgbClamped(colour).map(gammaEncode);
+}
+var ROUNDING_WINDOW = 0.25;
+function srgbLuminanceRange(encoded) {
+  let lo = 0;
+  let hi = 0;
+  encoded.forEach((v, i) => {
+    const x = Math.min(1, Math.max(0, v)) * 255;
+    const below = Math.floor(x);
+    const [a, b] = Math.abs(x - below - 0.5) <= ROUNDING_WINDOW ? [below, Math.min(255, below + 1)] : [Math.round(x), Math.round(x)];
+    const weight = [0.2126, 0.7152, 0.0722][i];
+    lo += weight * gammaDecode(a / 255);
+    hi += weight * gammaDecode(b / 255);
+  });
+  return [lo, hi];
+}
+function luminanceRange(colour) {
+  return srgbLuminanceRange(oklchToSrgb(colour));
+}
+function worstContrastOf([t0, t1], [f0, f1]) {
+  if (t0 <= f1 && f0 <= t1) return 1;
+  return t0 > f1 ? contrastRatio(t0, f1) : contrastRatio(t1, f0);
+}
+function contrastRatio(lumA, lumB) {
+  const lighter = Math.max(lumA, lumB);
+  const darker = Math.min(lumA, lumB);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+var WCAG_AA_TEXT = 4.5;
+var ON_FILL_WHITE = "oklch(1 0 0)";
+var ON_FILL_DARK = "var(--ds-neutral-950)";
+var DARK_TEXT_CANDIDATE = { L: 0.13, C: 2e-3, H: 0 };
+var ON_FILL_TINT_CHROMA = 0.1;
+var ON_FILL_TINT_TARGET = 5;
+var TINT_L_MAX = 0.45;
+var TINT_L_MIN = 0.1;
+var TINT_L_STEP = 0.01;
+var WHITE_RANGE = [1, 1];
+var DARK_RANGE = luminanceRange(DARK_TEXT_CANDIDATE);
+function minContrast(text, fills) {
+  let min = Infinity;
+  for (const f of fills) min = Math.min(min, worstContrastOf(text, luminanceRange(f)));
+  return min;
+}
+function onFillDarkTint(fill, ...moreFills) {
+  const fills = [fill, ...moreFills];
+  const H = fill.H;
+  const chroma = Math.min(ON_FILL_TINT_CHROMA, fill.C);
+  for (const target of [ON_FILL_TINT_TARGET, WCAG_AA_TEXT]) {
+    for (const C of [chroma, chroma / 2, chroma / 4]) {
+      for (let L = TINT_L_MAX; L >= TINT_L_MIN - 1e-9; L -= TINT_L_STEP) {
+        const candidate = { L: +L.toFixed(2), C: +C.toFixed(4), H };
+        if (minContrast(luminanceRange(candidate), fills) >= target) return candidate;
+      }
+    }
+  }
+  return null;
+}
+function onFillTextValue(fill, ...moreFills) {
+  const fills = [fill, ...moreFills];
+  const whiteMin = minContrast(WHITE_RANGE, fills);
+  if (whiteMin >= WCAG_AA_TEXT) return ON_FILL_WHITE;
+  const tint = onFillDarkTint(fill, ...moreFills);
+  if (tint) return oklchCss(tint);
+  return minContrast(DARK_RANGE, fills) >= whiteMin ? ON_FILL_DARK : ON_FILL_WHITE;
+}
+var LABEL_INSET = 4;
+function treemapLabelLines(width, height, metrics) {
+  if (width - 2 * LABEL_INSET < metrics.fontSize * 3) return 0;
+  return Math.max(0, Math.floor((height - 2 * LABEL_INSET) / metrics.lineHeight));
+}
+var computedColors = /* @__PURE__ */ new Map();
+function computedColor(css) {
+  if (typeof document === "undefined") return css;
+  let value = computedColors.get(css);
+  if (value === void 0) {
+    const probe = document.createElement("span");
+    probe.style.color = css;
+    document.body.appendChild(probe);
+    value = getComputedStyle(probe).color;
+    probe.remove();
+    computedColors.set(css, value);
+  }
+  return value;
+}
+function labelColorOn(fill) {
+  const parsed = parseOklch(fill) ?? parseOklch(computedColor(fill));
+  return parsed ? onFillTextValue(parsed) : contrastColor(computedColor(fill));
+}
+function contrastColor(color) {
+  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/.exec(color);
+  const c = color.replace("#", "");
+  const [r, g, b] = rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : c.length >= 6 ? [parseInt(c.substring(0, 2), 16), parseInt(c.substring(2, 4), 16), parseInt(c.substring(4, 6), 16)] : [0, 0, 0];
   const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
   return luminance > 0.55 ? "#1f2937" : "#ffffff";
 }
-function TreemapContent({ x = 0, y = 0, width = 0, height: h = 0, name, depth, colors, radius, index = 0 }) {
+function TreemapContent({ x = 0, y = 0, width = 0, height: h = 0, name, depth, colors, radius, index = 0, metrics }) {
   const fill = colors[index % colors.length];
-  const showLabel = width > 40 && h > 20;
-  const labelColor = contrastColor(fill);
+  const lines = metrics && name ? treemapLabelLines(width, h, metrics) : 0;
+  const labelColor = labelColorOn(fill);
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       "rect",
@@ -1555,21 +1773,15 @@ function TreemapContent({ x = 0, y = 0, width = 0, height: h = 0, name, depth, c
         style: { opacity: depth === 1 ? 1 : 0.85 }
       }
     ),
-    showLabel && /* @__PURE__ */ jsx(
-      "text",
+    lines > 0 && /* @__PURE__ */ jsx("foreignObject", { x, y, width, height: h, style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center overflow-hidden text-center", style: { padding: LABEL_INSET }, children: /* @__PURE__ */ jsx(
+      "span",
       {
-        x: x + width / 2,
-        y: y + h / 2,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        fill: labelColor,
-        stroke: "none",
-        fontSize: "var(--ds-font-size-xs)",
-        fontFamily: "var(--ds-font-sans)",
-        style: { pointerEvents: "none" },
+        "data-treemap-label": "",
+        className: LABEL_TEXT,
+        style: { color: labelColor, display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lines, overflow: "hidden", overflowWrap: "anywhere", hyphens: "auto" },
         children: name
       }
-    )
+    ) }) })
   ] });
 }
 function addFillToNodes(nodes, colors, counter = { i: 0 }) {
@@ -1582,6 +1794,21 @@ function addFillToNodes(nodes, colors, counter = { i: 0 }) {
     return { ...node, fill };
   });
 }
+var LABEL_TEXT = "text-xs leading-tight font-[family-name:var(--ds-font-sans)]";
+function useLabelMetrics() {
+  const probe = useRef(null);
+  const [metrics, setMetrics] = useState(null);
+  useLayoutEffect(() => {
+    const el = probe.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    const fontSize = parseFloat(cs.fontSize);
+    const lineHeight = parseFloat(cs.lineHeight) || el.getBoundingClientRect().height;
+    if (!(fontSize > 0) || !(lineHeight > 0)) return;
+    if (!metrics || metrics.fontSize !== fontSize || metrics.lineHeight !== lineHeight) setMetrics({ fontSize, lineHeight });
+  });
+  return [probe, metrics];
+}
 var TreemapChart = markChart(forwardRef(function TreemapChart2({
   data,
   height = "auto",
@@ -1593,21 +1820,25 @@ var TreemapChart = markChart(forwardRef(function TreemapChart2({
   const colors = useChartColors(6, false);
   const isAnimated = useChartAnimation(animated);
   const radius = useRadius();
+  const [probe, metrics] = useLabelMetrics();
   const chartData = addFillToNodes(data, colors);
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "treemap", className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
-    Treemap,
-    {
-      data: chartData,
-      dataKey: "value",
-      nameKey: "name",
-      aspectRatio: 4 / 3,
-      stroke: "var(--ds-bg-surface)",
-      isAnimationActive: isAnimated,
-      content: /* @__PURE__ */ jsx(TreemapContent, { colors, radius }),
-      children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
-    }
-  ) }) });
+  return /* @__PURE__ */ jsxs(ChartWrapper, { ref, height, size: { model: "ratio" }, chart: "treemap", className, "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(
+      Treemap,
+      {
+        data: chartData,
+        dataKey: "value",
+        nameKey: "name",
+        aspectRatio: 4 / 3,
+        stroke: "var(--ds-bg-surface)",
+        isAnimationActive: isAnimated,
+        content: /* @__PURE__ */ jsx(TreemapContent, { colors, radius, metrics }),
+        children: showTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("span", { ref: probe, "aria-hidden": true, className: LABEL_TEXT, style: { position: "absolute", visibility: "hidden", pointerEvents: "none" }, children: "M" })
+  ] });
 }));
 var SankeyChart = markChart(forwardRef(function SankeyChart2({
   data,