react-native-gifted-charts 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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": [
@@ -24,6 +24,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "gifted-charts-core": "^0.0.13"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -38,12 +39,15 @@
     "eslint": "^8.44.0",
     "jest": "^29.5.0",
     "metro-react-native-babel-preset": "^0.76.7",
+    "react": "^18.2.0",
+    "react-native": "^0.73.2",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-svg": "^14.1.0",
     "react-test-renderer": "18.2.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "gifted-charts-core": "*",
     "react": "*",
     "react-native": "*",
     "react-native-linear-gradient": "*",

package/src/BarChart/Animated2DWithGradient.tsx

@@ -1,16 +1,9 @@
-import React, { useEffect, useState} from 'react';
-import {
-  View,
-  LayoutAnimation,
-  Platform,
-  UIManager,
-  Text,
-  ViewStyle,
-} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {View, LayoutAnimation, Platform, UIManager, Text} 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 {getPropsForAnimated2DWithGradient,Animated2DWithGradientPropsType} from 'gifted-charts-core';
+import {Animated2DWithGradientPropsType} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -37,6 +30,8 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     showValuesAsTopLabel,
     topLabelContainerStyle,
     topLabelTextStyle,
+    commonStyleForBar,
+    barStyleWithBackground,
   } = props;
   const [height, setHeight] = useState(noAnimation ? props.height : 0.2);
   const [initialRender, setInitialRender] = useState(
@@ -71,11 +66,6 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
   };
 
-  const{
-    commonStyleForBar,
-    barStyleWithBackground,
-  } = getPropsForAnimated2DWithGradient(props);
-
   return (
     <>
       {!initialRender && (
@@ -110,8 +100,7 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
               item.barStyle || barStyle,
             ]}>
             {noGradient ? (
-              <View
-                style={barStyleWithBackground}>
+              <View style={barStyleWithBackground}>
                 {props.cappedBars && item.value ? (
                   <Cap
                     capThicknessFromItem={item.capThickness}
@@ -184,35 +173,35 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
               </View>
             ) : null}
           </View>
-          {(item.topLabelComponent || showValuesAsTopLabel) && (
-            <View
-              style={[
-                {
-                  position: 'absolute',
-                  top: (item.barWidth || barWidth || 30) * -1,
-                  height: item.barWidth || barWidth || 30,
-                  width: item.barWidth || barWidth || 30,
-                  justifyContent:
-                    (props.horizontal && !intactTopLabel) || item.value < 0
-                      ? 'center'
-                      : 'flex-end',
-                  alignItems: 'center',
-                  opacity: opacity,
-                },
-                item.value < 0 && {transform: [{rotate: '180deg'}]},
-                props.horizontal &&
-                  !intactTopLabel && {transform: [{rotate: '270deg'}]},
-                topLabelContainerStyle ?? item.topLabelContainerStyle,
-              ]}>
-              {showValuesAsTopLabel ? (
-                <Text style={topLabelTextStyle}>{item.value}</Text>
-              ) : (
-                item.topLabelComponent?.()
-              )}
-            </View>
-          )}
         </View>
       )}
+      {item.topLabelComponent || showValuesAsTopLabel ? (
+        <View
+          style={[
+            {
+              position: 'absolute',
+              top: (item.barWidth || barWidth || 30) * -1,
+              height: item.barWidth || barWidth || 30,
+              width: item.barWidth || barWidth || 30,
+              justifyContent:
+                (props.horizontal && !intactTopLabel) || item.value < 0
+                  ? 'center'
+                  : 'flex-end',
+              alignItems: 'center',
+              opacity: opacity,
+            },
+            item.value < 0 && {transform: [{rotate: '180deg'}]},
+            props.horizontal &&
+              !intactTopLabel && {transform: [{rotate: '270deg'}]},
+            topLabelContainerStyle ?? item.topLabelContainerStyle,
+          ]}>
+          {showValuesAsTopLabel ? (
+            <Text style={topLabelTextStyle}>{item.value}</Text>
+          ) : (
+            item.topLabelComponent?.()
+          )}
+        </View>
+      ) : null}
     </>
   );
 };

package/src/BarChart/RenderBars.tsx

@@ -5,8 +5,11 @@ import LinearGradient from 'react-native-linear-gradient';
 import Animated2DWithGradient from './Animated2DWithGradient';
 import Cap from '../Components/BarSpecificComponents/cap';
 import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
-import { getPropsForAnimated2DWithGradient,RenderBarsPropsType, barDataItem } from 'gifted-charts-core';
-
+import {
+  getPropsForAnimated2DWithGradient,
+  RenderBarsPropsType,
+  barDataItem,
+} from 'gifted-charts-core';
 
 const RenderBars = (props: RenderBarsPropsType) => {
   const {
@@ -21,12 +24,6 @@ const RenderBars = (props: RenderBarsPropsType) => {
     data,
     barBorderWidth,
     barBorderColor,
-    barBorderTopLeftRadius,
-    barBorderTopRightRadius,
-    barBorderBottomLeftRadius,
-    barBorderBottomRightRadius,
-    // oldValue,
-
     isThreeD,
     isAnimated,
     rotateLabel,
@@ -53,7 +50,26 @@ const RenderBars = (props: RenderBarsPropsType) => {
     pointerConfig,
   } = props;
 
-  const localBarInnerComponent = item.barInnerComponent ?? props.barInnerComponent;
+  const barHeight = Math.max(
+    minHeight,
+    (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) -
+      (xAxisThickness ?? 0),
+  );
+
+  const {
+    commonStyleForBar,
+    barStyleWithBackground,
+    commonPropsFor2Dand3Dbars,
+    isFocused,
+    focusedBarConfig,
+    localFrontColor,
+  } = getPropsForAnimated2DWithGradient({...props, barHeight});
+
+  const itemOrPropsBarInnerComponent =
+    item.barInnerComponent ?? props.barInnerComponent;
+  const localBarInnerComponent = isFocused
+    ? focusedBarConfig?.barInnerComponent ?? itemOrPropsBarInnerComponent
+    : itemOrPropsBarInnerComponent;
 
   const barMarginBottom =
     item.barMarginBottom === 0
@@ -169,12 +185,6 @@ const RenderBars = (props: RenderBarsPropsType) => {
     );
   };
 
-  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 +=
@@ -182,9 +192,9 @@ const RenderBars = (props: RenderBarsPropsType) => {
       (data[i].barWidth || props.barWidth || 30);
   }
 
-  const {commonStyleForBar, commonPropsFor2Dand3Dbars} = getPropsForAnimated2DWithGradient({...props, barHeight});
-
   const static2DWithGradient = (item: barDataItem) => {
+    const localGradientColor =
+      item.gradientColor || props.gradientColor || 'white';
     return (
       <>
         <LinearGradient
@@ -192,8 +202,10 @@ const RenderBars = (props: RenderBarsPropsType) => {
           start={{x: 0, y: 0}}
           end={{x: 0, y: 1}}
           colors={[
-            item.gradientColor || props.gradientColor || 'white',
-            item.frontColor || props.frontColor || 'black',
+            isFocused
+              ? focusedBarConfig?.gradientColor ?? localGradientColor
+              : localGradientColor,
+            localFrontColor,
           ]}>
           {props.cappedBars && item.value ? (
             <Cap
@@ -253,7 +265,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
     {
       // overflow: 'visible',
       marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift,
-      width: item.barWidth || props.barWidth || 30,
+      width: commonPropsFor2Dand3Dbars.barWidth,
       height: barHeight,
       marginRight: spacing,
     },
@@ -279,8 +291,6 @@ const RenderBars = (props: RenderBarsPropsType) => {
             ],
           }
         : null,
-    // !isThreeD && !item.showGradient && !props.showGradient &&
-    // { backgroundColor: item.frontColor || props.frontColor || 'black' },
     side !== 'right' && {zIndex: data.length - index},
   ];
 
@@ -293,13 +303,11 @@ const RenderBars = (props: RenderBarsPropsType) => {
     const animated2DWithGradient = (noGradient, noAnimation) => (
       <Animated2DWithGradient
         {...commonPropsFor2Dand3Dbars}
-        barWidth={props.barWidth || 30}
         animationDuration={animationDuration || 800}
         roundedBottom={props.roundedBottom || false}
         roundedTop={props.roundedTop || false}
         noGradient={noGradient}
         noAnimation={noAnimation}
-        gradientColor={noGradient ? undefined : props.gradientColor}
         containerHeight={containerHeight}
         maxValue={maxValue}
         minHeight={minHeight ?? 0}
@@ -311,11 +319,8 @@ const RenderBars = (props: RenderBarsPropsType) => {
         horizontal={horizontal}
         barBorderWidth={barBorderWidth}
         barBorderColor={barBorderColor}
-        barBorderRadius={props.barBorderRadius || 0}
-        barBorderTopLeftRadius={barBorderTopLeftRadius}
-        barBorderTopRightRadius={barBorderTopRightRadius}
-        barBorderBottomLeftRadius={barBorderBottomLeftRadius}
-        barBorderBottomRightRadius={barBorderBottomRightRadius}
+        commonStyleForBar={commonStyleForBar}
+        barStyleWithBackground={barStyleWithBackground}
       />
     );
     return (
@@ -350,6 +355,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
             horizontal={horizontal}
             isAnimated={isAnimated}
             animationDuration={animationDuration || 800}
+            selectedIndex={selectedIndex}
           />
         ) : item.showGradient || props.showGradient ? (
           isAnimated ? (
@@ -379,7 +385,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
         <TouchableOpacity
           activeOpacity={props.activeOpacity || 0.2}
           onPress={() => {
-            if (renderTooltip) {
+            if (renderTooltip || props.focusBarOnPress) {
               setSelectedIndex(index);
             }
             item.onPress
@@ -388,7 +394,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
                 ? props.onPress(item, index)
                 : null;
           }}
-          onLongPress={()=>{
+          onLongPress={() => {
             item.onLongPress
               ? item.onLongPress()
               : props.onLongPress

package/src/BarChart/index.tsx

@@ -3,11 +3,7 @@ import {Animated, Easing, View} from 'react-native';
 import RenderBars from './RenderBars';
 import RenderStackBars from './RenderStackBars';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
-import {
-  BarChartPropsType,
-  useBarChart,
-  screenWidth,
-} from 'gifted-charts-core';
+import {BarChartPropsType, useBarChart, screenWidth} from 'gifted-charts-core';
 import {StripAndLabel} from '../Components/common/StripAndLabel';
 import {Pointer} from '../Components/common/Pointer';
 
@@ -338,7 +334,7 @@ export const BarChart = (props: BarChartPropsType) => {
         <RenderBars
           data={data}
           side={side}
-          minHeight={props.minHeight || 0}
+          minHeight={props.minHeight ?? (isAnimated && !isThreeD ? 0.1 : 0)}
           sideWidth={props.sideWidth}
           labelWidth={labelWidth}
           isThreeD={isThreeD}

package/src/Components/AnimatedThreeDBar/index.tsx

@@ -10,7 +10,11 @@ import {
 import LinearGradient from 'react-native-linear-gradient';
 import Svg, {Defs, Rect} from 'react-native-svg';
 import {styles} from './styles';
-import { useAnimatedThreeDBar, animatedBarPropTypes, trianglePropTypes, BarDefaults } from 'gifted-charts-core';
+import {
+  useAnimatedThreeDBar,
+  animatedBarPropTypes,
+  trianglePropTypes,
+} from 'gifted-charts-core';
 
 if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental &&
@@ -54,7 +58,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
     animationDuration,
     item,
     index,
-    width,
+    barWidth,
     sideWidth,
     barStyle,
     barBackgroundPattern,
@@ -129,8 +133,8 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
               <View style={{position: 'absolute', top: sideWidth / -2}}>
                 <View
                   style={{
-                    width: width,
-                    height: width * 0.4,
+                    width: barWidth,
+                    height: barWidth * 0.4,
                     // left: width / 2,
                     backgroundColor: topColor,
                     opacity: opacity,
@@ -141,7 +145,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                 style={{
                   position: 'absolute',
                   top: sideWidth / -2,
-                  left: width,
+                  left: barWidth,
                 }}>
                 <TriangleCorner
                   color={topColor}
@@ -154,33 +158,31 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
 
           {/*******************************************************************/}
 
-          {props.height ? (
-            <View style={{marginTop: sideWidth / -2}}>
-              <TriangleCorner
-                color={sideColor}
-                width={sideWidth}
-                style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
-              />
-              <View
-                style={{
-                  width: sideWidth / 2,
-                  height: height - sideWidth / 2, //animatedSideHeight
-                  backgroundColor: sideColor,
-                  opacity: opacity,
-                }}
-              />
-              <TriangleCorner
-                color={sideColor}
-                width={sideWidth}
-                style={{transform: [{rotate: '90deg'}], opacity: opacity}}
-              />
-            </View>
-          ) : null}
+          <View style={{marginTop: sideWidth / -2}}>
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth}
+              style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
+            />
+            <View
+              style={{
+                width: sideWidth / 2,
+                height: height - sideWidth / 2, //animatedSideHeight
+                backgroundColor: sideColor,
+                opacity: opacity,
+              }}
+            />
+            <TriangleCorner
+              color={height ? sideColor : 'transparent'}
+              width={sideWidth}
+              style={{transform: [{rotate: '90deg'}], opacity: opacity}}
+            />
+          </View>
 
           <View
             style={[
               {
-                width: width,
+                width: barWidth,
                 height: height, //animatedHeight
                 backgroundColor: frontColor,
                 borderLeftWidth: StyleSheet.hairlineWidth,
@@ -205,7 +207,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                   stroke="transparent"
                   x="1"
                   y="1"
-                  width={width || 30}
+                  width={barWidth || 30}
                   height={height}
                   fill={`url(#${patternId})`}
                 />
@@ -225,9 +227,9 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
               style={[
                 {
                   position: 'absolute',
-                  top: width * -2,
-                  height: (width * 3) / 2,
-                  width: (width * 3) / 2,
+                  top: barWidth * -2,
+                  height: (barWidth * 3) / 2,
+                  width: (barWidth * 3) / 2,
                   justifyContent: 'flex-end',
                   alignItems: 'center',
                   opacity: opacity,

package/src/LineChart/index.tsx

@@ -104,7 +104,6 @@ export const LineChart = (props: LineChartPropsType) => {
     arrowPointsFromSet,
     selectedIndex,
     setSelectedIndex,
-    noOfSections,
     containerHeight,
     data,
     data2,
@@ -298,7 +297,7 @@ export const LineChart = (props: LineChartPropsType) => {
 
   if (!initialData) {
     initialData = data0 ?? [...data];
-    animations = initialData.map(item => new Animated.Value(item.value));
+    animations = initialData?.map(item => new Animated.Value(item.value));
   }
 
   const widthValuesFromSet = useMemo(