@shapesos/clay 0.14.0 → 0.16.0

package/dist/artifacts.cjs

@@ -981,6 +981,11 @@ var CHART_PALETTE = [
 ];
 var OTHERS_SLICE_COLOR = colors["brown-60"];
 var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
+var NONE_CATEGORY_VALUES = ["", "(none)", "none", "null", "undefined", "n/a", "-"];
+function isNoneCategory(value) {
+  if (value === null || value === void 0) return true;
+  return NONE_CATEGORY_VALUES.includes(String(value).trim().toLowerCase());
+}
 function isOthersCategory(value, labels) {
   if (value === null || value === void 0) return false;
   if (labels.length === 0) return false;
@@ -1036,6 +1041,13 @@ function truncateLabel(value, maxChars) {
   if (s.length <= maxChars) return s;
   return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
 }
+var compactNumberFormat = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function compactNumberTickFormatter(value) {
+  if (value === null || value === void 0) return "";
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return String(value);
+  return compactNumberFormat.format(n);
+}
 function evenlyDistributedVisibleIndices(n, target) {
   if (n <= target) {
     return new Set(Array.from({ length: n }, (_, i) => i));
@@ -1075,6 +1087,11 @@ function coerceNumericColumns(rows, numericKeys) {
 
 // src/components/chart/bar-chart/bar-chart.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var STACK_TOTAL_KEY = "__stackTotal";
+var VALUE_LABEL_HEADROOM = 20;
+function sumSeries(row, keys) {
+  return keys.reduce((sum, key) => sum + (Number(row[key]) || 0), 0);
+}
 function BarChart({
   data,
   xKey,
@@ -1100,15 +1117,24 @@ function BarChart({
     [data, seriesKeys]
   );
   const resolvedShowLegend = showLegend ?? series.length > 1;
-  const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
+  const resolvedShowValueLabels = showValueLabels ?? true;
+  const plotData = (0, import_react9.useMemo)(() => {
+    if (!stacked || !resolvedShowValueLabels) return coercedData;
+    return coercedData.map((row) => ({ ...row, [STACK_TOTAL_KEY]: sumSeries(row, seriesKeys) }));
+  }, [coercedData, stacked, resolvedShowValueLabels, seriesKeys]);
   const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
   const resolvedTickFormatter = (0, import_react9.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_runtime12.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_recharts2.BarChart, { data: coercedData, margin: chartMargin, barCategoryGap: "22%", children: [
+  const valueLabelHeadroom = resolvedShowValueLabels ? VALUE_LABEL_HEADROOM : 0;
+  const chartMargin = {
+    ...CHART_MARGIN,
+    top: CHART_MARGIN.top + valueLabelHeadroom,
+    bottom: CHART_MARGIN.bottom + angledLabelPad
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_recharts2.BarChart, { data: plotData, margin: chartMargin, barCategoryGap: "22%", children: [
     showGrid ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.CartesianGrid, { ...CHART_GRID_PROPS }) : null,
     showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts2.XAxis,
@@ -1123,7 +1149,7 @@ function BarChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.YAxis, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_recharts2.Legend,
@@ -1135,18 +1161,23 @@ function BarChart({
         content: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartLegendContent, { iconType: "square" })
       }
     ) : null,
-    series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(import_recharts2.LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
-      },
-      s.key
-    ))
+    series.map((s, i) => {
+      const isTopSegment = i === series.length - 1;
+      const labelDataKey = stacked ? STACK_TOTAL_KEY : s.key;
+      const showLabel = resolvedShowValueLabels && (!stacked || isTopSegment);
+      return /* @__PURE__ */ (0, import_jsx_runtime12.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: showLabel ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_recharts2.LabelList, { dataKey: labelDataKey, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+        },
+        s.key
+      );
+    })
   ] }) });
 }
 function barRadius(stacked, seriesIndex, seriesCount) {
@@ -1262,7 +1293,7 @@ function LineChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.YAxis, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_recharts3.Legend,
@@ -1320,6 +1351,42 @@ var LineChartVariantService = {
 // src/components/chart/pie-chart/pie-chart.tsx
 var import_react11 = require("react");
 var import_recharts4 = require("recharts");
+
+// src/components/chart/pie-chart/utils.ts
+function mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels) {
+  const explicit = leftoverRows.find((row) => isOthersCategory(row[categoryKey], othersCategoryLabels));
+  if (explicit) return String(explicit[categoryKey]);
+  const fallback = othersCategoryLabels[0] ?? "Other";
+  return fallback.charAt(0).toUpperCase() + fallback.slice(1);
+}
+function buildPieSlices(data, categoryKey, valueKey, othersCategoryLabels, palette) {
+  const namedRows = [];
+  const namedColors = [];
+  const leftoverRows = [];
+  for (const row of data) {
+    const isLeftover = othersCategoryLabels.length > 0 && (isNoneCategory(row[categoryKey]) || isOthersCategory(row[categoryKey], othersCategoryLabels));
+    if (isLeftover) {
+      leftoverRows.push(row);
+    } else {
+      namedRows.push(row);
+      namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
+    }
+  }
+  if (leftoverRows.length === 0) {
+    return { orderedData: namedRows, sliceColors: namedColors };
+  }
+  const total = leftoverRows.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
+  const mergedRow = {
+    [categoryKey]: mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels),
+    [valueKey]: total
+  };
+  return {
+    orderedData: [...namedRows, mergedRow],
+    sliceColors: [...namedColors, OTHERS_SLICE_COLOR]
+  };
+}
+
+// src/components/chart/pie-chart/pie-chart.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function PieChart({
   data,
@@ -1338,23 +1405,7 @@ function PieChart({
 }) {
   const { orderedData, sliceColors } = (0, import_react11.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]
-    };
+    return buildPieSlices(coerced, categoryKey, valueKey, othersCategoryLabels, palette);
   }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartContainer, { height, width, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_recharts4.PieChart, { margin: PIE_CHART_MARGIN, children: [
     showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChartTooltipContent, {}) }) : null,