Merge pull request #1005 from Abhinandan-Kushwaha/development

v1.4.57 fixed issues with pointers, tooltips etc
Abhinandan-Kushwaha · Feb 16, 2025 · 2d195ec · 2d195ec
2 parents 9d53757 + fc1fdb1
commit 2d195ec
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 165 deletions.
diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md
@@ -44,6 +44,9 @@
 | showExternalLabels          | boolean              | To show labels for each Pie section outside the chart towards left or right based on its position         | false                                          |
 | labelLineConfig             | LabelLineConfig      | Object to configure the properties (like length, color, tailLength etc.) of external label's line         | \_                                             |
 | externalLabelComponent      | Function             | Component to be rendered as external labels for each Pie section                                          | \_                                             |
+| edgesPressable              | boolean              | used with `focusOnPress`, to make the extra length of the focused slice pressable (more details below)    | false                                          |
+
+**edgesPressable**: Ususally the entire slice of the Pie chart is pressable, but when a slice is foused, it becomes larger. In that case the extra length of the slice protruding out of the chart is unpressable. To make that extra length also pressable, we can use the `edgesPressable` prop. If `edgesPressable` is set to true, the edges of the pie will be pressable, but you may need to press twice for focus- once for unfocusing the already focused pie and then for focusing the new pie
 
 ### Tooltip
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.56",
+  "version": "1.4.57",
   "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.58"
+    "gifted-charts-core": "0.1.59"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,26 @@
+# 🎉 1.4.57
+
+## ✨ Features added-
+
+1. Added the prop `edgesPressable` to Pie charts. Ususally the entire slice of the Pie chart is pressable, but when a slice is foused, it becomes larger. In that case the extra length of the slice protruding out of the chart is unpressable. To make that extra length also pressable, we can use the `edgesPressable` prop. If `edgesPressable` is set to true, the edges of the pie will be pressable, but you may need to press twice for focus- once for unfocusing the already focused pie and then for focusing the new pie. This prop was added after fixing the issue- "Can't select other Pie slices by just one press event". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/
+
+## 🐛 Bug fixes
+
+1. Fixed the iussue- "Pointer and strip not showing immediately on bar press". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/1002
+
+2. Fixed the issue- "LineChart 1st data point shows pointer label on the most top side of the datapoint if initial data value is 0". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/1003
+
+3. Fixed the issue- "`dynamicLegendComponent` doesn't show actual values from data when used with `yAxisOffset`". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/discussions/1000#discussioncomment-12208608 
+
+4. Fixed the issue- "donut PieChart not showing tooltip correctly". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/983
+
+
+---
+
+---
+
+---
+
 # 🎉 1.4.56
 
 ## ✨ Features added-

diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx
@@ -237,7 +237,10 @@ export const BarChart = (props: BarChartPropsType) => {
           onMoveShouldSetResponder={() => !!pointerConfig}
           onResponderGrant={evt => {
             setResponderStartTime(evt.timeStamp);
-            if (activatePointersOnLongPress) {
+            if (
+              activatePointersOnLongPress ||
+              !pointerConfig?.activatePointersInstantlyOnTouch
+            ) {
               return;
             }
             let x = evt.nativeEvent.locationX;
@@ -246,6 +249,8 @@ export const BarChart = (props: BarChartPropsType) => {
               x > (props.width || screenWidth)
             )
               return;
+            setResponderActive(true);
+            activatePointer(x);
           }}
           onResponderMove={evt => {
             if (

diff --git a/src/Components/common/StripAndLabel.tsx b/src/Components/common/StripAndLabel.tsx
@@ -95,8 +95,8 @@ export const StripAndLabel = (props: StripAndLabelProps) => {
                   horizontalStripConfig.thickness ?? pointerStripWidth
                 }
                 strokeDasharray={
-                  pointerConfig?.horizontalStripConfig?.strokeDashArray ??
-                  pointerConfig?.strokeDashArray
+                  (pointerConfig?.horizontalStripConfig?.strokeDashArray ??
+                  pointerConfig?.strokeDashArray)
                     ? pointerConfig?.strokeDashArray
                     : ''
                 }

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -337,6 +337,8 @@ export const LineChart = (props: LineChartPropsType) => {
     selectedLineNumber,
     handleFocus,
     handleUnFocus,
+    stepValue,
+    pointerItemLocal,
   } = useLineChart({
     ...props,
     parentWidth: props.parentWidth ?? screenWidth,
@@ -1035,39 +1037,20 @@ export const LineChart = (props: LineChartPropsType) => {
   };
 
   const renderStripAndLabel = () => {
-    let pointerItemLocal, pointerYLocal;
+    let pointerYLocal;
 
-    pointerItemLocal = [
-      {...pointerItem, value: props.data?.[pointerIndex]?.value},
-    ];
     let arr = [pointerY];
     if (pointerY2 !== 0) {
       arr.push(pointerY2);
-      pointerItemLocal.push({
-        ...pointerItem,
-        value: props.data2?.[pointerIndex]?.value,
-      });
     }
     if (pointerY3 !== 0) {
       arr.push(pointerY3);
-      pointerItemLocal.push({
-        ...pointerItem,
-        value: props.data3?.[pointerIndex]?.value,
-      });
     }
     if (pointerY4 !== 0) {
       arr.push(pointerY4);
-      pointerItemLocal.push({
-        ...pointerItem,
-        value: props.data4?.[pointerIndex]?.value,
-      });
     }
     if (pointerY5 !== 0) {
       arr.push(pointerY5);
-      pointerItemLocal.push({
-        ...pointerItem,
-        value: props.data5?.[pointerIndex]?.value,
-      });
     }
     pointerYLocal = Math.min(...arr);
 
@@ -2693,15 +2676,7 @@ export const LineChart = (props: LineChartPropsType) => {
               pointerConfig.dynamicLegendContainerStyle,
             ]}>
             {pointerConfig.dynamicLegendComponent(
-              dataSet
-                ? pointerItemsForSet
-                : [
-                    pointerItem,
-                    pointerItem2,
-                    pointerItem3,
-                    pointerItem4,
-                    pointerItem5,
-                  ].filter(item => !!item),
+              pointerItemLocal,
               pointerIndex,
             )}
           </View>

diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
@@ -1,7 +1,8 @@
-import {View} from 'react-native';
+import {View, Text, TextStyle} from 'react-native';
 import {PieChartMain} from './main';
 import {PieChartPropsType, usePieChart} from 'gifted-charts-core';
 import {isWebApp} from '../utils';
+import {useState} from 'react';
 
 export const PieChart = (props: PieChartPropsType) => {
   const {
@@ -27,8 +28,28 @@ export const PieChart = (props: PieChartPropsType) => {
     isDataShifted,
     paddingHorizontal,
     paddingVertical,
+    data,
+    showTooltip,
+    tooltipHorizontalShift,
+    tooltipVerticalShift,
+    tooltipComponent,
+    getTooltipText,
+    tooltipBackgroundColor,
+    tooltipBorderRadius,
+    tooltipWidth,
+    tooltipTextNoOfLines,
+    textColor,
+    textSize,
+    font,
+    fontWeight,
+    fontStyle,
+    tooltipSelectedIndex,
+    setTooltipSelectedIndex,
   } = usePieChart(props);
 
+  const [touchX, setTouchX] = useState(0);
+  const [touchY, setTouchY] = useState(0);
+
   const renderInnerCircle = (
     innerRadius: number,
     innerCircleBorderWidth: number,
@@ -90,6 +111,63 @@ export const PieChart = (props: PieChartPropsType) => {
     return null;
   };
 
+  const renderTooltip = () => {
+    return (
+      <View
+        style={{
+          position: 'absolute',
+          left:
+            touchX > (radius + extraRadius) * 1.5
+              ? props.tooltipHorizontalShift
+                ? touchX - tooltipHorizontalShift
+                : touchX -
+                  (tooltipWidth ??
+                    getTooltipText(tooltipSelectedIndex).length * 10)
+              : touchX - tooltipHorizontalShift,
+          top:
+            touchY < 30
+              ? props.tooltipVerticalShift
+                ? touchY - tooltipVerticalShift
+                : touchY
+              : touchY - tooltipVerticalShift,
+        }}>
+        {data[tooltipSelectedIndex].tooltipComponent ? (
+          data[tooltipSelectedIndex].tooltipComponent?.()
+        ) : tooltipComponent ? (
+          tooltipComponent(tooltipSelectedIndex)
+        ) : (
+          <View
+            style={{
+              backgroundColor: tooltipBackgroundColor,
+              borderRadius: tooltipBorderRadius,
+              paddingHorizontal: 8,
+              paddingBottom: 8,
+              paddingTop: 4,
+              width: tooltipWidth,
+            }}>
+            <Text
+              numberOfLines={tooltipTextNoOfLines}
+              style={
+                {
+                  color:
+                    data[tooltipSelectedIndex].textColor ||
+                    textColor ||
+                    'white',
+                  textAlign: 'center',
+                  fontSize: textSize,
+                  fontFamily: font,
+                  fontWeight,
+                  fontStyle,
+                } as TextStyle
+              }>
+              {getTooltipText(tooltipSelectedIndex)}
+            </Text>
+          </View>
+        )}
+      </View>
+    );
+  };
+
   if (!total) return null;
 
   return (
@@ -104,7 +182,10 @@ export const PieChart = (props: PieChartPropsType) => {
       <View style={{position: 'absolute'}}>
         <PieChartMain
           {...props}
-          selectedIndex={selectedIndex}
+          setTouchX={setTouchX}
+          setTouchY={setTouchY}
+          tooltipSelectedIndex={tooltipSelectedIndex}
+          setTooltipSelectedIndex={setTooltipSelectedIndex}
           setSelectedIndex={setSelectedIndex}
           paddingHorizontal={paddingHorizontal}
           paddingVertical={paddingVertical}
@@ -126,26 +207,16 @@ export const PieChart = (props: PieChartPropsType) => {
             }}>
             <PieChartMain
               {...props}
+              setTouchX={setTouchX}
+              setTouchY={setTouchY}
+              tooltipSelectedIndex={tooltipSelectedIndex}
+              setTooltipSelectedIndex={setTooltipSelectedIndex}
               data={[
                 {
                   ...props.data[selectedIndex],
-                  // value: props.data[selectedIndex].value,
-                  // text: props.data[selectedIndex].text,
-                  // color:
-                  //   props.data[selectedIndex].color ||
-                  //   pieColors[selectedIndex % 9],
-                  // strokeColor:
-                  //   props.data[selectedIndex].strokeColor || undefined,
-                  // strokeWidth:
-                  //   props.data[selectedIndex].strokeWidth || undefined,
-                  // gradientCenterColor:
-                  //   props.data[selectedIndex].gradientCenterColor || undefined,
-                  // shiftTextX: props.data[selectedIndex].shiftTextX || undefined,
-                  // shiftTextY: props.data[selectedIndex].shiftTextY || undefined,
                 },
                 {
                   value: total - props.data[selectedIndex].value,
-                  // onPress: () => alert('black'),
                   peripheral: true,
                   strokeWidth: 0,
                 },
@@ -165,6 +236,7 @@ export const PieChart = (props: PieChartPropsType) => {
         innerRadius - inwardExtraLengthForFocused,
         inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth,
       )}
+      {showTooltip && tooltipSelectedIndex !== -1 ? renderTooltip() : null}
     </View>
   );
 };