From 162b533b6dc27b742c21ec3a2ed3492ba4586c04 Mon Sep 17 00:00:00 2001
From: Abhinandan Kushwaha <kushabhi5@gmail.com>
Date: Thu, 5 Aug 2021 17:42:48 +0530
Subject: [PATCH] Handled 0 values

---
 App.js                               |  18 ++--
 package.json                         |   2 +-
 src/Components/AnimatedBar/index.tsx |  98 +++++++++---------
 src/Components/ThreeDBar/index.tsx   | 148 ++++++++++++++-------------
 4 files changed, 138 insertions(+), 128 deletions(-)

diff --git a/App.js b/App.js
index 15388cb..c24c25d 100644
--- a/App.js
+++ b/App.js
@@ -19,28 +19,30 @@ const App = () => {
   // ];
 
   const data = [
-    {value: 150},
-    {value: 80, text: 80},
-    {value: 90, text: 90, textColor: 'green', textBackgroundColor: 'pink'},
-    {value: 70},
+    {value: 15, label: 'Jan'},
+    {value: 40, label: 'Feb'},
+    {value: 10, label: 'Mar'},
+    {value: 0, label: 'Apr'},
   ];
 
   return (
     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
       <BarChart
         showGradient
+        isThreeD
+        isAnimated
         gradientColor="gray"
-        frontColor="white"
+        // frontColor="white"
         data={data}
       />
-      <LineChart data={data} />
-      <PieChart
+      {/* <LineChart data={data} /> */}
+      {/* <PieChart
         showText
         showTextBackground
         showValuesAsLabels
         textSize={14}
         data={data}
-      />
+      /> */}
       {/* <LineChart data={data} curved /> */}
       {/* <BarChart
         data={data}
diff --git a/package.json b/package.json
index aa1d359..4dfa39b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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/Components/AnimatedBar/index.tsx b/src/Components/AnimatedBar/index.tsx
index 6b1d1e4..c71780b 100644
--- a/src/Components/AnimatedBar/index.tsx
+++ b/src/Components/AnimatedBar/index.tsx
@@ -118,54 +118,60 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
             {opacity: opacity, position: 'absolute', bottom: 0},
             props.side === 'right' && {transform: [{rotateY: '180deg'}]},
           ]}>
-          <View style={{marginTop: width / -2}}>
-            <TriangleCorner
-              color={sideColor}
-              width={width}
-              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-            />
-            <View
-              style={{
-                width: width / 2,
-                height: height - width / 2, //animatedSideHeight
-                backgroundColor: sideColor,
-                opacity: opacity,
-              }}
-            />
-            <TriangleCorner
-              color={sideColor}
-              width={width}
-              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-            />
-          </View>
+          {props.height ? (
+            <View style={{marginTop: width / -2}}>
+              <TriangleCorner
+                color={sideColor}
+                width={width}
+                style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+              />
+              <View
+                style={{
+                  width: width / 2,
+                  height: height - width / 2, //animatedSideHeight
+                  backgroundColor: sideColor,
+                  opacity: opacity,
+                }}
+              />
+              <TriangleCorner
+                color={sideColor}
+                width={width}
+                style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+              />
+            </View>
+          ) : null}
 
           {/*******************          Top View             *****************/}
-
-          <View style={{position: 'absolute', top: width / -2}}>
-            <TriangleCorner
-              color={topColor}
-              width={width}
-              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-            />
-          </View>
-          <View style={{position: 'absolute', top: width / -2}}>
-            <View
-              style={{
-                width: width / 2,
-                height: width / 2,
-                left: width / 2,
-                backgroundColor: topColor,
-                opacity: opacity,
-              }}
-            />
-          </View>
-          <View style={{position: 'absolute', top: width / -2, left: width}}>
-            <TriangleCorner
-              color={topColor}
-              width={width}
-              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-            />
-          </View>
+          {props.height ? (
+            <>
+              <View style={{position: 'absolute', top: width / -2}}>
+                <TriangleCorner
+                  color={topColor}
+                  width={width}
+                  style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+                />
+              </View>
+              <View style={{position: 'absolute', top: width / -2}}>
+                <View
+                  style={{
+                    width: width / 2,
+                    height: width / 2,
+                    left: width / 2,
+                    backgroundColor: topColor,
+                    opacity: opacity,
+                  }}
+                />
+              </View>
+              <View
+                style={{position: 'absolute', top: width / -2, left: width}}>
+                <TriangleCorner
+                  color={topColor}
+                  width={width}
+                  style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+                />
+              </View>
+            </>
+          ) : null}
 
           {/*******************************************************************/}
 
diff --git a/src/Components/ThreeDBar/index.tsx b/src/Components/ThreeDBar/index.tsx
index 205f6b3..e56e88c 100644
--- a/src/Components/ThreeDBar/index.tsx
+++ b/src/Components/ThreeDBar/index.tsx
@@ -71,82 +71,84 @@ const ThreeDBar = (props: PropTypes) => {
   const opacity = props.opacity || 1;
   return (
     <View style={styles.container}>
-      <View
-        style={[
-          styles.row,
-          props.side === 'right' && {transform: [{rotateY: '180deg'}]},
-        ]}>
-        <View style={{marginTop: width / -2}}>
-          <TriangleCorner
-            color={sideColor}
-            width={width}
-            style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-          />
-          <View
-            style={{
-              width: width / 2,
-              height: height - width / 2,
-              backgroundColor: sideColor,
-              opacity: opacity,
-            }}
-          />
-          <TriangleCorner
-            color={sideColor}
-            width={width}
-            style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-          />
-        </View>
-
-        {/*******************          Top View             *****************/}
-
-        <View style={{position: 'absolute', top: width / -2}}>
-          <TriangleCorner
-            color={topColor}
-            width={width}
-            style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-          />
-        </View>
-        <View style={{position: 'absolute', top: width / -2}}>
-          <View
-            style={{
-              width: width / 2,
-              height: (3 * width) / 4,
-              left: width / 2,
-              backgroundColor: topColor,
-              opacity: opacity,
-            }}
-          />
-        </View>
-        <View style={{position: 'absolute', top: width / -2, left: width}}>
-          <TriangleCorner
-            color={topColor}
-            width={width}
-            style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-          />
-        </View>
-
-        {/*******************************************************************/}
-
+      {props.height ? (
         <View
-          style={{
-            width: width,
-            height: height,
-            backgroundColor: frontColor,
-            borderLeftWidth: StyleSheet.hairlineWidth,
-            borderTopWidth: StyleSheet.hairlineWidth,
-            borderColor: 'white',
-            opacity: opacity,
-          }}>
-          {showGradient && (
-            <LinearGradient
-              style={{position: 'absolute', width: '100%', height: '100%'}}
-              start={{x: 0, y: 0}}
-              end={{x: 1, y: 1}}
-              colors={[gradientColor, frontColor]}
+          style={[
+            styles.row,
+            props.side === 'right' && {transform: [{rotateY: '180deg'}]},
+          ]}>
+          <View style={{marginTop: width / -2}}>
+            <TriangleCorner
+              color={sideColor}
+              width={width}
+              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
             />
-          )}
+            <View
+              style={{
+                width: width / 2,
+                height: height - width / 2,
+                backgroundColor: sideColor,
+                opacity: opacity,
+              }}
+            />
+            <TriangleCorner
+              color={sideColor}
+              width={width}
+              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+            />
+          </View>
+
+          {/*******************          Top View             *****************/}
+
+          <View style={{position: 'absolute', top: width / -2}}>
+            <TriangleCorner
+              color={topColor}
+              width={width}
+              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+            />
+          </View>
+          <View style={{position: 'absolute', top: width / -2}}>
+            <View
+              style={{
+                width: width / 2,
+                height: (3 * width) / 4,
+                left: width / 2,
+                backgroundColor: topColor,
+                opacity: opacity,
+              }}
+            />
+          </View>
+          <View style={{position: 'absolute', top: width / -2, left: width}}>
+            <TriangleCorner
+              color={topColor}
+              width={width}
+              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+            />
+          </View>
+
+          {/*******************************************************************/}
+
+          <View
+            style={{
+              width: width,
+              height: height,
+              backgroundColor: frontColor,
+              borderLeftWidth: StyleSheet.hairlineWidth,
+              borderTopWidth: StyleSheet.hairlineWidth,
+              borderColor: 'white',
+              opacity: opacity,
+            }}>
+            {showGradient && (
+              <LinearGradient
+                style={{position: 'absolute', width: '100%', height: '100%'}}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 1}}
+                colors={[gradientColor, frontColor]}
+              />
+            )}
+          </View>
         </View>
-      </View>
+      ) : null}
 
       {/*******************          Top Label            *****************/}