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

Merge pull request #211 from Abhinandan-Kushwaha/abhi 

Abhi
This commit is contained in:
Abhinandan Kushwaha 2022-05-27 14:28:29 +05:30 committed by GitHub
parent 3d671f063a 28df4b18d6
commit 3dfe9f5eb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/PieChart/PieChartProps.md
View File

@ -86,6 +86,9 @@ The default value for labelsPosition is 'mid'. In case of donut and semicircle c
| labelPosition | string | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' |
| onPress | Function | Callback function called on press of Pie sections (takes item and index as parameter) |
| onLabelPress | Function | Callback function called on press of a Label (takes item and index as parameter) |
| strokeWidth | number | Stroke (line) width for the Pie chart and its section |
| strokeColor | ColorValue | Stroke (line) color |
### Donut chart related props

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.27",
"version": "1.2.28",
"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": [

11
src/PieChart/index.tsx
View File

@ -67,6 +67,8 @@ type itemType = {
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
onPress?: Function;
onLabelPress?: Function;
strokeWidth?: number;
strokeColor?: string;
};
export const PieChart = (props: propTypes) => {
@ -113,15 +115,22 @@ export const PieChart = (props: propTypes) => {
value: props.data[selectedIndex].value,
color:
props.data[selectedIndex].color || colors[selectedIndex % 9],
strokeColor: props.data[selectedIndex].strokeColor || null,
strokeWidth: props.data[selectedIndex].strokeWidth || null,
gradientCenterColor:
props.data[selectedIndex].gradientCenterColor || null,
},
{
value: total - props.data[selectedIndex].value,
color: 'transparent',
peripheral: true,
strokeWidth: 0,
},
]}
key="pie"
radius={radius + extraRadiusForFocused}
initialAngle={startAngle}
showText={false}
innerRadius={props.innerRadius || radius / 2.5}
/>
</View>
<View style={{position: 'absolute'}}>

108
src/PieChart/main.tsx
View File

@ -73,6 +73,9 @@ type itemType = {
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
onPress?: Function;
onLabelPress?: Function;
strokeWidth?: number;
strokeColor?: string;
peripheral?: boolean;
};
export const PieChartMain = (props: propTypes) => {
@ -266,44 +269,81 @@ export const PieChartMain = (props: propTypes) => {
cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
(item.shiftY || 0);
// console.log('sx', sx);
// console.log('sy', sy);
// console.log('ax', ax);
// console.log('ay', ay);
return (
<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={strokeColor}
strokeWidth={strokeWidth}
fill={
showGradient
? `url(#grad${index})`
: item.color || colors[index % 9]
}
onPress={() => {
if (item.onPress) {
item.onPress();
} else if (props.onPress) {
props.onPress(item, index);
<>
{/********************* 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]
}
if (props.focusOnPress) {
if (props.selectedIndex === index) {
if (toggleFocusOnPress) {
props.setSelectedIndex(-1);
}
} else {
props.setSelectedIndex(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);
}
}
}}
/>
{/********************* 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
}
/>
</>
);
})
)}