react-native-gifted-charts 1.4.3 → 1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "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.13"
+    "gifted-charts-core": "^0.0.15"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/RenderBars.tsx

@@ -48,6 +48,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     topLabelContainerStyle,
     topLabelTextStyle,
     pointerConfig,
+    noOfSectionsBelowXAxis,
   } = props;
 
   const barHeight = Math.max(
@@ -112,7 +113,11 @@ const RenderBars = (props: RenderBarsPropsType) => {
                 ? {
                     transform: [
                       {rotate: '180deg'},
-                      {translateY: autoShiftLabels ? 0 : 32},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
                     ],
                   }
                 : {},
@@ -166,7 +171,18 @@ const RenderBars = (props: RenderBarsPropsType) => {
               : {transform: [{rotate: '60deg'}]}
             : horizontal
               ? {transform: [{rotate: '-90deg'}]}
-              : {},
+              : value < 0
+                ? {
+                    transform: [
+                      {rotate: '180deg'},
+                      {
+                        translateY: autoShiftLabels
+                          ? 0
+                          : 16.5 * xAxisTextNumberOfLines + 14,
+                      },
+                    ],
+                  }
+                : {},
         ]}>
         {item.labelComponent ? (
           item.labelComponent()
@@ -300,6 +316,8 @@ const RenderBars = (props: RenderBarsPropsType) => {
     (pointerConfig && pointerConfig.barTouchable !== true);
 
   const barContent = () => {
+    const isBarBelowXaxisAndInvisible =
+      item.value < 0 && !noOfSectionsBelowXAxis;
     const animated2DWithGradient = (noGradient, noAnimation) => (
       <Animated2DWithGradient
         {...commonPropsFor2Dand3Dbars}
@@ -341,7 +359,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
             }}
           />
         )}
-        {isThreeD ? (
+        {isBarBelowXaxisAndInvisible ? null : isThreeD ? (
           <AnimatedThreeDBar
             {...commonPropsFor2Dand3Dbars}
             sideWidth={
@@ -401,6 +419,13 @@ const RenderBars = (props: RenderBarsPropsType) => {
                 ? props.onLongPress(item, index)
                 : null;
           }}
+          onPressOut={() => {
+            item.onPressOut
+              ? item.onPressOut()
+              : props.onPressOut
+                ? props.onPressOut(item, index)
+                : null;
+          }}
           style={barWrapperStyle}>
           {barContent()}
         </TouchableOpacity>

package/src/BarChart/RenderStackBars.tsx

@@ -9,7 +9,11 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
-import { useRenderStackBars, BarDefaults, StackedBarChartPropsType } from 'gifted-charts-core';
+import {
+  useRenderStackBars,
+  BarDefaults,
+  StackedBarChartPropsType,
+} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -121,7 +125,6 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
   };
 
   const static2DSimple = () => {
-
     return (
       <>
         <TouchableOpacity
@@ -135,13 +138,20 @@ const RenderStackBars = (props: StackedBarChartPropsType) => {
               props.onPress(item, index);
             }
           }}
-          onLongPress={()=>{
+          onLongPress={() => {
             if (item.onLongPress) {
               item.onLongPress();
             } else if (props.onLongPress) {
               props.onLongPress(item, index);
             }
           }}
+          onPressOut={() => {
+            if (item.onPressOut) {
+              item.onPressOut();
+            } else if (props.onPressOut) {
+              props.onPressOut(item, index);
+            }
+          }}
           style={[
             {
               position: 'absolute',

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)}
@@ -132,6 +148,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 (
@@ -334,7 +348,8 @@ export const PieChartMain = (props: PieChartMainProps) => {
             backgroundColor: shadowColor,
             borderRadius: radius,
             position: 'absolute',
-            top: shadowWidth,
+            top: shadowWidth + paddingVertical / 2,
+            left: paddingHorizontal / 2,
             zIndex: -1,
           }}
         />