Added initialAngle to Pie charts and fixed issue with barMarginBottom

This commit is contained in:
Abhinandan-Kushwaha 2022-04-13 20:41:52 +05:30
parent cc423c4986
commit 9f10683cc4
4 changed files with 12 additions and 2 deletions

BIN
demos/pie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -4,6 +4,7 @@
| -------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | --------------- | | -------------------- | -------------- | --------------------------------------------------------------------------------------------------------- | --------------- |
| data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ | | data | Array of items | An item object represents a section in the Pie chart. Descibed in the next table | \_ |
| radius | number | Radius of the Pie chart | 120 | | radius | number | Radius of the Pie chart | 120 |
| initialAngle | number | Starting angle in radians (illustrated below this table) | 0 |
| isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false | | isThreeD | Boolean | If set to true, it rotates and translates the chart to give it a 3D effect | false |
| shadow | Boolean | Shadow to the Pie chart, when set to true, it enhances the 3D effect | false | | shadow | Boolean | Shadow to the Pie chart, when set to true, it enhances the 3D effect | false |
| shadowColor | ColorValue | Color of the shadow | lightgray | | shadowColor | ColorValue | Color of the shadow | lightgray |
@ -24,6 +25,11 @@
| centerLabelComponent | Function | Component to be rendered at the center of the Pie chart | \_ | | centerLabelComponent | Function | Component to be rendered at the center of the Pie chart | \_ |
| semiCircle | Boolean | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | false | | semiCircle | Boolean | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | false |
#### initialAngle
The default value is 0. The angles are distributed differently from the usual coordinate system. It is illustrated below-
<img src='../../demos/pie.png' alt='' height=400 width=400/>
### Item description ### Item description
| Prop | Type | Description | | Prop | Type | Description |

View File

@ -111,7 +111,9 @@ const RenderBars = (props: Props) => {
} = props; } = props;
const barMarginBottom = const barMarginBottom =
item.barMarginBottom === 0 ? 0 : props.barMarginBottom || 0; item.barMarginBottom === 0
? 0
: item.barMarginBottom || props.barMarginBottom || 0;
const renderLabel = (label: String, labelTextStyle: any, value: number) => { const renderLabel = (label: String, labelTextStyle: any, value: number) => {
return ( return (

View File

@ -34,6 +34,7 @@ type propTypes = {
centerLabelComponent?: Function; centerLabelComponent?: Function;
tilt?: number; tilt?: number;
initialAngle?: number;
}; };
type itemType = { type itemType = {
value: number; value: number;
@ -96,6 +97,7 @@ export const PieChart = (props: propTypes) => {
'800', '800',
'900', '900',
]; ];
const initialAngle = props.initialAngle || 0;
let isDataShifted = false; let isDataShifted = false;
data.forEach((item: any) => { data.forEach((item: any) => {
@ -148,7 +150,7 @@ export const PieChart = (props: propTypes) => {
/******************************************************/ /******************************************************/
let i = 0, let i = 0,
angleSum = 0; angleSum = initialAngle;
let colors = [ let colors = [
'cyan', 'cyan',
'green', 'green',