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

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

@@ -0,0 +1,165 @@
+import type { ReactNode } from "react";
+import type { ViewStyle } from "react-native";
+import type { PieArcModel } from "../../../core/index";
+import type { CartesianChartPresetValue, CartesianChartTheme, ResolvedCartesianChartTheme } from "../../theme";
+import type { LineChartRenderer } from "../line/types";
+export type PieChartRenderer = LineChartRenderer;
+export type PieChartDeselectEvent = {
+    reason: "outsidePress" | "programmatic";
+};
+export type PieChartSelectEvent<TData = unknown> = {
+    index: number;
+    label: string;
+    value: number | null;
+    percentage: number;
+    color?: string;
+    raw?: TData;
+};
+export type PieChartInteractionMode = "none" | "tap";
+export type PieChartInteractionConfig<TData = unknown> = {
+    mode?: PieChartInteractionMode;
+    deselectOnOutsidePress?: boolean;
+    onDeselect?: (event: PieChartDeselectEvent) => void;
+    onSelect?: (event: PieChartSelectEvent<TData>) => void;
+};
+export type PieChartInteraction<TData = unknown> = PieChartInteractionMode | PieChartInteractionConfig<TData>;
+export type PieChartActiveSliceConfig = {
+    strokeColor?: string;
+    strokeWidth?: number;
+    activeOpacity?: number;
+    inactiveOpacity?: number;
+    activeOffset?: number;
+    activeScale?: number;
+};
+export type PieChartSliceSeparatorConfig = {
+    visible?: boolean;
+    color?: string;
+    opacity?: number;
+    width?: number;
+};
+export type ResolvedPieChartSliceSeparatorConfig = {
+    visible: boolean;
+    color: string;
+    opacity: number;
+    width: number;
+};
+export type PieChartSelectionAnimationConfig = {
+    duration?: number;
+};
+export type PieChartCenterLabelRenderProps<TData = unknown> = {
+    total: number;
+    arcs: Array<PieArcModel<TData>>;
+    theme: ResolvedCartesianChartTheme;
+    selectedArc?: PieArcModel<TData>;
+    selectedIndex?: number;
+};
+export type PieChartLegendRenderProps<TData = unknown> = {
+    index: number;
+    item: PieChartLegendItem<TData>;
+    selected: boolean;
+    theme: ResolvedCartesianChartTheme;
+};
+export type PieChartArcLabelRenderProps<TData = unknown> = {
+    arc: PieArcModel<TData>;
+    color: string;
+    index: number;
+    label: string;
+    percentageLabel: string;
+    selected: boolean;
+    theme: ResolvedCartesianChartTheme;
+    valueLabel: string;
+};
+export type PieChartArcLabelsConfig<TData = unknown> = {
+    visible?: boolean;
+    connectorColor?: string;
+    connectorLines?: boolean;
+    connectorLength?: number;
+    connectorOpacity?: number;
+    connectorWidth?: number;
+    fontSize?: number;
+    minPercentage?: number;
+    offset?: number;
+    reservedWidth?: number;
+    formatLabel?: (props: PieChartArcLabelRenderProps<TData>) => string | null;
+};
+export type PieChartLegendConfig<TData = unknown> = {
+    visible?: boolean;
+    reservedHeight?: number;
+    itemGap?: number;
+    maxItemWidth?: ViewStyle["maxWidth"];
+    renderItem?: (props: PieChartLegendRenderProps<TData>) => ReactNode;
+};
+export type PieChartProps<TData extends Record<string, unknown>> = {
+    data: TData[];
+    valueKey: keyof TData & string;
+    labelKey?: keyof TData & string;
+    colorKey?: keyof TData & string;
+    colors?: string[];
+    width: number;
+    height: number;
+    theme?: "light" | "dark" | "system" | CartesianChartTheme;
+    preset?: CartesianChartPresetValue;
+    innerRadius?: number;
+    innerRadiusRatio?: number;
+    legend?: boolean | PieChartLegendConfig<TData>;
+    arcLabels?: boolean | PieChartArcLabelsConfig<TData>;
+    sliceSeparator?: boolean | PieChartSliceSeparatorConfig;
+    selectedIndex?: number;
+    defaultSelectedIndex?: number;
+    activeSlice?: PieChartActiveSliceConfig;
+    selectionAnimation?: boolean | PieChartSelectionAnimationConfig;
+    interaction?: PieChartInteraction<TData>;
+    centerLabel?: string | ReactNode | ((props: PieChartCenterLabelRenderProps<TData>) => ReactNode);
+    renderer?: PieChartRenderer;
+    accessibilityLabel?: string;
+    id?: string;
+    testID?: string;
+    formatValue?: (value: number) => string;
+    formatPercentage?: (percentage: number) => string;
+};
+export type PieChartLegendItem<TData = unknown> = {
+    index: number;
+    key: string;
+    label: string;
+    valueLabel: string;
+    percentageLabel: string;
+    color: string;
+    arc: PieArcModel<TData>;
+};
+export type PieChartArcLabelModel<TData = unknown> = {
+    index: number;
+    key: string;
+    text: string;
+    color: string;
+    fontSize: number;
+    textAnchor: "start" | "end";
+    x: number;
+    y: number;
+    connectorStartX: number;
+    connectorStartY: number;
+    connectorColor: string;
+    connectorBendX: number;
+    connectorBendY: number;
+    connectorEndX: number;
+    connectorEndY: number;
+    connectorOpacity: number;
+    connectorVisible: boolean;
+    connectorWidth: number;
+    arc: PieArcModel<TData>;
+};
+export type PieChartModel<TData = unknown> = {
+    arcLabels: Array<PieChartArcLabelModel<TData>>;
+    arcLabelsVisible: boolean;
+    arcs: Array<PieArcModel<TData>>;
+    centerX: number;
+    centerY: number;
+    chartHeight: number;
+    innerRadius: number;
+    legendItems: Array<PieChartLegendItem<TData>>;
+    legendVisible: boolean;
+    radius: number;
+    resolvedTheme: ResolvedCartesianChartTheme;
+    sliceSeparator: ResolvedPieChartSliceSeparatorConfig;
+    total: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/pie/types.ts"],"names":[],"mappings":"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"}

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

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

package/dist/v2/react-native/charts/progress/ProgressChart.d.ts

@@ -0,0 +1,7 @@
+import type { ProgressChartProps, ProgressRingDatum, ProgressRingProps } from "./types";
+export type * from "./types";
+export { getProgressChartAccessibilitySummary, getProgressChartDataTable } from "./accessibility";
+export type { ProgressChartDataTable, ProgressChartDataTableRow } from "./accessibility";
+export declare const ProgressChart: <TData extends Record<string, unknown> = ProgressRingDatum>(props: ProgressChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressRing: ({ color, label, value, ...props }: ProgressRingProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProgressChart.d.ts.map

package/dist/v2/react-native/charts/progress/ProgressChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressChart.d.ts","sourceRoot":"","sources":["../../../src/charts/progress/ProgressChart.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EACL,oCAAoC,EACpC,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,sBAAsB,EACtB,yBAAyB,EAC1B,MAAM,iBAAiB,CAAC;AAWzB,eAAO,MAAM,aAAa,GACxB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,iBAAiB,EAEzD,OAAO,kBAAkB,CAAC,KAAK,CAAC,4CAyKjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,mCAK1B,iBAAiB,4CAiBnB,CAAC"}

package/dist/v2/react-native/charts/progress/ProgressChart.js

@@ -0,0 +1,111 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useChartKitTheme } from "../../theme";
+import { getLineChartRenderer as getProgressChartRenderer } from "../line/renderer";
+import { getProgressChartAccessibilitySummary } from "./accessibility";
+import { getAnimatedProgressRings, getAverageProgress, getProgressChartAnimationTargetKey, useProgressChartAnimation } from "./animation";
+import { buildProgressChartModel } from "./model";
+export { getProgressChartAccessibilitySummary, getProgressChartDataTable } from "./accessibility";
+const defaultStrokeLinecap = "round";
+const RendererLayer = ({ children }) => _jsx(_Fragment, { children: children });
+export const ProgressChart = (props) => {
+    const chartKitTheme = useChartKitTheme();
+    const model = useMemo(() => buildProgressChartModel({ chartKitTheme, props }), [chartKitTheme, props]);
+    const { average, centerX, centerY, chartHeight, legendItems, legendVisible, resolvedTheme, rings } = model;
+    const animationTargetKey = useMemo(() => getProgressChartAnimationTargetKey(rings), [rings]);
+    const progressAnimation = useProgressChartAnimation({
+        animation: props.animation,
+        targetKey: animationTargetKey
+    });
+    const { progress: animationProgress, stagger: animationStagger } = progressAnimation;
+    const animatedRings = useMemo(() => getAnimatedProgressRings({
+        centerX,
+        centerY,
+        progress: animationProgress,
+        rings,
+        stagger: animationStagger
+    }), [animationProgress, animationStagger, centerX, centerY, rings]);
+    const displayRings = props.animation ? animatedRings : rings;
+    const animatedAverage = useMemo(() => getAverageProgress(displayRings), [displayRings]);
+    const strokeLinecap = props.strokeLinecap ?? defaultStrokeLinecap;
+    const centerLabel = typeof props.centerLabel === "function"
+        ? props.centerLabel({
+            average: props.animation ? animatedAverage : average,
+            rings: displayRings,
+            theme: resolvedTheme
+        })
+        : props.centerLabel;
+    const accessibilityLabel = props.accessibilityLabel ??
+        getProgressChartAccessibilitySummary({
+            colorKey: props.colorKey,
+            colors: props.colors,
+            data: props.data,
+            formatPercentage: props.formatPercentage,
+            labelKey: props.labelKey,
+            labels: props.labels,
+            valueKey: props.valueKey
+        });
+    const renderer = getProgressChartRenderer(props.renderer ?? chartKitTheme.renderer);
+    const Layer = renderer.Layer ?? RendererLayer;
+    const Path = renderer.Path;
+    const Surface = renderer.Surface;
+    const SvgText = renderer.Text;
+    const canRenderText = renderer.capabilities?.text !== false;
+    return (_jsxs(View, { accessible: true, accessibilityLabel: accessibilityLabel, accessibilityRole: "image", style: [
+            styles.container,
+            {
+                backgroundColor: resolvedTheme.background,
+                height: props.height,
+                width: props.width
+            }
+        ], testID: props.testID, children: [_jsxs(Surface, { width: props.width, height: chartHeight, children: [_jsx(Layer, { name: "background", children: rings.map((ring) => ring.backgroundPath.length > 0 ? (_jsx(Path, { d: ring.backgroundPath, fill: "none", stroke: resolvedTheme.grid, strokeLinecap: strokeLinecap, strokeWidth: ring.strokeWidth, testID: `${props.testID ?? "progress-chart"}-background.${ring.index}` }, `progress-background-${ring.index}`)) : null) }), _jsx(Layer, { name: "data", children: displayRings.map((ring) => ring.defined ? (_jsx(Path, { d: ring.path, fill: "none", stroke: ring.color ?? resolvedTheme.text, strokeLinecap: strokeLinecap, strokeLinejoin: "round", strokeWidth: ring.strokeWidth, testID: `${props.testID ?? "progress-chart"}-ring.${ring.index}` }, `progress-ring-${ring.index}`)) : null) }), typeof centerLabel === "string" &&
+                        centerLabel.length > 0 &&
+                        canRenderText ? (_jsx(Layer, { name: "overlays", children: _jsx(SvgText, { fill: resolvedTheme.text, fontSize: 18, fontWeight: "800", text: centerLabel, textAnchor: "middle", x: centerX, y: centerY + 6, ...(resolvedTheme.typography.fontFamily
+                                ? { fontFamily: resolvedTheme.typography.fontFamily }
+                                : {}), children: centerLabel }) })) : null] }), legendVisible && legendItems.length > 0 ? (_jsx(View, { style: styles.legend, children: legendItems.map((item) => (_jsxs(View, { style: styles.legendItem, 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 ProgressRing = ({ color, label, value, ...props }) => {
+    const row = {
+        value,
+        ...(label !== undefined ? { label } : {}),
+        ...(color !== undefined ? { color } : {})
+    };
+    return (_jsx(ProgressChart, { ...props, data: [row], labelKey: "label", valueKey: "value", colorKey: "color", legend: props.legend ?? false }));
+};
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 8,
+        overflow: "hidden"
+    },
+    legend: {
+        alignContent: "center",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8,
+        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"
+    }
+});

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

@@ -0,0 +1,26 @@
+import type { ProgressChartProps } from "./types";
+export type ProgressChartDataTableRow<TData = unknown> = {
+    color?: string | undefined;
+    formattedValue: string;
+    index: number;
+    label: string;
+    raw?: TData | undefined;
+    value: number | null;
+};
+export type ProgressChartDataTable<TData = unknown> = {
+    average: number;
+    rows: Array<ProgressChartDataTableRow<TData>>;
+};
+type ProgressChartAccessibilityInput<TData extends Record<string, unknown>> = {
+    colorKey?: ProgressChartProps<TData>["colorKey"] | undefined;
+    colors?: ProgressChartProps<TData>["colors"] | undefined;
+    data: ProgressChartProps<TData>["data"];
+    formatPercentage?: ProgressChartProps<TData>["formatPercentage"] | undefined;
+    labelKey?: ProgressChartProps<TData>["labelKey"] | undefined;
+    labels?: ProgressChartProps<TData>["labels"] | undefined;
+    valueKey?: ProgressChartProps<TData>["valueKey"] | undefined;
+};
+export declare const getProgressChartDataTable: <TData extends Record<string, unknown>>({ colorKey, colors, data, formatPercentage, labelKey, labels, valueKey }: ProgressChartAccessibilityInput<TData>) => ProgressChartDataTable<TData>;
+export declare const getProgressChartAccessibilitySummary: <TData extends Record<string, unknown>>(input: ProgressChartAccessibilityInput<TData>) => string;
+export {};
+//# sourceMappingURL=accessibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/charts/progress/accessibility.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,MAAM,yBAAyB,CAAC,KAAK,GAAG,OAAO,IAAI;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,KAAK,GAAG,OAAO,IAAI;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC;CAC/C,CAAC;AAEF,KAAK,+BAA+B,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IAC5E,QAAQ,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAC7D,MAAM,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACzD,IAAI,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,GAAG,SAAS,CAAC;IAC7E,QAAQ,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAC7D,MAAM,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IACzD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CAC9D,CAAC;AA+BF,eAAO,MAAM,yBAAyB,GACpC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACrC,0EAQC,+BAA+B,CAAC,KAAK,CAAC,KAAG,sBAAsB,CAAC,KAAK,CA+DvE,CAAC;AAEF,eAAO,MAAM,oCAAoC,GAC/C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,OAAO,+BAA+B,CAAC,KAAK,CAAC,WAsB9C,CAAC"}

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

@@ -0,0 +1,71 @@
+const defaultValueKey = "value";
+const defaultLabelKey = "label";
+const defaultColorKey = "color";
+const defaultFormatPercentage = (value) => `${Math.round(value * 100)}%`;
+const isObjectRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const isObjectRowData = (data) => Array.isArray(data) && data.some(isObjectRecord);
+const getStringValue = (value, fallback) => typeof value === "string" && value.length > 0 ? value : fallback;
+const getProgressValue = (value) => {
+    if (typeof value === "number" && Number.isFinite(value)) {
+        return value;
+    }
+    return null;
+};
+const clampProgress = (value) => Math.min(Math.max(value, 0), 1);
+const getLegacyRows = (data) => Array.isArray(data) ? { data, labels: undefined, colors: undefined } : data;
+export const getProgressChartDataTable = ({ colorKey, colors, data, formatPercentage = defaultFormatPercentage, labelKey, labels, valueKey }) => {
+    const rows = isObjectRowData(data)
+        ? data.map((item, index) => {
+            const value = getProgressValue(item[valueKey ?? defaultValueKey]);
+            const color = getStringValue(item[colorKey ?? defaultColorKey], colors?.[index]);
+            const row = {
+                formattedValue: value === null
+                    ? "No value"
+                    : formatPercentage(clampProgress(value)),
+                index,
+                label: getStringValue(item[labelKey ?? defaultLabelKey], labels?.[index]) ?? `Ring ${index + 1}`,
+                raw: item,
+                value
+            };
+            if (color !== undefined) {
+                row.color = color;
+            }
+            return row;
+        })
+        : getLegacyRows(data).data.map((rawValue, index) => {
+            const value = getProgressValue(rawValue);
+            const color = getLegacyRows(data).colors?.[index] ?? colors?.[index];
+            const row = {
+                formattedValue: value === null
+                    ? "No value"
+                    : formatPercentage(clampProgress(value)),
+                index,
+                label: getLegacyRows(data).labels?.[index] ??
+                    labels?.[index] ??
+                    `Ring ${index + 1}`,
+                value
+            };
+            if (color !== undefined) {
+                row.color = color;
+            }
+            return row;
+        });
+    const definedRows = rows.filter((row) => row.value !== null);
+    const average = definedRows.length > 0
+        ? definedRows.reduce((sum, row) => sum + clampProgress(row.value ?? 0), 0) / definedRows.length
+        : 0;
+    return { average, rows };
+};
+export const getProgressChartAccessibilitySummary = (input) => {
+    const table = getProgressChartDataTable(input);
+    if (table.rows.length === 0) {
+        return "Progress chart with no rings.";
+    }
+    const definedRows = table.rows.filter((row) => row.value !== null);
+    if (definedRows.length === 0) {
+        return `Progress chart with ${table.rows.length} rings and no defined values.`;
+    }
+    const currentRow = definedRows[definedRows.length - 1];
+    const formatPercentage = input.formatPercentage ?? defaultFormatPercentage;
+    return `Progress chart with ${table.rows.length} rings. Average progress ${formatPercentage(table.average)}. Current ring ${currentRow?.label ?? "Ring"} is ${currentRow?.formattedValue ?? "No value"}.`;
+};

package/dist/v2/react-native/charts/progress/animation.d.ts

@@ -0,0 +1,36 @@
+import type { ProgressRingModel } from "../../../core/index";
+import type { ProgressChartAnimationConfig } from "./types";
+export type ResolvedProgressChartAnimationConfig = {
+    duration: number;
+    enabled: boolean;
+    stagger: number;
+};
+export declare const resolveProgressChartAnimationConfig: (animation: boolean | ProgressChartAnimationConfig | undefined) => ResolvedProgressChartAnimationConfig;
+export declare const getProgressRingAnimationProgress: ({ index, progress, stagger }: {
+    index: number;
+    progress: number;
+    stagger: number;
+}) => number;
+export declare const getAnimatedProgressRing: ({ centerX, centerY, progress, ring }: {
+    centerX: number;
+    centerY: number;
+    progress: number;
+    ring: ProgressRingModel;
+}) => ProgressRingModel;
+export declare const getAnimatedProgressRings: ({ centerX, centerY, progress, rings, stagger }: {
+    centerX: number;
+    centerY: number;
+    progress: number;
+    rings: ProgressRingModel[];
+    stagger: number;
+}) => ProgressRingModel[];
+export declare const getAverageProgress: (rings: ProgressRingModel[]) => number;
+export declare const getProgressChartAnimationTargetKey: (rings: ProgressRingModel[]) => string;
+export declare const useProgressChartAnimation: ({ animation, targetKey }: {
+    animation: boolean | ProgressChartAnimationConfig | undefined;
+    targetKey: string;
+}) => {
+    progress: number;
+    stagger: number;
+};
+//# sourceMappingURL=animation.d.ts.map

package/dist/v2/react-native/charts/progress/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../src/charts/progress/animation.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAK5D,MAAM,MAAM,oCAAoC,GAAG;IACjD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mCAAmC,GAC9C,WAAW,OAAO,GAAG,4BAA4B,GAAG,SAAS,KAC5D,oCAgBF,CAAC;AAUF,eAAO,MAAM,gCAAgC,GAAI,8BAI9C;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB,WAIA,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,sCAKrC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,iBAAiB,CAAC;CACzB,KAAG,iBAkCH,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,gDAMtC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;CACjB,wBAQE,CAAC;AAEJ,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,EAAE,WAO5D,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAC7C,OAAO,iBAAiB,EAAE,WAId,CAAC;AAEf,eAAO,MAAM,yBAAyB,GAAI,0BAGvC;IACD,SAAS,EAAE,OAAO,GAAG,4BAA4B,GAAG,SAAS,CAAC;IAC9D,SAAS,EAAE,MAAM,CAAC;CACnB;;;CAyCA,CAAC"}

package/dist/v2/react-native/charts/progress/animation.js

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useState } from "react";
+import { buildProgressRings } from "../../../core/index";
+const defaultProgressAnimationDuration = 1200;
+const defaultProgressAnimationStagger = 0.08;
+export const resolveProgressChartAnimationConfig = (animation) => {
+    if (!animation) {
+        return { duration: 0, enabled: false, stagger: 0 };
+    }
+    const config = typeof animation === "object" ? animation : {};
+    const duration = typeof config.duration === "number" && Number.isFinite(config.duration)
+        ? Math.max(0, config.duration)
+        : defaultProgressAnimationDuration;
+    const stagger = typeof config.stagger === "number" && Number.isFinite(config.stagger)
+        ? Math.max(0, Math.min(0.5, config.stagger))
+        : defaultProgressAnimationStagger;
+    return { duration, enabled: true, stagger };
+};
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+const easeOutCubic = (progress) => {
+    const clampedProgress = clamp01(progress);
+    return 1 - Math.pow(1 - clampedProgress, 3);
+};
+export const getProgressRingAnimationProgress = ({ index, progress, stagger }) => {
+    const delay = Math.min(0.92, index * stagger);
+    return easeOutCubic((progress - delay) / Math.max(0.01, 1 - delay));
+};
+export const getAnimatedProgressRing = ({ centerX, centerY, progress, ring }) => {
+    if (!ring.defined || progress >= 0.999) {
+        return ring;
+    }
+    const animatedValue = ring.clampedValue * clamp01(progress);
+    const animatedInput = {
+        defined: ring.defined,
+        index: ring.index,
+        value: animatedValue,
+        ...(ring.color !== undefined ? { color: ring.color } : {}),
+        ...(ring.label !== undefined ? { label: ring.label } : {})
+    };
+    const animatedRing = buildProgressRings({
+        centerX,
+        centerY,
+        maxRadius: ring.radius,
+        ringGap: 0,
+        rings: [animatedInput],
+        startAngle: ring.startAngle,
+        strokeWidth: ring.strokeWidth
+    })[0];
+    if (!animatedRing) {
+        return ring;
+    }
+    return {
+        ...ring,
+        clampedValue: animatedRing.clampedValue,
+        defined: animatedRing.defined,
+        endAngle: animatedRing.endAngle,
+        path: animatedRing.path
+    };
+};
+export const getAnimatedProgressRings = ({ centerX, centerY, progress, rings, stagger }) => rings.map((ring, index) => getAnimatedProgressRing({
+    centerX,
+    centerY,
+    progress: getProgressRingAnimationProgress({ index, progress, stagger }),
+    ring
+}));
+export const getAverageProgress = (rings) => {
+    const definedRings = rings.filter((ring) => ring.value !== null);
+    return definedRings.length > 0
+        ? definedRings.reduce((sum, ring) => sum + ring.clampedValue, 0) /
+            definedRings.length
+        : 0;
+};
+export const getProgressChartAnimationTargetKey = (rings) => rings
+    .map((ring) => `${ring.index}:${ring.defined}:${ring.clampedValue}`)
+    .join("|");
+export const useProgressChartAnimation = ({ animation, targetKey }) => {
+    const config = useMemo(() => resolveProgressChartAnimationConfig(animation), [animation]);
+    const [progress, setProgress] = useState(config.enabled ? 0 : 1);
+    useEffect(() => {
+        if (!config.enabled || config.duration <= 0) {
+            const frame = requestAnimationFrame(() => setProgress(1));
+            return () => cancelAnimationFrame(frame);
+        }
+        let animationFrame = 0;
+        let startTime;
+        const tick = (timestamp) => {
+            startTime ?? (startTime = timestamp);
+            const nextProgress = clamp01((timestamp - startTime) / config.duration);
+            setProgress(nextProgress);
+            if (nextProgress < 1) {
+                animationFrame = requestAnimationFrame(tick);
+            }
+        };
+        animationFrame = requestAnimationFrame((timestamp) => {
+            setProgress(0);
+            tick(timestamp);
+        });
+        return () => cancelAnimationFrame(animationFrame);
+    }, [config.duration, config.enabled, targetKey]);
+    return {
+        progress,
+        stagger: config.stagger
+    };
+};

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

@@ -0,0 +1,14 @@
+import type { CartesianChartPresetRegistry, CartesianChartPresetValue, CartesianChartTheme, ResolvedChartKitThemeMode } from "../../theme/presets";
+import type { ProgressChartModel, ProgressChartProps } from "./types";
+type ProgressChartThemeContextValue = {
+    mode: ResolvedChartKitThemeMode;
+    preset: CartesianChartPresetValue;
+    presets: CartesianChartPresetRegistry;
+    theme: CartesianChartTheme | undefined;
+};
+export declare const buildProgressChartModel: <TData extends Record<string, unknown>>({ chartKitTheme, props }: {
+    chartKitTheme: ProgressChartThemeContextValue;
+    props: ProgressChartProps<TData>;
+}) => ProgressChartModel;
+export {};
+//# sourceMappingURL=model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/charts/progress/model.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEtE,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,yBAAyB,CAAC;IAChC,MAAM,EAAE,yBAAyB,CAAC;IAClC,OAAO,EAAE,4BAA4B,CAAC;IACtC,KAAK,EAAE,mBAAmB,GAAG,SAAS,CAAC;CACxC,CAAC;AA4GF,eAAO,MAAM,uBAAuB,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,0BAG5E;IACD,aAAa,EAAE,8BAA8B,CAAC;IAC9C,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAClC,KAAG,kBAwGH,CAAC"}