@anuma/sdk 11.0.1 → 11.1.0

package/dist/react/index.cjs

@@ -36448,7 +36448,8 @@ function ChartTooltipContent({
   formatter,
   color,
   nameKey,
-  labelKey
+  labelKey,
+  valueFormatter
 }) {
   const { config } = useChart();
   const tooltipLabel = React2.useMemo(() => {
@@ -36515,7 +36516,7 @@ function ChartTooltipContent({
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
                       ] }),
-                      item.value && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                      item.value !== void 0 && item.value !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-foreground font-medium tabular-nums", children: valueFormatter && typeof item.value === "number" ? valueFormatter(item.value) : item.value.toLocaleString() })
                     ]
                   }
                 )
@@ -36561,7 +36562,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              itemConfig?.label ?? cellText(item.value)
             ]
           },
           String(item.value)
@@ -36588,19 +36589,16 @@ 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%)`;
 }
-var compactNumber = new Intl.NumberFormat(void 0, {
-  notation: "compact",
-  maximumSignificantDigits: 3
-});
 function cellText(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
 }
-function formatTick(value) {
-  return typeof value === "number" ? compactNumber.format(value) : String(value);
-}
 var VISUALLY_HIDDEN = {
   position: "absolute",
   width: 1,
@@ -36612,6 +36610,90 @@ var VISUALLY_HIDDEN = {
   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) => {
@@ -36623,9 +36705,71 @@ function buildChartConfig(dataKeys, colors) {
   });
   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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-3 text-sm font-medium", children: title }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", "data-testid": "chart-header", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-muted-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-0.5 text-2xl font-semibold tracking-tight text-foreground", children: trend.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: cx("font-medium", TREND_CLASS[trend.direction]), children: [
+        TREND_ARROW[trend.direction] && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: "mr-1 text-[0.6rem]", children: TREND_ARROW[trend.direction] }),
+        trend.change
+      ] }),
+      range && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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);
@@ -36633,25 +36777,84 @@ function ChartCard({ data }) {
   if ("error" in data) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "my-4 max-w-lg", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-xl bg-sidebar dark:bg-card px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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);
   const seriesColor = (key3) => chartConfig[key3]?.color;
-  const longestTick = chartData.reduce(
-    (longest, point) => dataKeys.reduce((max, key3) => {
-      const value = point[key3];
-      return typeof value === "number" ? Math.max(max, formatTick(value).length) : max;
-    }, longest),
-    0
+  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__ */ (0, import_jsx_runtime2.jsx)(
+    import_recharts.XAxis,
+    {
+      dataKey: xAxisKey,
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 8,
+      minTickGap: 16,
+      interval: "preserveStartEnd",
+      padding: isTrendChart ? { left: 12, right: 12 } : void 0
+    }
   );
-  const yAxisProps = {
-    tickLine: false,
-    axisLine: false,
-    tickFormatter: formatTick,
-    width: Math.min(120, Math.max(40, longestTick * 7 + 16))
-  };
+  const yAxis = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_recharts.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__ */ (0, import_jsx_runtime2.jsx)(
+    ChartTooltip,
+    {
+      cursor: chartType === "bar" ? { fill: "var(--muted)", opacity: 0.5 } : { stroke: "var(--border)", strokeWidth: 1 },
+      content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ChartTooltipContent,
+        {
+          indicator: chartType === "bar" ? "dot" : "line",
+          valueFormatter: formatters.value
+        }
+      )
+    }
+  );
+  const legend = dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: props.cx, cy: props.cy, ...marker(key3, 4) }, `end-${key3}`) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", {}, `dot-${key3}-${props.index}`);
   const labelKey = chartType === "pie" ? xAxisKey || "name" : xAxisKey;
-  const valueKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
-  const tableColumns = labelKey ? [labelKey, ...valueKeys] : valueKeys;
+  const tableColumns = labelKey ? [labelKey, ...plottedKeys] : plottedKeys;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -36659,8 +36862,8 @@ function ChartCard({ data }) {
       ref: containerRef,
       role: "figure",
       "aria-label": [title, `${chartType} chart`].filter(Boolean).join(", "),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4", children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium mb-3", children: title }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(ChartHeader, { title: headerTitle, trend, range }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: VISUALLY_HIDDEN, children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: tableColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { scope: "col", children: column }, column)) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: chartData.map((point, row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: tableColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { children: cellText(point[column]) }, column)) }, row)) })
@@ -36669,50 +36872,87 @@ function ChartCard({ data }) {
           ChartContainer,
           {
             config: chartConfig,
-            className: "aspect-auto h-[250px] w-full",
+            className: "aspect-auto h-[220px] w-full",
             "aria-hidden": "true",
-            children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data: chartData, children: [
+            children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data: chartData, margin, barGap: 2, barCategoryGap: "24%", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
-              xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
-              dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
-              dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Bar, { dataKey: key3, fill: seriesColor(key3), radius: 4 }, key3))
-            ] }) : chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data: chartData, children: [
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_recharts.Bar,
+                {
+                  dataKey: key3,
+                  fill: seriesColor(key3),
+                  maxBarSize: 24,
+                  radius: hasNegative ? 2 : [4, 4, 0, 0],
+                  isAnimationActive: animate
+                },
+                key3
+              ))
+            ] }) : chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data: chartData, margin, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
-              xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
-              dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
               dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_recharts.Line,
                 {
+                  type: curve,
                   dataKey: key3,
                   stroke: seriesColor(key3),
                   strokeWidth: 2,
-                  dot: false
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  isAnimationActive: animate,
+                  animationDuration: 600
                 },
                 key3
               ))
-            ] }) : chartType === "area" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data: chartData, children: [
+            ] }) : chartType === "area" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data: chartData, margin, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: dataKeys.map((key3, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "linearGradient",
+                {
+                  id: `${gradientId}-${index}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "0%", stopColor: seriesColor(key3), stopOpacity: 0.24 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "100%", stopColor: seriesColor(key3), stopOpacity: 0 })
+                  ]
+                },
+                key3
+              )) }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
-              xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
-              dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
-              dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_recharts.Area,
                 {
+                  type: curve,
                   dataKey: key3,
-                  fill: seriesColor(key3),
                   stroke: seriesColor(key3),
-                  fillOpacity: 0.3
+                  strokeWidth: 2,
+                  fill: `url(#${gradientId}-${index})`,
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  baseValue: "dataMin",
+                  isAnimationActive: animate,
+                  animationDuration: 600
                 },
                 key3
               ))
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.PieChart, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.PieChart, { margin, children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 import_recharts.Pie,
                 {
                   data: chartData,
@@ -36720,14 +36960,43 @@ function ChartCard({ data }) {
                   nameKey: xAxisKey || "name",
                   cx: "50%",
                   cy: "50%",
-                  outerRadius: 80,
-                  children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Cell, { fill: paletteColor(index) }, index))
+                  innerRadius: "58%",
+                  outerRadius: "86%",
+                  paddingAngle: chartData.length > 1 ? 1 : 0,
+                  stroke: SURFACE,
+                  strokeWidth: 2,
+                  isAnimationActive: animate,
+                  children: [
+                    chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Cell, { fill: paletteColor(index) }, index)),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_recharts.Label,
+                      {
+                        position: "center",
+                        content: ({ viewBox }) => {
+                          const box = viewBox;
+                          if (box?.cx === void 0 || box.cy === void 0) return null;
+                          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("text", { x: box.cx, y: box.cy, textAnchor: "middle", dominantBaseline: "middle", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "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__ */ (0, import_jsx_runtime2.jsx)("tspan", { x: box.cx, y: box.cy + 14, className: "fill-muted-foreground", children: "Total" })
+                          ] });
+                        }
+                      }
+                    )
+                  ]
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
             ] })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[250px] w-full" })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[220px] w-full" })
       ] })
     }
   );

package/dist/react/index.d.mts

@@ -14419,6 +14419,7 @@ declare function renderAnumaTree(node: AnumaNode): React.ReactElement | null;
 declare function renderAnumaJsx(jsx: string): React.ReactElement | null;
 
 type ChartDataPoint = Record<string, string | number>;
+type ChartValueFormat = "number" | "currency" | "percent";
 type DisplayChartResult = {
     chartType: "bar" | "line" | "area" | "pie";
     title?: string;
@@ -14426,6 +14427,8 @@ type DisplayChartResult = {
     dataKeys: string[];
     xAxisKey?: string;
     colors?: Record<string, string>;
+    valueFormat?: ChartValueFormat;
+    currency?: string;
 } | {
     error: string;
 };
@@ -14455,12 +14458,13 @@ declare function ChartContainer({ id, className, children, config, ...props }: R
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 }): react_jsx_runtime.JSX.Element;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, valueFormatter, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
+    valueFormatter?: (value: number) => string;
 }): react_jsx_runtime.JSX.Element | null;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
 declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {

package/dist/react/index.d.ts

@@ -14419,6 +14419,7 @@ declare function renderAnumaTree(node: AnumaNode): React.ReactElement | null;
 declare function renderAnumaJsx(jsx: string): React.ReactElement | null;
 
 type ChartDataPoint = Record<string, string | number>;
+type ChartValueFormat = "number" | "currency" | "percent";
 type DisplayChartResult = {
     chartType: "bar" | "line" | "area" | "pie";
     title?: string;
@@ -14426,6 +14427,8 @@ type DisplayChartResult = {
     dataKeys: string[];
     xAxisKey?: string;
     colors?: Record<string, string>;
+    valueFormat?: ChartValueFormat;
+    currency?: string;
 } | {
     error: string;
 };
@@ -14455,12 +14458,13 @@ declare function ChartContainer({ id, className, children, config, ...props }: R
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 }): react_jsx_runtime.JSX.Element;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, valueFormatter, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
+    valueFormatter?: (value: number) => string;
 }): react_jsx_runtime.JSX.Element | null;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
 declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {

package/dist/react/index.mjs

@@ -34413,6 +34413,7 @@ import {
   BarChart,
   CartesianGrid,
   Cell,
+  Label,
   Line as Line2,
   LineChart,
   Pie,
@@ -34502,7 +34503,8 @@ function ChartTooltipContent({
   formatter,
   color,
   nameKey,
-  labelKey
+  labelKey,
+  valueFormatter
 }) {
   const { config } = useChart();
   const tooltipLabel = React2.useMemo(() => {
@@ -34569,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() })
                     ]
                   }
                 )
@@ -34615,7 +34617,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              itemConfig?.label ?? cellText(item.value)
             ]
           },
           String(item.value)
@@ -34642,19 +34644,16 @@ 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%)`;
 }
-var compactNumber = new Intl.NumberFormat(void 0, {
-  notation: "compact",
-  maximumSignificantDigits: 3
-});
 function cellText(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
 }
-function formatTick(value) {
-  return typeof value === "number" ? compactNumber.format(value) : String(value);
-}
 var VISUALLY_HIDDEN = {
   position: "absolute",
   width: 1,
@@ -34666,6 +34665,90 @@ var VISUALLY_HIDDEN = {
   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) => {
@@ -34677,9 +34760,71 @@ function buildChartConfig(dataKeys, colors) {
   });
   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);
@@ -34687,25 +34832,84 @@ function ChartCard({ data }) {
   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: "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);
   const seriesColor = (key3) => chartConfig[key3]?.color;
-  const longestTick = chartData.reduce(
-    (longest, point) => dataKeys.reduce((max, key3) => {
-      const value = point[key3];
-      return typeof value === "number" ? Math.max(max, formatTick(value).length) : max;
-    }, longest),
-    0
+  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 yAxisProps = {
-    tickLine: false,
-    axisLine: false,
-    tickFormatter: formatTick,
-    width: Math.min(120, Math.max(40, longestTick * 7 + 16))
-  };
+  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,
+        {
+          indicator: chartType === "bar" ? "dot" : "line",
+          valueFormatter: formatters.value
+        }
+      )
+    }
+  );
+  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 valueKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
-  const tableColumns = labelKey ? [labelKey, ...valueKeys] : valueKeys;
+  const tableColumns = labelKey ? [labelKey, ...plottedKeys] : plottedKeys;
   return /* @__PURE__ */ jsx2(
     "div",
     {
@@ -34713,8 +34917,8 @@ function ChartCard({ data }) {
       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", children: [
-        title && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium mb-3", children: title }),
+      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)) })
@@ -34723,50 +34927,87 @@ function ChartCard({ data }) {
           ChartContainer,
           {
             config: chartConfig,
-            className: "aspect-auto h-[250px] w-full",
+            className: "aspect-auto h-[220px] w-full",
             "aria-hidden": "true",
-            children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
+            children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, margin, barGap: 2, barCategoryGap: "24%", children: [
               /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
-              xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
-              /* @__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: seriesColor(key3), radius: 4 }, key3))
-            ] }) : chartType === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: chartData, children: [
+              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 }),
-              xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
-              /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-              dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
               dataKeys.map((key3) => /* @__PURE__ */ jsx2(
                 Line2,
                 {
+                  type: curve,
                   dataKey: key3,
                   stroke: seriesColor(key3),
                   strokeWidth: 2,
-                  dot: false
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  isAnimationActive: animate,
+                  animationDuration: 600
                 },
                 key3
               ))
-            ] }) : chartType === "area" ? /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
+            ] }) : 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 }),
-              xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
-              /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
-              /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-              dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
-              dataKeys.map((key3) => /* @__PURE__ */ jsx2(
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3, index) => /* @__PURE__ */ jsx2(
                 Area,
                 {
+                  type: curve,
                   dataKey: key3,
-                  fill: seriesColor(key3),
                   stroke: seriesColor(key3),
-                  fillOpacity: 0.3
+                  strokeWidth: 2,
+                  fill: `url(#${gradientId}-${index})`,
+                  dot: lineDot(key3),
+                  activeDot: marker(key3, 5),
+                  baseValue: "dataMin",
+                  isAnimationActive: animate,
+                  animationDuration: 600
                 },
                 key3
               ))
-            ] }) : /* @__PURE__ */ jsxs(PieChart, { children: [
-              /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
-              /* @__PURE__ */ jsx2(
+            ] }) : /* @__PURE__ */ jsxs(PieChart, { margin, children: [
+              tooltip,
+              /* @__PURE__ */ jsxs(
                 Pie,
                 {
                   data: chartData,
@@ -34774,14 +35015,43 @@ function ChartCard({ data }) {
                   nameKey: xAxisKey || "name",
                   cx: "50%",
                   cy: "50%",
-                  outerRadius: 80,
-                  children: chartData.map((_, index) => /* @__PURE__ */ jsx2(Cell, { fill: paletteColor(index) }, index))
+                  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-[250px] w-full" })
+        ) : /* @__PURE__ */ jsx2("div", { className: "h-[220px] w-full" })
       ] })
     }
   );

package/dist/tools/index.cjs

@@ -2529,6 +2529,16 @@ 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) {
@@ -2545,7 +2555,7 @@ function toNumber(value) {
 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. 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.',
+    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: {
@@ -2579,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"]
@@ -2630,7 +2649,9 @@ function createChartTool(options) {
         data: points,
         dataKeys,
         xAxisKey: args.xAxisKey,
-        colors: args.colors
+        colors: args.colors,
+        valueFormat: toValueFormat(args.valueFormat),
+        currency: toCurrencyCode(args.currency)
       };
     }
   });

package/dist/tools/index.d.mts

@@ -1390,6 +1390,7 @@ declare function createInteractiveTool(options: CreateUIToolsOptions, config: In
 declare function createDisplayTool<TArgs = Record<string, unknown>, TResult = unknown>(options: CreateUIToolsOptions, config: DisplayToolConfig<TArgs, TResult>): ToolConfig;
 
 type ChartDataPoint = Record<string, string | number>;
+type ChartValueFormat = "number" | "currency" | "percent";
 type DisplayChartResult = {
     chartType: "bar" | "line" | "area" | "pie";
     title?: string;
@@ -1397,6 +1398,8 @@ type DisplayChartResult = {
     dataKeys: string[];
     xAxisKey?: string;
     colors?: Record<string, string>;
+    valueFormat?: ChartValueFormat;
+    currency?: string;
 } | {
     error: string;
 };
@@ -2929,4 +2932,4 @@ interface XGetMyPostsArgs {
  */
 declare function createXTools(callProxy: XProxyCaller): Record<string, ToolConfig>;
 
-export { ADD_SLIDE_SCHEMA, APP_BUILDER_PROMPT, APP_COMPLETE_CONNECT_ACK_TYPE, APP_COMPLETE_CONNECT_TYPE, APP_COMPLETE_DEFAULT_TIMEOUT_MS, APP_COMPLETE_IFRAME_SHIM_SCRIPT, APP_COMPLETE_REQUEST_TYPE, APP_COMPLETE_RESPONSE_TYPE, APP_COMPLETE_STUB_SCRIPT, APP_FILE_TOOL_NAMES, APP_PREVIEW_BASELINE_CSS, AUDIT_DESIGN_SCHEMA, type AgentresAccount, type AgentresClient, type AgentresClientOptions, AgentresError, type AgentresErrorCode, type AgentresLinkStatus, type AgentresLinkStep, AgentresPathError, type AnchorMatch, type AnumaChild, AnumaJsxError, type AnumaNode, type AppCompleteBridge, type AppCompleteBridgeOptions, type AppFileRecord, type AppFileStorage, type AttrValue, type AuditIssue, type AuditIssueType, type AuditResult, type AuditSeverity, type AuditTokens, type BuildSlideSystemPromptOptions, CHOICE_TOOL_NAME, CONNECTOR_ERROR_MARKER, CREATE_DOCUMENT_SCHEMA, CREATE_FILE_SCHEMA, CRITIQUE_DESIGN_SCHEMA, type CalendarEvent, type ChartDataPoint, type ChoiceOption, type ConfirmParameter, type ConfirmToolResult, type ConnectorErrorCode, type ConnectorMintError, type ConnectorMintResult, type ConnectorTokenGetterOpts, type ConnectorTokenSource, type CreateAppGenerationToolsOptions, type CreateDocumentToolsOptions, type CreateEventArgs, type CreateFileArgs, type CreateSelectPaymentWalletToolOptions, type CreateSlideToolsOptions, type CreateUIToolsOptions, type CreateWalletPaymentToolOptions, type CreateWeatherToolOptions, DEFAULT_DESIGN_CRITIQUE_RUBRIC, DEFAULT_DOCUMENT_ID, DEFAULT_MAX_CONVERSATIONS, DEFAULT_MAX_DOCUMENT_CONVERSATIONS, DELETE_FILE_SCHEMA, DOCUMENT_BUILDER_PROMPT, DOCUMENT_TOOL_NAMES, type DisplayChartResult, type DisplayConnectorResult, type DisplayPhoneCallOfferResult, type DisplayToolConfig, type DisplayToolMigrations, type DisplayWeatherResult, type DocAttrValue, type DocChild, DocDslError, type DocNode, type DriveFile, type DropboxRequestAccess, type DropboxTokenGetter, type ExportAppOptions, FONT_LIBRARY, FONT_PRESETS, type FileChangeEvent, type FileSnippet, type FontCategory, type FontPreset, type FontSpec, type ForecastDay, type FormField, type FormFieldOption, type FormFieldType, type GetFileContentArgs, type GmailGetMessageArgs, type GmailMessageDetail, type GmailMessageSummary, type GmailRequestAccess, type GmailSearchArgs, type GmailSendConfirmation, type GmailSendMessageArgs, type GmailTokenGetter, type InteractiveToolConfig, type KnownTag, LAYOUT_MODES, LIST_FILES_SCHEMA, type LayoutMode, type LegacyDeckJson, type ListEventsArgs, type ListRecentFilesArgs, MapFileStorage, type NotionCreatePagesArgs, type NotionFetchArgs, type NotionMcpCaller, type NotionMovePagesArgs, type NotionSearchArgs, type NotionUpdatePageArgs, PATCH_DOCUMENT_SCHEMA, PATCH_FILE_SCHEMA, PATCH_SLIDES_SCHEMA, PLAN_DECK_SCHEMA, type PatchFailure, type PatchFailureReason, type PaymentWallet, type PdfTag, READ_DOCUMENT_SCHEMA, READ_FILE_SCHEMA, READ_SLIDES_SCHEMA, RUNTIME_ERROR_OVERLAY_SCRIPT, SELECT_PAYMENT_WALLET_TOOL_NAME, SLIDES_FILE_PATH, SLIDE_CANVAS_HEIGHT, SLIDE_CANVAS_WIDTH, type SearchFilesArgs, type SelectPaymentWalletResult, SiwxChallengeError, SiwxUnsupportedError, type SlackGetChannelHistoryArgs, type SlackGetThreadRepliesArgs, type SlackListChannelsArgs, type SlackListDmsArgs, type SlackListUsersArgs, type SlackPostMessageArgs, type SlackProxyCaller, type SlackSearchMessagesArgs, type SlideToolSet, type SolanaSignMessageFn, THEME_ATTRS, type ThemeAttr, type ToolConfig, type ToolExecutionErrorType, type ToolExecutionResult, type UIInteractionContext, type UpdateEventArgs, type UpdateFileArgs, VERIFY_APP_SCHEMA, type VerifyAppResult, WALLET_PAYMENT_TOOL_NAME, type WalletPaymentOutcome, type WalletPaymentPassenger, type WalletPaymentRequest, type WalletPaymentResult, type XGetMeArgs, type XGetMyPostsArgs, type XProxyCaller, applyPatches, auditDesign, buildAppFileManifest, buildAppSystemPrompt, buildConnectorErrorResult, buildDocumentSystemPrompt, buildFontsUrl, buildSlideSystemPrompt, callNotionMCPTool, connectorMintErrorToToolResult, convertLegacyDeckJson, createAgentresClient, createAppCompleteBridge, createAppGenerationTools, createChartTool, createChatTools, createChoiceTool, createConfirmTool, createConnectorOfferTool, createConnectorTokenGetter, createDisplayTool, createDocumentTools, createDriveTools, createDropboxTools, createFormTool, createGitHubTools, createGmailTools, createGoogleCalendarCreateEventTool, createGoogleCalendarTool, createGoogleCalendarUpdateEventTool, createGoogleDriveCreateFileTool, createGoogleDriveGetContentTool, createGoogleDriveListRecentTool, createGoogleDriveSearchTool, createGoogleDriveUpdateFileTool, createInteractiveTool, createNotionCreateCommentTool, createNotionCreateDatabaseTool, createNotionCreatePagesTool, createNotionDuplicatePageTool, createNotionFetchTool, createNotionGetCommentsTool, createNotionGetTeamsTool, createNotionGetUsersTool, createNotionMovePagesTool, createNotionProxyTools, createNotionSearchTool, createNotionTools, createNotionUpdateDataSourceTool, createNotionUpdatePageTool, createPhoneCallOfferTool, createSelectPaymentWalletTool, createSlackTools, createSlideTools, createWalletPaymentTool, createWeatherTool, createXTools, documentPath, exportAppToHtml, findById, findParentOfId, getFontByName, getId, getMCPEndpoints, getNumberAttr, getStringAttr, insertAfterId, insertChild, installAppCompleteIframeShim, isAnumaTag, isHtmlTag, isKnownFont, isLegacyDeckJson, isPdfTag, migrateDisplayResult, normalizePath, parseDocumentDsl, parseJsx, pdfStyleKeys, pdfTags, removeById, replaceById, serializeJsx, truncateContent, updateAttrs, walk };
+export { ADD_SLIDE_SCHEMA, APP_BUILDER_PROMPT, APP_COMPLETE_CONNECT_ACK_TYPE, APP_COMPLETE_CONNECT_TYPE, APP_COMPLETE_DEFAULT_TIMEOUT_MS, APP_COMPLETE_IFRAME_SHIM_SCRIPT, APP_COMPLETE_REQUEST_TYPE, APP_COMPLETE_RESPONSE_TYPE, APP_COMPLETE_STUB_SCRIPT, APP_FILE_TOOL_NAMES, APP_PREVIEW_BASELINE_CSS, AUDIT_DESIGN_SCHEMA, type AgentresAccount, type AgentresClient, type AgentresClientOptions, AgentresError, type AgentresErrorCode, type AgentresLinkStatus, type AgentresLinkStep, AgentresPathError, type AnchorMatch, type AnumaChild, AnumaJsxError, type AnumaNode, type AppCompleteBridge, type AppCompleteBridgeOptions, type AppFileRecord, type AppFileStorage, type AttrValue, type AuditIssue, type AuditIssueType, type AuditResult, type AuditSeverity, type AuditTokens, type BuildSlideSystemPromptOptions, CHOICE_TOOL_NAME, CONNECTOR_ERROR_MARKER, CREATE_DOCUMENT_SCHEMA, CREATE_FILE_SCHEMA, CRITIQUE_DESIGN_SCHEMA, type CalendarEvent, type ChartDataPoint, type ChartValueFormat, type ChoiceOption, type ConfirmParameter, type ConfirmToolResult, type ConnectorErrorCode, type ConnectorMintError, type ConnectorMintResult, type ConnectorTokenGetterOpts, type ConnectorTokenSource, type CreateAppGenerationToolsOptions, type CreateDocumentToolsOptions, type CreateEventArgs, type CreateFileArgs, type CreateSelectPaymentWalletToolOptions, type CreateSlideToolsOptions, type CreateUIToolsOptions, type CreateWalletPaymentToolOptions, type CreateWeatherToolOptions, DEFAULT_DESIGN_CRITIQUE_RUBRIC, DEFAULT_DOCUMENT_ID, DEFAULT_MAX_CONVERSATIONS, DEFAULT_MAX_DOCUMENT_CONVERSATIONS, DELETE_FILE_SCHEMA, DOCUMENT_BUILDER_PROMPT, DOCUMENT_TOOL_NAMES, type DisplayChartResult, type DisplayConnectorResult, type DisplayPhoneCallOfferResult, type DisplayToolConfig, type DisplayToolMigrations, type DisplayWeatherResult, type DocAttrValue, type DocChild, DocDslError, type DocNode, type DriveFile, type DropboxRequestAccess, type DropboxTokenGetter, type ExportAppOptions, FONT_LIBRARY, FONT_PRESETS, type FileChangeEvent, type FileSnippet, type FontCategory, type FontPreset, type FontSpec, type ForecastDay, type FormField, type FormFieldOption, type FormFieldType, type GetFileContentArgs, type GmailGetMessageArgs, type GmailMessageDetail, type GmailMessageSummary, type GmailRequestAccess, type GmailSearchArgs, type GmailSendConfirmation, type GmailSendMessageArgs, type GmailTokenGetter, type InteractiveToolConfig, type KnownTag, LAYOUT_MODES, LIST_FILES_SCHEMA, type LayoutMode, type LegacyDeckJson, type ListEventsArgs, type ListRecentFilesArgs, MapFileStorage, type NotionCreatePagesArgs, type NotionFetchArgs, type NotionMcpCaller, type NotionMovePagesArgs, type NotionSearchArgs, type NotionUpdatePageArgs, PATCH_DOCUMENT_SCHEMA, PATCH_FILE_SCHEMA, PATCH_SLIDES_SCHEMA, PLAN_DECK_SCHEMA, type PatchFailure, type PatchFailureReason, type PaymentWallet, type PdfTag, READ_DOCUMENT_SCHEMA, READ_FILE_SCHEMA, READ_SLIDES_SCHEMA, RUNTIME_ERROR_OVERLAY_SCRIPT, SELECT_PAYMENT_WALLET_TOOL_NAME, SLIDES_FILE_PATH, SLIDE_CANVAS_HEIGHT, SLIDE_CANVAS_WIDTH, type SearchFilesArgs, type SelectPaymentWalletResult, SiwxChallengeError, SiwxUnsupportedError, type SlackGetChannelHistoryArgs, type SlackGetThreadRepliesArgs, type SlackListChannelsArgs, type SlackListDmsArgs, type SlackListUsersArgs, type SlackPostMessageArgs, type SlackProxyCaller, type SlackSearchMessagesArgs, type SlideToolSet, type SolanaSignMessageFn, THEME_ATTRS, type ThemeAttr, type ToolConfig, type ToolExecutionErrorType, type ToolExecutionResult, type UIInteractionContext, type UpdateEventArgs, type UpdateFileArgs, VERIFY_APP_SCHEMA, type VerifyAppResult, WALLET_PAYMENT_TOOL_NAME, type WalletPaymentOutcome, type WalletPaymentPassenger, type WalletPaymentRequest, type WalletPaymentResult, type XGetMeArgs, type XGetMyPostsArgs, type XProxyCaller, applyPatches, auditDesign, buildAppFileManifest, buildAppSystemPrompt, buildConnectorErrorResult, buildDocumentSystemPrompt, buildFontsUrl, buildSlideSystemPrompt, callNotionMCPTool, connectorMintErrorToToolResult, convertLegacyDeckJson, createAgentresClient, createAppCompleteBridge, createAppGenerationTools, createChartTool, createChatTools, createChoiceTool, createConfirmTool, createConnectorOfferTool, createConnectorTokenGetter, createDisplayTool, createDocumentTools, createDriveTools, createDropboxTools, createFormTool, createGitHubTools, createGmailTools, createGoogleCalendarCreateEventTool, createGoogleCalendarTool, createGoogleCalendarUpdateEventTool, createGoogleDriveCreateFileTool, createGoogleDriveGetContentTool, createGoogleDriveListRecentTool, createGoogleDriveSearchTool, createGoogleDriveUpdateFileTool, createInteractiveTool, createNotionCreateCommentTool, createNotionCreateDatabaseTool, createNotionCreatePagesTool, createNotionDuplicatePageTool, createNotionFetchTool, createNotionGetCommentsTool, createNotionGetTeamsTool, createNotionGetUsersTool, createNotionMovePagesTool, createNotionProxyTools, createNotionSearchTool, createNotionTools, createNotionUpdateDataSourceTool, createNotionUpdatePageTool, createPhoneCallOfferTool, createSelectPaymentWalletTool, createSlackTools, createSlideTools, createWalletPaymentTool, createWeatherTool, createXTools, documentPath, exportAppToHtml, findById, findParentOfId, getFontByName, getId, getMCPEndpoints, getNumberAttr, getStringAttr, insertAfterId, insertChild, installAppCompleteIframeShim, isAnumaTag, isHtmlTag, isKnownFont, isLegacyDeckJson, isPdfTag, migrateDisplayResult, normalizePath, parseDocumentDsl, parseJsx, pdfStyleKeys, pdfTags, removeById, replaceById, serializeJsx, truncateContent, updateAttrs, walk };

package/dist/tools/index.d.ts

@@ -1390,6 +1390,7 @@ declare function createInteractiveTool(options: CreateUIToolsOptions, config: In
 declare function createDisplayTool<TArgs = Record<string, unknown>, TResult = unknown>(options: CreateUIToolsOptions, config: DisplayToolConfig<TArgs, TResult>): ToolConfig;
 
 type ChartDataPoint = Record<string, string | number>;
+type ChartValueFormat = "number" | "currency" | "percent";
 type DisplayChartResult = {
     chartType: "bar" | "line" | "area" | "pie";
     title?: string;
@@ -1397,6 +1398,8 @@ type DisplayChartResult = {
     dataKeys: string[];
     xAxisKey?: string;
     colors?: Record<string, string>;
+    valueFormat?: ChartValueFormat;
+    currency?: string;
 } | {
     error: string;
 };
@@ -2929,4 +2932,4 @@ interface XGetMyPostsArgs {
  */
 declare function createXTools(callProxy: XProxyCaller): Record<string, ToolConfig>;
 
-export { ADD_SLIDE_SCHEMA, APP_BUILDER_PROMPT, APP_COMPLETE_CONNECT_ACK_TYPE, APP_COMPLETE_CONNECT_TYPE, APP_COMPLETE_DEFAULT_TIMEOUT_MS, APP_COMPLETE_IFRAME_SHIM_SCRIPT, APP_COMPLETE_REQUEST_TYPE, APP_COMPLETE_RESPONSE_TYPE, APP_COMPLETE_STUB_SCRIPT, APP_FILE_TOOL_NAMES, APP_PREVIEW_BASELINE_CSS, AUDIT_DESIGN_SCHEMA, type AgentresAccount, type AgentresClient, type AgentresClientOptions, AgentresError, type AgentresErrorCode, type AgentresLinkStatus, type AgentresLinkStep, AgentresPathError, type AnchorMatch, type AnumaChild, AnumaJsxError, type AnumaNode, type AppCompleteBridge, type AppCompleteBridgeOptions, type AppFileRecord, type AppFileStorage, type AttrValue, type AuditIssue, type AuditIssueType, type AuditResult, type AuditSeverity, type AuditTokens, type BuildSlideSystemPromptOptions, CHOICE_TOOL_NAME, CONNECTOR_ERROR_MARKER, CREATE_DOCUMENT_SCHEMA, CREATE_FILE_SCHEMA, CRITIQUE_DESIGN_SCHEMA, type CalendarEvent, type ChartDataPoint, type ChoiceOption, type ConfirmParameter, type ConfirmToolResult, type ConnectorErrorCode, type ConnectorMintError, type ConnectorMintResult, type ConnectorTokenGetterOpts, type ConnectorTokenSource, type CreateAppGenerationToolsOptions, type CreateDocumentToolsOptions, type CreateEventArgs, type CreateFileArgs, type CreateSelectPaymentWalletToolOptions, type CreateSlideToolsOptions, type CreateUIToolsOptions, type CreateWalletPaymentToolOptions, type CreateWeatherToolOptions, DEFAULT_DESIGN_CRITIQUE_RUBRIC, DEFAULT_DOCUMENT_ID, DEFAULT_MAX_CONVERSATIONS, DEFAULT_MAX_DOCUMENT_CONVERSATIONS, DELETE_FILE_SCHEMA, DOCUMENT_BUILDER_PROMPT, DOCUMENT_TOOL_NAMES, type DisplayChartResult, type DisplayConnectorResult, type DisplayPhoneCallOfferResult, type DisplayToolConfig, type DisplayToolMigrations, type DisplayWeatherResult, type DocAttrValue, type DocChild, DocDslError, type DocNode, type DriveFile, type DropboxRequestAccess, type DropboxTokenGetter, type ExportAppOptions, FONT_LIBRARY, FONT_PRESETS, type FileChangeEvent, type FileSnippet, type FontCategory, type FontPreset, type FontSpec, type ForecastDay, type FormField, type FormFieldOption, type FormFieldType, type GetFileContentArgs, type GmailGetMessageArgs, type GmailMessageDetail, type GmailMessageSummary, type GmailRequestAccess, type GmailSearchArgs, type GmailSendConfirmation, type GmailSendMessageArgs, type GmailTokenGetter, type InteractiveToolConfig, type KnownTag, LAYOUT_MODES, LIST_FILES_SCHEMA, type LayoutMode, type LegacyDeckJson, type ListEventsArgs, type ListRecentFilesArgs, MapFileStorage, type NotionCreatePagesArgs, type NotionFetchArgs, type NotionMcpCaller, type NotionMovePagesArgs, type NotionSearchArgs, type NotionUpdatePageArgs, PATCH_DOCUMENT_SCHEMA, PATCH_FILE_SCHEMA, PATCH_SLIDES_SCHEMA, PLAN_DECK_SCHEMA, type PatchFailure, type PatchFailureReason, type PaymentWallet, type PdfTag, READ_DOCUMENT_SCHEMA, READ_FILE_SCHEMA, READ_SLIDES_SCHEMA, RUNTIME_ERROR_OVERLAY_SCRIPT, SELECT_PAYMENT_WALLET_TOOL_NAME, SLIDES_FILE_PATH, SLIDE_CANVAS_HEIGHT, SLIDE_CANVAS_WIDTH, type SearchFilesArgs, type SelectPaymentWalletResult, SiwxChallengeError, SiwxUnsupportedError, type SlackGetChannelHistoryArgs, type SlackGetThreadRepliesArgs, type SlackListChannelsArgs, type SlackListDmsArgs, type SlackListUsersArgs, type SlackPostMessageArgs, type SlackProxyCaller, type SlackSearchMessagesArgs, type SlideToolSet, type SolanaSignMessageFn, THEME_ATTRS, type ThemeAttr, type ToolConfig, type ToolExecutionErrorType, type ToolExecutionResult, type UIInteractionContext, type UpdateEventArgs, type UpdateFileArgs, VERIFY_APP_SCHEMA, type VerifyAppResult, WALLET_PAYMENT_TOOL_NAME, type WalletPaymentOutcome, type WalletPaymentPassenger, type WalletPaymentRequest, type WalletPaymentResult, type XGetMeArgs, type XGetMyPostsArgs, type XProxyCaller, applyPatches, auditDesign, buildAppFileManifest, buildAppSystemPrompt, buildConnectorErrorResult, buildDocumentSystemPrompt, buildFontsUrl, buildSlideSystemPrompt, callNotionMCPTool, connectorMintErrorToToolResult, convertLegacyDeckJson, createAgentresClient, createAppCompleteBridge, createAppGenerationTools, createChartTool, createChatTools, createChoiceTool, createConfirmTool, createConnectorOfferTool, createConnectorTokenGetter, createDisplayTool, createDocumentTools, createDriveTools, createDropboxTools, createFormTool, createGitHubTools, createGmailTools, createGoogleCalendarCreateEventTool, createGoogleCalendarTool, createGoogleCalendarUpdateEventTool, createGoogleDriveCreateFileTool, createGoogleDriveGetContentTool, createGoogleDriveListRecentTool, createGoogleDriveSearchTool, createGoogleDriveUpdateFileTool, createInteractiveTool, createNotionCreateCommentTool, createNotionCreateDatabaseTool, createNotionCreatePagesTool, createNotionDuplicatePageTool, createNotionFetchTool, createNotionGetCommentsTool, createNotionGetTeamsTool, createNotionGetUsersTool, createNotionMovePagesTool, createNotionProxyTools, createNotionSearchTool, createNotionTools, createNotionUpdateDataSourceTool, createNotionUpdatePageTool, createPhoneCallOfferTool, createSelectPaymentWalletTool, createSlackTools, createSlideTools, createWalletPaymentTool, createWeatherTool, createXTools, documentPath, exportAppToHtml, findById, findParentOfId, getFontByName, getId, getMCPEndpoints, getNumberAttr, getStringAttr, insertAfterId, insertChild, installAppCompleteIframeShim, isAnumaTag, isHtmlTag, isKnownFont, isLegacyDeckJson, isPdfTag, migrateDisplayResult, normalizePath, parseDocumentDsl, parseJsx, pdfStyleKeys, pdfTags, removeById, replaceById, serializeJsx, truncateContent, updateAttrs, walk };
+export { ADD_SLIDE_SCHEMA, APP_BUILDER_PROMPT, APP_COMPLETE_CONNECT_ACK_TYPE, APP_COMPLETE_CONNECT_TYPE, APP_COMPLETE_DEFAULT_TIMEOUT_MS, APP_COMPLETE_IFRAME_SHIM_SCRIPT, APP_COMPLETE_REQUEST_TYPE, APP_COMPLETE_RESPONSE_TYPE, APP_COMPLETE_STUB_SCRIPT, APP_FILE_TOOL_NAMES, APP_PREVIEW_BASELINE_CSS, AUDIT_DESIGN_SCHEMA, type AgentresAccount, type AgentresClient, type AgentresClientOptions, AgentresError, type AgentresErrorCode, type AgentresLinkStatus, type AgentresLinkStep, AgentresPathError, type AnchorMatch, type AnumaChild, AnumaJsxError, type AnumaNode, type AppCompleteBridge, type AppCompleteBridgeOptions, type AppFileRecord, type AppFileStorage, type AttrValue, type AuditIssue, type AuditIssueType, type AuditResult, type AuditSeverity, type AuditTokens, type BuildSlideSystemPromptOptions, CHOICE_TOOL_NAME, CONNECTOR_ERROR_MARKER, CREATE_DOCUMENT_SCHEMA, CREATE_FILE_SCHEMA, CRITIQUE_DESIGN_SCHEMA, type CalendarEvent, type ChartDataPoint, type ChartValueFormat, type ChoiceOption, type ConfirmParameter, type ConfirmToolResult, type ConnectorErrorCode, type ConnectorMintError, type ConnectorMintResult, type ConnectorTokenGetterOpts, type ConnectorTokenSource, type CreateAppGenerationToolsOptions, type CreateDocumentToolsOptions, type CreateEventArgs, type CreateFileArgs, type CreateSelectPaymentWalletToolOptions, type CreateSlideToolsOptions, type CreateUIToolsOptions, type CreateWalletPaymentToolOptions, type CreateWeatherToolOptions, DEFAULT_DESIGN_CRITIQUE_RUBRIC, DEFAULT_DOCUMENT_ID, DEFAULT_MAX_CONVERSATIONS, DEFAULT_MAX_DOCUMENT_CONVERSATIONS, DELETE_FILE_SCHEMA, DOCUMENT_BUILDER_PROMPT, DOCUMENT_TOOL_NAMES, type DisplayChartResult, type DisplayConnectorResult, type DisplayPhoneCallOfferResult, type DisplayToolConfig, type DisplayToolMigrations, type DisplayWeatherResult, type DocAttrValue, type DocChild, DocDslError, type DocNode, type DriveFile, type DropboxRequestAccess, type DropboxTokenGetter, type ExportAppOptions, FONT_LIBRARY, FONT_PRESETS, type FileChangeEvent, type FileSnippet, type FontCategory, type FontPreset, type FontSpec, type ForecastDay, type FormField, type FormFieldOption, type FormFieldType, type GetFileContentArgs, type GmailGetMessageArgs, type GmailMessageDetail, type GmailMessageSummary, type GmailRequestAccess, type GmailSearchArgs, type GmailSendConfirmation, type GmailSendMessageArgs, type GmailTokenGetter, type InteractiveToolConfig, type KnownTag, LAYOUT_MODES, LIST_FILES_SCHEMA, type LayoutMode, type LegacyDeckJson, type ListEventsArgs, type ListRecentFilesArgs, MapFileStorage, type NotionCreatePagesArgs, type NotionFetchArgs, type NotionMcpCaller, type NotionMovePagesArgs, type NotionSearchArgs, type NotionUpdatePageArgs, PATCH_DOCUMENT_SCHEMA, PATCH_FILE_SCHEMA, PATCH_SLIDES_SCHEMA, PLAN_DECK_SCHEMA, type PatchFailure, type PatchFailureReason, type PaymentWallet, type PdfTag, READ_DOCUMENT_SCHEMA, READ_FILE_SCHEMA, READ_SLIDES_SCHEMA, RUNTIME_ERROR_OVERLAY_SCRIPT, SELECT_PAYMENT_WALLET_TOOL_NAME, SLIDES_FILE_PATH, SLIDE_CANVAS_HEIGHT, SLIDE_CANVAS_WIDTH, type SearchFilesArgs, type SelectPaymentWalletResult, SiwxChallengeError, SiwxUnsupportedError, type SlackGetChannelHistoryArgs, type SlackGetThreadRepliesArgs, type SlackListChannelsArgs, type SlackListDmsArgs, type SlackListUsersArgs, type SlackPostMessageArgs, type SlackProxyCaller, type SlackSearchMessagesArgs, type SlideToolSet, type SolanaSignMessageFn, THEME_ATTRS, type ThemeAttr, type ToolConfig, type ToolExecutionErrorType, type ToolExecutionResult, type UIInteractionContext, type UpdateEventArgs, type UpdateFileArgs, VERIFY_APP_SCHEMA, type VerifyAppResult, WALLET_PAYMENT_TOOL_NAME, type WalletPaymentOutcome, type WalletPaymentPassenger, type WalletPaymentRequest, type WalletPaymentResult, type XGetMeArgs, type XGetMyPostsArgs, type XProxyCaller, applyPatches, auditDesign, buildAppFileManifest, buildAppSystemPrompt, buildConnectorErrorResult, buildDocumentSystemPrompt, buildFontsUrl, buildSlideSystemPrompt, callNotionMCPTool, connectorMintErrorToToolResult, convertLegacyDeckJson, createAgentresClient, createAppCompleteBridge, createAppGenerationTools, createChartTool, createChatTools, createChoiceTool, createConfirmTool, createConnectorOfferTool, createConnectorTokenGetter, createDisplayTool, createDocumentTools, createDriveTools, createDropboxTools, createFormTool, createGitHubTools, createGmailTools, createGoogleCalendarCreateEventTool, createGoogleCalendarTool, createGoogleCalendarUpdateEventTool, createGoogleDriveCreateFileTool, createGoogleDriveGetContentTool, createGoogleDriveListRecentTool, createGoogleDriveSearchTool, createGoogleDriveUpdateFileTool, createInteractiveTool, createNotionCreateCommentTool, createNotionCreateDatabaseTool, createNotionCreatePagesTool, createNotionDuplicatePageTool, createNotionFetchTool, createNotionGetCommentsTool, createNotionGetTeamsTool, createNotionGetUsersTool, createNotionMovePagesTool, createNotionProxyTools, createNotionSearchTool, createNotionTools, createNotionUpdateDataSourceTool, createNotionUpdatePageTool, createPhoneCallOfferTool, createSelectPaymentWalletTool, createSlackTools, createSlideTools, createWalletPaymentTool, createWeatherTool, createXTools, documentPath, exportAppToHtml, findById, findParentOfId, getFontByName, getId, getMCPEndpoints, getNumberAttr, getStringAttr, insertAfterId, insertChild, installAppCompleteIframeShim, isAnumaTag, isHtmlTag, isKnownFont, isLegacyDeckJson, isPdfTag, migrateDisplayResult, normalizePath, parseDocumentDsl, parseJsx, pdfStyleKeys, pdfTags, removeById, replaceById, serializeJsx, truncateContent, updateAttrs, walk };

package/dist/tools/index.mjs

@@ -2368,6 +2368,16 @@ 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) {
@@ -2384,7 +2394,7 @@ function toNumber(value) {
 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. 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.',
+    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: {
@@ -2418,6 +2428,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"]
@@ -2469,7 +2488,9 @@ function createChartTool(options) {
         data: points,
         dataKeys,
         xAxisKey: args.xAxisKey,
-        colors: args.colors
+        colors: args.colors,
+        valueFormat: toValueFormat(args.valueFormat),
+        currency: toCurrencyCode(args.currency)
       };
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anuma/sdk",
-  "version": "11.0.1",
+  "version": "11.1.0",
   "description": "",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",