react-native-gifted-charts 1.2.14 → 1.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.14",
+  "version": "1.2.17",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -41,7 +41,8 @@
     "eslint": "^7.31.0",
     "jest": "^27.0.6",
     "metro-react-native-babel-preset": "^0.66.2",
-    "react-test-renderer": "17.0.1"
+    "react-test-renderer": "17.0.1",
+    "ts-jest": "^27.1.4"
   },
   "peerDependencies": {
     "react": "*",
@@ -57,8 +58,5 @@
     "donut",
     "area",
     "line"
-  ],
-  "jest": {
-    "preset": "react-native"
-  }
+  ]
 }

package/src/BarChart/RenderBars.tsx

@@ -64,6 +64,7 @@ type Props = {
   patternId?: String;
   barMarginBottom?: number;
   onPress?: Function;
+  xAxisTextNumberOfLines: number;
 };
 type itemType = {
   value?: number;
@@ -112,6 +113,7 @@ const RenderBars = (props: Props) => {
     autoShiftLabels,
     label,
     labelTextStyle,
+    xAxisTextNumberOfLines,
   } = props;
 
   const barMarginBottom =
@@ -161,7 +163,7 @@ const RenderBars = (props: Props) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -204,7 +206,7 @@ const RenderBars = (props: Props) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}

package/src/BarChart/RenderStackBars.tsx

@@ -38,6 +38,7 @@ type Props = {
   xAxisThickness: number;
   barBackgroundPattern?: Function;
   patternId?: String;
+  xAxisTextNumberOfLines: number;
 };
 type itemType = {
   value?: number;
@@ -69,6 +70,7 @@ const RenderStackBars = (props: Props) => {
     xAxisThickness,
     label,
     labelTextStyle,
+    xAxisTextNumberOfLines,
   } = props;
   const disablePress = props.disablePress || false;
   const renderLabel = (label: String, labelTextStyle: any) => {
@@ -92,7 +94,7 @@ const RenderStackBars = (props: Props) => {
         {item.labelComponent ? (
           item.labelComponent()
         ) : (
-          <Text style={[labelTextStyle]} numberOfLines={1}>
+          <Text style={[labelTextStyle]} numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}

package/src/BarChart/index.tsx

@@ -47,6 +47,8 @@ type PropTypes = {
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
+  yAxisTextNumberOfLines?: number;
+  xAxisTextNumberOfLines?: number;
   yAxisLabelWidth?: number;
   hideYAxisText?: Boolean;
   yAxisSide?: string;
@@ -372,6 +374,8 @@ export const BarChart = (props: PropTypes) => {
       : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
+  const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
   const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues = props.showFractionalValues || false;
@@ -768,7 +772,7 @@ export const BarChart = (props: PropTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -875,7 +879,7 @@ export const BarChart = (props: PropTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -1399,6 +1403,7 @@ export const BarChart = (props: PropTypes) => {
                     labelTextStyle={
                       item.labelTextStyle || props.xAxisLabelTextStyle
                     }
+                    xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                   />
                 );
               })
@@ -1460,6 +1465,7 @@ export const BarChart = (props: PropTypes) => {
                     item.labelTextStyle || props.xAxisLabelTextStyle
                   }
                   onPress={props.onPress}
+                  xAxisTextNumberOfLines={xAxisTextNumberOfLines}
                 />
               ))}
         </Fragment>

package/src/LineChart/index.tsx

@@ -154,6 +154,8 @@ type propTypes = {
   yAxisLabelContainerStyle?: any;
   horizontalRulesStyle?: any;
   yAxisTextStyle?: any;
+  yAxisTextNumberOfLines?: number;
+  xAxisTextNumberOfLines?: number;
   showFractionalValues?: Boolean;
   roundToDigits?: number;
   yAxisLabelWidth?: number;
@@ -1386,6 +1388,8 @@ export const LineChart = (props: propTypes) => {
     props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1;
   const yAxisColor = props.yAxisColor || 'black';
   const yAxisTextStyle = props.yAxisTextStyle;
+  const yAxisTextNumberOfLines = props.yAxisTextNumberOfLines || 1;
+  const xAxisTextNumberOfLines = props.xAxisTextNumberOfLines || 1;
   const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle;
   const horizontalRulesStyle = props.horizontalRulesStyle;
   const showFractionalValues = props.showFractionalValues || false;
@@ -1483,8 +1487,8 @@ export const LineChart = (props: propTypes) => {
       ? pointerConfig.pointerLabelHeight
       : defaultPointerConfig.pointerLabelHeight;
   const autoAdjustPointerLabelPosition =
-    pointerConfig && pointerConfig.autoAdjustPointerLabelPosition
-      ? pointerConfig.autoAdjustPointerLabelPosition
+    pointerConfig && pointerConfig.autoAdjustPointerLabelPosition === false
+      ? false
       : defaultPointerConfig.autoAdjustPointerLabelPosition;
   const pointerVanishDelay =
     pointerConfig && pointerConfig.pointerVanishDelay
@@ -1681,7 +1685,7 @@ export const LineChart = (props: propTypes) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -1719,7 +1723,7 @@ export const LineChart = (props: propTypes) => {
         ) : (
           <Text
             style={labelTextStyle || {textAlign: 'center'}}
-            numberOfLines={1}>
+            numberOfLines={xAxisTextNumberOfLines}>
             {label || ''}
           </Text>
         )}
@@ -1899,7 +1903,7 @@ export const LineChart = (props: propTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -2001,7 +2005,7 @@ export const LineChart = (props: propTypes) => {
                     yAxisLabelContainerStyle,
                   ]}>
                   <Text
-                    numberOfLines={1}
+                    numberOfLines={yAxisTextNumberOfLines}
                     ellipsizeMode={'clip'}
                     style={[
                       yAxisTextStyle,
@@ -2850,6 +2854,7 @@ export const LineChart = (props: propTypes) => {
           }
         }}
         onResponderMove={evt => {
+          // console.log('onResponderMove++++++++++',evt);
           if (!pointerConfig) return;
           if (
             activatePointersOnLongPress &&
@@ -2933,11 +2938,24 @@ export const LineChart = (props: propTypes) => {
             }
           }
         }}
-        onResponderRelease={evt => {
+        // onResponderReject={evt => {
+        //   console.log('evt...reject.......',evt);
+        // }}
+        onResponderEnd={evt => {
+          // console.log('evt...end.......',evt);
           setResponderStartTime(0);
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
+        onResponderTerminationRequest={(evt) => false}
+        // onResponderTerminate={evt => {
+        //   console.log('evt...terminate.......',evt);
+        // }}
+        // onResponderRelease={evt => {
+        //   setResponderStartTime(0);
+        //   setResponderActive(false);
+        //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+        // }}
         style={{
           position: 'absolute',
           height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,
@@ -3143,11 +3161,24 @@ export const LineChart = (props: propTypes) => {
             }
           }
         }}
-        onResponderRelease={evt => {
+        // onResponderReject={evt => {
+        //   console.log('evt...reject.......',evt);
+        // }}
+        onResponderEnd={evt => {
+          // console.log('evt...end.......',evt);
           setResponderStartTime(0);
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
+        onResponderTerminationRequest={(evt) => false}
+        // onResponderTerminate={evt => {
+        //   console.log('evt...terminate.......',evt);
+        // }}
+        // onResponderRelease={evt => {
+        //   setResponderStartTime(0);
+        //   setResponderActive(false);
+        //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+        // }}
         style={{
           position: 'absolute',
           height: containerHeight + 10 + horizSectionsBelow.length * stepHeight,

package/src/todos.md

@@ -1,6 +1,6 @@
 ## Features
 
-1. Fix the issue- When `activatePointersOnLongPress` is set to true, sometimes, the pointerLabel doesn't vanish after releasing the scroll. It gets stuck.
+1. Fix the issue with pointers in Line/Area charts on Android https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/177
 
 ## To-dos in documentation-
 
@@ -19,4 +19,4 @@
 ## Architecture Enhancement
 
 1. Make it compliant with React js
-2. Write tests
+2. Write Snapshot tests for more example charts (snapshot tests for some charts are already written)