react-native-gifted-charts 0.2.5 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "0.2.5",
+  "version": "0.2.9",
   "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": [

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,7 +1,18 @@
 import React, {useEffect, useState} from 'react';
-import {View, ColorValue, LayoutAnimation, Platform} from 'react-native';
+import {
+  View,
+  ColorValue,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 type propTypes = {
   item: itemType;
   height: number;
@@ -44,7 +55,7 @@ type itemType = {
 
 const Animated2DWithGradient = (props: propTypes) => {
   const {item, opacity, animationDuration, noGradient, noAnimation} = props;
-  const [height, setHeight] = useState(noAnimation ? props.height : 0);
+  const [height, setHeight] = useState(noAnimation ? props.height : 2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );

package/src/BarChart/index.tsx

@@ -112,6 +112,8 @@ type PropTypes = {
   hideOrigin?: Boolean;
   labelWidth?: number;
   yAxisLabelTexts?: Array<string>;
+  yAxisLabelPrefix?: String;
+  yAxisLabelSuffix?: String;
 };
 type lineConfigType = {
   curved?: Boolean;
@@ -290,6 +292,9 @@ export const BarChart = (props: PropTypes) => {
   const xAxisIndicesColor = props.xAxisIndicesColor || 'black';
   const yAxisIndicesColor = props.yAxisIndicesColor || 'black';
 
+  const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
+  const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
+
   const xAxisThickness =
     props.xAxisThickness === 0
       ? props.xAxisThickness
@@ -515,10 +520,33 @@ export const BarChart = (props: PropTypes) => {
     outputRange: [0, totalWidth],
   });
 
+  const getLabel = val => {
+    let label = '';
+    if (showFractionalValues) {
+      if (val) {
+        label = val;
+      } else {
+        label = '0';
+      }
+    } else {
+      if (val) {
+        label = val.toString().split('.')[0];
+      } else {
+        label = '0';
+      }
+    }
+
+    return yAxisLabelPrefix + label + yAxisLabelSuffix;
+  };
+
   const renderHorizSections = () => {
     return (
       <>
         {horizSections.map((sectionItems, index) => {
+          let label = getLabel(sectionItems.value);
+          if (hideOrigin && index === horizSections.length - 1) {
+            label = '';
+          }
           return (
             <View
               key={index}
@@ -561,17 +589,7 @@ export const BarChart = (props: PropTypes) => {
                         ],
                       },
                     ]}>
-                    {showFractionalValues
-                      ? sectionItems.value
-                        ? sectionItems.value
-                        : hideOrigin
-                        ? ''
-                        : '0'
-                      : sectionItems.value
-                      ? sectionItems.value.toString().split('.')[0]
-                      : hideOrigin
-                      ? ''
-                      : '0'}
+                    {label}
                   </Text>
                 ) : null}
               </View>

package/src/Components/AnimatedBar/index.tsx

@@ -5,10 +5,16 @@ import {
   ColorValue,
   LayoutAnimation,
   Platform,
+  UIManager,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {styles} from './styles';
 
+if (Platform.OS === 'android') {
+  UIManager.setLayoutAnimationEnabledExperimental &&
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 type trianglePropTypes = {
   style: any;
   width: number;
@@ -89,7 +95,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
   const layoutAppear = () => {
     LayoutAnimation.configureNext({
       duration: Platform.OS == 'ios' ? animationDuration : 20,
-      create: {type: 'linear', property: 'opacity'},
+      create: {type: 'linear', property: 'scaleXY'},
       // update: { type: 'linear' }
     });
     setInitialRender(false);

package/src/LineChart/index.tsx

@@ -186,6 +186,8 @@ type propTypes = {
   textShiftY?: number;
   yAxisLabelTexts?: Array<string>;
   width?: number;
+  yAxisLabelPrefix?: String;
+  yAxisLabelSuffix?: String;
 };
 type referenceConfigType = {
   thickness: number;
@@ -267,6 +269,9 @@ export const LineChart = (props: propTypes) => {
   const animateTogether = props.animateTogether || false;
   const animateOnDataChange = props.animateOnDataChange || false;
 
+  const yAxisLabelPrefix = props.yAxisLabelPrefix || '';
+  const yAxisLabelSuffix = props.yAxisLabelSuffix || '';
+
   if (!initialData) {
     initialData = [...data];
     animations = initialData.map(item => new Animated.Value(item.value));
@@ -1028,11 +1033,34 @@ export const LineChart = (props: propTypes) => {
   //     )
   // }
 
+  const getLabel = val => {
+    let label = '';
+    if (showFractionalValues) {
+      if (val) {
+        label = val;
+      } else {
+        label = '0';
+      }
+    } else {
+      if (val) {
+        label = val.toString().split('.')[0];
+      } else {
+        label = '0';
+      }
+    }
+
+    return yAxisLabelPrefix + label + yAxisLabelSuffix;
+  };
+
   const renderHorizSections = () => {
     return (
       <>
         {props.hideAxesAndRules !== true &&
           horizSections.map((sectionItems, index) => {
+            let label = getLabel(sectionItems.value);
+            if (hideOrigin && index === horizSections.length - 1) {
+              label = '';
+            }
             return (
               <View
                 key={index}
@@ -1061,17 +1089,7 @@ export const LineChart = (props: propTypes) => {
                           marginBottom: stepHeight / -2,
                         },
                       ]}>
-                      {showFractionalValues
-                        ? sectionItems.value
-                          ? sectionItems.value
-                          : hideOrigin
-                          ? ''
-                          : '0'
-                        : sectionItems.value
-                        ? sectionItems.value.toString().split('.')[0]
-                        : hideOrigin
-                        ? ''
-                        : '0'}
+                      {label}
                     </Text>
                   ) : null}
                 </View>