@eifi1/ui-kit 0.15.0 → 0.15.2

package/dist/components/series-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   Area,
   Bar,
@@ -25,6 +25,7 @@ import {
 import { STEP_DASH, strokeDash } from "./toggle-legend.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
 import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit } from "./series-chart-ticks.js";
+import { autoAxisBudget, axisUnit, budgetedAxes } from "./series-chart-budget.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
@@ -104,14 +105,31 @@ function anchoredBand(extent) {
 function visibleSeries(series, hidden) {
   return series.map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) })).filter((entry) => !hidden.has(entry.key));
 }
-function seriesLegendEntries(series) {
+function withUnit(label, unit) {
+  if (!unit) return label;
+  if (typeof label === "string" || typeof label === "number") {
+    const text = String(label);
+    return text.trimEnd().endsWith(`(${unit})`) ? label : `${text} (${unit})`;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    " (",
+    unit,
+    ")"
+  ] });
+}
+function seriesLegendEntries(series, { axes, budgeted } = {}) {
+  const undrawn = /* @__PURE__ */ new Map();
+  for (const axis of axes ?? []) {
+    if (axis.hide || budgeted?.includes(axis.id)) undrawn.set(axis.id, axisUnit(axis));
+  }
   return series.map((entry, index) => {
     const own = entry.dash ?? (entry.dashed ? 1 : 0);
     const dash = entry.step ? STEP_DASH : own;
     const line = (entry.type ?? "line") === "line";
     return {
       key: entry.key,
-      label: entry.label,
+      label: withUnit(entry.label, undrawn.get(entry.axis ?? DEFAULT_Y_AXIS)),
       color: entry.color ?? paletteFor(index),
       ...line && dash !== 0 ? { marker: "stroke", dash } : {}
     };
@@ -323,13 +341,44 @@ function SeriesPlot({
   labels: labelsProp,
   locale: localeProp,
   className,
-  minBarLength
+  minBarLength,
+  maxVisibleAxes,
+  axisBudget = "auto",
+  onAxisBudget
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState(void 0);
+  const [box, setBox] = useState(null);
+  const [width, setWidth] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!box || axisBudget === "off" || typeof ResizeObserver === "undefined") return;
+    const measure = () => setWidth(box.getBoundingClientRect().width || void 0);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [box, axisBudget]);
+  const capped = budgetedAxes(axes, maxVisibleAxes);
+  const afterCap = capped.length ? axes.map((axis) => capped.includes(axis.id) ? { ...axis, hide: true } : axis) : axes;
+  const auto = axisBudget === "off" ? [] : budgetedAxes(
+    afterCap,
+    autoAxisBudget(
+      afterCap,
+      width,
+      (axis) => axisBandWidth(axis.width, Boolean(axis.title))
+    )
+  );
+  const budgeted = [...capped, ...auto];
+  const budgetKey = budgeted.join("\n");
+  const reported = useRef("");
+  useEffect(() => {
+    if (budgetKey === reported.current) return;
+    reported.current = budgetKey;
+    onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
+  }, [budgetKey, onAxisBudget]);
   const heightClass = typeof height === "string" ? height : void 0;
   const heightStyle = typeof height === "number" ? { height } : void 0;
   if (!model.source.length || !series.length) {
@@ -346,14 +395,21 @@ function SeriesPlot({
   const xKey = model.plotKey;
   const plotted = model.rows;
   const rows = model.source;
+  const drawnAxes = budgeted.length ? axes.map((axis) => budgeted.includes(axis.id) ? { ...axis, hide: true } : axis) : axes;
+  const lostUnit = new Map(
+    axes.filter((axis) => budgeted.includes(axis.id)).map((axis) => [axis.id, axisUnit(axis)])
+  );
   const config = Object.fromEntries(
     series.map((entry, index) => [
       entry.key,
-      { label: entry.label, color: entry.color ?? paletteFor(index) }
+      {
+        label: withUnit(entry.label, lostUnit.get(entry.axis ?? DEFAULT_Y_AXIS)),
+        color: entry.color ?? paletteFor(index)
+      }
     ])
   );
-  const visible = axes.filter((axis) => !axis.hide);
-  const gridAxis = (visible[0] ?? axes[0])?.id ?? DEFAULT_Y_AXIS;
+  const visible = drawnAxes.filter((axis) => !axis.hide);
+  const gridAxis = (visible[0] ?? drawnAxes[0])?.id ?? DEFAULT_Y_AXIS;
   const onLeft = visible.some((axis) => (axis.orientation ?? "left") === "left");
   const onRight = visible.some((axis) => axis.orientation === "right");
   const margin = {
@@ -511,6 +567,8 @@ function SeriesPlot({
   return /* @__PURE__ */ jsx(
     ChartContainer,
     {
+      ref: setBox,
+      "data-axis-budget": budgeted.length ? budgetKey.replace(/\n/g, " ") : void 0,
       config,
       className: cn("w-full", heightClass, className, onPointClick && "cursor-pointer"),
       style: heightStyle,
@@ -555,7 +613,7 @@ function SeriesPlot({
                 )
               }
             ),
-            axes.map((axis) => {
+            drawnAxes.map((axis) => {
               const domain = fittedY(axis);
               const zoomed = anchored(axis) ? zoom?.xDomain !== void 0 : zoom?.yDomains[axis.id] !== void 0;
               return /* @__PURE__ */ jsx(
@@ -567,7 +625,7 @@ function SeriesPlot({
                   ticks: resolveTicks(axis.tickValues, domain, finite) ?? (wholeOnly(axis) ? integerTicks(domain) ?? niceTicks(domain) : niceTicks(domain)),
                   allowDataOverflow: zoomed,
                   orientation: axis.orientation ?? "left",
-                  width: axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide),
+                  width: axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title)),
                   tickLine: false,
                   axisLine: false,
                   tickFormatter: axis.format ?? number,
@@ -610,7 +668,7 @@ function SeriesPlot({
               const own = entry.dash ?? (entry.dashed ? 1 : 0);
               const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
               const curve = entry.step ? "stepAfter" : entry.curve ?? "monotone";
-              const width = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
+              const width2 = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
               if (type === "bar") {
                 const stub = entry.minBarLength ?? minBarLength;
                 return /* @__PURE__ */ jsx(
@@ -643,7 +701,7 @@ function SeriesPlot({
                     dataKey: entry.key,
                     stackId: entry.stack,
                     stroke: color,
-                    strokeWidth: width,
+                    strokeWidth: width2,
                     strokeDasharray: dash,
                     fill: color,
                     fillOpacity: entry.fillOpacity ?? (entry.stack !== void 0 ? 0.55 : 0.2),
@@ -662,7 +720,7 @@ function SeriesPlot({
                   type: curve,
                   dataKey: entry.key,
                   stroke: color,
-                  strokeWidth: width,
+                  strokeWidth: width2,
                   strokeDasharray: dash,
                   dot: dotFor(entry),
                   ...entry.activeDot !== void 0 ? { activeDot: entry.activeDot } : {},