@shapesos/clay 0.11.0 → 0.12.0

package/dist/chart.cjs

@@ -0,0 +1,594 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/chart/index.ts
+var chart_exports = {};
+__export(chart_exports, {
+  BarChart: () => BarChart,
+  CHART_AXIS_PROPS: () => CHART_AXIS_PROPS,
+  CHART_GRID_PROPS: () => CHART_GRID_PROPS,
+  CHART_PALETTE: () => CHART_PALETTE,
+  ChartContainer: () => ChartContainer,
+  ChartLegendContent: () => ChartLegendContent,
+  ChartTooltipContent: () => ChartTooltipContent,
+  LineChart: () => LineChart,
+  PieChart: () => PieChart,
+  coerceNumericColumns: () => coerceNumericColumns,
+  colorForSeriesIndex: () => colorForSeriesIndex
+});
+module.exports = __toCommonJS(chart_exports);
+
+// src/components/chart/bar-chart/bar-chart.tsx
+var import_react = require("react");
+var import_recharts2 = require("recharts");
+
+// src/components/chart/chart-container.tsx
+var import_recharts = require("recharts");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/chart/chart-container.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ChartContainer({
+  children,
+  height = 320,
+  width = "100%",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("text-xs text-foreground", className), style: { width, height, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children }) });
+}
+
+// src/components/chart/chart-legend-content.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ChartLegendContent({ payload, className, iconType = "square" }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "ul",
+    {
+      className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs text-brown-80", className),
+      children: payload.map((entry, i) => {
+        const swatchColor = typeof entry.color === "string" ? entry.color : "transparent";
+        const label = entry.value !== void 0 ? String(entry.value) : "";
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-center gap-1.5", children: [
+          iconType === "square" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatchColor } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-block h-[3px] w-4 shrink-0 rounded-full", style: { background: swatchColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: label })
+        ] }, `${label}-${i}`);
+      })
+    }
+  );
+}
+
+// src/components/chart/chart-tooltip-content.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  showLabel = true,
+  formatValue
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-brown-40 bg-brown-10 px-3 py-2 text-xs shadow-sm",
+        "min-w-32 text-foreground",
+        className
+      ),
+      children: [
+        showLabel && label !== void 0 && label !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-1.5 font-medium text-brown-90", children: String(label) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "space-y-1", children: payload.map((entry, i) => {
+          const name = entry.name !== void 0 ? String(entry.name) : "";
+          const rawValue = entry.value;
+          const display = formatValue ? formatValue(rawValue, name) : rawValue === void 0 ? "" : String(rawValue);
+          const swatch = typeof entry.color === "string" ? entry.color : "transparent";
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block h-2.5 w-2.5 shrink-0 rounded-sm", style: { background: swatch } }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-brown-70", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-auto font-semibold tabular-nums text-brown-90", children: display })
+          ] }, `${name}-${i}`);
+        }) })
+      ]
+    }
+  );
+}
+
+// src/tokens/colors.ts
+var colors = {
+  // White
+  white: "#FFFFFF",
+  "white-alpha-85": "rgba(255, 255, 255, 0.85)",
+  "white-alpha-40": "rgba(255, 255, 255, 0.40)",
+  // Brown
+  "brown-10": "#FAF9F8",
+  "brown-20": "#F5F3F0",
+  "brown-30": "#EEEBE5",
+  "brown-40": "#E6E2DA",
+  "brown-50": "#CFCBC4",
+  "brown-60": "#A19E99",
+  "brown-70": "#73716D",
+  "brown-80": "#5C5A57",
+  "brown-90": "#2E2D2C",
+  "brown-100": "#171716",
+  "brown-alpha-12": "rgba(23, 23, 22, 0.12)",
+  "brown-alpha-20": "rgba(23, 23, 22, 0.20)",
+  "brown-alpha-55": "rgba(23, 23, 22, 0.55)",
+  "brown-alpha-70": "rgba(23, 23, 22, 0.70)",
+  "brown-alpha-80": "rgba(23, 23, 22, 0.80)",
+  "brown-alpha-90": "rgba(23, 23, 22, 0.90)",
+  // Fuchsia
+  "fuchsia-50": "#FAF5FF",
+  "fuchsia-300": "#F0ABFC",
+  "fuchsia-500": "#D946EF",
+  "fuchsia-600": "#C026D3",
+  "fuchsia-800": "#86198F",
+  // Pink
+  "pink-50": "#FDF2F8",
+  "pink-400": "#F472B6",
+  "pink-600": "#DB2777",
+  "pink-800": "#9D174D",
+  // Violet
+  "violet-50": "#F5F3FF",
+  "violet-400": "#A78BFA",
+  "violet-600": "#7C3AED",
+  "violet-800": "#5B21B6",
+  // Indigo
+  "indigo-50": "#EEF2FF",
+  "indigo-400": "#818CF8",
+  "indigo-500": "#6366F1",
+  "indigo-600": "#4F46E5",
+  "indigo-800": "#3730A3",
+  // Cyan
+  "cyan-50": "#E7FEFF",
+  "cyan-300": "#67E8F9",
+  "cyan-600": "#0891B2",
+  "cyan-900": "#164E63",
+  // Teal
+  "teal-50": "#EBFDF9",
+  "teal-300": "#5EEAD4",
+  "teal-600": "#0D9488",
+  // Rose
+  "rose-400": "#FB7185",
+  // Purple
+  "purple-400": "#C084FC",
+  // Blue
+  "blue-50": "#EFF6FF",
+  "blue-100": "#DBEAFE",
+  "blue-300": "#93C5FD",
+  "blue-400": "#60A5FA",
+  "blue-600": "#2563EB",
+  "blue-800": "#1E40AF",
+  // Sky
+  "sky-300": "#7DD3FC",
+  // Green
+  "green-50": "#ECF9F0",
+  "green-100": "#D4F1D9",
+  "green-400": "#3DC269",
+  "green-700": "#277C43",
+  "green-800": "#1C5930",
+  // Orange
+  "orange-50": "#FFF7ED",
+  "orange-100": "#FFEDD5",
+  "orange-200": "#FED7AA",
+  "orange-500": "#F97316",
+  "orange-600": "#EA580C",
+  // Red
+  "red-50": "#FEF2F2",
+  "red-100": "#FEE2E2",
+  "red-200": "#FECACA",
+  "red-400": "#F7776C",
+  "red-500": "#EF4444",
+  "red-600": "#DC2626"
+};
+
+// src/components/chart/chart-palette.ts
+var CHART_PALETTE = [
+  colors["blue-600"],
+  //   #2563EB  — primary
+  colors["blue-400"],
+  //   #60A5FA  — mid
+  colors["blue-300"],
+  //   #93C5FD  — light
+  colors["blue-100"],
+  //   #DBEAFE  — very light
+  colors["indigo-400"],
+  // #818CF8
+  colors["indigo-500"],
+  // #6366F1
+  colors["indigo-600"],
+  // #4F46E5
+  colors["indigo-800"],
+  // #3730A3
+  colors["blue-800"]
+  //   #1E40AF  — deepest
+];
+var OTHERS_SLICE_COLOR = colors["brown-60"];
+var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
+function isOthersCategory(value, labels) {
+  if (value === null || value === void 0) return false;
+  if (labels.length === 0) return false;
+  const normalized = String(value).trim().toLowerCase();
+  for (const label of labels) {
+    if (normalized === label.toLowerCase()) return true;
+  }
+  return false;
+}
+function colorForSeriesIndex(index, palette = CHART_PALETTE) {
+  return palette[index % palette.length] ?? CHART_PALETTE[0];
+}
+
+// src/components/chart/chart-styles.ts
+var GRID_STROKE = colors["brown-40"];
+var AXIS_STROKE = colors["brown-50"];
+var AXIS_TICK_STYLE = {
+  fill: colors["brown-70"],
+  fontSize: 12,
+  fontWeight: 500
+};
+var CHART_VALUE_LABEL_STYLE = {
+  fill: colors["brown-70"],
+  fontSize: 12,
+  fontWeight: 500
+};
+var BAR_TOOLTIP_CURSOR_FILL = colors["brown-alpha-12"];
+var LINE_ACTIVE_DOT_STROKE = colors["brown-10"];
+var CHART_MARGIN = { top: 8, right: 16, left: 0, bottom: 4 };
+var PIE_CHART_MARGIN = { top: 0, right: 24, left: 24, bottom: 4 };
+var CHART_AXIS_PROPS = {
+  stroke: AXIS_STROKE,
+  tick: AXIS_TICK_STYLE,
+  tickLine: false,
+  axisLine: false
+};
+var CHART_GRID_PROPS = {
+  stroke: GRID_STROKE,
+  strokeDasharray: "3 3",
+  vertical: false
+};
+
+// src/components/chart/chart-tick-utils.ts
+function maxTickCharsByCategoryCount(n) {
+  if (n <= 5) return 24;
+  if (n <= 8) return 14;
+  if (n <= 12) return 10;
+  if (n <= 16) return 7;
+  return 5;
+}
+function truncateLabel(value, maxChars) {
+  const s = String(value ?? "");
+  if (s.length <= maxChars) return s;
+  return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
+}
+function evenlyDistributedVisibleIndices(n, target) {
+  if (n <= target) {
+    return new Set(Array.from({ length: n }, (_, i) => i));
+  }
+  const set = /* @__PURE__ */ new Set();
+  const step = (n - 1) / (target - 1);
+  for (let i = 0; i < target; i++) {
+    set.add(Math.round(i * step));
+  }
+  return set;
+}
+function defaultBarTickFormatter(categoryCount) {
+  const max = maxTickCharsByCategoryCount(categoryCount);
+  return (value) => truncateLabel(value, max);
+}
+function defaultLineChartTickFormatter(categoryCount, visibleIndices) {
+  const max = maxTickCharsByCategoryCount(visibleIndices.size || categoryCount);
+  return (value, index) => {
+    if (!visibleIndices.has(index)) return "";
+    return truncateLabel(value, max);
+  };
+}
+
+// src/components/chart/coerce-numeric.ts
+function coerceNumericColumns(rows, numericKeys) {
+  return rows.map((row) => {
+    const out = { ...row };
+    for (const k of numericKeys) {
+      const v = out[k];
+      if (v == null) continue;
+      const n = Number(v);
+      out[k] = Number.isFinite(n) ? n : NaN;
+    }
+    return out;
+  });
+}
+
+// src/components/chart/bar-chart/bar-chart.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function BarChart({
+  data,
+  xKey,
+  series,
+  stacked = false,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showTooltip = true,
+  showLegend,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showValueLabels,
+  xAxisInterval = 0,
+  xAxisAngle,
+  xAxisTickFormatter
+}) {
+  const seriesKeys = (0, import_react.useMemo)(() => series.map((s) => s.key), [series]);
+  const coercedData = (0, import_react.useMemo)(
+    () => coerceNumericColumns(data, seriesKeys),
+    [data, seriesKeys]
+  );
+  const resolvedShowLegend = showLegend ?? series.length > 1;
+  const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
+  const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
+  const resolvedTickFormatter = (0, import_react.useMemo)(
+    () => xAxisTickFormatter ?? defaultBarTickFormatter(coercedData.length),
+    [xAxisTickFormatter, coercedData.length]
+  );
+  const angledLabelPad = resolvedAngle === 0 ? 0 : Math.min(Math.abs(resolvedAngle) * 0.7, 40);
+  const chartMargin = { ...CHART_MARGIN, bottom: CHART_MARGIN.bottom + angledLabelPad };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_recharts2.BarChart, { data: coercedData, margin: chartMargin, barCategoryGap: "22%", children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
+    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_recharts2.XAxis,
+      {
+        dataKey: xKey,
+        ...CHART_AXIS_PROPS,
+        interval: xAxisInterval,
+        angle: resolvedAngle,
+        textAnchor: resolvedAngle !== 0 ? "end" : "middle",
+        tickMargin: resolvedAngle === 0 ? 8 : 12,
+        height: resolvedAngle !== 0 ? 60 : void 0,
+        tickFormatter: resolvedTickFormatter
+      }
+    ) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartTooltipContent, {}) }) : null,
+    resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_recharts2.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartLegendContent, { iconType: "square" })
+      }
+    ) : null,
+    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_recharts2.Bar,
+      {
+        dataKey: s.key,
+        name: s.label,
+        fill: colorForSeriesIndex(i, palette),
+        stackId: stacked ? "default" : s.key,
+        radius: barRadius(stacked, i, series.length),
+        children: resolvedShowValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+      },
+      s.key
+    ))
+  ] }) });
+}
+function barRadius(stacked, seriesIndex, seriesCount) {
+  if (!stacked) return [6, 6, 0, 0];
+  const isTopSegment = seriesIndex === seriesCount - 1;
+  return isTopSegment ? [6, 6, 0, 0] : [0, 0, 0, 0];
+}
+
+// src/components/chart/line-chart/line-chart.tsx
+var import_react2 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TARGET_VISIBLE_LABELS = 5;
+function LineChart({
+  data,
+  xKey,
+  series,
+  smooth = true,
+  showDots = true,
+  strokeWidth = 2,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showTooltip = true,
+  showLegend,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showValueLabels = false,
+  xAxisInterval = 0,
+  xAxisAngle = 0,
+  xAxisTickFormatter
+}) {
+  const seriesKeys = (0, import_react2.useMemo)(() => series.map((s) => s.key), [series]);
+  const coercedData = (0, import_react2.useMemo)(
+    () => coerceNumericColumns(data, seriesKeys),
+    [data, seriesKeys]
+  );
+  const lineType = smooth ? "monotone" : "linear";
+  const resolvedShowLegend = showLegend ?? series.length > 1;
+  const resolvedTickFormatter = (0, import_react2.useMemo)(() => {
+    if (xAxisTickFormatter) return xAxisTickFormatter;
+    const visible = evenlyDistributedVisibleIndices(coercedData.length, TARGET_VISIBLE_LABELS);
+    return defaultLineChartTickFormatter(coercedData.length, visible);
+  }, [xAxisTickFormatter, coercedData.length]);
+  const angledLabelPad = xAxisAngle === 0 ? 0 : Math.min(Math.abs(xAxisAngle) * 0.7, 40);
+  const chartMargin = { ...CHART_MARGIN, right: CHART_MARGIN.right + 16, bottom: CHART_MARGIN.bottom + angledLabelPad };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_recharts3.LineChart, { data: coercedData, margin: chartMargin, children: [
+    showGrid ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
+    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_recharts3.XAxis,
+      {
+        dataKey: xKey,
+        ...CHART_AXIS_PROPS,
+        interval: xAxisInterval,
+        angle: xAxisAngle,
+        textAnchor: xAxisAngle !== 0 ? "end" : "middle",
+        tickMargin: xAxisAngle === 0 ? 8 : 12,
+        height: xAxisAngle !== 0 ? 60 : void 0,
+        tickFormatter: resolvedTickFormatter
+      }
+    ) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartTooltipContent, {}) }) : null,
+    resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_recharts3.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartLegendContent, { iconType: "line" })
+      }
+    ) : null,
+    series.map((s, i) => {
+      const color = colorForSeriesIndex(i, palette);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_recharts3.Line,
+        {
+          type: lineType,
+          dataKey: s.key,
+          name: s.label,
+          stroke: color,
+          strokeWidth,
+          dot: showDots ? { r: 3, fill: color, stroke: color, strokeWidth: 0 } : false,
+          activeDot: { r: 5, fill: color, stroke: LINE_ACTIVE_DOT_STROKE, strokeWidth: 2 },
+          children: showValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts3.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+        },
+        s.key
+      );
+    })
+  ] }) });
+}
+
+// src/components/chart/pie-chart/pie-chart.tsx
+var import_react3 = require("react");
+var import_recharts4 = require("recharts");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PieChart({
+  data,
+  categoryKey,
+  valueKey,
+  height = 320,
+  width = "100%",
+  className,
+  palette = CHART_PALETTE,
+  showLabels = true,
+  showTooltip = true,
+  showLegend = true,
+  innerRadius = 0,
+  outerRadius = "68%",
+  othersCategoryLabels = DEFAULT_OTHERS_CATEGORY_LABELS
+}) {
+  const { orderedData, sliceColors } = (0, import_react3.useMemo)(() => {
+    const coerced = coerceNumericColumns(data, [valueKey]);
+    const namedRows = [];
+    const namedColors = [];
+    const othersRows = [];
+    const othersColors = [];
+    for (const row of coerced) {
+      if (isOthersCategory(row[categoryKey], othersCategoryLabels)) {
+        othersRows.push(row);
+        othersColors.push(OTHERS_SLICE_COLOR);
+      } else {
+        namedRows.push(row);
+        namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
+      }
+    }
+    return {
+      orderedData: [...namedRows, ...othersRows],
+      sliceColors: [...namedColors, ...othersColors]
+    };
+  }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_recharts4.PieChart, { margin: PIE_CHART_MARGIN, children: [
+    showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChartTooltipContent, {}) }) : null,
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_recharts4.Legend,
+      {
+        verticalAlign: "top",
+        align: "center",
+        wrapperStyle: { top: 0 },
+        itemSorter: null,
+        content: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChartLegendContent, { iconType: "square" })
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_recharts4.Pie,
+      {
+        data: orderedData,
+        dataKey: valueKey,
+        nameKey: categoryKey,
+        cx: "50%",
+        cy: "52%",
+        startAngle: 90,
+        endAngle: -270,
+        innerRadius,
+        outerRadius,
+        label: showLabels ? (entry) => {
+          const v = entry.value;
+          if (v === void 0 || v === null) return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "text",
+            {
+              x: entry.x,
+              y: entry.y,
+              fill: CHART_VALUE_LABEL_STYLE.fill,
+              fontSize: CHART_VALUE_LABEL_STYLE.fontSize,
+              fontWeight: CHART_VALUE_LABEL_STYLE.fontWeight,
+              textAnchor: entry.textAnchor,
+              dominantBaseline: "central",
+              children: String(v)
+            }
+          );
+        } : false,
+        labelLine: false,
+        stroke: "none",
+        strokeWidth: 0,
+        children: orderedData.map((_row, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts4.Cell, { fill: sliceColors[i] }, i))
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BarChart,
+  CHART_AXIS_PROPS,
+  CHART_GRID_PROPS,
+  CHART_PALETTE,
+  ChartContainer,
+  ChartLegendContent,
+  ChartTooltipContent,
+  LineChart,
+  PieChart,
+  coerceNumericColumns,
+  colorForSeriesIndex
+});
+//# sourceMappingURL=chart.cjs.map