react-native-gifted-charts 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "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.10"
   },
   "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}

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/Components/AnimatedThreeDBar/index.tsx

@@ -10,7 +10,7 @@ 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 +54,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
     animationDuration,
     item,
     index,
-    width,
+    barWidth,
     sideWidth,
     barStyle,
     barBackgroundPattern,
@@ -129,8 +129,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 +141,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                 style={{
                   position: 'absolute',
                   top: sideWidth / -2,
-                  left: width,
+                  left: barWidth,
                 }}>
                 <TriangleCorner
                   color={topColor}
@@ -180,7 +180,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
           <View
             style={[
               {
-                width: width,
+                width: barWidth,
                 height: height, //animatedHeight
                 backgroundColor: frontColor,
                 borderLeftWidth: StyleSheet.hairlineWidth,
@@ -205,7 +205,7 @@ const AnimatedThreeDBar = (props: animatedBarPropTypes) => {
                   stroke="transparent"
                   x="1"
                   y="1"
-                  width={width || 30}
+                  width={barWidth || 30}
                   height={height}
                   fill={`url(#${patternId})`}
                 />
@@ -225,9 +225,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/index.tsx

@@ -8,10 +8,17 @@ export {
   barDataItem,
   stackDataItem,
   BarChartPropsType,
-  StackedBarChartPropsType,pieDataItem, PieChartPropsType,
+  StackedBarChartPropsType,
+  pieDataItem,
+  PieChartPropsType,
   lineDataItem,
   bicolorLineDataItem,
   LineChartPropsType,
   LineChartBicolorPropsType,
   popnPyramidDataItem,
-  PopulationPyramidPropsType,chartTypes, yAxisSides, EdgePosition} from 'gifted-charts-core';
+  PopulationPyramidPropsType,
+  chartTypes,
+  ruleTypes,
+  yAxisSides,
+  EdgePosition,
+} from 'gifted-charts-core';