react-native-gifted-charts 1.2.19 → 1.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.2.19",
+  "version": "1.2.22",
   "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": [

package/src/BarChart/index.tsx

@@ -630,9 +630,12 @@ export const BarChart = (props: PropTypes) => {
     outputRange: [0, totalWidth],
   });
 
-  const getLabel = val => {
+  const getLabel = (val, index) => {
     let label = '';
-    if (showFractionalValues) {
+    if (
+      showFractionalValues ||
+      (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
+    ) {
       if (val) {
         label = val;
       } else {
@@ -731,7 +734,7 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -852,6 +855,7 @@ export const BarChart = (props: PropTypes) => {
             horizSectionsBelow.map((sectionItems, index) => {
               let label = getLabel(
                 horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+                index,
               );
               return (
                 <View
@@ -906,7 +910,7 @@ export const BarChart = (props: PropTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }

package/src/LineChart/index.tsx

@@ -267,6 +267,7 @@ type propTypes = {
   noOfSectionsBelowXAxis?: number;
   labelsExtraHeight?: number;
   adjustToWidth?: Boolean;
+  getPointerProps?: Function;
 };
 type referenceConfigType = {
   thickness: number;
@@ -346,6 +347,7 @@ type Pointer = {
   pointerStripColor?: ColorValue;
   pointerStripUptoDataPoint?: boolean;
   pointerLabelComponent?: Function;
+  stripOverPointer?: boolean;
   autoAdjustPointerLabelPosition?: boolean;
   shiftPointerLabelX?: number;
   shiftPointerLabelY?: number;
@@ -364,6 +366,7 @@ type Pointer = {
 
 export const LineChart = (props: propTypes) => {
   const scrollRef = useRef();
+  const [pointerIndex, setPointerIndex] = useState(-1);
   const [pointerX, setPointerX] = useState(0);
   const [pointerY, setPointerY] = useState(0);
   const [pointerItem, setPointerItem] = useState({
@@ -1410,6 +1413,7 @@ export const LineChart = (props: propTypes) => {
     pointerStripColor: 'black',
     pointerStripUptoDataPoint: false,
     pointerLabelComponent: null,
+    stripOverPointer: false,
     shiftPointerLabelX: 0,
     shiftPointerLabelY: 0,
     pointerLabelWidth: 20,
@@ -1425,6 +1429,7 @@ export const LineChart = (props: propTypes) => {
     hidePointer5: false,
   };
   const pointerConfig = props.pointerConfig || null;
+  const getPointerProps = props.getPointerProps || null;
   const pointerHeight =
     pointerConfig && pointerConfig.height
       ? pointerConfig.height
@@ -1447,8 +1452,8 @@ export const LineChart = (props: propTypes) => {
       : defaultPointerConfig.pointerComponent;
 
   const showPointerStrip =
-    pointerConfig && pointerConfig.showPointerStrip
-      ? pointerConfig.showPointerStrip
+    pointerConfig && pointerConfig.showPointerStrip === false
+      ? false
       : defaultPointerConfig.showPointerStrip;
   const pointerStripHeight =
     pointerConfig && pointerConfig.pointerStripHeight
@@ -1470,6 +1475,10 @@ export const LineChart = (props: propTypes) => {
     pointerConfig && pointerConfig.pointerLabelComponent
       ? pointerConfig.pointerLabelComponent
       : defaultPointerConfig.pointerLabelComponent;
+  const stripOverPointer =
+    pointerConfig && pointerConfig.stripOverPointer
+      ? pointerConfig.stripOverPointer
+      : defaultPointerConfig.stripOverPointer;
   const shiftPointerLabelX =
     pointerConfig && pointerConfig.shiftPointerLabelX
       ? pointerConfig.shiftPointerLabelX
@@ -1770,9 +1779,12 @@ export const LineChart = (props: propTypes) => {
   //     )
   // }
 
-  const getLabel = val => {
+  const getLabel = (val, index) => {
     let label = '';
-    if (showFractionalValues) {
+    if (
+      showFractionalValues ||
+      (props.yAxisLabelTexts && props.yAxisLabelTexts[index] !== undefined)
+    ) {
       if (val) {
         label = props.yAxisOffset
           ? (Number(val) + props.yAxisOffset).toString()
@@ -1873,7 +1885,7 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -1978,6 +1990,7 @@ export const LineChart = (props: propTypes) => {
             horizSectionsBelow.map((sectionItems, index) => {
               let label = getLabel(
                 horizSectionsBelow[horizSectionsBelow.length - 1 - index].value,
+                index,
               );
               return (
                 <View
@@ -2032,7 +2045,7 @@ export const LineChart = (props: propTypes) => {
           props.hideAxesAndRules !== true &&
             !hideYAxisText &&
             horizSections.map((sectionItems, index) => {
-              let label = getLabel(sectionItems.value);
+              let label = getLabel(sectionItems.value, index);
               if (hideOrigin && index === horizSections.length - 1) {
                 label = '';
               }
@@ -2814,6 +2827,7 @@ export const LineChart = (props: propTypes) => {
             (pointerRadius || pointerWidth / 2) -
             2;
           setPointerX(z);
+          setPointerIndex(factor);
           let item, y;
           item = data[factor];
           y =
@@ -2900,6 +2914,7 @@ export const LineChart = (props: propTypes) => {
             2;
           let item, y;
           setPointerX(z);
+          setPointerIndex(factor);
           item = data[factor];
           y =
             containerHeight -
@@ -2963,6 +2978,7 @@ export const LineChart = (props: propTypes) => {
         onResponderEnd={evt => {
           // console.log('evt...end.......',evt);
           setResponderStartTime(0);
+          setPointerIndex(-1);
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
@@ -3037,6 +3053,7 @@ export const LineChart = (props: propTypes) => {
             (pointerRadius || pointerWidth / 2) -
             2;
           setPointerX(z);
+          setPointerIndex(factor);
           let item, y;
           item = data[factor];
           y =
@@ -3122,6 +3139,7 @@ export const LineChart = (props: propTypes) => {
             2;
           let item, y;
           setPointerX(z);
+          setPointerIndex(factor);
           item = data[factor];
           y =
             containerHeight -
@@ -3185,6 +3203,7 @@ export const LineChart = (props: propTypes) => {
         onResponderEnd={evt => {
           // console.log('evt...end.......',evt);
           setResponderStartTime(0);
+          setPointerIndex(-1);
           setResponderActive(false);
           setTimeout(() => setPointerX(0), pointerVanishDelay);
         }}
@@ -3460,12 +3479,13 @@ export const LineChart = (props: propTypes) => {
               width: totalWidth,
               zIndex: 20,
             }}>
+            {!stripOverPointer && renderStripAndLabel()}
             {renderPointer(1)}
             {points2 ? renderPointer(2) : null}
             {points3 ? renderPointer(3) : null}
             {points4 ? renderPointer(4) : null}
             {points5 ? renderPointer(5) : null}
-            {renderStripAndLabel()}
+            {stripOverPointer && renderStripAndLabel()}
           </View>
         ) : null}
         {data.map((item: itemType, index: number) => {
@@ -3496,6 +3516,9 @@ export const LineChart = (props: propTypes) => {
           );
         })}
       </ScrollView>
+      {pointerConfig &&
+        getPointerProps &&
+        getPointerProps({pointerIndex, pointerX, pointerY})}
     </View>
   );
 };