react-native-gifted-charts 1.4.21 → 1.4.22

package/dist/LineChart/styles.d.ts

@@ -0,0 +1,43 @@
+export declare const styles: {
+    container: {
+        width: "100%";
+        marginBottom: number;
+        marginRight: number;
+    };
+    horizBar: {
+        flexDirection: "row";
+    };
+    leftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    lastLeftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    leftPart: {
+        justifyContent: "center";
+    };
+    lastLeftPart: {
+        justifyContent: "flex-end";
+    };
+    line: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+        opacity: number;
+    };
+    lastLine: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+    };
+    bottomLabel: {
+        width: "100%";
+    };
+    customDataPointContainer: {
+        position: "absolute";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

package/dist/LineChart/styles.js

@@ -1 +1,46 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var styles=exports.styles=_reactNative.StyleSheet.create({container:{width:'100%',marginBottom:40,marginRight:40},horizBar:{flexDirection:'row'},leftLabel:{justifyContent:'center',alignItems:'center'},lastLeftLabel:{justifyContent:'center',alignItems:'center'},leftPart:{justifyContent:'center'},lastLeftPart:{justifyContent:'flex-end'},line:{width:'100%',height:1,backgroundColor:'gray',opacity:0.5},lastLine:{width:'100%',height:1,backgroundColor:'black'},bottomLabel:{width:'100%'},customDataPointContainer:{position:'absolute',justifyContent:'center',alignItems:'center'}});
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        marginBottom: 40,
+        marginRight: 40,
+    },
+    horizBar: {
+        flexDirection: 'row',
+    },
+    leftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    lastLeftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    leftPart: {
+        justifyContent: 'center',
+        // width: '100%',
+    },
+    lastLeftPart: {
+        justifyContent: 'flex-end',
+        // width: '100%',
+    },
+    line: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'gray',
+        opacity: 0.5,
+    },
+    lastLine: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'black',
+    },
+    bottomLabel: {
+        width: '100%',
+    },
+    customDataPointContainer: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/PieChart/index.d.ts

@@ -0,0 +1,2 @@
+import { PieChartPropsType } from 'gifted-charts-core';
+export declare const PieChart: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element | null;

package/dist/PieChart/index.js

@@ -1 +1,99 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.PieChart=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _main=require("./main");var _giftedChartsCore=require("gifted-charts-core");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/PieChart/index.tsx";var PieChart=exports.PieChart=function PieChart(props){var _usePieChart=(0,_giftedChartsCore.usePieChart)(props),radius=_usePieChart.radius,extraRadiusForFocused=_usePieChart.extraRadiusForFocused,selectedIndex=_usePieChart.selectedIndex,setSelectedIndex=_usePieChart.setSelectedIndex,startAngle=_usePieChart.startAngle,total=_usePieChart.total,donut=_usePieChart.donut,isThreeD=_usePieChart.isThreeD,semiCircle=_usePieChart.semiCircle,inwardExtraLengthForFocused=_usePieChart.inwardExtraLengthForFocused,canvasWidth=_usePieChart.canvasWidth,canvasHeight=_usePieChart.canvasHeight,innerRadius=_usePieChart.innerRadius,innerCircleColor=_usePieChart.innerCircleColor,innerCircleBorderWidth=_usePieChart.innerCircleBorderWidth,innerCircleBorderColor=_usePieChart.innerCircleBorderColor,shiftInnerCenterX=_usePieChart.shiftInnerCenterX,shiftInnerCenterY=_usePieChart.shiftInnerCenterY,tiltAngle=_usePieChart.tiltAngle,isDataShifted=_usePieChart.isDataShifted,paddingHorizontal=_usePieChart.paddingHorizontal,paddingVertical=_usePieChart.paddingVertical;var renderInnerCircle=function renderInnerCircle(innerRadius,innerCircleBorderWidth){if(props.centerLabelComponent||donut&&!isDataShifted){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{height:innerRadius*2,width:innerRadius*2,borderRadius:innerRadius,position:'absolute',alignSelf:'center',backgroundColor:innerCircleColor,left:canvasWidth/2-innerRadius+shiftInnerCenterX+extraRadiusForFocused+paddingHorizontal/2,top:canvasHeight/2-innerRadius+shiftInnerCenterY+extraRadiusForFocused+paddingVertical/2,borderWidth:innerCircleBorderWidth,borderColor:innerCircleBorderColor,justifyContent:'center',alignItems:'center'},isThreeD&&{borderTopWidth:innerCircleBorderWidth*5,borderLeftWidth:shiftInnerCenterX?innerCircleBorderWidth*2:innerCircleBorderWidth,transform:[{rotateX:tiltAngle}]},semiCircle&&isThreeD&&{borderTopWidth:isThreeD?innerCircleBorderWidth*5:innerCircleBorderWidth,borderLeftWidth:0.5,borderLeftColor:innerCircleColor,borderBottomWidth:0,borderRightWidth:0.5,borderRightColor:innerCircleColor}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:{marginTop:semiCircle?-0.5*innerRadius:0},children:props.centerLabelComponent?props.centerLabelComponent():null})});}return null;};if(!total)return null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{height:(radius+extraRadiusForFocused+paddingVertical/2)*(props.semiCircle?1:2),width:(radius+extraRadiusForFocused+paddingHorizontal/2)*2,overflow:'hidden'},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute'},children:(0,_jsxRuntime.jsx)(_main.PieChartMain,Object.assign({},props,{selectedIndex:selectedIndex,setSelectedIndex:setSelectedIndex,paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical,extraRadiusForFocused:extraRadiusForFocused}))}),renderInnerCircle(innerRadius,innerCircleBorderWidth),props.data.length>1&&props.data[selectedIndex]&&(props.focusOnPress||props.sectionAutoFocus)&&selectedIndex!==-1&&(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"box-none",style:{position:'absolute',top:-extraRadiusForFocused,left:-extraRadiusForFocused},children:(0,_jsxRuntime.jsx)(_main.PieChartMain,Object.assign({},props,{data:[{value:props.data[selectedIndex].value,text:props.data[selectedIndex].text,color:props.data[selectedIndex].color||_giftedChartsCore.pieColors[selectedIndex%9],strokeColor:props.data[selectedIndex].strokeColor||undefined,strokeWidth:props.data[selectedIndex].strokeWidth||undefined,gradientCenterColor:props.data[selectedIndex].gradientCenterColor||undefined,shiftTextX:props.data[selectedIndex].shiftTextX||undefined,shiftTextY:props.data[selectedIndex].shiftTextY||undefined},{value:total-props.data[selectedIndex].value,onPress:function onPress(){return alert('black');},peripheral:true,strokeWidth:0}],radius:radius+extraRadiusForFocused,initialAngle:startAngle,innerRadius:props.innerRadius||radius/2.5,isBiggerPie:true,setSelectedIndex:setSelectedIndex,paddingHorizontal:paddingHorizontal,paddingVertical:paddingVertical,extraRadiusForFocused:extraRadiusForFocused}))}),renderInnerCircle(innerRadius-inwardExtraLengthForFocused,inwardExtraLengthForFocused?0:innerCircleBorderWidth)]});};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PieChartMain } from './main';
+import { pieColors, usePieChart } from 'gifted-charts-core';
+export var PieChart = function (props) {
+    var _a = usePieChart(props), radius = _a.radius, extraRadiusForFocused = _a.extraRadiusForFocused, 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;
+    var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
+        if (props.centerLabelComponent || (donut && !isDataShifted)) {
+            return (_jsx(View, { style: [
+                    {
+                        height: innerRadius * 2,
+                        width: innerRadius * 2,
+                        borderRadius: innerRadius,
+                        position: 'absolute',
+                        // zIndex: 100,
+                        alignSelf: 'center',
+                        backgroundColor: innerCircleColor,
+                        left: canvasWidth / 2 -
+                            innerRadius +
+                            shiftInnerCenterX +
+                            extraRadiusForFocused +
+                            paddingHorizontal / 2,
+                        top: canvasHeight / 2 -
+                            innerRadius +
+                            shiftInnerCenterY +
+                            extraRadiusForFocused +
+                            paddingVertical / 2,
+                        borderWidth: innerCircleBorderWidth,
+                        borderColor: innerCircleBorderColor,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    },
+                    isThreeD && {
+                        borderTopWidth: innerCircleBorderWidth * 5,
+                        borderLeftWidth: shiftInnerCenterX
+                            ? innerCircleBorderWidth * 2
+                            : innerCircleBorderWidth,
+                        transform: [{ rotateX: tiltAngle }],
+                    },
+                    semiCircle &&
+                        isThreeD && {
+                        borderTopWidth: isThreeD
+                            ? innerCircleBorderWidth * 5
+                            : innerCircleBorderWidth,
+                        borderLeftWidth: 0.5,
+                        borderLeftColor: innerCircleColor,
+                        borderBottomWidth: 0,
+                        borderRightWidth: 0.5,
+                        borderRightColor: innerCircleColor,
+                    },
+                ], children: _jsx(View, { style: { marginTop: semiCircle ? -0.5 * innerRadius : 0 }, children: props.centerLabelComponent ? props.centerLabelComponent() : null }) }));
+        }
+        return null;
+    };
+    if (!total)
+        return null;
+    return (_jsxs(View, { style: {
+            height: (radius + extraRadiusForFocused + paddingVertical / 2) *
+                (props.semiCircle ? 1 : 2),
+            width: (radius + extraRadiusForFocused + paddingHorizontal / 2) * 2,
+            overflow: 'hidden',
+        }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) }), 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: -extraRadiusForFocused,
+                    left: -extraRadiusForFocused,
+                }, children: _jsx(PieChartMain, __assign({}, props, { data: [
+                        {
+                            value: props.data[selectedIndex].value,
+                            text: props.data[selectedIndex].text,
+                            color: props.data[selectedIndex].color ||
+                                pieColors[selectedIndex % 9],
+                            strokeColor: props.data[selectedIndex].strokeColor || undefined,
+                            strokeWidth: props.data[selectedIndex].strokeWidth || undefined,
+                            gradientCenterColor: props.data[selectedIndex].gradientCenterColor || undefined,
+                            shiftTextX: props.data[selectedIndex].shiftTextX || undefined,
+                            shiftTextY: props.data[selectedIndex].shiftTextY || undefined,
+                        },
+                        {
+                            value: total - props.data[selectedIndex].value,
+                            onPress: function () { return alert('black'); },
+                            peripheral: true,
+                            strokeWidth: 0,
+                        },
+                    ], radius: radius + extraRadiusForFocused, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth)] }));
+};

package/dist/PieChart/main.d.ts

@@ -0,0 +1,2 @@
+import { PieChartMainProps } from 'gifted-charts-core';
+export declare const PieChartMain: (props: PieChartMainProps) => import("react/jsx-runtime").JSX.Element;

package/dist/PieChart/main.js

@@ -1 +1,182 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.PieChartMain=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _giftedChartsCore=require("gifted-charts-core");var _utils=require("../utils");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/PieChart/main.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var PieChartMain=exports.PieChartMain=function PieChartMain(props){var _getPieChartMainProps=(0,_giftedChartsCore.getPieChartMainProps)(props),isThreeD=_getPieChartMainProps.isThreeD,isBiggerPie=_getPieChartMainProps.isBiggerPie,data=_getPieChartMainProps.data,showInnerComponent=_getPieChartMainProps.showInnerComponent,radius=_getPieChartMainProps.radius,canvasWidth=_getPieChartMainProps.canvasWidth,canvasHeight=_getPieChartMainProps.canvasHeight,shadowWidth=_getPieChartMainProps.shadowWidth,backgroundColor=_getPieChartMainProps.backgroundColor,shadowColor=_getPieChartMainProps.shadowColor,semiCircle=_getPieChartMainProps.semiCircle,pi=_getPieChartMainProps.pi,initialAngle=_getPieChartMainProps.initialAngle,shadow=_getPieChartMainProps.shadow,donut=_getPieChartMainProps.donut,strokeWidth=_getPieChartMainProps.strokeWidth,strokeColor=_getPieChartMainProps.strokeColor,innerRadius=_getPieChartMainProps.innerRadius,showText=_getPieChartMainProps.showText,textColor=_getPieChartMainProps.textColor,textSize=_getPieChartMainProps.textSize,tiltAngle=_getPieChartMainProps.tiltAngle,labelsPosition=_getPieChartMainProps.labelsPosition,showTextBackground=_getPieChartMainProps.showTextBackground,textBackgroundColor=_getPieChartMainProps.textBackgroundColor,showValuesAsLabels=_getPieChartMainProps.showValuesAsLabels,showGradient=_getPieChartMainProps.showGradient,gradientCenterColor=_getPieChartMainProps.gradientCenterColor,toggleFocusOnPress=_getPieChartMainProps.toggleFocusOnPress,minShiftX=_getPieChartMainProps.minShiftX,minShiftY=_getPieChartMainProps.minShiftY,total=_getPieChartMainProps.total,horizAdjustment=_getPieChartMainProps.horizAdjustment,vertAdjustment=_getPieChartMainProps.vertAdjustment,cx=_getPieChartMainProps.cx,cy=_getPieChartMainProps.cy,pData=_getPieChartMainProps.pData,mData=_getPieChartMainProps.mData,paddingHorizontal=_getPieChartMainProps.paddingHorizontal,paddingVertical=_getPieChartMainProps.paddingVertical,extraRadiusForFocused=_getPieChartMainProps.extraRadiusForFocused;return(0,_jsxRuntime.jsxs)(_reactNative.View,{pointerEvents:"box-none",style:[{backgroundColor:backgroundColor,height:semiCircle?(canvasHeight+paddingVertical)/2+extraRadiusForFocused:canvasHeight+paddingVertical+extraRadiusForFocused*2,width:canvasWidth+paddingHorizontal+extraRadiusForFocused*2,overflow:'hidden'},isThreeD&&{transform:[{rotateX:tiltAngle}]}],children:[(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{pointerEvents:_utils.rnVersion>=720000?'box-none':'auto',viewBox:`${strokeWidth/-2+minShiftX-extraRadiusForFocused-paddingHorizontal/2} ${strokeWidth/-2+minShiftY-extraRadiusForFocused-paddingVertical/2} ${(radius+extraRadiusForFocused+strokeWidth)*2+paddingHorizontal+horizAdjustment+(horizAdjustment?strokeWidth:0)} ${(radius+extraRadiusForFocused+strokeWidth)*2+paddingVertical+vertAdjustment+(vertAdjustment?strokeWidth:0)}`,height:(radius+extraRadiusForFocused)*2+strokeWidth+paddingVertical,width:(radius+extraRadiusForFocused)*2+strokeWidth+paddingHorizontal,children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Defs,{children:data.map(function(item,index){return(0,_jsxRuntime.jsxs)(_reactNativeSvg.RadialGradient,{id:'grad'+index,cx:"50%",cy:"50%",rx:"50%",ry:"50%",fx:"50%",fy:"50%",gradientUnits:"userSpaceOnUse",children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"0%",stopColor:item.gradientCenterColor||gradientCenterColor,stopOpacity:"1"}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"100%",stopColor:item.color||_giftedChartsCore.pieColors[index%9],stopOpacity:"1"})]},index+'');})}),data.length===1?(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:cx,cy:cy,r:radius,fill:showGradient?`url(#grad${0})`:data[0].color||_giftedChartsCore.pieColors[0%9],onPress:function onPress(){data[0].onPress?data[0].onPress():props.onPress?props.onPress(data[0],0):null;}})}):data.map(function(item,index){var nextItem;if(index===pData.length-1)nextItem=pData[0];else nextItem=pData[index+1];var sx=cx*(1+Math.sin(2*pi*pData[index]+initialAngle))+(item.shiftX||0);var sy=cy*(1-Math.cos(2*pi*pData[index]+initialAngle))+(item.shiftY||0);var ax=cx*(1+Math.sin(2*pi*nextItem+initialAngle))+(item.shiftX||0);var ay=cy*(1-Math.cos(2*pi*nextItem+initialAngle))+(item.shiftY||0);if(isBiggerPie&&index)return null;return(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:`M ${cx+(item.shiftX||0)} ${cy+(item.shiftY||0)} L ${sx} ${sy} A ${radius} ${radius} 0 ${semiCircle?0:data[index].value>total/2?1:0} 1 ${ax} ${ay} L ${cx+(item.shiftX||0)} ${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?'transparent':showGradient?`url(#grad${index})`:item.color||_giftedChartsCore.pieColors[index%9],onPress:function onPress(){if(item.onPress){item.onPress();}else if(props.onPress){props.onPress(item,index);}if(props.focusOnPress){if(props.selectedIndex===index||props.isBiggerPie){if(toggleFocusOnPress){props.setSelectedIndex(-1);}}else{props.setSelectedIndex(index);}}}},index+'a');}),(showText||showInnerComponent)&&data.map(function(item,index){var _item$pieInnerCompone,_ref,_item$shiftTextBackgr,_ref2,_item$shiftTextBackgr2,_localPieInnerCompone;var localPieInnerComponent=(_item$pieInnerCompone=item.pieInnerComponent)!=null?_item$pieInnerCompone:props.pieInnerComponent;if(isBiggerPie&&index)return null;if(!props.data[index].value)return null;var mx=cx*(1+Math.sin(2*pi*mData[index]+initialAngle));var my=cy*(1-Math.cos(2*pi*mData[index]+initialAngle));var midx=(mx+cx)/2;var midy=(my+cy)/2;var x=midx,y=midy;var labelPosition=item.labelPosition||labelsPosition;if(labelPosition==='onBorder'){x=mx;y=my;}else if(labelPosition==='outward'){x=(midx+mx)/2;y=(midy+my)/2;}else if(labelPosition==='inward'){x=(midx+cx)/2;y=(midy+cy)/2;}x+=item.shiftX||0;y+=item.shiftY||0;if(data.length===1){if(donut){y=(radius-innerRadius+(item.textBackgroundRadius||props.textBackgroundRadius||item.textSize||textSize))/2;}else{y=cy;}}return(0,_jsxRuntime.jsxs)(_react.default.Fragment,{children:[showTextBackground?(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:x+((_ref=(_item$shiftTextBackgr=item.shiftTextBackgroundX)!=null?_item$shiftTextBackgr:item.shiftTextX)!=null?_ref:0),cy:y+((_ref2=(_item$shiftTextBackgr2=item.shiftTextBackgroundY)!=null?_item$shiftTextBackgr2:item.shiftTextY)!=null?_ref2:0)-(item.textSize||textSize)/4,r:item.textBackgroundRadius||props.textBackgroundRadius||item.textSize||textSize,fill:item.textBackgroundColor||textBackgroundColor,onPress:function onPress(){item.onLabelPress?item.onLabelPress():props.onLabelPress?props.onLabelPress(item,index):item.onPress?item.onPress():props.onPress?props.onPress(item,index):null;if(props.focusOnPress){if(props.selectedIndex===index){if(toggleFocusOnPress){props.setSelectedIndex(-1);}}else{props.setSelectedIndex(index);}}}}):null,(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{fill:item.textColor||textColor||_giftedChartsCore.pieColors[(index+2)%9],fontSize:item.textSize||textSize,fontFamily:item.font||props.font,fontWeight:item.fontWeight||props.fontWeight,fontStyle:item.fontStyle||props.fontStyle||'normal',x:x+(item.shiftTextX||0)-(item.textSize||textSize)/1.8,y:y+(item.shiftTextY||0),onPress:function onPress(){item.onLabelPress?item.onLabelPress():props.onLabelPress?props.onLabelPress(item,index):item.onPress?item.onPress():props.onPress?props.onPress(item,index):null;if(props.focusOnPress){if(props.selectedIndex===index){if(toggleFocusOnPress){props.setSelectedIndex(-1);}}else{props.setSelectedIndex(index);}}},children:item.text||(showValuesAsLabels?item.value+'':'')}),localPieInnerComponent?(0,_jsxRuntime.jsx)(_reactNativeSvg.G,{x:x,y:y,children:(_localPieInnerCompone=localPieInnerComponent==null?void 0:localPieInnerComponent(item,index))!=null?_localPieInnerCompone:null}):null]},index);})]}),isThreeD&&shadow&&!semiCircle?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:radius*2,height:radius*2,backgroundColor:shadowColor,borderRadius:radius,position:'absolute',top:shadowWidth+paddingVertical/2,left:paddingHorizontal/2,zIndex:-1}}):null]});};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, } from 'react-native-svg';
+import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
+import { rnVersion } from '../utils';
+export var PieChartMain = function (props) {
+    var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, toggleFocusOnPress = _a.toggleFocusOnPress, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, pData = _a.pData, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadiusForFocused = _a.extraRadiusForFocused;
+    return (_jsxs(View, { pointerEvents: "box-none", style: [
+            {
+                backgroundColor: backgroundColor,
+                height: semiCircle
+                    ? (canvasHeight + paddingVertical) / 2 + extraRadiusForFocused
+                    : canvasHeight + paddingVertical + extraRadiusForFocused * 2,
+                width: canvasWidth + paddingHorizontal + extraRadiusForFocused * 2,
+                overflow: 'hidden',
+            },
+            isThreeD && { transform: [{ rotateX: tiltAngle }] },
+        ], children: [_jsxs(Svg, { pointerEvents: rnVersion >= 720000 ? 'box-none' : 'auto', viewBox: "".concat(strokeWidth / -2 + minShiftX - extraRadiusForFocused - paddingHorizontal / 2, " ").concat(strokeWidth / -2 +
+                    minShiftY -
+                    extraRadiusForFocused -
+                    paddingVertical / 2, " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
+                    paddingHorizontal +
+                    horizAdjustment +
+                    (horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
+                    paddingVertical +
+                    vertAdjustment +
+                    (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
+                            return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
+                        }) }), data.length === 1 ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
+                                ? "url(#grad".concat(0, ")")
+                                : data[0].color || pieColors[0 % 9], onPress: function () {
+                                data[0].onPress
+                                    ? data[0].onPress()
+                                    : props.onPress
+                                        ? props.onPress(data[0], 0)
+                                        : null;
+                            } }) })) : (data.map(function (item, index) {
+                        // console.log('index', index);
+                        var nextItem;
+                        if (index === pData.length - 1)
+                            nextItem = pData[0];
+                        else
+                            nextItem = pData[index + 1];
+                        var sx = cx * (1 + Math.sin(2 * pi * pData[index] + initialAngle)) +
+                            (item.shiftX || 0);
+                        var sy = cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
+                            (item.shiftY || 0);
+                        var ax = cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
+                            (item.shiftX || 0);
+                        var ay = cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
+                            (item.shiftY || 0);
+                        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
+                                ? 'transparent'
+                                : showGradient
+                                    ? "url(#grad".concat(index, ")")
+                                    : item.color || pieColors[index % 9], onPress: function () {
+                                if (item.onPress) {
+                                    item.onPress();
+                                }
+                                else if (props.onPress) {
+                                    props.onPress(item, index);
+                                }
+                                if (props.focusOnPress) {
+                                    if (props.selectedIndex === index || props.isBiggerPie) {
+                                        if (toggleFocusOnPress) {
+                                            props.setSelectedIndex(-1);
+                                        }
+                                    }
+                                    else {
+                                        props.setSelectedIndex(index);
+                                    }
+                                }
+                            } }, index + 'a'));
+                    })), (showText || showInnerComponent) &&
+                        data.map(function (item, index) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
+                            if (isBiggerPie && index)
+                                return null;
+                            if (!props.data[index].value)
+                                return null;
+                            var mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
+                            var my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
+                            var midx = (mx + cx) / 2;
+                            var midy = (my + cy) / 2;
+                            var x = midx, y = midy;
+                            var labelPosition = item.labelPosition || labelsPosition;
+                            if (labelPosition === 'onBorder') {
+                                x = mx;
+                                y = my;
+                            }
+                            else if (labelPosition === 'outward') {
+                                x = (midx + mx) / 2;
+                                y = (midy + my) / 2;
+                            }
+                            else if (labelPosition === 'inward') {
+                                x = (midx + cx) / 2;
+                                y = (midy + cy) / 2;
+                            }
+                            x += item.shiftX || 0;
+                            y += item.shiftY || 0;
+                            if (data.length === 1) {
+                                if (donut) {
+                                    y =
+                                        (radius -
+                                            innerRadius +
+                                            (item.textBackgroundRadius ||
+                                                props.textBackgroundRadius ||
+                                                item.textSize ||
+                                                textSize)) /
+                                            2;
+                                }
+                                else {
+                                    y = cy;
+                                }
+                            }
+                            return (_jsxs(React.Fragment, { children: [showTextBackground ? (_jsx(Circle, { cx: x + ((_c = (_b = item.shiftTextBackgroundX) !== null && _b !== void 0 ? _b : item.shiftTextX) !== null && _c !== void 0 ? _c : 0), cy: y +
+                                            ((_e = (_d = item.shiftTextBackgroundY) !== null && _d !== void 0 ? _d : item.shiftTextY) !== null && _e !== void 0 ? _e : 0) -
+                                            (item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
+                                            props.textBackgroundRadius ||
+                                            item.textSize ||
+                                            textSize, fill: item.textBackgroundColor || textBackgroundColor, onPress: function () {
+                                            item.onLabelPress
+                                                ? item.onLabelPress()
+                                                : props.onLabelPress
+                                                    ? props.onLabelPress(item, index)
+                                                    : item.onPress
+                                                        ? item.onPress()
+                                                        : props.onPress
+                                                            ? props.onPress(item, index)
+                                                            : null;
+                                            if (props.focusOnPress) {
+                                                if (props.selectedIndex === index) {
+                                                    if (toggleFocusOnPress) {
+                                                        props.setSelectedIndex(-1);
+                                                    }
+                                                }
+                                                else {
+                                                    props.setSelectedIndex(index);
+                                                }
+                                            }
+                                        } })) : null, _jsx(SvgText, { fill: item.textColor || textColor || pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
+                                            (item.shiftTextX || 0) -
+                                            (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
+                                            item.onLabelPress
+                                                ? item.onLabelPress()
+                                                : props.onLabelPress
+                                                    ? props.onLabelPress(item, index)
+                                                    : item.onPress
+                                                        ? item.onPress()
+                                                        : props.onPress
+                                                            ? props.onPress(item, index)
+                                                            : null;
+                                            if (props.focusOnPress) {
+                                                if (props.selectedIndex === index) {
+                                                    if (toggleFocusOnPress) {
+                                                        props.setSelectedIndex(-1);
+                                                    }
+                                                }
+                                                else {
+                                                    props.setSelectedIndex(index);
+                                                }
+                                            }
+                                        }, children: item.text || (showValuesAsLabels ? item.value + '' : '') }), localPieInnerComponent ? (_jsx(G, { x: x, y: y, children: (_f = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _f !== void 0 ? _f : null })) : null] }, index));
+                        })] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {
+                    width: radius * 2,
+                    height: radius * 2,
+                    backgroundColor: shadowColor,
+                    borderRadius: radius,
+                    position: 'absolute',
+                    top: shadowWidth + paddingVertical / 2,
+                    left: paddingHorizontal / 2,
+                    zIndex: -1,
+                } })) : null] }));
+};

package/dist/PieChartPro/index.d.ts

@@ -0,0 +1,2 @@
+import { PieChartPropsType } from 'gifted-charts-core';
+export declare const PieChartPro: (props: PieChartPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/PieChartPro/index.js

@@ -1 +1,124 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.PieChartPro=void 0;var _react=_interopRequireWildcard(require("react"));var _giftedChartsCore=require("gifted-charts-core");var _reactNativeSvg=require("react-native-svg");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/PieChartPro/index.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var PieChartPro=exports.PieChartPro=function PieChartPro(props){var _usePiePro=(0,_giftedChartsCore.usePiePro)(props),radius=_usePiePro.radius,total=_usePiePro.total,donut=_usePiePro.donut,strokeWidth=_usePiePro.strokeWidth,maxStrokeWidth=_usePiePro.maxStrokeWidth,animationDuration=_usePiePro.animationDuration,initial=_usePiePro.initial,dInitial=_usePiePro.dInitial,dFinal=_usePiePro.dFinal,getStartCaps=_usePiePro.getStartCaps,getEndCaps=_usePiePro.getEndCaps,getTextCoordinates=_usePiePro.getTextCoordinates,height=_usePiePro.height,heightFactor=_usePiePro.heightFactor,svgProps=_usePiePro.svgProps;var data=props.data,curvedStartEdges=props.curvedStartEdges,curvedEndEdges=props.curvedEndEdges,_props$edgesRadius=props.edgesRadius,edgesRadius=_props$edgesRadius===void 0?0:_props$edgesRadius,showGradient=props.showGradient,ring=props.ring,centerLabelComponent=props.centerLabelComponent,strokeDashArray=props.strokeDashArray,semiCircle=props.semiCircle;var isAnimated=props.isAnimated;if(!props.semiCircle&&data.some(function(dataItem){return dataItem.value>total/2;})){isAnimated=false;}var AnimatedPath=_reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Path);var AnimatedText=_reactNative.Animated.createAnimatedComponent(_reactNativeSvg.Text);var animatedValues=data.map(function(i){return new _reactNative.Animated.Value(0);});var animatedOpacityValue=new _reactNative.Animated.Value(0);var animatedPaths=data.map(function(item,index){var _animatedValues$index;return(_animatedValues$index=animatedValues[index])==null?void 0:_animatedValues$index.interpolate({inputRange:[0,1],outputRange:[dInitial[index],dFinal[index]]});});var animatedOpacity=animatedOpacityValue.interpolate({inputRange:[0,1],outputRange:[0,1]});(0,_react.useEffect)(function(){_reactNative.Animated.timing(animatedOpacityValue,{toValue:1,duration:10,useNativeDriver:true,delay:animationDuration}).start();animatedValues.forEach(function(animatedValue){return _reactNative.Animated.timing(animatedValue,{toValue:1,duration:animationDuration,useNativeDriver:true}).start();});},[data]);var adjustHeight=height*heightFactor;var rnSvgProps=semiCircle?{}:svgProps;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{display:'flex',justifyContent:'center',alignItems:'center',height:adjustHeight,width:height*2},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:semiCircle?{position:'absolute',bottom:0}:{position:'absolute'},children:centerLabelComponent?centerLabelComponent():null}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Svg,Object.assign({},rnSvgProps,{viewBox:semiCircle?``:`${-maxStrokeWidth*1.5} ${-maxStrokeWidth-(semiCircle?height/2:0)} ${adjustHeight} ${adjustHeight}`,transform:semiCircle?[]:[{scaleY:maxStrokeWidth?1+maxStrokeWidth/(radius*2):1}],children:total?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Defs,{children:data.map(function(item,index){return(0,_jsxRuntime.jsxs)(_reactNativeSvg.RadialGradient,{id:'grad'+index,cx:"50%",cy:"50%",rx:"50%",ry:"50%",fx:"50%",fy:"50%",gradientUnits:"userSpaceOnUse",children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"0%",stopColor:item.gradientCenterColor,stopOpacity:"1"}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"100%",stopColor:item.color||_giftedChartsCore.pieColors[index%9],stopOpacity:"1"})]},index+'');})}),data.map(function(item,index){var _item$strokeWidth,_ref,_item$strokeColor,_item$strokeDashArray;var borderWidth=(_item$strokeWidth=item.strokeWidth)!=null?_item$strokeWidth:strokeWidth;var borderColor=(_ref=(_item$strokeColor=item.strokeColor)!=null?_item$strokeColor:props.strokeColor)!=null?_ref:borderWidth?'black':'transparent';var strokeDashArrayLocal=(_item$strokeDashArray=item.strokeDashArray)!=null?_item$strokeDashArray:strokeDashArray;return(0,_jsxRuntime.jsx)(AnimatedPath,{id:"renderPath",d:isAnimated?animatedPaths[index]:dFinal[index],fill:ring?'transparent':showGradient?`url(#grad${index})`:data[index].color||_giftedChartsCore.pieColors[index%9],strokeWidth:borderWidth,strokeDasharray:strokeDashArrayLocal,stroke:borderColor},`path${index}`);}),donut?data.map(function(item,index){if(curvedStartEdges||edgesRadius||item.isStartEdgeCurved||item.startEdgeRadius)return(0,_jsxRuntime.jsx)(AnimatedPath,{d:`${initial} ${getStartCaps(index,item)}`,opacity:isAnimated?animatedOpacity:1,fill:showGradient?`url(#grad${index})`:data[index].color||_giftedChartsCore.pieColors[index%9]},`cap${index}`);return null;}):null,donut?data.map(function(item,index){if(curvedEndEdges||edgesRadius||item.isEndEdgeCurved||item.endEdgeRadius)return(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:`${initial} ${getEndCaps(index,item)}`,fill:showGradient?`url(#grad${index})`:data[index].color||_giftedChartsCore.pieColors[index%9]},`cap${index}`);return null;}):null,data.map(function(item,index){var _ref2,_item$textSize;var _getTextCoordinates=getTextCoordinates(index,item.labelPosition),x=_getTextCoordinates.x,y=_getTextCoordinates.y;return(0,_jsxRuntime.jsx)(AnimatedText,{fill:item.textColor||props.textColor||_giftedChartsCore.pieColors[(index+2)%9],opacity:isAnimated?animatedOpacity:1,fontSize:item.textSize||props.textSize,fontFamily:item.font||props.font,fontWeight:item.fontWeight||props.fontWeight,fontStyle:item.fontStyle||props.fontStyle||'normal',x:x+(item.shiftTextX||0)-((_ref2=(_item$textSize=item.textSize)!=null?_item$textSize:props.textSize)!=null?_ref2:0)/1.8,y:y+(item.shiftTextY||0),onPress:function onPress(){item.onLabelPress?item.onLabelPress():props.onLabelPress?props.onLabelPress(item,index):item.onPress?item.onPress():props.onPress==null?void 0:props.onPress(item,index);},children:item.text||(props.showValuesAsLabels?item.value+'':'')},`label${index}`);})]}):null}))]});};
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { pieColors, usePiePro, } from 'gifted-charts-core';
+import { Defs, Path, Stop, Svg, Text as SvgText, RadialGradient, } from 'react-native-svg';
+import { Animated, View } from 'react-native';
+export var PieChartPro = function (props) {
+    var _a = usePiePro(props), radius = _a.radius, total = _a.total, donut = _a.donut, strokeWidth = _a.strokeWidth, maxStrokeWidth = _a.maxStrokeWidth, animationDuration = _a.animationDuration, initial = _a.initial, dInitial = _a.dInitial, dFinal = _a.dFinal, getStartCaps = _a.getStartCaps, getEndCaps = _a.getEndCaps, getTextCoordinates = _a.getTextCoordinates, height = _a.height, heightFactor = _a.heightFactor, svgProps = _a.svgProps;
+    var data = props.data, curvedStartEdges = props.curvedStartEdges, curvedEndEdges = props.curvedEndEdges, _b = props.edgesRadius, edgesRadius = _b === void 0 ? 0 : _b, showGradient = props.showGradient, ring = props.ring, centerLabelComponent = props.centerLabelComponent, strokeDashArray = props.strokeDashArray, semiCircle = props.semiCircle;
+    var isAnimated = props.isAnimated;
+    if (!props.semiCircle && data.some(function (dataItem) { return dataItem.value > total / 2; })) {
+        // if we have an obtuse arc, we cant animate
+        isAnimated = false;
+    }
+    var AnimatedPath = Animated.createAnimatedComponent(Path);
+    var AnimatedText = Animated.createAnimatedComponent(SvgText);
+    var animatedValues = data.map(function (i) { return new Animated.Value(0); });
+    var animatedOpacityValue = new Animated.Value(0);
+    var animatedPaths = data.map(function (item, index) {
+        var _a;
+        return (_a = animatedValues[index]) === null || _a === void 0 ? void 0 : _a.interpolate({
+            inputRange: [0, 1],
+            outputRange: [dInitial[index], dFinal[index]],
+        });
+    });
+    var animatedOpacity = animatedOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    useEffect(function () {
+        Animated.timing(animatedOpacityValue, {
+            toValue: 1,
+            duration: 10,
+            useNativeDriver: true,
+            delay: animationDuration,
+        }).start();
+        animatedValues.forEach(function (animatedValue) {
+            return Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: animationDuration,
+                useNativeDriver: true,
+            }).start();
+        });
+    }, [data]);
+    var adjustHeight = height * heightFactor;
+    var rnSvgProps = semiCircle ? {} : svgProps;
+    return (_jsxs(View, { style: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: adjustHeight,
+            width: height * 2,
+        }, children: [_jsx(View, { style: semiCircle
+                    ? { position: 'absolute', bottom: 0 }
+                    : { position: 'absolute' }, children: centerLabelComponent ? centerLabelComponent() : null }), _jsx(Svg, __assign({}, rnSvgProps, { viewBox: semiCircle
+                    ? ""
+                    : "".concat(-maxStrokeWidth * 1.5, " ").concat(-maxStrokeWidth - (semiCircle ? height / 2 : 0), " ").concat(adjustHeight, " ").concat(adjustHeight), transform: semiCircle
+                    ? []
+                    : [{ scaleY: maxStrokeWidth ? 1 + maxStrokeWidth / (radius * 2) : 1 }], children: total ? (_jsxs(_Fragment, { children: [_jsx(Defs, { children: data.map(function (item, index) {
+                                return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
+                            }) }), data.map(function (item, index) {
+                            var _a, _b, _c, _d;
+                            var borderWidth = (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : strokeWidth;
+                            var borderColor = (_c = (_b = item.strokeColor) !== null && _b !== void 0 ? _b : props.strokeColor) !== null && _c !== void 0 ? _c : (borderWidth ? 'black' : 'transparent');
+                            var strokeDashArrayLocal = (_d = item.strokeDashArray) !== null && _d !== void 0 ? _d : strokeDashArray;
+                            return (_jsx(AnimatedPath, { id: "renderPath", d: isAnimated ? animatedPaths[index] : dFinal[index], fill: ring
+                                    ? 'transparent'
+                                    : showGradient
+                                        ? "url(#grad".concat(index, ")")
+                                        : data[index].color || pieColors[index % 9], strokeWidth: borderWidth, strokeDasharray: strokeDashArrayLocal, stroke: borderColor }, "path".concat(index)));
+                        }), donut
+                            ? data.map(function (item, index) {
+                                if (curvedStartEdges ||
+                                    edgesRadius ||
+                                    item.isStartEdgeCurved ||
+                                    item.startEdgeRadius)
+                                    return (_jsx(AnimatedPath, { d: "".concat(initial, " ").concat(getStartCaps(index, item)), opacity: isAnimated ? animatedOpacity : 1, fill: showGradient
+                                            ? "url(#grad".concat(index, ")")
+                                            : data[index].color || pieColors[index % 9] }, "cap".concat(index)));
+                                return null;
+                            })
+                            : null, donut
+                            ? data.map(function (item, index) {
+                                if (curvedEndEdges ||
+                                    edgesRadius ||
+                                    item.isEndEdgeCurved ||
+                                    item.endEdgeRadius)
+                                    return (_jsx(Path, { d: "".concat(initial, " ").concat(getEndCaps(index, item)), fill: showGradient
+                                            ? "url(#grad".concat(index, ")")
+                                            : data[index].color || pieColors[index % 9] }, "cap".concat(index)));
+                                return null;
+                            })
+                            : null, data.map(function (item, index) {
+                            var _a, _b;
+                            var _c = getTextCoordinates(index, item.labelPosition), x = _c.x, y = _c.y;
+                            return (_jsx(AnimatedText, { 
+                                // style={{ pointerEvents: 'all' }}
+                                fill: item.textColor ||
+                                    props.textColor ||
+                                    pieColors[(index + 2) % 9], opacity: isAnimated ? animatedOpacity : 1, fontSize: item.textSize || props.textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
+                                    (item.shiftTextX || 0) -
+                                    ((_b = (_a = item.textSize) !== null && _a !== void 0 ? _a : props.textSize) !== null && _b !== void 0 ? _b : 0) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
+                                    var _a;
+                                    item.onLabelPress
+                                        ? item.onLabelPress()
+                                        : props.onLabelPress
+                                            ? props.onLabelPress(item, index)
+                                            : item.onPress
+                                                ? item.onPress()
+                                                : (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
+                                }, children: item.text ||
+                                    (props.showValuesAsLabels ? item.value + '' : '') }, "label".concat(index)));
+                        })] })) : null }))] }));
+};

package/dist/PopulationPyramid/index.d.ts

@@ -0,0 +1,2 @@
+import { PopulationPyramidPropsType } from 'gifted-charts-core';
+export declare const PopulationPyramid: (props: PopulationPyramidPropsType) => import("react/jsx-runtime").JSX.Element;