react-native-chart-kit 7.0.0-next.1 → 7.0.0-next.3

package/dist/v2/react-native/charts/line/rangeSelector.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { View } from "react-native";
+import { resolveChartViewportWindowFromHandlePosition, resolveChartViewportWindowFromPosition } from "../../../core/index";
+import { getLineChartRenderer } from "./renderer";
+import { clamp } from "./utils";
+export const LineChartRangeSelector = ({ config, dataLength, isVisible, model, onViewportChange, preventBrowserSelection, renderer: rendererProp, testID, viewportWindow, width }) => {
+    const interactionRef = useRef("move");
+    const rangeStartPoint = model.interactionPoints.find((point) => point.dataIndex === viewportWindow.startIndex);
+    const rangeEndPoint = model.interactionPoints.find((point) => point.dataIndex === Math.max(0, viewportWindow.endIndex - 1));
+    const windowX = rangeStartPoint?.x ?? model.boxes.plot.x;
+    const windowEndX = rangeEndPoint?.x ?? model.boxes.plot.x + model.boxes.plot.width;
+    const windowWidth = Math.max(10, windowEndX - windowX);
+    const emitViewportChange = useCallback((nextWindow, interaction) => {
+        onViewportChange?.({
+            viewport: {
+                startIndex: nextWindow.startIndex,
+                endIndex: nextWindow.endIndex
+            },
+            startIndex: nextWindow.startIndex,
+            endIndex: nextWindow.endIndex,
+            visibleCount: nextWindow.visibleCount,
+            itemCount: nextWindow.itemCount,
+            isWindowed: nextWindow.isWindowed,
+            source: "rangeSelector",
+            interaction
+        });
+    }, [onViewportChange]);
+    const isInteractive = isVisible && config.interactive && onViewportChange !== undefined;
+    const getInteraction = useCallback((locationX) => {
+        const handleHitSlop = Math.max(config.handleHitSlop, config.handleWidth * 2);
+        const startDistance = Math.abs(locationX - windowX);
+        const endDistance = Math.abs(locationX - windowEndX);
+        if (startDistance <= handleHitSlop && startDistance <= endDistance) {
+            return "resizeStart";
+        }
+        if (endDistance <= handleHitSlop) {
+            return "resizeEnd";
+        }
+        return "move";
+    }, [config.handleHitSlop, config.handleWidth, windowEndX, windowX]);
+    const handleInteraction = useCallback((event, interaction) => {
+        preventBrowserSelection(event);
+        if (!isInteractive) {
+            return;
+        }
+        const nextWindow = interaction === "move"
+            ? resolveChartViewportWindowFromPosition({
+                itemCount: dataLength,
+                locationX: event.nativeEvent.locationX,
+                plotWidth: model.boxes.plot.width,
+                plotX: model.boxes.plot.x,
+                visibleCount: viewportWindow.visibleCount
+            })
+            : resolveChartViewportWindowFromHandlePosition({
+                currentWindow: viewportWindow,
+                handle: interaction === "resizeStart" ? "start" : "end",
+                itemCount: dataLength,
+                locationX: event.nativeEvent.locationX,
+                minVisibleCount: config.minVisiblePoints,
+                plotWidth: model.boxes.plot.width,
+                plotX: model.boxes.plot.x
+            });
+        if (nextWindow.startIndex === viewportWindow.startIndex &&
+            nextWindow.endIndex === viewportWindow.endIndex) {
+            return;
+        }
+        emitViewportChange(nextWindow, interaction);
+    }, [
+        config.minVisiblePoints,
+        dataLength,
+        emitViewportChange,
+        isInteractive,
+        model.boxes.plot.width,
+        model.boxes.plot.x,
+        preventBrowserSelection,
+        viewportWindow
+    ]);
+    const responderProps = isInteractive
+        ? {
+            onStartShouldSetResponderCapture: () => true,
+            onMoveShouldSetResponderCapture: () => true,
+            onStartShouldSetResponder: () => true,
+            onMoveShouldSetResponder: () => true,
+            onResponderGrant: (event) => {
+                const interaction = getInteraction(event.nativeEvent.locationX);
+                interactionRef.current = interaction;
+                config.onGestureStart?.({ interaction });
+                handleInteraction(event, interaction);
+            },
+            onResponderMove: (event) => {
+                handleInteraction(event, interactionRef.current);
+            },
+            onResponderRelease: () => {
+                config.onGestureEnd?.({ interaction: interactionRef.current });
+                interactionRef.current = "move";
+            },
+            onResponderTerminate: () => {
+                config.onGestureEnd?.({ interaction: interactionRef.current });
+                interactionRef.current = "move";
+            },
+            onResponderTerminationRequest: () => false
+        }
+        : {};
+    if (!isVisible) {
+        return null;
+    }
+    const plotX = model.boxes.plot.x;
+    const plotY = model.boxes.plot.y;
+    const plotWidth = model.boxes.plot.width;
+    const plotHeight = model.boxes.plot.height;
+    const handleWidth = config.handleWidth;
+    const handleColor = config.handleColor ?? config.windowStroke ?? model.resolvedTheme.axis;
+    const renderer = getLineChartRenderer(rendererProp);
+    const { Group, Path, Rect, Surface } = renderer;
+    const Layer = renderer.Layer ?? Group;
+    const handleMinX = model.boxes.plot.x;
+    const handleMaxX = model.boxes.plot.x + model.boxes.plot.width - handleWidth;
+    const startHandleX = clamp(windowX - handleWidth / 2, handleMinX, handleMaxX);
+    const endHandleX = clamp(windowEndX - handleWidth / 2, handleMinX, handleMaxX);
+    const handleHeight = Math.max(8, config.handleHeight ?? plotHeight - config.handleInset * 2);
+    const handleY = plotY + (plotHeight - handleHeight) / 2;
+    const handleRadius = config.handleRadius ?? handleWidth / 2;
+    const windowProps = {
+        x: windowX,
+        y: plotY,
+        width: windowWidth,
+        height: plotHeight,
+        radius: config.windowRadius,
+        fill: config.windowFill ?? model.resolvedTheme.axis,
+        opacity: config.windowOpacity,
+        stroke: config.windowStroke ?? model.resolvedTheme.axis,
+        strokeOpacity: config.windowStrokeOpacity,
+        strokeWidth: config.windowStrokeWidth,
+        theme: model.resolvedTheme
+    };
+    const renderWindow = () => config.renderWindow ? (config.renderWindow(windowProps)) : (_jsx(Rect, { x: windowProps.x, y: windowProps.y, width: windowProps.width, height: windowProps.height, rx: windowProps.radius, fill: windowProps.fill, opacity: windowProps.opacity, stroke: windowProps.stroke, strokeOpacity: windowProps.strokeOpacity, strokeWidth: windowProps.strokeWidth }));
+    const renderHandle = (side, x) => {
+        const handleProps = {
+            side,
+            x,
+            y: handleY,
+            width: handleWidth,
+            height: handleHeight,
+            radius: handleRadius,
+            color: handleColor,
+            opacity: config.handleOpacity,
+            theme: model.resolvedTheme,
+            window: windowProps
+        };
+        return config.renderHandle ? (config.renderHandle(handleProps)) : (_jsx(Rect, { x: handleProps.x, y: handleProps.y, width: handleProps.width, height: handleProps.height, rx: handleProps.radius, fill: handleProps.color, opacity: handleProps.opacity }));
+    };
+    const renderLine = (props) => config.renderLine ? (_jsx(Group, { children: config.renderLine(props) }, `range-line-${props.key}`)) : (_jsx(Path, { d: props.path, fill: "none", stroke: props.color, strokeLinecap: "round", strokeLinejoin: "round", strokeOpacity: props.opacity, strokeWidth: props.strokeWidth, ...(props.strokeDasharray
+            ? { strokeDasharray: props.strokeDasharray }
+            : {}) }, `range-line-${props.key}`));
+    return (_jsxs(View, { collapsable: false, pointerEvents: isInteractive ? "auto" : "none", style: {
+            height: config.height,
+            marginTop: config.gap,
+            overflow: "hidden",
+            position: "relative",
+            width
+        }, testID: testID ? `${testID}-range-selector` : undefined, children: [_jsxs(Surface, { width: width, height: config.height, children: [_jsxs(Layer, { name: "background", children: [_jsx(Rect, { x: 0, y: 0, width: width, height: config.height, rx: 8, fill: config.backgroundFill ?? model.resolvedTheme.background }), _jsx(Rect, { x: plotX, y: plotY, width: plotWidth, height: plotHeight, rx: config.plotRadius, fill: config.plotFill ?? model.resolvedTheme.plotBackground })] }), _jsx(Layer, { name: "data", children: model.geometries.map(({ geometry, style }, index) => {
+                            const seriesStyle = config.series?.[geometry.key];
+                            const lineProps = {
+                                color: seriesStyle?.color ?? style.color,
+                                index,
+                                key: geometry.key,
+                                label: geometry.label,
+                                opacity: seriesStyle?.opacity ?? config.lineOpacity,
+                                path: geometry.line.path,
+                                strokeDasharray: seriesStyle?.strokeDasharray,
+                                strokeWidth: seriesStyle?.strokeWidth ??
+                                    config.lineStrokeWidth ??
+                                    Math.max(config.lineMinStrokeWidth, style.strokeWidth * config.lineStrokeWidthScale),
+                                theme: model.resolvedTheme
+                            };
+                            return renderLine(lineProps);
+                        }) }), _jsxs(Layer, { name: "overlays", children: [config.outsideOpacity > 0 ? (_jsxs(Group, { children: [_jsx(Rect, { x: plotX, y: plotY, width: Math.max(0, windowX - plotX), height: plotHeight, fill: config.outsideFill ?? model.resolvedTheme.background, opacity: config.outsideOpacity }, "range-selector-outside-start"), _jsx(Rect, { x: windowEndX, y: plotY, width: Math.max(0, plotX + plotWidth - windowEndX), height: plotHeight, fill: config.outsideFill ?? model.resolvedTheme.background, opacity: config.outsideOpacity }, "range-selector-outside-end")] }, "range-selector-outside")) : null, renderWindow(), isInteractive ? (_jsxs(Group, { children: [renderHandle("start", startHandleX), renderHandle("end", endHandleX)] }, "range-selector-handles")) : null] })] }), isInteractive ? (_jsx(View, { collapsable: false, pointerEvents: "auto", style: {
+                    bottom: 0,
+                    left: 0,
+                    position: "absolute",
+                    right: 0,
+                    top: 0
+                }, ...responderProps })) : null] }));
+};

package/dist/v2/react-native/charts/line/rangeSelectorConfig.d.ts

@@ -0,0 +1,38 @@
+import type { LineChartProps } from "./types";
+export declare const getRangeSelectorConfig: (rangeSelector: LineChartProps<Record<string, unknown>>["rangeSelector"]) => {
+    visible: boolean;
+    height: number;
+    gap: number;
+    interactive: boolean;
+    minVisiblePoints: number;
+    backgroundFill: string | undefined;
+    plotFill: string | undefined;
+    plotRadius: number;
+    lineMinStrokeWidth: number;
+    lineStrokeWidth: number | undefined;
+    lineStrokeWidthScale: number;
+    series: Record<string, import("./types").LineChartRangeSelectorSeriesStyle> | undefined;
+    outsideFill: string | undefined;
+    outsideOpacity: number;
+    windowFill: string | undefined;
+    windowOpacity: number;
+    windowRadius: number;
+    windowStroke: string | undefined;
+    windowStrokeOpacity: number;
+    windowStrokeWidth: number;
+    lineOpacity: number;
+    handleColor: string | undefined;
+    handleHeight: number | undefined;
+    handleHitSlop: number;
+    handleInset: number;
+    handleOpacity: number;
+    handleRadius: number | undefined;
+    handleWidth: number;
+    renderHandle: ((props: import("./types").LineChartRangeSelectorHandleRenderProps) => import("react").ReactNode) | undefined;
+    renderLine: ((props: import("./types").LineChartRangeSelectorLineRenderProps) => import("react").ReactNode) | undefined;
+    renderWindow: ((props: import("./types").LineChartRangeSelectorWindowRenderProps) => import("react").ReactNode) | undefined;
+    onGestureEnd: ((event: import("./types").LineChartRangeSelectorGestureEvent) => void) | undefined;
+    onGestureStart: ((event: import("./types").LineChartRangeSelectorGestureEvent) => void) | undefined;
+};
+export type LineChartRangeSelectorResolvedConfig = ReturnType<typeof getRangeSelectorConfig>;
+//# sourceMappingURL=rangeSelectorConfig.d.ts.map

package/dist/v2/react-native/charts/line/rangeSelectorConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rangeSelectorConfig.d.ts","sourceRoot":"","sources":["../../../src/charts/line/rangeSelectorConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,sBAAsB,GACjC,eAAe,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxE,CAAC;AAEF,MAAM,MAAM,oCAAoC,GAAG,UAAU,CAC3D,OAAO,sBAAsB,CAC9B,CAAC"}

package/dist/v2/react-native/charts/line/rangeSelectorConfig.js

@@ -0,0 +1,41 @@
+export const getRangeSelectorConfig = (rangeSelector) => {
+    const config = typeof rangeSelector === "object" ? rangeSelector : {};
+    const visible = typeof rangeSelector === "boolean"
+        ? rangeSelector
+        : rangeSelector !== undefined && config.visible !== false;
+    return {
+        visible,
+        height: config.height ?? 54,
+        gap: config.gap ?? 10,
+        interactive: config.interactive ?? false,
+        minVisiblePoints: config.minVisiblePoints ?? 2,
+        backgroundFill: config.backgroundFill,
+        plotFill: config.plotFill,
+        plotRadius: config.plotRadius ?? 6,
+        lineMinStrokeWidth: config.lineMinStrokeWidth ?? 1.5,
+        lineStrokeWidth: config.lineStrokeWidth,
+        lineStrokeWidthScale: config.lineStrokeWidthScale ?? 0.62,
+        series: config.series,
+        outsideFill: config.outsideFill,
+        outsideOpacity: config.outsideOpacity ?? 0,
+        windowFill: config.windowFill,
+        windowOpacity: config.windowOpacity ?? 0.1,
+        windowRadius: config.windowRadius ?? 6,
+        windowStroke: config.windowStroke,
+        windowStrokeOpacity: config.windowStrokeOpacity ?? 0.42,
+        windowStrokeWidth: config.windowStrokeWidth ?? 1,
+        lineOpacity: config.lineOpacity ?? 0.62,
+        handleColor: config.handleColor,
+        handleHeight: config.handleHeight,
+        handleHitSlop: config.handleHitSlop ?? 18,
+        handleInset: config.handleInset ?? 6,
+        handleOpacity: config.handleOpacity ?? 0.9,
+        handleRadius: config.handleRadius,
+        handleWidth: config.handleWidth ?? 3,
+        renderHandle: config.renderHandle,
+        renderLine: config.renderLine,
+        renderWindow: config.renderWindow,
+        onGestureEnd: config.onGestureEnd,
+        onGestureStart: config.onGestureStart
+    };
+};

package/dist/v2/react-native/charts/line/referenceLabelPlacement.d.ts

@@ -0,0 +1,21 @@
+import type { GeometryPoint, Rect } from "../../../core/index";
+import type { LineChartReferenceLabelPlacement } from "./types";
+export type ReferenceCollisionGeometry = {
+    line: {
+        segments: Array<{
+            points: GeometryPoint[];
+        }>;
+    };
+};
+export declare const resolveReferenceLineLabelY: ({ geometries, labelOffset, labelPlacement, lineY, plot, text, textAnchor, fontSize, x }: {
+    geometries: ReferenceCollisionGeometry[] | undefined;
+    labelOffset: number;
+    labelPlacement: LineChartReferenceLabelPlacement | undefined;
+    lineY: number;
+    plot: Rect;
+    text: string;
+    textAnchor: "middle" | "start" | "end";
+    fontSize: number;
+    x: number;
+}) => number;
+//# sourceMappingURL=referenceLabelPlacement.d.ts.map

package/dist/v2/react-native/charts/line/referenceLabelPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"referenceLabelPlacement.d.ts","sourceRoot":"","sources":["../../../src/charts/line/referenceLabelPlacement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAKhE,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK,CAAC;YACd,MAAM,EAAE,aAAa,EAAE,CAAC;SACzB,CAAC,CAAC;KACJ,CAAC;CACH,CAAC;AAuMF,eAAO,MAAM,0BAA0B,GAAI,yFAUxC;IACD,UAAU,EAAE,0BAA0B,EAAE,GAAG,SAAS,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,gCAAgC,GAAG,SAAS,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;CACX,WAoBA,CAAC"}

package/dist/v2/react-native/charts/line/referenceLabelPlacement.js

@@ -0,0 +1,113 @@
+const referenceLabelSeriesPadding = 10;
+const referenceLabelSpacing = 3;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const estimateReferenceLabelWidth = (text, fontSize) => Math.max(fontSize, text.length * fontSize * 0.56);
+const getReferenceLabelBox = ({ fontSize, text, textAnchor, x, y }) => {
+    const width = estimateReferenceLabelWidth(text, fontSize);
+    const left = textAnchor === "middle"
+        ? x - width / 2
+        : textAnchor === "end"
+            ? x - width
+            : x;
+    return {
+        x: left,
+        y: y - fontSize,
+        width,
+        height: fontSize
+    };
+};
+const expandBox = (box, padding) => ({
+    x: box.x - padding,
+    y: box.y - padding,
+    width: box.width + padding * 2,
+    height: box.height + padding * 2
+});
+const containsPoint = (box, point) => point.x >= box.x &&
+    point.x <= box.x + box.width &&
+    point.y >= box.y &&
+    point.y <= box.y + box.height;
+const orientation = (a, b, c) => (b.y - a.y) * (c.x - b.x) - (b.x - a.x) * (c.y - b.y);
+const isBetween = (value, start, end) => value >= Math.min(start, end) && value <= Math.max(start, end);
+const segmentsIntersect = (a, b, c, d) => {
+    const first = orientation(a, b, c);
+    const second = orientation(a, b, d);
+    const third = orientation(c, d, a);
+    const fourth = orientation(c, d, b);
+    if (first === 0 && isBetween(c.x, a.x, b.x) && isBetween(c.y, a.y, b.y)) {
+        return true;
+    }
+    if (second === 0 && isBetween(d.x, a.x, b.x) && isBetween(d.y, a.y, b.y)) {
+        return true;
+    }
+    if (third === 0 && isBetween(a.x, c.x, d.x) && isBetween(a.y, c.y, d.y)) {
+        return true;
+    }
+    if (fourth === 0 && isBetween(b.x, c.x, d.x) && isBetween(b.y, c.y, d.y)) {
+        return true;
+    }
+    return first > 0 !== second > 0 && third > 0 !== fourth > 0;
+};
+const segmentIntersectsBox = (start, end, box) => {
+    if (containsPoint(box, start) || containsPoint(box, end)) {
+        return true;
+    }
+    const left = box.x;
+    const right = box.x + box.width;
+    const top = box.y;
+    const bottom = box.y + box.height;
+    const topLeft = { x: left, y: top };
+    const topRight = { x: right, y: top };
+    const bottomRight = { x: right, y: bottom };
+    const bottomLeft = { x: left, y: bottom };
+    return (segmentsIntersect(start, end, topLeft, topRight) ||
+        segmentsIntersect(start, end, topRight, bottomRight) ||
+        segmentsIntersect(start, end, bottomRight, bottomLeft) ||
+        segmentsIntersect(start, end, bottomLeft, topLeft));
+};
+const collidesWithSeries = (box, geometries) => {
+    if (!geometries || geometries.length === 0) {
+        return false;
+    }
+    const paddedBox = expandBox(box, referenceLabelSeriesPadding);
+    return geometries.some((geometry) => geometry.line.segments.some((segment) => segment.points.some((point, index) => {
+        const next = segment.points[index + 1];
+        return next ? segmentIntersectsBox(point, next, paddedBox) : false;
+    })));
+};
+const getReferenceLabelCandidate = ({ geometries, labelOffset, labelPlacement, lineY, plot, text, textAnchor, fontSize, x }) => {
+    const plotBottom = plot.y + plot.height;
+    const desiredY = labelPlacement === "above"
+        ? lineY - labelOffset
+        : lineY + fontSize + labelOffset;
+    const y = clamp(desiredY, plot.y + fontSize, plotBottom - referenceLabelSpacing);
+    const box = getReferenceLabelBox({ fontSize, text, textAnchor, x, y });
+    const overflow = Math.max(0, plot.y - box.y) + Math.max(0, box.y + box.height - plotBottom);
+    const lineCollision = lineY >= box.y - referenceLabelSpacing &&
+        lineY <= box.y + box.height + referenceLabelSpacing;
+    const seriesCollision = collidesWithSeries(box, geometries);
+    return {
+        box,
+        y,
+        score: (labelPlacement === "below" ? 1 : 0) +
+            overflow * 20 +
+            (lineCollision ? 200 : 0) +
+            (seriesCollision ? 100 : 0)
+    };
+};
+export const resolveReferenceLineLabelY = ({ geometries, labelOffset, labelPlacement, lineY, plot, text, textAnchor, fontSize, x }) => {
+    const placements = labelPlacement === "above" || labelPlacement === "below"
+        ? [labelPlacement]
+        : ["above", "below"];
+    const candidates = placements.map((placement) => getReferenceLabelCandidate({
+        geometries,
+        labelOffset,
+        labelPlacement: placement,
+        lineY,
+        plot,
+        text,
+        textAnchor,
+        fontSize,
+        x
+    }));
+    return candidates.sort((a, b) => a.score - b.score)[0]?.y ?? lineY;
+};

package/dist/v2/react-native/charts/line/references.d.ts

@@ -0,0 +1,62 @@
+import type { LinearScale, Rect } from "../../../core/index";
+import type { ResolvedCartesianChartTheme } from "../../theme";
+import { type ReferenceCollisionGeometry } from "./referenceLabelPlacement";
+import type { LineChartReferenceBandConfig, LineChartReferenceLineConfig } from "./types";
+export type LineChartReferenceLabelContainerModel = {
+    backgroundColor: string;
+    borderRadius: number;
+    opacity: number;
+    paddingX: number;
+    paddingY: number;
+};
+export type LineChartReferenceLineModel = {
+    key: string;
+    x1: number;
+    x2: number;
+    y: number;
+    color: string;
+    opacity: number;
+    strokeDasharray?: readonly number[];
+    strokeWidth: number;
+    label?: {
+        text: string;
+        x: number;
+        y: number;
+        color: string;
+        container?: LineChartReferenceLabelContainerModel;
+        fontSize: number;
+        textAnchor: "middle" | "start" | "end";
+    };
+};
+export type LineChartReferenceBandModel = {
+    key: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    label?: {
+        text: string;
+        x: number;
+        y: number;
+        color: string;
+        container?: LineChartReferenceLabelContainerModel;
+        fontSize: number;
+        textAnchor: "middle" | "start" | "end";
+    };
+};
+export declare const buildLineChartReferenceLineModels: ({ geometries, lines, plot, theme, yScale }: {
+    geometries?: ReferenceCollisionGeometry[] | undefined;
+    lines: LineChartReferenceLineConfig[] | undefined;
+    plot: Rect;
+    theme: ResolvedCartesianChartTheme;
+    yScale: LinearScale;
+}) => LineChartReferenceLineModel[];
+export declare const buildLineChartReferenceBandModels: ({ bands, plot, theme, yScale }: {
+    bands: LineChartReferenceBandConfig[] | undefined;
+    plot: Rect;
+    theme: ResolvedCartesianChartTheme;
+    yScale: LinearScale;
+}) => LineChartReferenceBandModel[];
+//# sourceMappingURL=references.d.ts.map

package/dist/v2/react-native/charts/line/references.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"references.d.ts","sourceRoot":"","sources":["../../../src/charts/line/references.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EACV,4BAA4B,EAG5B,4BAA4B,EAC7B,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,qCAAqC,GAAG;IAClD,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,qCAAqC,CAAC;QAClD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;KACxC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,qCAAqC,CAAC;QAClD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;KACxC,CAAC;CACH,CAAC;AAgGF,eAAO,MAAM,iCAAiC,GAAI,4CAM/C;IACD,UAAU,CAAC,EAAE,0BAA0B,EAAE,GAAG,SAAS,CAAC;IACtD,KAAK,EAAE,4BAA4B,EAAE,GAAG,SAAS,CAAC;IAClD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,2BAA2B,CAAC;IACnC,MAAM,EAAE,WAAW,CAAC;CACrB,KAAG,2BAA2B,EAwE9B,CAAC;AAEF,eAAO,MAAM,iCAAiC,GAAI,gCAK/C;IACD,KAAK,EAAE,4BAA4B,EAAE,GAAG,SAAS,CAAC;IAClD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,2BAA2B,CAAC;IACnC,MAAM,EAAE,WAAW,CAAC;CACrB,KAAG,2BAA2B,EA8D9B,CAAC"}

package/dist/v2/react-native/charts/line/references.js

@@ -0,0 +1,156 @@
+import { resolveReferenceLineLabelY } from "./referenceLabelPlacement";
+const defaultReferenceLineOpacity = 0.86;
+const defaultReferenceBandOpacity = 0.1;
+const defaultReferenceLabelContainerBorderRadius = 4;
+const defaultReferenceLabelContainerOpacity = 0.9;
+const defaultReferenceLabelContainerPaddingX = 3;
+const defaultReferenceLabelContainerPaddingY = 2;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const resolveOpacity = (value, fallback) => typeof value === "number" && Number.isFinite(value)
+    ? clamp(value, 0, 1)
+    : fallback;
+const isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+const resolveFiniteNumber = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? value : fallback;
+const resolveReferenceLabelContainer = ({ container, theme }) => {
+    if (!container) {
+        return undefined;
+    }
+    const config = typeof container === "object" ? container : {};
+    return {
+        backgroundColor: config.backgroundColor ?? theme.plotBackground,
+        borderRadius: Math.max(0, resolveFiniteNumber(config.borderRadius, defaultReferenceLabelContainerBorderRadius)),
+        opacity: resolveOpacity(config.opacity, defaultReferenceLabelContainerOpacity),
+        paddingX: Math.max(0, resolveFiniteNumber(config.paddingX, defaultReferenceLabelContainerPaddingX)),
+        paddingY: Math.max(0, resolveFiniteNumber(config.paddingY, defaultReferenceLabelContainerPaddingY))
+    };
+};
+const getTextAnchor = (position) => {
+    if (position === "start") {
+        return "start";
+    }
+    if (position === "center") {
+        return "middle";
+    }
+    return "end";
+};
+const getReferenceLabelX = ({ plot, position }) => {
+    if (position === "start") {
+        return plot.x + 8;
+    }
+    if (position === "center") {
+        return plot.x + plot.width / 2;
+    }
+    return plot.x + plot.width - 8;
+};
+export const buildLineChartReferenceLineModels = ({ geometries, lines, plot, theme, yScale }) => {
+    if (!lines || lines.length === 0) {
+        return [];
+    }
+    const plotBottom = plot.y + plot.height;
+    return lines.flatMap((line, index) => {
+        if (!isFiniteNumber(line.y)) {
+            return [];
+        }
+        const y = yScale.scale(line.y);
+        if (y < plot.y || y > plotBottom) {
+            return [];
+        }
+        const labelPosition = line.labelPosition ?? "end";
+        const labelFontSize = typeof line.labelFontSize === "number" && line.labelFontSize > 0
+            ? line.labelFontSize
+            : theme.typography.axisLabelSize;
+        const labelOffset = typeof line.labelOffset === "number" && Number.isFinite(line.labelOffset)
+            ? line.labelOffset
+            : 6;
+        const model = {
+            key: `reference-line-${index}-${line.y}`,
+            x1: plot.x,
+            x2: plot.x + plot.width,
+            y,
+            color: line.color ?? theme.mutedText,
+            opacity: resolveOpacity(line.opacity, defaultReferenceLineOpacity),
+            strokeWidth: line.strokeWidth ?? 1
+        };
+        if (line.strokeDasharray !== undefined) {
+            model.strokeDasharray = line.strokeDasharray;
+        }
+        if (line.label) {
+            const textAnchor = getTextAnchor(labelPosition);
+            const labelX = getReferenceLabelX({ plot, position: labelPosition });
+            const labelContainer = resolveReferenceLabelContainer({
+                container: line.labelContainer,
+                theme
+            });
+            model.label = {
+                text: line.label,
+                x: labelX,
+                y: resolveReferenceLineLabelY({
+                    geometries,
+                    labelOffset,
+                    labelPlacement: line.labelPlacement,
+                    lineY: y,
+                    plot,
+                    text: line.label,
+                    textAnchor,
+                    fontSize: labelFontSize,
+                    x: labelX
+                }),
+                color: line.labelColor ?? line.color ?? theme.mutedText,
+                ...(labelContainer !== undefined ? { container: labelContainer } : {}),
+                fontSize: labelFontSize,
+                textAnchor
+            };
+        }
+        return [model];
+    });
+};
+export const buildLineChartReferenceBandModels = ({ bands, plot, theme, yScale }) => {
+    if (!bands || bands.length === 0) {
+        return [];
+    }
+    const plotBottom = plot.y + plot.height;
+    return bands.flatMap((band, index) => {
+        if (!isFiniteNumber(band.y1) || !isFiniteNumber(band.y2)) {
+            return [];
+        }
+        const yA = yScale.scale(band.y1);
+        const yB = yScale.scale(band.y2);
+        const top = Math.min(yA, yB);
+        const bottom = Math.max(yA, yB);
+        const clampedTop = clamp(top, plot.y, plotBottom);
+        const clampedBottom = clamp(bottom, plot.y, plotBottom);
+        const height = clampedBottom - clampedTop;
+        if (height <= 0.5) {
+            return [];
+        }
+        const labelPosition = band.labelPosition ?? "start";
+        const labelFontSize = typeof band.labelFontSize === "number" && band.labelFontSize > 0
+            ? band.labelFontSize
+            : theme.typography.axisLabelSize;
+        const model = {
+            key: `reference-band-${index}-${band.y1}-${band.y2}`,
+            x: plot.x,
+            y: clampedTop,
+            width: plot.width,
+            height,
+            color: band.color ?? theme.series[0] ?? theme.grid,
+            opacity: resolveOpacity(band.opacity, defaultReferenceBandOpacity)
+        };
+        if (band.label) {
+            const labelContainer = resolveReferenceLabelContainer({
+                container: band.labelContainer,
+                theme
+            });
+            model.label = {
+                text: band.label,
+                x: getReferenceLabelX({ plot, position: labelPosition }),
+                y: clamp(clampedTop + labelFontSize + 6, plot.y + labelFontSize, plotBottom - 4),
+                color: band.labelColor ?? band.color ?? theme.mutedText,
+                ...(labelContainer !== undefined ? { container: labelContainer } : {}),
+                fontSize: labelFontSize,
+                textAnchor: getTextAnchor(labelPosition)
+            };
+        }
+        return [model];
+    });
+};

package/dist/v2/react-native/charts/line/renderer.d.ts

@@ -0,0 +1,4 @@
+import type { LineChartRenderer } from "./types";
+export declare const lineChartSvgRenderer: LineChartRenderer;
+export declare const getLineChartRenderer: (renderer: LineChartRenderer | undefined) => LineChartRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/v2/react-native/charts/line/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../src/charts/line/renderer.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,oBAAoB,EAAE,iBAoBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAU,iBAAiB,GAAG,SAAS,sBAC1C,CAAC"}

package/dist/v2/react-native/charts/line/renderer.js

@@ -0,0 +1,23 @@
+import { SvgClipRect, SvgCircle, SvgDefs, SvgGroup, SvgLayer, SvgLine, SvgLinearGradientDef, SvgPath, SvgRect, SvgSurface, SvgText } from "../../../svg-renderer/index";
+export const lineChartSvgRenderer = {
+    ClipRect: SvgClipRect,
+    Circle: SvgCircle,
+    Defs: SvgDefs,
+    Group: SvgGroup,
+    Layer: SvgLayer,
+    Line: SvgLine,
+    LinearGradient: SvgLinearGradientDef,
+    Path: SvgPath,
+    Rect: SvgRect,
+    Surface: SvgSurface,
+    Text: SvgText,
+    capabilities: {
+        clipPaths: true,
+        gradients: true,
+        pathGradients: false,
+        rectClips: false,
+        text: true
+    },
+    name: "svg"
+};
+export const getLineChartRenderer = (renderer) => renderer ?? lineChartSvgRenderer;