jfs-components 0.0.84 → 0.0.86

package/src/components/AreaLineChart/AreaLineChart.tsx

@@ -0,0 +1,1161 @@
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
+import {
+    LayoutChangeEvent,
+    PanResponder,
+    Platform,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type GestureResponderEvent,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} 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,
+    type Curve,
+    type LinearScale,
+    type PixelPoint,
+    type ResolvedPoint,
+} from './chartMath'
+
+// --- Public types ---------------------------------------------------------
+
+/** A single data point. Bare numbers are also accepted in `data`. */
+export type ChartPoint = {
+    /** Position on the x domain. Defaults to the array index. */
+    x?: number | string
+    /** Value on the y domain. */
+    y: number
+    /**
+     * Marks this point as projected / low-confidence. The line segment
+     * ending at this point is rendered dashed.
+     */
+    projected?: boolean
+}
+
+/** One line+area series. Pass one for a single chart, several to overlap. */
+export type ChartSeries = {
+    /** Stable React key. */
+    key?: React.Key
+    /** The data, either bare y-values or `ChartPoint`s. */
+    data: Array<number | ChartPoint>
+    /** Legend / tooltip label. */
+    label?: string
+    /**
+     * `Appearance / DataViz` mode used to resolve the series color from the
+     * `dataViz/bg` token (e.g. `Primary`, `Secondary`). Defaults cycle.
+     */
+    appearance?: string
+    /** Hard-override the line + dot color (bypasses token resolution). */
+    color?: string
+    /** Hard-override the area fill color (bypasses token resolution). */
+    areaColor?: string
+    /** Whether to render the filled area. Defaults to `true`. */
+    showArea?: boolean
+    /** Whether to render the line stroke. Defaults to `true`. */
+    showLine?: boolean
+}
+
+export type ChartInset = {
+    top?: number
+    bottom?: number
+    left?: number
+    right?: number
+}
+
+export type GoalPinConfig = {
+    /** Pill content. */
+    value: React.ReactNode
+    /** Data index the pin anchors to. Defaults to the last point. */
+    atIndex?: number
+    /** Which series the pin anchors to. Defaults to `0`. */
+    seriesIndex?: number
+}
+
+export type AreaLineChartProps = {
+    /**
+     * The series to plot. A single entry renders the "Area Line Chart"
+     * preset; multiple entries render the overlapping multi-series preset
+     * with an automatic legend.
+     */
+    series: ChartSeries[]
+    /** Labels rendered along the x axis (left-to-right). */
+    xLabels?: Array<string | number>
+    /** Force the lower bound of the y domain. */
+    yMin?: number
+    /** Force the upper bound of the y domain. */
+    yMax?: number
+    /** Approximate number of y-axis ticks / grid lines. Defaults to `4`. */
+    numberOfTicks?: number
+    /** Interpolation between points. Defaults to `linear` (straight segments). */
+    curve?: Curve
+    /** Plot drawing height in px (excludes the x-axis row). Defaults to `218`. */
+    height?: number
+    /** Fake margin inside the SVG so strokes/dots/pins are not clipped. */
+    contentInset?: ChartInset
+    /** Toggle the background grid. Defaults to `true`. */
+    showGrid?: boolean
+    /** Toggle the x-axis labels. Defaults to `true`. */
+    showXAxis?: boolean
+    /** Toggle the y-axis labels. Defaults to `true`. */
+    showYAxis?: boolean
+    /** Toggle the legend (multi-series only). Defaults to `true`. */
+    showLegend?: boolean
+    /** Render a dot on every data point. Defaults to `false`. */
+    showDots?: boolean
+    /** Format an x label. Receives the raw label and index. */
+    formatX?: (label: string | number, index: number) => React.ReactNode
+    /** Format a y-axis tick label. */
+    formatY?: (value: number) => React.ReactNode
+    /** Format a value shown in the tooltip. Defaults to `formatY`. */
+    formatValue?: (value: number, series: ChartSeries) => React.ReactNode
+    /** Render a goal pin anchored to a data point. */
+    goalPin?: GoalPinConfig
+    /** Controlled active index (the highlighted point). */
+    activeIndex?: number | null
+    /** Initial active index for the uncontrolled case. */
+    defaultActiveIndex?: number | null
+    /** Notified whenever the active index changes. */
+    onActiveIndexChange?: (index: number | null) => void
+    /** Enable hover/press-drag interaction + tooltip. Defaults to `true`. */
+    interactive?: boolean
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Extra SVG-decorator children rendered on top of the default layers. */
+    children?: React.ReactNode
+    /** Accessibility label for the whole chart. */
+    accessibilityLabel?: string
+}
+
+// --- Internal resolved types ----------------------------------------------
+
+type ResolvedSeries = {
+    key: React.Key
+    label?: string
+    appearance: string
+    lineColor: string
+    areaColor: string
+    showArea: boolean
+    showLine: boolean
+    points: ResolvedPoint[]
+}
+
+type ChartContextValue = {
+    width: number
+    height: number
+    inset: Required<ChartInset>
+    xScale: LinearScale
+    yScale: LinearScale
+    yTicks: number[]
+    /** Pixel x position for each canonical data index. */
+    indexXs: number[]
+    /** Number of canonical data points. */
+    count: number
+    series: ResolvedSeries[]
+    curve: Curve
+    activeIndex: number | null
+    setActiveIndex: (index: number | null) => void
+    xLabels?: Array<string | number>
+    formatX: (label: string | number, index: number) => React.ReactNode
+    formatY: (value: number) => React.ReactNode
+    showDots: boolean
+    modes: Record<string, any>
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null)
+
+/** Access the surrounding chart geometry from a decorator/sub-component. */
+export function useChart(): ChartContextValue {
+    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',
+] as const
+
+const DEFAULT_INSET: Required<ChartInset> = { top: 16, bottom: 8, left: 8, right: 8 }
+
+const toNumber = (value: unknown, fallback: number): number => {
+    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: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+    if (typeof value === 'string') return value as TextStyle['fontWeight']
+    return fallback
+}
+
+const appearanceFor = (index: number) =>
+    DEFAULT_APPEARANCE_CYCLE[index % DEFAULT_APPEARANCE_CYCLE.length]
+
+/** Resolve a series' strong (line/dot) color via the `dataViz/bg` token. */
+const resolveLineColor = (
+    color: string | undefined,
+    appearance: string,
+    modes: Record<string, any>
+): string => {
+    if (color) return color
+    return (
+        (getVariableByName('dataViz/bg', {
+            ...modes,
+            'Appearance / DataViz': appearance,
+            'Emphasis / DataViz': 'High',
+        }) as string | null) ?? '#5d00b5'
+    )
+}
+
+/** Resolve a series' light area-fill color via the `dataViz/bg` token. */
+const resolveAreaColor = (
+    color: string | undefined,
+    lineColor: string,
+    appearance: string,
+    modes: Record<string, any>
+): string => {
+    if (color) return color
+    return (
+        (getVariableByName('dataViz/bg', {
+            ...modes,
+            'Appearance / DataViz': appearance,
+            'Emphasis / DataViz': 'Low',
+        }) as string | null) ?? lineColor
+    )
+}
+
+const defaultFormatY = (value: number): React.ReactNode => String(value)
+const defaultFormatX = (label: string | number): React.ReactNode => 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,
+}: AreaLineChartProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+    const inset = useMemo<Required<ChartInset>>(
+        () => ({ ...DEFAULT_INSET, ...(contentInset || {}) }),
+        [contentInset]
+    )
+
+    // Plot width is measured; height is fixed by the prop.
+    const [plotWidth, setPlotWidth] = useState(0)
+
+    const handlePlotLayout = useCallback((e: LayoutChangeEvent) => {
+        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<number | null>(defaultActiveIndex)
+    const activeIndex = isControlled ? activeIndexProp! : uncontrolledActive
+
+    const setActiveIndex = useCallback(
+        (index: number | null) => {
+            if (!isControlled) setUncontrolledActive(index)
+            onActiveIndexChange?.(index)
+        },
+        [isControlled, onActiveIndexChange]
+    )
+
+    // Resolve every series (points + colors).
+    const resolvedSeries = useMemo<ResolvedSeries[]>(() => {
+        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<[number, number]>(() => {
+        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: [number, number] =
+            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<ChartContextValue>(
+        () => ({
+            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: number) => formatY(v))
+
+    return (
+        <ChartContext.Provider value={ctx}>
+            <View
+                style={[styles.container, style]}
+                accessibilityRole="image"
+                accessibilityLabel={accessibilityLabel}
+            >
+                {showLegend && isMultiSeries ? <ChartLegend /> : null}
+
+                <View style={styles.body}>
+                    {showYAxis ? <ChartYAxis /> : null}
+
+                    <View style={styles.plotColumn}>
+                        <View style={[styles.plot, { height }]} onLayout={handlePlotLayout}>
+                            {plotWidth > 0 ? (
+                                <>
+                                    {showGrid ? <ChartGrid /> : null}
+                                    <ChartSeriesLayer />
+                                    {goalPin ? (
+                                        <ChartGoalPin
+                                            value={goalPin.value}
+                                            atIndex={goalPin.atIndex}
+                                            seriesIndex={goalPin.seriesIndex}
+                                        />
+                                    ) : null}
+                                    {children}
+                                    {interactive ? (
+                                        <ChartInteractionLayer
+                                            formatValue={resolvedFormatValue}
+                                            series={series}
+                                        />
+                                    ) : null}
+                                </>
+                            ) : null}
+                        </View>
+
+                        {showXAxis ? <ChartXAxis /> : null}
+                    </View>
+                </View>
+            </View>
+        </ChartContext.Provider>
+    )
+}
+
+// --- Series layer (areas + lines + static dots) ---------------------------
+
+function ChartSeriesLayer() {
+    const { width, height, series, xScale, yScale, yDomainBaseline, curve, showDots } =
+        useChartWithBaseline()
+
+    return (
+        <Svg style={StyleSheet.absoluteFill} width={width} height={height}>
+            {/* Areas first so lines always sit on top. */}
+            {series.map((s) =>
+                s.showArea && s.points.length ? (
+                    <Path
+                        key={`area-${s.key}`}
+                        d={buildAreaPath(toPixelPoints(s.points, xScale, yScale), yDomainBaseline, curve)}
+                        fill={s.areaColor}
+                    />
+                ) : null
+            )}
+
+            {/* Lines (split into solid / dashed runs). */}
+            {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) => (
+                    <Path
+                        key={`line-${s.key}-${i}`}
+                        d={seg.d}
+                        stroke={s.lineColor}
+                        strokeWidth={2}
+                        fill="none"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeDasharray={seg.dashed ? '5,4' : undefined}
+                    />
+                ))
+            })}
+
+            {/* Optional dot on every point. */}
+            {showDots
+                ? series.map((s) =>
+                      s.points.map((p, i) => (
+                          <Circle
+                              key={`dot-${s.key}-${i}`}
+                              cx={xScale(p.x)}
+                              cy={yScale(p.y)}
+                              r={4}
+                              fill={s.lineColor}
+                          />
+                      ))
+                  )
+                : null}
+        </Svg>
+    )
+}
+
+// --- Grid ------------------------------------------------------------------
+
+export type ChartGridProps = {
+    /** Which grid lines to draw. Defaults to `horizontal`. */
+    direction?: 'horizontal' | 'vertical' | 'both'
+    /** Stroke color. Defaults to a subtle grey. */
+    stroke?: string
+    /** Stroke width. Defaults to `1`. */
+    strokeWidth?: number
+    /** Dash pattern, e.g. `'4,4'`. Solid by default. */
+    strokeDasharray?: string
+}
+
+/** 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,
+}: ChartGridProps) {
+    const { width, height, inset, xScale, yScale, yTicks, indexXs } = useChart()
+
+    const showH = direction === 'horizontal' || direction === 'both'
+    const showV = direction === 'vertical' || direction === 'both'
+
+    return (
+        <Svg style={StyleSheet.absoluteFill} width={width} height={height} pointerEvents="none">
+            {showH
+                ? yTicks.map((t) => {
+                      const y = yScale(t)
+                      return (
+                          <Line
+                              key={`gh-${t}`}
+                              x1={inset.left}
+                              x2={width - inset.right}
+                              y1={y}
+                              y2={y}
+                              stroke={stroke}
+                              strokeWidth={strokeWidth}
+                              strokeDasharray={strokeDasharray}
+                          />
+                      )
+                  })
+                : null}
+            {showV
+                ? indexXs.map((x, i) => (
+                      <Line
+                          key={`gv-${i}`}
+                          x1={x}
+                          x2={x}
+                          y1={inset.top}
+                          y2={height - inset.bottom}
+                          stroke={stroke}
+                          strokeWidth={strokeWidth}
+                          strokeDasharray={strokeDasharray}
+                      />
+                  ))
+                : null}
+        </Svg>
+    )
+}
+
+// --- Y axis ----------------------------------------------------------------
+
+export type ChartYAxisProps = {
+    /** Show the tick text labels. Defaults to `true`. */
+    showLabels?: boolean
+    /** Show short tick marks next to the labels. Defaults to `false`. */
+    showTicks?: boolean
+    /** Length of a tick mark in px. Defaults to `4`. */
+    tickLength?: number
+    /** Show a vertical axis line. Defaults to `false`. */
+    showAxisLine?: boolean
+    /** Override the tick label formatter. */
+    formatLabel?: (value: number) => React.ReactNode
+}
+
+/** Y-axis tick labels, vertically positioned to align with the grid. */
+function ChartYAxis({
+    showLabels = true,
+    showTicks = false,
+    tickLength = 4,
+    showAxisLine = false,
+    formatLabel,
+}: ChartYAxisProps) {
+    const { height, inset, yScale, yTicks, formatY, modes } = useChart()
+    const typo = useAxisTypography(modes)
+    const format = formatLabel ?? formatY
+
+    const lineHeight = typo.lineHeight
+
+    return (
+        <View style={{ height, justifyContent: 'flex-start', flexDirection: 'row' }}>
+            <View style={{ width: undefined, height }}>
+                {yTicks.map((t) => {
+                    const y = yScale(t)
+                    return (
+                        <View
+                            key={`yl-${t}`}
+                            style={{
+                                position: 'absolute',
+                                right: showTicks ? tickLength + 4 : 0,
+                                top: y - lineHeight / 2,
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            }}
+                        >
+                            {showLabels ? (
+                                <Text style={typo.style} numberOfLines={1}>
+                                    {format(t)}
+                                </Text>
+                            ) : null}
+                        </View>
+                    )
+                })}
+            </View>
+            {showTicks ? (
+                <Svg width={tickLength} height={height} pointerEvents="none">
+                    {yTicks.map((t) => {
+                        const y = yScale(t)
+                        return (
+                            <Line
+                                key={`yt-${t}`}
+                                x1={0}
+                                x2={tickLength}
+                                y1={y}
+                                y2={y}
+                                stroke="rgba(0,0,0,0.2)"
+                                strokeWidth={1}
+                            />
+                        )
+                    })}
+                    {showAxisLine ? (
+                        <Line
+                            x1={tickLength}
+                            x2={tickLength}
+                            y1={inset.top}
+                            y2={height - inset.bottom}
+                            stroke="rgba(0,0,0,0.2)"
+                            strokeWidth={1}
+                        />
+                    ) : null}
+                </Svg>
+            ) : null}
+        </View>
+    )
+}
+
+// --- X axis ----------------------------------------------------------------
+
+export type ChartXAxisProps = {
+    /** Show the tick text labels. Defaults to `true`. */
+    showLabels?: boolean
+    /** Show short tick marks above the labels. Defaults to `false`. */
+    showTicks?: boolean
+    /** Length of a tick mark in px. Defaults to `4`. */
+    tickLength?: number
+    /** Make labels tap-to-select the nearest data point. Defaults to `true`. */
+    selectable?: boolean
+    /** Override the label formatter. */
+    formatLabel?: (label: string | number, index: number) => React.ReactNode
+}
+
+/** X-axis labels, horizontally positioned to align with the data points. */
+function ChartXAxis({
+    showLabels = true,
+    showTicks = false,
+    tickLength = 4,
+    selectable = true,
+    formatLabel,
+}: ChartXAxisProps) {
+    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',
+    }) as string | null) ?? '#5d00b5'
+
+    const labels = xLabels ?? indexXs.map((_, i) => i)
+    const labelCount = labels.length
+
+    return (
+        <View style={{ width: '100%', height: typo.lineHeight + (showTicks ? tickLength : 0) }}>
+            {showTicks ? (
+                <Svg style={StyleSheet.absoluteFill} width={width} height={tickLength} pointerEvents="none">
+                    {indexXs.map((x, i) => (
+                        <Line
+                            key={`xt-${i}`}
+                            x1={x}
+                            x2={x}
+                            y1={0}
+                            y2={tickLength}
+                            stroke="rgba(0,0,0,0.2)"
+                            strokeWidth={1}
+                        />
+                    ))}
+                </Svg>
+            ) : null}
+
+            {showLabels ? (
+                <View style={{ position: 'absolute', left: 0, right: 0, top: showTicks ? tickLength : 0 }}>
+                    {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 = (
+                            <Text
+                                style={[
+                                    typo.style,
+                                    isActive ? { color: activeColor, fontWeight: '700' } : null,
+                                ]}
+                                numberOfLines={1}
+                            >
+                                {format(label, i)}
+                            </Text>
+                        )
+                        return (
+                            <View
+                                key={`xl-${i}`}
+                                style={{
+                                    position: 'absolute',
+                                    left: x,
+                                    transform: [{ translateX: -50 }],
+                                    width: 100,
+                                    alignItems: 'center',
+                                }}
+                            >
+                                {selectable ? (
+                                    <Pressable
+                                        onPress={() => setActiveIndex(isActive ? null : dataIndex)}
+                                        hitSlop={8}
+                                    >
+                                        {content}
+                                    </Pressable>
+                                ) : (
+                                    content
+                                )}
+                            </View>
+                        )
+                    })}
+                </View>
+            ) : null}
+        </View>
+    )
+}
+
+// --- Goal pin --------------------------------------------------------------
+
+export type ChartGoalPinProps = GoalPinConfig & {
+    /** Pill background. Defaults to the series color. */
+    color?: string
+    /** Pill text color. Defaults to the `mode/Grey/2500` token (white). */
+    textColor?: string
+}
+
+/** A pill marker anchored to a data point, with a dashed connector to the baseline. */
+function ChartGoalPin({ value, atIndex, seriesIndex = 0, color, textColor }: ChartGoalPinProps) {
+    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) as string | null) ?? '#ffffff'
+
+    const PIN_SIZE = 32
+
+    return (
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            {/* Dashed connector from the pin down to the baseline. */}
+            <Svg style={StyleSheet.absoluteFill} width="100%" height={height}>
+                <Line
+                    x1={x}
+                    x2={x}
+                    y1={PIN_SIZE / 2}
+                    y2={height - inset.bottom}
+                    stroke={pinColor}
+                    strokeWidth={1.5}
+                    strokeDasharray="4,4"
+                />
+                <Circle cx={x} cy={y} r={5} fill={pinColor} stroke="#ffffff" strokeWidth={2} />
+            </Svg>
+
+            {/* Pill */}
+            <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,
+                }}
+            >
+                <Text style={{ color: pinTextColor, fontSize: 10, lineHeight: 13, textAlign: 'center' }}>
+                    {value}
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+// --- Interaction layer (crosshair + active dots + tooltip) ----------------
+
+function ChartInteractionLayer({
+    formatValue,
+    series: rawSeries,
+}: {
+    formatValue: (value: number, series: ChartSeries) => React.ReactNode
+    series: ChartSeries[]
+}) {
+    const { width, height, inset, xScale, yScale, indexXs, series, activeIndex, setActiveIndex, modes } =
+        useChart()
+    const viewRef = useRef<View>(null)
+
+    const updateFromX = useCallback(
+        (locationX: number) => {
+            const idx = nearestIndex(indexXs, locationX)
+            if (idx >= 0) setActiveIndex(idx)
+        },
+        [indexXs, setActiveIndex]
+    )
+
+    const panResponder = useMemo(
+        () =>
+            PanResponder.create({
+                onStartShouldSetPanResponder: () => true,
+                onMoveShouldSetPanResponder: () => true,
+                onPanResponderGrant: (e: GestureResponderEvent) =>
+                    updateFromX(e.nativeEvent.locationX),
+                onPanResponderMove: (e: GestureResponderEvent) =>
+                    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 as unknown as HTMLElement | null
+        if (!node) return
+        const onMove = (ev: MouseEvent) => {
+            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) as Array<{
+            key: string
+            label: string
+            value: React.ReactNode
+            color: string
+            y: number
+        }>
+    }, [hasActive, series, activeIndex, formatValue, rawSeries, yScale])
+
+    return (
+        <>
+            {/* Touch / drag capture surface. */}
+            <View
+                ref={viewRef}
+                style={StyleSheet.absoluteFill}
+                {...panResponder.panHandlers}
+            />
+
+            {hasActive ? (
+                <>
+                    {/* Crosshair + active dots. */}
+                    <Svg style={StyleSheet.absoluteFill} width={width} height={height} pointerEvents="none">
+                        <Line
+                            x1={activeX}
+                            x2={activeX}
+                            y1={inset.top}
+                            y2={height - inset.bottom}
+                            stroke="#0f0d0a"
+                            strokeWidth={1}
+                        />
+                        {tooltipItems.map((item) => (
+                            <Circle
+                                key={`active-${item.key}`}
+                                cx={activeX}
+                                cy={item.y}
+                                r={6}
+                                fill={item.color}
+                                stroke="#ffffff"
+                                strokeWidth={2}
+                            />
+                        ))}
+                    </Svg>
+
+                    <ChartTooltip x={activeX} width={width} items={tooltipItems} modes={modes} />
+                </>
+            ) : null}
+        </>
+    )
+}
+
+// --- Inline tooltip --------------------------------------------------------
+
+function ChartTooltip({
+    x,
+    width,
+    items,
+    modes,
+}: {
+    x: number
+    width: number
+    items: Array<{ key: string; label: string; value: React.ReactNode; color: string }>
+    modes: Record<string, any>
+}) {
+    const [size, setSize] = useState<{ width: number; height: number } | null>(null)
+
+    const bg = (getVariableByName('tooltip/background', modes) as string | null) ?? '#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) as string | null) ?? '#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 (
+        <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,
+            }}
+        >
+            {items.map((item) => (
+                <MetricLegendItem
+                    key={item.key}
+                    label={item.label}
+                    value={item.value as React.ReactNode}
+                    indicatorColor={item.color}
+                    modes={modes}
+                    labelStyle={{ color: labelColor }}
+                    valueStyle={{ color: labelColor, fontWeight: '700' }}
+                    style={{ gap: 8 }}
+                />
+            ))}
+        </View>
+    )
+}
+
+// --- Legend ----------------------------------------------------------------
+
+function ChartLegend() {
+    const { series, modes } = useChart()
+    return (
+        <View style={styles.legend}>
+            {series.map((s, i) => (
+                <MetricLegendItem
+                    key={`legend-${s.key}`}
+                    label={s.label ?? `Series ${i + 1}`}
+                    indicatorColor={s.lineColor}
+                    indicatorShape={s.showArea === false ? 'line' : 'dot'}
+                    modes={modes}
+                />
+            ))}
+        </View>
+    )
+}
+
+// --- Shared hooks / utils --------------------------------------------------
+
+/** Resolve `axisItem/*` typography tokens into a memoized text style. */
+function useAxisTypography(modes: Record<string, any>) {
+    return useMemo(() => {
+        const color = (getVariableByName('axisItem/color', modes) as string | null) ?? '#000000'
+        const fontFamily =
+            (getVariableByName('axisItem/fontFamily', modes) as string | null) ?? '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 } as TextStyle,
+        }
+    }, [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: ResolvedPoint[],
+    xScale: LinearScale,
+    yScale: LinearScale
+): PixelPoint[] =>
+    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