@cdx-ui/components 0.3.4 → 0.3.6

package/src/components/LineChart/index.tsx

@@ -0,0 +1,1109 @@
+/* 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, type ForwardedRef, type ReactElement } from 'react';
+import { ScrollView, Text, View, type ViewProps } 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 type { AnimationRootDisableAll } from '../../animation';
+import {
+  ChartInspector,
+  ChartTooltipLayer,
+  chartValueText,
+  type ChartInspectorTarget,
+} from '../chart/ChartInspector';
+import { resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { resolveChartBox } from '../chart/size';
+import type {
+  ChartAxis,
+  ChartGrid,
+  ChartLocaleText,
+  ChartReferenceLine,
+  ChartSelectedItem,
+  ChartSizeProps,
+  ChartSummaryCategory,
+  ChartTooltipItem,
+  ChartTooltipProps,
+  ChartValueFormatter,
+} from '../chart/types';
+import { useChartHostWidth } from '../chart/useChartHostWidth';
+import {
+  ChartLinearFills,
+  chartFillUrl,
+  chartSeriesColor,
+  resolveChartColor,
+  useChartChrome,
+  useChartColorPaints,
+  useChartGradientId,
+  type ChartChrome,
+  type ChartColorPaints,
+  type ChartPalette,
+} from '../chart/palette';
+import { lerpVector, useChartMorph, useChartMotionEnabled, type ChartMorph } from '../chart/motion';
+import {
+  layoutLineChart,
+  layoutLineChartMarkers,
+  lineChartGutters,
+  lineChartMarkerGutters,
+  nearestCategoryInPlot,
+  lineSeriesPaths,
+  resolveLineChartContentSize,
+  resolveLineChartData,
+  type LineChartCurve,
+  type LineChartLayout,
+  type LineChartMarker,
+  type LineChartMarkerLayout,
+  type LineChartSeries,
+  type LineSeriesLayout,
+} from './geometry';
+import {
+  LINE_ACTIVE_DOT_RADIUS,
+  LINE_DOT_RADIUS,
+  LINE_STROKE_WIDTH,
+  lineChartLegendItemVariants,
+  lineChartLegendLabelVariants,
+  lineChartLegendVariants,
+  lineChartRootVariants,
+} from './styles';
+
+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);
+
+export type * from '../chart';
+export type { LineChartCurve, LineChartMarker, LineChartSeries };
+
+export interface LineChartProps<TRow extends object = object> extends ViewProps, ChartSizeProps {
+  /**
+   * One object per point, in x order. Columns are read only through `xAxis[0].dataKey` and
+   * `series[].dataKey`, so any key (including `label` or `tick`) is plain data. Non-finite
+   * values open a gap in that series.
+   */
+  dataset: readonly TRow[];
+  /** One line per entry. */
+  series: readonly LineChartSeries<TRow>[];
+  /**
+   * Category axis. Only the first entry is read; `dataKey` names the column with the category
+   * labels (defaults to the row index).
+   */
+  xAxis?: readonly ChartAxis<TRow>[];
+  /**
+   * Value axis. Only the first entry is read. `min` / `max` / `tickNumber` set the domain.
+   * `position: 'none'` hides the ticks; other sides draw on the left.
+   */
+  yAxis?: readonly ChartAxis<TRow>[];
+  /**
+   * Grid lines behind the plot. Only `horizontal` (at each value tick) is drawn; it stays on
+   * unless set to `false`.
+   * @default { horizontal: true }
+   */
+  grid?: ChartGrid;
+  /**
+   * Default series colors. `auto` uses the FI brand family (`simple-primary`, `-secondary`,
+   * `-tertiary`) for up to three series and switches the whole chart to `categorical-1`…`6`
+   * past that. `categorical` always uses the categorical slots. A series `color` wins.
+   * @default 'auto'
+   */
+  palette?: ChartPalette;
+  /**
+   * Hides the series legend under the chart.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * Shows every series at a category on hover, keyboard focus, or tap. On web, Tab / Shift+Tab
+   * and arrow keys move between categories, Tab past the last one leaves the chart, Home / End
+   * jump to the ends, and Escape hides the tooltip. `'item'` behaves like `'axis'` in v1.
+   * `'none'` hides it.
+   * @default { trigger: 'axis' }
+   */
+  tooltip?: ChartTooltipProps;
+  /**
+   * Controlled selection. `dataIndex` is the category; `seriesId` is the first series with a
+   * value there. `null` clears it. Omit to let the chart track selection itself.
+   */
+  selectedItem?: ChartSelectedItem;
+  /**
+   * Initial selection when `selectedItem` is omitted. Also makes the chart selectable.
+   */
+  defaultSelectedItem?: ChartSelectedItem;
+  /**
+   * Called when a category is pressed, with `null` when the selected category is pressed again.
+   * Providing this, `selectedItem`, or `defaultSelectedItem` makes the chart selectable and draws a crosshair.
+   */
+  onSelectedItemChange?: (item: ChartSelectedItem) => void;
+  /**
+   * When points need more room than the visible box, scroll instead of squeezing.
+   * The value axis stays pinned.
+   * @default true
+   */
+  scrollable?: boolean;
+  /**
+   * How many points fit in the viewport when `scrollable` is on. Omit to use a
+   * readable minimum band (~32px).
+   */
+  visiblePoints?: number;
+  /** Dashed horizontal lines across the plot at a value, with an optional caption. */
+  referenceLines?: readonly ChartReferenceLine[];
+  /** Point callouts (event name, value, extra legend row), pinned by `dataIndex`. */
+  markers?: readonly LineChartMarker[];
+  /**
+   * BCP 47 locale for default number formatting. Defaults to the `@cdx-ui/formatters` locale.
+   */
+  locale?: string;
+  /** Overrides for generated strings (summary, no-value text, default series name). */
+  localeText?: Partial<ChartLocaleText>;
+  /**
+   * Lines rise from the baseline on mount and tween to new values when `dataset` changes. Pass
+   * `'disable-all'` to draw the final state. Reduce Motion and `GlobalAnimationSettingsProvider`
+   * `disable-all` also turn it off.
+   */
+  animation?: AnimationRootDisableAll;
+  /** Accessible summary. Defaults to `localeText.lineChartSummary` of the last category. */
+  accessibilityLabel?: string;
+  /** Additional Uniwind/Tailwind classes, merged after the root's own styles. */
+  className?: string;
+}
+
+function LineChartInner<TRow extends object>(
+  {
+    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
+  }: LineChartProps<TRow>,
+  ref: ForwardedRef<View>,
+) {
+  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: number) => 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<ChartSelectedItem>({
+    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<number | null>(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: number) => {
+    setDismissed(false);
+    setActiveIndex((prev) => (prev === index ? prev : index));
+  };
+  const deactivate = (index: number) => {
+    setActiveIndex((prev) => (prev === index ? null : prev));
+  };
+  const selectIndex = (index: number) => {
+    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 = (
+    <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 ? (
+    <>
+      {layout.valueTicks.map((tick) => (
+        <SvgText
+          key={`tick-${String(tick.value)}`}
+          x={tick.x}
+          y={tick.y}
+          fill={chrome.label}
+          fontFamily={chrome.fontFamily}
+          fontSize={chrome.labelSize}
+          textAnchor="end"
+          alignmentBaseline="middle"
+        >
+          {tick.text}
+        </SvgText>
+      ))}
+    </>
+  ) : null;
+
+  const chart = (
+    <View
+      className="flex-row"
+      style={{ width: viewportWidth, height: viewportHeight }}
+      {...dataAttributes({ slot: 'line-chart-plot' })}
+    >
+      <Svg
+        width={axisWidth}
+        height={viewportHeight}
+        viewBox={`0 0 ${String(axisWidth)} ${String(content.height)}`}
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+      >
+        {ticks}
+      </Svg>
+      <ScrollView
+        horizontal
+        nestedScrollEnabled
+        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 }}
+      >
+        <View style={{ width: plotWidth + bleed, height: viewportHeight }}>
+          <Svg
+            width={plotWidth + bleed}
+            height={viewportHeight}
+            viewBox={`0 0 ${String(plotWidth + bleed)} ${String(content.height)}`}
+            pointerEvents="none"
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            <G transform={`translate(${String(-axisWidth)}, 0)`}>{plot}</G>
+          </Svg>
+          {inspectable ? (
+            <View
+              className="absolute top-0 bottom-0"
+              style={{ left: bleed, width: plotWidth }}
+              pointerEvents="box-none"
+            >
+              <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}
+              />
+            </View>
+          ) : null}
+        </View>
+      </ScrollView>
+      {tip !== undefined ? (
+        <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}
+    </View>
+  );
+
+  return (
+    <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' }))}
+    >
+      {chart}
+      {showLegend ? (
+        <View
+          className={lineChartLegendVariants()}
+          {...dataAttributes({ slot: 'line-chart-legend' })}
+        >
+          {seriesProp.map((item, seriesIndex) => {
+            const selectedPoint =
+              highlightIndex === null
+                ? undefined
+                : layout.series[seriesIndex]?.points.at(highlightIndex);
+            const isSelected = selectedPoint !== undefined && selectedPoint.value !== null;
+            return (
+              <View
+                key={item.id}
+                className={lineChartLegendItemVariants()}
+                {...dataAttributes({ slot: 'line-chart-legend-item' })}
+              >
+                <View
+                  className="h-0.5 w-3 rounded-full"
+                  style={{ backgroundColor: fills[seriesIndex] }}
+                />
+                <Text className={lineChartLegendLabelVariants({ selected: isSelected })}>
+                  {seriesLegendLabel(item, seriesProp.length, localeText)}
+                </Text>
+              </View>
+            );
+          })}
+          {markerLegend.map((item) => (
+            <View
+              key={`legend-${item.key}`}
+              className={lineChartLegendItemVariants()}
+              {...dataAttributes({ slot: 'line-chart-legend-item' })}
+            >
+              <View
+                className="size-2.5 rounded-full"
+                style={{
+                  backgroundColor:
+                    resolveChartColor(item.color, paints) ?? fills[item.seriesIndex] ?? fills[0],
+                }}
+              />
+              <Text className={lineChartLegendLabelVariants()}>{item.legend}</Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const LineChart = forwardRef(LineChartInner) as (<TRow extends object>(
+  props: LineChartProps<TRow> & { ref?: ForwardedRef<View> },
+) => ReactElement | null) & { displayName?: string };
+
+LineChart.displayName = 'LineChart';
+
+function lineSummary(
+  layout: LineChartLayout,
+  formatters: readonly ChartValueFormatter[],
+  localeText: ChartLocaleText,
+): string {
+  const lastIndex = layout.categoryLabels.length - 1;
+  const last = layout.categoryLabels[lastIndex];
+  if (last === undefined) {
+    return localeText.lineChartSummary(null);
+  }
+  const latest: ChartSummaryCategory = {
+    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: LineChartSeries<object>['showMark'], index: number): boolean {
+  return typeof mark === 'function' ? mark({ index }) : mark === true;
+}
+
+function LinePlot({
+  layout,
+  morph,
+  fills,
+  gradientId,
+  chrome,
+  marks,
+  showGrid,
+  highlightIndex,
+  formatters,
+  markers,
+  paints,
+}: {
+  layout: LineChartLayout;
+  morph: ChartMorph;
+  fills: readonly string[];
+  gradientId: string;
+  chrome: ChartChrome;
+  marks: readonly LineChartSeries<object>['showMark'][];
+  showGrid: boolean;
+  highlightIndex: number | null;
+  formatters: readonly ChartValueFormatter[];
+  markers: readonly LineChartMarkerLayout[];
+  paints: ChartColorPaints;
+}) {
+  const xs = layout.categoryLabels.map((item) => item.x);
+  const clipId = `${gradientId}-clip`;
+
+  return (
+    <>
+      <ChartLinearFills idPrefix={gradientId} colors={fills} x2="100%" y2="0%" />
+      <Defs>
+        {fills.map((color, index) => (
+          <LinearGradient
+            key={`area-${String(index)}`}
+            id={`${gradientId}-area-${String(index)}`}
+            x1="0%"
+            y1="0%"
+            x2="0%"
+            y2="100%"
+          >
+            <Stop offset="0%" stopColor={color} stopOpacity={0.32} />
+            <Stop offset="100%" stopColor={color} stopOpacity={0} />
+          </LinearGradient>
+        ))}
+        <ClipPath id={clipId}>
+          <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}
+          />
+        </ClipPath>
+      </Defs>
+      {showGrid
+        ? layout.gridLines.map((line) => (
+            <Line
+              key={`grid-${String(line.x1)}-${String(line.y1)}`}
+              x1={line.x1}
+              y1={line.y1}
+              x2={line.x2}
+              y2={line.y2}
+              stroke={chrome.grid}
+              strokeWidth={1}
+            />
+          ))
+        : null}
+      {layout.referenceLines.map((line, index) => (
+        <G key={`ref-${String(line.y1)}-${String(index)}`}>
+          <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 ? (
+            <SvgText
+              x={line.x1 + 4}
+              y={line.y1 - 4}
+              fill={chrome.label}
+              fontFamily={chrome.fontFamily}
+              fontSize={chrome.captionSize}
+              textAnchor="start"
+            >
+              {line.label}
+            </SvgText>
+          ) : null}
+        </G>
+      ))}
+      <G clipPath={`url(#${clipId})`}>
+        {layout.series.map((item, seriesIndex) => (
+          <AnimatedSeries
+            key={item.key}
+            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}
+          />
+        ))}
+        {layout.series.flatMap((item, seriesIndex) =>
+          item.points.map((point) =>
+            point.y === null || !showsMark(marks[seriesIndex], point.index) ? null : (
+              <AnimatedDot
+                key={`dot-${item.key}-${String(point.index)}`}
+                cx={point.x}
+                slot={seriesIndex * xs.length + point.index}
+                morph={morph}
+                fill={chrome.surface}
+                stroke={fills[seriesIndex] ?? chrome.label}
+              />
+            ),
+          ),
+        )}
+      </G>
+      {highlightIndex !== null
+        ? (() => {
+            const label = layout.categoryLabels.at(highlightIndex);
+            if (label === undefined) {
+              return null;
+            }
+            return (
+              <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 ? (
+          <Line
+            key={`marker-guide-${marker.key}`}
+            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
+            }
+          />
+        ) : null,
+      )}
+      {highlightIndex !== null
+        ? layout.series.flatMap((item, seriesIndex) => {
+            const point = item.points.at(highlightIndex);
+            if (point?.y == null) {
+              return [];
+            }
+            return [
+              <Circle
+                key={`active-${item.key}`}
+                cx={point.x}
+                cy={point.y}
+                r={LINE_ACTIVE_DOT_RADIUS}
+                fill={chrome.surface}
+                stroke={fills[seriesIndex]}
+                strokeWidth={LINE_STROKE_WIDTH}
+              />,
+            ];
+          })
+        : 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 (
+          <G key={`marker-${marker.key}`}>
+            {marker.dot ? (
+              <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 ? (
+              <SvgText
+                x={marker.x}
+                y={marker.y - 16}
+                fill={chrome.label}
+                fontFamily={chrome.fontFamily}
+                fontSize={chrome.captionSize}
+                textAnchor={captionAnchor}
+                opacity={markerOpacity}
+              >
+                {marker.label}
+              </SvgText>
+            ) : null}
+            {marker.showValue ? (
+              <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}
+              >
+                {format?.(marker.value, {
+                  location: 'label',
+                  seriesId: marker.seriesId,
+                  dataIndex: marker.index,
+                }) ?? ''}
+              </SvgText>
+            ) : null}
+          </G>
+        );
+      })}
+      {layout.categoryLabels.map((item, index) =>
+        item.tick ? (
+          <SvgText
+            key={`cat-${item.label}-${String(index)}`}
+            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"
+          >
+            {item.label}
+          </SvgText>
+        ) : null,
+      )}
+    </>
+  );
+}
+
+function categoryValues(
+  layout: LineChartLayout,
+  index: number,
+  fills: readonly string[],
+  formatters: readonly ChartValueFormatter[],
+  location: 'tooltip' | 'a11y',
+): ChartTooltipItem[] {
+  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: { readonly id: string; readonly label?: string },
+  seriesCount: number,
+  localeText: ChartLocaleText,
+): string {
+  if (item.label !== undefined && item.label.length > 0) {
+    return item.label;
+  }
+  return seriesCount === 1 ? localeText.defaultSeriesLabel : item.id;
+}
+
+function categoryAnnouncement(
+  label: string,
+  values: readonly ChartTooltipItem[],
+  noValue: string,
+  notes: readonly string[] = [],
+): string {
+  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: readonly LineChartMarkerLayout[], index: number): string[] {
+  return markers
+    .filter((marker) => marker.index === index)
+    .flatMap((marker) =>
+      [marker.legend, marker.label].filter(
+        (text): text is string => text !== undefined && text.length > 0,
+      ),
+    );
+}
+
+function lineKeyboardNeighbor(index: number, key: string, count: number): number | null {
+  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,
+}: {
+  layout: LineChartLayout;
+  width: number;
+  height: number;
+  fills: readonly string[];
+  formatters: readonly ChartValueFormatter[];
+  localeText: ChartLocaleText;
+  selectedIndex: number | null;
+  markers: readonly LineChartMarkerLayout[];
+}): ChartInspectorTarget[] {
+  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): ChartInspectorTarget => {
+    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,
+}: {
+  layout: LineChartLayout;
+  targets: readonly ChartInspectorTarget[];
+  onScrubLockChange: (locked: boolean) => void;
+  summary: string;
+  selectable: boolean;
+  selectedIndex: number | null;
+  activeIndex: number | null;
+  holdToScrub: boolean;
+  onActivate: (index: number) => void;
+  onDeactivate: (index: number) => void;
+  onDismiss: () => void;
+  onSelectIndex: (index: number) => void;
+}) {
+  const count = layout.categoryLabels.length;
+  const offset = layout.plot.x;
+
+  return (
+    <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,
+}: {
+  item: LineSeriesLayout;
+  seriesIndex: number;
+  xs: readonly number[];
+  baselineY: number;
+  morph: ChartMorph;
+  areaFill: string;
+  stroke: string;
+  opacity: number;
+}) {
+  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 (
+    <G>
+      {item.area && item.areaPath.length > 0 ? (
+        <AnimatedPath animatedProps={areaProps} fill={areaFill} />
+      ) : null}
+      {item.path.length > 0 ? (
+        <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 ? (
+        <AnimatedPath
+          animatedProps={dashProps}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={LINE_STROKE_WIDTH}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={DASH}
+          opacity={opacity}
+        />
+      ) : null}
+    </G>
+  );
+}
+
+function AnimatedDot({
+  cx,
+  slot,
+  morph,
+  fill,
+  stroke,
+}: {
+  cx: number;
+  slot: number;
+  morph: ChartMorph;
+  fill: string;
+  stroke: string;
+}) {
+  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 (
+    <AnimatedCircle
+      animatedProps={animatedProps}
+      cx={cx}
+      r={LINE_DOT_RADIUS}
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={LINE_STROKE_WIDTH}
+    />
+  );
+}