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

package/dist/v2/core/scales/ticks.js

@@ -0,0 +1,111 @@
+import { tickStep } from "./domain";
+export const generateLinearTicks = ({ count = 5, domain = [0, 1] } = {}) => {
+    const [start, stop] = domain;
+    const reverse = stop < start;
+    const min = reverse ? stop : start;
+    const max = reverse ? start : stop;
+    const step = tickStep(min, max, Math.max(1, count));
+    if (step === 0) {
+        return [start];
+    }
+    const first = Math.ceil(min / step) * step;
+    const ticks = [];
+    const epsilon = step * 1e-10;
+    for (let value = first; value <= max + epsilon; value += step) {
+        ticks.push(Number(value.toPrecision(12)));
+    }
+    return reverse ? ticks.reverse() : ticks;
+};
+const timeUnitMs = {
+    millisecond: 1,
+    second: 1000,
+    minute: 60000,
+    hour: 3600000,
+    day: 86400000,
+    week: 604800000,
+    month: 2592000000,
+    year: 31536000000
+};
+const chooseTimeUnit = (span, count) => {
+    const target = span / Math.max(1, count);
+    if (target <= timeUnitMs.second)
+        return "second";
+    if (target <= timeUnitMs.minute)
+        return "minute";
+    if (target <= timeUnitMs.hour)
+        return "hour";
+    if (target <= timeUnitMs.day)
+        return "day";
+    if (target <= timeUnitMs.week * 2)
+        return "week";
+    if (target <= timeUnitMs.year)
+        return "month";
+    return "year";
+};
+const floorDateToUnit = (date, unit) => {
+    const next = new Date(date);
+    if (unit === "year") {
+        return new Date(next.getFullYear(), 0, 1);
+    }
+    if (unit === "month") {
+        return new Date(next.getFullYear(), next.getMonth(), 1);
+    }
+    if (unit === "week") {
+        const start = new Date(next.getFullYear(), next.getMonth(), next.getDate());
+        start.setDate(start.getDate() - start.getDay());
+        return start;
+    }
+    if (unit === "day") {
+        return new Date(next.getFullYear(), next.getMonth(), next.getDate());
+    }
+    if (unit === "hour") {
+        next.setMinutes(0, 0, 0);
+        return next;
+    }
+    if (unit === "minute") {
+        next.setSeconds(0, 0);
+        return next;
+    }
+    if (unit === "second") {
+        next.setMilliseconds(0);
+        return next;
+    }
+    return next;
+};
+const addTimeUnit = (date, unit) => {
+    const next = new Date(date);
+    if (unit === "year")
+        next.setFullYear(next.getFullYear() + 1);
+    else if (unit === "month")
+        next.setMonth(next.getMonth() + 1);
+    else if (unit === "week")
+        next.setDate(next.getDate() + 7);
+    else if (unit === "day")
+        next.setDate(next.getDate() + 1);
+    else if (unit === "hour")
+        next.setHours(next.getHours() + 1);
+    else if (unit === "minute")
+        next.setMinutes(next.getMinutes() + 1);
+    else if (unit === "second")
+        next.setSeconds(next.getSeconds() + 1);
+    else
+        next.setMilliseconds(next.getMilliseconds() + 1);
+    return next;
+};
+export const generateTimeTicks = ({ count = 5, domain = [new Date(0), new Date(1)], unit } = {}) => {
+    const [start, stop] = domain;
+    const reverse = stop.valueOf() < start.valueOf();
+    const min = reverse ? stop : start;
+    const max = reverse ? start : stop;
+    const resolvedUnit = unit ?? chooseTimeUnit(max.valueOf() - min.valueOf(), count);
+    const ticks = [];
+    let cursor = floorDateToUnit(min, resolvedUnit);
+    if (cursor.valueOf() < min.valueOf()) {
+        cursor = addTimeUnit(cursor, resolvedUnit);
+    }
+    while (cursor.valueOf() <= max.valueOf()) {
+        ticks.push(cursor);
+        cursor = addTimeUnit(cursor, resolvedUnit);
+    }
+    return reverse ? ticks.reverse() : ticks;
+};

package/dist/v2/core/scales/time.d.ts

@@ -0,0 +1,8 @@
+import type { TimeDomainInput, TimeScale } from "./types";
+export type CreateTimeScaleOptions = {
+    domain?: TimeDomainInput;
+    values?: readonly Date[];
+    range: [number, number];
+};
+export declare const createTimeScale: ({ domain, values, range }: CreateTimeScaleOptions) => TimeScale;
+//# sourceMappingURL=time.d.ts.map

package/dist/v2/core/scales/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/scales/time.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACzB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2BAI7B,sBAAsB,KAAG,SA4B3B,CAAC"}

package/dist/v2/core/scales/time.js

@@ -0,0 +1,23 @@
+import { resolveTimeDomain } from "./domain";
+export const createTimeScale = ({ domain = "auto", values = [], range }) => {
+    const resolvedDomain = resolveTimeDomain(values, domain);
+    const domainMin = resolvedDomain[0].valueOf();
+    const domainSpan = resolvedDomain[1].valueOf() - domainMin;
+    const rangeSpan = range[1] - range[0];
+    return {
+        domain: resolvedDomain,
+        range,
+        scale: (value) => {
+            if (domainSpan === 0) {
+                return range[0];
+            }
+            return (range[0] + ((value.valueOf() - domainMin) / domainSpan) * rangeSpan);
+        },
+        invert: (value) => {
+            if (rangeSpan === 0) {
+                return new Date(domainMin);
+            }
+            return new Date(domainMin + ((value - range[0]) / rangeSpan) * domainSpan);
+        }
+    };
+};

package/dist/v2/core/scales/types.d.ts

@@ -0,0 +1,46 @@
+export type DomainKeyword = "dataMin" | "dataMax";
+export type NumericDomainValue = number | DomainKeyword;
+export type TimeDomainValue = Date | number | string | DomainKeyword;
+export type NumericDomainInput = "auto" | [NumericDomainValue, NumericDomainValue] | {
+    min?: NumericDomainValue;
+    max?: NumericDomainValue;
+    includeZero?: boolean;
+    nice?: boolean;
+};
+export type TimeDomainInput = "auto" | [TimeDomainValue, TimeDomainValue] | {
+    min?: TimeDomainValue;
+    max?: TimeDomainValue;
+    nice?: boolean;
+};
+export type ContinuousScale<TInput> = {
+    domain: [TInput, TInput];
+    range: [number, number];
+    scale: (value: TInput) => number;
+    invert: (value: number) => TInput;
+};
+export type LinearScale = ContinuousScale<number>;
+export type TimeScale = ContinuousScale<Date>;
+export type BandScale<TValue extends string | number = string | number> = {
+    domain: TValue[];
+    range: [number, number];
+    bandwidth: number;
+    step: number;
+    scale: (value: TValue) => number | undefined;
+};
+export type PointScale<TValue extends string | number = string | number> = {
+    domain: TValue[];
+    range: [number, number];
+    step: number;
+    scale: (value: TValue) => number | undefined;
+};
+export type LinearTickOptions = {
+    count?: number;
+    domain?: [number, number];
+};
+export type TimeTickUnit = "millisecond" | "second" | "minute" | "hour" | "day" | "week" | "month" | "year";
+export type TimeTickOptions = {
+    count?: number;
+    domain?: [Date, Date];
+    unit?: TimeTickUnit;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/v2/core/scales/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/scales/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,aAAa,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC;AAErE,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,GACxC;IACE,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACzB,GAAG,CAAC,EAAE,kBAAkB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEN,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,CAAC,eAAe,EAAE,eAAe,CAAC,GAClC;IACE,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEN,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI;IACpC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;AAE9C,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IACxE,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IACzE,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,aAAa,GACb,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC"}

package/dist/v2/core/scales/types.js

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

package/dist/v2/index.d.ts

@@ -0,0 +1 @@
+export * from "./react-native/index";

package/dist/v2/index.js

@@ -0,0 +1 @@
+export * from "./react-native/index";

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

@@ -0,0 +1,6 @@
+import type { BarChartProps } from "./types";
+export type * from "./types";
+export { getBarChartAccessibilitySummary, getBarChartDataTable } from "./accessibility";
+export type { BarChartDataTable, BarChartDataTableColumn, BarChartDataTableRow } from "./accessibility";
+export declare const BarChart: <TData extends Record<string, unknown>>(props: BarChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BarChart.d.ts.map

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,4CA2S5B,CAAC"}

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

@@ -0,0 +1,198 @@
+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
+        ? {
+            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-runtime").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-runtime").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-runtime").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,4CAoP7B,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,4CAsCpC,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,4CA8CjC,CAAC"}

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

@@ -0,0 +1,126 @@
+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;
+    return (_jsx(View, { collapsable: false, style: { width, height }, ...responderProps, 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}`)))] })] }) }));
+};
+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
+    }
+});

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-runtime").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,4CAW1D,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"}