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

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

@ -2,6 +2,21 @@
exports[`renders #D pie chart correctly 1`] = `
<View>
<View
style={
Object {
"height": 374,
"width": 374,
}
}
>
<View
style={
Object {
"position": "absolute",
}
}
>
<View
style={
Array [
@ -407,10 +422,27 @@ exports[`renders #D pie chart correctly 1`] = `
/>
</View>
</View>
</View>
</View>
`;
exports[`renders pie chart correctly for Single data 1`] = `
<View>
<View
style={
Object {
"height": 264,
"width": 264,
}
}
>
<View
style={
Object {
"position": "absolute",
}
}
>
<View
style={
Array [
@ -588,10 +620,27 @@ exports[`renders pie chart correctly for Single data 1`] = `
</View>
</View>
</View>
</View>
</View>
`;
exports[`renders progress pie chart correctly 1`] = `
<View>
<View
style={
Object {
"height": 264,
"width": 264,
}
}
>
<View
style={
Object {
"position": "absolute",
}
}
>
<View
style={
Array [
@ -757,10 +806,27 @@ exports[`renders progress pie chart correctly 1`] = `
</View>
</View>
</View>
</View>
</View>
`;
exports[`renders simple pie chart correctly 1`] = `
<View>
<View
style={
Object {
"height": 264,
"width": 264,
}
}
>
<View
style={
Object {
"position": "absolute",
}
}
>
<View
style={
Array [
@ -1144,9 +1210,26 @@ exports[`renders simple pie chart correctly 1`] = `
</View>
</View>
</View>
</View>
</View>
`;
exports[`renders split pie chart correctly 1`] = `
<View
style={
Object {
"height": 264,
"width": 264,
}
}
>
<View
style={
Object {
"position": "absolute",
}
}
>
<View
style={
Array [
@ -1309,4 +1392,6 @@ exports[`renders split pie chart correctly 1`] = `
</RNSVGGroup>
</RNSVGSvgView>
</View>
</View>
</View>
`;

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",
"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": [

27
src/PieChart/index.tsx
View File

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

49
src/PieChart/main.tsx
View File

@ -270,8 +270,6 @@ export const PieChartMain = (props: propTypes) => {
(item.shiftY || 0);
return (
<>
{/********************* Pie sections background with colors excluding the borders *********/}
<Path
key={index + 'a'}
d={`M ${cx + (item.shiftX || 0)} ${
@ -281,8 +279,14 @@ export const PieChartMain = (props: propTypes) => {
} 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
}`}
stroke={'transparent'}
strokeWidth={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'
@ -307,43 +311,6 @@ export const PieChartMain = (props: propTypes) => {
}
}}
/>
{/********************* 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
}
/>
</>
);
})
)}