@anuma/sdk 11.0.0 → 11.1.0

package/dist/react/index.cjs

@@ -36371,6 +36371,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);
@@ -36380,7 +36386,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__ */ (0, import_jsx_runtime2.jsx)(
     "style",
@@ -36391,7 +36399,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")}
 }
 `
@@ -36440,7 +36448,8 @@ function ChartTooltipContent({
   formatter,
   color,
   nameKey,
-  labelKey
+  labelKey,
+  valueFormatter
 }) {
   const { config } = useChart();
   const tooltipLabel = React2.useMemo(() => {
@@ -36507,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() })
                     ]
                   }
                 )
@@ -36553,7 +36562,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label
+              itemConfig?.label ?? cellText(item.value)
             ]
           },
           String(item.value)
@@ -36580,86 +36589,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__ */ (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);
   }, []);
   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: data.error }) }) });
+    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);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "my-4 max-w-lg", ref: containerRef, 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 }),
-    ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartContainer, { config: chartConfig, className: "aspect-auto h-[250px] w-full", children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data: chartData, 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, { tickLine: false, axisLine: false }),
-      /* @__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: `var(--color-${key3})`, radius: 4 }, key3))
-    ] }) : chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data: chartData, 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, { tickLine: false, axisLine: false }),
-      /* @__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.Line,
-        {
-          dataKey: key3,
-          stroke: `var(--color-${key3})`,
-          strokeWidth: 2,
-          dot: false
-        },
-        key3
-      ))
-    ] }) : chartType === "area" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data: chartData, 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, { tickLine: false, axisLine: false }),
-      /* @__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.Area,
-        {
-          dataKey: key3,
-          fill: `var(--color-${key3})`,
-          stroke: `var(--color-${key3})`,
-          fillOpacity: 0.3
-        },
-        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)(
-        import_recharts.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__ */ (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 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,
         {
-          data: chartData,
-          dataKey: dataKeys[0],
-          nameKey: xAxisKey || "name",
-          cx: "50%",
-          cy: "50%",
-          outerRadius: 80,
-          children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Cell, { fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length] }, index))
+          indicator: chartType === "bar" ? "dot" : "line",
+          valueFormatter: formatters.value
         }
-      ),
-      /* @__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" })
-  ] }) });
+      )
+    }
+  );
+  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 tableColumns = labelKey ? [labelKey, ...plottedKeys] : plottedKeys;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "my-4 max-w-lg",
+      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 [--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)) })
+        ] }),
+        ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          ChartContainer,
+          {
+            config: chartConfig,
+            className: "aspect-auto h-[220px] w-full",
+            "aria-hidden": "true",
+            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 }),
+              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 }),
+              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,
+                  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, 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 }),
+              xAxis,
+              yAxis,
+              tooltip,
+              legend,
+              dataKeys.map((key3, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_recharts.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__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.PieChart, { margin, children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_recharts.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__ */ (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-[220px] w-full" })
+      ] })
+    }
+  );
 }
 
 // src/react/LoggerProvider.tsx

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"> & {