jfs-components 0.0.84 → 0.0.85

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -0,0 +1,859 @@
+"use strict";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import Svg, { Circle, Line, Path } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
+import { buildAreaPath, buildLineSegments, createLinearScale, extent, nearestIndex, niceTicks, resolvePoints } from './chartMath';
+
+// --- Public types ---------------------------------------------------------
+
+/** A single data point. Bare numbers are also accepted in `data`. */
+
+/** One line+area series. Pass one for a single chart, several to overlap. */
+
+// --- Internal resolved types ----------------------------------------------
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ChartContext = /*#__PURE__*/createContext(null);
+
+/** Access the surrounding chart geometry from a decorator/sub-component. */
+export function useChart() {
+  const ctx = useContext(ChartContext);
+  if (!ctx) {
+    throw new Error('AreaLineChart sub-components must be used within <AreaLineChart>');
+  }
+  return ctx;
+}
+
+// --- Helpers ---------------------------------------------------------------
+
+const DEFAULT_APPEARANCE_CYCLE = ['Primary', 'Secondary', 'Tertiary', 'Quaternary', 'Quinary', 'Senary'];
+const DEFAULT_INSET = {
+  top: 16,
+  bottom: 8,
+  left: 8,
+  right: 8
+};
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+const appearanceFor = index => DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length];
+
+/** Resolve a series' strong (line/dot) color via the `dataViz/bg` token. */
+const resolveLineColor = (color, appearance, modes) => {
+  if (color) return color;
+  return getVariableByName('dataViz/bg', {
+    ...modes,
+    'Appearance / DataViz': appearance,
+    'Emphasis / DataViz': 'High'
+  }) ?? '#5d00b5';
+};
+
+/** Resolve a series' light area-fill color via the `dataViz/bg` token. */
+const resolveAreaColor = (color, lineColor, appearance, modes) => {
+  if (color) return color;
+  return getVariableByName('dataViz/bg', {
+    ...modes,
+    'Appearance / DataViz': appearance,
+    'Emphasis / DataViz': 'Low'
+  }) ?? lineColor;
+};
+const defaultFormatY = value => String(value);
+const defaultFormatX = label => String(label);
+
+// --- Main component --------------------------------------------------------
+
+/**
+ * `AreaLineChart` is a lightweight, token-driven area/line chart built
+ * entirely on `react-native-svg`. A single `series` renders one filled
+ * area with a line on top (plus an optional goal pin); multiple `series`
+ * overlap with an automatic legend. It supports smooth/linear curves,
+ * dashed "projected" segments, a configurable grid and axes, and a
+ * cross-platform crosshair tooltip (hover on web, press-drag on native).
+ *
+ * The reusable building blocks (`AreaLineChart.Grid`, `.XAxis`, `.YAxis`,
+ * `.GoalPin`) read the shared chart geometry through `useChart()`, so you
+ * can also compose them manually or add your own SVG decorators as
+ * children.
+ *
+ * @component
+ */
+function AreaLineChart({
+  series,
+  xLabels,
+  yMin,
+  yMax,
+  numberOfTicks = 4,
+  curve = 'linear',
+  height = 218,
+  contentInset,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showLegend = true,
+  showDots = false,
+  formatX = defaultFormatX,
+  formatY = defaultFormatY,
+  formatValue,
+  goalPin,
+  activeIndex: activeIndexProp,
+  defaultActiveIndex = null,
+  onActiveIndexChange,
+  interactive = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  children,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const inset = useMemo(() => ({
+    ...DEFAULT_INSET,
+    ...(contentInset || {})
+  }), [contentInset]);
+
+  // Plot width is measured; height is fixed by the prop.
+  const [plotWidth, setPlotWidth] = useState(0);
+  const handlePlotLayout = useCallback(e => {
+    const w = e.nativeEvent.layout.width;
+    setPlotWidth(prev => Math.abs(prev - w) > 0.5 ? w : prev);
+  }, []);
+
+  // Active index (controlled or uncontrolled).
+  const isControlled = activeIndexProp !== undefined;
+  const [uncontrolledActive, setUncontrolledActive] = useState(defaultActiveIndex);
+  const activeIndex = isControlled ? activeIndexProp : uncontrolledActive;
+  const setActiveIndex = useCallback(index => {
+    if (!isControlled) setUncontrolledActive(index);
+    onActiveIndexChange?.(index);
+  }, [isControlled, onActiveIndexChange]);
+
+  // Resolve every series (points + colors).
+  const resolvedSeries = useMemo(() => {
+    return series.map((s, index) => {
+      const appearance = s.appearance ?? appearanceFor(index);
+      const lineColor = resolveLineColor(s.color, appearance, modes);
+      const areaColor = resolveAreaColor(s.areaColor, lineColor, appearance, modes);
+      return {
+        key: s.key ?? `series-${index}`,
+        label: s.label,
+        appearance,
+        lineColor,
+        areaColor,
+        showArea: s.showArea !== false,
+        showLine: s.showLine !== false,
+        points: resolvePoints(s.data)
+      };
+    });
+  }, [series, modes]);
+
+  // Canonical point count comes from the longest series.
+  const count = useMemo(() => resolvedSeries.reduce((max, s) => Math.max(max, s.points.length), 0), [resolvedSeries]);
+
+  // Domains.
+  const xDomain = useMemo(() => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const s of resolvedSeries) {
+      const [lo, hi] = extent(s.points, 'x');
+      if (s.points.length) {
+        if (lo < min) min = lo;
+        if (hi > max) max = hi;
+      }
+    }
+    if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 0];
+    return [min, max];
+  }, [resolvedSeries]);
+  const {
+    yDomain,
+    yTicks
+  } = useMemo(() => {
+    let dataMin = Infinity;
+    let dataMax = -Infinity;
+    for (const s of resolvedSeries) {
+      const [lo, hi] = extent(s.points, 'y');
+      if (s.points.length) {
+        if (lo < dataMin) dataMin = lo;
+        if (hi > dataMax) dataMax = hi;
+      }
+    }
+    if (!Number.isFinite(dataMin) || !Number.isFinite(dataMax)) {
+      dataMin = 0;
+      dataMax = 1;
+    }
+    const lo = yMin !== undefined ? yMin : Math.min(0, dataMin);
+    const hi = yMax !== undefined ? yMax : dataMax;
+    const ticks = niceTicks(lo, hi, numberOfTicks);
+    const domain = ticks.length >= 2 ? [ticks[0], ticks[ticks.length - 1]] : [lo, hi === lo ? lo + 1 : hi];
+    return {
+      yDomain: domain,
+      yTicks: ticks
+    };
+  }, [resolvedSeries, yMin, yMax, numberOfTicks]);
+
+  // Scales.
+  const xScale = useMemo(() => createLinearScale(xDomain[0] === xDomain[1] ? [xDomain[0], xDomain[0] + 1] : xDomain, [inset.left, Math.max(inset.left, plotWidth - inset.right)]), [xDomain, inset.left, inset.right, plotWidth]);
+  const yScale = useMemo(() => createLinearScale(yDomain, [height - inset.bottom, inset.top]), [yDomain, height, inset.bottom, inset.top]);
+
+  // Canonical x pixel positions (from the longest series).
+  const indexXs = useMemo(() => {
+    const base = resolvedSeries.find(s => s.points.length === count);
+    if (!base) return [];
+    return base.points.map(p => xScale(p.x));
+  }, [resolvedSeries, count, xScale]);
+  const ctx = useMemo(() => ({
+    width: plotWidth,
+    height,
+    inset,
+    xScale,
+    yScale,
+    yTicks,
+    indexXs,
+    count,
+    series: resolvedSeries,
+    curve,
+    activeIndex,
+    setActiveIndex,
+    xLabels,
+    formatX,
+    formatY,
+    showDots,
+    modes
+  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes]);
+  const isMultiSeries = resolvedSeries.length > 1;
+  const resolvedFormatValue = formatValue ?? (v => formatY(v));
+  return /*#__PURE__*/_jsx(ChartContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, style],
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel,
+      children: [showLegend && isMultiSeries ? /*#__PURE__*/_jsx(ChartLegend, {}) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.body,
+        children: [showYAxis ? /*#__PURE__*/_jsx(ChartYAxis, {}) : null, /*#__PURE__*/_jsxs(View, {
+          style: styles.plotColumn,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.plot, {
+              height
+            }],
+            onLayout: handlePlotLayout,
+            children: plotWidth > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+              children: [showGrid ? /*#__PURE__*/_jsx(ChartGrid, {}) : null, /*#__PURE__*/_jsx(ChartSeriesLayer, {}), goalPin ? /*#__PURE__*/_jsx(ChartGoalPin, {
+                value: goalPin.value,
+                atIndex: goalPin.atIndex,
+                seriesIndex: goalPin.seriesIndex
+              }) : null, children, interactive ? /*#__PURE__*/_jsx(ChartInteractionLayer, {
+                formatValue: resolvedFormatValue,
+                series: series
+              }) : null]
+            }) : null
+          }), showXAxis ? /*#__PURE__*/_jsx(ChartXAxis, {}) : null]
+        })]
+      })]
+    })
+  });
+}
+
+// --- Series layer (areas + lines + static dots) ---------------------------
+
+function ChartSeriesLayer() {
+  const {
+    width,
+    height,
+    series,
+    xScale,
+    yScale,
+    yDomainBaseline,
+    curve,
+    showDots
+  } = useChartWithBaseline();
+  return /*#__PURE__*/_jsxs(Svg, {
+    style: StyleSheet.absoluteFill,
+    width: width,
+    height: height,
+    children: [series.map(s => s.showArea && s.points.length ? /*#__PURE__*/_jsx(Path, {
+      d: buildAreaPath(toPixelPoints(s.points, xScale, yScale), yDomainBaseline, curve),
+      fill: s.areaColor
+    }, `area-${s.key}`) : null), series.map(s => {
+      if (!s.showLine || s.points.length < 2) return null;
+      const pixelPoints = toPixelPoints(s.points, xScale, yScale);
+      const segments = buildLineSegments(pixelPoints, curve);
+      return segments.map((seg, i) => /*#__PURE__*/_jsx(Path, {
+        d: seg.d,
+        stroke: s.lineColor,
+        strokeWidth: 2,
+        fill: "none",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: seg.dashed ? '5,4' : undefined
+      }, `line-${s.key}-${i}`));
+    }), showDots ? series.map(s => s.points.map((p, i) => /*#__PURE__*/_jsx(Circle, {
+      cx: xScale(p.x),
+      cy: yScale(p.y),
+      r: 4,
+      fill: s.lineColor
+    }, `dot-${s.key}-${i}`))) : null]
+  });
+}
+
+// --- Grid ------------------------------------------------------------------
+
+/** Background grid lines aligned to the y-ticks (horizontal) and x data points (vertical). */
+function ChartGrid({
+  direction = 'horizontal',
+  stroke = 'rgba(0,0,0,0.08)',
+  strokeWidth = 1,
+  strokeDasharray
+}) {
+  const {
+    width,
+    height,
+    inset,
+    xScale,
+    yScale,
+    yTicks,
+    indexXs
+  } = useChart();
+  const showH = direction === 'horizontal' || direction === 'both';
+  const showV = direction === 'vertical' || direction === 'both';
+  return /*#__PURE__*/_jsxs(Svg, {
+    style: StyleSheet.absoluteFill,
+    width: width,
+    height: height,
+    pointerEvents: "none",
+    children: [showH ? yTicks.map(t => {
+      const y = yScale(t);
+      return /*#__PURE__*/_jsx(Line, {
+        x1: inset.left,
+        x2: width - inset.right,
+        y1: y,
+        y2: y,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        strokeDasharray: strokeDasharray
+      }, `gh-${t}`);
+    }) : null, showV ? indexXs.map((x, i) => /*#__PURE__*/_jsx(Line, {
+      x1: x,
+      x2: x,
+      y1: inset.top,
+      y2: height - inset.bottom,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      strokeDasharray: strokeDasharray
+    }, `gv-${i}`)) : null]
+  });
+}
+
+// --- Y axis ----------------------------------------------------------------
+
+/** Y-axis tick labels, vertically positioned to align with the grid. */
+function ChartYAxis({
+  showLabels = true,
+  showTicks = false,
+  tickLength = 4,
+  showAxisLine = false,
+  formatLabel
+}) {
+  const {
+    height,
+    inset,
+    yScale,
+    yTicks,
+    formatY,
+    modes
+  } = useChart();
+  const typo = useAxisTypography(modes);
+  const format = formatLabel ?? formatY;
+  const lineHeight = typo.lineHeight;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      height,
+      justifyContent: 'flex-start',
+      flexDirection: 'row'
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: undefined,
+        height
+      },
+      children: yTicks.map(t => {
+        const y = yScale(t);
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            right: showTicks ? tickLength + 4 : 0,
+            top: y - lineHeight / 2,
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          children: showLabels ? /*#__PURE__*/_jsx(Text, {
+            style: typo.style,
+            numberOfLines: 1,
+            children: format(t)
+          }) : null
+        }, `yl-${t}`);
+      })
+    }), showTicks ? /*#__PURE__*/_jsxs(Svg, {
+      width: tickLength,
+      height: height,
+      pointerEvents: "none",
+      children: [yTicks.map(t => {
+        const y = yScale(t);
+        return /*#__PURE__*/_jsx(Line, {
+          x1: 0,
+          x2: tickLength,
+          y1: y,
+          y2: y,
+          stroke: "rgba(0,0,0,0.2)",
+          strokeWidth: 1
+        }, `yt-${t}`);
+      }), showAxisLine ? /*#__PURE__*/_jsx(Line, {
+        x1: tickLength,
+        x2: tickLength,
+        y1: inset.top,
+        y2: height - inset.bottom,
+        stroke: "rgba(0,0,0,0.2)",
+        strokeWidth: 1
+      }) : null]
+    }) : null]
+  });
+}
+
+// --- X axis ----------------------------------------------------------------
+
+/** X-axis labels, horizontally positioned to align with the data points. */
+function ChartXAxis({
+  showLabels = true,
+  showTicks = false,
+  tickLength = 4,
+  selectable = true,
+  formatLabel
+}) {
+  const {
+    width,
+    inset,
+    xScale,
+    indexXs,
+    count,
+    xLabels,
+    formatX,
+    modes,
+    activeIndex,
+    setActiveIndex
+  } = useChart();
+  const typo = useAxisTypography(modes);
+  const format = formatLabel ?? formatX;
+  const activeColor = getVariableByName('dataViz/bg', {
+    ...modes,
+    'Appearance / DataViz': 'Primary',
+    'Emphasis / DataViz': 'High'
+  }) ?? '#5d00b5';
+  const labels = xLabels ?? indexXs.map((_, i) => i);
+  const labelCount = labels.length;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: '100%',
+      height: typo.lineHeight + (showTicks ? tickLength : 0)
+    },
+    children: [showTicks ? /*#__PURE__*/_jsx(Svg, {
+      style: StyleSheet.absoluteFill,
+      width: width,
+      height: tickLength,
+      pointerEvents: "none",
+      children: indexXs.map((x, i) => /*#__PURE__*/_jsx(Line, {
+        x1: x,
+        x2: x,
+        y1: 0,
+        y2: tickLength,
+        stroke: "rgba(0,0,0,0.2)",
+        strokeWidth: 1
+      }, `xt-${i}`))
+    }) : null, showLabels ? /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: showTicks ? tickLength : 0
+      },
+      children: labels.map((label, i) => {
+        // Map a label to its data index (handles fewer labels than points).
+        const dataIndex = labelCount === count ? i : Math.round(i / Math.max(1, labelCount - 1) * (count - 1));
+        const x = labelCount === count ? indexXs[i] ?? xScale(i) : inset.left + i / Math.max(1, labelCount - 1) * (width - inset.left - inset.right);
+        const isActive = activeIndex === dataIndex;
+        const content = /*#__PURE__*/_jsx(Text, {
+          style: [typo.style, isActive ? {
+            color: activeColor,
+            fontWeight: '700'
+          } : null],
+          numberOfLines: 1,
+          children: format(label, i)
+        });
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'absolute',
+            left: x,
+            transform: [{
+              translateX: -50
+            }],
+            width: 100,
+            alignItems: 'center'
+          },
+          children: selectable ? /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => setActiveIndex(isActive ? null : dataIndex),
+            hitSlop: 8,
+            children: content
+          }) : content
+        }, `xl-${i}`);
+      })
+    }) : null]
+  });
+}
+
+// --- Goal pin --------------------------------------------------------------
+
+/** A pill marker anchored to a data point, with a dashed connector to the baseline. */
+function ChartGoalPin({
+  value,
+  atIndex,
+  seriesIndex = 0,
+  color,
+  textColor
+}) {
+  const {
+    height,
+    inset,
+    xScale,
+    yScale,
+    series,
+    count,
+    modes
+  } = useChart();
+  const s = series[seriesIndex] ?? series[0];
+  if (!s || s.points.length === 0) return null;
+  const index = atIndex ?? count - 1;
+  const point = s.points[Math.min(Math.max(0, index), s.points.length - 1)];
+  if (!point) return null;
+  const x = xScale(point.x);
+  const y = yScale(point.y);
+  const pinColor = color ?? s.lineColor;
+  const pinTextColor = textColor ?? getVariableByName('mode/Grey/2500', modes) ?? '#ffffff';
+  const PIN_SIZE = 32;
+  return /*#__PURE__*/_jsxs(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsxs(Svg, {
+      style: StyleSheet.absoluteFill,
+      width: "100%",
+      height: height,
+      children: [/*#__PURE__*/_jsx(Line, {
+        x1: x,
+        x2: x,
+        y1: PIN_SIZE / 2,
+        y2: height - inset.bottom,
+        stroke: pinColor,
+        strokeWidth: 1.5,
+        strokeDasharray: "4,4"
+      }), /*#__PURE__*/_jsx(Circle, {
+        cx: x,
+        cy: y,
+        r: 5,
+        fill: pinColor,
+        stroke: "#ffffff",
+        strokeWidth: 2
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: x - PIN_SIZE / 2,
+        top: 0,
+        width: PIN_SIZE,
+        height: PIN_SIZE,
+        borderRadius: 999,
+        backgroundColor: pinColor,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 4
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: {
+          color: pinTextColor,
+          fontSize: 10,
+          lineHeight: 13,
+          textAlign: 'center'
+        },
+        children: value
+      })
+    })]
+  });
+}
+
+// --- Interaction layer (crosshair + active dots + tooltip) ----------------
+
+function ChartInteractionLayer({
+  formatValue,
+  series: rawSeries
+}) {
+  const {
+    width,
+    height,
+    inset,
+    xScale,
+    yScale,
+    indexXs,
+    series,
+    activeIndex,
+    setActiveIndex,
+    modes
+  } = useChart();
+  const viewRef = useRef(null);
+  const updateFromX = useCallback(locationX => {
+    const idx = nearestIndex(indexXs, locationX);
+    if (idx >= 0) setActiveIndex(idx);
+  }, [indexXs, setActiveIndex]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: e => updateFromX(e.nativeEvent.locationX),
+    onPanResponderMove: e => updateFromX(e.nativeEvent.locationX)
+  }), [updateFromX]);
+
+  // Web-only hover support (no button pressed) via DOM listeners.
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const node = viewRef.current;
+    if (!node) return;
+    const onMove = ev => {
+      const rect = node.getBoundingClientRect();
+      updateFromX(ev.clientX - rect.left);
+    };
+    const onLeave = () => setActiveIndex(null);
+    node.addEventListener('mousemove', onMove);
+    node.addEventListener('mouseleave', onLeave);
+    return () => {
+      node.removeEventListener('mousemove', onMove);
+      node.removeEventListener('mouseleave', onLeave);
+    };
+  }, [updateFromX, setActiveIndex]);
+  const hasActive = activeIndex !== null && activeIndex >= 0;
+  const activeX = hasActive ? indexXs[activeIndex] : 0;
+  const tooltipItems = useMemo(() => {
+    if (!hasActive) return [];
+    return series.map((s, sIndex) => {
+      const point = s.points[activeIndex];
+      if (!point) return null;
+      return {
+        key: String(s.key),
+        label: s.label ?? `Series ${sIndex + 1}`,
+        value: formatValue(point.y, rawSeries[sIndex]),
+        color: s.lineColor,
+        y: yScale(point.y)
+      };
+    }).filter(Boolean);
+  }, [hasActive, series, activeIndex, formatValue, rawSeries, yScale]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      ref: viewRef,
+      style: StyleSheet.absoluteFill,
+      ...panResponder.panHandlers
+    }), hasActive ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Svg, {
+        style: StyleSheet.absoluteFill,
+        width: width,
+        height: height,
+        pointerEvents: "none",
+        children: [/*#__PURE__*/_jsx(Line, {
+          x1: activeX,
+          x2: activeX,
+          y1: inset.top,
+          y2: height - inset.bottom,
+          stroke: "#0f0d0a",
+          strokeWidth: 1
+        }), tooltipItems.map(item => /*#__PURE__*/_jsx(Circle, {
+          cx: activeX,
+          cy: item.y,
+          r: 6,
+          fill: item.color,
+          stroke: "#ffffff",
+          strokeWidth: 2
+        }, `active-${item.key}`))]
+      }), /*#__PURE__*/_jsx(ChartTooltip, {
+        x: activeX,
+        width: width,
+        items: tooltipItems,
+        modes: modes
+      })]
+    }) : null]
+  });
+}
+
+// --- Inline tooltip --------------------------------------------------------
+
+function ChartTooltip({
+  x,
+  width,
+  items,
+  modes
+}) {
+  const [size, setSize] = useState(null);
+  const bg = getVariableByName('tooltip/background', modes) ?? '#0f0d0a';
+  const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12);
+  const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8);
+  const radius = toNumber(getVariableByName('radius', modes), 8);
+  const labelColor = getVariableByName('tooltip/label/color', modes) ?? '#ffffff';
+  if (items.length === 0) return null;
+
+  // Horizontally clamp so the box stays inside the plot.
+  const boxW = size?.width ?? 0;
+  const screenPad = 4;
+  let left = x - boxW / 2;
+  if (boxW > 0) {
+    left = Math.max(screenPad, Math.min(left, width - boxW - screenPad));
+  }
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    onLayout: e => setSize({
+      width: e.nativeEvent.layout.width,
+      height: e.nativeEvent.layout.height
+    }),
+    style: {
+      position: 'absolute',
+      top: 0,
+      left,
+      backgroundColor: bg,
+      borderRadius: radius,
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV,
+      gap: 4,
+      opacity: size ? 1 : 0,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      elevation: 5
+    },
+    children: items.map(item => /*#__PURE__*/_jsx(MetricLegendItem, {
+      label: item.label,
+      value: item.value,
+      indicatorColor: item.color,
+      modes: modes,
+      labelStyle: {
+        color: labelColor
+      },
+      valueStyle: {
+        color: labelColor,
+        fontWeight: '700'
+      },
+      style: {
+        gap: 8
+      }
+    }, item.key))
+  });
+}
+
+// --- Legend ----------------------------------------------------------------
+
+function ChartLegend() {
+  const {
+    series,
+    modes
+  } = useChart();
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.legend,
+    children: series.map((s, i) => /*#__PURE__*/_jsx(MetricLegendItem, {
+      label: s.label ?? `Series ${i + 1}`,
+      indicatorColor: s.lineColor,
+      indicatorShape: s.showArea === false ? 'line' : 'dot',
+      modes: modes
+    }, `legend-${s.key}`))
+  });
+}
+
+// --- Shared hooks / utils --------------------------------------------------
+
+/** Resolve `axisItem/*` typography tokens into a memoized text style. */
+function useAxisTypography(modes) {
+  return useMemo(() => {
+    const color = getVariableByName('axisItem/color', modes) ?? '#000000';
+    const fontFamily = getVariableByName('axisItem/fontFamily', modes) ?? 'JioType Var';
+    const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12);
+    const lineHeight = toNumber(getVariableByName('axisItem/lineHeight', modes), 16);
+    const fontWeight = toFontWeight(getVariableByName('axisItem/fontWeight', modes), '400');
+    return {
+      lineHeight,
+      style: {
+        color,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight
+      }
+    };
+  }, [modes]);
+}
+
+/** Like `useChart` but also exposes the area baseline pixel-y. */
+function useChartWithBaseline() {
+  const ctx = useChart();
+  const yDomainBaseline = ctx.yScale(ctx.yScale.domain[0]);
+  return {
+    ...ctx,
+    yDomainBaseline
+  };
+}
+const toPixelPoints = (points, xScale, yScale) => points.map(p => ({
+  x: xScale(p.x),
+  y: yScale(p.y),
+  projected: p.projected
+}));
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    gap: 8
+  },
+  body: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  plotColumn: {
+    flex: 1,
+    minWidth: 0,
+    gap: 8
+  },
+  plot: {
+    width: '100%',
+    position: 'relative'
+  },
+  legend: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12
+  }
+});
+
+// Attach reusable sub-components.
+AreaLineChart.Grid = ChartGrid;
+AreaLineChart.XAxis = ChartXAxis;
+AreaLineChart.YAxis = ChartYAxis;
+AreaLineChart.GoalPin = ChartGoalPin;
+export default AreaLineChart;