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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnimatedYAxisLabels.d.ts","sourceRoot":"","sources":["../../../src/charts/line/useAnimatedYAxisLabels.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,iCAAiC,EACtC,KAAK,wBAAwB,EAC9B,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAmGtD,eAAO,MAAM,sBAAsB,GACjC,QAAQ,wBAAwB,EAAE,EAClC,YAAY,OAAO,GAAG,iCAAiC,+BAyFxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,EAC5B,YAAY,OAAO,GAAG,iCAAiC,+BAmBxD,CAAC"}

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

@@ -0,0 +1,141 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildLineChartYAxisLabels, resolveLineChartAxisLabelAnimationConfig } from "./axisLabels";
+const axisLabelPositionThreshold = 0.5;
+const axisLabelOpacityThreshold = 0.01;
+const getAxisLabelSignature = (labels) => labels
+    .map((label) => `${label.key}:${label.text}:${label.y.toFixed(2)}`)
+    .join("|");
+const interpolateValue = (from, to, progress) => from + (to - from) * progress;
+const easeAxisLabelTransition = (progress) => {
+    const clampedProgress = Math.min(Math.max(progress, 0), 1);
+    return 1 - Math.pow(1 - clampedProgress, 3);
+};
+const getInterpolatedLabels = ({ from, progress, to }) => {
+    const fromByKey = new Map(from.map((label) => [label.key, label]));
+    const toByKey = new Map(to.map((label) => [label.key, label]));
+    const orderedKeys = [
+        ...to.map((label) => label.key),
+        ...from.map((label) => label.key).filter((key) => !toByKey.has(key))
+    ];
+    return orderedKeys
+        .map((key) => {
+        const fromLabel = fromByKey.get(key);
+        const toLabel = toByKey.get(key);
+        if (fromLabel && toLabel) {
+            return {
+                ...toLabel,
+                y: interpolateValue(fromLabel.y, toLabel.y, progress),
+                opacity: interpolateValue(fromLabel.opacity, toLabel.opacity, progress)
+            };
+        }
+        if (toLabel) {
+            return {
+                ...toLabel,
+                opacity: progress
+            };
+        }
+        if (fromLabel) {
+            return {
+                ...fromLabel,
+                opacity: interpolateValue(fromLabel.opacity, 0, progress)
+            };
+        }
+        return undefined;
+    })
+        .filter((label) => label !== undefined && label.opacity > axisLabelOpacityThreshold);
+};
+const hasMeaningfulAxisLabelDelta = ({ from, to }) => {
+    if (from.length !== to.length) {
+        return true;
+    }
+    return to.some((label, index) => {
+        const previousLabel = from[index];
+        return (!previousLabel ||
+            previousLabel.key !== label.key ||
+            previousLabel.text !== label.text ||
+            Math.abs(previousLabel.y - label.y) > axisLabelPositionThreshold ||
+            Math.abs(previousLabel.opacity - label.opacity) >
+                axisLabelOpacityThreshold);
+    });
+};
+export const useAnimatedYAxisLabels = (labels, animation) => {
+    const resolvedAnimation = useMemo(() => resolveLineChartAxisLabelAnimationConfig(animation), [animation]);
+    const latestLabelsRef = useRef(labels);
+    const hasInitialLabelsRef = useRef(false);
+    const [animatedLabels, setAnimatedLabels] = useState(labels);
+    useEffect(() => {
+        let animationFrame = 0;
+        const targetLabels = labels;
+        const currentLabels = latestLabelsRef.current;
+        const targetSignature = getAxisLabelSignature(targetLabels);
+        const currentSignature = getAxisLabelSignature(currentLabels);
+        if (!hasInitialLabelsRef.current) {
+            hasInitialLabelsRef.current = true;
+            latestLabelsRef.current = targetLabels;
+            setAnimatedLabels(targetLabels);
+            return () => {
+                cancelAnimationFrame(animationFrame);
+            };
+        }
+        if (currentSignature === targetSignature ||
+            !hasMeaningfulAxisLabelDelta({ from: currentLabels, to: targetLabels })) {
+            latestLabelsRef.current = targetLabels;
+            return () => {
+                cancelAnimationFrame(animationFrame);
+            };
+        }
+        if (!resolvedAnimation.enabled || resolvedAnimation.duration <= 0) {
+            latestLabelsRef.current = targetLabels;
+            animationFrame = requestAnimationFrame(() => {
+                setAnimatedLabels(targetLabels);
+            });
+            return () => {
+                cancelAnimationFrame(animationFrame);
+            };
+        }
+        let startTime;
+        const tick = (timestamp) => {
+            startTime ?? (startTime = timestamp);
+            const progress = Math.min((timestamp - startTime) / resolvedAnimation.duration, 1);
+            const easedProgress = easeAxisLabelTransition(progress);
+            const nextLabels = getInterpolatedLabels({
+                from: currentLabels,
+                progress: easedProgress,
+                to: targetLabels
+            });
+            latestLabelsRef.current = nextLabels;
+            setAnimatedLabels(nextLabels);
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(tick);
+            }
+            else {
+                latestLabelsRef.current = targetLabels;
+                setAnimatedLabels(targetLabels);
+            }
+        };
+        animationFrame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [
+        labels,
+        resolvedAnimation.duration,
+        resolvedAnimation.enabled,
+        resolvedAnimation.strategy
+    ]);
+    return animatedLabels;
+};
+export const useLineChartYAxisLabels = (model, animation) => {
+    const labels = useMemo(() => buildLineChartYAxisLabels({
+        formatYLabel: model.formatYLabel,
+        labelOffset: model.resolvedTheme.typography.axisLabelSize * 0.36,
+        ticks: model.yTicks,
+        yScale: model.yScale
+    }), [
+        model.formatYLabel,
+        model.resolvedTheme.typography.axisLabelSize,
+        model.yScale,
+        model.yTicks
+    ]);
+    return useAnimatedYAxisLabels(labels, animation);
+};

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

@@ -0,0 +1,103 @@
+import { type ChartKitThemeContextValue } from "../../theme";
+import type { LineChartProps, LineChartSelectionModel } from "./types";
+import { type LineChartInteractionPoint } from "./interaction";
+export declare const useChartModel: <TData extends Record<string, unknown>>({ data, xKey, yKey, yKeys, series, width, height, theme, preset, decimation, curve, connectNulls, area, areaFill, showDots, dots, selectedIndex, activeDot, crosshair, tooltip, referenceBands, referenceLines, showHorizontalGridLines, showVerticalGridLines, legend, labelStrategy, labelRotation, labelMinGap, edgeLabelPolicy, yDomain, yAxisLabelWidth, formatXLabel, formatYLabel, chartKitTheme, dataIndexOffset, selectionPointer, stableYAxisData }: LineChartProps<TData> & {
+    chartKitTheme: ChartKitThemeContextValue;
+    dataIndexOffset?: number;
+    selectionPointer?: {
+        index: number;
+        x: number;
+        y: number;
+    } | undefined;
+    stableYAxisData?: TData[] | undefined;
+}) => {
+    boxes: import("../../../core/index").ChartBoxes;
+    geometries: {
+        style: {
+            strokeWidth: number;
+            strokeStyle: import("./options").ResolvedLineChartStrokeStyle;
+            dot: import("./options").ResolvedLineChartDotConfig;
+            color: string;
+            areaFill: import("./options").ResolvedLineChartAreaFillConfig;
+            threshold: import("./options").ResolvedLineChartThresholdStyle | undefined;
+        };
+        geometry: import("../../../core/index").LineSeriesGeometry<TData>;
+    }[];
+    interactionPoints: LineChartInteractionPoint<TData>[];
+    legendModel: {
+        config: import("./types").ResolvedLineChartLegendConfig;
+        renderProps: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            position: import("./types").LineChartLegendPosition;
+            align: import("./types").LineChartLegendAlign;
+            theme: import("../../theme").ResolvedCartesianChartTheme;
+            items: ({
+                labelColor: string;
+                labelGap: number;
+                paddingHorizontal: number;
+                paddingVertical: number;
+                strokeDasharray: readonly number[] | undefined;
+                strokeLinecap: import("./options").LineChartStrokeLinecap;
+                strokeOpacity: number;
+                strokeWidth: number;
+                fontFamily: string;
+                index: number;
+                key: string;
+                label: string;
+                color: string;
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                contentX: number;
+                contentY: number;
+                contentWidth: number;
+                contentHeight: number;
+                markerSize: number;
+                marker: import("./types").LineChartLegendMarker;
+                fontSize: number;
+            } | {
+                labelColor: string;
+                labelGap: number;
+                paddingHorizontal: number;
+                paddingVertical: number;
+                strokeDasharray: readonly number[] | undefined;
+                strokeLinecap: import("./options").LineChartStrokeLinecap;
+                strokeOpacity: number;
+                strokeWidth: number;
+                fontFamily?: never;
+                index: number;
+                key: string;
+                label: string;
+                color: string;
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+                contentX: number;
+                contentY: number;
+                contentWidth: number;
+                contentHeight: number;
+                markerSize: number;
+                marker: import("./types").LineChartLegendMarker;
+                fontSize: number;
+            })[];
+        };
+    } | undefined;
+    referenceBandModels: import("./references").LineChartReferenceBandModel[];
+    referenceLineModels: import("./references").LineChartReferenceLineModel[];
+    resolvedTheme: import("../../theme").ResolvedCartesianChartTheme;
+    showHorizontalGridLines: boolean;
+    showVerticalGridLines: boolean;
+    crosshairConfig: import("./options").ResolvedLineChartCrosshairConfig;
+    selectionModel: LineChartSelectionModel<TData> | undefined;
+    xLabelLayout: import("./xLabels").XLabelLayout;
+    yScale: import("../../../core/index").LinearScale;
+    yTicks: number[];
+    formatYLabel: (value: number) => string;
+};
+export type LineChartModel<TData extends Record<string, unknown>> = ReturnType<typeof useChartModel<TData>>;
+//# sourceMappingURL=useChartModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartModel.d.ts","sourceRoot":"","sources":["../../../src/charts/line/useChartModel.ts"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,aAAa,CAAC;AAwBrB,OAAO,KAAK,EAGV,cAAc,EAEd,uBAAuB,EACxB,MAAM,SAAS,CAAC;AAajB,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,eAAe,CAAC;AAMvB,eAAO,MAAM,aAAa,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,+bAsClE,cAAc,CAAC,KAAK,CAAC,GAAG;IACzB,aAAa,EAAE,yBAAyB,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IACvE,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYA,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,UAAU,CAC5E,OAAO,aAAa,CAAC,KAAK,CAAC,CAC5B,CAAC"}

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

@@ -0,0 +1,367 @@
+import { useMemo } from "react";
+import { buildLineSeriesGeometry, calculateAutoPadding, createLinearScale, solveChartBoxes } from "../../../core/index";
+import { resolveCartesianChartThemeConfig } from "../../theme";
+import { getLineChartAreaFillConfig, getLineChartCrosshairConfig, getLineChartDotConfig, getLineChartStrokeStyle, getLineChartTooltipConfig, resolveLineChartDecimationConfig } from "./options";
+import { buildLineChartSeriesStyleMap } from "./seriesStyles";
+import { resolveLineChartYAxisModel } from "./yAxisModel";
+import { getSelectedLineSeries } from "./selection";
+import { getLineChartTooltipModel } from "./tooltip";
+import { buildLegendLayout, getLegendConfig, getLegendX, getLegendY } from "./legend";
+import { buildLineChartReferenceBandModels, buildLineChartReferenceLineModels } from "./references";
+import { getFontFamilyProps, measureLineChartText } from "./text";
+import { defaultLabelRotation, getMaxSize, resolveXLabelLayout, xLabelBaselineOffset } from "./xLabels";
+import { buildXLabelCandidates } from "./xLabelCandidates";
+import { defaultFormatXLabel, defaultFormatYLabel, getSeriesColor } from "./utils";
+import { normalizeLineChartSelectedIndex } from "./interaction";
+import { useSeriesInput } from "./seriesInput";
+import { buildLineChartXScale } from "./xScale";
+const defaultYDomain = { includeZero: true, nice: true };
+export const useChartModel = ({ data, xKey, yKey, yKeys, series, width, height, theme, preset, decimation = "auto", curve = "linear", connectNulls = false, area = false, areaFill, showDots = true, dots, selectedIndex, activeDot, crosshair, tooltip, referenceBands, referenceLines, showHorizontalGridLines = false, showVerticalGridLines = false, legend, labelStrategy = "auto", labelRotation = defaultLabelRotation, labelMinGap = 8, edgeLabelPolicy = "shift", yDomain = defaultYDomain, yAxisLabelWidth, formatXLabel = defaultFormatXLabel, formatYLabel = defaultFormatYLabel, chartKitTheme, dataIndexOffset = 0, selectionPointer, stableYAxisData }) => {
+    const seriesInput = useSeriesInput(yKey, yKeys, series);
+    return useMemo(() => {
+        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 axisTextOptions = {
+            fontSize: resolvedTheme.typography.axisLabelSize,
+            ...getFontFamilyProps(resolvedTheme.typography.fontFamily)
+        };
+        const { normalized, yDomainResolved, yLabelSizes, yTicks } = resolveLineChartYAxisModel({
+            data,
+            formatYLabel,
+            measureText: measureLineChartText,
+            series: seriesInput,
+            stableData: stableYAxisData,
+            textOptions: axisTextOptions,
+            xKey,
+            yAxisLabelWidth,
+            yDomain
+        });
+        const legendConfig = getLegendConfig(legend, normalized.series.length, resolvedTheme);
+        const xValues = normalized.series[0]?.points.map((point) => point.x) ?? [];
+        const xLabelTexts = xValues.map((value, index) => formatXLabel(value, index + dataIndexOffset));
+        const xLabelSizes = xLabelTexts.map((text) => measureLineChartText(text, axisTextOptions));
+        const styleByKey = buildLineChartSeriesStyleMap({
+            areaFill,
+            dots,
+            resolvedTheme,
+            seriesInput,
+            showDots
+        });
+        const legendLayout = legendConfig.visible
+            ? buildLegendLayout({
+                config: legendConfig,
+                items: normalized.series.map((item) => ({
+                    id: item.key,
+                    label: item.label
+                })),
+                maxWidth: width,
+                measureText: measureLineChartText
+            })
+            : undefined;
+        const baseAutoPaddingOptions = {
+            base: { top: 16, right: 18, bottom: 12, left: 10 },
+            leftLabels: yLabelSizes,
+            gap: 8
+        };
+        const withLegendPaddingOptions = (bottomLabelHeight) => legendLayout
+            ? {
+                ...baseAutoPaddingOptions,
+                bottomLabels: bottomLabelHeight > 0
+                    ? [{ width: 1, height: bottomLabelHeight }]
+                    : [],
+                legend: {
+                    width: Math.min(width - 32, legendLayout.width),
+                    height: legendLayout.height,
+                    position: legendLayout.position
+                }
+            }
+            : {
+                ...baseAutoPaddingOptions,
+                bottomLabels: bottomLabelHeight > 0
+                    ? [{ width: 1, height: bottomLabelHeight }]
+                    : []
+            };
+        const initialPadding = calculateAutoPadding(withLegendPaddingOptions(getMaxSize(xLabelSizes).height));
+        const initialBoxes = solveChartBoxes({ width, height }, initialPadding);
+        const initialXScale = buildLineChartXScale({
+            boxes: initialBoxes,
+            xValues
+        });
+        const initialXLabelLayout = resolveXLabelLayout({
+            candidates: buildXLabelCandidates({
+                dataIndexOffset,
+                labelStrategy,
+                series: normalized.series[0],
+                xLabelSizes,
+                xLabelTexts,
+                xScale: initialXScale,
+                xValues
+            }),
+            plotWidth: initialBoxes.plot.width,
+            chartWidth: width,
+            strategy: labelStrategy,
+            rotation: labelRotation,
+            edgeLabelPolicy,
+            minGap: labelMinGap,
+            baseY: initialBoxes.plot.y + initialBoxes.plot.height + xLabelBaselineOffset
+        });
+        const padding = calculateAutoPadding(withLegendPaddingOptions(initialXLabelLayout.height));
+        const boxes = solveChartBoxes({ width, height }, padding);
+        const yScale = createLinearScale({
+            domain: yDomainResolved,
+            range: [boxes.plot.y + boxes.plot.height, boxes.plot.y]
+        });
+        const referenceBandModels = buildLineChartReferenceBandModels({
+            bands: referenceBands,
+            plot: boxes.plot,
+            theme: resolvedTheme,
+            yScale
+        });
+        const xScale = buildLineChartXScale({ boxes, xValues });
+        const pathDecimation = resolveLineChartDecimationConfig({
+            decimation,
+            plotWidth: boxes.plot.width
+        });
+        const baselineValue = yDomainResolved[0] < 0 && yDomainResolved[1] > 0 ? 0 : yDomainResolved[0];
+        const baselineY = yScale.scale(baselineValue);
+        const geometries = normalized.series.map((item, index) => {
+            const style = styleByKey.get(item.key);
+            const wantsArea = style?.area ?? area;
+            const color = item.color ?? style?.color ?? getSeriesColor(resolvedTheme, index);
+            return {
+                style: {
+                    strokeWidth: style?.strokeWidth ?? 3,
+                    strokeStyle: style?.strokeStyle ?? getLineChartStrokeStyle(),
+                    dot: style?.dot ??
+                        getLineChartDotConfig({
+                            dots,
+                            seriesDot: undefined,
+                            showDots
+                        }),
+                    color,
+                    areaFill: style?.areaFill ??
+                        getLineChartAreaFillConfig({ areaFill, seriesColor: color }),
+                    threshold: style?.threshold
+                },
+                geometry: buildLineSeriesGeometry({
+                    series: item,
+                    xScale,
+                    yScale: (value) => yScale.scale(value),
+                    curve: style?.curve ?? curve,
+                    connectNulls,
+                    dataIndexOffset,
+                    pathDecimation,
+                    ...(wantsArea ? { areaBaselineY: baselineY } : {})
+                })
+            };
+        });
+        const referenceLineModels = buildLineChartReferenceLineModels({
+            geometries: geometries.map(({ geometry }) => geometry),
+            lines: referenceLines,
+            plot: boxes.plot,
+            theme: resolvedTheme,
+            yScale
+        });
+        const interactionPoints = geometries[0]?.geometry.points.flatMap((point) => {
+            if (!Number.isFinite(point.x)) {
+                return [];
+            }
+            const dataIndex = point.dataIndex;
+            const xLabel = xLabelTexts[dataIndex - dataIndexOffset] ?? String(point.xValue);
+            const interactionPoint = {
+                dataIndex,
+                x: point.x,
+                xValue: point.xValue,
+                xLabel
+            };
+            return point.raw !== undefined
+                ? [{ ...interactionPoint, raw: point.raw }]
+                : [interactionPoint];
+        }) ?? [];
+        const xLabelLayout = resolveXLabelLayout({
+            candidates: buildXLabelCandidates({
+                dataIndexOffset,
+                labelStrategy,
+                series: normalized.series[0],
+                xLabelSizes,
+                xLabelTexts,
+                xScale,
+                xValues
+            }),
+            plotWidth: boxes.plot.width,
+            chartWidth: width,
+            strategy: labelStrategy,
+            rotation: labelRotation,
+            edgeLabelPolicy,
+            minGap: labelMinGap,
+            baseY: boxes.plot.y + boxes.plot.height + xLabelBaselineOffset
+        });
+        const crosshairConfig = getLineChartCrosshairConfig({
+            crosshair,
+            themeAxisColor: resolvedTheme.axis
+        });
+        const tooltipConfig = getLineChartTooltipConfig({
+            tooltip,
+            themeFontFamily: resolvedTheme.typography.fontFamily,
+            themeTooltip: resolvedTheme.tooltip
+        });
+        const roundedSelectedIndex = normalizeLineChartSelectedIndex(selectedIndex);
+        const selectedDataIndex = roundedSelectedIndex !== undefined &&
+            roundedSelectedIndex >= dataIndexOffset &&
+            roundedSelectedIndex < dataIndexOffset + xValues.length
+            ? roundedSelectedIndex
+            : undefined;
+        const selectedSeries = getSelectedLineSeries({
+            activeDot,
+            formatYLabel,
+            geometries,
+            selectedDataIndex
+        });
+        const selectionBase = selectedDataIndex !== undefined && selectedSeries.length > 0
+            ? {
+                index: selectedDataIndex,
+                x: selectedSeries[0].point.x,
+                y: Math.min(...selectedSeries.map((item) => item.point.y)),
+                xLabel: xLabelTexts[selectedDataIndex - dataIndexOffset] ??
+                    String(selectedDataIndex),
+                series: selectedSeries
+            }
+            : undefined;
+        const selectionModel = selectionBase
+            ? {
+                ...selectionBase,
+                tooltip: getLineChartTooltipModel({
+                    chartHeight: height,
+                    chartWidth: width,
+                    config: tooltipConfig,
+                    measureText: measureLineChartText,
+                    plotX: boxes.plot.x,
+                    plotY: boxes.plot.y,
+                    selection: selectionPointer?.index === selectionBase.index
+                        ? { ...selectionBase, pointer: selectionPointer }
+                        : selectionBase,
+                    theme: resolvedTheme
+                })
+            }
+            : undefined;
+        const legendOrigin = legendLayout && legendLayout.items.length > 0
+            ? {
+                x: getLegendX({
+                    align: legendConfig.align,
+                    boxes,
+                    legendWidth: legendLayout.width,
+                    width
+                }),
+                y: getLegendY({
+                    boxes,
+                    xLabelHeight: xLabelLayout.height,
+                    xLabelLineHeight: getMaxSize(xLabelSizes).height,
+                    legendHeight: legendLayout.height,
+                    position: legendConfig.position
+                })
+            }
+            : undefined;
+        const legendModel = legendLayout && legendOrigin
+            ? {
+                config: legendConfig,
+                renderProps: {
+                    x: legendOrigin.x,
+                    y: legendOrigin.y,
+                    width: legendLayout.width,
+                    height: legendLayout.height,
+                    position: legendConfig.position,
+                    align: legendConfig.align,
+                    theme: resolvedTheme,
+                    items: legendLayout.items.map((item, index) => {
+                        const style = styleByKey.get(item.id);
+                        return {
+                            index,
+                            key: item.id,
+                            label: item.label,
+                            color: style?.color ?? getSeriesColor(resolvedTheme, index),
+                            x: legendOrigin.x + item.x,
+                            y: legendOrigin.y + item.y,
+                            width: item.width,
+                            height: item.height,
+                            contentX: legendOrigin.x + item.contentX,
+                            contentY: legendOrigin.y + item.contentY,
+                            contentWidth: item.contentWidth,
+                            contentHeight: item.contentHeight,
+                            markerSize: item.markerSize ?? legendConfig.markerSize,
+                            marker: legendConfig.marker,
+                            fontSize: legendConfig.fontSize,
+                            ...getFontFamilyProps(legendConfig.fontFamily),
+                            labelColor: legendConfig.labelColor,
+                            labelGap: legendConfig.labelGap,
+                            paddingHorizontal: legendConfig.itemPaddingHorizontal,
+                            paddingVertical: legendConfig.itemPaddingVertical,
+                            strokeDasharray: style?.strokeStyle.strokeDasharray,
+                            strokeLinecap: style?.strokeStyle.strokeLinecap ?? "round",
+                            strokeOpacity: style?.strokeStyle.strokeOpacity ?? 1,
+                            strokeWidth: style?.strokeWidth ?? 3
+                        };
+                    })
+                }
+            }
+            : undefined;
+        return {
+            boxes,
+            geometries,
+            interactionPoints,
+            legendModel,
+            referenceBandModels,
+            referenceLineModels,
+            resolvedTheme,
+            showHorizontalGridLines,
+            showVerticalGridLines,
+            crosshairConfig,
+            selectionModel,
+            xLabelLayout,
+            yScale,
+            yTicks,
+            formatYLabel
+        };
+    }, [
+        area,
+        areaFill,
+        activeDot,
+        connectNulls,
+        crosshair,
+        curve,
+        data,
+        decimation,
+        dataIndexOffset,
+        dots,
+        formatXLabel,
+        formatYLabel,
+        height,
+        edgeLabelPolicy,
+        labelMinGap,
+        labelRotation,
+        labelStrategy,
+        legend,
+        referenceBands,
+        referenceLines,
+        selectedIndex,
+        selectionPointer,
+        seriesInput,
+        showDots,
+        showHorizontalGridLines,
+        showVerticalGridLines,
+        stableYAxisData,
+        theme,
+        preset,
+        chartKitTheme,
+        tooltip,
+        width,
+        xKey,
+        yAxisLabelWidth,
+        yDomain
+    ]);
+};

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

@@ -0,0 +1,16 @@
+import type { LayoutDebugModel } from "../../../core/index";
+import type { LineChartYAxisLabelModel } from "./axisLabels";
+import type { LineChartModel } from "./useChartModel";
+export declare const useLineChartDebugLayout: <TData extends Record<string, unknown>>({ enabled, model, onLayoutDebug, tooltip, yAxisLabels }: {
+    enabled: boolean;
+    model: LineChartModel<TData>;
+    onLayoutDebug?: ((model: LayoutDebugModel) => void) | undefined;
+    tooltip?: {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    yAxisLabels: LineChartYAxisLabelModel[];
+}) => LayoutDebugModel | undefined;
+//# sourceMappingURL=useDebugLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDebugLayout.d.ts","sourceRoot":"","sources":["../../../src/charts/line/useDebugLayout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,eAAO,MAAM,uBAAuB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,yDAM5E;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAChE,OAAO,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAC9E,WAAW,EAAE,wBAAwB,EAAE,CAAC;CACzC,iCAkDA,CAAC"}

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

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from "react";
+import { buildLineChartDebugLayoutModel } from "./debugLayout";
+import { getFontFamilyProps, measureLineChartText } from "./text";
+export const useLineChartDebugLayout = ({ enabled, model, onLayoutDebug, tooltip, yAxisLabels }) => {
+    const { boxes, legendModel, resolvedTheme, xLabelLayout } = model;
+    const debugLayoutModel = useMemo(() => enabled
+        ? buildLineChartDebugLayoutModel({
+            boxes,
+            legendItems: legendModel?.renderProps.items,
+            measureYLabel: (text) => measureLineChartText(text, {
+                fontSize: resolvedTheme.typography.axisLabelSize,
+                ...getFontFamilyProps(resolvedTheme.typography.fontFamily)
+            }),
+            tooltip,
+            xLabels: xLabelLayout.items,
+            yAxisLabelFontSize: resolvedTheme.typography.axisLabelSize,
+            yLabels: yAxisLabels
+        })
+        : undefined, [
+        boxes,
+        enabled,
+        legendModel,
+        resolvedTheme.typography.axisLabelSize,
+        resolvedTheme.typography.fontFamily,
+        tooltip,
+        xLabelLayout.items,
+        yAxisLabels
+    ]);
+    useEffect(() => {
+        if (debugLayoutModel) {
+            onLayoutDebug?.(debugLayoutModel);
+        }
+    }, [debugLayoutModel, onLayoutDebug]);
+    return debugLayoutModel;
+};