@anuma/sdk 11.2.0 → 11.3.0

package/dist/react/index.cjs

@@ -36474,6 +36474,159 @@ function renderAnumaJsx(jsx3) {
 var React2 = __toESM(require("react"));
 var RechartsPrimitive = __toESM(require("recharts"));
 var import_recharts = require("recharts");
+
+// src/tools/chartModel.ts
+var DOT_LIMIT = 12;
+var MAX_TICKS = 8;
+var MINUS = "\u2212";
+function chartCellText(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
+}
+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 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
+  };
+}
+function lastValueIndex(points, key3) {
+  for (let index = points.length - 1; index >= 0; index--) {
+    if (typeof points[index][key3] === "number") return index;
+  }
+  return -1;
+}
+function chartSeriesLabel(key3) {
+  return key3.charAt(0).toUpperCase() + key3.slice(1);
+}
+function buildChartModel(spec) {
+  const { chartType, title, data, dataKeys, xAxisKey, valueFormat, currency } = spec;
+  const isTrendChart = chartType === "line" || chartType === "area";
+  const plottedKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
+  const values = seriesValues(data, 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 seriesLabels = Object.fromEntries(dataKeys.map((key3) => [key3, chartSeriesLabel(key3)]));
+  const trendBase = isTrendChart && dataKeys.length === 1 ? buildTrend(values, valueFormat, formatters) : void 0;
+  const trendRows = trendBase ? data.filter((point) => typeof point[dataKeys[0]] === "number") : [];
+  const range = trendBase && xAxisKey ? [trendRows[0], trendRows[trendRows.length - 1]].map((point) => chartCellText(point[xAxisKey])).filter(Boolean).join(" \u2013 ") || void 0 : void 0;
+  const trend = trendBase ? { ...trendBase, range } : void 0;
+  const tickSamples = [...yDomain ?? [], ...values].map((value) => formatters.tick(value));
+  const showDots = data.length <= DOT_LIMIT;
+  return {
+    isTrendChart,
+    plottedKeys,
+    seriesLabels,
+    labelKey: chartType === "pie" ? xAxisKey || "name" : xAxisKey,
+    values,
+    yTicks,
+    yDomain,
+    formatters,
+    trend,
+    title: title ?? (trend ? seriesLabels[dataKeys[0]] : void 0),
+    showDots,
+    endIndexes: Object.fromEntries(plottedKeys.map((key3) => [key3, lastValueIndex(data, key3)])),
+    curve: showDots ? "linear" : "monotone",
+    hasNegative: values.some((value) => value < 0),
+    longestTickLength: tickSamples.reduce((max, label) => Math.max(max, label.length), 0),
+    total: values.reduce((sum, value) => sum + value, 0)
+  };
+}
+
+// src/react/chart.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function cx(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -36670,7 +36823,7 @@ function ChartLegendContent({
                   style: { backgroundColor: item.color }
                 }
               ),
-              itemConfig?.label ?? cellText(item.value)
+              itemConfig?.label ?? chartCellText(item.value)
             ]
           },
           String(item.value)
@@ -36698,15 +36851,9 @@ var DEFAULT_COLORS = [
   "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,
@@ -36718,107 +36865,17 @@ 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) {
+function buildChartConfig(dataKeys, labels, colors) {
   const config = {};
   dataKeys.forEach((key3, i) => {
     const custom = colors?.[key3];
     config[key3] = {
-      label: key3.charAt(0).toUpperCase() + key3.slice(1),
+      label: labels[key3],
       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(() => {
@@ -36831,33 +36888,13 @@ function usePrefersReducedMotion() {
   }, []);
   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
-}) {
+function ChartHeader({ title, trend }) {
   if (!trend) {
     return title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-3 text-sm font-medium", children: title }) : null;
   }
@@ -36869,7 +36906,7 @@ function ChartHeader({
         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 })
+      trend.range && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: trend.range })
     ] })
   ] });
 }
@@ -36885,34 +36922,13 @@ 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,
-    valueFormat,
-    currency
-  } = data;
-  const chartConfig = buildChartConfig(dataKeys, colors);
+  const { chartType, title, data: chartData, dataKeys, xAxisKey, colors } = data;
+  const model = buildChartModel(data);
+  const { plottedKeys, yTicks, yDomain, formatters, trend, isTrendChart } = model;
+  const chartConfig = buildChartConfig(dataKeys, model.seriesLabels, colors);
   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 { showDots, curve, hasNegative, endIndexes } = model;
   const margin = { top: 8, right: 8, bottom: 0, left: 0 };
   const xAxis = xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_recharts.XAxis,
@@ -36937,7 +36953,7 @@ function ChartCard({ data }) {
       tickFormatter: formatters.tick,
       domain: yDomain,
       allowDataOverflow: false,
-      width: Math.min(120, Math.max(36, longestTick * 7 + 12))
+      width: Math.min(120, Math.max(36, model.longestTickLength * 7 + 12))
     }
   );
   const tooltip = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -36960,9 +36976,8 @@ function ChartCard({ data }) {
     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;
+  const lineDot = (key3) => showDots ? marker(key3, 4) : (props) => props.index === endIndexes[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 tableColumns = model.labelKey ? [model.labelKey, ...plottedKeys] : plottedKeys;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -36971,10 +36986,10 @@ function ChartCard({ data }) {
       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.jsx)(ChartHeader, { title: model.title, trend }),
         /* @__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)) })
+          /* @__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: chartCellText(point[column]) }, column)) }, row)) })
         ] }),
         ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           ChartContainer,
@@ -37090,7 +37105,7 @@ function ChartCard({ data }) {
                                 x: box.cx,
                                 y: box.cy - 6,
                                 className: "fill-foreground text-lg font-semibold",
-                                children: formatters.value(values.reduce((sum, value) => sum + value, 0))
+                                children: formatters.value(model.total)
                               }
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tspan", { x: box.cx, y: box.cy + 14, className: "fill-muted-foreground", children: "Total" })