@anuma/sdk 11.0.0 → 11.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/react/index.cjs +133 -62
  2. package/dist/react/index.mjs +133 -62
  3. package/dist/tools/index.cjs +36 -2
  4. package/dist/tools/index.mjs +36 -2
  5. package/package.json +1 -1
package/dist/react/index.cjs CHANGED
@@ -36371,6 +36371,12 @@ function cx(...classes) {
36371
36371
  return classes.filter(Boolean).join(" ");
36372
36372
  }
36373
36373
  var THEMES = { light: "", dark: ".dark" };
36374
+ var SAFE_CSS_KEY = /^[\w-]+$/;
36375
+ 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;
36376
+ function isSafeCssColor(value) {
36377
+ if (typeof value !== "string" || !SAFE_CSS_COLOR.test(value)) return false;
36378
+ return typeof CSS === "undefined" || typeof CSS.supports !== "function" || CSS.supports("color", value);
36379
+ }
36374
36380
  var ChartContext = React2.createContext(null);
36375
36381
  function useChart() {
36376
36382
  const context = React2.useContext(ChartContext);
@@ -36380,7 +36386,9 @@ function useChart() {
36380
36386
  return context;
36381
36387
  }
36382
36388
  function ChartStyle({ id: id2, config }) {
36383
- const colorConfig = Object.entries(config).filter(([, cfg]) => cfg.theme || cfg.color);
36389
+ const colorConfig = Object.entries(config).filter(
36390
+ ([key3, cfg]) => SAFE_CSS_KEY.test(key3) && (cfg.theme || cfg.color)
36391
+ );
36384
36392
  if (!colorConfig.length) return null;
36385
36393
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36386
36394
  "style",
@@ -36391,7 +36399,7 @@ function ChartStyle({ id: id2, config }) {
36391
36399
  ${prefix} [data-chart=${id2}] {
36392
36400
  ${colorConfig.map(([key3, itemConfig]) => {
36393
36401
  const color = itemConfig.theme?.[theme] || itemConfig.color;
36394
- return color ? ` --color-${key3}: ${color};` : null;
36402
+ return isSafeCssColor(color) ? ` --color-${key3}: ${color};` : null;
36395
36403
  }).join("\n")}
36396
36404
  }
36397
36405
  `
@@ -36580,12 +36588,37 @@ var DEFAULT_COLORS = [
36580
36588
  "var(--chart-4)",
36581
36589
  "var(--chart-5)"
36582
36590
  ];
36591
+ function paletteColor(index) {
36592
+ return index < DEFAULT_COLORS.length ? DEFAULT_COLORS[index] : `hsl(${Math.round(index * 137.508 % 360)} 65% 55%)`;
36593
+ }
36594
+ var compactNumber = new Intl.NumberFormat(void 0, {
36595
+ notation: "compact",
36596
+ maximumSignificantDigits: 3
36597
+ });
36598
+ function cellText(value) {
36599
+ return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
36600
+ }
36601
+ function formatTick(value) {
36602
+ return typeof value === "number" ? compactNumber.format(value) : String(value);
36603
+ }
36604
+ var VISUALLY_HIDDEN = {
36605
+ position: "absolute",
36606
+ width: 1,
36607
+ height: 1,
36608
+ padding: 0,
36609
+ margin: -1,
36610
+ overflow: "hidden",
36611
+ clip: "rect(0, 0, 0, 0)",
36612
+ whiteSpace: "nowrap",
36613
+ border: 0
36614
+ };
36583
36615
  function buildChartConfig(dataKeys, colors) {
36584
36616
  const config = {};
36585
36617
  dataKeys.forEach((key3, i) => {
36618
+ const custom = colors?.[key3];
36586
36619
  config[key3] = {
36587
36620
  label: key3.charAt(0).toUpperCase() + key3.slice(1),
36588
- color: colors?.[key3] || DEFAULT_COLORS[i % DEFAULT_COLORS.length]
36621
+ color: isSafeCssColor(custom) ? custom : paletteColor(i)
36589
36622
  };
36590
36623
  });
36591
36624
  return config;
@@ -36598,68 +36631,106 @@ function ChartCard({ data }) {
36598
36631
  return () => cancelAnimationFrame(frame);
36599
36632
  }, []);
36600
36633
  if ("error" in data) {
36601
- 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 }) }) });
36634
+ 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." }) }) });
36602
36635
  }
36603
36636
  const { chartType, title, data: chartData, dataKeys, xAxisKey, colors } = data;
36604
36637
  const chartConfig = buildChartConfig(dataKeys, colors);
36605
- 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: [
36606
- title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium mb-3", children: title }),
36607
- 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: [
36608
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36609
- xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36610
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { tickLine: false, axisLine: false }),
36611
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36612
- dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36613
- dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Bar, { dataKey: key3, fill: `var(--color-${key3})`, radius: 4 }, key3))
36614
- ] }) : chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data: chartData, children: [
36615
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36616
- xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36617
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { tickLine: false, axisLine: false }),
36618
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36619
- dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36620
- dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36621
- import_recharts.Line,
36622
- {
36623
- dataKey: key3,
36624
- stroke: `var(--color-${key3})`,
36625
- strokeWidth: 2,
36626
- dot: false
36627
- },
36628
- key3
36629
- ))
36630
- ] }) : chartType === "area" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data: chartData, children: [
36631
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36632
- xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36633
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { tickLine: false, axisLine: false }),
36634
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36635
- dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36636
- dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36637
- import_recharts.Area,
36638
- {
36639
- dataKey: key3,
36640
- fill: `var(--color-${key3})`,
36641
- stroke: `var(--color-${key3})`,
36642
- fillOpacity: 0.3
36643
- },
36644
- key3
36645
- ))
36646
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.PieChart, { children: [
36647
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36648
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36649
- import_recharts.Pie,
36650
- {
36651
- data: chartData,
36652
- dataKey: dataKeys[0],
36653
- nameKey: xAxisKey || "name",
36654
- cx: "50%",
36655
- cy: "50%",
36656
- outerRadius: 80,
36657
- children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Cell, { fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length] }, index))
36658
- }
36659
- ),
36660
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
36661
- ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[250px] w-full" })
36662
- ] }) });
36638
+ const seriesColor = (key3) => chartConfig[key3]?.color;
36639
+ const longestTick = chartData.reduce(
36640
+ (longest, point) => dataKeys.reduce((max, key3) => {
36641
+ const value = point[key3];
36642
+ return typeof value === "number" ? Math.max(max, formatTick(value).length) : max;
36643
+ }, longest),
36644
+ 0
36645
+ );
36646
+ const yAxisProps = {
36647
+ tickLine: false,
36648
+ axisLine: false,
36649
+ tickFormatter: formatTick,
36650
+ width: Math.min(120, Math.max(40, longestTick * 7 + 16))
36651
+ };
36652
+ const labelKey = chartType === "pie" ? xAxisKey || "name" : xAxisKey;
36653
+ const valueKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
36654
+ const tableColumns = labelKey ? [labelKey, ...valueKeys] : valueKeys;
36655
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36656
+ "div",
36657
+ {
36658
+ className: "my-4 max-w-lg",
36659
+ ref: containerRef,
36660
+ role: "figure",
36661
+ "aria-label": [title, `${chartType} chart`].filter(Boolean).join(", "),
36662
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4", children: [
36663
+ title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium mb-3", children: title }),
36664
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { style: VISUALLY_HIDDEN, children: [
36665
+ /* @__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)) }) }),
36666
+ /* @__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)) })
36667
+ ] }),
36668
+ ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36669
+ ChartContainer,
36670
+ {
36671
+ config: chartConfig,
36672
+ className: "aspect-auto h-[250px] w-full",
36673
+ "aria-hidden": "true",
36674
+ children: chartType === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.BarChart, { data: chartData, children: [
36675
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36676
+ xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36677
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
36678
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36679
+ dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36680
+ dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Bar, { dataKey: key3, fill: seriesColor(key3), radius: 4 }, key3))
36681
+ ] }) : chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.LineChart, { data: chartData, children: [
36682
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36683
+ xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36684
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
36685
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36686
+ dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36687
+ dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36688
+ import_recharts.Line,
36689
+ {
36690
+ dataKey: key3,
36691
+ stroke: seriesColor(key3),
36692
+ strokeWidth: 2,
36693
+ dot: false
36694
+ },
36695
+ key3
36696
+ ))
36697
+ ] }) : chartType === "area" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.AreaChart, { data: chartData, children: [
36698
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.CartesianGrid, { vertical: false }),
36699
+ xAxisKey && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
36700
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.YAxis, { ...yAxisProps }),
36701
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36702
+ dataKeys.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, {}) }),
36703
+ dataKeys.map((key3) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36704
+ import_recharts.Area,
36705
+ {
36706
+ dataKey: key3,
36707
+ fill: seriesColor(key3),
36708
+ stroke: seriesColor(key3),
36709
+ fillOpacity: 0.3
36710
+ },
36711
+ key3
36712
+ ))
36713
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_recharts.PieChart, { children: [
36714
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTooltipContent, {}) }),
36715
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
36716
+ import_recharts.Pie,
36717
+ {
36718
+ data: chartData,
36719
+ dataKey: dataKeys[0],
36720
+ nameKey: xAxisKey || "name",
36721
+ cx: "50%",
36722
+ cy: "50%",
36723
+ outerRadius: 80,
36724
+ children: chartData.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts.Cell, { fill: paletteColor(index) }, index))
36725
+ }
36726
+ ),
36727
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
36728
+ ] })
36729
+ }
36730
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[250px] w-full" })
36731
+ ] })
36732
+ }
36733
+ );
36663
36734
  }
36664
36735
 
36665
36736
  // src/react/LoggerProvider.tsx
package/dist/react/index.mjs CHANGED
@@ -34425,6 +34425,12 @@ function cx(...classes) {
34425
34425
  return classes.filter(Boolean).join(" ");
34426
34426
  }
34427
34427
  var THEMES = { light: "", dark: ".dark" };
34428
+ var SAFE_CSS_KEY = /^[\w-]+$/;
34429
+ 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;
34430
+ function isSafeCssColor(value) {
34431
+ if (typeof value !== "string" || !SAFE_CSS_COLOR.test(value)) return false;
34432
+ return typeof CSS === "undefined" || typeof CSS.supports !== "function" || CSS.supports("color", value);
34433
+ }
34428
34434
  var ChartContext = React2.createContext(null);
34429
34435
  function useChart() {
34430
34436
  const context = React2.useContext(ChartContext);
@@ -34434,7 +34440,9 @@ function useChart() {
34434
34440
  return context;
34435
34441
  }
34436
34442
  function ChartStyle({ id: id2, config }) {
34437
- const colorConfig = Object.entries(config).filter(([, cfg]) => cfg.theme || cfg.color);
34443
+ const colorConfig = Object.entries(config).filter(
34444
+ ([key3, cfg]) => SAFE_CSS_KEY.test(key3) && (cfg.theme || cfg.color)
34445
+ );
34438
34446
  if (!colorConfig.length) return null;
34439
34447
  return /* @__PURE__ */ jsx2(
34440
34448
  "style",
@@ -34445,7 +34453,7 @@ function ChartStyle({ id: id2, config }) {
34445
34453
  ${prefix} [data-chart=${id2}] {
34446
34454
  ${colorConfig.map(([key3, itemConfig]) => {
34447
34455
  const color = itemConfig.theme?.[theme] || itemConfig.color;
34448
- return color ? ` --color-${key3}: ${color};` : null;
34456
+ return isSafeCssColor(color) ? ` --color-${key3}: ${color};` : null;
34449
34457
  }).join("\n")}
34450
34458
  }
34451
34459
  `
@@ -34634,12 +34642,37 @@ var DEFAULT_COLORS = [
34634
34642
  "var(--chart-4)",
34635
34643
  "var(--chart-5)"
34636
34644
  ];
34645
+ function paletteColor(index) {
34646
+ return index < DEFAULT_COLORS.length ? DEFAULT_COLORS[index] : `hsl(${Math.round(index * 137.508 % 360)} 65% 55%)`;
34647
+ }
34648
+ var compactNumber = new Intl.NumberFormat(void 0, {
34649
+ notation: "compact",
34650
+ maximumSignificantDigits: 3
34651
+ });
34652
+ function cellText(value) {
34653
+ return typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : "";
34654
+ }
34655
+ function formatTick(value) {
34656
+ return typeof value === "number" ? compactNumber.format(value) : String(value);
34657
+ }
34658
+ var VISUALLY_HIDDEN = {
34659
+ position: "absolute",
34660
+ width: 1,
34661
+ height: 1,
34662
+ padding: 0,
34663
+ margin: -1,
34664
+ overflow: "hidden",
34665
+ clip: "rect(0, 0, 0, 0)",
34666
+ whiteSpace: "nowrap",
34667
+ border: 0
34668
+ };
34637
34669
  function buildChartConfig(dataKeys, colors) {
34638
34670
  const config = {};
34639
34671
  dataKeys.forEach((key3, i) => {
34672
+ const custom = colors?.[key3];
34640
34673
  config[key3] = {
34641
34674
  label: key3.charAt(0).toUpperCase() + key3.slice(1),
34642
- color: colors?.[key3] || DEFAULT_COLORS[i % DEFAULT_COLORS.length]
34675
+ color: isSafeCssColor(custom) ? custom : paletteColor(i)
34643
34676
  };
34644
34677
  });
34645
34678
  return config;
@@ -34652,68 +34685,106 @@ function ChartCard({ data }) {
34652
34685
  return () => cancelAnimationFrame(frame);
34653
34686
  }, []);
34654
34687
  if ("error" in data) {
34655
- return /* @__PURE__ */ jsx2("div", { className: "my-4 max-w-lg", children: /* @__PURE__ */ jsx2("div", { className: "rounded-xl bg-sidebar dark:bg-card px-4 py-3", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: data.error }) }) });
34688
+ 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." }) }) });
34656
34689
  }
34657
34690
  const { chartType, title, data: chartData, dataKeys, xAxisKey, colors } = data;
34658
34691
  const chartConfig = buildChartConfig(dataKeys, colors);
34659
- return /* @__PURE__ */ jsx2("div", { className: "my-4 max-w-lg", ref: containerRef, children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4", children: [
34660
- title && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium mb-3", children: title }),
34661
- ready ? /* @__PURE__ */ jsx2(ChartContainer, { config: chartConfig, className: "aspect-auto h-[250px] w-full", children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
34662
- /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34663
- xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34664
- /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
34665
- /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34666
- dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34667
- dataKeys.map((key3) => /* @__PURE__ */ jsx2(Bar, { dataKey: key3, fill: `var(--color-${key3})`, radius: 4 }, key3))
34668
- ] }) : chartType === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: chartData, children: [
34669
- /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34670
- xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34671
- /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
34672
- /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34673
- dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34674
- dataKeys.map((key3) => /* @__PURE__ */ jsx2(
34675
- Line2,
34676
- {
34677
- dataKey: key3,
34678
- stroke: `var(--color-${key3})`,
34679
- strokeWidth: 2,
34680
- dot: false
34681
- },
34682
- key3
34683
- ))
34684
- ] }) : chartType === "area" ? /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
34685
- /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34686
- xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34687
- /* @__PURE__ */ jsx2(YAxis, { tickLine: false, axisLine: false }),
34688
- /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34689
- dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34690
- dataKeys.map((key3) => /* @__PURE__ */ jsx2(
34691
- Area,
34692
- {
34693
- dataKey: key3,
34694
- fill: `var(--color-${key3})`,
34695
- stroke: `var(--color-${key3})`,
34696
- fillOpacity: 0.3
34697
- },
34698
- key3
34699
- ))
34700
- ] }) : /* @__PURE__ */ jsxs(PieChart, { children: [
34701
- /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34702
- /* @__PURE__ */ jsx2(
34703
- Pie,
34704
- {
34705
- data: chartData,
34706
- dataKey: dataKeys[0],
34707
- nameKey: xAxisKey || "name",
34708
- cx: "50%",
34709
- cy: "50%",
34710
- outerRadius: 80,
34711
- children: chartData.map((_, index) => /* @__PURE__ */ jsx2(Cell, { fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length] }, index))
34712
- }
34713
- ),
34714
- /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
34715
- ] }) }) : /* @__PURE__ */ jsx2("div", { className: "h-[250px] w-full" })
34716
- ] }) });
34692
+ const seriesColor = (key3) => chartConfig[key3]?.color;
34693
+ const longestTick = chartData.reduce(
34694
+ (longest, point) => dataKeys.reduce((max, key3) => {
34695
+ const value = point[key3];
34696
+ return typeof value === "number" ? Math.max(max, formatTick(value).length) : max;
34697
+ }, longest),
34698
+ 0
34699
+ );
34700
+ const yAxisProps = {
34701
+ tickLine: false,
34702
+ axisLine: false,
34703
+ tickFormatter: formatTick,
34704
+ width: Math.min(120, Math.max(40, longestTick * 7 + 16))
34705
+ };
34706
+ const labelKey = chartType === "pie" ? xAxisKey || "name" : xAxisKey;
34707
+ const valueKeys = chartType === "pie" ? dataKeys.slice(0, 1) : dataKeys;
34708
+ const tableColumns = labelKey ? [labelKey, ...valueKeys] : valueKeys;
34709
+ return /* @__PURE__ */ jsx2(
34710
+ "div",
34711
+ {
34712
+ className: "my-4 max-w-lg",
34713
+ ref: containerRef,
34714
+ role: "figure",
34715
+ "aria-label": [title, `${chartType} chart`].filter(Boolean).join(", "),
34716
+ children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl bg-sidebar dark:bg-card px-5 py-4", children: [
34717
+ title && /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium mb-3", children: title }),
34718
+ /* @__PURE__ */ jsxs("table", { style: VISUALLY_HIDDEN, children: [
34719
+ /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: tableColumns.map((column) => /* @__PURE__ */ jsx2("th", { scope: "col", children: column }, column)) }) }),
34720
+ /* @__PURE__ */ jsx2("tbody", { children: chartData.map((point, row) => /* @__PURE__ */ jsx2("tr", { children: tableColumns.map((column) => /* @__PURE__ */ jsx2("td", { children: cellText(point[column]) }, column)) }, row)) })
34721
+ ] }),
34722
+ ready ? /* @__PURE__ */ jsx2(
34723
+ ChartContainer,
34724
+ {
34725
+ config: chartConfig,
34726
+ className: "aspect-auto h-[250px] w-full",
34727
+ "aria-hidden": "true",
34728
+ children: chartType === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
34729
+ /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34730
+ xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34731
+ /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
34732
+ /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34733
+ dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34734
+ dataKeys.map((key3) => /* @__PURE__ */ jsx2(Bar, { dataKey: key3, fill: seriesColor(key3), radius: 4 }, key3))
34735
+ ] }) : chartType === "line" ? /* @__PURE__ */ jsxs(LineChart, { data: chartData, children: [
34736
+ /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34737
+ xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34738
+ /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
34739
+ /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34740
+ dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34741
+ dataKeys.map((key3) => /* @__PURE__ */ jsx2(
34742
+ Line2,
34743
+ {
34744
+ dataKey: key3,
34745
+ stroke: seriesColor(key3),
34746
+ strokeWidth: 2,
34747
+ dot: false
34748
+ },
34749
+ key3
34750
+ ))
34751
+ ] }) : chartType === "area" ? /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
34752
+ /* @__PURE__ */ jsx2(CartesianGrid, { vertical: false }),
34753
+ xAxisKey && /* @__PURE__ */ jsx2(XAxis, { dataKey: xAxisKey, tickLine: false, axisLine: false, tickMargin: 8 }),
34754
+ /* @__PURE__ */ jsx2(YAxis, { ...yAxisProps }),
34755
+ /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34756
+ dataKeys.length > 1 && /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }),
34757
+ dataKeys.map((key3) => /* @__PURE__ */ jsx2(
34758
+ Area,
34759
+ {
34760
+ dataKey: key3,
34761
+ fill: seriesColor(key3),
34762
+ stroke: seriesColor(key3),
34763
+ fillOpacity: 0.3
34764
+ },
34765
+ key3
34766
+ ))
34767
+ ] }) : /* @__PURE__ */ jsxs(PieChart, { children: [
34768
+ /* @__PURE__ */ jsx2(ChartTooltip, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, {}) }),
34769
+ /* @__PURE__ */ jsx2(
34770
+ Pie,
34771
+ {
34772
+ data: chartData,
34773
+ dataKey: dataKeys[0],
34774
+ nameKey: xAxisKey || "name",
34775
+ cx: "50%",
34776
+ cy: "50%",
34777
+ outerRadius: 80,
34778
+ children: chartData.map((_, index) => /* @__PURE__ */ jsx2(Cell, { fill: paletteColor(index) }, index))
34779
+ }
34780
+ ),
34781
+ /* @__PURE__ */ jsx2(ChartLegend, { content: /* @__PURE__ */ jsx2(ChartLegendContent, { nameKey: xAxisKey || "name" }) })
34782
+ ] })
34783
+ }
34784
+ ) : /* @__PURE__ */ jsx2("div", { className: "h-[250px] w-full" })
34785
+ ] })
34786
+ }
34787
+ );
34717
34788
  }
34718
34789
 
34719
34790
  // src/react/LoggerProvider.tsx
package/dist/tools/index.cjs CHANGED
@@ -2529,10 +2529,23 @@ function createDisplayTool(options, config) {
2529
2529
  }
2530
2530
 
2531
2531
  // src/tools/chart.ts
2532
+ var NUMERIC_STRING = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?$/i;
2533
+ var THOUSANDS_GROUPED = /^[-+]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/;
2534
+ function toNumber(value) {
2535
+ if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
2536
+ if (typeof value !== "string") return void 0;
2537
+ let cleaned = value.replace(/[\s$€£¥%]/g, "");
2538
+ if (cleaned.includes(",")) {
2539
+ if (!THOUSANDS_GROUPED.test(cleaned)) return void 0;
2540
+ cleaned = cleaned.replace(/,/g, "");
2541
+ }
2542
+ const number = NUMERIC_STRING.test(cleaned) ? Number(cleaned) : void 0;
2543
+ return number !== void 0 && Number.isFinite(number) ? number : void 0;
2544
+ }
2532
2545
  function createChartTool(options) {
2533
2546
  return createDisplayTool(options, {
2534
2547
  name: "display_chart",
2535
- 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.',
2548
+ 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.',
2536
2549
  parameters: {
2537
2550
  type: "object",
2538
2551
  properties: {
@@ -2590,10 +2603,31 @@ function createChartTool(options) {
2590
2603
  error: 'The "dataKeys" array is required and must list the numeric keys to chart, e.g. ["revenue"].'
2591
2604
  };
2592
2605
  }
2606
+ const points = data.map((point) => ({ ...point }));
2607
+ for (const key of dataKeys) {
2608
+ let numericCount = 0;
2609
+ for (const [index, point] of points.entries()) {
2610
+ const raw = point[key];
2611
+ if (raw === void 0 || raw === null) continue;
2612
+ const value = toNumber(raw);
2613
+ if (value === void 0) {
2614
+ return {
2615
+ error: `Series "${key}" has a non-numeric value at data[${index}]: ${JSON.stringify(raw)}. Values for dataKeys must be plain numbers, e.g. 65000 rather than "$65,000 USD".`
2616
+ };
2617
+ }
2618
+ point[key] = value;
2619
+ numericCount++;
2620
+ }
2621
+ if (numericCount === 0) {
2622
+ return {
2623
+ error: `Series "${key}" has no numeric values. Every entry in "dataKeys" must name a numeric key present in the "data" objects.`
2624
+ };
2625
+ }
2626
+ }
2593
2627
  return {
2594
2628
  chartType,
2595
2629
  title: args.title,
2596
- data,
2630
+ data: points,
2597
2631
  dataKeys,
2598
2632
  xAxisKey: args.xAxisKey,
2599
2633
  colors: args.colors
package/dist/tools/index.mjs CHANGED
@@ -2368,10 +2368,23 @@ function createDisplayTool(options, config) {
2368
2368
  }
2369
2369
 
2370
2370
  // src/tools/chart.ts
2371
+ var NUMERIC_STRING = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?$/i;
2372
+ var THOUSANDS_GROUPED = /^[-+]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/;
2373
+ function toNumber(value) {
2374
+ if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
2375
+ if (typeof value !== "string") return void 0;
2376
+ let cleaned = value.replace(/[\s$€£¥%]/g, "");
2377
+ if (cleaned.includes(",")) {
2378
+ if (!THOUSANDS_GROUPED.test(cleaned)) return void 0;
2379
+ cleaned = cleaned.replace(/,/g, "");
2380
+ }
2381
+ const number = NUMERIC_STRING.test(cleaned) ? Number(cleaned) : void 0;
2382
+ return number !== void 0 && Number.isFinite(number) ? number : void 0;
2383
+ }
2371
2384
  function createChartTool(options) {
2372
2385
  return createDisplayTool(options, {
2373
2386
  name: "display_chart",
2374
- 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.',
2387
+ 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.',
2375
2388
  parameters: {
2376
2389
  type: "object",
2377
2390
  properties: {
@@ -2429,10 +2442,31 @@ function createChartTool(options) {
2429
2442
  error: 'The "dataKeys" array is required and must list the numeric keys to chart, e.g. ["revenue"].'
2430
2443
  };
2431
2444
  }
2445
+ const points = data.map((point) => ({ ...point }));
2446
+ for (const key of dataKeys) {
2447
+ let numericCount = 0;
2448
+ for (const [index, point] of points.entries()) {
2449
+ const raw = point[key];
2450
+ if (raw === void 0 || raw === null) continue;
2451
+ const value = toNumber(raw);
2452
+ if (value === void 0) {
2453
+ return {
2454
+ error: `Series "${key}" has a non-numeric value at data[${index}]: ${JSON.stringify(raw)}. Values for dataKeys must be plain numbers, e.g. 65000 rather than "$65,000 USD".`
2455
+ };
2456
+ }
2457
+ point[key] = value;
2458
+ numericCount++;
2459
+ }
2460
+ if (numericCount === 0) {
2461
+ return {
2462
+ error: `Series "${key}" has no numeric values. Every entry in "dataKeys" must name a numeric key present in the "data" objects.`
2463
+ };
2464
+ }
2465
+ }
2432
2466
  return {
2433
2467
  chartType,
2434
2468
  title: args.title,
2435
- data,
2469
+ data: points,
2436
2470
  dataKeys,
2437
2471
  xAxisKey: args.xAxisKey,
2438
2472
  colors: args.colors
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anuma/sdk",
3
- "version": "11.0.0",
3
+ "version": "11.0.1",
4
4
  "description": "",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.mjs",