diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md
index 36ab2ba..8e4d5ad 100644
--- 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
index 05e8a90..37adaf5 100644
--- 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
index ce14514..1ac87c9 100644
--- 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
index bf1050e..e377b95 100644
--- 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
index 082145c..7b851f5 100644
--- 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
index 38656d0..89b3b0a 100644
--- 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,
)}
diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
index 969efea..5684ba0 100644
--- 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 (
+ (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)
+ ) : (
+
+
+ {getTooltipText(tooltipSelectedIndex)}
+
+
+ )}
+
+ );
+ };
+
if (!total) return null;
return (
@@ -104,7 +182,10 @@ export const PieChart = (props: PieChartPropsType) => {
{
}}>
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}
);
};
diff --git a/src/PieChart/main.tsx b/src/PieChart/main.tsx
index 781feab..3c770eb 100644
--- a/src/PieChart/main.tsx
+++ b/src/PieChart/main.tsx
@@ -1,5 +1,5 @@
import React, {useState} from 'react';
-import {Pressable, View, Text, TextStyle} from 'react-native';
+import {Pressable, View} from 'react-native';
import Svg, {
Path,
Circle,
@@ -37,16 +37,6 @@ export const PieChartMain = (props: PieChartMainProps) => {
strokeWidth,
strokeColor,
innerRadius,
- showTooltip,
- tooltipWidth,
- tooltipComponent,
- tooltipVerticalShift,
- tooltipHorizontalShift,
- tooltipTextNoOfLines,
- tooltipBackgroundColor,
- tooltipBorderRadius,
- tooltipSelectedIndex,
- getTooltipText,
showText,
textColor,
textSize,
@@ -75,14 +65,15 @@ export const PieChartMain = (props: PieChartMainProps) => {
font,
fontWeight,
fontStyle,
+ edgesPressable,
} = getPieChartMainProps(props);
+ const{setTouchX,setTouchY} = props;
+
let prevSide = 'right';
let prevLabelComponentX = 0;
let wasFirstItemOnPole = false;
- const [touchX, setTouchX] = useState(0);
- const [touchY, setTouchY] = useState(0);
const [top, setTop] = useState(0);
const [left, setLeft] = useState(0);
@@ -126,7 +117,9 @@ export const PieChartMain = (props: PieChartMainProps) => {
};
return (
-
+
{
@@ -200,13 +193,6 @@ export const PieChartMain = (props: PieChartMainProps) => {
? `url(#grad${0})`
: data[0].color || pieColors[0 % 9]
}
- // onPress={() => {
- // data[0].onPress
- // ? data[0].onPress()
- // : props.onPress
- // ? props.onPress(data[0], 0)
- // : null;
- // }}
/>
) : (
@@ -365,26 +351,6 @@ export const PieChartMain = (props: PieChartMainProps) => {
textSize
}
fill={item.textBackgroundColor || textBackgroundColor}
- // onPress={() => {
- // item.onLabelPress
- // ? item.onLabelPress()
- // : props.onLabelPress
- // ? props.onLabelPress(item, index)
- // : item.onPress
- // ? item.onPress()
- // : props.onPress
- // ? props.onPress(item, index)
- // : null;
- // if (props.focusOnPress) {
- // if (props.selectedIndex === index) {
- // if (toggleFocusOnPress) {
- // props.setSelectedIndex(-1);
- // }
- // } else {
- // props.setSelectedIndex(index);
- // }
- // }
- // }}
/>
) : null}
{showText && (
@@ -404,26 +370,6 @@ export const PieChartMain = (props: PieChartMainProps) => {
(item.textSize || textSize) / 1.8
}
y={y + (item.shiftTextY || 0)}
- // onPress={() => {
- // item.onLabelPress
- // ? item.onLabelPress()
- // : props.onLabelPress
- // ? props.onLabelPress(item, index)
- // : item.onPress
- // ? item.onPress()
- // : props.onPress
- // ? props.onPress(item, index)
- // : null;
- // if (props.focusOnPress) {
- // if (props.selectedIndex === index) {
- // if (toggleFocusOnPress) {
- // props.setSelectedIndex(-1);
- // }
- // } else {
- // props.setSelectedIndex(index);
- // }
- // }
- // }}
>
{item.text || (showValuesAsLabels ? item.value + '' : '')}
@@ -451,60 +397,6 @@ export const PieChartMain = (props: PieChartMainProps) => {
}}
/>
) : null}
- {showTooltip && tooltipSelectedIndex !== -1 ? (
- (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)
- ) : (
-
-
- {getTooltipText(tooltipSelectedIndex)}
-
-
- )}
-
- ) : null}
);