status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactored pie charts

This commit is contained in:
Abhinandan-Kushwaha 2022-05-27 15:22:19 +05:30
parent 3dfe9f5eb9
commit 7b422d9bf5
5 changed files with 1402 additions and 1327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2525
__tests__/__snapshots__/PieChart.test.js.snap
View File

File diff suppressed because it is too large Load Diff

28
examples/PieChart/PieChartFocusOnPress.js Normal file
View File

@ -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 (
<View>
<PieChart
donut
showText
textColor="black"
innerRadius={70}
showTextBackground
textBackgroundColor="white"
textBackgroundRadius={22}
data={pieData}
focusOnPress
/>
</View>
);
};
export default PieChartFocusOnPress;

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-native-gifted-charts", "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.", "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", "main": "src/index.tsx",
"files": [ "files": [

67
src/PieChart/index.tsx
View File

@ -76,32 +76,29 @@ export const PieChart = (props: propTypes) => {
const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10; const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
const pi = props.semiCircle ? Math.PI / 2 : Math.PI; const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
const [selectedIndex, setSelectedIndex] = useState(-1); const [selectedIndex, setSelectedIndex] = useState(-1);
let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
if (props.data.length <= 1 || !props.focusOnPress || selectedIndex === -1) { let total = 0;
return ( props.data.forEach(item => {
<PieChartMain total += item.value;
{...props} });
key="pie" if (selectedIndex !== 0) {
setSelectedIndex={setSelectedIndex} let start = 0;
selectedIndex={selectedIndex} for (let i = 0; i < selectedIndex; i++) {
/> start += props.data[i].value;
);
} 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;
} }
return ( startAngle += (2 * pi * start) / total;
<View> }
return (
<View
style={{
height: (radius + extraRadiusForFocused) * 2,
width: (radius + extraRadiusForFocused) * 2,
}}>
{!(
props.data.length <= 1 ||
!props.focusOnPress ||
selectedIndex === -1
) && (
<View <View
style={{ style={{
position: 'absolute', position: 'absolute',
@ -126,22 +123,20 @@ export const PieChart = (props: propTypes) => {
strokeWidth: 0, strokeWidth: 0,
}, },
]} ]}
key="pie"
radius={radius + extraRadiusForFocused} radius={radius + extraRadiusForFocused}
initialAngle={startAngle} initialAngle={startAngle}
showText={false} showText={false}
innerRadius={props.innerRadius || radius / 2.5} innerRadius={props.innerRadius || radius / 2.5}
/> />
</View> </View>
<View style={{position: 'absolute'}}> )}
<PieChartMain <View style={{position: 'absolute'}}>
{...props} <PieChartMain
key="pie" {...props}
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex} setSelectedIndex={setSelectedIndex}
/> />
</View>
</View> </View>
); </View>
} );
}; };

107
src/PieChart/main.tsx
View File

@ -270,80 +270,47 @@ export const PieChartMain = (props: propTypes) => {
(item.shiftY || 0); (item.shiftY || 0);
return ( return (
<> <Path
{/********************* Pie sections background with colors excluding the borders *********/} key={index + 'a'}
<Path d={`M ${cx + (item.shiftX || 0)} ${
key={index + 'a'} cy + (item.shiftY || 0)
d={`M ${cx + (item.shiftX || 0)} ${ } L ${sx} ${sy} A ${radius} ${radius} 0 ${
cy + (item.shiftY || 0) semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
} L ${sx} ${sy} A ${radius} ${radius} 0 ${ } 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0 cy + (item.shiftY || 0)
} 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${ }`}
cy + (item.shiftY || 0) stroke={item.strokeColor || strokeColor}
}`} strokeWidth={
stroke={'transparent'} props.focusOnPress && props.selectedIndex === index
strokeWidth={0} ? 0
fill={ : item.strokeWidth === 0
props.selectedIndex === index || item.peripheral ? 0
? 'transparent' : item.strokeWidth || strokeWidth
: showGradient }
? `url(#grad${index})` fill={
: item.color || colors[index % 9] 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 (props.focusOnPress) {
if (item.onPress) { if (props.selectedIndex === index) {
item.onPress(); if (toggleFocusOnPress) {
} else if (props.onPress) { props.setSelectedIndex(-1);
props.onPress(item, index);
}
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}
} else {
props.setSelectedIndex(index);
} }
} else {
props.setSelectedIndex(index);
} }
}}
/>
{/********************* Pie sections borders (made separately as they can have separate strokeWidths) *********/}
<Path
key={index + 'line1'}
d={`M ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
} L ${sx} ${sy}`}
stroke={item.strokeColor || strokeColor}
strokeWidth={
item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
} }
/> }}
<Path />
key={index + 'arc'}
d={`M ${sx} ${sy} A ${radius} ${radius} 0 ${
semiCircle ? 0 : data[index].value > 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
}
/>
<Path
key={index + 'line2'}
d={`M ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
}`}
stroke={item.strokeColor || strokeColor}
strokeWidth={
item.strokeWidth === 0 ? 0 : item.strokeWidth || strokeWidth
}
/>
</>
); );
}) })
)} )}