@anuma/sdk 11.0.0 → 11.1.0

package/dist/react/index.mjs

@@ -34413,6 +34413,7 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
+  Label,
   Line as Line2,
   LineChart,
   Pie,
@@ -34425,6 +34426,12 @@ function cx(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 var THEMES = { light: "", dark: ".dark" };
+var SAFE_CSS_KEY = /^[\w-]+$/;
+var SAFE_CSS_COLOR = /^(?:#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|[a-z]+|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch)\([\w\s.,%/+-]*\)|var\(--[\w-]+\))$/i;
+function isSafeCssColor(value) {
+  if (typeof value !== "string" || !SAFE_CSS_COLOR.test(value)) return false;
+  return typeof CSS === "undefined" || typeof CSS.supports !== "function" || CSS.supports("color", value);
+}
 var ChartContext = React2.createContext(null);
 function useChart() {
   const context = React2.useContext(ChartContext);
@@ -34434,7 +34441,9 @@ function useChart() {
   return context;
 }
 function ChartStyle({ id: id2, config }) {
-  const colorConfig = Object.entries(config).filter(([, cfg]) => cfg.theme || cfg.color);
+  const colorConfig = Object.entries(config).filter(
+    ([key3, cfg]) => SAFE_CSS_KEY.test(key3) && (cfg.theme || cfg.color)
+  );
   if (!colorConfig.length) return null;
   return /* @__PURE__ */ jsx2(
     "style",
@@ -34445,7 +34454,7 @@ function ChartStyle({ id: id2, config }) {
 ${prefix} [data-chart=${id2}] {
 ${colorConfig.map(([key3, itemConfig]) => {
             const color = itemConfig.theme?.[theme] || itemConfig.color;
-            return color ? `  --color-${key3}: ${color};` : null;
+            return isSafeCssColor(color) ? `  --color-${key3}: ${color};` : null;
           }).join("\n")}
 }
 `
@@ -34494,7 +34503,8 @@ function ChartTooltipContent({
   formatter,
   color,
   nameKey,
-  labelKey
+  labelKey,
+  valueFormatter
 }) {
   const { config } = useChart();
   const tooltipLabel = React2.useMemo(() => {
@@ -34561,7 +34571,7 @@ function ChartTooltipContent({
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ jsx2("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value !== void 0 && item.value !== null && /* @__PURE__ */ jsx2("span", { className: "text-foreground font-medium tabular-nums", children: valueFormatter && typeof item.value === "number" ? valueFormatter(item.value) : item.value.toLocaleString() })
                     ]
                   }
                 )
@@ -34607,7 +34617,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              itemConfig?.label ?? cellText(item.value)
             ]
           },
           String(item.value)
@@ -34634,86 +34644,417 @@ var DEFAULT_COLORS = [
   "var(--chart-4)",
   "var(--chart-5)"
 ];
+var SURFACE = "var(--chart-surface)";
+var DOT_LIMIT = 12;
+var MAX_TICKS = 8;
+var MINUS = "\u2212";
+function paletteColor(index) {
+  return index < DEFAULT_COLORS.length ? DEFAULT_COLORS[index] : `hsl(${Math.round(index * 137.508 % 360)} 65% 55%)`;
+}
+function cellText(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
+}
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function tickDigits(ticks) {
+  if (!ticks || ticks.length < 2) return 3;
+  const step = ticks[1] - ticks[0];
+  const magnitude = Math.max(...ticks.map(Math.abs));
+  if (step <= 0 || magnitude === 0) return 3;
+  const needed = Math.floor(Math.log10(magnitude)) - Math.floor(Math.log10(step)) + 1;
+  return Math.min(21, Math.max(3, needed));
+}
+function keepSmall(options) {
+  const small = new Intl.NumberFormat(void 0, { ...options, maximumSignificantDigits: 3 });
+  const regular = new Intl.NumberFormat(void 0, { ...options, maximumFractionDigits: 2 });
+  return (n, format) => format(n !== 0 && Math.abs(n) < 1 ? small : regular, n);
+}
+function buildFormatters(format, currency, ticks) {
+  const digits = tickDigits(ticks);
+  if (format === "currency") {
+    const money = (options) => new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency ?? "USD",
+      ...options
+    });
+    const compact2 = money({ notation: "compact", maximumSignificantDigits: 3 });
+    const tick2 = money({ notation: "compact", maximumSignificantDigits: digits });
+    const small2 = money({ maximumSignificantDigits: 4 });
+    const cents = money({ minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    const value2 = (n) => Math.abs(n) >= 1e6 ? compact2.format(n) : n !== 0 && Math.abs(n) < 1 ? small2.format(n) : cents.format(n);
+    return { tick: (n) => tick2.format(n), value: value2, change: (d) => value2(Math.abs(d)) };
+  }
+  if (format === "percent") {
+    const percent = keepSmall({ style: "percent" });
+    const points = keepSmall({});
+    const tick2 = new Intl.NumberFormat(void 0, {
+      style: "percent",
+      maximumSignificantDigits: digits
+    });
+    return {
+      tick: (n) => tick2.format(n / 100),
+      value: (n) => percent(n, (formatter) => formatter.format(n / 100)),
+      change: (d) => `${points(Math.abs(d), (formatter, n) => formatter.format(n))} pts`
+    };
+  }
+  const tick = new Intl.NumberFormat(void 0, {
+    notation: "compact",
+    maximumSignificantDigits: digits
+  });
+  const compact = new Intl.NumberFormat(void 0, {
+    notation: "compact",
+    maximumSignificantDigits: 3
+  });
+  const small = new Intl.NumberFormat(void 0, { maximumSignificantDigits: 4 });
+  const plain2 = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 });
+  const value = (n) => Math.abs(n) >= 1e6 ? compact.format(n) : n !== 0 && Math.abs(n) < 1 ? small.format(n) : plain2.format(n);
+  return { tick: (n) => tick.format(n), value, change: (d) => value(Math.abs(d)) };
+}
+function seriesValues(points, keys) {
+  return points.flatMap(
+    (point) => keys.map((key3) => point[key3]).filter((v) => typeof v === "number")
+  );
+}
+function niceStep(rough) {
+  const exponent = Math.floor(Math.log10(rough));
+  const base = 10 ** exponent;
+  const fraction = rough / base;
+  const nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
+  return nice * base;
+}
+function niceTicks(values) {
+  if (values.length === 0) return void 0;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || Math.abs(max) * 0.02 || 1;
+  const low = min - span * 0.1;
+  const high = max + span * 0.1;
+  const step = niceStep((high - low) / 3);
+  const start = min >= 0 ? Math.max(0, Math.floor(low / step) * step) : Math.floor(low / step) * step;
+  const ticks = [];
+  for (let index = 0; index <= MAX_TICKS; index++) {
+    const tick = Number((start + index * step).toPrecision(15));
+    if (ticks.length > 0 && tick <= ticks[ticks.length - 1]) break;
+    ticks.push(tick);
+    if (tick >= high) break;
+  }
+  return ticks.length >= 2 ? ticks : void 0;
+}
 function buildChartConfig(dataKeys, colors) {
   const config = {};
   dataKeys.forEach((key3, i) => {
+    const custom = colors?.[key3];
     config[key3] = {
       label: key3.charAt(0).toUpperCase() + key3.slice(1),
-      color: colors?.[key3] || DEFAULT_COLORS[i % DEFAULT_COLORS.length]
+      color: isSafeCssColor(custom) ? custom : paletteColor(i)
     };
   });
   return config;
 }
+function lastValueIndex(points, key3) {
+  for (let index = points.length - 1; index >= 0; index--) {
+    if (typeof points[index][key3] === "number") return index;
+  }
+  return -1;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React2.useState(false);
+  React2.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = (event) => setReduced(event.matches);
+    query.addEventListener?.("change", onChange);
+    return () => query.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}
+function buildTrend(values, format, formatters) {
+  if (values.length < 2) return void 0;
+  const first = values[0];
+  const last = values[values.length - 1];
+  const difference = last - first;
+  const direction = difference > 0 ? "up" : difference < 0 ? "down" : "flat";
+  const sign = direction === "up" ? "+" : direction === "down" ? MINUS : "";
+  const percent = format !== "percent" && first !== 0 ? ` (${sign}${new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }).format(
+    Math.abs(difference / Math.abs(first) * 100)
+  )}%)` : "";
+  return {
+    value: formatters.value(last),
+    change: `${sign}${formatters.change(difference)}${percent}`,
+    direction
+  };
+}
+var TREND_CLASS = {
+  up: "text-emerald-600 dark:text-emerald-400",
+  down: "text-red-600 dark:text-red-400",
+  flat: "text-muted-foreground"
+};
+var TREND_ARROW = { up: "\u25B2", down: "\u25BC", flat: "" };
+function ChartHeader({
+  title,
+  trend,
+  range
+}) {
+  if (!trend) {
+    return title ? /* @__PURE__ */ jsx2("p", { className: "mb-3 text-sm font-medium", children: title }) : null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mb-3", "data-testid": "chart-header", children: [
+    title && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: title }),
+    /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-2xl font-semibold tracking-tight text-foreground", children: trend.value }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { className: cx("font-medium", TREND_CLASS[trend.direction]), children: [
+        TREND_ARROW[trend.direction] && /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "mr-1 text-[0.6rem]", children: TREND_ARROW[trend.direction] }),
+        trend.change
+      ] }),
+      range && /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: range })
+    ] })
+  ] });
+}
 function ChartCard({ data }) {
   const containerRef = React2.useRef(null);
   const [ready, setReady] = React2.useState(false);
+  const gradientId = `chart-fill-${React2.useId().replace(/:/g, "")}`;
+  const reducedMotion = usePrefersReducedMotion();
   React2.useEffect(() => {
     const frame = requestAnimationFrame(() => setReady(true));
     return () => cancelAnimationFrame(frame);
   }, []);
   if ("error" in data) {
-    return /* @__PURE__ */ jsx2("div", { className: "my-4 max-w-lg", children: /* @__PURE__ */ jsx2("div", { className: "rounded-xl bg-sidebar dark:bg-card px-4 py-3", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: data.error }) }) });
+    return /* @__PURE__ */ jsx2("div", { className: "my-4 max-w-lg", children: /* @__PURE__ */ jsx2("div", { className: "rounded-xl bg-sidebar dark:bg-card px-4 py-3", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: "Couldn't display this chart." }) }) });
   }
-  const { chartType, title, data: chartData, dataKeys, xAxisKey, colors } = data;
+  const {
+    chartType,
+    title,
+    data: chartData,
+    dataKeys,
+    xAxisKey,
+    colors,
+    valueFormat,
+    currency
+  } = data;
   const chartConfig = buildChartConfig(dataKeys, colors);
-  return /* @__PURE__ */ jsx2("div", { className: "my-4 max-w-lg", ref: containerRef, children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4", children: [
-    title && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium mb-3", children: title }),
-    ready ? /* @__PURE__ */ jsx2(ChartContainer, { config: chartConfig, className: "aspect-auto h-[250px] w-full", children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
-      /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
-      xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-      /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
-      /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-      dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
-      dataKeys.map((key3) => /* @__PURE__ */ jsx2(Bar, { dataKey: key3, fill: `var(--color-${key3})`, radius: 4 }, key3))
-    ] }) : chartType === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: chartData, children: [
-      /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
-      xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-      /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
-      /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-      dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
-      dataKeys.map((key3) => /* @__PURE__ */ jsx2(
-        Line2,
-        {
-          dataKey: key3,
-          stroke: `var(--color-${key3})`,
-          strokeWidth: 2,
-          dot: false
-        },
-        key3
-      ))
-    ] }) : chartType === "area" ? /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
-      /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
-      xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-      /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
-      /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-      dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
-      dataKeys.map((key3) => /* @__PURE__ */ jsx2(
-        Area,
-        {
-          dataKey: key3,
-          fill: `var(--color-${key3})`,
-          stroke: `var(--color-${key3})`,
-          fillOpacity: 0.3
-        },
-        key3
-      ))
-    ] }) : /* @__PURE__ */ jsxs(PieChart, { children: [
-      /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-      /* @__PURE__ */ jsx2(
-        Pie,
+  const seriesColor = (key3) => chartConfig[key3]?.color;
+  const isTrendChart = chartType === "line" || chartType === "area";
+  const plottedKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
+  const values = seriesValues(chartData, plottedKeys);
+  const yTicks = isTrendChart ? niceTicks(values) : void 0;
+  const yDomain = yTicks ? [yTicks[0], yTicks[yTicks.length - 1]] : void 0;
+  const formatters = buildFormatters(valueFormat, currency, yTicks);
+  const trend = isTrendChart && dataKeys.length === 1 ? buildTrend(values, valueFormat, formatters) : void 0;
+  const trendRows = trend ? chartData.filter((point) => typeof point[dataKeys[0]] === "number") : [];
+  const range = trend && xAxisKey ? [trendRows[0], trendRows[trendRows.length - 1]].map((point) => cellText(point[xAxisKey])).filter(Boolean).join(" \u2013 ") : void 0;
+  const headerTitle = title ?? (trend ? chartConfig[dataKeys[0]]?.label : void 0);
+  const tickSamples = [...yDomain ?? [], ...values].map((value) => formatters.tick(value));
+  const longestTick = tickSamples.reduce((max, label) => Math.max(max, label.length), 0);
+  const animate = !reducedMotion;
+  const showDots = chartData.length <= DOT_LIMIT;
+  const curve = showDots ? "linear" : "monotone";
+  const hasNegative = values.some((value) => value < 0);
+  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
+  const xAxis = xAxisKey && /* @__PURE__ */ jsx2(
+    XAxis,
+    {
+      dataKey: xAxisKey,
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 8,
+      minTickGap: 16,
+      interval: "preserveStartEnd",
+      padding: isTrendChart ? { left: 12, right: 12 } : void 0
+    }
+  );
+  const yAxis = /* @__PURE__ */ jsx2(
+    YAxis,
+    {
+      tickLine: false,
+      axisLine: false,
+      tickCount: yTicks ? void 0 : 4,
+      ticks: yTicks,
+      tickMargin: 4,
+      tickFormatter: formatters.tick,
+      domain: yDomain,
+      allowDataOverflow: false,
+      width: Math.min(120, Math.max(36, longestTick * 7 + 12))
+    }
+  );
+  const tooltip = /* @__PURE__ */ jsx2(
+    ChartTooltip,
+    {
+      cursor: chartType === "bar" ? { fill: "var(--muted)", opacity: 0.5 } : { stroke: "var(--border)", strokeWidth: 1 },
+      content: /* @__PURE__ */ jsx2(
+        ChartTooltipContent,
         {
-          data: chartData,
-          dataKey: dataKeys[0],
-          nameKey: xAxisKey || "name",
-          cx: "50%",
-          cy: "50%",
-          outerRadius: 80,
-          children: chartData.map((_, index) => /* @__PURE__ */ jsx2(Cell, { fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length] }, index))
+          indicator: chartType === "bar" ? "dot" : "line",
+          valueFormatter: formatters.value
         }
-      ),
-      /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
-    ] }) }) : /* @__PURE__ */ jsx2("div", { className: "h-[250px] w-full" })
-  ] }) });
+      )
+    }
+  );
+  const legend = dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) });
+  const marker = (key3, r) => ({
+    r,
+    fill: seriesColor(key3),
+    stroke: SURFACE,
+    strokeWidth: 2
+  });
+  const lineDot = (key3) => showDots ? marker(key3, 4) : (props) => props.index === lastValueIndex(chartData, key3) && typeof props.cx === "number" && typeof props.cy === "number" ? /* @__PURE__ */ jsx2("circle", { cx: props.cx, cy: props.cy, ...marker(key3, 4) }, `end-${key3}`) : /* @__PURE__ */ jsx2("g", {}, `dot-${key3}-${props.index}`);
+  const labelKey = chartType === "pie" ? xAxisKey || "name" : xAxisKey;
+  const tableColumns = labelKey ? [labelKey, ...plottedKeys] : plottedKeys;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "my-4 max-w-lg",
+      ref: containerRef,
+      role: "figure",
+      "aria-label": [title, `${chartType} chart`].filter(Boolean).join(", "),
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4 [--chart-surface:var(--sidebar)] dark:[--chart-surface:var(--card)]", children: [
+        /* @__PURE__ */ jsx2(ChartHeader, { title: headerTitle, trend, range }),
+        /* @__PURE__ */ jsxs("table", { style: VISUALLY_HIDDEN, children: [
+          /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: tableColumns.map((column) => /* @__PURE__ */ jsx2("th", { scope: "col", children: column }, column)) }) }),
+          /* @__PURE__ */ jsx2("tbody", { children: chartData.map((point, row) => /* @__PURE__ */ jsx2("tr", { children: tableColumns.map((column) => /* @__PURE__ */ jsx2("td", { children: cellText(point[column]) }, column)) }, row)) })
+        ] }),
+        ready ? /* @__PURE__ */ jsx2(
+          ChartContainer,
+          {
+            config: chartConfig,
+            className: "aspect-auto h-[220px] w-full",
+            "aria-hidden": "true",
+            children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, margin, barGap: 2, barCategoryGap: "24%", children: [
+              /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3) => /* @__PURE__ */ jsx2(
+                Bar,
+                {
+                  dataKey: key3,
+                  fill: seriesColor(key3),
+                  maxBarSize: 24,
+                  radius: hasNegative ? 2 : [4, 4, 0, 0],
+                  isAnimationActive: animate
+                },
+                key3
+              ))
+            ] }) : chartType === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: chartData, margin, children: [
+              /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3) => /* @__PURE__ */ jsx2(
+                Line2,
+                {
+                  type: curve,
+                  dataKey: key3,
+                  stroke: seriesColor(key3),
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  isAnimationActive: animate,
+                  animationDuration: 600
+                },
+                key3
+              ))
+            ] }) : chartType === "area" ? /* @__PURE__ */ jsxs(AreaChart, { data: chartData, margin, children: [
+              /* @__PURE__ */ jsx2("defs", { children: dataKeys.map((key3, index) => /* @__PURE__ */ jsxs(
+                "linearGradient",
+                {
+                  id: `${gradientId}-${index}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: seriesColor(key3), stopOpacity: 0.24 }),
+                    /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: seriesColor(key3), stopOpacity: 0 })
+                  ]
+                },
+                key3
+              )) }),
+              /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3, index) => /* @__PURE__ */ jsx2(
+                Area,
+                {
+                  type: curve,
+                  dataKey: key3,
+                  stroke: seriesColor(key3),
+                  strokeWidth: 2,
+                  fill: `url(#${gradientId}-${index})`,
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  baseValue: "dataMin",
+                  isAnimationActive: animate,
+                  animationDuration: 600
+                },
+                key3
+              ))
+            ] }) : /* @__PURE__ */ jsxs(PieChart, { margin, children: [
+              tooltip,
+              /* @__PURE__ */ jsxs(
+                Pie,
+                {
+                  data: chartData,
+                  dataKey: dataKeys[0],
+                  nameKey: xAxisKey || "name",
+                  cx: "50%",
+                  cy: "50%",
+                  innerRadius: "58%",
+                  outerRadius: "86%",
+                  paddingAngle: chartData.length > 1 ? 1 : 0,
+                  stroke: SURFACE,
+                  strokeWidth: 2,
+                  isAnimationActive: animate,
+                  children: [
+                    chartData.map((_, index) => /* @__PURE__ */ jsx2(Cell, { fill: paletteColor(index) }, index)),
+                    /* @__PURE__ */ jsx2(
+                      Label,
+                      {
+                        position: "center",
+                        content: ({ viewBox }) => {
+                          const box = viewBox;
+                          if (box?.cx === void 0 || box.cy === void 0) return null;
+                          return /* @__PURE__ */ jsxs("text", { x: box.cx, y: box.cy, textAnchor: "middle", dominantBaseline: "middle", children: [
+                            /* @__PURE__ */ jsx2(
+                              "tspan",
+                              {
+                                x: box.cx,
+                                y: box.cy - 6,
+                                className: "fill-foreground text-lg font-semibold",
+                                children: formatters.value(values.reduce((sum, value) => sum + value, 0))
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("tspan", { x: box.cx, y: box.cy + 14, className: "fill-muted-foreground", children: "Total" })
+                          ] });
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx2("div", { className: "h-[220px] w-full" })
+      ] })
+    }
+  );
 }
 
 // src/react/LoggerProvider.tsx

package/dist/tools/index.cjs

@@ -2529,10 +2529,33 @@ function createDisplayTool(options, config) {
 }
 
 // src/tools/chart.ts
+var VALUE_FORMATS = ["number", "currency", "percent"];
+var CURRENCY_CODE = /^[A-Z]{3}$/;
+function toValueFormat(value) {
+  return VALUE_FORMATS.find((format) => format === value);
+}
+function toCurrencyCode(value) {
+  if (typeof value !== "string") return void 0;
+  const code = value.trim().toUpperCase();
+  return CURRENCY_CODE.test(code) ? code : void 0;
+}
+var NUMERIC_STRING = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?$/i;
+var THOUSANDS_GROUPED = /^[-+]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/;
+function toNumber(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value !== "string") return void 0;
+  let cleaned = value.replace(/[\s$€£¥%]/g, "");
+  if (cleaned.includes(",")) {
+    if (!THOUSANDS_GROUPED.test(cleaned)) return void 0;
+    cleaned = cleaned.replace(/,/g, "");
+  }
+  const number = NUMERIC_STRING.test(cleaned) ? Number(cleaned) : void 0;
+  return number !== void 0 && Number.isFinite(number) ? number : void 0;
+}
 function createChartTool(options) {
   return createDisplayTool(options, {
     name: "display_chart",
-    description: 'Render a bar, line, area, or pie chart inline \u2014 visualize data, plot a trend over time, or graph a comparison. Use whenever the user asks to chart, plot, graph, or visualize numbers (sales, prices, temperatures, metrics). You MUST pass the actual numeric values in the "data" array \u2014 they are never inferred.',
+    description: 'Render a bar, line, area, or pie chart inline \u2014 visualize data, plot a trend over time, or graph a comparison. Use whenever the user asks to chart, plot, graph, or visualize numbers (sales, prices, temperatures, metrics). You MUST pass the actual numeric values in the "data" array \u2014 they are never inferred. Do not chart price or market history (crypto, stocks, market caps) unless those values came from a tool result or a cited source earlier in this conversation; never fill a price series from memory. Set valueFormat to "currency" for prices and money, or "percent" for percentage values.',
     parameters: {
       type: "object",
       properties: {
@@ -2566,6 +2589,15 @@ function createChartTool(options) {
           type: "object",
           additionalProperties: { type: "string" },
           description: "Optional color overrides. Map of dataKey to CSS color value (e.g. { 'revenue': '#2563eb' }). If omitted, uses theme chart colors."
+        },
+        valueFormat: {
+          type: "string",
+          enum: ["number", "currency", "percent"],
+          description: 'How to display the values on the axis, tooltip and headline. "currency" for prices and money (set currency too), "percent" when values are already percentages (3.2 means 3.2%). Defaults to "number".'
+        },
+        currency: {
+          type: "string",
+          description: 'ISO 4217 currency code used when valueFormat is "currency", e.g. "USD" or "EUR". Defaults to USD.'
         }
       },
       required: ["chartType", "data", "dataKeys"]
@@ -2590,13 +2622,36 @@ function createChartTool(options) {
           error: 'The "dataKeys" array is required and must list the numeric keys to chart, e.g. ["revenue"].'
         };
       }
+      const points = data.map((point) => ({ ...point }));
+      for (const key of dataKeys) {
+        let numericCount = 0;
+        for (const [index, point] of points.entries()) {
+          const raw = point[key];
+          if (raw === void 0 || raw === null) continue;
+          const value = toNumber(raw);
+          if (value === void 0) {
+            return {
+              error: `Series "${key}" has a non-numeric value at data[${index}]: ${JSON.stringify(raw)}. Values for dataKeys must be plain numbers, e.g. 65000 rather than "$65,000 USD".`
+            };
+          }
+          point[key] = value;
+          numericCount++;
+        }
+        if (numericCount === 0) {
+          return {
+            error: `Series "${key}" has no numeric values. Every entry in "dataKeys" must name a numeric key present in the "data" objects.`
+          };
+        }
+      }
       return {
         chartType,
         title: args.title,
-        data,
+        data: points,
         dataKeys,
         xAxisKey: args.xAxisKey,
-        colors: args.colors
+        colors: args.colors,
+        valueFormat: toValueFormat(args.valueFormat),
+        currency: toCurrencyCode(args.currency)
       };
     }
   });