gridsmith-ui 0.9.0 → 0.9.1

package/dist/charts.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type XAxisInterval = number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
+
 interface BarDef {
     dataKey: string;
     label?: string;
@@ -9,10 +11,12 @@ interface BarDef {
 }
 interface BarChartProps {
     /**
-     * Which category ticks show. "preserveStartEnd" (default) keeps the first and last and drops the rest as they
-     * would collide; 0 shows every tick (labels stay on one line and truncate). Recharts measures the full label.
+     * Which category ticks show. Leave it out: the chart measures its widest label with the chart's font and labels every
+     * k-th category from the first, the last only when it falls on the step (Sprint 25.4 C-11, decision 7). A number
+     * labels every Nth category instead. The Recharts strings ("preserveStartEnd") are accepted for compatibility and
+     * mean the same measured labelling — they never hand the ticks back to Recharts' thinning (round 13).
      */
-    xAxisInterval?: number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
+    xAxisInterval?: XAxisInterval;
     data: Record<string, unknown>[];
     bars: BarDef[];
     xAxisKey: string;
@@ -37,10 +41,12 @@ interface LineDef {
 }
 interface LineChartProps {
     /**
-     * Which category ticks show. "preserveStartEnd" (default) keeps the first and last and drops the rest as they
-     * would collide; 0 shows every tick (labels stay on one line and truncate). Recharts measures the full label.
+     * Which category ticks show. Leave it out: the chart measures its widest label with the chart's font and labels every
+     * k-th category from the first, the last only when it falls on the step (Sprint 25.4 C-11, decision 7). A number
+     * labels every Nth category instead. The Recharts strings ("preserveStartEnd") are accepted for compatibility and
+     * mean the same measured labelling — they never hand the ticks back to Recharts' thinning (round 13).
      */
-    xAxisInterval?: number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
+    xAxisInterval?: XAxisInterval;
     data: Record<string, unknown>[];
     lines: LineDef[];
     xAxisKey: string;
@@ -64,10 +70,12 @@ interface AreaDef {
 }
 interface AreaChartProps {
     /**
-     * Which category ticks show. "preserveStartEnd" (default) keeps the first and last and drops the rest as they
-     * would collide; 0 shows every tick (labels stay on one line and truncate). Recharts measures the full label.
+     * Which category ticks show. Leave it out: the chart measures its widest label with the chart's font and labels every
+     * k-th category from the first, the last only when it falls on the step (Sprint 25.4 C-11, decision 7). A number
+     * labels every Nth category instead. The Recharts strings ("preserveStartEnd") are accepted for compatibility and
+     * mean the same measured labelling — they never hand the ticks back to Recharts' thinning (round 13).
      */
-    xAxisInterval?: number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
+    xAxisInterval?: XAxisInterval;
     data: Record<string, unknown>[];
     areas: AreaDef[];
     xAxisKey: string;
@@ -105,10 +113,12 @@ declare const PieChart: react.ForwardRefExoticComponent<PieChartProps & react.Re
 
 interface CompositeChartProps {
     /**
-     * Which category ticks show. "preserveStartEnd" (default) keeps the first and last and drops the rest as they
-     * would collide; 0 shows every tick (labels stay on one line and truncate). Recharts measures the full label.
+     * Which category ticks show. Leave it out: the chart measures its widest label with the chart's font and labels every
+     * k-th category from the first, the last only when it falls on the step (Sprint 25.4 C-11, decision 7). A number
+     * labels every Nth category instead. The Recharts strings ("preserveStartEnd") are accepted for compatibility and
+     * mean the same measured labelling — they never hand the ticks back to Recharts' thinning (round 13).
      */
-    xAxisInterval?: number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart";
+    xAxisInterval?: XAxisInterval;
     data: Record<string, unknown>[];
     bars: BarDef[];
     lines: LineDef[];

package/dist/charts.js

@@ -1,6 +1,7 @@
 import { Skeleton } from './chunk-M3AARGLI.js';
+import { mergeRefs } from './chunk-PKLVP5ZB.js';
 import { cn, GLASS_SURFACE } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useId, useContext, useSyncExternalStore, useState, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useRef, useId, useContext, useMemo, useState, useEffect, useSyncExternalStore, useLayoutEffect } from 'react';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LineChart as LineChart$1, Line, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Pie, Cell, ComposedChart, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart as RadialBarChart$1, RadialBar, FunnelChart as FunnelChart$1, Funnel, LabelList, Treemap, Sankey, Text } from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -208,6 +209,62 @@ function yAxisTick(props) {
   const { x, y, payload, ...rest } = props;
   return /* @__PURE__ */ jsx(Text, { ...rest, x, y, textAnchor: "end", verticalAnchor: "middle", width: 200, maxLines: 2, children: payload.value });
 }
+function lengthPx(value, el) {
+  const v = value.trim();
+  if (v.endsWith("rem")) return parseFloat(v) * (parseFloat(getComputedStyle(el.ownerDocument.documentElement).fontSize) || 16);
+  if (v.endsWith("px")) return parseFloat(v);
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : NaN;
+}
+function widestLabel(el, labels) {
+  if (typeof document === "undefined") return null;
+  const ctx = document.createElement("canvas").getContext?.("2d");
+  if (!ctx) return null;
+  const cs = getComputedStyle(el);
+  const size = lengthPx(cs.getPropertyValue("--ds-font-size-xs"), el) || 12;
+  const family = cs.getPropertyValue("--ds-font-sans").trim() || cs.fontFamily || "sans-serif";
+  ctx.font = `${size}px ${family}`;
+  return labels.reduce((w, l) => Math.max(w, ctx.measureText(l).width), 0);
+}
+var TICK_GAP = 12;
+var AXIS_RESERVE = 48;
+function useCategoryTicks(data, xAxisKey, ref, override) {
+  const labels = useMemo(() => (data ?? []).map((d) => String(d[xAxisKey] ?? "")), [data, xAxisKey]);
+  const labelsKey = labels.join("
");
+  const [ticks, setTicks] = useState(void 0);
+  const [endMargin, setEndMargin] = useState(4);
+  const numeric = typeof override === "number" ? override : void 0;
+  useEffect(() => {
+    const el = ref.current;
+    if (numeric !== void 0 || !el || labels.length === 0) return;
+    let live = true;
+    const compute = () => {
+      if (!live) return;
+      const widest = widestLabel(el, labels);
+      const plot = el.clientWidth - AXIS_RESERVE;
+      if (widest == null || plot <= 0) {
+        setTicks(void 0);
+        return;
+      }
+      setEndMargin(Math.max(4, Math.ceil(widest / 2)));
+      const fits = Math.max(1, Math.floor(plot / (widest + TICK_GAP)));
+      const step = Math.ceil(labels.length / fits);
+      setTicks(labels.filter((_, i) => i % step === 0));
+    };
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    const fonts = document.fonts;
+    fonts?.ready.then(compute, () => {
+    });
+    return () => {
+      live = false;
+      ro.disconnect();
+    };
+  }, [labelsKey, numeric, ref]);
+  if (numeric !== void 0) return { interval: numeric, endMargin: 4 };
+  return ticks ? { ticks, interval: 0, endMargin } : { interval: "preserveStartEnd", endMargin: 4 };
+}
 var ChartContainerContext = createContext(false);
 function useInsideChartContainer() {
   return useContext(ChartContainerContext);
@@ -229,7 +286,7 @@ var BarChart = forwardRef(function BarChart2({
   data,
   bars,
   xAxisKey,
-  xAxisInterval = "preserveStartEnd",
+  xAxisInterval,
   height = "md",
   stacked = false,
   horizontal = false,
@@ -242,6 +299,8 @@ var BarChart = forwardRef(function BarChart2({
   "aria-label": ariaLabel,
   className
 }, ref) {
+  const wrapperRef = useRef(null);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, horizontal ? xAxisInterval ?? "preserveStartEnd" : xAxisInterval);
   const solidColors = useChartColors(bars.length, false);
   const softColors = useChartColors(bars.length, true);
   const gridStroke = useGridStroke();
@@ -260,12 +319,12 @@ var BarChart = forwardRef(function BarChart2({
   }
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
     BarChart$1,
     {
       data,
       layout,
-      margin: { top: 4, right: 4, bottom: 4, left: 4 },
+      margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 },
       accessibilityLayer: true,
       children: [
         showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke, vertical: !horizontal, horizontal: true }),
@@ -301,7 +360,8 @@ var BarChart = forwardRef(function BarChart2({
               axisLine: false,
               tickLine: false,
               tick: xAxisTick,
-              interval: xAxisInterval,
+              interval: xTicks.interval,
+              ticks: xTicks.ticks,
               height: "auto",
               label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
             }
@@ -339,7 +399,7 @@ var LineChart = forwardRef(function LineChart2({
   data,
   lines,
   xAxisKey,
-  xAxisInterval = "preserveStartEnd",
+  xAxisInterval,
   height = "md",
   curved = true,
   showDots = false,
@@ -352,6 +412,8 @@ var LineChart = forwardRef(function LineChart2({
   "aria-label": ariaLabel,
   className
 }, ref) {
+  const wrapperRef = useRef(null);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
   const colors = useChartColors(lines.length, false);
   const gridStroke = useGridStroke();
   const axisStyle = useAxisStyle();
@@ -359,7 +421,7 @@ var LineChart = forwardRef(function LineChart2({
   const legendVisible = showLegend ?? lines.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
     showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
     /* @__PURE__ */ jsx(
       XAxis,
@@ -369,7 +431,8 @@ var LineChart = forwardRef(function LineChart2({
         axisLine: false,
         tickLine: false,
         tick: xAxisTick,
-        interval: xAxisInterval,
+        interval: xTicks.interval,
+        ticks: xTicks.ticks,
         height: "auto",
         label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
       }
@@ -407,7 +470,7 @@ var AreaChart = forwardRef(function AreaChart2({
   data,
   areas,
   xAxisKey,
-  xAxisInterval = "preserveStartEnd",
+  xAxisInterval,
   height = "md",
   stacked = false,
   curved = true,
@@ -421,6 +484,8 @@ var AreaChart = forwardRef(function AreaChart2({
   "aria-label": ariaLabel,
   className
 }, ref) {
+  const wrapperRef = useRef(null);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
   const instanceId = useId();
   const solidColors = useChartColors(areas.length, false);
   const softColors = useChartColors(areas.length, true);
@@ -430,7 +495,7 @@ var AreaChart = forwardRef(function AreaChart2({
   const legendVisible = showLegend ?? areas.length >= 2;
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
     /* @__PURE__ */ jsx("defs", { children: areas.map((area, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `gradient-${instanceId}-${area.dataKey}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
       /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: softColors[i], stopOpacity: 1 }),
       /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: softColors[i], stopOpacity: 0.1 })
@@ -444,7 +509,8 @@ var AreaChart = forwardRef(function AreaChart2({
         axisLine: false,
         tickLine: false,
         tick: xAxisTick,
-        interval: xAxisInterval,
+        interval: xTicks.interval,
+        ticks: xTicks.ticks,
         height: "auto",
         label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
       }
@@ -520,7 +586,7 @@ var CompositeChart = forwardRef(function CompositeChart2({
   bars,
   lines,
   xAxisKey,
-  xAxisInterval = "preserveStartEnd",
+  xAxisInterval,
   height = "md",
   dualAxis = true,
   showGrid = true,
@@ -532,6 +598,8 @@ var CompositeChart = forwardRef(function CompositeChart2({
   "aria-label": ariaLabel,
   className
 }, ref) {
+  const wrapperRef = useRef(null);
+  const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
   const barSoftColors = useChartColors(bars.length, true);
   const lineColors = useChartColors(lines.length, false);
   const gridStroke = useGridStroke();
@@ -540,7 +608,7 @@ var CompositeChart = forwardRef(function CompositeChart2({
   const radius = useRadius();
   const axisLabelStyle = { fontSize: "var(--ds-font-size-xs)", fontFamily: "var(--ds-font-sans)", fill: axisStyle.tick.fill };
   if (!data?.length) return null;
-  return /* @__PURE__ */ jsx(ChartWrapper, { ref, height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data, margin: { top: 4, right: 4, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
+  return /* @__PURE__ */ jsx(ChartWrapper, { ref: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ComposedChart, { data, margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 }, accessibilityLayer: true, children: [
     showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: gridStroke }),
     /* @__PURE__ */ jsx(
       XAxis,
@@ -550,7 +618,8 @@ var CompositeChart = forwardRef(function CompositeChart2({
         axisLine: false,
         tickLine: false,
         tick: xAxisTick,
-        interval: xAxisInterval,
+        interval: xTicks.interval,
+        ticks: xTicks.ticks,
         height: "auto",
         label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -2, style: axisLabelStyle } : void 0
       }
@@ -1005,6 +1074,7 @@ function ChartContainer({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-card": "",
       className: cn(
         variant === "ghost" ? "bg-transparent" : cn(
           "rounded-[var(--ds-radius-md)] p-ds-4",