react-native-gifted-charts 1.4.4 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -24,7 +24,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "^0.0.14"
+    "gifted-charts-core": "^0.0.18"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/index.tsx

@@ -14,6 +14,7 @@ export const BarChart = (props: BarChartPropsType) => {
 
   const scrollRef = props.scrollRef ?? useRef(null);
   const remainingScrollViewProps = {
+    onScroll: (ev: any) => props.onScroll?.(ev),
     onTouchStart: evt => {
       if (props.renderTooltip) {
         setSelectedIndex(-1);

package/src/LineChart/LineChartBicolor.tsx

@@ -732,6 +732,7 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
       scrollRef={scrollRef}
       animatedWidth={animatedWidth}
       renderChartContent={renderChartContent}
+      remainingScrollViewProps={{onScroll: (ev: any) => props.onScroll?.(ev)}}
     />
   );
 };

package/src/LineChart/index.tsx

@@ -1790,6 +1790,7 @@ export const LineChart = (props: LineChartPropsType) => {
 
   const remainingScrollViewProps = {
     onScroll: (ev: any) => {
+      props.onScroll?.(ev);
       if (
         pointerConfig &&
         pointerConfig.activatePointersOnLongPress &&

package/src/PieChart/index.tsx

@@ -25,6 +25,8 @@ export const PieChart = (props: PieChartPropsType) => {
     shiftInnerCenterY,
     tiltAngle,
     isDataShifted,
+    paddingHorizontal,
+    paddingVertical,
   } = usePieChart(props);
 
   const renderInnerCircle = (innerRadius, innerCircleBorderWidth) => {
@@ -40,8 +42,18 @@ export const PieChart = (props: PieChartPropsType) => {
               // zIndex: 100,
               alignSelf: 'center',
               backgroundColor: innerCircleColor,
-              left: canvasWidth / 2 - innerRadius + shiftInnerCenterX,
-              top: canvasHeight / 2 - innerRadius + shiftInnerCenterY,
+              left:
+                canvasWidth / 2 -
+                innerRadius +
+                shiftInnerCenterX +
+                extraRadiusForFocused +
+                paddingHorizontal / 2,
+              top:
+                canvasHeight / 2 -
+                innerRadius +
+                shiftInnerCenterY +
+                extraRadiusForFocused +
+                paddingVertical / 2,
               borderWidth: innerCircleBorderWidth,
               borderColor: innerCircleBorderColor,
               justifyContent: 'center',
@@ -80,16 +92,20 @@ export const PieChart = (props: PieChartPropsType) => {
   return (
     <View
       style={{
-        height: (radius + extraRadiusForFocused) * (props.semiCircle ? 1 : 2),
-        width: (radius + extraRadiusForFocused) * 2,
-        marginLeft: extraRadiusForFocused * 2,
-        marginTop: extraRadiusForFocused * 2,
+        height:
+          (radius + extraRadiusForFocused + paddingVertical / 2) *
+          (props.semiCircle ? 1 : 2),
+        width: (radius + extraRadiusForFocused + paddingHorizontal / 2) * 2,
+        overflow: 'hidden',
       }}>
       <View style={{position: 'absolute'}}>
         <PieChartMain
           {...props}
           selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
+          paddingHorizontal={paddingHorizontal}
+          paddingVertical={paddingVertical}
+          extraRadiusForFocused={extraRadiusForFocused}
         />
       </View>
       {renderInnerCircle(innerRadius, innerCircleBorderWidth)}
@@ -119,6 +135,8 @@ export const PieChart = (props: PieChartPropsType) => {
                     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,
@@ -132,6 +150,9 @@ export const PieChart = (props: PieChartPropsType) => {
               innerRadius={props.innerRadius || radius / 2.5}
               isBiggerPie
               setSelectedIndex={setSelectedIndex}
+              paddingHorizontal={paddingHorizontal}
+              paddingVertical={paddingVertical}
+              extraRadiusForFocused={extraRadiusForFocused}
             />
           </View>
         )}

package/src/PieChart/main.tsx

@@ -56,6 +56,9 @@ export const PieChartMain = (props: PieChartMainProps) => {
     cy,
     pData,
     mData,
+    paddingHorizontal,
+    paddingVertical,
+    extraRadiusForFocused,
   } = getPieChartMainProps(props);
 
   return (
@@ -64,27 +67,38 @@ export const PieChartMain = (props: PieChartMainProps) => {
       style={[
         {
           backgroundColor: backgroundColor,
-          height: semiCircle ? canvasHeight / 2 : canvasHeight,
-          width: canvasWidth,
+          height: semiCircle
+            ? (canvasHeight + paddingVertical) / 2 + extraRadiusForFocused
+            : canvasHeight + paddingVertical + extraRadiusForFocused * 2,
+          width: canvasWidth + paddingHorizontal + extraRadiusForFocused * 2,
           overflow: 'hidden',
         },
         isThreeD && {transform: [{rotateX: tiltAngle}]},
       ]}>
       <Svg
         pointerEvents={rnVersion >= 720000 ? 'box-none' : 'auto'} // use 'box-none' react-native version 0.72 onwards
-        viewBox={`${strokeWidth / -2 + minShiftX} ${
-          strokeWidth / -2 + minShiftY
+        viewBox={`${strokeWidth / -2 + minShiftX - extraRadiusForFocused - paddingHorizontal / 2} ${
+          strokeWidth / -2 +
+          minShiftY -
+          extraRadiusForFocused -
+          paddingVertical / 2
         } ${
-          (radius + strokeWidth) * 2 +
+          (radius + extraRadiusForFocused + strokeWidth) * 2 +
+          paddingHorizontal +
           horizAdjustment +
           (horizAdjustment ? strokeWidth : 0)
         } ${
-          (radius + strokeWidth) * 2 +
-          +vertAdjustment +
+          (radius + extraRadiusForFocused + strokeWidth) * 2 +
+          paddingVertical +
+          vertAdjustment +
           (vertAdjustment ? strokeWidth : 0)
         }`}
-        height={radius * 2 + strokeWidth}
-        width={radius * 2 + strokeWidth}>
+        height={
+          (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingVertical
+        }
+        width={
+          (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingHorizontal
+        }>
         <Defs>
           {data.map((item, index) => {
             return (
@@ -250,8 +264,12 @@ export const PieChartMain = (props: PieChartMainProps) => {
                 {/* <Line x1={mx} x2={cx} y1={my} y2={cy} stroke="black" /> */}
                 {showTextBackground ? (
                   <Circle
-                    cx={x}
-                    cy={y - (item.textSize || textSize) / 4}
+                    cx={x + (item.shiftTextBackgroundX ?? item.shiftTextX ?? 0)}
+                    cy={
+                      y +
+                      (item.shiftTextBackgroundY ?? item.shiftTextY ?? 0) -
+                      (item.textSize || textSize) / 4
+                    }
                     r={
                       item.textBackgroundRadius ||
                       props.textBackgroundRadius ||
@@ -334,7 +352,8 @@ export const PieChartMain = (props: PieChartMainProps) => {
             backgroundColor: shadowColor,
             borderRadius: radius,
             position: 'absolute',
-            top: shadowWidth,
+            top: shadowWidth + paddingVertical / 2,
+            left: paddingHorizontal / 2,
             zIndex: -1,
           }}
         />