diff --git a/__tests__/__snapshots__/PieChart.test.js.snap b/__tests__/__snapshots__/PieChart.test.js.snap
index 13182ae..2b69028 100644
--- a/__tests__/__snapshots__/PieChart.test.js.snap
+++ b/__tests__/__snapshots__/PieChart.test.js.snap
@@ -4,407 +4,424 @@ exports[`renders #D pie chart correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ vbHeight={340}
+ vbWidth={340}
+ width={340}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
`;
@@ -413,178 +430,195 @@ exports[`renders pie chart correctly for Single data 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -594,165 +628,182 @@ exports[`renders progress pie chart correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
- 70%
-
+
+
+ 70%
+
+
+
@@ -763,384 +814,401 @@ exports[`renders simple pie chart correctly 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1149,164 +1217,181 @@ exports[`renders simple pie chart correctly 1`] = `
exports[`renders split pie chart correctly 1`] = `
-
-
-
-
-
-
-
-
+
-
-
-
-
+ vbHeight={258}
+ vbWidth={250}
+ width={240}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
diff --git a/examples/PieChart/PieChartFocusOnPress.js b/examples/PieChart/PieChartFocusOnPress.js
new file mode 100644
index 0000000..94e4961
--- /dev/null
+++ b/examples/PieChart/PieChartFocusOnPress.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View} from 'react-native';
+import {PieChart} from '../../src/PieChart';
+
+const PieChartFocusOnPress = () => {
+ const pieData = [
+ {value: 54, color: '#177AD5', text: '54%'},
+ {value: 30, color: '#79D2DE', text: '30%'},
+ {value: 26, color: '#ED6665', text: '26%'},
+ ];
+ return (
+
+
+
+ );
+};
+
+export default PieChartFocusOnPress;
diff --git a/package.json b/package.json
index ede7d14..d025e68 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
- "version": "1.2.28",
+ "version": "1.2.29",
"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": [
diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
index 64dcb94..fb46c05 100644
--- a/src/PieChart/index.tsx
+++ b/src/PieChart/index.tsx
@@ -76,32 +76,29 @@ export const PieChart = (props: propTypes) => {
const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
const [selectedIndex, setSelectedIndex] = useState(-1);
-
- if (props.data.length <= 1 || !props.focusOnPress || selectedIndex === -1) {
- return (
-
- );
- } else {
- let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
- // let startColor;
- let total = 0;
- props.data.forEach(item => {
- total += item.value;
- });
- if (selectedIndex !== 0) {
- let start = 0;
- for (let i = 0; i < selectedIndex; i++) {
- start += props.data[i].value;
- }
- startAngle += (2 * pi * start) / total;
+ let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
+ let total = 0;
+ props.data.forEach(item => {
+ total += item.value;
+ });
+ if (selectedIndex !== 0) {
+ let start = 0;
+ for (let i = 0; i < selectedIndex; i++) {
+ start += props.data[i].value;
}
- return (
-
+ startAngle += (2 * pi * start) / total;
+ }
+ return (
+
+ {!(
+ props.data.length <= 1 ||
+ !props.focusOnPress ||
+ selectedIndex === -1
+ ) && (
{
strokeWidth: 0,
},
]}
- key="pie"
radius={radius + extraRadiusForFocused}
initialAngle={startAngle}
showText={false}
innerRadius={props.innerRadius || radius / 2.5}
/>
-
-
-
+ )}
+
+
- );
- }
+
+ );
};
diff --git a/src/PieChart/main.tsx b/src/PieChart/main.tsx
index 60691b2..3e7248b 100644
--- a/src/PieChart/main.tsx
+++ b/src/PieChart/main.tsx
@@ -270,80 +270,47 @@ export const PieChartMain = (props: propTypes) => {
(item.shiftY || 0);
return (
- <>
- {/********************* Pie sections background with colors excluding the borders *********/}
- total / 2 ? 1 : 0
- } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
- cy + (item.shiftY || 0)
- }`}
- stroke={'transparent'}
- strokeWidth={0}
- fill={
- props.selectedIndex === index || item.peripheral
- ? 'transparent'
- : showGradient
- ? `url(#grad${index})`
- : item.color || colors[index % 9]
+ total / 2 ? 1 : 0
+ } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
+ cy + (item.shiftY || 0)
+ }`}
+ stroke={item.strokeColor || strokeColor}
+ strokeWidth={
+ props.focusOnPress && props.selectedIndex === index
+ ? 0
+ : item.strokeWidth === 0
+ ? 0
+ : item.strokeWidth || strokeWidth
+ }
+ fill={
+ props.selectedIndex === index || item.peripheral
+ ? 'transparent'
+ : showGradient
+ ? `url(#grad${index})`
+ : item.color || colors[index % 9]
+ }
+ onPress={() => {
+ if (item.onPress) {
+ item.onPress();
+ } else if (props.onPress) {
+ props.onPress(item, index);
}
- onPress={() => {
- if (item.onPress) {
- item.onPress();
- } else if (props.onPress) {
- props.onPress(item, index);
- }
- if (props.focusOnPress) {
- if (props.selectedIndex === index) {
- if (toggleFocusOnPress) {
- props.setSelectedIndex(-1);
- }
- } else {
- props.setSelectedIndex(index);
+ if (props.focusOnPress) {
+ if (props.selectedIndex === index) {
+ if (toggleFocusOnPress) {
+ props.setSelectedIndex(-1);
}
+ } else {
+ props.setSelectedIndex(index);
}
- }}
- />
-
- {/********************* Pie sections borders (made separately as they can have separate strokeWidths) *********/}
-
- total / 2 ? 1 : 0
- } 1 ${ax} ${ay}`}
- stroke={item.strokeColor || strokeColor}
- strokeWidth={
- props.focusOnPress && props.selectedIndex === index
- ? 0
- : item.strokeWidth === 0
- ? 0
- : item.strokeWidth || strokeWidth
- }
- />
-
- >
+ }}
+ />
);
})
)}