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

package/dist/v2/react-native/charts/pie/PieChart.js

@@ -0,0 +1,253 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useChartKitTheme } from "../../theme";
+import { useScopedChartSelection } from "../../selection/ChartSelectionProvider";
+import { getLineChartRenderer as getPieChartRenderer } from "../line/renderer";
+import { getPieChartAccessibilitySummary } from "./accessibility";
+import { resolvePieChartActiveSliceConfig } from "./activeSlice";
+import { buildPieChartSelectEvent, getPieChartInteractionConfig, getPieChartSliceAtPoint, isPieChartInteractionEnabled, normalizePieChartSelectedIndex } from "./interaction";
+import { buildPieChartModel } from "./model";
+import { usePieChartSelectionAnimation } from "./selectionAnimation";
+import { PieChartSlices } from "./slices";
+export { getPieChartAccessibilitySummary, getPieChartDataTable } from "./accessibility";
+const defaultDonutInnerRadiusRatio = 0.58;
+const defaultPieLegendGap = 8;
+const RendererLayer = ({ children }) => _jsx(_Fragment, { children: children });
+export const PieChart = (props) => {
+    const generatedChartId = useId().replace(/:/g, "");
+    const scopedChartId = props.id ?? generatedChartId;
+    const chartKitTheme = useChartKitTheme();
+    const interactionConfig = useMemo(() => getPieChartInteractionConfig(props.interaction), [props.interaction]);
+    const [gestureSelectedIndex, setGestureSelectedIndex] = useState(() => normalizePieChartSelectedIndex(props.defaultSelectedIndex));
+    const selectedIndex = normalizePieChartSelectedIndex(props.selectedIndex) ?? gestureSelectedIndex;
+    const model = useMemo(() => buildPieChartModel({ chartKitTheme, props, selectedIndex }), [chartKitTheme, props, selectedIndex]);
+    const { arcLabels, arcs, centerX, centerY, chartHeight, legendItems, legendVisible, resolvedTheme, radius, sliceSeparator, total } = model;
+    const legendConfig = typeof props.legend === "object" ? props.legend : {};
+    const activeSlice = resolvePieChartActiveSliceConfig({
+        activeSlice: props.activeSlice,
+        backgroundColor: resolvedTheme.background
+    });
+    const selectionAnimationState = usePieChartSelectionAnimation({
+        animation: props.selectionAnimation,
+        selectedIndex
+    });
+    const isInteractionEnabled = isPieChartInteractionEnabled(interactionConfig);
+    const hasSelectedSlice = selectedIndex !== undefined;
+    const clearGestureSelection = useCallback((reason) => {
+        if (props.selectedIndex === undefined) {
+            setGestureSelectedIndex(undefined);
+        }
+        interactionConfig.onDeselect?.({ reason });
+    }, [interactionConfig, props.selectedIndex]);
+    const clearSelectionFromScope = useCallback((reason) => {
+        if (reason === "scopeChange") {
+            if (props.selectedIndex === undefined) {
+                setGestureSelectedIndex(undefined);
+            }
+            return;
+        }
+        clearGestureSelection(reason);
+    }, [clearGestureSelection, props.selectedIndex]);
+    const scopedSelection = useScopedChartSelection({
+        chartId: scopedChartId,
+        controlled: props.selectedIndex !== undefined,
+        hasSelection: hasSelectedSlice,
+        onClear: clearSelectionFromScope
+    });
+    const clearScopedGestureSelection = useCallback((reason) => {
+        clearGestureSelection(reason);
+        if (reason !== "programmatic") {
+            scopedSelection.dismissSelection?.(reason);
+        }
+    }, [clearGestureSelection, scopedSelection]);
+    const handleResponderRelease = useCallback((event) => {
+        event.preventDefault();
+        const { locationX, locationY } = event.nativeEvent;
+        const tappedSlice = getPieChartSliceAtPoint({
+            arcs,
+            centerX,
+            centerY,
+            innerRadius: model.innerRadius,
+            locationX,
+            locationY,
+            radius
+        });
+        if (!tappedSlice) {
+            if (interactionConfig.deselectOnOutsidePress) {
+                clearScopedGestureSelection("outsidePress");
+            }
+            return;
+        }
+        if (props.selectedIndex === undefined) {
+            setGestureSelectedIndex(tappedSlice.index);
+        }
+        scopedSelection.selectChart();
+        const selectEvent = buildPieChartSelectEvent(tappedSlice);
+        if (selectEvent) {
+            interactionConfig.onSelect?.(selectEvent);
+        }
+    }, [
+        arcs,
+        centerX,
+        centerY,
+        clearScopedGestureSelection,
+        interactionConfig,
+        model.innerRadius,
+        props.selectedIndex,
+        radius,
+        scopedSelection
+    ]);
+    const responderProps = isInteractionEnabled
+        ? {
+            onStartShouldSetResponderCapture: () => true,
+            onStartShouldSetResponder: () => true,
+            onResponderGrant: (event) => {
+                event.preventDefault();
+            },
+            onResponderRelease: handleResponderRelease,
+            onResponderTerminationRequest: () => true
+        }
+        : {};
+    const centerLabelProps = {
+        arcs,
+        theme: resolvedTheme,
+        total
+    };
+    if (selectedIndex !== undefined) {
+        centerLabelProps.selectedIndex = selectedIndex;
+        const selectedArc = arcs[selectedIndex];
+        if (selectedArc) {
+            centerLabelProps.selectedArc = selectedArc;
+        }
+    }
+    const centerLabel = typeof props.centerLabel === "function"
+        ? props.centerLabel(centerLabelProps)
+        : props.centerLabel;
+    const isTextCenterLabel = typeof centerLabel === "string" && centerLabel.length > 0;
+    const customCenterLabel = centerLabel !== undefined && centerLabel !== null && !isTextCenterLabel
+        ? centerLabel
+        : null;
+    const accessibilityLabel = props.accessibilityLabel ??
+        getPieChartAccessibilitySummary({
+            colorKey: props.colorKey,
+            colors: props.colors,
+            data: props.data,
+            formatPercentage: props.formatPercentage,
+            formatValue: props.formatValue,
+            labelKey: props.labelKey,
+            valueKey: props.valueKey
+        });
+    const renderer = getPieChartRenderer(props.renderer ?? chartKitTheme.renderer);
+    const Layer = renderer.Layer ?? RendererLayer;
+    const Line = renderer.Line;
+    const Surface = renderer.Surface;
+    const SvgText = renderer.Text;
+    const canRenderText = renderer.capabilities?.text !== false;
+    return (_jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel, accessibilityRole: "image", collapsable: false, style: [
+            styles.container,
+            {
+                backgroundColor: resolvedTheme.background,
+                height: props.height,
+                position: "relative",
+                width: props.width
+            }
+        ], testID: props.testID, children: [_jsxs(View, { style: [
+                    styles.plotArea,
+                    {
+                        height: chartHeight,
+                        width: props.width
+                    }
+                ], children: [_jsxs(Surface, { width: props.width, height: chartHeight, children: [_jsx(Layer, { name: "background", children: _jsx(PieChartSlices, { activeSlice: activeSlice, arcs: arcs, centerX: centerX, centerY: centerY, innerRadius: model.innerRadius, radius: radius, renderer: renderer, resolvedTheme: resolvedTheme, selectedIndex: selectedIndex, selectionAnimationState: selectionAnimationState, sliceSeparator: sliceSeparator, testID: props.testID }) }), isTextCenterLabel && canRenderText ? (_jsx(Layer, { name: "overlays", children: _jsx(SvgText, { fill: resolvedTheme.text, fontSize: 16, fontWeight: "800", text: centerLabel, textAnchor: "middle", x: centerX, y: centerY + 5, ...(resolvedTheme.typography.fontFamily
+                                        ? { fontFamily: resolvedTheme.typography.fontFamily }
+                                        : {}), children: centerLabel }) })) : null, arcLabels.length > 0 ? (_jsxs(Layer, { name: "interaction", children: [arcLabels.map((label) => label.connectorVisible ? (_jsx(Line, { x1: label.connectorStartX, x2: label.connectorBendX, y1: label.connectorStartY, y2: label.connectorBendY, stroke: label.connectorColor, strokeOpacity: label.connectorOpacity, strokeWidth: label.connectorWidth }, `${label.key}-connector-a`)) : null), arcLabels.map((label) => label.connectorVisible ? (_jsx(Line, { x1: label.connectorBendX, x2: label.connectorEndX, y1: label.connectorBendY, y2: label.connectorEndY, stroke: label.connectorColor, strokeOpacity: label.connectorOpacity, strokeWidth: label.connectorWidth }, `${label.key}-connector-b`)) : null), canRenderText
+                                        ? arcLabels.map((label) => (_jsx(SvgText, { fill: resolvedTheme.text, fontSize: label.fontSize, fontWeight: "800", text: label.text, textAnchor: label.textAnchor, x: label.x, y: label.y + label.fontSize / 3, ...(resolvedTheme.typography.fontFamily
+                                                ? { fontFamily: resolvedTheme.typography.fontFamily }
+                                                : {}), children: label.text }, label.key)))
+                                        : null] })) : null] }), customCenterLabel ? (_jsx(View, { pointerEvents: "none", style: [
+                            styles.centerLabelOverlay,
+                            {
+                                height: Math.max(44, Math.min(76, radius * 0.82)),
+                                top: centerY - Math.max(22, Math.min(38, radius * 0.41)),
+                                width: props.width
+                            }
+                        ], children: customCenterLabel })) : null, isInteractionEnabled ? (_jsx(View, { accessible: false, collapsable: false, importantForAccessibility: "no", pointerEvents: "auto", style: styles.interactionOverlay, ...responderProps })) : null] }), legendVisible && legendItems.length > 0 ? (_jsx(View, { style: [
+                    styles.legend,
+                    {
+                        gap: legendConfig.itemGap ?? defaultPieLegendGap
+                    }
+                ], children: legendItems.map((item, index) => {
+                    const selected = selectedIndex === item.index;
+                    const renderedItem = legendConfig.renderItem?.({
+                        index,
+                        item,
+                        selected,
+                        theme: resolvedTheme
+                    });
+                    return (_jsx(View, { style: [
+                            styles.legendItem,
+                            {
+                                maxWidth: legendConfig.maxItemWidth ?? "48%"
+                            }
+                        ], children: renderedItem ?? (_jsxs(_Fragment, { children: [_jsx(View, { style: [
+                                        styles.legendSwatch,
+                                        { backgroundColor: item.color }
+                                    ] }), _jsx(Text, { numberOfLines: 1, style: [styles.legendText, { color: resolvedTheme.text }], children: item.label }), _jsx(Text, { numberOfLines: 1, style: [
+                                        styles.legendValue,
+                                        { color: resolvedTheme.mutedText }
+                                    ], children: item.percentageLabel })] })) }, item.key));
+                }) })) : null] }));
+};
+export const DonutChart = (props) => (_jsx(PieChart, { ...props, innerRadiusRatio: props.innerRadiusRatio ?? defaultDonutInnerRadiusRatio }));
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 8,
+        overflow: "hidden"
+    },
+    centerLabelOverlay: {
+        alignItems: "center",
+        justifyContent: "center",
+        left: 0,
+        position: "absolute"
+    },
+    plotArea: {
+        position: "relative"
+    },
+    legend: {
+        alignContent: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: defaultPieLegendGap,
+        justifyContent: "center",
+        paddingHorizontal: 8,
+        paddingTop: 4
+    },
+    legendItem: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 5,
+        maxWidth: "48%",
+        minHeight: 18
+    },
+    legendSwatch: {
+        borderRadius: 4,
+        height: 8,
+        width: 8
+    },
+    legendText: {
+        flexShrink: 1,
+        fontSize: 11,
+        fontWeight: "700"
+    },
+    legendValue: {
+        fontSize: 10,
+        fontWeight: "700"
+    },
+    interactionOverlay: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0
+    }
+});

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

@@ -0,0 +1,28 @@
+import type { PieChartProps } from "./types";
+export type PieChartDataTableRow<TData = unknown> = {
+    color?: string | undefined;
+    formattedValue: string;
+    index: number;
+    label: string;
+    percentage: number;
+    percentageLabel: string;
+    raw: TData;
+    value: number | null;
+};
+export type PieChartDataTable<TData = unknown> = {
+    rows: Array<PieChartDataTableRow<TData>>;
+    total: number;
+};
+type PieChartAccessibilityInput<TData extends Record<string, unknown>> = {
+    colorKey?: PieChartProps<TData>["colorKey"] | undefined;
+    colors?: PieChartProps<TData>["colors"] | undefined;
+    data: PieChartProps<TData>["data"];
+    formatPercentage?: PieChartProps<TData>["formatPercentage"] | undefined;
+    formatValue?: PieChartProps<TData>["formatValue"] | undefined;
+    labelKey?: PieChartProps<TData>["labelKey"] | undefined;
+    valueKey: PieChartProps<TData>["valueKey"];
+};
+export declare const getPieChartDataTable: <TData extends Record<string, unknown>>({ colorKey, colors, data, formatPercentage, formatValue, labelKey, valueKey }: PieChartAccessibilityInput<TData>) => PieChartDataTable<TData>;
+export declare const getPieChartAccessibilitySummary: <TData extends Record<string, unknown>>(input: PieChartAccessibilityInput<TData>) => string;
+export {};
+//# sourceMappingURL=accessibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/charts/pie/accessibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,oBAAoB,CAAC,KAAK,GAAG,OAAO,IAAI;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,KAAK,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,KAAK,GAAG,OAAO,IAAI;IAC/C,IAAI,EAAE,KAAK,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,0BAA0B,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvE,QAAQ,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IACxD,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,gBAAgB,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC;IACxE,WAAW,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC;IAC9D,QAAQ,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IACxD,QAAQ,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;CAC5C,CAAC;AA4BF,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,+EAQzE,0BAA0B,CAAC,KAAK,CAAC,KAAG,iBAAiB,CAAC,KAAK,CAoC7D,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,OAAO,0BAA0B,CAAC,KAAK,CAAC,WAiBzC,CAAC"}

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

@@ -0,0 +1,49 @@
+const defaultLabelKey = "name";
+const defaultColorKey = "color";
+const defaultFormatValue = (value) => String(value);
+const defaultFormatPercentage = (percentage) => `${Math.round(percentage * 100)}%`;
+const getStringValue = (value, fallback) => typeof value === "string" && value.length > 0 ? value : fallback;
+const getColorValue = (value, fallback) => typeof value === "string" && value.length > 0 ? value : fallback;
+const getPieValue = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0
+    ? value
+    : null;
+const getMaxRow = (rows) => rows.reduce((max, row) => typeof row.value === "number" && (!max || row.value > (max.value ?? 0))
+    ? row
+    : max, undefined);
+export const getPieChartDataTable = ({ colorKey, colors, data, formatPercentage = defaultFormatPercentage, formatValue = defaultFormatValue, labelKey, valueKey }) => {
+    const values = data.map((item) => getPieValue(item[valueKey]));
+    const total = values.reduce((sum, value) => (value === null ? sum : sum + value), 0);
+    return {
+        total,
+        rows: data.map((item, index) => {
+            const value = values[index] ?? null;
+            const percentage = value !== null && total > 0 ? value / total : 0;
+            const color = getColorValue(item[colorKey ?? defaultColorKey], colors?.[index]);
+            const row = {
+                formattedValue: value === null ? "No value" : formatValue(value),
+                index,
+                label: getStringValue(item[labelKey ?? defaultLabelKey], `Slice ${index + 1}`),
+                percentage,
+                percentageLabel: formatPercentage(percentage),
+                raw: item,
+                value
+            };
+            if (color !== undefined) {
+                row.color = color;
+            }
+            return row;
+        })
+    };
+};
+export const getPieChartAccessibilitySummary = (input) => {
+    const table = getPieChartDataTable(input);
+    const definedRows = table.rows.filter((row) => row.value !== null);
+    if (definedRows.length === 0) {
+        return "Pie chart with no defined slices.";
+    }
+    const maxRow = getMaxRow(definedRows);
+    const intro = `Pie chart with ${definedRows.length} ${definedRows.length === 1 ? "slice" : "slices"}. Total ${input.formatValue?.(table.total) ?? defaultFormatValue(table.total)}.`;
+    return maxRow
+        ? `${intro} Largest slice is ${maxRow.label} at ${maxRow.percentageLabel}.`
+        : intro;
+};

package/dist/v2/react-native/charts/pie/activeSlice.d.ts

@@ -0,0 +1,15 @@
+import type { PieChartActiveSliceConfig, PieChartProps } from "./types";
+export type ResolvedPieChartActiveSliceConfig = Required<PieChartActiveSliceConfig>;
+export declare const resolvePieChartActiveSliceConfig: ({ activeSlice, backgroundColor }: {
+    activeSlice: PieChartActiveSliceConfig | undefined;
+    backgroundColor: string;
+}) => ResolvedPieChartActiveSliceConfig;
+export declare const shouldReservePieChartActiveSliceGutter: <TData extends Record<string, unknown>>({ props, selectedIndex }: {
+    props: PieChartProps<TData>;
+    selectedIndex: number | undefined;
+}) => boolean;
+export declare const getPieChartActiveSliceGutter: ({ activeSlice, radius }: {
+    activeSlice: ResolvedPieChartActiveSliceConfig;
+    radius: number;
+}) => number;
+//# sourceMappingURL=activeSlice.d.ts.map

package/dist/v2/react-native/charts/pie/activeSlice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activeSlice.d.ts","sourceRoot":"","sources":["../../../src/charts/pie/activeSlice.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EAEzB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,iCAAiC,GAC3C,QAAQ,CAAC,yBAAyB,CAAC,CAAC;AAEtC,eAAO,MAAM,gCAAgC,GAAI,kCAG9C;IACD,WAAW,EAAE,yBAAyB,GAAG,SAAS,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;CACzB,KAAG,iCAOF,CAAC;AAgBH,eAAO,MAAM,sCAAsC,GACjD,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrC,0BAGC;IACD,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC,YAKqC,CAAC;AAEvC,eAAO,MAAM,4BAA4B,GAAI,yBAG1C;IACD,WAAW,EAAE,iCAAiC,CAAC;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB,WAME,CAAC"}

package/dist/v2/react-native/charts/pie/activeSlice.js

@@ -0,0 +1,26 @@
+export const resolvePieChartActiveSliceConfig = ({ activeSlice, backgroundColor }) => ({
+    activeOpacity: activeSlice?.activeOpacity ?? 1,
+    inactiveOpacity: activeSlice?.inactiveOpacity ?? 0.62,
+    activeOffset: activeSlice?.activeOffset ?? 5,
+    activeScale: activeSlice?.activeScale ?? 1.025,
+    strokeColor: activeSlice?.strokeColor ?? backgroundColor,
+    strokeWidth: activeSlice?.strokeWidth ?? 0
+});
+const hasTapInteraction = (interaction) => {
+    if (interaction === "tap") {
+        return true;
+    }
+    if (!interaction || interaction === "none") {
+        return false;
+    }
+    return interaction.mode === undefined || interaction.mode === "tap";
+};
+export const shouldReservePieChartActiveSliceGutter = ({ props, selectedIndex }) => props.activeSlice !== undefined ||
+    selectedIndex !== undefined ||
+    props.defaultSelectedIndex !== undefined ||
+    props.selectedIndex !== undefined ||
+    hasTapInteraction(props.interaction);
+export const getPieChartActiveSliceGutter = ({ activeSlice, radius }) => Math.ceil(activeSlice.activeOffset +
+    radius * Math.max(0, activeSlice.activeScale - 1) +
+    Math.max(0, activeSlice.strokeWidth) / 2 +
+    2);

package/dist/v2/react-native/charts/pie/arcLabels.d.ts

@@ -0,0 +1,32 @@
+import type { PieArcModel } from "../../../core/index";
+import type { ResolvedCartesianChartTheme } from "../../theme";
+import type { PieChartArcLabelModel, PieChartArcLabelsConfig, PieChartArcLabelRenderProps, PieChartLegendItem } from "./types";
+export type ResolvedPieChartArcLabelsConfig<TData = unknown> = {
+    connectorColor: string | undefined;
+    connectorLength: number;
+    connectorLines: boolean;
+    connectorOpacity: number;
+    connectorWidth: number;
+    fontSize: number;
+    formatLabel: ((props: PieChartArcLabelRenderProps<TData>) => string | null) | undefined;
+    minPercentage: number;
+    offset: number;
+    reservedWidth: number;
+    visible: boolean;
+};
+export declare const getPieChartArcLabelsVisible: <TData = unknown>(arcLabels: boolean | PieChartArcLabelsConfig<TData> | undefined) => boolean;
+export declare const resolvePieChartArcLabelsConfig: <TData = unknown>(arcLabels: boolean | PieChartArcLabelsConfig<TData> | undefined) => ResolvedPieChartArcLabelsConfig<TData>;
+export declare const getPieChartArcLabelHorizontalReserve: <TData>(config: ResolvedPieChartArcLabelsConfig<TData>) => number;
+export declare const buildPieChartArcLabels: <TData>({ arcs, chartHeight, chartWidth, centerX, centerY, config, legendItems, radius, selectedIndex, theme }: {
+    arcs: Array<PieArcModel<TData>>;
+    chartHeight: number;
+    chartWidth: number;
+    centerX: number;
+    centerY: number;
+    config: ResolvedPieChartArcLabelsConfig<TData>;
+    legendItems: Array<PieChartLegendItem<TData>>;
+    radius: number;
+    selectedIndex: number | undefined;
+    theme: ResolvedCartesianChartTheme;
+}) => Array<PieChartArcLabelModel<TData>>;
+//# sourceMappingURL=arcLabels.d.ts.map

package/dist/v2/react-native/charts/pie/arcLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arcLabels.d.ts","sourceRoot":"","sources":["../../../src/charts/pie/arcLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EACV,qBAAqB,EACrB,uBAAuB,EACvB,2BAA2B,EAC3B,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAajB,MAAM,MAAM,+BAA+B,CAAC,KAAK,GAAG,OAAO,IAAI;IAC7D,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EACP,CAAC,CAAC,KAAK,EAAE,2BAA2B,CAAC,KAAK,CAAC,KAAK,MAAM,GAAG,IAAI,CAAC,GAC9D,SAAS,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,KAAK,GAAG,OAAO,EACzD,WAAW,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC,GAAG,SAAS,YAWhE,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,KAAK,GAAG,OAAO,EAC5D,WAAW,OAAO,GAAG,uBAAuB,CAAC,KAAK,CAAC,GAAG,SAAS,KAC9D,+BAA+B,CAAC,KAAK,CA0CvC,CAAC;AAqBF,eAAO,MAAM,oCAAoC,GAAI,KAAK,EACxD,QAAQ,+BAA+B,CAAC,KAAK,CAAC,WACJ,CAAC;AAqD7C,eAAO,MAAM,sBAAsB,GAAI,KAAK,EAAE,wGAW3C;IACD,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAC/C,WAAW,EAAE,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,KAAK,EAAE,2BAA2B,CAAC;CACpC,KAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CA2GrC,CAAC"}

package/dist/v2/react-native/charts/pie/arcLabels.js

@@ -0,0 +1,191 @@
+const defaultArcLabelFontSize = 11;
+const defaultArcLabelMinPercentage = 0.07;
+const defaultArcLabelOffset = 10;
+const defaultConnectorLength = 12;
+const defaultConnectorOpacity = 0.84;
+const defaultConnectorWidth = 1.35;
+const defaultReservedWidth = 86;
+const minConnectorLabelGap = 6;
+const labelEdgePadding = 10;
+const estimatedCharacterWidthRatio = 0.78;
+export const getPieChartArcLabelsVisible = (arcLabels) => {
+    if (arcLabels === undefined || arcLabels === false) {
+        return false;
+    }
+    if (typeof arcLabels === "object") {
+        return arcLabels.visible !== false;
+    }
+    return true;
+};
+export const resolvePieChartArcLabelsConfig = (arcLabels) => {
+    const config = typeof arcLabels === "object" ? arcLabels : {};
+    return {
+        connectorColor: config.connectorColor,
+        connectorLength: typeof config.connectorLength === "number" &&
+            Number.isFinite(config.connectorLength)
+            ? Math.max(0, config.connectorLength)
+            : defaultConnectorLength,
+        connectorLines: config.connectorLines !== false,
+        connectorOpacity: typeof config.connectorOpacity === "number" &&
+            Number.isFinite(config.connectorOpacity)
+            ? clamp(config.connectorOpacity, 0, 1)
+            : defaultConnectorOpacity,
+        connectorWidth: typeof config.connectorWidth === "number" &&
+            Number.isFinite(config.connectorWidth)
+            ? Math.max(0, config.connectorWidth)
+            : defaultConnectorWidth,
+        fontSize: typeof config.fontSize === "number" && Number.isFinite(config.fontSize)
+            ? Math.max(8, config.fontSize)
+            : defaultArcLabelFontSize,
+        formatLabel: config.formatLabel,
+        minPercentage: typeof config.minPercentage === "number" &&
+            Number.isFinite(config.minPercentage)
+            ? Math.max(0, config.minPercentage)
+            : defaultArcLabelMinPercentage,
+        offset: typeof config.offset === "number" && Number.isFinite(config.offset)
+            ? Math.max(0, config.offset)
+            : defaultArcLabelOffset,
+        reservedWidth: typeof config.reservedWidth === "number" &&
+            Number.isFinite(config.reservedWidth)
+            ? Math.max(0, config.reservedWidth)
+            : defaultReservedWidth,
+        visible: getPieChartArcLabelsVisible(arcLabels)
+    };
+};
+const getMidAngle = (arc) => arc.startAngle + (arc.endAngle - arc.startAngle) / 2;
+const clamp = (value, min, max) => {
+    if (max < min) {
+        return min;
+    }
+    return Math.min(Math.max(value, min), max);
+};
+const estimateLabelWidth = ({ fontSize, text }) => text.length * fontSize * estimatedCharacterWidthRatio;
+export const getPieChartArcLabelHorizontalReserve = (config) => config.reservedWidth + labelEdgePadding;
+const spreadArcLabelsOnSide = ({ chartHeight, labels, minGap }) => {
+    const minY = labelEdgePadding + minGap / 2;
+    const maxY = Math.max(minY, chartHeight - labelEdgePadding);
+    const sorted = [...labels].sort((a, b) => a.y - b.y);
+    let cursorY = minY;
+    sorted.forEach((label) => {
+        const y = clamp(Math.max(label.y, cursorY), minY, maxY);
+        label.y = y;
+        label.connectorBendY = y;
+        label.connectorEndY = y;
+        cursorY = y + minGap;
+    });
+    for (let index = sorted.length - 2; index >= 0; index -= 1) {
+        const label = sorted[index];
+        const nextLabel = sorted[index + 1];
+        if (!label || !nextLabel) {
+            continue;
+        }
+        const maxAllowedY = nextLabel.y - minGap;
+        if (label.y > maxAllowedY) {
+            label.y = clamp(maxAllowedY, minY, maxY);
+            label.connectorBendY = label.y;
+            label.connectorEndY = label.y;
+        }
+    }
+};
+const alignArcLabelConnectors = (labels) => {
+    labels.forEach((label) => {
+        label.connectorBendX =
+            label.connectorStartX + (label.connectorEndX - label.connectorStartX) / 2;
+        label.connectorBendY =
+            label.connectorStartY + (label.connectorEndY - label.connectorStartY) / 2;
+    });
+};
+export const buildPieChartArcLabels = ({ arcs, chartHeight, chartWidth, centerX, centerY, config, legendItems, radius, selectedIndex, theme }) => {
+    if (!config.visible) {
+        return [];
+    }
+    const legendByIndex = new Map(legendItems.map((item) => [item.index, item]));
+    const labels = arcs.flatMap((arc) => {
+        const legendItem = legendByIndex.get(arc.index);
+        if (!arc.defined || !legendItem || arc.percentage < config.minPercentage) {
+            return [];
+        }
+        const angle = getMidAngle(arc);
+        const side = Math.cos(angle) >= 0 ? 1 : -1;
+        const startRadius = radius;
+        const bendRadius = radius + config.offset;
+        const preferredLabelX = centerX + side * (radius + config.offset + config.connectorLength + 2);
+        const labelY = centerY + bendRadius * Math.sin(angle);
+        const renderProps = {
+            arc,
+            color: legendItem.color,
+            index: legendItem.index,
+            label: legendItem.label,
+            percentageLabel: legendItem.percentageLabel,
+            selected: selectedIndex === arc.index,
+            theme,
+            valueLabel: legendItem.valueLabel
+        };
+        const text = config.formatLabel?.(renderProps) ??
+            `${legendItem.label} ${legendItem.percentageLabel}`;
+        if (text.length === 0) {
+            return [];
+        }
+        const labelWidth = estimateLabelWidth({ fontSize: config.fontSize, text });
+        const outsideRightX = centerX +
+            radius +
+            config.offset +
+            config.connectorLength +
+            minConnectorLabelGap;
+        const outsideLeftX = centerX -
+            radius -
+            config.offset -
+            config.connectorLength -
+            minConnectorLabelGap;
+        const rightEdgeLabelX = chartWidth - labelEdgePadding - labelWidth;
+        const leftEdgeLabelX = labelEdgePadding + labelWidth;
+        const labelX = side > 0
+            ? outsideRightX <= rightEdgeLabelX
+                ? clamp(preferredLabelX, outsideRightX, rightEdgeLabelX)
+                : rightEdgeLabelX
+            : leftEdgeLabelX <= outsideLeftX
+                ? clamp(preferredLabelX, leftEdgeLabelX, outsideLeftX)
+                : leftEdgeLabelX;
+        const rawConnectorEndX = labelX - side * 4;
+        const outerSliceEdgeX = centerX + side * radius;
+        const connectorEndX = side > 0
+            ? Math.max(rawConnectorEndX, outerSliceEdgeX + 1)
+            : Math.min(rawConnectorEndX, outerSliceEdgeX - 1);
+        return [
+            {
+                arc,
+                color: legendItem.color,
+                connectorColor: config.connectorColor ?? theme.mutedText,
+                connectorBendX: centerX + side * bendRadius * Math.cos(angle),
+                connectorBendY: centerY + bendRadius * Math.sin(angle),
+                connectorEndX,
+                connectorEndY: labelY,
+                connectorOpacity: config.connectorOpacity,
+                connectorStartX: centerX + startRadius * Math.cos(angle),
+                connectorStartY: centerY + startRadius * Math.sin(angle),
+                connectorVisible: config.connectorLines,
+                connectorWidth: config.connectorWidth,
+                fontSize: config.fontSize,
+                index: arc.index,
+                key: `${arc.index}-${arc.label}-arc-label`,
+                text,
+                textAnchor: side > 0 ? "start" : "end",
+                x: labelX,
+                y: labelY
+            }
+        ];
+    });
+    const minGap = config.fontSize + 5;
+    spreadArcLabelsOnSide({
+        chartHeight,
+        labels: labels.filter((label) => label.textAnchor === "start"),
+        minGap
+    });
+    spreadArcLabelsOnSide({
+        chartHeight,
+        labels: labels.filter((label) => label.textAnchor === "end"),
+        minGap
+    });
+    alignArcLabelConnectors(labels);
+    return labels;
+};

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

@@ -0,0 +1,26 @@
+import type { PieArcModel } from "../../../core/index";
+import type { PieChartInteraction, PieChartInteractionConfig, PieChartSelectEvent } from "./types";
+type PieChartPoint = {
+    locationX: number;
+    locationY: number;
+};
+type PieChartHitTestOptions<TData = unknown> = PieChartPoint & {
+    arcs: Array<PieArcModel<TData>>;
+    centerX: number;
+    centerY: number;
+    innerRadius: number;
+    radius: number;
+};
+export type ResolvedPieChartInteractionConfig<TData = unknown> = {
+    mode: "none" | "tap";
+    deselectOnOutsidePress: boolean;
+    onDeselect: PieChartInteractionConfig<TData>["onDeselect"] | undefined;
+    onSelect: PieChartInteractionConfig<TData>["onSelect"] | undefined;
+};
+export declare const getPieChartInteractionConfig: <TData>(interaction?: PieChartInteraction<TData> | undefined) => ResolvedPieChartInteractionConfig<TData>;
+export declare const isPieChartInteractionEnabled: <TData>(config: ResolvedPieChartInteractionConfig<TData>) => boolean;
+export declare const normalizePieChartSelectedIndex: (selectedIndex: number | undefined) => number | undefined;
+export declare const getPieChartSliceAtPoint: <TData>({ arcs, centerX, centerY, innerRadius, locationX, locationY, radius }: PieChartHitTestOptions<TData>) => PieArcModel<TData> | undefined;
+export declare const buildPieChartSelectEvent: <TData>(arc: PieArcModel<TData> | undefined) => PieChartSelectEvent<TData> | undefined;
+export {};
+//# sourceMappingURL=interaction.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interaction.d.ts","sourceRoot":"","sources":["../../../src/charts/pie/interaction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EACV,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAEjB,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,sBAAsB,CAAC,KAAK,GAAG,OAAO,IAAI,aAAa,GAAG;IAC7D,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iCAAiC,CAAC,KAAK,GAAG,OAAO,IAAI;IAC/D,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,yBAAyB,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACvE,QAAQ,EAAE,yBAAyB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CACpE,CAAC;AAkBF,eAAO,MAAM,4BAA4B,GAAI,KAAK,EAChD,cAAc,mBAAmB,CAAC,KAAK,CAAC,GAAG,SAAS,KACnD,iCAAiC,CAAC,KAAK,CAyBzC,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,KAAK,EAChD,QAAQ,iCAAiC,CAAC,KAAK,CAAC,YACxB,CAAC;AAE3B,eAAO,MAAM,8BAA8B,GACzC,eAAe,MAAM,GAAG,SAAS,uBAIpB,CAAC;AAEhB,eAAO,MAAM,uBAAuB,GAAI,KAAK,EAAE,uEAQ5C,sBAAsB,CAAC,KAAK,CAAC,mCAuB/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,KAAK,EAC5C,KAAK,WAAW,CAAC,KAAK,CAAC,GAAG,SAAS,KAClC,mBAAmB,CAAC,KAAK,CAAC,GAAG,SAa/B,CAAC"}