react-native-gifted-charts 1.3.33 → 1.4.0

package/README.md

@@ -15,6 +15,8 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Popul
 7. Detailed [documentation](https://gifted-charts.web.app/) with examples
 8. Support for **_combined_** Bar and Line charts
 
+## [Release notes 🎉](release-notes/release-notes.md)
+
 **Alert:**
 
 This library doesn't support web apps yet. Use this library if you are planning mobile first.</br>
@@ -96,6 +98,13 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 
 ## Contributing
 
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Abhinandan-Kushwaha/react-native-gifted-charts" />
+</a>
+<br/><br/>
+
 _Dear developers_! Your small contribution can make someone's day 😊
 
 One of the ways you can contribute is to address an [open issue](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues).
@@ -104,8 +113,6 @@ Sometimes people report issues which don't exist, or request for features which
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
-## [Release notes 🎉](release-notes/release-notes.md)
-
 [To do list](./src/todos.md)
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.3.33",
+  "version": "1.4.0",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "src/index.tsx",
   "files": [
@@ -43,6 +43,7 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
+    "gifted-charts-core": "*",
     "react": "*",
     "react-native": "*",
     "react-native-linear-gradient": "*",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,62 +1,23 @@
-import React, {ReactNode, useEffect, useState} from 'react';
+import React, { useEffect, useState} from 'react';
 import {
   View,
-  ColorValue,
   LayoutAnimation,
   Platform,
   UIManager,
   Text,
+  ViewStyle,
 } 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 {barDataItem} from './types';
+import {getPropsForAnimated2DWithGradient,Animated2DWithGradientPropsType} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
     UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-type propTypes = {
-  item: barDataItem;
-  index: number;
-  height: number;
-  minHeight: number;
-  opacity?: number;
-  animationDuration: number;
-  roundedTop: boolean;
-  roundedBottom: boolean;
-  barWidth: number;
-  gradientColor: ColorValue;
-  frontColor: ColorValue;
-  noGradient?: boolean;
-  noAnimation?: boolean;
-  cappedBars?: boolean;
-  capThickness?: number;
-  capColor?: ColorValue;
-  capRadius?: number;
-  horizontal: boolean;
-  intactTopLabel: boolean;
-  showValuesAsTopLabel: boolean;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
-  barBorderWidth?: number;
-  barBorderColor: ColorValue;
-  barBorderRadius?: number;
-  barBorderTopLeftRadius?: number;
-  barBorderTopRightRadius?: number;
-  barBorderBottomLeftRadius?: number;
-  barBorderBottomRightRadius?: number;
-  containerHeight?: number;
-  maxValue?: number;
-  barBackgroundPattern?: Function;
-  patternId?: String;
-  barMarginBottom?: number;
-  barStyle?: object;
-  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
-};
-
-const Animated2DWithGradient = (props: propTypes) => {
+const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
   const {
     barBackgroundPattern,
     patternId,
@@ -71,13 +32,6 @@ const Animated2DWithGradient = (props: propTypes) => {
     containerHeight,
     maxValue,
     barMarginBottom,
-    barBorderWidth,
-    barBorderColor,
-    barBorderRadius,
-    barBorderTopLeftRadius,
-    barBorderTopRightRadius,
-    barBorderBottomLeftRadius,
-    barBorderBottomRightRadius,
     barInnerComponent,
     intactTopLabel,
     showValuesAsTopLabel,
@@ -117,6 +71,11 @@ const Animated2DWithGradient = (props: propTypes) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
+  const{
+    commonStyleForBar,
+    barStyleWithBackground,
+  } = getPropsForAnimated2DWithGradient(props);
+
   return (
     <>
       {!initialRender && (
@@ -125,7 +84,7 @@ const Animated2DWithGradient = (props: propTypes) => {
             position: 'absolute',
             bottom: 0,
             width: '100%',
-            overflow:'hidden',
+            overflow: 'hidden',
             height:
               (noAnimation
                 ? Math.max(
@@ -152,58 +111,7 @@ const Animated2DWithGradient = (props: propTypes) => {
             ]}>
             {noGradient ? (
               <View
-                style={[
-                  {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor:
-                      item.frontColor || props.frontColor || 'black',
-                    borderWidth: barBorderWidth ?? 0,
-                    borderColor: barBorderColor,
-                    borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
-                    borderTopLeftRadius:
-                      item.barBorderTopLeftRadius ??
-                      barBorderTopLeftRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderTopRightRadius:
-                      item.barBorderTopRightRadius ??
-                      barBorderTopRightRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderBottomLeftRadius:
-                      item.barBorderBottomLeftRadius ??
-                      barBorderBottomLeftRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderBottomRightRadius:
-                      item.barBorderBottomRightRadius ??
-                      barBorderBottomRightRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                  },
-                  props.roundedBottom && {
-                    borderBottomLeftRadius:
-                      (item.barWidth || barWidth || 30) / 2,
-                    borderBottomRightRadius:
-                      (item.barWidth || barWidth || 30) / 2,
-                  },
-                  props.cappedBars && {
-                    borderTopLeftRadius:
-                      item.capRadius === 0
-                        ? 0
-                        : item.capRadius || props.capRadius || 0,
-                    borderTopRightRadius:
-                      item.capRadius === 0
-                        ? 0
-                        : item.capRadius || props.capRadius || 0,
-                  },
-                  props.roundedTop && {
-                    borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
-                    borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
-                  },
-                ]}>
+                style={barStyleWithBackground}>
                 {props.cappedBars && item.value ? (
                   <Cap
                     capThicknessFromItem={item.capThickness}
@@ -217,56 +125,7 @@ const Animated2DWithGradient = (props: propTypes) => {
               </View>
             ) : (
               <LinearGradient
-                style={[
-                  {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    borderWidth: barBorderWidth ?? 0,
-                    borderColor: barBorderColor,
-                    borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
-                    borderTopLeftRadius:
-                      item.barBorderTopLeftRadius ??
-                      barBorderTopLeftRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderTopRightRadius:
-                      item.barBorderTopRightRadius ??
-                      barBorderTopRightRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderBottomLeftRadius:
-                      item.barBorderBottomLeftRadius ??
-                      barBorderBottomLeftRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                    borderBottomRightRadius:
-                      item.barBorderBottomRightRadius ??
-                      barBorderBottomRightRadius ??
-                      item.barBorderRadius ??
-                      barBorderRadius,
-                  },
-                  props.roundedBottom && {
-                    borderBottomLeftRadius:
-                      (item.barWidth || barWidth || 30) / 2,
-                    borderBottomRightRadius:
-                      (item.barWidth || barWidth || 30) / 2,
-                  },
-                  props.cappedBars && {
-                    borderTopLeftRadius:
-                      item.capRadius === 0
-                        ? 0
-                        : item.capRadius || props.capRadius || 0,
-                    borderTopRightRadius:
-                      item.capRadius === 0
-                        ? 0
-                        : item.capRadius || props.capRadius || 0,
-                  },
-                  props.roundedTop && {
-                    borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
-                    borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
-                  },
-                ]}
+                style={commonStyleForBar}
                 start={{x: 0, y: 0}}
                 end={{x: 1, y: 1}}
                 colors={[
@@ -321,7 +180,7 @@ const Animated2DWithGradient = (props: propTypes) => {
             )}
             {barInnerComponent ? (
               <View style={{height: '100%', width: '100%'}}>
-                {barInnerComponent(item,index)}
+                {barInnerComponent(item, index)}
               </View>
             ) : null}
           </View>

package/src/BarChart/RenderBars.tsx

@@ -1,92 +1,14 @@
-import React, {Component, ReactNode} from 'react';
-import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
+import React from 'react';
+import {View, TouchableOpacity, Animated, Text} from 'react-native';
 import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
 import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
-import {barDataItem} from './types';
-import {Pointer} from '../utils/types';
+import { getPropsForAnimated2DWithGradient,RenderBarsPropsType, barDataItem } from 'gifted-charts-core';
 
-type Props = {
-  style?: any;
-  width?: number;
-  height?: number;
-  minHeight: number;
-  color?: ColorValue;
-  showGradient?: boolean;
-  gradientColor?: any;
-  frontColor?: ColorValue;
-  sideColor?: ColorValue;
-  topColor?: ColorValue;
-  topLabelComponent?: Component;
-  topLabelContainerStyle?: any;
-  topLabelTextStyle?: any;
-  opacity?: number;
-  side?: String;
-  labelTextStyle?: any;
 
-  item: barDataItem;
-  index: number;
-  label: String;
-  containerHeight?: number;
-  maxValue: number;
-  spacing: number;
-  propSpacing?: number;
-  data?: any;
-  barWidth?: number;
-  sideWidth?: number;
-  labelWidth?: number;
-
-  isThreeD?: boolean;
-  isAnimated?: boolean;
-  rotateLabel?: boolean;
-  animatedHeight?: any;
-  appearingOpacity?: any;
-  animationDuration?: number;
-  roundedTop?: boolean;
-  roundedBottom?: boolean;
-  disablePress?: boolean;
-  activeOpacity?: number;
-  cappedBars?: boolean;
-  capThickness?: number;
-  capColor?: ColorValue;
-  capRadius?: number;
-  showXAxisIndices: boolean;
-  xAxisIndicesHeight: number;
-  xAxisIndicesWidth: number;
-  xAxisIndicesColor: ColorValue;
-  horizontal: boolean;
-  rtl: boolean;
-  intactTopLabel: boolean;
-  showValuesAsTopLabel?: boolean;
-  barBorderWidth?: number;
-  barBorderColor: ColorValue;
-  barBorderRadius?: number;
-  barBorderTopLeftRadius?: number;
-  barBorderTopRightRadius?: number;
-  barBorderBottomLeftRadius?: number;
-  barBorderBottomRightRadius?: number;
-  barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
-  autoShiftLabels?: boolean;
-  barBackgroundPattern?: Function;
-  patternId?: String;
-  barMarginBottom?: number;
-  onPress?: Function;
-  xAxisTextNumberOfLines: number;
-  xAxisLabelsHeight?: number;
-  xAxisLabelsVerticalShift: number;
-  renderTooltip: Function | undefined;
-  leftShiftForTooltip?: number;
-  leftShiftForLastIndexTooltip: number;
-  initialSpacing: number;
-  selectedIndex: number;
-  setSelectedIndex: Function;
-  barStyle?: object;
-  xAxisThickness?: number;
-  pointerConfig?: Pointer;
-};
-const RenderBars = (props: Props) => {
+const RenderBars = (props: RenderBarsPropsType) => {
   const {
     item,
     index,
@@ -97,10 +19,8 @@ const RenderBars = (props: Props) => {
     propSpacing,
     side,
     data,
-    barStyle,
     barBorderWidth,
     barBorderColor,
-    barBorderRadius,
     barBorderTopLeftRadius,
     barBorderTopRightRadius,
     barBorderBottomLeftRadius,
@@ -111,7 +31,6 @@ const RenderBars = (props: Props) => {
     isAnimated,
     rotateLabel,
     appearingOpacity,
-    opacity,
     animationDuration,
     autoShiftLabels,
     label,
@@ -250,60 +169,26 @@ const RenderBars = (props: Props) => {
     );
   };
 
+  const barHeight = Math.max(
+    minHeight,
+    (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
+      (xAxisThickness ?? 0),
+  );
+
+  let leftSpacing = initialSpacing;
+  for (let i = 0; i < index; i++) {
+    leftSpacing +=
+      (data[i].spacing ?? propSpacing) +
+      (data[i].barWidth || props.barWidth || 30);
+  }
+
+  const {commonStyleForBar, commonPropsFor2Dand3Dbars} = getPropsForAnimated2DWithGradient({...props, barHeight});
+
   const static2DWithGradient = (item: barDataItem) => {
     return (
       <>
         <LinearGradient
-          style={[
-            {
-              position: 'absolute',
-              width: '100%',
-              height: '100%',
-              borderWidth: barBorderWidth ?? 0,
-              borderColor: barBorderColor,
-              borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
-              borderTopLeftRadius:
-                item.barBorderTopLeftRadius ??
-                barBorderTopLeftRadius ??
-                item.barBorderRadius ??
-                barBorderRadius,
-              borderTopRightRadius:
-                item.barBorderTopRightRadius ??
-                barBorderTopRightRadius ??
-                item.barBorderRadius ??
-                barBorderRadius,
-              borderBottomLeftRadius:
-                item.barBorderBottomLeftRadius ??
-                barBorderBottomLeftRadius ??
-                item.barBorderRadius ??
-                barBorderRadius,
-              borderBottomRightRadius:
-                item.barBorderBottomRightRadius ??
-                barBorderBottomRightRadius ??
-                item.barBorderRadius ??
-                barBorderRadius,
-            },
-            props.roundedBottom && {
-              borderBottomLeftRadius:
-                (item.barWidth || props.barWidth || 30) / 2,
-              borderBottomRightRadius:
-                (item.barWidth || props.barWidth || 30) / 2,
-            },
-            props.cappedBars && {
-              borderTopLeftRadius:
-                item.capRadius === 0
-                  ? 0
-                  : item.capRadius || props.capRadius || 0,
-              borderTopRightRadius:
-                item.capRadius === 0
-                  ? 0
-                  : item.capRadius || props.capRadius || 0,
-            },
-            props.roundedTop && {
-              borderTopLeftRadius: (item.barWidth || props.barWidth || 30) / 2,
-              borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
-            },
-          ]}
+          style={commonStyleForBar}
           start={{x: 0, y: 0}}
           end={{x: 0, y: 1}}
           colors={[
@@ -364,19 +249,6 @@ const RenderBars = (props: Props) => {
     );
   };
 
-  const barHeight = Math.max(
-    minHeight,
-    (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
-      (xAxisThickness ?? 0),
-  );
-
-  let leftSpacing = initialSpacing;
-  for (let i = 0; i < index; i++) {
-    leftSpacing +=
-      (data[i].spacing ?? propSpacing) +
-      (data[i].barWidth || props.barWidth || 30);
-  }
-
   const barWrapperStyle = [
     {
       // overflow: 'visible',
@@ -420,23 +292,16 @@ const RenderBars = (props: Props) => {
   const barContent = () => {
     const animated2DWithGradient = (noGradient, noAnimation) => (
       <Animated2DWithGradient
-        barBackgroundPattern={props.barBackgroundPattern}
-        patternId={props.patternId}
+        {...commonPropsFor2Dand3Dbars}
         barWidth={props.barWidth || 30}
-        barStyle={barStyle}
-        item={item}
-        index={index}
-        opacity={opacity}
         animationDuration={animationDuration || 800}
         roundedBottom={props.roundedBottom || false}
         roundedTop={props.roundedTop || false}
         noGradient={noGradient}
         noAnimation={noAnimation}
         gradientColor={noGradient ? undefined : props.gradientColor}
-        frontColor={props.frontColor || 'black'}
         containerHeight={containerHeight}
         maxValue={maxValue}
-        height={barHeight}
         minHeight={minHeight ?? 0}
         barMarginBottom={barMarginBottom}
         cappedBars={props.cappedBars}
@@ -444,10 +309,6 @@ const RenderBars = (props: Props) => {
         capColor={props.capColor}
         capRadius={props.capRadius}
         horizontal={horizontal}
-        intactTopLabel={intactTopLabel}
-        showValuesAsTopLabel={!!showValuesAsTopLabel}
-        topLabelContainerStyle={topLabelContainerStyle}
-        topLabelTextStyle={topLabelTextStyle}
         barBorderWidth={barBorderWidth}
         barBorderColor={barBorderColor}
         barBorderRadius={props.barBorderRadius || 0}
@@ -455,7 +316,6 @@ const RenderBars = (props: Props) => {
         barBorderTopRightRadius={barBorderTopRightRadius}
         barBorderBottomLeftRadius={barBorderBottomLeftRadius}
         barBorderBottomRightRadius={barBorderBottomRightRadius}
-        barInnerComponent={localBarInnerComponent}
       />
     );
     return (
@@ -478,32 +338,15 @@ const RenderBars = (props: Props) => {
         )}
         {isThreeD ? (
           <AnimatedThreeDBar
-            barBackgroundPattern={
-              item.barBackgroundPattern || props.barBackgroundPattern
-            }
-            barInnerComponent={localBarInnerComponent}
-            patternId={item.patternId || props.patternId}
-            width={item.barWidth || props.barWidth || 30}
-            barStyle={barStyle}
-            item={item}
-            index={index}
+            {...commonPropsFor2Dand3Dbars}
             sideWidth={
               item.sideWidth ||
               props.sideWidth ||
               (item.barWidth || props.barWidth || 30) / 2
             }
             side={side || 'left'}
-            frontColor={item.frontColor || props.frontColor || ''}
             sideColor={item.sideColor || props.sideColor || ''}
             topColor={item.topColor || props.topColor || ''}
-            showGradient={item.showGradient || props.showGradient || false}
-            gradientColor={item.gradientColor || props.gradientColor}
-            opacity={opacity || 1}
-            height={barHeight}
-            intactTopLabel={intactTopLabel}
-            showValuesAsTopLabel={!!showValuesAsTopLabel}
-            topLabelContainerStyle={topLabelContainerStyle}
-            topLabelTextStyle={topLabelTextStyle}
             horizontal={horizontal}
             isAnimated={isAnimated}
             animationDuration={animationDuration || 800}
@@ -545,6 +388,13 @@ const RenderBars = (props: Props) => {
                 ? props.onPress(item, index)
                 : null;
           }}
+          onLongPress={()=>{
+            item.onLongPress
+              ? item.onLongPress()
+              : props.onLongPress
+                ? props.onLongPress(item, index)
+                : null;
+          }}
           style={barWrapperStyle}>
           {barContent()}
         </TouchableOpacity>