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

Added tilt angle for Pie and Donut charts

This commit is contained in:
Abhinandan Kushwaha 2021-10-19 19:29:01 +05:30
parent 897a15b1b7
commit 8b08e042d2
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/PieChart/PieChartProps.md
View File

@ -38,12 +38,13 @@
### Donut chart related props
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ------------------------------------------------------------- | ------------------------------------ |
| donut | Boolean | When set to true, renders a Donut chart (makes an inner ring) | false |
| innerRadius | number | Radius of the inner ring | radius/2 |
| innerCircleColor | ColorValue | Color of the inner ring | white |
| innerCircleBorderWidth | number | Stroke (border) width of the inner ring | props.innerCircleBorderColor ? 5 : 0 |
| innerCircleBorderColor | ColorValue | Stroke (border) color of the inner ring | gray |
| shiftInnerCenterX | number | Shifts the inner ring horizontally to enhance the 3D effect | 0 |
| shiftInnerCenterY | number | Shifts the inner ring vertically to enhance the 3D effect | 0 |
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ----------------------------------------------------------------- | ------------------------------------ |
| donut | Boolean | When set to true, renders a Donut chart (makes an inner ring) | false |
| innerRadius | number | Radius of the inner ring | radius/2 |
| innerCircleColor | ColorValue | Color of the inner ring | white |
| innerCircleBorderWidth | number | Stroke (border) width of the inner ring | props.innerCircleBorderColor ? 5 : 0 |
| innerCircleBorderColor | ColorValue | Stroke (border) color of the inner ring | gray |
| shiftInnerCenterX | number | Shifts the inner ring horizontally to enhance the 3D effect | 0 |
| shiftInnerCenterY | number | Shifts the inner ring vertically to enhance the 3D effect | 0 |
| tilt | number | The factor (between 0 annd 1) by which the chart should be tilted | if threeD then 0.5 else 1 |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.1.11",
"version": "0.1.12",
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

4
src/PieChart/index.tsx
View File

@ -31,6 +31,7 @@ type propTypes = {
showValuesAsLabels?: Boolean;
centerLabelComponent?: Function;
tilt?: number;
};
type itemType = {
value: number;
@ -68,6 +69,7 @@ export const PieChart = (props: propTypes) => {
const showText = props.showText || false;
const textColor = props.textColor || '';
const textSize = props.textSize ? Math.min(props.textSize, radius / 5) : 16;
const tilt = props.tilt ? Math.min(props.tilt, 1) : props.isThreeD ? 0.5 : 1;
const showTextBackground = props.showTextBackground || false;
const showValuesAsLabels = props.showValuesAsLabels || false;
@ -277,7 +279,7 @@ export const PieChart = (props: propTypes) => {
};
return (
<View style={isThreeD && {transform: [{scaleY: 0.5}]}}>
<View style={{transform: [{scaleY: tilt}]}}>
<Canvas ref={handleCanvas} />
{(props.centerLabelComponent || (donut && !isDataShifted)) && (
<View