Merge pull request #970 from Abhinandan-Kushwaha/development

v1.4.55 Added touch related listeners to pointerConfig, Pie onPress w…
Abhinandan-Kushwaha · Jan 19, 2025 · 02f8727 · 02f8727
2 parents 46f8f78 + 826bebe
commit 02f8727
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 62 deletions.
diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md
@@ -753,6 +753,13 @@ type Pointer = {
   horizontalStripConfig?: HorizontalStripConfig; // config for horizontal strip used for crosshair
   hidePointerForMissingValues?: boolean; // false
   hidePointerDataPointForMissingValues?: boolean; // unless explicitly specified, takes the value of hidePointerForMissingValues
+  onTouchStart?: Function
+  onTouchEnd?: Function
+  onResponderGrant?: Function
+  onResponderMove?: Function
+  onResponderEnd?: Function
+  onPointerEnter?: Function
+  onPointerLeave?: Function
 };
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.54",
+  "version": "1.4.55",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.56"
+    "gifted-charts-core": "0.1.57"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,29 @@
+## 🎉 1.4.55
+
+### ✨ Features added-
+
+1. Added the below properties to the `pointerConfig` prop in Line/Area charts, all of which are callback functions. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/968
+
+- onTouchStart
+- onTouchEnd
+- onResponderGrant
+- onResponderMove
+- onResponderEnd
+- onPointerEnter
+- onPointerLeave
+
+### 🐛 Bug fixes
+
+1. Fixed the issue - Pie chart onPress, focusOnPress event is not working on expo web. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/969 and https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/800
+
+2. Fixed the issue- Unable to use the Gifted Charts Pointer within a React Native Tab View (using `onTouchStart` and `onTouchEnd` in the **pointerConfig** object). See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/968
+
+---
+
+---
+
+---
+
 ## 🎉 1.4.54
 
 ### ✨ Features added-

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import {Fragment, useCallback, useEffect, useMemo, useRef} from 'react';
 import {
   View,
   Animated,
@@ -16,7 +9,6 @@ import {
   I18nManager,
   ViewStyle,
 } from 'react-native';
-import {styles} from './styles';
 import {screenWidth, usePrevious} from '../utils';
 import Svg, {
   Path,
@@ -58,7 +50,7 @@ const AnimatedPath = Animated.createAnimatedComponent(Path);
 export const LineChart = (props: LineChartPropsType) => {
   const scrollRef = props.scrollRef ?? useRef(null);
   const opacityValue = useMemo(() => new Animated.Value(0), []);
-  const heightValue = useMemo(() => new Animated.Value(0), []);
+  // const heightValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
   const widthValue2 = useMemo(() => new Animated.Value(0), []);
   const widthValue3 = useMemo(() => new Animated.Value(0), []);
@@ -1739,6 +1731,10 @@ export const LineChart = (props: LineChartPropsType) => {
     return (
       <View
         key={key ?? 0}
+        onPointerEnter={() => pointerConfig?.onPointerEnter?.()}
+        onPointerLeave={() => pointerConfig?.onPointerLeave?.()}
+        onTouchStart={() => pointerConfig?.onTouchStart?.()}
+        onTouchEnd={() => pointerConfig?.onTouchEnd?.()}
         onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
         onStartShouldSetResponder={evt =>
           pointerConfig && activatePointersInstantlyOnTouch ? true : false
@@ -1751,6 +1747,7 @@ export const LineChart = (props: LineChartPropsType) => {
           }
           let x = evt.nativeEvent.locationX;
           activatePointers(x);
+          pointerConfig.onResponderGrant?.();
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -1770,6 +1767,7 @@ export const LineChart = (props: LineChartPropsType) => {
             return;
 
           activatePointers(x);
+          pointerConfig?.onResponderMove?.();
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -1780,6 +1778,7 @@ export const LineChart = (props: LineChartPropsType) => {
           setResponderActive(false);
           if (!persistPointer)
             setTimeout(() => setPointerX(0), pointerVanishDelay);
+          pointerConfig?.onResponderEnd?.();
         }}
         onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
@@ -1874,6 +1873,8 @@ export const LineChart = (props: LineChartPropsType) => {
     return (
       <Animated.View
         key={key ?? 0}
+        onPointerEnter={() => pointerConfig?.onPointerEnter?.()}
+        onPointerLeave={() => pointerConfig?.onPointerLeave?.()}
         onMoveShouldSetResponder={evt => (pointerConfig ? true : false)}
         onStartShouldSetResponder={evt =>
           pointerConfig && activatePointersInstantlyOnTouch ? true : false
@@ -1886,6 +1887,7 @@ export const LineChart = (props: LineChartPropsType) => {
           }
           let x = evt.nativeEvent.locationX;
           activatePointers(x);
+          pointerConfig.onResponderGrant?.();
         }}
         onResponderMove={evt => {
           if (!pointerConfig) return;
@@ -1905,6 +1907,7 @@ export const LineChart = (props: LineChartPropsType) => {
             return;
 
           activatePointers(x);
+          pointerConfig?.onResponderMove?.();
         }}
         // onResponderReject={evt => {
         //   console.log('evt...reject.......',evt);
@@ -1916,6 +1919,7 @@ export const LineChart = (props: LineChartPropsType) => {
           setResponderActive(false);
           if (!persistPointer)
             setTimeout(() => setPointerX(0), pointerVanishDelay);
+          pointerConfig?.onResponderEnd?.();
         }}
         onResponderTerminationRequest={evt => false}
         // onResponderTerminate={evt => {
@@ -2714,6 +2718,7 @@ export const LineChart = (props: LineChartPropsType) => {
       animatedWidth={widthValue}
       renderChartContent={renderChartContent}
       remainingScrollViewProps={remainingScrollViewProps}
+      nestedScrollEnabled={props.nestedScrollEnabled}
     />
   );
 };
diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
@@ -1,6 +1,7 @@
-import {Platform, View} from 'react-native';
+import {View} from 'react-native';
 import {PieChartMain} from './main';
-import {PieChartPropsType, pieColors, usePieChart} from 'gifted-charts-core';
+import {PieChartPropsType, usePieChart} from 'gifted-charts-core';
+import {isWebApp} from '../utils';
 
 export const PieChart = (props: PieChartPropsType) => {
   const {
@@ -121,7 +122,7 @@ export const PieChart = (props: PieChartPropsType) => {
               position: 'absolute',
               top: -extraRadius,
               left: -extraRadius,
-              zIndex: Platform.OS === 'web' ? -1 : 0, // was not getting displayed in web (using Expo)
+              zIndex: isWebApp ? -1 : 0, // was not getting displayed in web (using Expo)
             }}>
             <PieChartMain
               {...props}

diff --git a/src/PieChart/main.tsx b/src/PieChart/main.tsx
@@ -1,11 +1,5 @@
 import React, {useState} from 'react';
-import {
-  GestureResponderEvent,
-  TouchableWithoutFeedback,
-  View,
-  Text,
-  TextStyle,
-} from 'react-native';
+import {TouchableWithoutFeedback, View, Text, TextStyle} from 'react-native';
 import Svg, {
   Path,
   Circle,
@@ -21,7 +15,7 @@ import {
   PieChartMainProps,
   pieColors,
 } from 'gifted-charts-core';
-import {rnVersion} from '../utils';
+import {isWebApp, rnVersion} from '../utils';
 
 export const PieChartMain = (props: PieChartMainProps) => {
   const {
@@ -90,8 +84,16 @@ export const PieChartMain = (props: PieChartMainProps) => {
   const [touchX, setTouchX] = useState(0);
   const [touchY, setTouchY] = useState(0);
 
-  const onPressHandler = (e: GestureResponderEvent) => {
-    let {locationX: x, locationY: y} = e.nativeEvent;
+  const onPressHandler = (e: any) => {
+    let x = 0,
+      y = 0;
+    if (isWebApp) {
+      x = e.clientX;
+      y = e.clientY;
+    } else {
+      x = e.nativeEvent.locationX;
+      y = e.nativeEvent.locationY;
+    }
     x -= extraRadius;
     y -= extraRadius;
     setTouchX(x);

diff --git a/src/RadarChart/index.tsx b/src/RadarChart/index.tsx
@@ -59,6 +59,7 @@ export const RadarChart = (props: RadarChartProps) => {
     angleStep,
     circular,
     hideGrid,
+    hideLabels,
     hideAsterLines,
     getGridLevelProps,
     animateTogether,
@@ -390,39 +391,43 @@ export const RadarChart = (props: RadarChartProps) => {
             })}
 
         {/* Draw category labels */}
-        {labels.map((category, index) => {
-          const angle = index * angleStep;
-          const {x, y} = polarToCartesian(
-            angle,
-            maxValue + labelsPositionOffset,
-          ); // Offset for label position
-          const fontSizeLocal = labelConfigArray?.[index]?.fontSize ?? fontSize;
-          const fontWeightLocal =
-            labelConfigArray?.[index]?.fontWeight ?? fontWeight;
-          const fontFamilyLocal =
-            labelConfigArray?.[index]?.fontFamily ?? fontFamily;
-          const colorLocal = labelConfigArray?.[index]?.stroke ?? stroke;
-          const textAnchorLocal =
-            labelConfigArray?.[index]?.textAnchor ?? textAnchor;
-          const alignmentBaselineLocal =
-            labelConfigArray?.[index]?.alignmentBaseline ?? alignmentBaseline;
-          return (
-            <SvgText
-              key={`label-${index}`}
-              x={x}
-              y={y}
-              fontSize={fontSizeLocal}
-              fontWeight={fontWeightLocal}
-              fontFamily={fontFamilyLocal}
-              fill={colorLocal}
-              textAnchor={(textAnchorLocal as TextAnchor) ?? 'middle'}
-              alignmentBaseline={
-                (alignmentBaselineLocal as AlignmentBaseline) ?? 'middle'
-              }>
-              {category}
-            </SvgText>
-          );
-        })}
+        {hideLabels
+          ? null
+          : labels.map((category, index) => {
+              const angle = index * angleStep;
+              const {x, y} = polarToCartesian(
+                angle,
+                maxValue + labelsPositionOffset,
+              ); // Offset for label position
+              const fontSizeLocal =
+                labelConfigArray?.[index]?.fontSize ?? fontSize;
+              const fontWeightLocal =
+                labelConfigArray?.[index]?.fontWeight ?? fontWeight;
+              const fontFamilyLocal =
+                labelConfigArray?.[index]?.fontFamily ?? fontFamily;
+              const colorLocal = labelConfigArray?.[index]?.stroke ?? stroke;
+              const textAnchorLocal =
+                labelConfigArray?.[index]?.textAnchor ?? textAnchor;
+              const alignmentBaselineLocal =
+                labelConfigArray?.[index]?.alignmentBaseline ??
+                alignmentBaseline;
+              return (
+                <SvgText
+                  key={`label-${index}`}
+                  x={x}
+                  y={y}
+                  fontSize={fontSizeLocal}
+                  fontWeight={fontWeightLocal}
+                  fontFamily={fontFamilyLocal}
+                  fill={colorLocal}
+                  textAnchor={(textAnchorLocal as TextAnchor) ?? 'middle'}
+                  alignmentBaseline={
+                    (alignmentBaselineLocal as AlignmentBaseline) ?? 'middle'
+                  }>
+                  {category}
+                </SvgText>
+              );
+            })}
       </Svg>
     </View>
   );

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,5 +1,5 @@
-import { useEffect, useRef } from 'react';
-import {Dimensions} from 'react-native';
+import {useEffect, useRef} from 'react';
+import {Dimensions, Platform} from 'react-native';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const versionString = require('react-native/package.json').version;
@@ -16,10 +16,12 @@ export const rnVersion =
 
 export const screenWidth = Dimensions.get('window').width;
 
-export function usePrevious(value:string) {
+export function usePrevious(value: string) {
   const ref = useRef('');
   useEffect(() => {
     ref.current = value; //assign the value of ref to the argument
-  },[value]); //this code will run when the value of 'value' changes
+  }, [value]); //this code will run when the value of 'value' changes
   return ref.current; //in the end, return the current ref value.
 }
+
+export const isWebApp = Platform.OS === 'web';