gifted-charts-core 0.0.42 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "./src/index.js",
   "files": [

package/src/PieChart/index.d.ts

@@ -1,5 +1,6 @@
 import { type pieDataItem, type PieChartPropsType } from './types';
 import { type ColorValue } from 'react-native';
+import { LabelsPosition } from '../utils/types';
 interface IusePieChart {
     radius: number;
     extraRadiusForFocused: number;
@@ -29,6 +30,18 @@ interface IusePieChart {
     isDataShifted: boolean;
     paddingHorizontal: number;
     paddingVertical: number;
+    isAnimated: boolean;
+    animationDuration: number;
+    initial: string;
+    dInitial: string[];
+    dFinal: string[];
+    isAnimating: boolean;
+    getStartCaps: (index: number, item: pieDataItem) => string;
+    getEndCaps: (index: number, item: pieDataItem) => string;
+    getTextCoordinates: (index: number, labelPos?: LabelsPosition) => {
+        x: number;
+        y: number;
+    };
 }
 interface IPieChartPropsType extends PieChartPropsType {
     pro?: boolean;

package/src/PieChart/index.js

@@ -16,15 +16,16 @@ var __read = (this && this.__read) || function (o, n) {
 };
 import { useEffect, useState } from 'react';
 import { getTextSizeForPieLabels } from '../utils';
+import { defaultAnimationDuration } from '../utils/constants';
 export var usePieChart = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var radius = (_a = props.radius) !== null && _a !== void 0 ? _a : 120;
     var extraRadiusForFocused = (_b = props.extraRadiusForFocused) !== null && _b !== void 0 ? _b : (((_c = props.focusOnPress) !== null && _c !== void 0 ? _c : props.sectionAutoFocus) ? radius / 10 : 0);
     var pi = props.semiCircle ? Math.PI / 2 : Math.PI;
-    var _w = __read(useState(-1), 2), selectedIndex = _w[0], setSelectedIndex = _w[1]; // at the start, nothing is selected
+    var _x = __read(useState(-1), 2), selectedIndex = _x[0], setSelectedIndex = _x[1]; // at the start, nothing is selected
     // because we're going to use a useEffect, we need startAngle and total to be state variables
-    var _x = __read(useState((_d = props.initialAngle) !== null && _d !== void 0 ? _d : (props.semiCircle ? -pi : 0)), 2), startAngle = _x[0], setStartAngle = _x[1];
-    var _y = __read(useState(0), 2), total = _y[0], setTotal = _y[1];
+    var _y = __read(useState((_d = props.initialAngle) !== null && _d !== void 0 ? _d : (props.semiCircle ? -pi : 0)), 2), startAngle = _y[0], setStartAngle = _y[1];
+    var _z = __read(useState(0), 2), total = _z[0], setTotal = _z[1];
     useEffect(function () {
         var _a;
         // Update the total, this could be use to replace the forEach : const newTotal = props.data.reduce((acc, item) => acc + item.value, 0);
@@ -63,38 +64,179 @@ export var usePieChart = function (props) {
             }
         }
     }, [selectedIndex]);
-    var pro = props.pro, data = props.data, donut = props.donut, isThreeD = props.isThreeD, semiCircle = props.semiCircle, _z = props.inwardExtraLengthForFocused, inwardExtraLengthForFocused = _z === void 0 ? 0 : _z;
+    var pro = props.pro, data = props.data, donut = props.donut, isThreeD = props.isThreeD, semiCircle = props.semiCircle, _0 = props.inwardExtraLengthForFocused, inwardExtraLengthForFocused = _0 === void 0 ? 0 : _0, _1 = props.isAnimated, isAnimated = _1 === void 0 ? false : _1, edgesRadius = props.edgesRadius, _2 = props.endAngle, endAngle = _2 === void 0 ? (_e = props.endAngle) !== null && _e !== void 0 ? _e : startAngle + Math.PI * (semiCircle ? 1 : 2) : _2;
     var canvasWidth = radius * 2;
     var canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
-    var strokeWidth = (_e = props.strokeWidth) !== null && _e !== void 0 ? _e : 0;
-    var innerRadius = (_f = props.innerRadius) !== null && _f !== void 0 ? _f : radius / 2.5;
-    var innerCircleColor = (_h = (_g = props.innerCircleColor) !== null && _g !== void 0 ? _g : props.backgroundColor) !== null && _h !== void 0 ? _h : 'white';
-    var innerCircleBorderWidth = (_j = props.innerCircleBorderWidth) !== null && _j !== void 0 ? _j : (props.innerCircleBorderColor ? strokeWidth || 2 : 0);
-    var innerCircleBorderColor = (_k = props.innerCircleBorderColor) !== null && _k !== void 0 ? _k : 'lightgray';
-    var shiftInnerCenterX = (_l = props.shiftInnerCenterX) !== null && _l !== void 0 ? _l : 0;
-    var shiftInnerCenterY = (_m = props.shiftInnerCenterY) !== null && _m !== void 0 ? _m : 0;
-    var tiltAngle = (_o = props.tiltAngle) !== null && _o !== void 0 ? _o : '55deg';
+    var strokeWidth = (_f = props.strokeWidth) !== null && _f !== void 0 ? _f : 0;
+    var innerRadius = (_g = props.innerRadius) !== null && _g !== void 0 ? _g : radius / 2.5;
+    var innerCircleColor = (_j = (_h = props.innerCircleColor) !== null && _h !== void 0 ? _h : props.backgroundColor) !== null && _j !== void 0 ? _j : 'white';
+    var innerCircleBorderWidth = (_k = props.innerCircleBorderWidth) !== null && _k !== void 0 ? _k : (props.innerCircleBorderColor ? strokeWidth || 2 : 0);
+    var innerCircleBorderColor = (_l = props.innerCircleBorderColor) !== null && _l !== void 0 ? _l : 'lightgray';
+    var shiftInnerCenterX = (_m = props.shiftInnerCenterX) !== null && _m !== void 0 ? _m : 0;
+    var shiftInnerCenterY = (_o = props.shiftInnerCenterY) !== null && _o !== void 0 ? _o : 0;
+    var tiltAngle = (_p = props.tiltAngle) !== null && _p !== void 0 ? _p : '55deg';
     var isDataShifted = false;
     data.forEach(function (item) {
         if (item.shiftX || item.shiftY) {
             isDataShifted = true;
         }
     });
-    var textSize = getTextSizeForPieLabels((_p = props.textSize) !== null && _p !== void 0 ? _p : 0, radius);
-    var paddingHorizontal = ((_q = props.paddingHorizontal) !== null && _q !== void 0 ? _q : props.labelsPosition === 'onBorder')
-        ? ((_r = props.textBackgroundRadius) !== null && _r !== void 0 ? _r : textSize) * 2 + 6
+    var textSize = getTextSizeForPieLabels((_q = props.textSize) !== null && _q !== void 0 ? _q : 0, radius);
+    var paddingHorizontal = ((_r = props.paddingHorizontal) !== null && _r !== void 0 ? _r : props.labelsPosition === 'onBorder')
+        ? ((_s = props.textBackgroundRadius) !== null && _s !== void 0 ? _s : textSize) * 2 + 6
         : 0;
-    var paddingVertical = ((_s = props.paddingVertical) !== null && _s !== void 0 ? _s : props.labelsPosition === 'onBorder')
-        ? ((_t = props.textBackgroundRadius) !== null && _t !== void 0 ? _t : textSize) * 2 + 6
+    var paddingVertical = ((_t = props.paddingVertical) !== null && _t !== void 0 ? _t : props.labelsPosition === 'onBorder')
+        ? ((_u = props.textBackgroundRadius) !== null && _u !== void 0 ? _u : textSize) * 2 + 6
         : 0;
+    /**********************************       PRO                       **********************/
+    var startAngleForPro = (_v = props.startAngle) !== null && _v !== void 0 ? _v : 0;
+    var animationDuration = (_w = props.animationDuration) !== null && _w !== void 0 ? _w : defaultAnimationDuration;
+    var _3 = __read(useState(isAnimated), 2), isAnimating = _3[0], setIsAnimating = _3[1];
+    useEffect(function () {
+        if (isAnimated) {
+            setIsAnimating(true);
+            setTimeout(function () { return setIsAnimating(false); }, animationDuration);
+        }
+    }, []);
+    var endAngleLocal = 0;
+    var addValues = function (index) {
+        if (index < 0)
+            return 0;
+        var sum = 0;
+        for (var i = 0; i <= index; i++)
+            sum += data[i].value;
+        return sum;
+    };
+    var labelsPosition = props.labelsPosition
+        ? props.labelsPosition
+        : donut || props.centerLabelComponent
+            ? 'outward'
+            : 'mid';
+    var getCoordinates = function (index, additionalValue, addInOnlyStart, addInOnlyEnd) {
+        var addedValue = addValues(index - 1) + (addInOnlyEnd ? 0 : additionalValue !== null && additionalValue !== void 0 ? additionalValue : 0);
+        var angle = (addedValue / total) * endAngleLocal + startAngleForPro;
+        var startInnerX = radius + Math.cos(angle) * innerRadius;
+        var startInnerY = radius - Math.sin(angle) * innerRadius;
+        var startOuterX = radius + Math.cos(angle) * radius;
+        var startOuterY = radius - Math.sin(angle) * radius;
+        var value = addValues(index - 1) +
+            data[index].value +
+            (addInOnlyStart ? 0 : additionalValue !== null && additionalValue !== void 0 ? additionalValue : 0);
+        angle = (value / total) * endAngleLocal + startAngleForPro;
+        var endOuterX = radius + Math.cos(angle) * radius;
+        var endOuterY = radius - Math.sin(angle) * radius;
+        var endInnerX = radius + Math.cos(angle) * innerRadius;
+        var endInnerY = radius - Math.sin(angle) * innerRadius;
+        return {
+            startInnerX: startInnerX,
+            startInnerY: startInnerY,
+            startOuterX: startOuterX,
+            startOuterY: startOuterY,
+            endOuterX: endOuterX,
+            endOuterY: endOuterY,
+            endInnerX: endInnerX,
+            endInnerY: endInnerY
+        };
+    };
+    var getTextCoordinates = function (index, labelPos) {
+        var value = addValues(index - 1) + data[index].value / 2;
+        var angle = (value / total) * endAngleLocal + startAngleForPro;
+        var labelPosition = labelPos || labelsPosition;
+        var x = radius +
+            Math.cos(angle) *
+                radius *
+                (labelPosition === 'inward'
+                    ? 0.25
+                    : labelPosition === 'mid'
+                        ? 0.5
+                        : labelPosition === 'outward'
+                            ? 0.75
+                            : 1);
+        var y = radius -
+            Math.sin(angle) *
+                radius *
+                (labelPosition === 'inward'
+                    ? 0.25
+                    : labelPosition === 'mid'
+                        ? 0.5
+                        : labelPosition === 'outward'
+                            ? 0.75
+                            : 1);
+        return { x: x, y: y };
+    };
+    var initial = '';
+    var getInitial = function (item) {
+        if (item.isStartEdgeCurved || item.startEdgeRadius) {
+            var _a = getCoordinates(0, (radius - innerRadius) / (radius / 20)), startInnerX = _a.startInnerX, startInnerY = _a.startInnerY, startOuterX = _a.startOuterX, startOuterY = _a.startOuterY;
+            return "M".concat(startInnerX, ",").concat(startInnerY, " L").concat(startOuterX, ",").concat(startOuterY, " ");
+        }
+        return "M".concat(radius + innerRadius, ",").concat(radius, " h").concat(radius - innerRadius, " ");
+    };
+    var getPath = function (index) {
+        var _a;
+        var _b = getCoordinates(index), endOuterX = _b.endOuterX, endOuterY = _b.endOuterY;
+        var isLargeArc = data[index].value / total > 0.5 ? 1 : 0;
+        var arc = "A".concat(radius + ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 0) / 2, ",").concat(radius, " 0 ").concat(isLargeArc, " 0 ");
+        var path = "".concat(arc, " ").concat(endOuterX, ", ").concat(endOuterY, "\n      L").concat(radius, ",").concat(radius, " ");
+        initial = "M".concat(radius, ",").concat(radius, " L").concat(endOuterX, ",").concat(endOuterY);
+        return path;
+    };
+    var getDonutPath = function (index, item) {
+        var _a;
+        var additionalForStart = item.isStartEdgeCurved || item.startEdgeRadius
+            ? (radius - innerRadius) / (radius / 20)
+            : 0;
+        var additionalForEnd = item.isEndEdgeCurved || item.endEdgeRadius
+            ? (radius - innerRadius) / (radius / -20)
+            : 0;
+        var cropAtEnd = !!(index === data.length - 1 &&
+            (item.isEndEdgeCurved || item.endEdgeRadius));
+        var _b = getCoordinates(index, cropAtEnd ? additionalForEnd : additionalForStart, !cropAtEnd, cropAtEnd), startInnerX = _b.startInnerX, startInnerY = _b.startInnerY, endOuterX = _b.endOuterX, endOuterY = _b.endOuterY, endInnerX = _b.endInnerX, endInnerY = _b.endInnerY;
+        var isLargeArc = data[index].value / total > 0.5 ? 1 : 0;
+        var innerArc = "A".concat(innerRadius, ",").concat(innerRadius, " 0 ").concat(isLargeArc, " 1 ");
+        var outerArc = "A".concat(radius + ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 0) / 2, ",").concat(radius, " 0 ").concat(isLargeArc, " 0 ");
+        var path = "".concat(outerArc, " ").concat(endOuterX, ", ").concat(endOuterY, "\n      L").concat(endInnerX, ",").concat(endInnerY, " M").concat(endInnerX, ",").concat(endInnerY, " ").concat(innerArc, " ").concat(startInnerX, ",").concat(startInnerY);
+        initial = "M".concat(endInnerX, ",").concat(endInnerY, " L").concat(endOuterX, ",").concat(endOuterY, " ");
+        return path;
+    };
+    var getStartCaps = function (index, item) {
+        var _a, _b;
+        var edgeRadius = (_b = (_a = item.startEdgeRadius) !== null && _a !== void 0 ? _a : edgesRadius) !== null && _b !== void 0 ? _b : 1;
+        var additional = (item.isStartEdgeCurved || item.startEdgeRadius
+            ? (radius - innerRadius) / (radius / 20)
+            : 0) +
+            strokeWidth / 2;
+        var _c = getCoordinates(index, additional), startInnerX = _c.startInnerX, startInnerY = _c.startInnerY, startOuterX = _c.startOuterX, startOuterY = _c.startOuterY;
+        var path = "M".concat(startInnerX, ",").concat(startInnerY, " A").concat(edgeRadius, ",").concat(edgeRadius, " 0 0 0 ").concat(startOuterX, ",").concat(startOuterY);
+        return path;
+    };
+    var getEndCaps = function (index, item) {
+        var _a, _b;
+        var edgeRadius = (_b = (_a = item.endEdgeRadius) !== null && _a !== void 0 ? _a : edgesRadius) !== null && _b !== void 0 ? _b : 1;
+        var additional = (item.isEndEdgeCurved || item.endEdgeRadius
+            ? (radius - innerRadius) / (radius / 20)
+            : 0) -
+            strokeWidth / 2;
+        var _c = getCoordinates(index, -additional), endInnerX = _c.endInnerX, endInnerY = _c.endInnerY, endOuterX = _c.endOuterX, endOuterY = _c.endOuterY;
+        var path = "M".concat(endInnerX, ",").concat(endInnerY, " A").concat(edgeRadius, ",").concat(edgeRadius, " 0 0 1 ").concat(endOuterX, ",").concat(endOuterY);
+        return path;
+    };
+    var dInitial = data.map(function (item, index) {
+        return "".concat(initial || getInitial(item), " ").concat(donut ? getDonutPath(index, item) : getPath(index));
+    });
+    endAngleLocal = endAngle;
+    initial = '';
+    var dFinal = data.map(function (item, index) {
+        return "".concat(initial || getInitial(item), " ").concat(donut ? getDonutPath(index, item) : getPath(index));
+    });
     return {
         radius: radius,
         extraRadiusForFocused: extraRadiusForFocused,
         pi: pi,
         selectedIndex: selectedIndex,
         setSelectedIndex: setSelectedIndex,
-        startAngle: pro ? (_u = props.startAngle) !== null && _u !== void 0 ? _u : 0 : startAngle,
-        endAngle: (_v = props.endAngle) !== null && _v !== void 0 ? _v : startAngle + (semiCircle ? Math.PI : Math.PI * 2),
+        startAngle: pro ? startAngleForPro : startAngle,
+        endAngle: endAngle,
         setStartAngle: setStartAngle,
         total: total,
         setTotal: setTotal,
@@ -115,6 +257,16 @@ export var usePieChart = function (props) {
         tiltAngle: tiltAngle,
         isDataShifted: isDataShifted,
         paddingHorizontal: paddingHorizontal,
-        paddingVertical: paddingVertical
+        paddingVertical: paddingVertical,
+        isAnimated: isAnimated,
+        animationDuration: animationDuration / 1000,
+        // PRO
+        initial: initial,
+        dInitial: dInitial,
+        dFinal: dFinal,
+        isAnimating: isAnimating,
+        getStartCaps: getStartCaps,
+        getEndCaps: getEndCaps,
+        getTextCoordinates: getTextCoordinates
     };
 };

package/src/PieChart/index.ts

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import { type pieDataItem, type PieChartPropsType } from './types'
 import { getTextSizeForPieLabels } from '../utils'
 import { type ColorValue } from 'react-native'
+import { defaultAnimationDuration } from '../utils/constants'
+import { LabelsPosition } from '../utils/types'
 
 interface IusePieChart {
   radius: number
@@ -32,6 +34,18 @@ interface IusePieChart {
   isDataShifted: boolean
   paddingHorizontal: number
   paddingVertical: number
+  isAnimated: boolean
+  animationDuration: number
+  initial: string
+  dInitial: string[]
+  dFinal: string[]
+  isAnimating: boolean
+  getStartCaps: (index: number, item: pieDataItem) => string
+  getEndCaps: (index: number, item: pieDataItem) => string
+  getTextCoordinates: (
+    index: number,
+    labelPos?: LabelsPosition
+  ) => { x: number; y: number }
 }
 
 interface IPieChartPropsType extends PieChartPropsType {
@@ -100,7 +114,10 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
     donut,
     isThreeD,
     semiCircle,
-    inwardExtraLengthForFocused = 0
+    inwardExtraLengthForFocused = 0,
+    isAnimated = false,
+    edgesRadius,
+    endAngle = props.endAngle ?? startAngle + Math.PI * (semiCircle ? 1 : 2)
   } = props
 
   const canvasWidth = radius * 2
@@ -137,15 +154,224 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
       ? (props.textBackgroundRadius ?? textSize) * 2 + 6
       : 0
 
+  /**********************************       PRO                       **********************/
+
+  const startAngleForPro = props.startAngle ?? 0
+  const animationDuration = props.animationDuration ?? defaultAnimationDuration
+
+  const [isAnimating, setIsAnimating] = useState(isAnimated)
+
+  useEffect(() => {
+    if (isAnimated) {
+      setIsAnimating(true)
+      setTimeout(() => setIsAnimating(false), animationDuration)
+    }
+  }, [])
+
+  let endAngleLocal = 0
+
+  const addValues = (index: number) => {
+    if (index < 0) return 0
+    let sum = 0
+    for (let i = 0; i <= index; i++) sum += data[i].value
+    return sum
+  }
+  const labelsPosition = props.labelsPosition
+    ? props.labelsPosition
+    : donut || props.centerLabelComponent
+    ? 'outward'
+    : 'mid'
+
+  const getCoordinates = (
+    index: number,
+    additionalValue?: number,
+    addInOnlyStart?: boolean,
+    addInOnlyEnd?: boolean
+  ) => {
+    const addedValue =
+      addValues(index - 1) + (addInOnlyEnd ? 0 : additionalValue ?? 0)
+    let angle = (addedValue / total) * endAngleLocal + startAngleForPro
+    const startInnerX = radius + Math.cos(angle) * innerRadius
+    const startInnerY = radius - Math.sin(angle) * innerRadius
+    const startOuterX = radius + Math.cos(angle) * radius
+    const startOuterY = radius - Math.sin(angle) * radius
+
+    const value =
+      addValues(index - 1) +
+      data[index].value +
+      (addInOnlyStart ? 0 : additionalValue ?? 0)
+    angle = (value / total) * endAngleLocal + startAngleForPro
+
+    const endOuterX = radius + Math.cos(angle) * radius
+    const endOuterY = radius - Math.sin(angle) * radius
+
+    const endInnerX = radius + Math.cos(angle) * innerRadius
+    const endInnerY = radius - Math.sin(angle) * innerRadius
+
+    return {
+      startInnerX,
+      startInnerY,
+      startOuterX,
+      startOuterY,
+      endOuterX,
+      endOuterY,
+      endInnerX,
+      endInnerY
+    }
+  }
+
+  const getTextCoordinates = (index: number, labelPos?: LabelsPosition) => {
+    const value = addValues(index - 1) + data[index].value / 2
+    const angle = (value / total) * endAngleLocal + startAngleForPro
+
+    const labelPosition: LabelsPosition = labelPos || labelsPosition
+
+    let x =
+      radius +
+      Math.cos(angle) *
+        radius *
+        (labelPosition === 'inward'
+          ? 0.25
+          : labelPosition === 'mid'
+          ? 0.5
+          : labelPosition === 'outward'
+          ? 0.75
+          : 1)
+    let y =
+      radius -
+      Math.sin(angle) *
+        radius *
+        (labelPosition === 'inward'
+          ? 0.25
+          : labelPosition === 'mid'
+          ? 0.5
+          : labelPosition === 'outward'
+          ? 0.75
+          : 1)
+
+    return { x, y }
+  }
+
+  var initial = ''
+  const getInitial = (item: pieDataItem) => {
+    if (item.isStartEdgeCurved || item.startEdgeRadius) {
+      const { startInnerX, startInnerY, startOuterX, startOuterY } =
+        getCoordinates(0, (radius - innerRadius) / (radius / 20))
+
+      return `M${startInnerX},${startInnerY} L${startOuterX},${startOuterY} `
+    }
+    return `M${radius + innerRadius},${radius} h${radius - innerRadius} `
+  }
+  const getPath = (index: number) => {
+    const { endOuterX, endOuterY } = getCoordinates(index)
+
+    const isLargeArc = data[index].value / total > 0.5 ? 1 : 0
+
+    const arc = `A${
+      radius + (props.strokeWidth ?? 0) / 2
+    },${radius} 0 ${isLargeArc} 0 `
+    const path = `${arc} ${endOuterX}, ${endOuterY}
+      L${radius},${radius} `
+
+    initial = `M${radius},${radius} L${endOuterX},${endOuterY}`
+
+    return path
+  }
+  const getDonutPath = (index: number, item: pieDataItem) => {
+    const additionalForStart =
+      item.isStartEdgeCurved || item.startEdgeRadius
+        ? (radius - innerRadius) / (radius / 20)
+        : 0
+
+    const additionalForEnd =
+      item.isEndEdgeCurved || item.endEdgeRadius
+        ? (radius - innerRadius) / (radius / -20)
+        : 0
+
+    const cropAtEnd = !!(
+      index === data.length - 1 &&
+      (item.isEndEdgeCurved || item.endEdgeRadius)
+    )
+    const {
+      startInnerX,
+      startInnerY,
+      endOuterX,
+      endOuterY,
+      endInnerX,
+      endInnerY
+    } = getCoordinates(
+      index,
+      cropAtEnd ? additionalForEnd : additionalForStart,
+      !cropAtEnd,
+      cropAtEnd
+    )
+
+    const isLargeArc = data[index].value / total > 0.5 ? 1 : 0
+
+    const innerArc = `A${innerRadius},${innerRadius} 0 ${isLargeArc} 1 `
+    const outerArc = `A${
+      radius + (props.strokeWidth ?? 0) / 2
+    },${radius} 0 ${isLargeArc} 0 `
+    const path = `${outerArc} ${endOuterX}, ${endOuterY}
+      L${endInnerX},${endInnerY} M${endInnerX},${endInnerY} ${innerArc} ${startInnerX},${startInnerY}`
+
+    initial = `M${endInnerX},${endInnerY} L${endOuterX},${endOuterY} `
+
+    return path
+  }
+  const getStartCaps = (index: number, item: pieDataItem) => {
+    const edgeRadius = item.startEdgeRadius ?? edgesRadius ?? 1
+    const additional =
+      (item.isStartEdgeCurved || item.startEdgeRadius
+        ? (radius - innerRadius) / (radius / 20)
+        : 0) +
+      strokeWidth / 2
+    const { startInnerX, startInnerY, startOuterX, startOuterY } =
+      getCoordinates(index, additional)
+
+    const path = `M${startInnerX},${startInnerY} A${edgeRadius},${edgeRadius} 0 0 0 ${startOuterX},${startOuterY}`
+    return path
+  }
+  const getEndCaps = (index: number, item: pieDataItem) => {
+    const edgeRadius = item.endEdgeRadius ?? edgesRadius ?? 1
+    const additional =
+      (item.isEndEdgeCurved || item.endEdgeRadius
+        ? (radius - innerRadius) / (radius / 20)
+        : 0) -
+      strokeWidth / 2
+    const { endInnerX, endInnerY, endOuterX, endOuterY } = getCoordinates(
+      index,
+      -additional
+    )
+
+    const path = `M${endInnerX},${endInnerY} A${edgeRadius},${edgeRadius} 0 0 1 ${endOuterX},${endOuterY}`
+    return path
+  }
+
+  const dInitial = data.map(
+    (item, index) =>
+      `${initial || getInitial(item)} ${
+        donut ? getDonutPath(index, item) : getPath(index)
+      }`
+  )
+
+  endAngleLocal = endAngle
+  initial = ''
+  const dFinal = data.map(
+    (item, index) =>
+      `${initial || getInitial(item)} ${
+        donut ? getDonutPath(index, item) : getPath(index)
+      }`
+  )
+
   return {
     radius,
     extraRadiusForFocused,
     pi,
     selectedIndex,
     setSelectedIndex,
-    startAngle: pro ? props.startAngle ?? 0 : startAngle,
-    endAngle:
-      props.endAngle ?? startAngle + (semiCircle ? Math.PI : Math.PI * 2),
+    startAngle: pro ? startAngleForPro : startAngle,
+    endAngle,
     setStartAngle,
     total,
     setTotal,
@@ -166,6 +392,18 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
     tiltAngle,
     isDataShifted,
     paddingHorizontal,
-    paddingVertical
+    paddingVertical,
+    isAnimated,
+    animationDuration: animationDuration / 1000,
+
+    // PRO
+
+    initial,
+    dInitial,
+    dFinal,
+    isAnimating,
+    getStartCaps,
+    getEndCaps,
+    getTextCoordinates
   }
 }

package/src/PieChart/types.d.ts

@@ -49,11 +49,13 @@ export interface PieChartPropsType {
     pieInnerComponentWidth?: number;
     paddingHorizontal?: number;
     paddingVertical?: number;
-    isAnimated?: boolean;
     startAngle?: number;
     endAngle?: number;
-    curvedEdges?: boolean;
+    curvedStartEdges?: boolean;
+    curvedEndEdges?: boolean;
     edgesRadius?: number;
+    isAnimated?: boolean;
+    animationDuration?: number;
 }
 export interface pieDataItem {
     value: number;

package/src/PieChart/types.ts

@@ -52,11 +52,13 @@ export interface PieChartPropsType {
   pieInnerComponentWidth?: number
   paddingHorizontal?: number
   paddingVertical?: number
-  isAnimated?: boolean
   startAngle?: number
   endAngle?: number
-  curvedEdges?: boolean
+  curvedStartEdges?: boolean
+  curvedEndEdges?: boolean
   edgesRadius?: number
+  isAnimated?: boolean
+  animationDuration?: number
 }
 export interface pieDataItem {
   value: number

package/src/utils/constants.d.ts

@@ -7,6 +7,7 @@ export declare enum chartTypes {
     LINE_BI_COLOR = 2
 }
 export declare const defaultCurvature = 0.2;
+export declare const defaultAnimationDuration = 800;
 export declare enum yAxisSides {
     LEFT = 0,
     RIGHT = 1

package/src/utils/constants.js

@@ -8,7 +8,7 @@ export var chartTypes;
 })(chartTypes || (chartTypes = {}));
 export var defaultCurvature = 0.2;
 var defaultCurveType = CurveType.CUBIC;
-var defaultAnimationDuration = 800;
+export var defaultAnimationDuration = 800;
 var defaultScrollEventThrottle = 0;
 var defaultEndReachedOffset = 80;
 // Bar and Line chart Specific

package/src/utils/constants.ts

@@ -7,12 +7,12 @@ import { type FontStyle } from 'react-native-svg'
 export enum chartTypes {
   BAR,
   LINE,
-  LINE_BI_COLOR,
+  LINE_BI_COLOR
 }
 
 export const defaultCurvature = 0.2
 const defaultCurveType = CurveType.CUBIC
-const defaultAnimationDuration = 800
+export const defaultAnimationDuration = 800
 const defaultScrollEventThrottle = 0
 const defaultEndReachedOffset = 80
 
@@ -20,13 +20,13 @@ const defaultEndReachedOffset = 80
 
 export enum yAxisSides {
   LEFT,
-  RIGHT,
+  RIGHT
 }
 
 export enum loc {
   IN,
   UP,
-  DOWN,
+  DOWN
 }
 
 export const SEGMENT_START = 'segmentStart'