react-native-chart-kit 7.0.0-next.0 → 7.0.0-next.2

package/dist/v2/react-native/charts/contribution/model.js

@@ -0,0 +1,102 @@
+import { buildContributionHeatmap, normalizeLegacyContributionData } from "../../../core/index";
+import { resolveCartesianChartThemeConfig } from "../../theme/presets";
+const defaultCellSize = 12;
+const defaultGutterSize = 3;
+const defaultMonthLabels = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+];
+const defaultWeekdayLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const clamp = (value, min, max) => {
+    if (max < min) {
+        return min;
+    }
+    return Math.min(Math.max(value, min), max);
+};
+const getDefaultCellOpacity = ({ cell, valueMax }) => {
+    if (!cell.defined ||
+        cell.value === null ||
+        cell.value <= 0 ||
+        valueMax <= 0) {
+        return 0.22;
+    }
+    return 0.28 + clamp(cell.value / valueMax, 0, 1) * 0.72;
+};
+const getDefaultCellFill = ({ cell, colors, emptyColor, theme, valueMax }) => {
+    if (!cell.defined ||
+        cell.value === null ||
+        cell.value <= 0 ||
+        valueMax <= 0) {
+        return emptyColor;
+    }
+    if (colors && colors.length > 0) {
+        const level = clamp(Math.ceil((cell.value / valueMax) * colors.length) - 1, 0, colors.length - 1);
+        return (colors[level] ??
+            colors[colors.length - 1] ??
+            theme.series[0] ??
+            theme.text);
+    }
+    return theme.series[0] ?? theme.text;
+};
+export const getContributionGraphMonthLabel = (monthIndex, date, formatter) => formatter?.(monthIndex, date) ?? defaultMonthLabels[monthIndex] ?? "";
+export const getContributionGraphWeekdayLabel = (dayIndex, formatter) => formatter?.(dayIndex) ?? defaultWeekdayLabels[dayIndex] ?? "";
+export const buildContributionGraphModel = ({ chartKitTheme, props }) => {
+    const { accessor = "count", cellSize = defaultCellSize, colorForValue, colors, emptyColor, endDate, gutterSize = defaultGutterSize, numDays, preset, showOutOfRangeDays, theme, values, weekStartsOn } = props;
+    const resolvedTheme = resolveCartesianChartThemeConfig({
+        mode: typeof theme === "string" && theme !== "system"
+            ? theme
+            : chartKitTheme.mode,
+        preset: preset ?? chartKitTheme.preset,
+        presets: chartKitTheme.presets,
+        theme: typeof theme === "object" ? theme : chartKitTheme.theme
+    });
+    const normalized = normalizeLegacyContributionData(values, {
+        accessor,
+        endDate,
+        numDays
+    });
+    const heatmap = buildContributionHeatmap({
+        data: normalized,
+        cellSize,
+        gutterSize,
+        weekStartsOn,
+        showOutOfRangeDays
+    });
+    const resolvedEmptyColor = emptyColor ?? resolvedTheme.grid;
+    const cells = heatmap.cells.map((cell) => {
+        const renderProps = {
+            cell,
+            valueMin: heatmap.valueMin,
+            valueMax: heatmap.valueMax,
+            theme: resolvedTheme
+        };
+        const fill = colorForValue?.(renderProps) ??
+            getDefaultCellFill({
+                ...renderProps,
+                colors,
+                emptyColor: resolvedEmptyColor
+            });
+        return {
+            ...cell,
+            fill,
+            opacity: colorForValue || colors
+                ? 1
+                : getDefaultCellOpacity({ cell, valueMax: heatmap.valueMax })
+        };
+    });
+    return {
+        ...heatmap,
+        cells,
+        resolvedTheme
+    };
+};

package/dist/v2/react-native/charts/contribution/types.d.ts

@@ -0,0 +1,50 @@
+import type { ContributionHeatmapCell, ContributionHeatmapModel, LegacyContributionValue } from "../../../core/index";
+import type { CartesianChartPresetValue, CartesianChartTheme, ResolvedCartesianChartTheme } from "../../theme";
+import type { LineChartRenderer } from "../line/types";
+export type ContributionGraphRenderer = LineChartRenderer;
+export type ContributionGraphDayPressEvent<TData = LegacyContributionValue> = {
+    index: number;
+    date: Date;
+    value: number | null;
+    raw?: TData;
+};
+export type ContributionGraphColorRenderProps<TData = LegacyContributionValue> = {
+    cell: ContributionHeatmapCell<TData>;
+    valueMin: number;
+    valueMax: number;
+    theme: ResolvedCartesianChartTheme;
+};
+export type ContributionGraphCellModel<TData = LegacyContributionValue> = ContributionHeatmapCell<TData> & {
+    fill: string;
+    opacity: number;
+};
+export type ContributionGraphProps<TData extends LegacyContributionValue = LegacyContributionValue> = {
+    values: TData[];
+    endDate: string | number | Date;
+    numDays: number;
+    width: number;
+    height: number;
+    accessor?: keyof TData & string;
+    cellSize?: number;
+    gutterSize?: number;
+    weekStartsOn?: number;
+    showMonthLabels?: boolean;
+    showWeekdayLabels?: boolean;
+    showOutOfRangeDays?: boolean;
+    theme?: "light" | "dark" | "system" | CartesianChartTheme;
+    preset?: CartesianChartPresetValue;
+    colors?: string[];
+    emptyColor?: string;
+    colorForValue?: (props: ContributionGraphColorRenderProps<TData>) => string;
+    getMonthLabel?: (monthIndex: number, date: Date) => string;
+    getWeekdayLabel?: (dayIndex: number) => string;
+    onDayPress?: (event: ContributionGraphDayPressEvent<TData>) => void;
+    renderer?: ContributionGraphRenderer;
+    accessibilityLabel?: string;
+    testID?: string;
+};
+export type ContributionGraphModel<TData = LegacyContributionValue> = Omit<ContributionHeatmapModel<TData>, "cells"> & {
+    cells: Array<ContributionGraphCellModel<TData>>;
+    resolvedTheme: ResolvedCartesianChartTheme;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/v2/react-native/charts/contribution/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/contribution/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EACV,yBAAyB,EACzB,mBAAmB,EACnB,2BAA2B,EAC5B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC;AAE1D,MAAM,MAAM,8BAA8B,CAAC,KAAK,GAAG,uBAAuB,IAAI;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,iCAAiC,CAAC,KAAK,GAAG,uBAAuB,IAC3E;IACE,IAAI,EAAE,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,2BAA2B,CAAC;CACpC,CAAC;AAEJ,MAAM,MAAM,0BAA0B,CAAC,KAAK,GAAG,uBAAuB,IACpE,uBAAuB,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAChC,KAAK,SAAS,uBAAuB,GAAG,uBAAuB,IAC7D;IACF,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,KAAK,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,mBAAmB,CAAC;IAC1D,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iCAAiC,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;IAC5E,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,KAAK,GAAG,uBAAuB,IAAI,IAAI,CACxE,wBAAwB,CAAC,KAAK,CAAC,EAC/B,OAAO,CACR,GAAG;IACF,KAAK,EAAE,KAAK,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,aAAa,EAAE,2BAA2B,CAAC;CAC5C,CAAC"}

package/dist/v2/react-native/charts/contribution/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import type { LineChartProps } from "./types";
+export declare const AreaChart: <TData extends Record<string, unknown>>(props: LineChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AreaChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/charts/line/AreaChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,SAAS,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7D,OAAO,cAAc,CAAC,KAAK,CAAC,4CACI,CAAC"}

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LineChart } from "./LineChart";
+export const AreaChart = (props) => _jsx(LineChart, { ...props, area: true });

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

@@ -0,0 +1,16 @@
+import { type ViewProps } from "react-native";
+import type { LineChartModel } from "./useChartModel";
+import type { LineChartProps, LineChartRenderer, LineChartYAxisLabelModel } from "./types";
+export declare const LineChartSurface: <TData extends Record<string, unknown>>({ animatedTooltip, chartId, chartWidth, isScrollable, mainHeight, model, props, renderer: rendererProp, responderProps, yAxisLabels }: {
+    animatedTooltip: NonNullable<LineChartModel<TData>["selectionModel"]>["tooltip"];
+    chartWidth: number;
+    chartId: string;
+    isScrollable: boolean;
+    mainHeight: number;
+    model: LineChartModel<TData>;
+    props: LineChartProps<TData>;
+    renderer?: LineChartRenderer | undefined;
+    responderProps: ViewProps;
+    yAxisLabels: LineChartYAxisLabelModel[];
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartSurface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSurface.d.ts","sourceRoot":"","sources":["../../../src/charts/line/ChartSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAcpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAEV,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAkBjB,eAAO,MAAM,gBAAgB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,uIAWrE;IACD,eAAe,EAAE,WAAW,CAC1B,cAAc,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,CACxC,CAAC,SAAS,CAAC,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7B,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACzC,cAAc,EAAE,SAAS,CAAC;IAC1B,WAAW,EAAE,wBAAwB,EAAE,CAAC;CACzC,4CAwZA,CAAC"}

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

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
+import { renderDefaultTooltip } from "./defaultTooltip";
+import { renderLineChartDebugLayout } from "./debugOverlay";
+import { renderConfiguredLegend } from "./legend";
+import { renderDefaultDot } from "./markers";
+import { getLineChartRenderer } from "./renderer";
+import { getFontFamilyProps, measureLineChartText } from "./text";
+import { getLineChartAreaGradientId, LineChartAreaPaths, LineChartLinePaths, LineChartThresholdClipDefs } from "./thresholdRendering";
+import { useLineChartDebugLayout } from "./useDebugLayout";
+export const LineChartSurface = ({ animatedTooltip, chartId, chartWidth, isScrollable, mainHeight, model, props, renderer: rendererProp, responderProps, yAxisLabels }) => {
+    const { boxes, geometries, legendModel, referenceBandModels, referenceLineModels, resolvedTheme, showHorizontalGridLines, showVerticalGridLines, crosshairConfig, selectionModel, xLabelLayout, yScale, yTicks } = model;
+    const { debugLayout, onLayoutDebug } = props;
+    const debugLayoutModel = useLineChartDebugLayout({
+        enabled: Boolean(debugLayout || onLayoutDebug),
+        model,
+        onLayoutDebug,
+        tooltip: animatedTooltip,
+        yAxisLabels
+    });
+    const renderer = getLineChartRenderer(rendererProp);
+    const { Defs, Group, Line, Rect, Surface, Text } = renderer;
+    const Layer = renderer.Layer ?? Group;
+    const LinearGradient = renderer.LinearGradient;
+    const canRenderText = renderer.capabilities?.text !== false;
+    const supportsGradientDefs = renderer.capabilities?.gradients !== false &&
+        renderer.capabilities?.pathGradients !== true &&
+        Boolean(LinearGradient);
+    const renderReferenceLabel = (key, label) => {
+        const fontFamilyProps = getFontFamilyProps(resolvedTheme.typography.fontFamily);
+        if (!label.container) {
+            return (_jsx(Text, { x: label.x, y: label.y, fill: label.color, fontSize: label.fontSize, textAnchor: label.textAnchor, ...fontFamilyProps, children: label.text }, key));
+        }
+        const labelSize = measureLineChartText(label.text, {
+            fontFamily: resolvedTheme.typography.fontFamily,
+            fontSize: label.fontSize
+        });
+        const backgroundWidth = labelSize.width + label.container.paddingX * 2;
+        const backgroundHeight = labelSize.height + label.container.paddingY * 2;
+        const backgroundX = label.textAnchor === "end"
+            ? label.x - backgroundWidth
+            : label.textAnchor === "middle"
+                ? label.x - backgroundWidth / 2
+                : label.x;
+        const backgroundY = label.y - labelSize.height + 2 - label.container.paddingY;
+        const textX = backgroundX + backgroundWidth / 2;
+        return (_jsxs(Group, { children: [_jsx(Rect, { x: backgroundX, y: backgroundY, width: backgroundWidth, height: backgroundHeight, rx: label.container.borderRadius, fill: label.container.backgroundColor, opacity: label.container.opacity }), _jsx(Text, { x: textX, y: label.y, fill: label.color, fontSize: label.fontSize, textAnchor: "middle", ...fontFamilyProps, children: label.text })] }, key));
+    };
+    return (_jsx(View, { collapsable: false, style: { width: chartWidth, height: mainHeight }, ...responderProps, children: _jsxs(Surface, { width: chartWidth, height: mainHeight, children: [_jsx(Layer, { name: "background", children: _jsx(Rect, { x: 0, y: 0, width: chartWidth, height: mainHeight, rx: 8, fill: resolvedTheme.background }) }), _jsx(Layer, { name: "plot", children: _jsx(Rect, { x: boxes.plot.x, y: boxes.plot.y, width: boxes.plot.width, height: boxes.plot.height, rx: 6, fill: resolvedTheme.plotBackground }) }), _jsxs(Defs, { children: [supportsGradientDefs && LinearGradient
+                            ? geometries.map(({ style }, index) => (_jsx(LinearGradient, { id: getLineChartAreaGradientId(chartId, index), x1: "0%", x2: "0%", y1: "0%", y2: "100%", stops: [
+                                    {
+                                        offset: "0%",
+                                        color: style.areaFill.fromColor,
+                                        opacity: style.areaFill.fromOpacity
+                                    },
+                                    {
+                                        offset: "100%",
+                                        color: style.areaFill.toColor,
+                                        opacity: style.areaFill.toOpacity
+                                    }
+                                ] }, `area-gradient-${index}`)))
+                            : null, _jsx(LineChartThresholdClipDefs, { chartId: chartId, geometries: geometries, plot: boxes.plot, renderer: renderer, yScale: yScale })] }), _jsxs(Layer, { name: "grid", children: [showVerticalGridLines
+                            ? xLabelLayout.items.map((label) => (_jsx(Line, { x1: label.gridX, x2: label.gridX, y1: boxes.plot.y, y2: boxes.plot.y + boxes.plot.height, stroke: resolvedTheme.grid, strokeOpacity: 0.72, strokeWidth: 1 }, `grid-x-${label.index}`)))
+                            : null, showHorizontalGridLines
+                            ? yTicks.map((tick) => {
+                                const y = yScale.scale(tick);
+                                return (_jsx(Line, { x1: boxes.plot.x, x2: boxes.plot.x + boxes.plot.width, y1: y, y2: y, stroke: resolvedTheme.grid, strokeOpacity: 0.78, strokeWidth: 1 }, `grid-y-${tick}`));
+                            })
+                            : null] }), _jsxs(Layer, { name: "axes", children: [yAxisLabels.map((label) => {
+                            if (isScrollable || !canRenderText) {
+                                return null;
+                            }
+                            return (_jsx(Text, { x: boxes.plot.x - 8, y: label.y, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.axisLabelSize, opacity: label.opacity, textAnchor: "end", ...getFontFamilyProps(resolvedTheme.typography.fontFamily), children: label.text }, `label-y-${label.key}`));
+                        }), canRenderText
+                            ? xLabelLayout.items.map((label) => (_jsx(Group, { transform: label.rotation !== 0
+                                    ? `rotate(${label.rotation} ${label.x} ${label.y})`
+                                    : undefined, children: _jsx(Text, { x: label.x, y: label.y, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.axisLabelSize, textAnchor: label.textAnchor, ...getFontFamilyProps(resolvedTheme.typography.fontFamily), children: label.text }) }, `label-x-${label.index}`)))
+                            : null] }), _jsx(Layer, { name: "referenceBands", children: referenceBandModels.map((band) => (_jsx(Rect, { x: band.x, y: band.y, width: band.width, height: band.height, fill: band.color, opacity: band.opacity }, band.key))) }), _jsx(Layer, { name: "referenceLines", children: referenceLineModels.map((line) => (_jsx(Line, { x1: line.x1, x2: line.x2, y1: line.y, y2: line.y, stroke: line.color, strokeOpacity: line.opacity, strokeWidth: line.strokeWidth, ...(line.strokeDasharray
+                            ? { strokeDasharray: line.strokeDasharray }
+                            : {}) }, line.key))) }), _jsx(Layer, { name: "dataArea", children: _jsx(LineChartAreaPaths, { chartId: chartId, geometries: geometries, plot: boxes.plot, renderer: renderer, yScale: yScale }) }), _jsx(Layer, { name: "data", children: _jsx(LineChartLinePaths, { chartId: chartId, geometries: geometries, plot: boxes.plot, renderer: renderer, yScale: yScale }) }), _jsx(Layer, { name: "markers", children: geometries.flatMap(({ geometry, style }) => geometry.points
+                        .filter((point) => point.defined && style.dot.visible)
+                        .map((point) => {
+                        const dotProps = {
+                            point,
+                            seriesKey: geometry.key,
+                            seriesLabel: geometry.label,
+                            color: style.color,
+                            x: point.x,
+                            y: point.y,
+                            value: point.value,
+                            dataIndex: point.dataIndex,
+                            config: style.dot,
+                            theme: resolvedTheme
+                        };
+                        const renderedDot = props.renderDot
+                            ? props.renderDot(dotProps)
+                            : renderDefaultDot(dotProps, renderer);
+                        return renderedDot ? (_jsx(Group, { children: renderedDot }, `dot-${geometry.key}-${point.index}`)) : null;
+                    })) }), _jsxs(Layer, { name: "referenceLabels", children: [referenceBandModels.map((band) => band.label && canRenderText
+                            ? renderReferenceLabel(`${band.key}-label`, band.label)
+                            : null), referenceLineModels.map((line) => line.label && canRenderText
+                            ? renderReferenceLabel(`${line.key}-label`, line.label)
+                            : null)] }), _jsxs(Layer, { name: "overlays", children: [selectionModel && crosshairConfig.visible ? (props.renderCrosshair ? (props.renderCrosshair({
+                            chartHeight: mainHeight,
+                            chartWidth,
+                            config: crosshairConfig,
+                            plot: boxes.plot,
+                            series: selectionModel.series,
+                            theme: resolvedTheme,
+                            x: selectionModel.x,
+                            xLabel: selectionModel.xLabel,
+                            y: selectionModel.y
+                        })) : (_jsx(Line, { x1: selectionModel.x, x2: selectionModel.x, y1: boxes.plot.y, y2: boxes.plot.y + boxes.plot.height, stroke: crosshairConfig.color, strokeOpacity: crosshairConfig.opacity, strokeWidth: crosshairConfig.strokeWidth, ...(crosshairConfig.strokeDasharray
+                                ? { strokeDasharray: crosshairConfig.strokeDasharray }
+                                : {}) }, "selection-crosshair"))) : null, legendModel
+                            ? renderConfiguredLegend({
+                                legend: legendModel.renderProps,
+                                config: legendModel.config,
+                                renderer
+                            })
+                            : null] }), _jsxs(Layer, { name: "interaction", children: [selectionModel
+                            ? selectionModel.series
+                                .filter((item) => item.activeDot.visible)
+                                .map((item) => {
+                                const dotProps = {
+                                    point: item.point,
+                                    seriesKey: item.key,
+                                    seriesLabel: item.label,
+                                    color: item.color,
+                                    x: item.point.x,
+                                    y: item.point.y,
+                                    value: item.value,
+                                    dataIndex: item.point.dataIndex,
+                                    config: item.activeDot,
+                                    theme: resolvedTheme
+                                };
+                                const renderedDot = props.renderActiveDot
+                                    ? props.renderActiveDot(dotProps)
+                                    : renderDefaultDot(dotProps, renderer);
+                                return renderedDot ? (_jsx(Group, { children: renderedDot }, `active-dot-${item.key}`)) : null;
+                            })
+                            : null, animatedTooltip
+                            ? props.renderTooltip
+                                ? props.renderTooltip(animatedTooltip)
+                                : renderDefaultTooltip(animatedTooltip, renderer)
+                            : null] }), debugLayout && debugLayoutModel ? (_jsx(Layer, { name: "debug", children: renderLineChartDebugLayout({
+                        fontFamily: resolvedTheme.typography.fontFamily,
+                        model: debugLayoutModel,
+                        renderer
+                    }) })) : null] }) }));
+};

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

@@ -0,0 +1,6 @@
+import type { LineChartProps } from "./types";
+export type * from "./types";
+export { getLineChartAccessibilitySummary, getLineChartDataTable } from "./accessibility";
+export type { LineChartDataTable, LineChartDataTableColumn, LineChartDataTableRow } from "./accessibility";
+export declare const LineChart: <TData extends Record<string, unknown>>(props: LineChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LineChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/charts/line/LineChart.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EACL,gCAAgC,EAChC,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,kBAAkB,EAClB,wBAAwB,EACxB,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,SAAS,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7D,OAAO,cAAc,CAAC,KAAK,CAAC,4CA6Z7B,CAAC"}

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

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { resolveChartViewport, resolveChartViewportInitialOffset, resolveChartViewportWindow, sliceChartViewportData } from "../../../core/index";
+import { useChartKitTheme } from "../../theme";
+import { useLineChartAccessibilityLabel } from "./accessibility";
+import { LineChartSurface } from "./ChartSurface";
+import { StickyYAxis } from "./StickyYAxis";
+import { buildLineChartSelectEvent, getLineChartInteractionConfig, getLineChartVisibleInteractionBounds, getNearestLineChartInteractionIndex, isLineChartInteractionEnabled, isLineChartInteractionInBounds, normalizeLineChartSelectedIndex } from "./interaction";
+import { getSelectedLineSeries } from "./selection";
+import { getLineChartOutsidePressSurfaces } from "./outsidePressSurfaces";
+import { getLineChartOverviewProps } from "./overviewProps";
+import { useLineChartResponderProps } from "./responders";
+import { getStickyYAxisFadeOpacity } from "./stickyYAxisLayout";
+import { LineChartRangeSelector } from "./rangeSelector";
+import { getRangeSelectorConfig } from "./rangeSelectorConfig";
+import { useAnimatedTooltipModel } from "./useAnimatedTooltipModel";
+import { useLineChartYAxisLabels } from "./useAnimatedYAxisLabels";
+import { useChartModel } from "./useChartModel";
+import { useLineChartViewportPan } from "./viewportInteraction";
+import { LineChartViewportGesture, useLineChartViewportPinchZoom } from "./viewportPinchZoom";
+import { clampLineChartTooltipToViewport } from "./tooltip";
+import { useScopedChartSelection } from "../../selection/ChartSelectionProvider";
+export { getLineChartAccessibilitySummary, getLineChartDataTable } from "./accessibility";
+export const LineChart = (props) => {
+    const chartId = useId().replace(/:/g, "");
+    const scopedChartId = props.id ?? chartId;
+    const chartKitTheme = useChartKitTheme();
+    const renderer = props.renderer ?? chartKitTheme.renderer;
+    const dataLength = props.data.length;
+    const accessibilityLabel = useLineChartAccessibilityLabel(props);
+    const scrollViewRef = useRef(null);
+    const interactionConfig = useMemo(() => getLineChartInteractionConfig(props.interaction), [props.interaction]);
+    const [gestureSelectedIndex, setGestureSelectedIndex] = useState(() => normalizeLineChartSelectedIndex(props.defaultSelectedIndex));
+    const [gestureSelectionPointer, setGestureSelectionPointer] = useState();
+    const effectiveSelectedIndex = props.selectedIndex ?? gestureSelectedIndex;
+    const rangeSelectorConfig = useMemo(() => getRangeSelectorConfig(props.rangeSelector), [props.rangeSelector]);
+    const viewportWindow = useMemo(() => resolveChartViewportWindow({
+        itemCount: props.data.length,
+        startIndex: props.viewport?.startIndex,
+        endIndex: props.viewport?.endIndex,
+        visiblePoints: props.viewport?.visiblePoints,
+        initialIndex: props.viewport?.initialIndex
+    }), [
+        props.data.length,
+        props.viewport?.endIndex,
+        props.viewport?.initialIndex,
+        props.viewport?.startIndex,
+        props.viewport?.visiblePoints
+    ]);
+    const mainData = useMemo(() => sliceChartViewportData(props.data, viewportWindow), [props.data, viewportWindow]);
+    const isRangeSelectorVisible = rangeSelectorConfig.visible && props.data.length > 1;
+    const mainHeight = isRangeSelectorVisible
+        ? Math.max(120, props.height - rangeSelectorConfig.height - rangeSelectorConfig.gap)
+        : props.height;
+    const viewport = useMemo(() => resolveChartViewport({
+        itemCount: mainData.length,
+        scrollable: props.scrollable,
+        viewportWidth: props.width,
+        visiblePoints: props.visiblePoints
+    }), [mainData.length, props.scrollable, props.visiblePoints, props.width]);
+    const initialScrollOffset = useMemo(() => resolveChartViewportInitialOffset({
+        initialIndex: props.initialIndex,
+        viewport
+    }), [props.initialIndex, viewport]);
+    const [scrollOffset, setScrollOffset] = useState(initialScrollOffset);
+    const chartProps = {
+        ...props,
+        data: mainData,
+        height: mainHeight,
+        width: viewport.contentWidth,
+        ...(effectiveSelectedIndex !== undefined
+            ? { selectedIndex: effectiveSelectedIndex }
+            : {})
+    };
+    const model = useChartModel({
+        ...chartProps,
+        chartKitTheme,
+        dataIndexOffset: viewportWindow.startIndex,
+        selectionPointer: gestureSelectionPointer?.index === effectiveSelectedIndex
+            ? gestureSelectionPointer
+            : undefined,
+        stableYAxisData: props.data
+    });
+    const { boxes, geometries, interactionPoints, selectionModel, formatYLabel } = model;
+    const overviewBaseProps = getLineChartOverviewProps(props);
+    const overviewModel = useChartModel({
+        ...overviewBaseProps,
+        activeDot: false,
+        chartKitTheme,
+        crosshair: false,
+        height: rangeSelectorConfig.height,
+        labelStrategy: "hide",
+        legend: false,
+        showDots: false,
+        tooltip: false,
+        width: props.width
+    });
+    const isInteractionEnabled = isLineChartInteractionEnabled(interactionConfig);
+    const animatedYAxisLabels = useLineChartYAxisLabels(model, props.axisLabelAnimation);
+    useEffect(() => {
+        if (!viewport.scrollable) {
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            setScrollOffset(initialScrollOffset);
+            scrollViewRef.current?.scrollTo({
+                animated: false,
+                x: initialScrollOffset
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [initialScrollOffset, viewport.scrollable]);
+    const handleScroll = useCallback((event) => {
+        setScrollOffset(event.nativeEvent.contentOffset.x);
+    }, []);
+    const preventBrowserSelection = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    const viewportPan = useLineChartViewportPan({
+        dataLength,
+        enabled: !viewport.scrollable,
+        onViewportChange: props.onViewportChange,
+        plotBounds: boxes.plot,
+        preventBrowserSelection,
+        viewportInteraction: props.viewportInteraction,
+        viewportWindow
+    });
+    const viewportPinchZoom = useLineChartViewportPinchZoom({
+        dataLength,
+        enabled: !viewport.scrollable,
+        onViewportChange: props.onViewportChange,
+        plotBounds: boxes.plot,
+        viewportInteraction: props.viewportInteraction,
+        viewportWindow
+    });
+    const isResponderEventInPlot = useCallback((event) => {
+        const { locationX, locationY } = event.nativeEvent;
+        return isLineChartInteractionInBounds({
+            bounds: boxes.plot,
+            locationX,
+            locationY
+        });
+    }, [boxes.plot]);
+    const visibleInteractionBounds = useMemo(() => getLineChartVisibleInteractionBounds({
+        bounds: boxes.plot,
+        scrollable: viewport.scrollable,
+        viewportWidth: props.width
+    }), [boxes.plot, props.width, viewport.scrollable]);
+    const clearGestureSelection = useCallback((event) => {
+        setGestureSelectionPointer(undefined);
+        if (props.selectedIndex === undefined) {
+            setGestureSelectedIndex(undefined);
+        }
+        interactionConfig.onDeselect?.(event);
+    }, [interactionConfig, props.selectedIndex]);
+    const clearSelectionFromScope = useCallback((reason) => {
+        if (reason === "scopeChange") {
+            if (props.selectedIndex === undefined) {
+                setGestureSelectedIndex(undefined);
+            }
+            return;
+        }
+        clearGestureSelection({ reason });
+    }, [clearGestureSelection, props.selectedIndex]);
+    const scopedSelection = useScopedChartSelection({
+        chartId: scopedChartId,
+        controlled: props.selectedIndex !== undefined,
+        hasSelection: effectiveSelectedIndex !== undefined,
+        onClear: clearSelectionFromScope
+    });
+    const clearScopedGestureSelection = useCallback((event) => {
+        clearGestureSelection(event);
+        if (event.reason === "outsidePress") {
+            scopedSelection.dismissSelection?.("outsidePress");
+        }
+        else if (event.reason === "gestureEnd") {
+            scopedSelection.dismissSelection?.("programmatic");
+        }
+    }, [clearGestureSelection, scopedSelection]);
+    const handleInteractionEvent = useCallback((event) => {
+        preventBrowserSelection(event);
+        const { locationX, locationY } = event.nativeEvent;
+        const selectedDataIndex = getNearestLineChartInteractionIndex({
+            locationX,
+            points: interactionPoints
+        });
+        if (selectedDataIndex === undefined) {
+            return;
+        }
+        const selectedSeries = getSelectedLineSeries({
+            activeDot: props.activeDot,
+            formatYLabel,
+            geometries,
+            selectedDataIndex
+        });
+        const selectEvent = buildLineChartSelectEvent({
+            interactionPoints,
+            selectedDataIndex,
+            selectedSeries
+        });
+        if (!selectEvent) {
+            return;
+        }
+        setGestureSelectionPointer({
+            index: selectedDataIndex,
+            x: locationX,
+            y: locationY
+        });
+        if (props.selectedIndex === undefined &&
+            interactionConfig.selectionPersistence !== "none") {
+            setGestureSelectedIndex(selectedDataIndex);
+        }
+        scopedSelection.selectChart();
+        interactionConfig.onSelect?.(selectEvent);
+    }, [
+        formatYLabel,
+        geometries,
+        interactionConfig,
+        interactionPoints,
+        props.activeDot,
+        props.selectedIndex,
+        preventBrowserSelection,
+        scopedSelection
+    ]);
+    const responderProps = useLineChartResponderProps({
+        clearGestureSelection: clearScopedGestureSelection,
+        handleInteractionEvent,
+        interactionConfig,
+        isInteractionEnabled,
+        isResponderEventInPlot,
+        preventBrowserSelection,
+        viewportPan
+    });
+    const outsidePressSurfaceResponderProps = isInteractionEnabled && interactionConfig.deselectOnOutsidePress
+        ? {
+            onStartShouldSetResponder: () => true,
+            onResponderGrant: (event) => {
+                preventBrowserSelection(event);
+                clearScopedGestureSelection({ reason: "outsidePress" });
+            }
+        }
+        : {};
+    const outsidePressSurfaces = getLineChartOutsidePressSurfaces({
+        enabled: isInteractionEnabled && interactionConfig.deselectOnOutsidePress,
+        mainHeight,
+        visibleInteractionBounds,
+        width: props.width
+    });
+    const animatedTooltip = useAnimatedTooltipModel(selectionModel?.tooltip);
+    const displayTooltip = animatedTooltip && viewport.scrollable
+        ? clampLineChartTooltipToViewport(animatedTooltip, {
+            leftInset: boxes.plot.x + 4,
+            scrollOffset,
+            viewportWidth: props.width
+        })
+        : animatedTooltip;
+    const chartWidth = viewport.contentWidth;
+    const xAxisLabelFadeY = boxes.plot.y + boxes.plot.height;
+    const scrollStartFadeId = `${chartId}-scroll-start-fade`;
+    const mainSurface = (_jsx(LineChartSurface, { animatedTooltip: displayTooltip, chartId: chartId, chartWidth: chartWidth, isScrollable: viewport.scrollable, mainHeight: mainHeight, model: model, props: props, renderer: renderer, responderProps: responderProps, yAxisLabels: animatedYAxisLabels }));
+    return (_jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel, accessibilityRole: "image", testID: props.testID, style: [styles.container, { width: props.width, height: props.height }], children: [_jsxs(View, { style: { width: props.width, height: mainHeight }, children: [viewport.scrollable ? (_jsx(ScrollView, { ref: scrollViewRef, horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, style: [
+                            styles.scroller,
+                            { width: props.width, height: mainHeight }
+                        ], contentContainerStyle: [
+                            styles.scrollerContent,
+                            { width: chartWidth, height: mainHeight }
+                        ], onScroll: handleScroll, scrollEventThrottle: 16, children: mainSurface })) : (_jsx(LineChartViewportGesture, { gesture: viewportPinchZoom, children: mainSurface })), viewport.scrollable ? (_jsx(StickyYAxis, { fadeHeight: Math.max(0, mainHeight - xAxisLabelFadeY), fadeOpacity: getStickyYAxisFadeOpacity(scrollOffset), fadeWidth: Math.min(12, Math.max(0, props.width - boxes.plot.x)), fadeY: xAxisLabelFadeY, gradientId: scrollStartFadeId, mainHeight: mainHeight, model: model, renderer: renderer, width: props.width, yAxisLabels: animatedYAxisLabels })) : null, outsidePressSurfaces.map((surface) => (_jsx(View, { style: [
+                            styles.outsidePressSurface,
+                            {
+                                height: surface.height,
+                                left: surface.left,
+                                top: surface.top,
+                                width: surface.width
+                            }
+                        ], ...outsidePressSurfaceResponderProps }, `outside-press-${surface.key}`)))] }), _jsx(LineChartRangeSelector, { config: rangeSelectorConfig, dataLength: dataLength, isVisible: isRangeSelectorVisible, model: overviewModel, onViewportChange: props.onViewportChange, preventBrowserSelection: preventBrowserSelection, renderer: renderer, testID: props.testID, viewportWindow: viewportWindow, width: props.width })] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        overflow: "hidden",
+        userSelect: "none"
+    },
+    scroller: {
+        overflow: "hidden"
+    },
+    scrollerContent: {
+        flexGrow: 0
+    },
+    outsidePressSurface: {
+        position: "absolute"
+    }
+});