gifted-charts-core 0.0.45 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "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,6 +1,5 @@
 import { type pieDataItem, type PieChartPropsType } from './types';
 import { type ColorValue } from 'react-native';
-import { LabelsPosition } from '../utils/types';
 interface IusePieChart {
     radius: number;
     extraRadiusForFocused: number;
@@ -30,18 +29,6 @@ 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,16 +16,15 @@ 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, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     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 _x = __read(useState(-1), 2), selectedIndex = _x[0], setSelectedIndex = _x[1]; // at the start, nothing is selected
+    var _v = __read(useState(-1), 2), selectedIndex = _v[0], setSelectedIndex = _v[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 _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];
+    var _w = __read(useState((_d = props.initialAngle) !== null && _d !== void 0 ? _d : (props.semiCircle ? -pi : 0)), 2), startAngle = _w[0], setStartAngle = _w[1];
+    var _x = __read(useState(0), 2), total = _x[0], setTotal = _x[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);
@@ -64,7 +63,8 @@ export var usePieChart = function (props) {
             }
         }
     }, [selectedIndex]);
-    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 * 2 : _2;
+    var pro = props.pro, data = props.data, donut = props.donut, isThreeD = props.isThreeD, semiCircle = props.semiCircle, _y = props.inwardExtraLengthForFocused, inwardExtraLengthForFocused = _y === void 0 ? 0 : _y, _z = props.isAnimated, isAnimated = _z === void 0 ? false : _z, edgesRadius = props.edgesRadius;
+    var endAngle = (_e = props.endAngle) !== null && _e !== void 0 ? _e : startAngle + Math.PI * (semiCircle ? 1 : 2);
     var canvasWidth = radius * 2;
     var canvasHeight = isThreeD ? radius * 2.3 : radius * 2;
     var strokeWidth = (_f = props.strokeWidth) !== null && _f !== void 0 ? _f : 0;
@@ -88,154 +88,13 @@ export var usePieChart = function (props) {
     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 ? startAngleForPro : startAngle,
+        startAngle: startAngle,
         endAngle: endAngle,
         setStartAngle: setStartAngle,
         total: total,
@@ -257,16 +116,6 @@ export var usePieChart = function (props) {
         tiltAngle: tiltAngle,
         isDataShifted: isDataShifted,
         paddingHorizontal: paddingHorizontal,
-        paddingVertical: paddingVertical,
-        isAnimated: isAnimated,
-        animationDuration: animationDuration / 1000,
-        // PRO
-        initial: initial,
-        dInitial: dInitial,
-        dFinal: dFinal,
-        isAnimating: isAnimating,
-        getStartCaps: getStartCaps,
-        getEndCaps: getEndCaps,
-        getTextCoordinates: getTextCoordinates
+        paddingVertical: paddingVertical
     };
 };

package/src/PieChart/index.ts

@@ -2,8 +2,6 @@ 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
@@ -34,18 +32,6 @@ 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 {
@@ -116,10 +102,11 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
     semiCircle,
     inwardExtraLengthForFocused = 0,
     isAnimated = false,
-    edgesRadius,
-    endAngle = props.endAngle ?? startAngle + Math.PI * 2
+    edgesRadius
   } = props
 
+  let endAngle = props.endAngle ?? startAngle + Math.PI * (semiCircle ? 1 : 2)
+
   const canvasWidth = radius * 2
   const canvasHeight = isThreeD ? radius * 2.3 : radius * 2
 
@@ -154,223 +141,13 @@ 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 ? startAngleForPro : startAngle,
+    startAngle,
     endAngle,
     setStartAngle,
     total,
@@ -392,18 +169,6 @@ export const usePieChart = (props: IPieChartPropsType): IusePieChart => {
     tiltAngle,
     isDataShifted,
     paddingHorizontal,
-    paddingVertical,
-    isAnimated,
-    animationDuration: animationDuration / 1000,
-
-    // PRO
-
-    initial,
-    dInitial,
-    dFinal,
-    isAnimating,
-    getStartCaps,
-    getEndCaps,
-    getTextCoordinates
+    paddingVertical
   }
 }

package/src/PieChart/pro.d.ts

@@ -0,0 +1,22 @@
+import { PieChartPropsType, pieDataItem } from './types';
+import { LabelsPosition } from '../utils/types';
+interface IusePiePro {
+    radius: number;
+    total: number;
+    donut?: boolean;
+    strokeWidth: 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;
+    };
+}
+export declare const usePiePro: (props: PieChartPropsType) => IusePiePro;
+export {};

package/src/PieChart/pro.js

@@ -0,0 +1,178 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useEffect, useState } from 'react';
+import { defaultAnimationDuration } from '../utils/constants';
+export var usePiePro = function (props) {
+    var _a, _b;
+    var data = props.data, isAnimated = props.isAnimated, donut = props.donut, semiCircle = props.semiCircle, _c = props.radius, radius = _c === void 0 ? 120 : _c, _d = props.innerRadius, innerRadius = _d === void 0 ? radius / 2.5 : _d, _e = props.strokeWidth, strokeWidth = _e === void 0 ? 0 : _e, _f = props.edgesRadius, edgesRadius = _f === void 0 ? 0 : _f, _g = props.startAngle, startAngle = _g === void 0 ? 0 : _g;
+    var endAngle = (_a = props.endAngle) !== null && _a !== void 0 ? _a : startAngle + Math.PI * (semiCircle ? 1 : 2);
+    var total = data.reduce(function (acc, item) { return acc + item.value; }, 0);
+    var animationDuration = (_b = props.animationDuration) !== null && _b !== void 0 ? _b : defaultAnimationDuration;
+    var _h = __read(useState(isAnimated), 2), isAnimating = _h[0], setIsAnimating = _h[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 + startAngle;
+        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 + startAngle;
+        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 + startAngle;
+        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,
+        total: total,
+        donut: donut,
+        strokeWidth: strokeWidth,
+        isAnimated: isAnimated,
+        animationDuration: animationDuration,
+        initial: initial,
+        dInitial: dInitial,
+        dFinal: dFinal,
+        isAnimating: isAnimating,
+        getStartCaps: getStartCaps,
+        getEndCaps: getEndCaps,
+        getTextCoordinates: getTextCoordinates
+    };
+};

package/src/PieChart/pro.ts

@@ -0,0 +1,261 @@
+import { useEffect, useState } from 'react'
+import { defaultAnimationDuration } from '../utils/constants'
+import { PieChartPropsType, pieDataItem } from './types'
+import { LabelsPosition } from '../utils/types'
+
+interface IusePiePro {
+  radius: number
+  total: number
+  donut?: boolean
+  strokeWidth: 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 }
+}
+
+export const usePiePro = (props: PieChartPropsType): IusePiePro => {
+  const {
+    data,
+    isAnimated,
+    donut,
+    semiCircle,
+    radius = 120,
+    innerRadius = radius / 2.5,
+    strokeWidth = 0,
+    edgesRadius = 0,
+    startAngle = 0
+  } = props
+  let endAngle = props.endAngle ?? startAngle + Math.PI * (semiCircle ? 1 : 2)
+  const total = data.reduce((acc, item) => acc + item.value, 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 + startAngle
+    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 + startAngle
+
+    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 + startAngle
+
+    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,
+    total,
+    donut,
+    strokeWidth,
+    isAnimated,
+    animationDuration,
+    initial,
+    dInitial,
+    dFinal,
+    isAnimating,
+    getStartCaps,
+    getEndCaps,
+    getTextCoordinates
+  }
+}