From 8b08e042d2f42816e431218253cc48bc5b0fa5be Mon Sep 17 00:00:00 2001
From: Abhinandan Kushwaha <kushabhi5@gmail.com>
Date: Tue, 19 Oct 2021 19:29:01 +0530
Subject: [PATCH] Added tilt angle for Pie and Donut charts

---
 docs/PieChart/PieChartProps.md | 19 ++++++++++---------
 package.json                   |  2 +-
 src/PieChart/index.tsx         |  4 +++-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/docs/PieChart/PieChartProps.md b/docs/PieChart/PieChartProps.md
index 1279b94..ed73a34 100644
--- a/docs/PieChart/PieChartProps.md
+++ b/docs/PieChart/PieChartProps.md
@@ -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            |
diff --git a/package.json b/package.json
index 7040c83..fa8f6aa 100644
--- a/package.json
+++ b/package.json
@@ -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": [
diff --git a/src/PieChart/index.tsx b/src/PieChart/index.tsx
index 452fab1..fa55e1c 100644
--- a/src/PieChart/index.tsx
+++ b/src/PieChart/index.tsx
@@ -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