gridsmith-ui 0.14.0 → 0.16.0

package/dist/charts.d.ts

@@ -8,6 +8,12 @@ interface BarDef {
     dataKey: string;
     label?: string;
     soft?: boolean;
+    /**
+     * Bars with the same stackId stack into one column (Sprint 25.7, C4); a bar without one stands alone. BarChart's
+     * `stacked` puts every bar without a stackId into one stack. The same field works in CompositeChart, where lines
+     * draw over the stacks.
+     */
+    stackId?: string;
 }
 interface BarChartProps {
     /**
@@ -21,6 +27,7 @@ interface BarChartProps {
     bars: BarDef[];
     xAxisKey: string;
     height?: "sm" | "md" | "lg" | number;
+    /** Every bar without a stackId joins one stack. */
     stacked?: boolean;
     horizontal?: boolean;
     showGrid?: boolean;
@@ -124,6 +131,13 @@ interface CompositeChartProps {
     lines: LineDef[];
     xAxisKey: string;
     height?: "sm" | "md" | "lg" | number;
+    /** Every bar without a stackId joins one stack; lines draw over it (Sprint 25.7, C4). A bar's stackId works too. */
+    stacked?: boolean;
+    /**
+     * The lines on a second axis of their own, on the right, for a line whose unit differs from the bars'. Default: true
+     * for bars side by side, false once the bars stack (`stacked` or a bar's stackId), so a capacity or a target line
+     * reads against the stack's own scale. An explicit value wins.
+     */
     dualAxis?: boolean;
     showGrid?: boolean;
     showTooltip?: boolean;
@@ -262,7 +276,12 @@ interface SparklineProps {
 declare const Sparkline: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
 
 interface ChartContainerProps {
-    height?: "sm" | "md" | "lg";
+    /**
+     * "fill" (Sprint 25.7, C4): the container fills its row — beside a table in a grid or a flex row — with the chart
+     * placed absolutely inside a minimum-height area, so it adds no height of its own: the row takes the table's height,
+     * and the chart grows and shrinks with it.
+     */
+    height?: "sm" | "md" | "lg" | "fill";
     title?: string;
     loading?: boolean;
     emptyState?: ReactNode;

package/dist/charts.js

@@ -1,8 +1,8 @@
-import { Skeleton } from './chunk-M3AARGLI.js';
-import { mergeRefs } from './chunk-PKLVP5ZB.js';
+import { Skeleton } from './chunk-Z63OSN64.js';
+import { mergeRefs } from './chunk-7Q46JXSK.js';
 import { cn, GLASS_SURFACE } from './chunk-4KVFH5KC.js';
 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 { 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, Rectangle } from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var CHART_TOKENS = [
@@ -169,6 +169,10 @@ function ChartTooltipContent({ active, payload, label }) {
     }
   );
 }
+function swatchEdge(entry) {
+  const stroke = entry.payload?.stroke;
+  return typeof stroke === "string" ? stroke : entry.color;
+}
 function ChartLegendContent({ payload }) {
   const textSecondary = useResolvedToken("--ds-text-secondary");
   if (!payload?.length) return null;
@@ -177,7 +181,7 @@ function ChartLegendContent({ payload }) {
       "span",
       {
         className: "shrink-0 rounded-[var(--ds-radius-full)]",
-        style: { width: 8, height: 8, backgroundColor: entry.color }
+        style: { width: 10, height: 10, backgroundColor: entry.color, border: `1.5px solid ${swatchEdge(entry)}` }
       }
     ),
     /* @__PURE__ */ jsx("span", { style: { color: textSecondary }, children: entry.value })
@@ -282,6 +286,29 @@ var ChartWrapper = forwardRef(function ChartWrapper2({ height = "md", className,
   const heightValue = typeof height === "number" ? `${height}px` : HEIGHT_MAP[height];
   return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { height: heightValue }, ...ariaLabel ? { role: "img", "aria-label": ariaLabel } : {}, children });
 });
+function barStackOf(bar, stacked) {
+  return bar.stackId ?? (stacked ? "stack" : void 0);
+}
+function anyStack(bars, stacked) {
+  return bars.some((bar) => barStackOf(bar, stacked) != null);
+}
+function barShape(bars, index, stacked, radius, horizontal = false) {
+  const round = horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
+  const square = [0, 0, 0, 0];
+  const stack = barStackOf(bars[index], stacked);
+  const above = stack == null ? [] : bars.filter((b, j) => j > index && barStackOf(b, stacked) === stack);
+  const Shape = (props) => {
+    const p = props;
+    const row = p.payload ?? {};
+    const down = Number(row[bars[index].dataKey]) < 0;
+    const onTop = above.every((b) => {
+      const value = Number(row[b.dataKey]);
+      return !(down ? value < 0 : value > 0);
+    });
+    return /* @__PURE__ */ jsx(Rectangle, { ...props, radius: onTop ? round : square });
+  };
+  return Shape;
+}
 var BarChart = forwardRef(function BarChart2({
   data,
   bars,
@@ -309,14 +336,6 @@ var BarChart = forwardRef(function BarChart2({
   const radius = useRadius();
   const legendVisible = showLegend ?? bars.length >= 2;
   const layout = horizontal ? "vertical" : "horizontal";
-  function getBarRadius(index) {
-    if (!stacked) {
-      return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
-    }
-    const isTopmost = index === bars.length - 1;
-    if (!isTopmost) return [0, 0, 0, 0];
-    return horizontal ? [0, radius, radius, 0] : [radius, radius, 0, 0];
-  }
   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: mergeRefs(ref, wrapperRef), height, className, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
@@ -324,6 +343,7 @@ var BarChart = forwardRef(function BarChart2({
     {
       data,
       layout,
+      stackOffset: anyStack(bars, stacked) ? "sign" : void 0,
       margin: { top: 4, right: xTicks.endMargin, bottom: 4, left: 4 },
       accessibilityLayer: true,
       children: [
@@ -385,8 +405,10 @@ var BarChart = forwardRef(function BarChart2({
             dataKey: bar.dataKey,
             name: bar.label ?? bar.dataKey,
             fill: bar.soft ? softColors[i] : solidColors[i],
-            radius: getBarRadius(i),
-            stackId: stacked ? "stack" : void 0,
+            stroke: bar.soft ? solidColors[i] : void 0,
+            strokeWidth: bar.soft ? 1 : void 0,
+            shape: barShape(bars, i, stacked, radius, horizontal),
+            stackId: barStackOf(bar, stacked),
             isAnimationActive: isAnimated
           },
           bar.dataKey
@@ -588,7 +610,8 @@ var CompositeChart = forwardRef(function CompositeChart2({
   xAxisKey,
   xAxisInterval,
   height = "md",
-  dualAxis = true,
+  stacked = false,
+  dualAxis = !anyStack(bars, stacked),
   showGrid = true,
   showTooltip = true,
   showLegend = true,
@@ -601,6 +624,7 @@ var CompositeChart = forwardRef(function CompositeChart2({
   const wrapperRef = useRef(null);
   const xTicks = useCategoryTicks(data, xAxisKey, wrapperRef, xAxisInterval);
   const barSoftColors = useChartColors(bars.length, true);
+  const barSolidColors = useChartColors(bars.length, false);
   const lineColors = useChartColors(lines.length, false);
   const gridStroke = useGridStroke();
   const axisStyle = useAxisStyle();
@@ -608,7 +632,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: 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: [
+  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, stackOffset: anyStack(bars, stacked) ? "sign" : void 0, 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,
@@ -644,7 +668,10 @@ var CompositeChart = forwardRef(function CompositeChart2({
         dataKey: bar.dataKey,
         name: bar.label ?? bar.dataKey,
         fill: barSoftColors[i],
-        radius: [radius, radius, 0, 0],
+        stroke: barSolidColors[i],
+        strokeWidth: 1,
+        shape: barShape(bars, i, stacked, radius),
+        stackId: barStackOf(bar, stacked),
         yAxisId: "left",
         isAnimationActive: isAnimated
       },
@@ -1071,11 +1098,13 @@ function ChartContainer({
   children,
   className
 }) {
+  const fill = height === "fill";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-card": "",
       className: cn(
+        fill && "h-full flex flex-col",
         variant === "ghost" ? "bg-transparent" : cn(
           "rounded-[var(--ds-radius-md)] p-ds-4",
           "bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
@@ -1085,18 +1114,25 @@ function ChartContainer({
       ),
       children: [
         title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)] mb-ds-4", children: title }),
-        /* @__PURE__ */ jsx("div", { style: { height: HEIGHT_MAP2[height] }, className: "relative", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end h-full gap-ds-2 px-ds-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-end h-full gap-ds-1", children: [65, 40, 80, 55, 72, 45, 60].map((h, i) => /* @__PURE__ */ jsx(
-            Skeleton,
-            {
-              variant: "custom",
-              className: "flex-1",
-              height: `${h}%`
-            },
-            i
-          )) }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
-        ] }) : children ? /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) }) : emptyState ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center", children: emptyState }) : null })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: fill ? { minHeight: HEIGHT_MAP2.sm } : { height: HEIGHT_MAP2[height] },
+            className: cn("relative", fill && "flex-1"),
+            children: /* @__PURE__ */ jsx("div", { className: fill ? "absolute inset-0" : "h-full", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end h-full gap-ds-2 px-ds-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-end h-full gap-ds-1", children: [65, 40, 80, 55, 72, 45, 60].map((h, i) => /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  variant: "custom",
+                  className: "flex-1",
+                  height: `${h}%`
+                },
+                i
+              )) }),
+              /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines: 1, className: "w-full" })
+            ] }) : children ? /* @__PURE__ */ jsx(ChartContainerContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { className: "h-full w-full", children }) }) : emptyState ? /* @__PURE__ */ jsx("div", { className: "h-full w-full flex items-center justify-center", children: emptyState }) : null })
+          }
+        )
       ]
     }
   );