commit
3dfe9f5eb9
|
@ -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' |
|
| 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) |
|
| 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) |
|
| 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
|
### Donut chart related props
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "react-native-gifted-charts",
|
"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.",
|
"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,6 +67,8 @@ type itemType = {
|
||||||
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
|
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
|
||||||
onPress?: Function;
|
onPress?: Function;
|
||||||
onLabelPress?: Function;
|
onLabelPress?: Function;
|
||||||
|
strokeWidth?: number;
|
||||||
|
strokeColor?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PieChart = (props: propTypes) => {
|
export const PieChart = (props: propTypes) => {
|
||||||
|
@ -113,15 +115,22 @@ export const PieChart = (props: propTypes) => {
|
||||||
value: props.data[selectedIndex].value,
|
value: props.data[selectedIndex].value,
|
||||||
color:
|
color:
|
||||||
props.data[selectedIndex].color || colors[selectedIndex % 9],
|
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,
|
value: total - props.data[selectedIndex].value,
|
||||||
color: 'transparent',
|
peripheral: true,
|
||||||
|
strokeWidth: 0,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
key="pie"
|
key="pie"
|
||||||
radius={radius + extraRadiusForFocused}
|
radius={radius + extraRadiusForFocused}
|
||||||
initialAngle={startAngle}
|
initialAngle={startAngle}
|
||||||
|
showText={false}
|
||||||
|
innerRadius={props.innerRadius || radius / 2.5}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<View style={{position: 'absolute'}}>
|
<View style={{position: 'absolute'}}>
|
||||||
|
|
|
@ -73,6 +73,9 @@ type itemType = {
|
||||||
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
|
labelPosition?: 'onBorder' | 'outward' | 'inward' | 'mid';
|
||||||
onPress?: Function;
|
onPress?: Function;
|
||||||
onLabelPress?: Function;
|
onLabelPress?: Function;
|
||||||
|
strokeWidth?: number;
|
||||||
|
strokeColor?: string;
|
||||||
|
peripheral?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PieChartMain = (props: propTypes) => {
|
export const PieChartMain = (props: propTypes) => {
|
||||||
|
@ -266,44 +269,81 @@ export const PieChartMain = (props: propTypes) => {
|
||||||
cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
|
cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
|
||||||
(item.shiftY || 0);
|
(item.shiftY || 0);
|
||||||
|
|
||||||
// console.log('sx', sx);
|
|
||||||
// console.log('sy', sy);
|
|
||||||
// console.log('ax', ax);
|
|
||||||
// console.log('ay', ay);
|
|
||||||
return (
|
return (
|
||||||
<Path
|
<>
|
||||||
key={index + 'a'}
|
{/********************* Pie sections background with colors excluding the borders *********/}
|
||||||
d={`M ${cx + (item.shiftX || 0)} ${
|
<Path
|
||||||
cy + (item.shiftY || 0)
|
key={index + 'a'}
|
||||||
} L ${sx} ${sy} A ${radius} ${radius} 0 ${
|
d={`M ${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)} ${
|
} L ${sx} ${sy} A ${radius} ${radius} 0 ${
|
||||||
cy + (item.shiftY || 0)
|
semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0
|
||||||
}`}
|
} 1 ${ax} ${ay} L ${cx + (item.shiftX || 0)} ${
|
||||||
stroke={strokeColor}
|
cy + (item.shiftY || 0)
|
||||||
strokeWidth={strokeWidth}
|
}`}
|
||||||
fill={
|
stroke={'transparent'}
|
||||||
showGradient
|
strokeWidth={0}
|
||||||
? `url(#grad${index})`
|
fill={
|
||||||
: item.color || colors[index % 9]
|
props.selectedIndex === index || item.peripheral
|
||||||
}
|
? 'transparent'
|
||||||
onPress={() => {
|
: showGradient
|
||||||
if (item.onPress) {
|
? `url(#grad${index})`
|
||||||
item.onPress();
|
: item.color || colors[index % 9]
|
||||||
} else if (props.onPress) {
|
|
||||||
props.onPress(item, index);
|
|
||||||
}
|
}
|
||||||
if (props.focusOnPress) {
|
onPress={() => {
|
||||||
if (props.selectedIndex === index) {
|
if (item.onPress) {
|
||||||
if (toggleFocusOnPress) {
|
item.onPress();
|
||||||
props.setSelectedIndex(-1);
|
} else if (props.onPress) {
|
||||||
}
|
props.onPress(item, index);
|
||||||
} 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
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue