@cdx-ui/components 0.3.5 → 0.3.7

package/lib/module/components/LineChart/index.js

@@ -0,0 +1,738 @@
+"use strict";
+
+/* SVG `x`/`y` are paint coordinates. RN View `x`/`y` layout props are deprecated and share the name. */
+/* eslint-disable @typescript-eslint/no-deprecated */
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle, ClipPath, Defs, G, Line, LinearGradient, Path, Rect, Stop, Svg, Text as SvgText } from 'react-native-svg';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, useControllableState } from '@cdx-ui/utils';
+import { ChartInspector, ChartTooltipLayer, chartValueText } from '../chart/ChartInspector';
+import { resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { HIDDEN_SVG_PROPS } from '../chart/hiddenSvgProps';
+import { resolveChartBox } from '../chart/size';
+import { useChartHostWidth } from '../chart/useChartHostWidth';
+import { ChartLinearFills, chartFillUrl, chartSeriesColor, resolveChartColor, useChartChrome, useChartColorPaints, useChartGradientId } from '../chart/palette';
+import { lerpVector, useChartMorph, useChartMotionEnabled } from '../chart/motion';
+import { layoutLineChart, layoutLineChartMarkers, lineChartGutters, lineChartMarkerGutters, nearestCategoryInPlot, lineSeriesPaths, resolveLineChartContentSize, resolveLineChartData } from './geometry';
+import { LINE_ACTIVE_DOT_RADIUS, LINE_DOT_RADIUS, LINE_STROKE_WIDTH, lineChartLegendItemVariants, lineChartLegendLabelVariants, lineChartLegendVariants, lineChartRootVariants } from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const INACTIVE_OPACITY = 0.4;
+const DASH = '6 4';
+/** Within this many px of a plot edge, callouts anchor inward so they are not clipped. */
+const EDGE_LABEL_ROOM = 32;
+/** Paint slack around the plot so dots and strokes on its edges are not cut in half. */
+const CLIP_BLEED = LINE_ACTIVE_DOT_RADIUS + LINE_STROKE_WIDTH;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+function LineChartInner({
+  dataset,
+  series: seriesProp,
+  xAxis: xAxisProp,
+  yAxis: yAxisProp,
+  size = 'lg',
+  width: widthProp,
+  height: heightProp,
+  grid,
+  palette = 'auto',
+  hideLegend = false,
+  tooltip: tooltipProp,
+  scrollable = true,
+  visiblePoints,
+  selectedItem: selectedItemProp,
+  defaultSelectedItem,
+  onSelectedItemChange,
+  referenceLines,
+  markers,
+  locale,
+  localeText: localeTextProp,
+  animation,
+  accessibilityLabel,
+  className,
+  style,
+  onLayout,
+  ...props
+}, ref) {
+  const animated = useChartMotionEnabled(animation);
+  const gradientId = useChartGradientId('line-fill');
+  const chrome = useChartChrome();
+  const paints = useChartColorPaints();
+  const localeText = useMemo(() => resolveChartLocaleText(localeTextProp), [localeTextProp]);
+  const xAxis = xAxisProp?.[0];
+  const yAxis = yAxisProp?.[0];
+  const showValueTicks = yAxis?.position !== 'none';
+  const showCategoryLabels = xAxis?.position !== 'none';
+  const resolved = useMemo(() => resolveLineChartData({
+    dataset,
+    series: seriesProp,
+    xAxis
+  }), [dataset, seriesProp, xAxis]);
+  const formatters = useMemo(() => seriesProp.map(item => resolveValueFormatter(item, yAxis, locale)), [seriesProp, yAxis, locale]);
+  const formatTick = useMemo(() => {
+    const format = resolveValueFormatter(null, yAxis, locale);
+    return value => format(value, {
+      location: 'tick'
+    });
+  }, [yAxis, locale]);
+  const box = resolveChartBox(size, widthProp, heightProp);
+  const [hostWidth, handleHostLayout] = useChartHostWidth(onLayout);
+  const viewportWidth = hostWidth > 0 ? Math.min(hostWidth, box.width) : box.width;
+  const viewportHeight = box.height;
+  const gutters = useMemo(() => lineChartMarkerGutters(dataset.length, markers, lineChartGutters({
+    showValueTicks,
+    showCategoryLabels
+  })), [dataset.length, markers, showValueTicks, showCategoryLabels]);
+  const content = useMemo(() => resolveLineChartContentSize({
+    viewportWidth,
+    viewportHeight,
+    categoryCount: dataset.length,
+    gutters,
+    scrollable,
+    visiblePoints
+  }), [viewportWidth, viewportHeight, dataset.length, gutters, scrollable, visiblePoints]);
+  const layout = useMemo(() => layoutLineChart({
+    categories: resolved.categories,
+    series: resolved.series,
+    width: content.width,
+    height: content.height,
+    referenceLines,
+    yAxis,
+    formatTick,
+    gutters
+  }), [resolved, content.width, content.height, referenceLines, yAxis, formatTick, gutters]);
+  const markerLayout = useMemo(() => layoutLineChartMarkers(markers ?? [], layout.series), [markers, layout.series]);
+  const overflowsX = content.width > viewportWidth + 0.5;
+  const morph = useChartMorph(layout.series.flatMap(item => item.points.map(point => point.y ?? Number.NaN)), layout.series.flatMap(item => item.points.map(point => point.y === null ? Number.NaN : layout.baselineY)), animated);
+  const fills = seriesProp.map((item, seriesIndex) => resolveChartColor(item.color, paints) ?? paints[chartSeriesColor(seriesIndex, seriesProp.length, palette, 'line')]);
+  const marks = seriesProp.map(item => item.showMark ?? false);
+  const summary = accessibilityLabel ?? lineSummary(layout, formatters, localeText);
+  const interactive = onSelectedItemChange !== undefined || selectedItemProp !== undefined || defaultSelectedItem !== undefined;
+  const [selectedItemState, setSelectedItem] = useControllableState({
+    prop: selectedItemProp,
+    defaultProp: defaultSelectedItem ?? null,
+    onChange: next => {
+      onSelectedItemChange?.(next ?? null);
+    }
+  });
+  const selectedIndex = selectedItemState?.dataIndex ?? null;
+  const showTooltip = (tooltipProp?.trigger ?? 'axis') !== 'none';
+  const inspectable = (interactive || showTooltip) && dataset.length > 0;
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [dismissed, setDismissed] = useState(false);
+  const [scrubbing, setScrubbing] = useState(false);
+  const scrollX = useRef(0);
+  const highlightIndex = activeIndex ?? selectedIndex;
+  const tooltipIndex = showTooltip && !dismissed && activeIndex !== null ? activeIndex : null;
+  const activate = index => {
+    setDismissed(false);
+    setActiveIndex(prev => prev === index ? prev : index);
+  };
+  const deactivate = index => {
+    setActiveIndex(prev => prev === index ? null : prev);
+  };
+  const selectIndex = index => {
+    if (selectedIndex === index) {
+      setSelectedItem(null);
+      return;
+    }
+    const owner = layout.series.find(item => item.points[index]?.value != null) ?? layout.series[0];
+    setSelectedItem(owner === undefined ? null : {
+      seriesId: owner.key,
+      dataIndex: index
+    });
+  };
+  const markerLegend = markerLayout.filter(item => item.legend !== undefined && item.legend.length > 0);
+  const showLegend = !hideLegend && (seriesProp.length > 0 || markerLegend.length > 0);
+  const plot = /*#__PURE__*/_jsx(LinePlot, {
+    layout: layout,
+    morph: morph,
+    fills: fills,
+    gradientId: gradientId,
+    chrome: chrome,
+    marks: marks,
+    showGrid: grid?.horizontal !== false,
+    highlightIndex: highlightIndex,
+    formatters: formatters,
+    markers: markerLayout,
+    paints: paints
+  });
+  const plotWidth = content.width - layout.plot.x;
+  const bleed = Math.min(CLIP_BLEED, layout.plot.x);
+  const axisWidth = layout.plot.x - bleed;
+  const targets = inspectable ? lineInspectorTargets({
+    layout,
+    width: plotWidth,
+    height: viewportHeight,
+    fills,
+    formatters,
+    localeText,
+    selectedIndex,
+    markers: markerLayout
+  }) : [];
+  const tip = tooltipIndex === null ? undefined : targets.at(tooltipIndex);
+  const ticks = showValueTicks ? /*#__PURE__*/_jsx(_Fragment, {
+    children: layout.valueTicks.map(tick => /*#__PURE__*/_jsx(SvgText, {
+      x: tick.x,
+      y: tick.y,
+      fill: chrome.label,
+      fontFamily: chrome.fontFamily,
+      fontSize: chrome.labelSize,
+      textAnchor: "end",
+      alignmentBaseline: "middle",
+      children: tick.text
+    }, `tick-${String(tick.value)}`))
+  }) : null;
+  const chart = /*#__PURE__*/_jsxs(View, {
+    className: "flex-row",
+    style: {
+      width: viewportWidth,
+      height: viewportHeight
+    },
+    ...dataAttributes({
+      slot: 'line-chart-plot'
+    }),
+    children: [/*#__PURE__*/_jsx(Svg, {
+      width: axisWidth,
+      height: viewportHeight,
+      viewBox: `0 0 ${String(axisWidth)} ${String(content.height)}`,
+      ...HIDDEN_SVG_PROPS,
+      children: ticks
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      nestedScrollEnabled: true,
+      scrollEnabled: overflowsX && !scrubbing,
+      showsHorizontalScrollIndicator: overflowsX,
+      scrollEventThrottle: 16,
+      onScroll: event => {
+        scrollX.current = event.nativeEvent.contentOffset.x;
+        if (tooltipIndex !== null) {
+          setDismissed(true);
+        }
+      },
+      className: "flex-1",
+      style: {
+        height: viewportHeight
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        style: {
+          width: plotWidth + bleed,
+          height: viewportHeight
+        },
+        children: [/*#__PURE__*/_jsx(Svg, {
+          width: plotWidth + bleed,
+          height: viewportHeight,
+          viewBox: `0 0 ${String(plotWidth + bleed)} ${String(content.height)}`,
+          pointerEvents: "none",
+          ...HIDDEN_SVG_PROPS,
+          children: /*#__PURE__*/_jsx(G, {
+            transform: `translate(${String(-axisWidth)}, 0)`,
+            children: plot
+          })
+        }), inspectable ? /*#__PURE__*/_jsx(View, {
+          className: "absolute top-0 bottom-0",
+          style: {
+            left: bleed,
+            width: plotWidth
+          },
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/_jsx(LineInspector, {
+            layout: layout,
+            targets: targets,
+            summary: summary,
+            selectable: interactive,
+            selectedIndex: selectedIndex,
+            activeIndex: activeIndex,
+            holdToScrub: overflowsX,
+            onScrubLockChange: setScrubbing,
+            onActivate: activate,
+            onDeactivate: deactivate,
+            onDismiss: () => {
+              setDismissed(true);
+            },
+            onSelectIndex: selectIndex
+          })
+        }) : null]
+      })
+    }), tip !== undefined ? /*#__PURE__*/_jsx(ChartTooltipLayer, {
+      content: tip.tooltip,
+      noValueText: localeText.noValue,
+      slot: "line-chart",
+      anchorX: layout.plot.x + tip.anchorX - scrollX.current,
+      anchorY: tip.anchorY,
+      anchorRadius: tip.anchorRadius,
+      width: viewportWidth,
+      height: viewportHeight
+    }) : null]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(lineChartRootVariants(), className),
+    style: style,
+    accessible: !inspectable && !showLegend,
+    accessibilityRole: !inspectable && !showLegend ? 'image' : undefined,
+    accessibilityLabel: !inspectable && !showLegend ? summary : undefined,
+    ...props,
+    onLayout: handleHostLayout,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'line-chart'
+    })),
+    children: [chart, showLegend ? /*#__PURE__*/_jsxs(View, {
+      className: lineChartLegendVariants(),
+      ...dataAttributes({
+        slot: 'line-chart-legend'
+      }),
+      children: [seriesProp.map((item, seriesIndex) => {
+        const selectedPoint = highlightIndex === null ? undefined : layout.series[seriesIndex]?.points.at(highlightIndex);
+        const isSelected = selectedPoint !== undefined && selectedPoint.value !== null;
+        return /*#__PURE__*/_jsxs(View, {
+          className: lineChartLegendItemVariants(),
+          ...dataAttributes({
+            slot: 'line-chart-legend-item'
+          }),
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "h-0.5 w-3 rounded-full",
+            style: {
+              backgroundColor: fills[seriesIndex]
+            }
+          }), /*#__PURE__*/_jsx(Text, {
+            className: lineChartLegendLabelVariants({
+              selected: isSelected
+            }),
+            children: seriesLegendLabel(item, seriesProp.length, localeText)
+          })]
+        }, item.id);
+      }), markerLegend.map(item => /*#__PURE__*/_jsxs(View, {
+        className: lineChartLegendItemVariants(),
+        ...dataAttributes({
+          slot: 'line-chart-legend-item'
+        }),
+        children: [/*#__PURE__*/_jsx(View, {
+          className: "size-2.5 rounded-full",
+          style: {
+            backgroundColor: resolveChartColor(item.color, paints) ?? fills[item.seriesIndex] ?? fills[0]
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          className: lineChartLegendLabelVariants(),
+          children: item.legend
+        })]
+      }, `legend-${item.key}`))]
+    }) : null]
+  });
+}
+export const LineChart = /*#__PURE__*/forwardRef(LineChartInner);
+LineChart.displayName = 'LineChart';
+function lineSummary(layout, formatters, localeText) {
+  const lastIndex = layout.categoryLabels.length - 1;
+  const last = layout.categoryLabels[lastIndex];
+  if (last === undefined) {
+    return localeText.lineChartSummary(null);
+  }
+  const latest = {
+    label: last.title,
+    values: layout.series.flatMap((item, seriesIndex) => {
+      const value = item.points[lastIndex]?.value;
+      if (value == null) {
+        return [];
+      }
+      const format = formatters[seriesIndex];
+      return [{
+        label: item.label,
+        formattedValue: format?.(value, {
+          location: 'a11y',
+          seriesId: item.key,
+          dataIndex: lastIndex
+        }) ?? ''
+      }];
+    })
+  };
+  return localeText.lineChartSummary(latest);
+}
+function showsMark(mark, index) {
+  return typeof mark === 'function' ? mark({
+    index
+  }) : mark === true;
+}
+function LinePlot({
+  layout,
+  morph,
+  fills,
+  gradientId,
+  chrome,
+  marks,
+  showGrid,
+  highlightIndex,
+  formatters,
+  markers,
+  paints
+}) {
+  const xs = layout.categoryLabels.map(item => item.x);
+  const clipId = `${gradientId}-clip`;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ChartLinearFills, {
+      idPrefix: gradientId,
+      colors: fills,
+      x2: "100%",
+      y2: "0%"
+    }), /*#__PURE__*/_jsxs(Defs, {
+      children: [fills.map((color, index) => /*#__PURE__*/_jsxs(LinearGradient, {
+        id: `${gradientId}-area-${String(index)}`,
+        x1: "0%",
+        y1: "0%",
+        x2: "0%",
+        y2: "100%",
+        children: [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: color,
+          stopOpacity: 0.32
+        }), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: color,
+          stopOpacity: 0
+        })]
+      }, `area-${String(index)}`)), /*#__PURE__*/_jsx(ClipPath, {
+        id: clipId,
+        children: /*#__PURE__*/_jsx(Rect, {
+          x: layout.plot.x - CLIP_BLEED,
+          y: layout.plot.y - CLIP_BLEED,
+          width: layout.plot.width + CLIP_BLEED * 2,
+          height: layout.plot.height + CLIP_BLEED * 2
+        })
+      })]
+    }), showGrid ? layout.gridLines.map(line => /*#__PURE__*/_jsx(Line, {
+      x1: line.x1,
+      y1: line.y1,
+      x2: line.x2,
+      y2: line.y2,
+      stroke: chrome.grid,
+      strokeWidth: 1
+    }, `grid-${String(line.x1)}-${String(line.y1)}`)) : null, layout.referenceLines.map((line, index) => /*#__PURE__*/_jsxs(G, {
+      children: [/*#__PURE__*/_jsx(Line, {
+        x1: line.x1,
+        y1: line.y1,
+        x2: line.x2,
+        y2: line.y2,
+        stroke: chrome.label,
+        strokeWidth: 1,
+        strokeDasharray: DASH
+      }), line.label !== undefined && line.label.length > 0 ? /*#__PURE__*/_jsx(SvgText, {
+        x: line.x1 + 4,
+        y: line.y1 - 4,
+        fill: chrome.label,
+        fontFamily: chrome.fontFamily,
+        fontSize: chrome.captionSize,
+        textAnchor: "start",
+        children: line.label
+      }) : null]
+    }, `ref-${String(line.y1)}-${String(index)}`)), /*#__PURE__*/_jsxs(G, {
+      clipPath: `url(#${clipId})`,
+      children: [layout.series.map((item, seriesIndex) => /*#__PURE__*/_jsx(AnimatedSeries, {
+        item: item,
+        seriesIndex: seriesIndex,
+        xs: xs,
+        baselineY: layout.baselineY,
+        morph: morph,
+        areaFill: `url(#${gradientId}-area-${String(seriesIndex)})`,
+        stroke: chartFillUrl(gradientId, seriesIndex),
+        opacity: highlightIndex !== null ? INACTIVE_OPACITY + 0.35 : 1
+      }, item.key)), layout.series.flatMap((item, seriesIndex) => item.points.map(point => point.y === null || !showsMark(marks[seriesIndex], point.index) ? null : /*#__PURE__*/_jsx(AnimatedDot, {
+        cx: point.x,
+        slot: seriesIndex * xs.length + point.index,
+        morph: morph,
+        fill: chrome.surface,
+        stroke: fills[seriesIndex] ?? chrome.label
+      }, `dot-${item.key}-${String(point.index)}`)))]
+    }), highlightIndex !== null ? (() => {
+      const label = layout.categoryLabels.at(highlightIndex);
+      if (label === undefined) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(Line, {
+        x1: label.x,
+        x2: label.x,
+        y1: layout.plot.y,
+        y2: layout.plot.y + layout.plot.height,
+        stroke: chrome.label,
+        strokeWidth: 1,
+        strokeDasharray: "3 4"
+      });
+    })() : null, markers.map(marker => marker.guide ? /*#__PURE__*/_jsx(Line, {
+      x1: marker.x,
+      x2: marker.x,
+      y1: layout.plot.y,
+      y2: layout.plot.y + layout.plot.height,
+      stroke: chrome.grid,
+      strokeWidth: 1,
+      strokeDasharray: "3 4",
+      opacity: highlightIndex !== null && highlightIndex !== marker.index ? INACTIVE_OPACITY : 1
+    }, `marker-guide-${marker.key}`) : null), highlightIndex !== null ? layout.series.flatMap((item, seriesIndex) => {
+      const point = item.points.at(highlightIndex);
+      if (point?.y == null) {
+        return [];
+      }
+      return [/*#__PURE__*/_jsx(Circle, {
+        cx: point.x,
+        cy: point.y,
+        r: LINE_ACTIVE_DOT_RADIUS,
+        fill: chrome.surface,
+        stroke: fills[seriesIndex],
+        strokeWidth: LINE_STROKE_WIDTH
+      }, `active-${item.key}`)];
+    }) : null, markers.map(marker => {
+      const color = resolveChartColor(marker.color, paints) ?? fills[marker.seriesIndex] ?? fills.at(0) ?? chrome.label;
+      const nearEnd = marker.x > layout.plot.x + layout.plot.width - EDGE_LABEL_ROOM;
+      const nearStart = marker.x < layout.plot.x + EDGE_LABEL_ROOM;
+      const captionAnchor = nearEnd ? 'end' : nearStart ? 'start' : 'middle';
+      const dimmed = highlightIndex !== null && highlightIndex !== marker.index;
+      const markerOpacity = dimmed ? INACTIVE_OPACITY : 1;
+      const format = formatters[marker.seriesIndex];
+      return /*#__PURE__*/_jsxs(G, {
+        children: [marker.dot ? /*#__PURE__*/_jsx(Circle, {
+          cx: marker.x,
+          cy: marker.y,
+          r: LINE_ACTIVE_DOT_RADIUS,
+          fill: color,
+          stroke: chrome.surface,
+          strokeWidth: LINE_STROKE_WIDTH,
+          opacity: markerOpacity
+        }) : null, marker.label !== undefined && marker.label.length > 0 ? /*#__PURE__*/_jsx(SvgText, {
+          x: marker.x,
+          y: marker.y - 16,
+          fill: chrome.label,
+          fontFamily: chrome.fontFamily,
+          fontSize: chrome.captionSize,
+          textAnchor: captionAnchor,
+          opacity: markerOpacity,
+          children: marker.label
+        }) : null, marker.showValue ? /*#__PURE__*/_jsx(SvgText, {
+          x: nearEnd ? marker.x - 10 : marker.x + 10,
+          y: marker.y + 4,
+          fill: chrome.label,
+          fontFamily: chrome.fontFamily,
+          fontSize: chrome.captionSize,
+          textAnchor: nearEnd ? 'end' : 'start',
+          opacity: markerOpacity,
+          children: format?.(marker.value, {
+            location: 'label',
+            seriesId: marker.seriesId,
+            dataIndex: marker.index
+          }) ?? ''
+        }) : null]
+      }, `marker-${marker.key}`);
+    }), layout.categoryLabels.map((item, index) => item.tick ? /*#__PURE__*/_jsx(SvgText, {
+      x: item.x,
+      y: item.y,
+      fill: chrome.label,
+      fontFamily: chrome.fontFamily,
+      fontSize: chrome.labelSize,
+      textAnchor: layout.categoryLabels.length < 2 ? 'middle' : index === 0 ? 'start' : index === layout.categoryLabels.length - 1 ? 'end' : 'middle',
+      alignmentBaseline: "middle",
+      children: item.label
+    }, `cat-${item.label}-${String(index)}`) : null)]
+  });
+}
+function categoryValues(layout, index, fills, formatters, location) {
+  return layout.series.flatMap((item, seriesIndex) => {
+    const point = item.points.at(index);
+    if (point?.value == null) {
+      return [];
+    }
+    const format = formatters[seriesIndex];
+    return [{
+      seriesId: item.key,
+      label: item.label,
+      color: fills[seriesIndex] ?? '',
+      formattedValue: format?.(point.value, {
+        location,
+        seriesId: item.key,
+        dataIndex: index
+      }) ?? ''
+    }];
+  });
+}
+function seriesLegendLabel(item, seriesCount, localeText) {
+  if (item.label !== undefined && item.label.length > 0) {
+    return item.label;
+  }
+  return seriesCount === 1 ? localeText.defaultSeriesLabel : item.id;
+}
+function categoryAnnouncement(label, values, noValue, notes = []) {
+  const parts = values.map(chartValueText);
+  const base = parts.length > 0 ? `${label}, ${parts.join(', ')}` : `${label}, ${noValue}`;
+  return notes.length > 0 ? `${base}, ${notes.join(', ')}` : base;
+}
+function markerNotes(markers, index) {
+  return markers.filter(marker => marker.index === index).flatMap(marker => [marker.legend, marker.label].filter(text => text !== undefined && text.length > 0));
+}
+function lineKeyboardNeighbor(index, key, count) {
+  if (key === 'Tab') {
+    return index + 1 < count ? index + 1 : null;
+  }
+  if (key === 'Shift+Tab') {
+    return index > 0 ? index - 1 : null;
+  }
+  return null;
+}
+
+/** Targets in scroll-content coordinates, which start at `layout.plot.x`. */
+function lineInspectorTargets({
+  layout,
+  width,
+  height,
+  fills,
+  formatters,
+  localeText,
+  selectedIndex,
+  markers
+}) {
+  const count = layout.categoryLabels.length;
+  const band = layout.plot.width / Math.max(count - 1, 1);
+  const offset = layout.plot.x;
+  return layout.categoryLabels.map((item, index) => {
+    const x = item.x - offset;
+    const left = index === 0 ? 0 : x - band / 2;
+    const right = index === count - 1 ? width : x + band / 2;
+    const pointYs = layout.series.flatMap(series => {
+      const y = series.points.at(index)?.y;
+      return y == null ? [] : [y];
+    });
+    return {
+      key: `hit-${String(index)}`,
+      left,
+      top: 0,
+      width: Math.max(right - left, 1),
+      height,
+      anchorX: x,
+      anchorY: pointYs.length > 0 ? Math.min(...pointYs) : layout.plot.y,
+      tooltip: {
+        title: item.title,
+        items: categoryValues(layout, index, fills, formatters, 'tooltip')
+      },
+      accessibilityLabel: categoryAnnouncement(item.title, categoryValues(layout, index, fills, formatters, 'a11y'), localeText.noValue, markerNotes(markers, index)),
+      selected: selectedIndex === index
+    };
+  });
+}
+function LineInspector({
+  layout,
+  targets,
+  summary,
+  selectable,
+  selectedIndex,
+  activeIndex,
+  onActivate,
+  onDeactivate,
+  onDismiss,
+  onSelectIndex,
+  holdToScrub,
+  onScrubLockChange
+}) {
+  const count = layout.categoryLabels.length;
+  const offset = layout.plot.x;
+  return /*#__PURE__*/_jsx(ChartInspector, {
+    targets: targets,
+    summary: summary,
+    selectable: selectable,
+    activeIndex: activeIndex,
+    selectedIndex: selectedIndex,
+    slot: "line-chart",
+    holdToScrub: holdToScrub,
+    onActivate: onActivate,
+    onDeactivate: onDeactivate,
+    onDismiss: onDismiss,
+    onSelectIndex: onSelectIndex,
+    hitTest: (x, y) => nearestCategoryInPlot(layout.categoryLabels, layout.plot, x, y, offset),
+    neighborIndex: (index, key) => lineKeyboardNeighbor(index, key, count),
+    onScrubLockChange: onScrubLockChange
+  });
+}
+function AnimatedSeries({
+  item,
+  seriesIndex,
+  xs,
+  baselineY,
+  morph,
+  areaFill,
+  stroke,
+  opacity
+}) {
+  const {
+    from,
+    to,
+    progress
+  } = morph;
+  const start = seriesIndex * xs.length;
+  const end = start + xs.length;
+  const dashAt = item.dashAt;
+  const curve = item.curve;
+  const lineProps = useAnimatedProps(() => {
+    const ys = lerpVector(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: lineSeriesPaths(xs, ys, curve, baselineY, dashAt).path
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  const dashProps = useAnimatedProps(() => {
+    const ys = lerpVector(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: lineSeriesPaths(xs, ys, curve, baselineY, dashAt).dashedPath
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  const areaProps = useAnimatedProps(() => {
+    const ys = lerpVector(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: lineSeriesPaths(xs, ys, curve, baselineY, dashAt).areaPath
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  return /*#__PURE__*/_jsxs(G, {
+    children: [item.area && item.areaPath.length > 0 ? /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: areaProps,
+      fill: areaFill
+    }) : null, item.path.length > 0 ? /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: lineProps,
+      fill: "none",
+      stroke: stroke,
+      strokeWidth: LINE_STROKE_WIDTH,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: item.dashed ? DASH : undefined,
+      opacity: opacity
+    }) : null, item.dashedPath.length > 0 ? /*#__PURE__*/_jsx(AnimatedPath, {
+      animatedProps: dashProps,
+      fill: "none",
+      stroke: stroke,
+      strokeWidth: LINE_STROKE_WIDTH,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: DASH,
+      opacity: opacity
+    }) : null]
+  });
+}
+function AnimatedDot({
+  cx,
+  slot,
+  morph,
+  fill,
+  stroke
+}) {
+  const {
+    from,
+    to,
+    progress
+  } = morph;
+  const animatedProps = useAnimatedProps(() => {
+    const ys = lerpVector(from.get(), to.get(), progress.get());
+    return {
+      cy: ys[slot] ?? 0
+    };
+  }, [from, to, progress, slot]);
+  return /*#__PURE__*/_jsx(AnimatedCircle, {
+    animatedProps: animatedProps,
+    cx: cx,
+    r: LINE_DOT_RADIUS,
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: LINE_STROKE_WIDTH
+  });
+}
+//# sourceMappingURL=index.js.map