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

package/dist/v2/react-native/charts/bar/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/BarChart.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EACL,+BAA+B,EAC/B,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,iBAAiB,EACjB,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,QAAQ,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5D,OAAO,aAAa,CAAC,KAAK,CAAC,gCA4S5B,CAAC"}

package/dist/v2/react-native/charts/bar/BarChart.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useChartKitTheme } from "../../theme";
+import { useScopedChartSelection } from "../../selection/ChartSelectionProvider";
+import { getBarChartAccessibilitySummary } from "./accessibility";
+import { BarChartSurface, BarChartTooltipOverlay, StickyBarChartYAxis } from "./BarChartSurface";
+import { buildBarChartSelectEvent, getBarChartBarAtPoint, getBarChartBarKey, getBarChartInteractionConfig, isBarChartInteractionEnabled } from "./interaction";
+import { buildBarChartModel } from "./model";
+import { getBarChartTooltipConfig } from "./options";
+import { getSafeBarChartContentWidth, getSafeBarChartRenderer } from "./rendererSafety";
+import { getBarChartTooltipModel } from "./tooltipModel";
+import { resolveBarChartViewport, resolveBarChartViewportInitialOffset } from "./viewport";
+export { getBarChartAccessibilitySummary, getBarChartDataTable } from "./accessibility";
+export const BarChart = (props) => {
+    const generatedChartId = useId().replace(/:/g, "");
+    const scopedChartId = props.id ?? generatedChartId;
+    const chartKitTheme = useChartKitTheme();
+    const renderer = props.renderer ?? chartKitTheme.renderer;
+    const scrollViewRef = useRef(null);
+    const interactionConfig = useMemo(() => getBarChartInteractionConfig(props.interaction), [props.interaction]);
+    const [gestureSelectedBarKey, setGestureSelectedBarKey] = useState(() => getBarChartBarKey(props.defaultSelectedBar));
+    const [gestureSelectionPointer, setGestureSelectionPointer] = useState();
+    const [scrollOffsetX, setScrollOffsetX] = useState(0);
+    const viewport = useMemo(() => resolveBarChartViewport({
+        itemCount: props.data.length,
+        scrollable: props.scrollable,
+        viewportWidth: props.width,
+        visiblePoints: props.visiblePoints
+    }), [props.data.length, props.scrollable, props.visiblePoints, props.width]);
+    const safeContentWidth = getSafeBarChartContentWidth({
+        contentWidth: viewport.contentWidth,
+        renderer,
+        scrollable: viewport.scrollable
+    });
+    const safeViewport = useMemo(() => ({
+        ...viewport,
+        contentWidth: safeContentWidth,
+        maxOffset: Math.max(0, safeContentWidth - viewport.viewportWidth),
+        scrollable: viewport.scrollable && safeContentWidth > viewport.viewportWidth
+    }), [safeContentWidth, viewport]);
+    const initialScrollOffset = useMemo(() => resolveBarChartViewportInitialOffset({
+        initialIndex: props.initialIndex,
+        viewport: safeViewport
+    }), [props.initialIndex, safeViewport]);
+    const model = useMemo(() => buildBarChartModel({
+        ...props,
+        chartKitTheme,
+        width: safeViewport.contentWidth
+    }), [chartKitTheme, props, safeViewport.contentWidth]);
+    const { bars, boxes, resolvedTheme } = model;
+    const safeRenderer = getSafeBarChartRenderer({
+        contentWidth: viewport.contentWidth,
+        renderer,
+        scrollable: viewport.scrollable
+    });
+    const scrollInitialOffset = safeViewport.scrollable && props.initialIndex === "end"
+        ? Math.max(0, initialScrollOffset - boxes.plot.x * 0.66)
+        : initialScrollOffset;
+    const barRadius = Math.max(0, props.barRadius ?? 5);
+    const controlledSelectedBarKey = getBarChartBarKey(props.selectedBar);
+    const selectedBarKey = controlledSelectedBarKey ?? gestureSelectedBarKey;
+    const clearGestureSelection = useCallback((reason) => {
+        setGestureSelectionPointer(undefined);
+        if (props.selectedBar === undefined) {
+            setGestureSelectedBarKey(undefined);
+        }
+        interactionConfig.onDeselect?.({ reason });
+    }, [interactionConfig, props.selectedBar]);
+    const clearSelectionFromScope = useCallback((reason) => {
+        if (reason === "scopeChange") {
+            if (props.selectedBar === undefined) {
+                setGestureSelectedBarKey(undefined);
+            }
+            return;
+        }
+        clearGestureSelection(reason);
+    }, [clearGestureSelection, props.selectedBar]);
+    const scopedSelection = useScopedChartSelection({
+        chartId: scopedChartId,
+        controlled: props.selectedBar !== undefined,
+        hasSelection: selectedBarKey !== undefined,
+        onClear: clearSelectionFromScope
+    });
+    const clearScopedGestureSelection = useCallback((reason) => {
+        clearGestureSelection(reason);
+        if (reason !== "programmatic") {
+            scopedSelection.dismissSelection?.(reason);
+        }
+    }, [clearGestureSelection, scopedSelection]);
+    const selectedBar = bars.find((bar) => bar.key === selectedBarKey);
+    const tooltipConfig = useMemo(() => getBarChartTooltipConfig({
+        themeTooltip: resolvedTheme.tooltip,
+        tooltip: props.tooltip
+    }), [props.tooltip, resolvedTheme.tooltip]);
+    const tooltipModel = useMemo(() => getBarChartTooltipModel({
+        bar: selectedBar,
+        boxes,
+        config: tooltipConfig,
+        pointer: gestureSelectionPointer?.key === selectedBarKey
+            ? gestureSelectionPointer
+            : undefined
+    }), [boxes, gestureSelectionPointer, selectedBar, selectedBarKey, tooltipConfig]);
+    const isInteractionEnabled = isBarChartInteractionEnabled(interactionConfig);
+    const handleResponderRelease = useCallback((event) => {
+        event.preventDefault();
+        const { locationX, locationY } = event.nativeEvent;
+        const tappedBar = getBarChartBarAtPoint({
+            bars,
+            locationX,
+            locationY
+        });
+        if (!tappedBar) {
+            if (interactionConfig.deselectOnOutsidePress) {
+                clearScopedGestureSelection("outsidePress");
+            }
+            return;
+        }
+        if (props.selectedBar === undefined) {
+            setGestureSelectedBarKey(tappedBar.key);
+        }
+        setGestureSelectionPointer({
+            key: tappedBar.key,
+            x: locationX,
+            y: locationY
+        });
+        scopedSelection.selectChart();
+        const selectEvent = buildBarChartSelectEvent(tappedBar);
+        if (selectEvent) {
+            interactionConfig.onSelect?.(selectEvent);
+        }
+    }, [
+        bars,
+        clearScopedGestureSelection,
+        interactionConfig,
+        props.selectedBar,
+        scopedSelection
+    ]);
+    const responderProps = isInteractionEnabled
+        ? {
+            onStartShouldSetResponderCapture: () => true,
+            onStartShouldSetResponder: () => true,
+            onResponderGrant: (event) => {
+                event.preventDefault();
+            },
+            onResponderRelease: handleResponderRelease,
+            onResponderTerminationRequest: () => true
+        }
+        : {};
+    const accessibilityLabel = props.accessibilityLabel ??
+        getBarChartAccessibilitySummary({
+            data: props.data,
+            formatXLabel: props.formatXLabel,
+            formatYLabel: props.formatYLabel,
+            series: props.series,
+            xKey: props.xKey,
+            yKey: props.yKey,
+            yKeys: props.yKeys
+        });
+    const chartSurface = (_jsx(BarChartSurface, { barRadius: barRadius, height: props.height, model: model, responderProps: responderProps, renderBar: props.renderBar, renderer: safeRenderer, selectedBarKey: selectedBarKey, selectionAnimation: props.selectionAnimation, showYAxis: !safeViewport.scrollable, width: safeViewport.contentWidth }));
+    const tooltipOverlay = (_jsx(BarChartTooltipOverlay, { height: props.height, model: model, tooltipConfig: tooltipConfig, tooltipModel: tooltipModel, viewportOffsetX: safeViewport.scrollable ? scrollOffsetX : 0, width: props.width, renderer: safeRenderer }));
+    useEffect(() => {
+        if (!safeViewport.scrollable) {
+            const frame = requestAnimationFrame(() => {
+                setScrollOffsetX(0);
+            });
+            return () => {
+                cancelAnimationFrame(frame);
+            };
+        }
+        const frame = requestAnimationFrame(() => {
+            setScrollOffsetX(scrollInitialOffset);
+            scrollViewRef.current?.scrollTo({
+                animated: false,
+                x: scrollInitialOffset
+            });
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [safeViewport.scrollable, scrollInitialOffset]);
+    return (_jsx(View, { accessible: true, accessibilityLabel: accessibilityLabel, accessibilityRole: "image", style: { width: props.width, height: props.height }, testID: props.testID, children: safeViewport.scrollable ? (_jsxs(_Fragment, { children: [_jsx(ScrollView, { ref: scrollViewRef, horizontal: true, bounces: false, showsHorizontalScrollIndicator: true, style: [
+                        styles.scroller,
+                        { width: props.width, height: props.height }
+                    ], contentContainerStyle: [
+                        styles.scrollerContent,
+                        { width: safeViewport.contentWidth, height: props.height }
+                    ], onScroll: (event) => {
+                        setScrollOffsetX(event.nativeEvent.contentOffset.x);
+                    }, scrollEventThrottle: 16, children: chartSurface }), _jsx(StickyBarChartYAxis, { height: props.height, model: model, renderer: safeRenderer, width: props.width }), tooltipOverlay] })) : (_jsxs(_Fragment, { children: [chartSurface, tooltipOverlay] })) }));
+};
+const styles = StyleSheet.create({
+    scroller: {
+        overflow: "hidden"
+    },
+    scrollerContent: {
+        flexGrow: 0
+    }
+});

package/dist/v2/react-native/charts/bar/BarChartSurface.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+import type { BarChartModel, BarChartRenderer, BarChartRenderBarProps, ResolvedBarChartTooltipConfig } from "./types";
+import type { BarChartTooltipModel } from "./tooltip";
+import type { BarChartSelectionAnimationConfig } from "./types";
+export type BarChartSurfaceProps<TData = unknown> = {
+    barRadius: number;
+    height: number;
+    model: BarChartModel<TData>;
+    responderProps: ViewProps;
+    renderBar?: ((props: BarChartRenderBarProps<TData>) => ReactNode) | undefined;
+    renderer?: BarChartRenderer | undefined;
+    selectedBarKey: string | undefined;
+    selectionAnimation: boolean | BarChartSelectionAnimationConfig | undefined;
+    showYAxis: boolean;
+    width: number;
+};
+export declare const BarChartSurface: <TData>({ barRadius, height, model, responderProps, renderBar, selectedBarKey, selectionAnimation, showYAxis, width, renderer: rendererProp }: BarChartSurfaceProps<TData>) => import("react").JSX.Element;
+export type BarChartTooltipOverlayProps<TData = unknown> = {
+    height: number;
+    model: BarChartModel<TData>;
+    tooltipConfig: ResolvedBarChartTooltipConfig;
+    tooltipModel: BarChartTooltipModel<TData> | undefined;
+    viewportOffsetX: number;
+    width: number;
+    renderer?: BarChartRenderer | undefined;
+};
+export declare const BarChartTooltipOverlay: <TData>({ height, model, tooltipConfig, tooltipModel, viewportOffsetX, width, renderer: rendererProp }: BarChartTooltipOverlayProps<TData>) => import("react").JSX.Element;
+export type StickyBarChartYAxisProps<TData = unknown> = {
+    height: number;
+    model: BarChartModel<TData>;
+    width: number;
+    renderer?: BarChartRenderer | undefined;
+};
+export declare const StickyBarChartYAxis: <TData>({ height, model, width, renderer: rendererProp }: StickyBarChartYAxisProps<TData>) => import("react").JSX.Element;
+//# sourceMappingURL=BarChartSurface.d.ts.map

package/dist/v2/react-native/charts/bar/BarChartSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartSurface.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/BarChartSurface.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAgB9C,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,sBAAsB,EACtB,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,MAAM,oBAAoB,CAAC,KAAK,GAAG,OAAO,IAAI;IAClD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC9E,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACxC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,kBAAkB,EAAE,OAAO,GAAG,gCAAgC,GAAG,SAAS,CAAC;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AASF,eAAO,MAAM,eAAe,GAAI,KAAK,EAAG,uIAWrC,oBAAoB,CAAC,KAAK,CAAC,gCA+P7B,CAAC;AAEF,MAAM,MAAM,2BAA2B,CAAC,KAAK,GAAG,OAAO,IAAI;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,aAAa,EAAE,6BAA6B,CAAC;IAC7C,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,KAAK,EAAG,gGAQ5C,2BAA2B,CAAC,KAAK,CAAC,gCAsCpC,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,KAAK,GAAG,OAAO,IAAI;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,KAAK,EAAG,kDAKzC,wBAAwB,CAAC,KAAK,CAAC,gCA8CjC,CAAC"}

package/dist/v2/react-native/charts/bar/BarChartSurface.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { createSvgTestId } from "../../../svg-renderer/index";
+import { getLineChartRenderer as getBarChartRenderer } from "../line/renderer";
+import { getFontFamilyProps } from "../line/text";
+import { getAnimatedBarSelectionFill, getAnimatedBarSelectionStrokeOpacity, getBarChartSelectionGridOpacity, shouldRenderBarChartGridLines, useBarChartSelectionAnimation } from "./selectionAnimation";
+import { renderDefaultBarChartTooltip } from "./tooltip";
+import { offsetBarChartTooltipForViewport } from "./tooltipPlacement";
+import { useAnimatedBarChartTooltipModel } from "./useAnimatedTooltipModel";
+const RendererLayer = ({ children }) => _jsx(_Fragment, { children: children });
+export const BarChartSurface = ({ barRadius, height, model, responderProps, renderBar, selectedBarKey, selectionAnimation, showYAxis, width, renderer: rendererProp }) => {
+    const { bars, boxes, legendItems, orientation, resolvedTheme, showHorizontalGridLines, showXAxisLabels, showYAxisLabels, valueLabels, xLabels, yLabels, yTicks } = model;
+    const fontProps = getFontFamilyProps(resolvedTheme.typography.fontFamily);
+    const selectionAnimationState = useBarChartSelectionAnimation({
+        animation: selectionAnimation,
+        selectedBarKey
+    });
+    const gridStrokeOpacity = getBarChartSelectionGridOpacity({
+        selectedBarKey,
+        state: selectionAnimationState
+    });
+    const shouldRenderGridLines = shouldRenderBarChartGridLines({
+        selectedBarKey,
+        state: selectionAnimationState
+    });
+    const shouldCoverSelectionGrid = !shouldRenderGridLines;
+    const renderer = getBarChartRenderer(rendererProp);
+    const Layer = renderer.Layer ?? RendererLayer;
+    const Line = renderer.Line;
+    const Rect = renderer.Rect;
+    const Surface = renderer.Surface;
+    const Text = renderer.Text;
+    const isInteractive = Object.keys(responderProps).length > 0;
+    return (_jsxs(View, { collapsable: false, style: { width, height, position: "relative" }, children: [_jsxs(Surface, { width: width, height: height, children: [_jsxs(Layer, { name: "background", children: [_jsx(Rect, { x: 0, y: 0, width: width, height: height, rx: 8, fill: resolvedTheme.background }), _jsx(Rect, { x: boxes.plot.x, y: boxes.plot.y, width: boxes.plot.width, height: boxes.plot.height, rx: 6, fill: resolvedTheme.plotBackground })] }), _jsxs(Layer, { name: "grid", children: [shouldRenderGridLines &&
+                                showHorizontalGridLines &&
+                                orientation === "horizontal"
+                                ? xLabels.map((label) => (_jsx(Line, { x1: label.x, x2: label.x, y1: boxes.plot.y, y2: boxes.plot.y + boxes.plot.height, stroke: resolvedTheme.grid, strokeOpacity: gridStrokeOpacity, strokeWidth: 1 }, `grid-x-${label.index}`)))
+                                : null, shouldRenderGridLines &&
+                                showHorizontalGridLines &&
+                                orientation === "vertical"
+                                ? yTicks.map((tick) => {
+                                    const label = yLabels.find((item) => item.key === `tick-${tick}`);
+                                    return label ? (_jsx(Line, { x1: boxes.plot.x, x2: boxes.plot.x + boxes.plot.width, y1: label.y - resolvedTheme.typography.axisLabelSize / 2 + 2, y2: label.y - resolvedTheme.typography.axisLabelSize / 2 + 2, stroke: resolvedTheme.grid, strokeOpacity: gridStrokeOpacity, strokeWidth: 1 }, `grid-y-${tick}`)) : null;
+                                })
+                                : null] }), _jsxs(Layer, { name: "data", children: [shouldCoverSelectionGrid ? (_jsx(Rect, { x: boxes.plot.x, y: boxes.plot.y, width: boxes.plot.width, height: boxes.plot.height, rx: 6, fill: resolvedTheme.plotBackground, testID: createSvgTestId("bar-chart-selection-grid-cover") })) : null, bars.map((bar) => {
+                                const fill = getAnimatedBarSelectionFill({
+                                    backgroundColor: resolvedTheme.plotBackground,
+                                    barKey: bar.key,
+                                    color: bar.color,
+                                    state: selectionAnimationState
+                                });
+                                const strokeOpacity = getAnimatedBarSelectionStrokeOpacity({
+                                    barKey: bar.key,
+                                    state: selectionAnimationState
+                                });
+                                const radius = Math.min(barRadius, bar.width / 2, bar.height / 2);
+                                const barNode = renderBar?.({
+                                    bar,
+                                    fill,
+                                    radius,
+                                    selected: selectedBarKey === bar.key,
+                                    strokeColor: resolvedTheme.text,
+                                    strokeOpacity,
+                                    strokeWidth: 1.5,
+                                    theme: resolvedTheme
+                                });
+                                return (_jsxs(Fragment, { children: [_jsx(Rect, { x: bar.x, y: bar.y, width: bar.width, height: bar.height, rx: 0, fill: resolvedTheme.plotBackground }), barNode ?? (_jsx(Rect, { x: bar.x, y: bar.y, width: bar.width, height: bar.height, rx: radius, fill: fill, ...(strokeOpacity > 0
+                                                ? {
+                                                    stroke: resolvedTheme.text,
+                                                    strokeOpacity,
+                                                    strokeWidth: 1.5
+                                                }
+                                                : {}), testID: createSvgTestId("bar-chart-bar", bar.seriesKey, bar.dataIndex) }))] }, bar.key));
+                            })] }), _jsxs(Layer, { name: "axes", children: [showYAxis && showYAxisLabels
+                                ? yLabels.map((label) => (_jsx(Text, { x: label.x, y: label.y, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.axisLabelSize, textAnchor: "end", ...fontProps, children: label.text }, `label-y-${label.key}`)))
+                                : null, showXAxisLabels
+                                ? xLabels.map((label) => (_jsx(Text, { x: label.x, y: label.y, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.axisLabelSize, textAnchor: label.textAnchor, ...fontProps, children: label.text }, `label-x-${label.index}`)))
+                                : null, valueLabels.map((label) => (_jsx(Text, { x: label.x, y: label.y, fill: label.color, fontSize: resolvedTheme.typography.axisLabelSize, textAnchor: label.textAnchor ?? "middle", ...fontProps, children: label.text }, label.key))), legendItems.map((item) => (_jsx(Rect, { x: item.markerX, y: item.markerY, width: 8, height: 8, rx: 2, fill: item.color }, `legend-marker-${item.key}`))), legendItems.map((item) => (_jsx(Text, { x: item.labelX, y: item.labelY, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.legendLabelSize, textAnchor: "start", ...fontProps, children: item.label }, `legend-label-${item.key}`)))] })] }), isInteractive ? (_jsx(View, { accessible: false, collapsable: false, importantForAccessibility: "no", pointerEvents: "auto", style: styles.interactionOverlay, ...responderProps })) : null] }));
+};
+export const BarChartTooltipOverlay = ({ height, model, tooltipConfig, tooltipModel, viewportOffsetX, width, renderer: rendererProp }) => {
+    const animatedTooltipModel = useAnimatedBarChartTooltipModel(tooltipModel, tooltipConfig.positionAnimationDuration);
+    const viewportTooltipModel = animatedTooltipModel
+        ? offsetBarChartTooltipForViewport({
+            leftInset: model.boxes.plot.x + tooltipConfig.edgePadding,
+            rightInset: tooltipConfig.edgePadding,
+            tooltip: animatedTooltipModel,
+            viewportOffsetX,
+            viewportWidth: width
+        })
+        : undefined;
+    const renderer = getBarChartRenderer(rendererProp);
+    const Layer = renderer.Layer ?? RendererLayer;
+    const Surface = renderer.Surface;
+    return (_jsx(View, { pointerEvents: "none", style: [styles.tooltipOverlay, { width, height }], children: _jsx(Surface, { width: width, height: height, children: _jsx(Layer, { name: "interaction", children: viewportTooltipModel
+                    ? renderDefaultBarChartTooltip({
+                        ...viewportTooltipModel,
+                        config: tooltipConfig
+                    }, renderer)
+                    : null }) }) }));
+};
+export const StickyBarChartYAxis = ({ height, model, width, renderer: rendererProp }) => {
+    const { boxes, resolvedTheme, showYAxisLabels, yLabels } = model;
+    const fontProps = getFontFamilyProps(resolvedTheme.typography.fontFamily);
+    const renderer = getBarChartRenderer(rendererProp);
+    const Layer = renderer.Layer ?? RendererLayer;
+    const Rect = renderer.Rect;
+    const Surface = renderer.Surface;
+    const Text = renderer.Text;
+    return (_jsx(View, { pointerEvents: "none", style: [styles.stickyYAxis, { width, height }], children: _jsx(Surface, { width: width, height: height, children: _jsxs(Layer, { name: "axes", children: [_jsx(Rect, { x: 0, y: 0, width: Math.max(0, boxes.plot.x), height: boxes.plot.y + boxes.plot.height, fill: resolvedTheme.background }), _jsx(Rect, { x: 0, y: boxes.plot.y + boxes.plot.height, width: Math.max(0, boxes.plot.x), height: Math.max(0, height - (boxes.plot.y + boxes.plot.height)), fill: resolvedTheme.background }), showYAxisLabels
+                        ? yLabels.map((label) => (_jsx(Text, { x: label.x, y: label.y, fill: resolvedTheme.mutedText, fontSize: resolvedTheme.typography.axisLabelSize, textAnchor: "end", ...fontProps, children: label.text }, `sticky-label-y-${label.key}`)))
+                        : null] }) }) }));
+};
+const styles = StyleSheet.create({
+    stickyYAxis: {
+        left: 0,
+        position: "absolute",
+        top: 0,
+        zIndex: 1
+    },
+    tooltipOverlay: {
+        left: 0,
+        position: "absolute",
+        top: 0,
+        zIndex: 2
+    },
+    interactionOverlay: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0
+    }
+});

package/dist/v2/react-native/charts/bar/StackedBarChart.d.ts

@@ -0,0 +1,4 @@
+import { type StackedBarChartProps } from "./stackedCompat";
+export type * from "./stackedCompat";
+export declare const StackedBarChart: (props: StackedBarChartProps) => import("react").JSX.Element;
+//# sourceMappingURL=StackedBarChart.d.ts.map

package/dist/v2/react-native/charts/bar/StackedBarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/StackedBarChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,iBAAiB,CAAC;AAEzB,mBAAmB,iBAAiB,CAAC;AAErC,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAW1D,CAAC"}

package/dist/v2/react-native/charts/bar/StackedBarChart.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { View } from "react-native";
+import { BarChart } from "./BarChart";
+import { buildStackedBarChartCompatProps } from "./stackedCompat";
+export const StackedBarChart = (props) => {
+    const { barChartProps, style } = useMemo(() => buildStackedBarChartCompatProps(props), [props]);
+    return (_jsx(View, { style: style, children: _jsx(BarChart, { ...barChartProps }) }));
+};

package/dist/v2/react-native/charts/bar/accessibility.d.ts

@@ -0,0 +1,31 @@
+import type { ChartXValue } from "../../../core/index";
+import type { BarChartProps } from "./types";
+export type BarChartDataTableColumn = {
+    key: string;
+    label: string;
+};
+export type BarChartDataTableRow<TData = unknown> = {
+    index: number;
+    x: ChartXValue;
+    xLabel: string;
+    values: Record<string, number | null>;
+    formattedValues: Record<string, string>;
+    raw: TData;
+};
+export type BarChartDataTable<TData = unknown> = {
+    columns: BarChartDataTableColumn[];
+    rows: Array<BarChartDataTableRow<TData>>;
+};
+type BarChartAccessibilityInput<TData extends Record<string, unknown>> = {
+    data: BarChartProps<TData>["data"];
+    formatXLabel?: BarChartProps<TData>["formatXLabel"] | undefined;
+    formatYLabel?: BarChartProps<TData>["formatYLabel"] | undefined;
+    series?: BarChartProps<TData>["series"] | undefined;
+    xKey: BarChartProps<TData>["xKey"];
+    yKey?: BarChartProps<TData>["yKey"] | undefined;
+    yKeys?: BarChartProps<TData>["yKeys"] | undefined;
+};
+export declare const getBarChartDataTable: <TData extends Record<string, unknown>>({ data, formatXLabel, formatYLabel, series, xKey, yKey, yKeys }: BarChartAccessibilityInput<TData>) => BarChartDataTable<TData>;
+export declare const getBarChartAccessibilitySummary: <TData extends Record<string, unknown>>(input: BarChartAccessibilityInput<TData>) => string;
+export {};
+//# sourceMappingURL=accessibility.d.ts.map

package/dist/v2/react-native/charts/bar/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/accessibility.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAC;AAM7D,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,KAAK,GAAG,OAAO,IAAI;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,WAAW,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,EAAE,KAAK,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI;IAC/C,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAChE,YAAY,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAChE,MAAM,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;CACnD,CAAC;AAuEF,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,iEAQzE,0BAA0B,CAAC,KAAK,CAAC,KAAG,iBAAiB,CAAC,KAAK,CAqC7D,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,OAAO,0BAA0B,CAAC,KAAK,CAAC,WAwCzC,CAAC"}

package/dist/v2/react-native/charts/bar/accessibility.js

@@ -0,0 +1,87 @@
+import { normalizeCartesianData } from "../../../core/index";
+import { defaultFormatBarChartXLabel, defaultFormatBarChartYLabel } from "./modelUtils";
+const pluralize = (count, singular, plural = `${singular}s`) => `${count} ${count === 1 ? singular : plural}`;
+const resolveSeriesInput = (yKey, yKeys, series) => {
+    if (series && series.length > 0) {
+        return series;
+    }
+    if (yKeys && yKeys.length > 0) {
+        return yKeys.map((key) => ({ yKey: key }));
+    }
+    return yKey ? [{ yKey }] : [];
+};
+const getDefinedPoints = (table) => table.rows.flatMap((row) => table.columns.flatMap((column) => {
+    const value = row.values[column.key];
+    return typeof value === "number"
+        ? [
+            {
+                formattedValue: row.formattedValues[column.key] ?? String(value),
+                raw: row.raw,
+                seriesLabel: column.label,
+                value,
+                xLabel: row.xLabel
+            }
+        ]
+        : [];
+}));
+const getMinPoint = (points) => points.reduce((min, point) => (!min || point.value < min.value ? point : min), undefined);
+const getMaxPoint = (points) => points.reduce((max, point) => (!max || point.value > max.value ? point : max), undefined);
+const getPointLabel = ({ point, seriesCount }) => seriesCount > 1 ? `${point.seriesLabel} in ${point.xLabel}` : point.xLabel;
+export const getBarChartDataTable = ({ data, formatXLabel = defaultFormatBarChartXLabel, formatYLabel = defaultFormatBarChartYLabel, series, xKey, yKey, yKeys }) => {
+    const seriesInput = resolveSeriesInput(yKey, yKeys, series);
+    const normalized = normalizeCartesianData({
+        data,
+        xKey,
+        series: seriesInput
+    });
+    return {
+        columns: normalized.series.map((item) => ({
+            key: item.key,
+            label: item.label
+        })),
+        rows: data.map((row, rowIndex) => {
+            const values = {};
+            const formattedValues = {};
+            normalized.series.forEach((seriesItem) => {
+                const value = seriesItem.points[rowIndex]?.value ?? null;
+                values[seriesItem.key] = value;
+                formattedValues[seriesItem.key] =
+                    value === null ? "No value" : formatYLabel(value);
+            });
+            const x = normalized.series[0]?.points[rowIndex]?.x ?? rowIndex;
+            return {
+                index: rowIndex,
+                x,
+                xLabel: formatXLabel(x, rowIndex),
+                values,
+                formattedValues,
+                raw: row
+            };
+        })
+    };
+};
+export const getBarChartAccessibilitySummary = (input) => {
+    const table = getBarChartDataTable(input);
+    if (table.columns.length === 0 || table.rows.length === 0) {
+        return "Bar chart with no data.";
+    }
+    const points = getDefinedPoints(table);
+    if (points.length === 0) {
+        return `Bar chart with ${pluralize(table.rows.length, "category", "categories")} and no defined values.`;
+    }
+    const intro = table.columns.length === 1
+        ? `Bar chart with ${pluralize(points.length, "bar")}.`
+        : `Bar chart with ${pluralize(table.columns.length, "series", "series")} across ${pluralize(table.rows.length, "category", "categories")}.`;
+    const minPoint = getMinPoint(points);
+    const maxPoint = getMaxPoint(points);
+    if (!minPoint || !maxPoint) {
+        return intro;
+    }
+    return `${intro} Highest value is ${getPointLabel({
+        point: maxPoint,
+        seriesCount: table.columns.length
+    })} at ${maxPoint.formattedValue}. Lowest value is ${getPointLabel({
+        point: minPoint,
+        seriesCount: table.columns.length
+    })} at ${minPoint.formattedValue}.`;
+};

package/dist/v2/react-native/charts/bar/interaction.d.ts

@@ -0,0 +1,18 @@
+import type { BarChartBarModel, BarChartDeselectEvent, BarChartInteraction, BarChartSelectEvent, BarChartSelectedBar } from "./types";
+export type ResolvedBarChartInteractionConfig<TData = unknown> = {
+    mode: "none" | "tap";
+    deselectOnOutsidePress: boolean;
+    onSelect?: (event: BarChartSelectEvent<TData>) => void;
+    onDeselect?: (event: BarChartDeselectEvent) => void;
+};
+export declare const getBarChartBarKey: (selectedBar: BarChartSelectedBar | undefined) => string | undefined;
+export declare const getBarChartInteractionConfig: <TData>(interaction: BarChartInteraction<TData> | undefined) => ResolvedBarChartInteractionConfig<TData>;
+export declare const isBarChartInteractionEnabled: <TData>(config: ResolvedBarChartInteractionConfig<TData>) => boolean;
+export declare const getBarChartBarAtPoint: <TData>({ bars, hitSlop, locationX, locationY }: {
+    bars: Array<BarChartBarModel<TData>>;
+    hitSlop?: number;
+    locationX: number;
+    locationY: number;
+}) => BarChartBarModel<TData> | undefined;
+export declare const buildBarChartSelectEvent: <TData>(bar: BarChartBarModel<TData> | undefined) => BarChartSelectEvent<TData> | undefined;
+//# sourceMappingURL=interaction.d.ts.map

package/dist/v2/react-native/charts/bar/interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/interaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,iCAAiC,CAAC,KAAK,GAAG,OAAO,IAAI;IAC/D,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,sBAAsB,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,aAAa,mBAAmB,GAAG,SAAS,uBAEiC,CAAC;AAEhF,eAAO,MAAM,4BAA4B,GAAI,KAAK,EAChD,aAAa,mBAAmB,CAAC,KAAK,CAAC,GAAG,SAAS,KAClD,iCAAiC,CAAC,KAAK,CAqBzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,KAAK,EAChD,QAAQ,iCAAiC,CAAC,KAAK,CAAC,YACvB,CAAC;AAE5B,eAAO,MAAM,qBAAqB,GAAI,KAAK,EAAE,yCAK1C;IACD,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,wCAyBA,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,KAAK,EAC5C,KAAK,gBAAgB,CAAC,KAAK,CAAC,GAAG,SAAS,KACvC,mBAAmB,CAAC,KAAK,CAAC,GAAG,SAoB/B,CAAC"}

package/dist/v2/react-native/charts/bar/interaction.js

@@ -0,0 +1,62 @@
+export const getBarChartBarKey = (selectedBar) => selectedBar ? `${selectedBar.seriesKey}-${selectedBar.dataIndex}` : undefined;
+export const getBarChartInteractionConfig = (interaction) => {
+    if (!interaction) {
+        return {
+            mode: "none",
+            deselectOnOutsidePress: false
+        };
+    }
+    if (typeof interaction === "string") {
+        return {
+            mode: interaction,
+            deselectOnOutsidePress: interaction !== "none"
+        };
+    }
+    return {
+        mode: interaction.mode ?? "tap",
+        deselectOnOutsidePress: interaction.deselectOnOutsidePress ?? true,
+        ...(interaction.onSelect ? { onSelect: interaction.onSelect } : {}),
+        ...(interaction.onDeselect ? { onDeselect: interaction.onDeselect } : {})
+    };
+};
+export const isBarChartInteractionEnabled = (config) => config.mode !== "none";
+export const getBarChartBarAtPoint = ({ bars, hitSlop = 6, locationX, locationY }) => {
+    const candidates = bars.filter((bar) => {
+        const top = bar.y;
+        const bottom = bar.y + bar.height;
+        return (locationX >= bar.x - hitSlop &&
+            locationX <= bar.x + bar.width + hitSlop &&
+            locationY >= top - hitSlop &&
+            locationY <= bottom + hitSlop);
+    });
+    if (candidates.length <= 1) {
+        return candidates[0];
+    }
+    return candidates
+        .map((bar) => ({
+        bar,
+        distance: Math.abs(locationX - (bar.x + bar.width / 2)) +
+            Math.abs(locationY - (bar.y + bar.height / 2))
+    }))
+        .sort((a, b) => a.distance - b.distance)[0]?.bar;
+};
+export const buildBarChartSelectEvent = (bar) => {
+    if (!bar) {
+        return undefined;
+    }
+    return {
+        color: bar.color,
+        dataIndex: bar.dataIndex,
+        formattedValue: bar.formattedValue,
+        position: {
+            x: bar.x + bar.width / 2,
+            y: bar.y
+        },
+        raw: bar.raw,
+        seriesKey: bar.seriesKey,
+        seriesLabel: bar.seriesLabel,
+        value: bar.value,
+        x: bar.xValue,
+        xLabel: bar.xLabel
+    };
+};

package/dist/v2/react-native/charts/bar/model.d.ts

@@ -0,0 +1,3 @@
+import type { BarChartModel, BuildBarChartModelOptions } from "./types";
+export declare const buildBarChartModel: <TData extends Record<string, unknown>>({ data, xKey, yKey, yKeys, series, width, height, theme, preset, mode, orientation, yDomain, barWidthRatio, barGapRatio, showValuesOnTopOfBars, showHorizontalGridLines, showXAxisLabels, showYAxisLabels, yTickCount, legend, labelStrategy, formatXLabel, formatYLabel, chartKitTheme }: BuildBarChartModelOptions<TData>) => BarChartModel<TData>;
+//# sourceMappingURL=model.d.ts.map

package/dist/v2/react-native/charts/bar/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/charts/bar/model.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAEV,aAAa,EAGb,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAoEjB,eAAO,MAAM,kBAAkB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,2RAyBvE,yBAAyB,CAAC,KAAK,CAAC,KAAG,aAAa,CAAC,KAAK,CAkUxD,CAAC"}