react-native-gifted-charts 1.4.69 → 1.4.71

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.js

@@ -1,21 +1,5 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';
 import { styles } from '../../../BarChart/styles';
 import { TouchableOpacity, View } from 'react-native';
 import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
@@ -23,8 +7,7 @@ import { Rect, Text as CanvasText, Circle, ForeignObject, } from 'react-native-s
 import { isWebApp } from '../../../utils';
 export var renderDataPoints = function (props) {
     var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset, opacity = props.opacity, svgHeight = props.svgHeight, totalWidth = props.totalWidth;
-    var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex;
-    var _a = __read(useState(focusedDataPointIndex !== null && focusedDataPointIndex !== void 0 ? focusedDataPointIndex : -1), 2), selectedDataPointIndex = _a[0], setSelectedDataPointIndex = _a[1];
+    var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex, setFocusedDataPointIndex = lineConfig.setFocusedDataPointIndex;
     return (_jsxs(_Fragment, { children: [data.map(function (item, index) {
                 var _a, _b, _c;
                 if (index < lineConfig.startIndex ||
@@ -34,10 +17,10 @@ export var renderDataPoints = function (props) {
                 }
                 var currentBarWidth = item.barWidth || barWidth || 30;
                 var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
-                var dataPointColor = lineConfig.focusEnabled && index === selectedDataPointIndex
+                var dataPointColor = lineConfig.focusEnabled && index === focusedDataPointIndex
                     ? lineConfig.focusedDataPointColor
                     : lineConfig.dataPointsColor;
-                var dataPointRadius = lineConfig.focusEnabled && index === selectedDataPointIndex
+                var dataPointRadius = lineConfig.focusEnabled && index === focusedDataPointIndex
                     ? lineConfig.focusedDataPointRadius
                     : lineConfig.dataPointsRadius;
                 var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
@@ -57,20 +40,20 @@ export var renderDataPoints = function (props) {
                             },
                         ], onPress: function () {
                             if (focusEnabled)
-                                setSelectedDataPointIndex(index);
+                                setFocusedDataPointIndex(index);
                         }, children: customDataPoint(item, index) }, index + '.' + value + 'custom'));
                 }
                 if (lineConfig.dataPointsShape === 'rectangular') {
                     return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity, onPress: function () {
                                     if (focusEnabled)
-                                        setSelectedDataPointIndex(index);
+                                        setFocusedDataPointIndex(index);
                                 } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
                                     lineConfig.dataPointsHeight / 2 +
                                     (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'rect'));
                 }
                 return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: x, cy: y, r: dataPointRadius, fill: dataPointColor, opacity: opacity, onPress: function () {
                                 if (focusEnabled)
-                                    setSelectedDataPointIndex(index);
+                                    setFocusedDataPointIndex(index);
                             } }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
                                 lineConfig.dataPointsHeight / 2 +
                                 (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'circ'));
@@ -88,12 +71,12 @@ export var renderDataPoints = function (props) {
                     var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
                     if (isWebApp)
                         return (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: x - 12, y: y - 24, children: showDataPointLabelOnFocus
-                                ? selectedDataPointIndex === index
+                                ? focusedDataPointIndex === index
                                     ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
                                     : null
                                 : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
                     return (_jsx(View, { style: { top: y - 24, left: x - 12, position: 'absolute' }, children: showDataPointLabelOnFocus
-                            ? selectedDataPointIndex === index
+                            ? focusedDataPointIndex === index
                                 ? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
                                 : null
                             : dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -18,17 +18,18 @@ var RenderVerticalLines = function (props) {
     var showVerticalLines = props.showVerticalLines, // this is the value passed by user (note that it's not the effective value that is computed by traversing through the data array and finding any item for which showVerticalLines is true)
     verticalLinesAr = props.verticalLinesAr, verticalLinesSpacing = props.verticalLinesSpacing, spacing = props.spacing, initialSpacing = props.initialSpacing, verticalLinesZIndex = props.verticalLinesZIndex, verticalLinesHeight = props.verticalLinesHeight, verticalLinesThickness = props.verticalLinesThickness, verticalLinesColor = props.verticalLinesColor, verticalLinesStrokeDashArray = props.verticalLinesStrokeDashArray, verticalLinesShift = props.verticalLinesShift, verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint, verticalLinesStrokeLinecap = props.verticalLinesStrokeLinecap, xAxisThickness = props.xAxisThickness, labelsExtraHeight = props.labelsExtraHeight, containerHeight = props.containerHeight, data = props.data, stackData = props.stackData, barWidth = props.barWidth, maxValue = props.maxValue, chartType = props.chartType, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, totalWidth = props.totalWidth, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift;
     var getHeightOfVerticalLine = function (index) {
+        var _a, _b, _c, _d, _e;
         if (verticalLinesUptoDataPoint) {
             if (index < data.length) {
                 return ((data[index].value * containerHeight) / maxValue - xAxisThickness);
             }
             else {
-                return verticalLinesHeight !== null && verticalLinesHeight !== void 0 ? verticalLinesHeight : 0;
+                return (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.verticalLineHeight) !== null && _b !== void 0 ? _b : verticalLinesHeight) !== null && _c !== void 0 ? _c : 0;
             }
         }
         else {
-            return (verticalLinesHeight ||
-                containerHeightIncludingBelowXAxis - xAxisThickness);
+            return ((_e = (_d = data === null || data === void 0 ? void 0 : data[index]) === null || _d === void 0 ? void 0 : _d.verticalLineHeight) !== null && _e !== void 0 ? _e : (verticalLinesHeight ||
+                containerHeightIncludingBelowXAxis - xAxisThickness));
         }
     };
     var extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
@@ -101,7 +102,7 @@ var RenderVerticalLines = function (props) {
                     ? ((_a = item.verticalLineShift) !== null && _a !== void 0 ? _a : verticalLinesShift)
                     : verticalLinesShift;
                 var x = verticalLinesShiftLocal +
-                    1 +
+                    2 +
                     (chartType === chartTypes.BAR // This logic exists because we have renderSpecificVerticalLines in Line Charts which I would love to deprecate at the earliest, because that functionality gets handled here elegantly
                         ? totalSpacing - 1
                         : verticalLinesSpacing

package/dist/Components/Rotatable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type RotatablePieProps = {
+    initialAngle: number;
+    size: number;
+    children: React.ReactNode;
+    onAngleChange?: (angle: number) => void;
+};
+export declare function RotatablePie({ initialAngle, size, children, onAngleChange, }: RotatablePieProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/Rotatable.js

@@ -0,0 +1,132 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { View, PanResponder, Animated, StyleSheet, } from 'react-native';
+// ----------------------------------------
+// Ultra-smooth animation helper
+// Throttles to ~60 FPS AND applies low-pass filtering
+// ----------------------------------------
+function createSmoothUpdater(animatedValue, smoothing, fps) {
+    if (smoothing === void 0) { smoothing = 0.15; }
+    if (fps === void 0) { fps = 60; }
+    var frameDelay = 1000 / fps;
+    var lastTime = 0;
+    var filtered = 0; // low-pass output
+    var timeout = null;
+    return function (target) {
+        var now = Date.now();
+        var diff = now - lastTime;
+        var update = function () {
+            // low-pass filter (natural smoothing)
+            filtered = filtered * (1 - smoothing) + target * smoothing;
+            animatedValue.setValue(filtered);
+        };
+        if (diff >= frameDelay) {
+            lastTime = now;
+            update();
+        }
+        else {
+            clearTimeout(timeout);
+            timeout = setTimeout(function () {
+                lastTime = Date.now();
+                update();
+            }, frameDelay - diff);
+        }
+    };
+}
+export function RotatablePie(_a) {
+    var initialAngle = _a.initialAngle, size = _a.size, children = _a.children, onAngleChange = _a.onAngleChange;
+    var angle = useRef(new Animated.Value(initialAngle)).current;
+    var _b = __read(useState({ x: size / 2, y: size / 2 }), 2), center = _b[0], setCenter = _b[1];
+    var gestureStartAngle = useRef(0);
+    var startAngle = useRef(initialAngle);
+    // Create smooth updater ONCE
+    var smoothSetAngle = useRef(createSmoothUpdater(angle, 0.15, 60)).current;
+    useEffect(function () {
+        angle.setValue(initialAngle);
+        startAngle.current = initialAngle;
+    }, [initialAngle, angle]);
+    useEffect(function () {
+        var id = angle.addListener(function (_a) {
+            var value = _a.value;
+            return onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(value);
+        });
+        return function () { return angle.removeListener(id); };
+    }, [angle, onAngleChange]);
+    var onLayout = function (e) {
+        var _a = e.nativeEvent.layout, width = _a.width, height = _a.height;
+        setCenter({ x: width / 2, y: height / 2 });
+    };
+    var getTouchAngleDeg = function (x, y) {
+        var dx = x - center.x;
+        var dy = y - center.y;
+        var rad = Math.atan2(dy, dx);
+        return (rad * 180) / Math.PI;
+    };
+    var panResponder = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: function () { return true; },
+        onMoveShouldSetPanResponder: function () { return true; },
+        onPanResponderGrant: function (evt) {
+            var _a = evt.nativeEvent, locationX = _a.locationX, locationY = _a.locationY;
+            gestureStartAngle.current = getTouchAngleDeg(locationX, locationY);
+            angle.stopAnimation(function (current) {
+                startAngle.current = current;
+            });
+        },
+        onPanResponderMove: function (evt) {
+            var _a = evt.nativeEvent, locationX = _a.locationX, locationY = _a.locationY;
+            var currentAngle = getTouchAngleDeg(locationX, locationY);
+            var delta = currentAngle - gestureStartAngle.current;
+            if (delta > 180)
+                delta -= 360;
+            if (delta < -180)
+                delta += 360;
+            var next = startAngle.current + delta;
+            // 🔥 SUPER SMOOTH UPDATE
+            smoothSetAngle(next);
+        },
+    })).current;
+    var rotateInterpolation = angle.interpolate({
+        inputRange: [-360, 360],
+        outputRange: ['-360deg', '360deg'],
+    });
+    return (_jsx(View, __assign({ onLayout: onLayout, style: [styles.container, { width: size, height: size }] }, panResponder.panHandlers, { children: _jsx(Animated.View, { style: {
+                width: size,
+                height: size,
+                justifyContent: 'center',
+                alignItems: 'center',
+                transform: [{ rotate: rotateInterpolation }],
+            }, children: children }) })));
+}
+var styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/dist/LineChart/index.js

@@ -674,6 +674,18 @@ export var LineChart = function (props) {
                     ? renderDataPoints(secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6666)
                     : null] }));
     };
+    var areaComponent = function (isNthAreaChart, startFillColor, endFillColor, startOpacity, endOpacity, uniqueId, fillPoints, startIndex, endIndex, propsData, clipRangeId, currentLineThickness, spreadAreaData, spacingArray, spreadAreaColor, spreadAreaOpacity) {
+        // For Area Chart
+        return (_jsxs(_Fragment, { children: [isNthAreaChart &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
+                    (startIndex !== 0 || endIndex !== data.length - 1) &&
+                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
+                    propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 }))] }));
+    };
     var lineSvgComponent = function (points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) {
         var _a, _b;
         if (!points)
@@ -714,7 +726,7 @@ export var LineChart = function (props) {
         }
         return (_jsxs(Svg, { height: svgHeight, 
             // width={widthValue}
-            onPress: props.onBackgroundPress, children: [lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
+            onPress: props.onBackgroundPress, children: [areaComponent(isNthAreaChart, startFillColor, endFillColor, startOpacity, endOpacity, uniqueId, fillPoints, startIndex, endIndex, propsData, clipRangeId, currentLineThickness, spreadAreaData, spacingArray, spreadAreaColor, spreadAreaOpacity), lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
                     var lineSvgProps = {
                         d: item.d,
                         fill: 'none',
@@ -733,15 +745,7 @@ export var LineChart = function (props) {
                         lineSvgProps.strokeDasharray = item.strokeDashArray;
                     }
                     return _jsx(Path, __assign({}, lineSvgProps), index);
-                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : colors ? (_jsx(Defs, { children: _jsx(Mask, { id: "pathMask", children: _jsx(Path, __assign({}, lineSvgPropsOuter, { stroke: colors ? 'white' : color })) }) })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), colors && getColorBackRects(), isNthAreaChart &&
-                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
-                    (startIndex !== 0 || endIndex !== data.length - 1) &&
-                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
-                    propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
-                        ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
-                        ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 })), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : colors ? (_jsx(Defs, { children: _jsx(Mask, { id: "pathMask", children: _jsx(Path, __assign({}, lineSvgPropsOuter, { stroke: colors ? 'white' : color })) }) })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), colors && getColorBackRects(), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
                     return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
                 })) !== null && _b !== void 0 ? _b : null, isAnimated && !renderDataPointsAfterAnimationEnds // in this condition onPress won't work properly in case of multi-line, so it's suggested to use either renderDataPointsAfterAnimationEnds prop if you want to use onPress for data points
                     ? renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key)
@@ -749,17 +753,6 @@ export var LineChart = function (props) {
                         ? renderDataPointsForEachLine()
                         : null, showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
     };
-    // const getClosestValueFromSpacingArray = (spacingArray:number[],x:number):number => {
-    //   let dif=0,prevDif=0,i;
-    //   for(i=0;i<spacingArray.length;i++){
-    //     dif = Math.abs(spacingArray[i]-x)
-    //     if(prevDif!=0 && prevDif<dif){
-    //       break;
-    //     }
-    //     prevDif = dif;
-    //   }
-    //   return i-1;
-    // }
     var activatePointers = function (x) {
         var _a;
         var factor = (x - initialSpacing) / ((_a = props.spacing1) !== null && _a !== void 0 ? _a : spacing); // getClosestValueFromSpacingArray(cumulativeSpacing1,x-initialSpacing)
@@ -869,6 +862,8 @@ export var LineChart = function (props) {
         }
     };
     var renderLine = function (containerHeightIncludingBelowXAxis, zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        if (!points)
+            return null;
         return (_jsx(View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchStart: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchEnd: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
                 return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
             }, onResponderGrant: function (evt) {
@@ -934,6 +929,8 @@ export var LineChart = function (props) {
             ], children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) }, key !== null && key !== void 0 ? key : 0));
     };
     var renderAnimatedLine = function (containerHeightIncludingBelowXAxis, zIndex, points, animatedWidth, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        if (!points)
+            return null;
         return (_jsx(Animated.View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
                 return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
             }, onResponderGrant: function (evt) {

package/dist/PieChart/index.js

@@ -31,10 +31,11 @@ import { PieChartMain } from './main';
 import { pieColors, usePieChart } from 'gifted-charts-core';
 import { isWebApp } from '../utils';
 import { useState } from 'react';
+import { RotatablePie } from '../Components/Rotatable';
 export var PieChart = function (props) {
     if (!props.data)
         return null;
-    var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex;
+    var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, data = _a.data, showTooltip = _a.showTooltip, tooltipHorizontalShift = _a.tooltipHorizontalShift, tooltipVerticalShift = _a.tooltipVerticalShift, tooltipComponent = _a.tooltipComponent, getTooltipText = _a.getTooltipText, tooltipBackgroundColor = _a.tooltipBackgroundColor, tooltipBorderRadius = _a.tooltipBorderRadius, tooltipWidth = _a.tooltipWidth, tooltipTextNoOfLines = _a.tooltipTextNoOfLines, textColor = _a.textColor, textSize = _a.textSize, font = _a.font, fontWeight = _a.fontWeight, fontStyle = _a.fontStyle, tooltipSelectedIndex = _a.tooltipSelectedIndex, setTooltipSelectedIndex = _a.setTooltipSelectedIndex, rotatable = _a.rotatable;
     var _b = __read(useState(0), 2), touchX = _b[0], setTouchX = _b[1];
     var _c = __read(useState(0), 2), touchY = _c[0], setTouchY = _c[1];
     var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
@@ -119,28 +120,34 @@ export var PieChart = function (props) {
                         fontStyle: fontStyle,
                     }, children: getTooltipText(tooltipSelectedIndex) }) })) }));
     };
-    return (_jsxs(View, { style: {
-            height: (radius + extraRadius + paddingVertical / 2) *
-                (props.semiCircle ? 1 : 2),
-            width: (radius + extraRadius + paddingHorizontal / 2) * 2,
-            overflow: 'hidden',
-        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
-                props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
-                (props.focusOnPress || props.sectionAutoFocus) &&
-                selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
-                    position: 'absolute',
-                    top: -extraRadius,
-                    left: -extraRadius,
-                    zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
-                }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
-                        __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
-                                ? "url(#grad".concat(selectedIndex, ")")
-                                : props.data[selectedIndex].color ||
-                                    pieColors[selectedIndex % 9] }),
-                        {
-                            value: total - props.data[selectedIndex].value,
-                            peripheral: true,
-                            strokeWidth: 0,
-                        },
-                    ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
+    var PieChartBody = function () {
+        return (_jsxs(View, { style: {
+                height: (radius + extraRadius + paddingVertical / 2) *
+                    (props.semiCircle ? 1 : 2),
+                width: (radius + extraRadius + paddingHorizontal / 2) * 2,
+                overflow: 'hidden',
+            }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
+                    props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
+                    (props.focusOnPress || props.sectionAutoFocus) &&
+                    selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
+                        position: 'absolute',
+                        top: -extraRadius,
+                        left: -extraRadius,
+                        zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
+                    }, children: _jsx(PieChartMain, __assign({}, props, { setTouchX: setTouchX, setTouchY: setTouchY, tooltipSelectedIndex: tooltipSelectedIndex, setTooltipSelectedIndex: setTooltipSelectedIndex, data: [
+                            __assign(__assign({}, props.data[selectedIndex]), { color: props.showGradient
+                                    ? "url(#grad".concat(selectedIndex, ")")
+                                    : props.data[selectedIndex].color ||
+                                        pieColors[selectedIndex % 9] }),
+                            {
+                                value: total - props.data[selectedIndex].value,
+                                peripheral: true,
+                                strokeWidth: 0,
+                            },
+                        ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth), showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null] }));
+    };
+    if (rotatable && !semiCircle) {
+        return (_jsx(RotatablePie, { children: [_jsx(PieChartBody, {}, "PieChartBody")], initialAngle: startAngle, size: radius * 2 }));
+    }
+    return _jsx(PieChartBody, {});
 };

package/dist/PieChart/main.js

@@ -92,18 +92,19 @@ export var PieChartMain = function (props) {
                             }) }), data.length === 1 || !total ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
                                     ? "url(#grad".concat(0, ")")
                                     : ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.color) || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
-                            var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;
+                            var _a;
+                            var _b = coordinates[index], sx = _b.sx, sy = _b.sy, ax = _b.ax, ay = _b.ay;
                             if (isBiggerPie && index)
                                 return null;
                             return (_jsx(Path, { d: "M ".concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0), " L ").concat(sx, " ").concat(sy, " A ").concat(radius, " ").concat(radius, " 0 ").concat(semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0, " 1 ").concat(ax, " ").concat(ay, " L ").concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0)), stroke: item.strokeColor || strokeColor, strokeWidth: props.focusOnPress && props.selectedIndex === index
                                     ? 0
                                     : item.strokeWidth === 0
                                         ? 0
-                                        : item.strokeWidth || strokeWidth, fill: props.selectedIndex === index || item.peripheral
+                                        : item.strokeWidth || strokeWidth, fill: item.peripheral
                                     ? 'none'
                                     : showGradient
                                         ? "url(#grad".concat(index, ")")
-                                        : item.color || pieColors[index % 9] }, index + 'a'));
+                                        : item.color || pieColors[isBiggerPie ? (_a = props.selectedIndex) !== null && _a !== void 0 ? _a : 0 % 9 : index % 9] }, index + 'a'));
                         })), (showText || showInnerComponent || showExternalLabels) &&
                             data.map(function (item, index) {
                                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -162,7 +163,7 @@ export var PieChartMain = function (props) {
                                                 item.textSize ||
                                                 textSize, fill: item.textBackgroundColor || textBackgroundColor })) : null, showText && (_jsx(SvgText, { fill: item.textColor ||
                                                 textColor ||
-                                                pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || font, fontWeight: item.fontWeight || fontWeight, fontStyle: item.fontStyle || fontStyle || 'normal', x: x +
+                                                'black', fontSize: item.textSize || textSize, fontFamily: item.font || font, fontWeight: item.fontWeight || fontWeight, fontStyle: item.fontStyle || fontStyle || 'normal', x: x +
                                                 (item.shiftTextX || 0) -
                                                 (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), children: item.text || (showValuesAsLabels ? item.value + '' : '') })), localPieInnerComponent ? (_jsx(G, { x: x - pieInnerComponentHeight / 2, y: y - pieInnerComponentWidth / 2, children: (_j = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _j !== void 0 ? _j : null })) : null] }, index));
                             })] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {