From 7b422d9bf5a424e6c93d1d1ea6344341d430bf24 Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Fri, 27 May 2022 15:22:19 +0530 Subject: [PATCH] refactored pie charts --- __tests__/__snapshots__/PieChart.test.js.snap | 2525 +++++++++-------- examples/PieChart/PieChartFocusOnPress.js | 28 + package.json | 2 +- src/PieChart/index.tsx | 67 +- src/PieChart/main.tsx | 107 +- 5 files changed, 1402 insertions(+), 1327 deletions(-) create mode 100644 examples/PieChart/PieChartFocusOnPress.js 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 - } - /> - - + }} + /> ); }) )}