react-native-gifted-charts 1.4.9 → 1.4.11

package/README.md

@@ -1,4 +1,4 @@
-# react-native-gifted-charts [![Rate on Openbase](https://badges.openbase.com/js/rating/react-native-gifted-charts.svg)](https://openbase.com/js/react-native-gifted-charts?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
+# react-native-gifted-charts
 
 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "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.1.3"
+    "gifted-charts-core": "^0.1.7"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

package/src/BarChart/RenderBars.tsx

@@ -4,7 +4,7 @@ import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
 import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
-import LinearGradient from "../Components/common/LinearGradient";
+import LinearGradient from '../Components/common/LinearGradient';
 import {
   getPropsForAnimated2DWithGradient,
   RenderBarsPropsType,
@@ -51,6 +51,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     pointerConfig,
     noOfSectionsBelowXAxis,
     yAxisOffset,
+    barWidth,
   } = props;
 
   const barHeight = Math.max(
@@ -88,8 +89,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               (item.labelWidth ||
                 props.labelWidth ||
                 item.barWidth ||
-                props.barWidth ||
-                30) + spacing,
+                barWidth) + spacing,
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
@@ -154,8 +154,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               (item.labelWidth ||
                 props.labelWidth ||
                 item.barWidth ||
-                props.barWidth ||
-                30) + spacing,
+                barWidth) + spacing,
             left: spacing / -2,
             position: 'absolute',
             height: props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
@@ -206,8 +205,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
   let leftSpacing = initialSpacing;
   for (let i = 0; i < index; i++) {
     leftSpacing +=
-      (data[i].spacing ?? propSpacing) +
-      (data[i].barWidth || props.barWidth || 30);
+      (data[i].spacing ?? propSpacing) + (data[i].barWidth || barWidth);
   }
 
   const static2DWithGradient = (item: barDataItem) => {
@@ -249,9 +247,9 @@ const RenderBars = (props: RenderBarsPropsType) => {
             style={[
               {
                 position: 'absolute',
-                top: (item.barWidth || props.barWidth || 30) * -1,
-                height: item.barWidth || props.barWidth || 30,
-                width: item.barWidth || props.barWidth || 30,
+                top: (item.barWidth || barWidth) * -1,
+                height: item.barWidth || barWidth,
+                width: item.barWidth || barWidth,
                 justifyContent:
                   (horizontal && !intactTopLabel) || item.value < 0
                     ? 'center'
@@ -287,25 +285,30 @@ const RenderBars = (props: RenderBarsPropsType) => {
       height: barHeight,
       marginRight: spacing,
     },
-    item.value < 0
+
+    pointerConfig
       ? {
           transform: [
             {
               translateY:
-                (Math.abs(item.value) * (containerHeight || 200)) /
-                (maxValue || 200),
+                (containerHeight || 200) -
+                (barHeight - 10 + xAxisLabelsVerticalShift) +
+                (item.value < 0
+                  ? (Math.abs(item.value) * (containerHeight || 200)) /
+                    (maxValue || 200)
+                  : 0),
             },
-            {rotateZ: '180deg'},
           ],
         }
-      : pointerConfig
+      : item.value < 0
         ? {
             transform: [
               {
                 translateY:
-                  (containerHeight || 200) -
-                  (barHeight - 10 + xAxisLabelsVerticalShift),
+                  (Math.abs(item.value) * (containerHeight || 200)) /
+                  (maxValue || 200),
               },
+              {rotateZ: '180deg'},
             ],
           }
         : null,
@@ -353,10 +356,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
               height: props.xAxisIndicesHeight,
               width: props.xAxisIndicesWidth,
               bottom: props.xAxisIndicesHeight / -2,
-              left:
-                ((item.barWidth || props.barWidth || 30) -
-                  props.xAxisIndicesWidth) /
-                2,
+              left: ((item.barWidth || barWidth) - props.xAxisIndicesWidth) / 2,
               backgroundColor: props.xAxisIndicesColor,
             }}
           />
@@ -367,7 +367,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
             sideWidth={
               item.sideWidth ||
               props.sideWidth ||
-              (item.barWidth || props.barWidth || 30) / 2
+              (item.barWidth || barWidth) / 2
             }
             side={side || 'left'}
             sideColor={item.sideColor || props.sideColor || ''}

package/src/BarChart/index.tsx

@@ -86,7 +86,7 @@ export const BarChart = (props: BarChartPropsType) => {
     autoShiftLabels,
     getPropsCommonForBarAndStack,
     barAndLineChartsWrapperProps,
-  } = useBarChart({...props, heightValue, widthValue, opacValue});
+  } = useBarChart({...props, heightValue, widthValue, opacValue, parentWidth: props.parentWidth ?? screenWidth});
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);

package/src/Components/BarAndLineChartsWrapper/index.tsx

@@ -52,6 +52,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
 
     onEndReached,
     onStartReached,
+    onMomentumScrollEnd,
   } = props;
 
   const {
@@ -77,7 +78,7 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
     verticalLinesProps,
     lineInBarChartProps,
     lineInBarChartProps2,
-  } = useBarAndLineChartsWrapper({...props, isRTL:I18nManager.isRTL});
+  } = useBarAndLineChartsWrapper({...props, isRTL: I18nManager.isRTL});
 
   useEffect(() => {
     if (pointerConfig && getPointerProps) {
@@ -124,6 +125,9 @@ const BarAndLineChartsWrapper = (props: BarAndLineChartsWrapperTypes) => {
           setCanMomentum(true);
         }}
         onMomentumScrollEnd={({nativeEvent}) => {
+          if (onMomentumScrollEnd) {
+            onMomentumScrollEnd();
+          }
           if (isCloseToEnd(nativeEvent) && canMomentum) {
             onEndReached ? onEndReached() : null;
             setCanMomentum(false);

package/src/LineChart/LineChartBicolor.tsx

@@ -15,6 +15,7 @@ import {
   bicolorLineDataItem,
   useLineChartBiColor,
 } from 'gifted-charts-core';
+import { screenWidth } from '../utils';
 
 export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
   const scrollRef = useRef();
@@ -81,7 +82,7 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
     unFocusOnPressOut,
     delayBeforeUnFocus,
     barAndLineChartsWrapperProps,
-  } = useLineChartBiColor(props);
+  } = useLineChartBiColor({...props, parentWidth: props.parentWidth ?? screenWidth});
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);

package/src/LineChart/index.tsx

@@ -87,6 +87,8 @@ export const LineChart = (props: LineChartPropsType) => {
     setPointerItem4,
     pointerY5,
     setPointerY5,
+    pointerYsForDataSet,
+    setPointerYsForDataSet,
     pointerItem5,
     setPointerItem5,
     secondaryPointerY,
@@ -185,6 +187,7 @@ export const LineChart = (props: LineChartPropsType) => {
     getX,
     getY,
     getSecondaryY,
+    secondaryMaxValue,
     showValuesAsDataPointsText,
     thickness1,
     thickness2,
@@ -290,6 +293,7 @@ export const LineChart = (props: LineChartPropsType) => {
     showDataPointOnFocus,
     showStripOnFocus,
     showTextOnFocus,
+    showDataPointLabelOnFocus,
     stripHeight,
     stripWidth,
     stripColor,
@@ -302,7 +306,11 @@ export const LineChart = (props: LineChartPropsType) => {
     lineGradientStartColor,
     lineGradientEndColor,
     barAndLineChartsWrapperProps,
-  } = useLineChart({...props, animations, screenWidth});
+  } = useLineChart({
+    ...props,
+    animations,
+    parentWidth: props.parentWidth ?? screenWidth,
+  });
 
   const widthValuesFromSet = useMemo(
     () => dataSet?.map(set => new Animated.Value(0)),
@@ -783,7 +791,11 @@ export const LineChart = (props: LineChartPropsType) => {
                           spacing * index,
                       },
                     ]}>
-                    {dataPointLabelComponent()}
+                    {showDataPointLabelOnFocus
+                      ? index === selectedIndex
+                        ? dataPointLabelComponent()
+                        : null
+                      : dataPointLabelComponent()}
                   </View>
                 ) : null
               ) : text || item.dataPointText ? (
@@ -847,7 +859,31 @@ export const LineChart = (props: LineChartPropsType) => {
     });
   };
 
-  const renderPointer = (lineNumber: number) => {
+  const renderPointer = (lineNumber: number, isDataSet?: boolean) => {
+    if (isDataSet) {
+      let pointerItemLocal, pointerYLocal, pointerColorLocal;
+      return dataSet?.map((set, index) => {
+        const pIndex = barAndLineChartsWrapperProps.pointerIndex;
+        pointerItemLocal = set[pIndex];
+        pointerYLocal = pointerYsForDataSet[index];
+        pointerColorLocal =
+          pointerConfig?.pointerColorsForDataSet?.[index] ?? pointerColor;
+        return (
+          <Fragment key={'dSetPts' + index}>
+            {Pointer({
+              pointerX,
+              pointerYLocal: pointerYLocal + xAxisThickness,
+              pointerComponent,
+              pointerHeight,
+              pointerRadius,
+              pointerWidth,
+              pointerItemLocal,
+              pointerColorLocal,
+            })}
+          </Fragment>
+        );
+      });
+    }
     if (lineNumber === 1 && hidePointer1) return;
     if (lineNumber === 2 && hidePointer2) return;
     if (lineNumber === 3 && hidePointer3) return;
@@ -1144,7 +1180,7 @@ export const LineChart = (props: LineChartPropsType) => {
           );
         }) ?? null}
 
-        {/***  !!! Here it's done thrice intentionally, trying to make it to only 1 breaks things !!!  ***/}
+        {/***  !!! Here it's done 5 times intentionally, trying to make it to only 1 breaks things !!!  ***/}
         {renderDataPoints(
           hideDataPoints1,
           data,
@@ -1329,13 +1365,27 @@ export const LineChart = (props: LineChartPropsType) => {
       if (item) {
         y =
           containerHeight -
-          (item.value * containerHeight) / maxValue -
+          (item.value * containerHeight) / secondaryMaxValue -
           (pointerRadius || pointerHeight / 2) +
           10;
         setSecondaryPointerY(y);
         setSecondaryPointerItem(item);
       }
     }
+    if (dataSet?.length) {
+      if (dataSet[0].data[factor]) {
+        const ysForDataSet = dataSet.map(set => {
+          const item = set.data[factor];
+          const y =
+            containerHeight -
+            (item.value * containerHeight) / maxValue -
+            (pointerRadius || pointerHeight / 2) +
+            10;
+          return y;
+        });
+        setPointerYsForDataSet(ysForDataSet);
+      }
+    }
   };
 
   const renderLine = (
@@ -1458,13 +1508,27 @@ export const LineChart = (props: LineChartPropsType) => {
             if (item) {
               y =
                 containerHeight -
-                (item.value * containerHeight) / maxValue -
+                (item.value * containerHeight) / secondaryMaxValue -
                 (pointerRadius || pointerHeight / 2) +
                 10;
               setSecondaryPointerY(y);
               setSecondaryPointerItem(item);
             }
           }
+          if (dataSet?.length) {
+            if (dataSet[0].data[factor]) {
+              const ysForDataSet = dataSet.map(set => {
+                const item = set.data[factor];
+                const y =
+                  containerHeight -
+                  (item.value * containerHeight) / maxValue -
+                  (pointerRadius || pointerHeight / 2) +
+                  10;
+                return y;
+              });
+              setPointerYsForDataSet(ysForDataSet);
+            }
+          }
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -1644,13 +1708,27 @@ export const LineChart = (props: LineChartPropsType) => {
             if (item) {
               y =
                 containerHeight -
-                (item.value * containerHeight) / maxValue -
+                (item.value * containerHeight) / secondaryMaxValue -
                 (pointerRadius || pointerHeight / 2) +
                 10;
               setSecondaryPointerY(y);
               setSecondaryPointerItem(item);
             }
           }
+          if (dataSet?.length) {
+            if (dataSet[0].data[factor]) {
+              const ysForDataSet = dataSet.map(set => {
+                const item = set.data[factor];
+                const y =
+                  containerHeight -
+                  (item.value * containerHeight) / maxValue -
+                  (pointerRadius || pointerHeight / 2) +
+                  10;
+                return y;
+              });
+              setPointerYsForDataSet(ysForDataSet);
+            }
+          }
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -2021,8 +2099,9 @@ export const LineChart = (props: LineChartPropsType) => {
             }}>
             {!stripOverPointer && renderStripAndLabel()}
             {dataSet ? (
-              renderPointer(1)
+              renderPointer(0, true)
             ) : (
+              // dataSet.map((set, index) => renderPointer(index))
               <>
                 {renderPointer(1)}
                 {points2 ? renderPointer(2) : null}

package/src/PieChartPro/index.tsx

@@ -40,7 +40,7 @@ export const PieChartPro = (props: PieChartPropsType) => {
     edgesRadius = 0,
     showGradient,
     ring,
-    pieInnerComponent,
+    centerLabelComponent,
     strokeDashArray,
     semiCircle,
   } = props;
@@ -103,7 +103,7 @@ export const PieChartPro = (props: PieChartPropsType) => {
             ? {position: 'absolute', bottom: 0}
             : {position: 'absolute'}
         }>
-        {pieInnerComponent ? pieInnerComponent() : null}
+        {centerLabelComponent ? centerLabelComponent() : null}
       </View>
       <Svg
         {...rnSvgProps}