@cdx-ui/components 0.3.5 → 0.3.6

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

@@ -0,0 +1,747 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineChart = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSvg = require("react-native-svg");
+var _primitives = require("@cdx-ui/primitives");
+var _utils = require("@cdx-ui/utils");
+var _ChartInspector = require("../chart/ChartInspector");
+var _format = require("../chart/format");
+var _size = require("../chart/size");
+var _useChartHostWidth = require("../chart/useChartHostWidth");
+var _palette = require("../chart/palette");
+var _motion = require("../chart/motion");
+var _geometry = require("./geometry");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* SVG `x`/`y` are paint coordinates. RN View `x`/`y` layout props are deprecated and share the name. */
+/* eslint-disable @typescript-eslint/no-deprecated */
+
+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 = _styles.LINE_ACTIVE_DOT_RADIUS + _styles.LINE_STROKE_WIDTH;
+const AnimatedPath = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Path);
+const AnimatedCircle = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.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 = (0, _motion.useChartMotionEnabled)(animation);
+  const gradientId = (0, _palette.useChartGradientId)('line-fill');
+  const chrome = (0, _palette.useChartChrome)();
+  const paints = (0, _palette.useChartColorPaints)();
+  const localeText = (0, _react.useMemo)(() => (0, _format.resolveChartLocaleText)(localeTextProp), [localeTextProp]);
+  const xAxis = xAxisProp?.[0];
+  const yAxis = yAxisProp?.[0];
+  const showValueTicks = yAxis?.position !== 'none';
+  const showCategoryLabels = xAxis?.position !== 'none';
+  const resolved = (0, _react.useMemo)(() => (0, _geometry.resolveLineChartData)({
+    dataset,
+    series: seriesProp,
+    xAxis
+  }), [dataset, seriesProp, xAxis]);
+  const formatters = (0, _react.useMemo)(() => seriesProp.map(item => (0, _format.resolveValueFormatter)(item, yAxis, locale)), [seriesProp, yAxis, locale]);
+  const formatTick = (0, _react.useMemo)(() => {
+    const format = (0, _format.resolveValueFormatter)(null, yAxis, locale);
+    return value => format(value, {
+      location: 'tick'
+    });
+  }, [yAxis, locale]);
+  const box = (0, _size.resolveChartBox)(size, widthProp, heightProp);
+  const [hostWidth, handleHostLayout] = (0, _useChartHostWidth.useChartHostWidth)(onLayout);
+  const viewportWidth = hostWidth > 0 ? Math.min(hostWidth, box.width) : box.width;
+  const viewportHeight = box.height;
+  const gutters = (0, _react.useMemo)(() => (0, _geometry.lineChartMarkerGutters)(dataset.length, markers, (0, _geometry.lineChartGutters)({
+    showValueTicks,
+    showCategoryLabels
+  })), [dataset.length, markers, showValueTicks, showCategoryLabels]);
+  const content = (0, _react.useMemo)(() => (0, _geometry.resolveLineChartContentSize)({
+    viewportWidth,
+    viewportHeight,
+    categoryCount: dataset.length,
+    gutters,
+    scrollable,
+    visiblePoints
+  }), [viewportWidth, viewportHeight, dataset.length, gutters, scrollable, visiblePoints]);
+  const layout = (0, _react.useMemo)(() => (0, _geometry.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 = (0, _react.useMemo)(() => (0, _geometry.layoutLineChartMarkers)(markers ?? [], layout.series), [markers, layout.series]);
+  const overflowsX = content.width > viewportWidth + 0.5;
+  const morph = (0, _motion.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) => (0, _palette.resolveChartColor)(item.color, paints) ?? paints[(0, _palette.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] = (0, _utils.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] = (0, _react.useState)(null);
+  const [dismissed, setDismissed] = (0, _react.useState)(false);
+  const [scrubbing, setScrubbing] = (0, _react.useState)(false);
+  const scrollX = (0, _react.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: layout.valueTicks.map(tick => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+      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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "flex-row",
+    style: {
+      width: viewportWidth,
+      height: viewportHeight
+    },
+    ...(0, _primitives.dataAttributes)({
+      slot: 'line-chart-plot'
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
+      width: axisWidth,
+      height: viewportHeight,
+      viewBox: `0 0 ${String(axisWidth)} ${String(content.height)}`,
+      accessible: false,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: ticks
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          width: plotWidth + bleed,
+          height: viewportHeight
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Svg, {
+          width: plotWidth + bleed,
+          height: viewportHeight,
+          viewBox: `0 0 ${String(plotWidth + bleed)} ${String(content.height)}`,
+          pointerEvents: "none",
+          accessible: false,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
+            transform: `translate(${String(-axisWidth)}, 0)`,
+            children: plot
+          })
+        }), inspectable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: "absolute top-0 bottom-0",
+          style: {
+            left: bleed,
+            width: plotWidth
+          },
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_ChartInspector.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.lineChartRootVariants)(), className),
+    style: style,
+    accessible: !inspectable && !showLegend,
+    accessibilityRole: !inspectable && !showLegend ? 'image' : undefined,
+    accessibilityLabel: !inspectable && !showLegend ? summary : undefined,
+    ...props,
+    onLayout: handleHostLayout,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'line-chart'
+    })),
+    children: [chart, showLegend ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: (0, _styles.lineChartLegendVariants)(),
+      ...(0, _primitives.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          className: (0, _styles.lineChartLegendItemVariants)(),
+          ...(0, _primitives.dataAttributes)({
+            slot: 'line-chart-legend-item'
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            className: "h-0.5 w-3 rounded-full",
+            style: {
+              backgroundColor: fills[seriesIndex]
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            className: (0, _styles.lineChartLegendLabelVariants)({
+              selected: isSelected
+            }),
+            children: seriesLegendLabel(item, seriesProp.length, localeText)
+          })]
+        }, item.id);
+      }), markerLegend.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        className: (0, _styles.lineChartLegendItemVariants)(),
+        ...(0, _primitives.dataAttributes)({
+          slot: 'line-chart-legend-item'
+        }),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          className: "size-2.5 rounded-full",
+          style: {
+            backgroundColor: (0, _palette.resolveChartColor)(item.color, paints) ?? fills[item.seriesIndex] ?? fills[0]
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          className: (0, _styles.lineChartLegendLabelVariants)(),
+          children: item.legend
+        })]
+      }, `legend-${item.key}`))]
+    }) : null]
+  });
+}
+const LineChart = exports.LineChart = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_palette.ChartLinearFills, {
+      idPrefix: gradientId,
+      colors: fills,
+      x2: "100%",
+      y2: "0%"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
+      children: [fills.map((color, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+        id: `${gradientId}-area-${String(index)}`,
+        x1: "0%",
+        y1: "0%",
+        x2: "0%",
+        y2: "100%",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+          offset: "0%",
+          stopColor: color,
+          stopOpacity: 0.32
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+          offset: "100%",
+          stopColor: color,
+          stopOpacity: 0
+        })]
+      }, `area-${String(index)}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ClipPath, {
+        id: clipId,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.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__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+        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__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+      clipPath: `url(#${clipId})`,
+      children: [layout.series.map((item, seriesIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedSeries, {
+        item: item,
+        seriesIndex: seriesIndex,
+        xs: xs,
+        baselineY: layout.baselineY,
+        morph: morph,
+        areaFill: `url(#${gradientId}-area-${String(seriesIndex)})`,
+        stroke: (0, _palette.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+        cx: point.x,
+        cy: point.y,
+        r: _styles.LINE_ACTIVE_DOT_RADIUS,
+        fill: chrome.surface,
+        stroke: fills[seriesIndex],
+        strokeWidth: _styles.LINE_STROKE_WIDTH
+      }, `active-${item.key}`)];
+    }) : null, markers.map(marker => {
+      const color = (0, _palette.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__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+        children: [marker.dot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Circle, {
+          cx: marker.x,
+          cy: marker.y,
+          r: _styles.LINE_ACTIVE_DOT_RADIUS,
+          fill: color,
+          stroke: chrome.surface,
+          strokeWidth: _styles.LINE_STROKE_WIDTH,
+          opacity: markerOpacity
+        }) : null, marker.label !== undefined && marker.label.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+          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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+          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__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Text, {
+      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(_ChartInspector.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__*/(0, _jsxRuntime.jsx)(_ChartInspector.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) => (0, _geometry.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 = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    const ys = (0, _motion.lerpVector)(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: (0, _geometry.lineSeriesPaths)(xs, ys, curve, baselineY, dashAt).path
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  const dashProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    const ys = (0, _motion.lerpVector)(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: (0, _geometry.lineSeriesPaths)(xs, ys, curve, baselineY, dashAt).dashedPath
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  const areaProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    const ys = (0, _motion.lerpVector)(from.get(), to.get(), progress.get()).slice(start, end);
+    return {
+      d: (0, _geometry.lineSeriesPaths)(xs, ys, curve, baselineY, dashAt).areaPath
+    };
+  }, [from, to, progress, start, end, xs, curve, baselineY, dashAt]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.G, {
+    children: [item.area && item.areaPath.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPath, {
+      animatedProps: areaProps,
+      fill: areaFill
+    }) : null, item.path.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPath, {
+      animatedProps: lineProps,
+      fill: "none",
+      stroke: stroke,
+      strokeWidth: _styles.LINE_STROKE_WIDTH,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeDasharray: item.dashed ? DASH : undefined,
+      opacity: opacity
+    }) : null, item.dashedPath.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedPath, {
+      animatedProps: dashProps,
+      fill: "none",
+      stroke: stroke,
+      strokeWidth: _styles.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 = (0, _reactNativeReanimated.useAnimatedProps)(() => {
+    const ys = (0, _motion.lerpVector)(from.get(), to.get(), progress.get());
+    return {
+      cy: ys[slot] ?? 0
+    };
+  }, [from, to, progress, slot]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedCircle, {
+    animatedProps: animatedProps,
+    cx: cx,
+    r: _styles.LINE_DOT_RADIUS,
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: _styles.LINE_STROKE_WIDTH
+  });
+}
+//# sourceMappingURL=index.js.map