@eifi1/ui-kit 0.14.2 → 0.15.1

package/dist/components/series-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { 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,28 @@ 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") return `${label} (${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 } : {}
     };
@@ -205,6 +220,40 @@ function focusedBarShape(index) {
     return /* @__PURE__ */ jsx(Rectangle, { ...props, ...focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {} });
   };
 }
+const MARKER_LABEL_SIZE = 11;
+function MarkerLabel({
+  viewBox,
+  value
+}) {
+  const plot = usePlotArea();
+  const ref = useRef(null);
+  const [measured, setMeasured] = useState();
+  const text = value == null ? "" : String(value);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.getComputedTextLength !== "function") return;
+    const w = el.getComputedTextLength();
+    if (w > 0 && w !== measured) setMeasured(w);
+  }, [text, measured]);
+  if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
+  const cx = viewBox.x + (viewBox.width ?? 0) / 2;
+  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      ref,
+      x,
+      y: viewBox.y - 5,
+      textAnchor: "middle",
+      fontSize: MARKER_LABEL_SIZE,
+      fontWeight: 600,
+      fill: "var(--text-primary)",
+      className: "recharts-label",
+      children: text
+    }
+  );
+}
 function PointKeys({
   stops,
   current,
@@ -289,13 +338,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) {
@@ -312,14 +392,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 = {
@@ -477,6 +564,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,
@@ -505,6 +594,7 @@ function SeriesPlot({
                 tickLine: false,
                 axisLine: false,
                 minTickGap: 32,
+                interval: "equidistantPreserveEnd",
                 tick: x.ticks === false ? false : void 0,
                 ...tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {},
                 height: x.ticks === false && !x.title ? 4 : tickBand,
@@ -520,7 +610,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(
@@ -532,7 +622,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,
@@ -575,7 +665,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(
@@ -608,7 +698,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),
@@ -627,7 +717,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 } : {},
@@ -690,13 +780,7 @@ function SeriesPlot({
                   stroke: "var(--bg-surface)",
                   strokeWidth: 1.5,
                   ifOverflow: "discard",
-                  label: marker.label ? {
-                    value: marker.label,
-                    position: "top",
-                    fontSize: 11,
-                    fontWeight: 600,
-                    fill: "var(--text-primary)"
-                  } : void 0
+                  label: marker.label ? { value: marker.label, position: "top", content: /* @__PURE__ */ jsx(MarkerLabel, {}) } : void 0
                 },
                 marker.key ?? `marker-${index}`
               );