gifted-charts-core 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "index.ts",
   "files": [

package/src/BarChart/Animated2DWithGradient.ts

@@ -34,10 +34,15 @@ export const getPropsForAnimated2DWithGradient = (props) => {
     selectedIndex,
     focusBarOnPress,
     focusedBarConfig,
+    isThreeD,
   } = props;
 
   const isFocused = focusBarOnPress && selectedIndex === index;
-  const localBarBorderRadius = item.barBorderRadius ?? barBorderRadius ?? 0;
+  const itemOrPropsBarBorderRadius =
+    item.barBorderRadius ?? barBorderRadius ?? 0;
+  const localBarBorderRadius = isFocused
+    ? focusedBarConfig?.borderRadius ?? itemOrPropsBarBorderRadius
+    : itemOrPropsBarBorderRadius;
   const localBarWidth = getBarWidth(
     isFocused,
     focusedBarConfig,
@@ -48,7 +53,8 @@ export const getPropsForAnimated2DWithGradient = (props) => {
     isFocused,
     focusedBarConfig,
     item.frontColor,
-    frontColor
+    frontColor,
+    isThreeD,
   );
   const localGradientColor = item.gradientColor || gradientColor;
   const localOpacity = opacity || 1;
@@ -60,29 +66,23 @@ export const getPropsForAnimated2DWithGradient = (props) => {
       height: "100%",
       borderWidth: barBorderWidth ?? 0,
       borderColor: barBorderColor,
-      borderRadius: isFocused
-        ? focusedBarConfig?.borderRadius ?? localBarBorderRadius
-        : localBarBorderRadius,
+      borderRadius: localBarBorderRadius,
       borderTopLeftRadius:
         item.barBorderTopLeftRadius ??
         barBorderTopLeftRadius ??
-        item.barBorderRadius ??
-        barBorderRadius,
+        localBarBorderRadius,
       borderTopRightRadius:
         item.barBorderTopRightRadius ??
         barBorderTopRightRadius ??
-        item.barBorderRadius ??
-        barBorderRadius,
+        localBarBorderRadius,
       borderBottomLeftRadius:
         item.barBorderBottomLeftRadius ??
         barBorderBottomLeftRadius ??
-        item.barBorderRadius ??
-        barBorderRadius,
+        localBarBorderRadius,
       borderBottomRightRadius:
         item.barBorderBottomRightRadius ??
         barBorderBottomRightRadius ??
-        item.barBorderRadius ??
-        barBorderRadius,
+        localBarBorderRadius,
     },
   ];
 
@@ -121,7 +121,7 @@ export const getPropsForAnimated2DWithGradient = (props) => {
       ? focusedBarConfig?.barInnerComponent ?? localBarInnerComponent
       : localBarInnerComponent,
     patternId: item.patternId || patternId,
-    width: localBarWidth,
+    barWidth: localBarWidth,
     barStyle: barStyle,
     item: item,
     index: index,

package/src/BarChart/types.ts

@@ -1,4 +1,4 @@
-import { ColorValue, GestureResponderEvent } from "react-native";
+import { ColorValue, GestureResponderEvent, ViewStyle } from "react-native";
 import { yAxisSides } from "../utils/constants";
 import {
   CurveType,
@@ -305,6 +305,8 @@ export type BarChartPropsType = {
 
 export type FocusedBarConfig = {
   color?: ColorValue;
+  sideColor?: ColorValue;
+  topColor?: ColorValue;
   gradientColor?: ColorValue;
   width?: number;
   borderRadius?: number;
@@ -312,7 +314,7 @@ export type FocusedBarConfig = {
   roundedBottom?: boolean;
   opacity?: number;
   barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
-}
+};
 
 type lineConfigType = {
   initialSpacing?: number;
@@ -460,6 +462,8 @@ export type Animated2DWithGradientPropsType = {
   barMarginBottom?: number;
   barStyle?: object;
   barInnerComponent?: (item?: barDataItem, index?: number) => ReactNode;
+  commonStyleForBar?: ViewStyle[];
+  barStyleWithBackground?: ViewStyle[];
 };
 
 export type RenderBarsPropsType = {
@@ -540,6 +544,7 @@ export type RenderBarsPropsType = {
   barStyle?: object;
   xAxisThickness?: number;
   pointerConfig?: Pointer;
+  focusBarOnPress?: boolean;
 };
 
 export type trianglePropTypes = {
@@ -551,7 +556,7 @@ export type trianglePropTypes = {
 export type animatedBarPropTypes = {
   isAnimated?: boolean;
   animationDuration: number;
-  width: number;
+  barWidth: number;
   sideWidth: number;
   height: number;
   showGradient: boolean;
@@ -579,20 +584,20 @@ export type animatedBarPropTypes = {
 
 export type CommonPropsFor2Dand3DbarsType = {
   barBackgroundPattern: Function;
-    barInnerComponent: (item?: barDataItem, index?: number) => ReactNode;
-    patternId: String;
-    width: number;
-    barStyle: object;
-    item: barDataItem;
-    index: number;
+  barInnerComponent: (item?: barDataItem, index?: number) => ReactNode;
+  patternId: String;
+  barWidth: number;
+  barStyle: object;
+  item: barDataItem;
+  index: number;
 
-    frontColor: ColorValue;
-    showGradient: boolean;
-    gradientColor: ColorValue;
-    opacity: number;
-    height: number;
-    intactTopLabel: boolean;
-    showValuesAsTopLabel: boolean;
-    topLabelContainerStyle: any;
-    topLabelTextStyle: any;
-}
+  frontColor: ColorValue;
+  showGradient: boolean;
+  gradientColor: ColorValue;
+  opacity: number;
+  height: number;
+  intactTopLabel: boolean;
+  showValuesAsTopLabel: boolean;
+  topLabelContainerStyle: any;
+  topLabelTextStyle: any;
+};

package/src/components/BarAndLineChartsWrapper/index.ts

@@ -323,8 +323,12 @@ export const useBarAndLineChartsWrapper = (
     );
   };
 
-  const isCloseToStart = ({ layoutMeasurement, contentOffset }) => {
-    return layoutMeasurement.width + contentOffset.x <= initialSpacing;
+  // const isCloseToStart = ({ layoutMeasurement, contentOffset }) => {
+  //   return layoutMeasurement.width + contentOffset.x <= initialSpacing;
+  // };
+
+  const isCloseToStart = ({ contentOffset }) => {
+    return contentOffset.x <= initialSpacing;
   };
 
   useEffect(() => {

package/src/utils/constants.ts

@@ -146,12 +146,14 @@ export const BarDefaults = {
   animationDuration: 800,
   opacity: 1,
   isThreeD: false,
+  frontColor: "black",
   threeDBarGradientColor: "white",
   threeDBarFrontColor: "#C0CA3A",
   threeDBarSideColor: "#887A24",
   threeDBarTopColor: "#D9E676",
   endReachedOffset: defaultEndReachedOffset,
   focusedBarFrontColor: 'lightgreen',
+  focusedThreeDBarFrontColor: '#B0B929',
   focusedBarSideColor: '#776913',
   focusedBarTopColor: '#C8D565',
 };

package/src/utils/index.tsx

@@ -1155,12 +1155,22 @@ export const getBarFrontColor = (
   isFocused,
   focusedBarConfig,
   itemFrontColor,
-  frontColor
+  frontColor,
+  isThreeD
 ) => {
   if (isFocused) {
-    return focusedBarConfig?.frontColor ?? BarDefaults.focusedBarFrontColor;
+    return (
+      focusedBarConfig?.color ??
+      (isThreeD
+        ? BarDefaults.focusedThreeDBarFrontColor
+        : BarDefaults.focusedBarFrontColor)
+    );
   }
-  return itemFrontColor || frontColor || "";
+  return (
+    itemFrontColor ||
+    frontColor ||
+    (isThreeD ? BarDefaults.threeDBarFrontColor : BarDefaults.frontColor)
+  );
 };
 
 export const getBarSideColor = (