react-native-gifted-charts 1.3.1 → 1.3.4

package/README.md

@@ -37,11 +37,11 @@ However, we are planning to add support for web which will be available soon.
 
 ---
 
-## Version 1.2.x 🎉
-Version 1.2.0 onwards we are dependent only on `react-native-svg` and `react-native-linear-gradient`. Earlier, Pie and Donut charts were rendered using `react-native-canvas`, but now they are also rendered using <b>svg</b>. We are no longer using `react-native-canvas` neither `react-native-webview`!
+## [Version 1.3.4 🎉](release-notes/release-notes.md)
+Version 1.3.4 is a mojor release. It has code refactor, many bug fixes and some new features. Have a look at the Release Notes to see what's new in `1.3.4`.<br />
+**[Release notes](release-notes/release-notes.md)**
 
 ## Installation
-
 ```sh
 npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
 ```
@@ -51,6 +51,7 @@ For iOS-
 ```sh
 cd ios && pod install
 ```
+Please note that `react-native-svg` and `react-native-linear-gradient` are needed for the library to work, so make sure they are installed in your project.
 
 # Docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -24,8 +24,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "react-native-linear-gradient": "^2.7.3",
-    "react-native-svg": "^13.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -46,19 +44,22 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-svg": "*"
   },
   "keywords": [
-    "react-native",
     "chart",
     "charts",
     "graph",
+    "data visualization",
     "bar",
     "pie",
     "donut",
     "area",
     "line",
     "react",
-    "react native"
+    "react native",
+    "react-native"
   ]
 }

package/src/BarChart/Animated2DWithGradient.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
+import Cap from '../Components/BarSpecificComponents/cap';
+import {itemType} from './types';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -20,20 +22,24 @@ type propTypes = {
   minHeight: number;
   opacity?: number;
   animationDuration: number;
-  roundedTop: Boolean;
-  roundedBottom: Boolean;
+  roundedTop: boolean;
+  roundedBottom: boolean;
   barWidth: number;
   gradientColor: ColorValue;
   frontColor: ColorValue;
-  noGradient?: Boolean;
-  noAnimation?: Boolean;
-  cappedBars?: Boolean;
+  noGradient?: boolean;
+  noAnimation?: boolean;
+  cappedBars?: boolean;
   capThickness?: number;
   capColor?: ColorValue;
   capRadius?: number;
-  horizontal: Boolean;
-  intactTopLabel: Boolean;
+  horizontal: boolean;
+  intactTopLabel: boolean;
   barBorderRadius?: number;
+  barBorderTopLeftRadius?: number;
+  barBorderTopRightRadius?: number;
+  barBorderBottomLeftRadius?: number;
+  barBorderBottomRightRadius?: number;
   containerHeight?: number;
   maxValue?: number;
   barBackgroundPattern?: Function;
@@ -41,29 +47,6 @@ type propTypes = {
   barMarginBottom?: number;
   barStyle?: object;
 };
-type itemType = {
-  value?: number;
-  onPress?: any;
-  frontColor?: ColorValue;
-  sideColor?: ColorValue;
-  topColor?: ColorValue;
-  showGradient?: Boolean;
-  gradientColor?: any;
-  label?: String;
-  barWidth?: number;
-  labelTextStyle?: any;
-  topLabelComponent?: Function;
-  topLabelContainerStyle?: any;
-  disablePress?: any;
-  capThickness?: number;
-  capColor?: ColorValue;
-  capRadius?: number;
-  barBorderRadius?: number;
-  barBackgroundPattern?: Function;
-  patternId?: String;
-  barMarginBottom?: number;
-  barStyle?: object;
-};
 
 const Animated2DWithGradient = (props: propTypes) => {
   const {
@@ -79,8 +62,13 @@ const Animated2DWithGradient = (props: propTypes) => {
     containerHeight,
     maxValue,
     barMarginBottom,
+    barBorderRadius,
+    barBorderTopLeftRadius,
+    barBorderTopRightRadius,
+    barBorderBottomLeftRadius,
+    barBorderBottomRightRadius,
   } = props;
-  const [height, setHeight] = useState(noAnimation ? props.height : 2);
+  const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
   const [initialRender, setInitialRender] = useState(
     noAnimation ? false : true,
   );
@@ -154,8 +142,23 @@ const Animated2DWithGradient = (props: propTypes) => {
                     height: '100%',
                     backgroundColor:
                       item.frontColor || props.frontColor || 'black',
-                    borderRadius:
-                      props.barBorderRadius || item.barBorderRadius || 0,
+                    borderRadius: item.barBorderRadius || barBorderRadius || 0,
+                    borderTopLeftRadius:
+                      item.barBorderTopLeftRadius ||
+                      barBorderTopLeftRadius ||
+                      0,
+                    borderTopRightRadius:
+                      item.barBorderTopRightRadius ||
+                      barBorderTopRightRadius ||
+                      0,
+                    borderBottomLeftRadius:
+                      item.barBorderBottomLeftRadius ||
+                      barBorderBottomLeftRadius ||
+                      0,
+                    borderBottomRightRadius:
+                      item.barBorderBottomRightRadius ||
+                      barBorderBottomRightRadius ||
+                      0,
                   },
                   props.roundedBottom && {
                     borderBottomLeftRadius:
@@ -178,28 +181,16 @@ const Animated2DWithGradient = (props: propTypes) => {
                     borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
                   },
                 ]}>
-                {props.cappedBars && (
-                  <View
-                    style={{
-                      position: 'absolute',
-                      width: '100%',
-                      height:
-                        item.capThickness === 0
-                          ? 0
-                          : item.capThickness || props.capThickness || 6,
-                      backgroundColor:
-                        item.capColor || props.capColor || 'black',
-                      borderTopLeftRadius:
-                        item.capRadius === 0
-                          ? 0
-                          : item.capRadius || props.capRadius || 0,
-                      borderTopRightRadius:
-                        item.capRadius === 0
-                          ? 0
-                          : item.capRadius || props.capRadius || 0,
-                    }}
+                {props.cappedBars && item.value ? (
+                  <Cap
+                    capThicknessFromItem={item.capThickness}
+                    capThicknessFromProps={props.capThickness}
+                    capColorFromItem={item.capColor}
+                    capColorFromProps={props.capColor}
+                    capRadiusFromItem={item.capRadius}
+                    capRadiusFromProps={props.capRadius}
                   />
-                )}
+                ) : null}
               </View>
             ) : (
               <LinearGradient
@@ -208,8 +199,23 @@ const Animated2DWithGradient = (props: propTypes) => {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
-                    borderRadius:
-                      props.barBorderRadius || item.barBorderRadius || 0,
+                    borderRadius: item.barBorderRadius || barBorderRadius || 0,
+                    borderTopLeftRadius:
+                      item.barBorderTopLeftRadius ||
+                      barBorderTopLeftRadius ||
+                      0,
+                    borderTopRightRadius:
+                      item.barBorderTopRightRadius ||
+                      barBorderTopRightRadius ||
+                      0,
+                    borderBottomLeftRadius:
+                      item.barBorderBottomLeftRadius ||
+                      barBorderBottomLeftRadius ||
+                      0,
+                    borderBottomRightRadius:
+                      item.barBorderBottomRightRadius ||
+                      barBorderBottomRightRadius ||
+                      0,
                   },
                   props.roundedBottom && {
                     borderBottomLeftRadius:
@@ -267,7 +273,7 @@ const Animated2DWithGradient = (props: propTypes) => {
                 <Defs>
                   {item.barBackgroundPattern
                     ? item.barBackgroundPattern()
-                    : barBackgroundPattern()}
+                    : barBackgroundPattern?.()}
                 </Defs>
                 <Rect
                   stroke="transparent"