kaleido-ui 0.2.4 → 0.2.6

package/dist/web/index.cjs

@@ -10462,6 +10462,16 @@ function FilterChipGroup({
 
 // src/web/components/charts/core.tsx
 var import_jsx_runtime116 = require("react/jsx-runtime");
+var BAR_GAP = 2;
+var BAR_RADIUS = 4;
+function barPath(x, y, w, h, end) {
+  const r = Math.min(BAR_RADIUS, w / 2, h / 2);
+  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
+  if (end === "top") {
+    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
+  }
+  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
+}
 var seriesColor = (slot) => `var(--series-${slot % chartSeriesLimit + 1})`;
 var defaultChartFormat = (value) => formatAmount(value);
 var TICK_FONT = 11;
@@ -10925,7 +10935,7 @@ function TrendChart({
   const barWidth = band >= 4 ? Math.min(band * 0.72, MAX_BAR_WIDTH) : Math.max(1, band - 0.75);
   const barOffset = (band - barWidth) / 2;
   const labelIndices = trendChartLabelIndices(count3, plotWidth / X_LABEL_SPACING);
-  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : toneFill[series[index].tone];
+  const fillFor = (index) => textures[index] === "hatch" ? `url(#${idBase}-hatch-${index})` : `url(#${idBase}-fill-${index})`;
   const activePoint = active === null ? null : points[active];
   const readoutId = `${idBase}-readout`;
   const activeRows = activePoint ? series.map((s) => ({
@@ -10987,7 +10997,7 @@ function TrendChart({
                   "aria-hidden": "true",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("defs", { children: series.map(
-                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : null
+                      (s, index) => textures[index] === "hatch" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Texture, { id: `${idBase}-hatch-${index}`, tone: s.tone, texture: "hatch" }, s.id) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(SolidFill, { id: `${idBase}-fill-${index}`, tone: s.tone }, s.id)
                     ) }),
                     /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("g", { "data-slot": "trend-chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
@@ -11035,16 +11045,21 @@ function TrendChart({
                           if (value <= 0) return null;
                           const top = y(base + value);
                           const bottom = y(base);
+                          const seam = base > 0 ? BAR_GAP : 0;
                           base += value;
+                          const isTop = series.slice(seriesIndex + 1).every((next) => (point.values[next.id] ?? 0) <= 0);
                           const hatched = textures[seriesIndex] === "hatch";
                           return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-                            "rect",
+                            "path",
                             {
                               "data-series": s.id,
-                              x: plotLeft + pointIndex * band + barOffset,
-                              y: top,
-                              width: barWidth,
-                              height: Math.max(0.5, bottom - top - (seriesIndex > 0 ? 1 : 0)),
+                              d: barPath(
+                                plotLeft + pointIndex * band + barOffset,
+                                top,
+                                barWidth,
+                                Math.max(0.5, bottom - top - seam),
+                                isTop ? "top" : "none"
+                              ),
                               fill: fillFor(seriesIndex),
                               stroke: hatched ? toneFill[s.tone] : void 0,
                               strokeWidth: hatched && barWidth >= 4 ? 1 : 0
@@ -11126,6 +11141,12 @@ function TrendChart({
     }
   );
 }
+function SolidFill({ id, tone }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "0%", style: { stopColor: `color-mix(in oklab, ${toneFill[tone]}, white 35%)` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("stop", { offset: "100%", style: { stopColor: toneFill[tone] } })
+  ] });
+}
 function Texture({
   id,
   tone,
@@ -11349,16 +11370,7 @@ function AreaChart2(props) {
 var import_react35 = require("react");
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var MAX_BAR = 24;
-var GAP = 2;
-var RADIUS = 4;
-function barPath(x, y, w, h, end) {
-  const r = Math.min(RADIUS, w / 2, h / 2);
-  if (end === "none" || r <= 0) return `M${x},${y}h${w}v${h}h${-w}Z`;
-  if (end === "top") {
-    return `M${x},${y + h}V${y + r}Q${x},${y} ${x + r},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h}Z`;
-  }
-  return `M${x},${y}H${x + w - r}Q${x + w},${y} ${x + w},${y + r}V${y + h - r}Q${x + w},${y + h} ${x + w - r},${y + h}H${x}Z`;
-}
+var GAP = BAR_GAP;
 function BarChart2({
   data,
   series: allSeries,
@@ -11822,6 +11834,7 @@ function BarList({
   max,
   sort = "none",
   showPercent = true,
+  labelWidth,
   empty,
   className,
   ...head
@@ -11832,40 +11845,54 @@ function BarList({
   const sum = rows.reduce((acc, item) => acc + Math.max(0, item.value), 0);
   const percentOf = (item) => formatPercent(item.percent ?? (sum > 0 ? Math.max(0, item.value) / sum : 0));
   const framed = head.title !== void 0 || (head.timeframes?.length ?? 0) > 0;
+  const label_ = labelWidth ? `minmax(0,${labelWidth})` : "auto";
+  const wideColumns = showPercent ? `${label_} 1fr auto auto` : `${label_} 1fr auto`;
   const list = /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "ol",
     {
       "data-slot": "bar-list",
       "aria-label": label,
       className: cn(
-        "m-0 grid list-none items-center gap-x-3 gap-y-2 p-0 text-caption",
+        "m-0 grid list-none gap-y-3 p-0 text-caption sm:items-center sm:gap-x-3 sm:gap-y-2",
+        "sm:[grid-template-columns:var(--bar-list-columns)]",
         // Under a head, a little more air than the plots' own top margin.
         framed && "pt-2",
-        showPercent ? "grid-cols-[auto_1fr_auto_auto]" : "grid-cols-[auto_1fr_auto]",
         className
       ),
+      style: { "--bar-list-columns": wideColumns },
       children: rows.map((item) => {
         const share = Math.max(0, item.value) / top;
         return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
           "li",
           {
             "data-slot": "bar-list-row",
-            className: "col-span-full grid grid-cols-subgrid items-center",
+            className: cn(
+              // Narrow: label and value on one line, the bar under them.
+              "grid items-baseline gap-x-3 gap-y-1.5",
+              showPercent ? "grid-cols-[minmax(0,1fr)_auto_auto]" : "grid-cols-[minmax(0,1fr)_auto]",
+              "sm:col-span-full sm:grid-cols-subgrid sm:items-center sm:gap-y-0"
+            ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "max-w-[10rem] truncate text-muted-foreground", children: item.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "h-2 overflow-hidden rounded-full bg-secondary/15 shadow-inner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: cn("min-w-0 truncate text-muted-foreground", !labelWidth && "sm:max-w-[10rem]"), children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                 "span",
                 {
-                  className: "block h-full rounded-full",
-                  style: {
-                    width: `${share * 100}%`,
-                    // A non-zero value keeps a sliver, so it never reads as zero.
-                    minWidth: item.value > 0 ? 4 : 0,
-                    background: seriesColor(0)
-                  }
+                  className: "order-last col-span-full h-2 overflow-hidden rounded-full bg-primary/15 shadow-inner sm:order-none sm:col-span-1",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                    "span",
+                    {
+                      className: "block h-full rounded-full bg-primary bg-gradient-primary",
+                      style: {
+                        width: `${share * 100}%`,
+                        // A non-zero value keeps a sliver, so it never reads as zero.
+                        minWidth: item.value > 0 ? 4 : 0
+                      }
+                    }
+                  )
                 }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "whitespace-nowrap text-right font-semibold tabular-nums text-foreground", children: item.valueText ?? formatValue(item.value) }),
               showPercent && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-right tabular-nums text-muted-foreground", children: percentOf(item) })
             ]
           },

package/dist/web/index.d.cts

@@ -3041,7 +3041,6 @@ interface ChartDatum {
     detail?: string;
     values: Readonly<Record<string, number>>;
 }
-/** The series colour for a slot. Slots past the palette are a bug, not a new hue. */
 declare const seriesColor: (slot: number) => string;
 /**
  * Value-axis ticks that only name values the chart reaches: from zero, round
@@ -3386,6 +3385,13 @@ interface BarListProps extends ChartTitleProps {
     sort?: 'desc' | 'none';
     /** Prints each row's percentage after its value. On by default. */
     showPercent?: boolean;
+    /**
+     * A fixed width for the label column, as a CSS length ("8rem"). Lists that
+     * sit one under another (one per asset, say) each size their labels to
+     * their own, so their bars start at different points; one width lines them
+     * up. Longer labels are truncated. Defaults to the longest label.
+     */
+    labelWidth?: string;
     empty?: ReactNode;
     className?: string;
 }
@@ -3398,11 +3404,17 @@ interface BarListProps extends ChartTitleProps {
  * Given a `title` or `timeframes`, it carries the common chart head (title,
  * timeframe, the chart / table switch) like the other charts.
  *
- * One series, so one colour (series slot 1) for every bar: colouring nominal
+ * One series, so one fill for every bar: the primary gradient on a lighter
+ * step of the same colour, as `Meter` draws its normal state, so a bar list
+ * and a meter on one page read as the same kind of mark. Colouring nominal
  * rows darker-where-bigger would re-encode what the bar length already shows.
- * Rows separate by spacing on the muted track, never by dividers.
+ * Rows separate by spacing on the track, never by dividers.
+ *
+ * On a phone the label and value share the top line and the bar runs the full
+ * width under them, so a long label or value never squeezes the bar to a
+ * sliver.
  */
-declare function BarList({ items, label, formatValue, max, sort, showPercent, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
+declare function BarList({ items, label, formatValue, max, sort, showPercent, labelWidth, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
 
 interface DonutSegment {
     id: string;

package/dist/web/index.d.ts

@@ -3041,7 +3041,6 @@ interface ChartDatum {
     detail?: string;
     values: Readonly<Record<string, number>>;
 }
-/** The series colour for a slot. Slots past the palette are a bug, not a new hue. */
 declare const seriesColor: (slot: number) => string;
 /**
  * Value-axis ticks that only name values the chart reaches: from zero, round
@@ -3386,6 +3385,13 @@ interface BarListProps extends ChartTitleProps {
     sort?: 'desc' | 'none';
     /** Prints each row's percentage after its value. On by default. */
     showPercent?: boolean;
+    /**
+     * A fixed width for the label column, as a CSS length ("8rem"). Lists that
+     * sit one under another (one per asset, say) each size their labels to
+     * their own, so their bars start at different points; one width lines them
+     * up. Longer labels are truncated. Defaults to the longest label.
+     */
+    labelWidth?: string;
     empty?: ReactNode;
     className?: string;
 }
@@ -3398,11 +3404,17 @@ interface BarListProps extends ChartTitleProps {
  * Given a `title` or `timeframes`, it carries the common chart head (title,
  * timeframe, the chart / table switch) like the other charts.
  *
- * One series, so one colour (series slot 1) for every bar: colouring nominal
+ * One series, so one fill for every bar: the primary gradient on a lighter
+ * step of the same colour, as `Meter` draws its normal state, so a bar list
+ * and a meter on one page read as the same kind of mark. Colouring nominal
  * rows darker-where-bigger would re-encode what the bar length already shows.
- * Rows separate by spacing on the muted track, never by dividers.
+ * Rows separate by spacing on the track, never by dividers.
+ *
+ * On a phone the label and value share the top line and the bar runs the full
+ * width under them, so a long label or value never squeezes the bar to a
+ * sliver.
  */
-declare function BarList({ items, label, formatValue, max, sort, showPercent, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
+declare function BarList({ items, label, formatValue, max, sort, showPercent, labelWidth, empty, className, ...head }: BarListProps): react_jsx_runtime.JSX.Element;
 
 interface DonutSegment {
     id: string;