@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/series-chart.js

@@ -17,6 +17,8 @@ import {
   useXAxisScale
 } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { useFigureDescription } from "./chart-figure.js";
+import { rovingTarget } from "../lib/direction.js";
 import {
   DEFAULT_Y_AXIS,
   axisExtent,
@@ -69,7 +71,7 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useTextSize } from "../theme/text-size.js";
 import { chartHeightProps } from "./chart-height.js";
-import { useChartEdge } from "./chart-edge.js";
+import { useChartEdge, useEdgesInForce } from "./chart-edge.js";
 import { cn } from "../lib/cn.js";
 import { formatWithMinus } from "../lib/minus.js";
 function resolveTooltipPlacement(own, fromProvider, phone) {
@@ -128,6 +130,7 @@ const ONE_UNTITLED_AXIS = [{ id: DEFAULT_Y_AXIS, title: "" }];
 const LINE_WIDTH = 2;
 const STEP_WIDTH = 1.5;
 const BAR_RADIUS = [3, 3, 0, 0];
+const ALL_STOPS_UP_TO = 100;
 function focusedBarShape(index) {
   return function FocusedBar(props) {
     const focused = props.originalDataIndex === index;
@@ -179,25 +182,24 @@ function PointKeys({
   const scale = useXAxisScale();
   const refs = useRef([]);
   if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
-  const move = (at) => {
-    const next = Math.max(0, Math.min(stops.length - 1, at));
-    refs.current[next]?.focus();
-  };
   const onKeyDown = (at) => (event) => {
     const stop = stops[at];
     const inSlot = (step) => stops[at + step]?.index === stop.index ? at + step : at;
-    const target = event.key === "ArrowRight" ? at + 1 : event.key === "ArrowLeft" ? at - 1 : event.key === "ArrowDown" ? inSlot(1) : event.key === "ArrowUp" ? inSlot(-1) : event.key === "Home" ? 0 : event.key === "End" ? stops.length - 1 : void 0;
+    const target = event.key === "ArrowDown" ? inSlot(1) : event.key === "ArrowUp" ? inSlot(-1) : rovingTarget(event.key, "ltr", at, stops.length, false);
     if (target !== void 0) {
       event.preventDefault();
-      move(target);
-    } else if (event.key === "Enter" || event.key === " ") {
+      refs.current[target]?.focus();
+    } else if (onPick && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onPick(stop);
     }
   };
   const left = plot.x;
   const right = plot.x + plot.width;
+  const middle = plot.y + plot.height / 2;
+  const drawn = stops.length <= ALL_STOPS_UP_TO ? void 0 : /* @__PURE__ */ new Set([0, current - 1, current, current + 1, stops.length - 1]);
   return /* @__PURE__ */ jsx("g", { role: "group", "aria-label": label, children: stops.map((stop, at) => {
+    if (drawn && !drawn.has(at)) return null;
     const a = finite(scale(stop.from)) ?? left;
     const b = finite(scale(stop.to)) ?? right;
     const x0 = Math.max(left, Math.min(a, b));
@@ -208,9 +210,9 @@ function PointKeys({
         ref: (node) => {
           refs.current[at] = node;
         },
-        role: "button",
+        role: onPick ? "button" : "img",
         tabIndex: at === current ? 0 : -1,
-        "aria-label": stop.name,
+        "aria-label": stop.name(),
         "data-point-key": stop.key,
         x: x0,
         y: plot.y,
@@ -224,14 +226,33 @@ function PointKeys({
           // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
           stop.key === void 0 && "focus-visible:stroke-[var(--brand)]"
         ),
-        onFocus: () => onFocusStop(at),
-        onBlur: onBlurStops,
+        onFocus: (event) => {
+          onFocusStop(at);
+          pointAt(event.currentTarget, (x0 + x1) / 2, middle);
+        },
+        onBlur: (event) => {
+          onBlurStops();
+          const next = event.relatedTarget;
+          if (!next || !refs.current.includes(next)) {
+            pointAt(event.currentTarget, left - 1, middle);
+          }
+        },
         onKeyDown: onKeyDown(at)
       },
       `${stop.index}:${stop.key ?? ""}`
     );
   }) });
 }
+function pointAt(within, x, y) {
+  const wrapper = within.closest(".recharts-wrapper");
+  if (!wrapper) return;
+  const box = wrapper.getBoundingClientRect();
+  const scaleX = wrapper.offsetWidth > 0 ? box.width / wrapper.offsetWidth : 1;
+  const scaleY = wrapper.offsetHeight > 0 ? box.height / wrapper.offsetHeight : 1;
+  wrapper.dispatchEvent(
+    new MouseEvent("mousemove", { bubbles: true, clientX: box.left + x * scaleX, clientY: box.top + y * scaleY })
+  );
+}
 function SeriesPlot({
   model,
   xAxis,
@@ -255,13 +276,16 @@ function SeriesPlot({
   maxVisibleAxes,
   axisBudget = "auto",
   onAxisBudget,
-  maxRows
+  maxRows,
+  "aria-label": ariaLabel,
+  description
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
   const { scale } = useTextSize();
   const edgeFor = useChartEdge();
+  const edges = useEdgesInForce("auto");
   const ticksAim = tickTarget(scale);
   const grow = (px) => scale === 1 ? px : Math.round(px * scale);
   const [keyStop, setKeyStop] = useState(0);
@@ -308,8 +332,23 @@ function SeriesPlot({
     onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
   }, [budgetKey, onAxisBudget]);
   const { className: heightClass, style: heightStyle } = chartHeightProps(height);
-  if (!model.source.length || !series.length) {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex w-full items-center justify-center px-2 text-center", heightClass), style: heightStyle, children: empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: labels.empty }) });
+  const drawable = model.source.length > 0 && series.length > 0;
+  const spoken = [description, drawable && zoom?.layer ? labels.zoomHint : void 0].filter(Boolean).join(" ");
+  const about = useFigureDescription(spoken || void 0);
+  const figure = { role: "figure", "aria-label": ariaLabel, "aria-describedby": about.describedBy };
+  if (!drawable) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...figure,
+        className: cn("flex w-full items-center justify-center px-2 text-center", heightClass),
+        style: heightStyle,
+        children: [
+          empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: labels.empty }),
+          about.node
+        ]
+      }
+    );
   }
   const x = xAxis;
   const xKey = model.plotKey;
@@ -411,10 +450,10 @@ function SeriesPlot({
     return row2 ? { index: origin(index), row: row2, x: xOf(index), key } : void 0;
   };
   const stops = [];
-  if (onPointClick) {
+  {
     const valueText = valueFormat ?? number;
     const nameOf = (entry) => typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
-    const said = (entry, value) => {
+    const cellText = (entry, value) => {
       const name = nameOf(entry);
       return name ? `${name}: ${valueText(value)}` : valueText(value);
     };
@@ -426,19 +465,21 @@ function SeriesPlot({
     placed.forEach(({ index, at }, k) => {
       const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
       const to = k < placed.length - 1 ? (placed[k + 1].at + at) / 2 : high;
-      const heading = xLabel(at);
-      const where = typeof heading === "string" && heading ? heading : xFormat(at);
+      const where = () => {
+        const heading = xLabel(at);
+        return typeof heading === "string" && heading ? heading : xFormat(at);
+      };
       const valued = (bars.length ? bars : series).map((entry) => ({ entry, value: finite(rows[index]?.[entry.key]) })).filter((cell) => cell.value !== void 0);
       if (bars.length) {
         for (const { entry, value } of valued) {
-          stops.push({ index, key: entry.key, from, to, name: `${where} \u2014 ${said(entry, value)}` });
+          stops.push({ index, key: entry.key, from, to, name: () => `${where()} \u2014 ${cellText(entry, value)}` });
         }
       } else if (valued.length) {
         stops.push({
           index,
           from,
           to,
-          name: `${where} \u2014 ${valued.map(({ entry, value }) => said(entry, value)).join(", ")}`
+          name: () => `${where()} \u2014 ${valued.map(({ entry, value }) => cellText(entry, value)).join(", ")}`
         });
       }
     });
@@ -490,6 +531,7 @@ function SeriesPlot({
   const chart = /* @__PURE__ */ jsx(
     ChartContainer,
     {
+      ...inRow ? {} : { role: "figure", "aria-label": ariaLabel, description: spoken || void 0 },
       ref: setBox,
       "data-axis-budget": budgeted.length ? budgetKey.replace(/\n/g, " ") : void 0,
       "data-thinned": thin ? `${thin.kept.length}/${allPlotted.length}` : void 0,
@@ -509,7 +551,7 @@ function SeriesPlot({
           data: plotted,
           margin,
           stackOffset: "sign",
-          accessibilityLayer: !onPointClick,
+          accessibilityLayer: false,
           onClick: onPointClick ? (state) => {
             const index = Number(state?.activeTooltipIndex ?? state?.activeIndex);
             const hit = Number.isInteger(index) ? hitAt(index) : void 0;
@@ -609,7 +651,7 @@ function SeriesPlot({
               const type = entry.type ?? "line";
               const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
               const color = `var(--color-${entry.key})`;
-              const edge = edgeFor(config[entry.key]?.color);
+              const edge = edges === "contrast" ? edgeFor(config[entry.key]?.color) : void 0;
               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";
@@ -649,7 +691,7 @@ function SeriesPlot({
                     dataKey: entry.key,
                     stackId: entry.stack,
                     stroke: edge ?? color,
-                    strokeWidth: edge ? 1 : width2,
+                    strokeWidth: width2,
                     strokeDasharray: dash,
                     fill: color,
                     fillOpacity: entry.fillOpacity ?? (entry.stack !== void 0 ? 0.55 : 0.2),
@@ -747,10 +789,10 @@ function SeriesPlot({
                   setKeyFocus(at);
                 },
                 onBlurStops: () => setKeyFocus(void 0),
-                onPick: (stop) => {
+                onPick: onPointClick ? (stop) => {
                   const hit = hitAt(stop.index, stop.key);
-                  if (hit) onPointClick?.(hit);
-                }
+                  if (hit) onPointClick(hit);
+                } : void 0
               }
             ),
             zoom?.layer
@@ -772,10 +814,11 @@ function SeriesPlot({
       )
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col", heightClass), style: heightStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { ...figure, className: cn("flex w-full flex-col", heightClass), style: heightStyle, children: [
     placement === "above" && row,
     chart,
-    placement === "below" && row
+    placement === "below" && row,
+    about.node
   ] });
 }
 const ZoomablePlot = withChartZoom(SeriesPlot);