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

67
src/PieChart/index.tsx
View File

@ -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 (
<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;
});
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 (
<View>
startAngle += (2 * pi * start) / total;
}
return (
<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 style={{position: 'absolute'}}>
<PieChartMain
{...props}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
/>
</View>
);
}
</View>
);
};

107
src/PieChart/main.tsx
View File

@ -270,80 +270,47 @@ 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)} ${
cy + (item.shiftY || 0)
} L ${sx} ${sy} A ${radius} ${radius} 0 ${
semiCircle ? 0 : data[index].value > 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]
<Path
key={index + 'a'}
d={`M ${cx + (item.shiftX || 0)} ${
cy + (item.shiftY || 0)
} L ${sx} ${sy} A ${radius} ${radius} 0 ${
semiCircle ? 0 : data[index].value > 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) *********/}
<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
}
/>
</>
}}
/>
);
})
)}