gifted-charts-core 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "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,
     },
   ];
 

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 = {
@@ -579,20 +584,20 @@ export type animatedBarPropTypes = {
 
 export type CommonPropsFor2Dand3DbarsType = {
   barBackgroundPattern: Function;
-    barInnerComponent: (item?: barDataItem, index?: number) => ReactNode;
-    patternId: String;
-    barWidth: 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/LineChart/index.ts

@@ -17,6 +17,8 @@ import {
   getAxesAndRulesProps,
   getCurvePathWithSegments,
   getExtendedContainerHeightWithPadding,
+  getInterpolatedData,
+  getLineSegmentsForMissingValues,
   getMaxValue,
   getNoOfSections,
   getPathWithHighlight,
@@ -32,7 +34,12 @@ interface extendedLineChartPropsType extends LineChartPropsType {
 }
 
 export const useLineChart = (props: extendedLineChartPropsType) => {
-  const { animations } = props;
+  const {
+    animations,
+    showDataPointsForMissingValues,
+    interpolateMissingValues = true,
+    onlyPositive,
+  } = props;
   const curvature = props.curvature ?? LineDefaults.curvature;
   const curveType = props.curveType ?? LineDefaults.curveType;
   const [scrollX, setScrollX] = useState(0);
@@ -110,70 +117,114 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     if (!props.data) {
       return [];
     }
+    const nullishHandledData = getInterpolatedData(
+      props.data,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
+    );
     if (props.yAxisOffset) {
-      return clone(props.data).map((item) => {
+      return nullishHandledData.map((item) => {
         item.value = item.value - (props.yAxisOffset ?? 0);
         return item;
       });
     }
-    return props.data;
+    return nullishHandledData;
   }, [props.yAxisOffset, props.data]);
   const data2 = useMemo(() => {
     if (!props.data2) {
       return [];
     }
+    const nullishHandledData = getInterpolatedData(
+      props.data2,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
+    );
     if (props.yAxisOffset) {
-      return clone(props.data2).map((item) => {
+      return nullishHandledData.map((item) => {
         item.value = item.value - (props.yAxisOffset ?? 0);
         return item;
       });
     }
-    return props.data2;
+    return nullishHandledData;
   }, [props.yAxisOffset, props.data2]);
   const data3 = useMemo(() => {
     if (!props.data3) {
       return [];
     }
+    const nullishHandledData = getInterpolatedData(
+      props.data3,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
+    );
     if (props.yAxisOffset) {
-      return clone(props.data3).map((item) => {
+      return nullishHandledData.map((item) => {
         item.value = item.value - (props.yAxisOffset ?? 0);
         return item;
       });
     }
-    return props.data3;
+    return nullishHandledData;
   }, [props.yAxisOffset, props.data3]);
   const data4 = useMemo(() => {
     if (!props.data4) {
       return [];
     }
+    const nullishHandledData = getInterpolatedData(
+      props.data4,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
+    );
     if (props.yAxisOffset) {
-      return clone(props.data4).map((item) => {
+      return nullishHandledData.map((item) => {
         item.value = item.value - (props.yAxisOffset ?? 0);
         return item;
       });
     }
-    return props.data4;
+    return nullishHandledData;
   }, [props.yAxisOffset, props.data4]);
   const data5 = useMemo(() => {
     if (!props.data5) {
       return [];
     }
+    const nullishHandledData = getInterpolatedData(
+      props.data5,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
+    );
     if (props.yAxisOffset) {
-      return clone(props.data5).map((item) => {
+      return nullishHandledData.map((item) => {
         item.value = item.value - (props.yAxisOffset ?? 0);
         return item;
       });
     }
-    return props.data5;
+    return nullishHandledData;
   }, [props.yAxisOffset, props.data5]);
 
   const secondaryData =
     getSecondaryDataWithOffsetIncluded(
       props.secondaryData,
-      props.secondaryYAxis
+      props.secondaryYAxis,
+      showDataPointsForMissingValues,
+      interpolateMissingValues,
+      onlyPositive
     ) || [];
 
-  const dataSet = props.dataSet;
+  let dataSet = props.dataSet;
+  if (dataSet?.length) {
+    dataSet = dataSet.map((dataSetItem) => ({
+      ...dataSetItem,
+      data: getInterpolatedData(
+        dataSetItem.data,
+        showDataPointsForMissingValues,
+        interpolateMissingValues,
+        onlyPositive
+      ),
+    }));
+  }
   const data0 = useMemo(() => {
     if (props.yAxisOffset) {
       return dataSet?.[0]?.data;
@@ -224,7 +275,9 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const startIndex5 = props.startIndex5 || 0;
   const endIndex5 = props.endIndex5 ?? data5.length - 1;
 
-  const lineSegments = props.lineSegments;
+  const lineSegments = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(data)
+    : props.lineSegments;
   const lineSegments2 = props.lineSegments2;
   const lineSegments3 = props.lineSegments3;
   const lineSegments4 = props.lineSegments4;
@@ -242,7 +295,7 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const endSpacing =
     props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing);
 
-  const thickness = props.thickness || LineDefaults.thickness;
+  const thickness = props.thickness ?? LineDefaults.thickness;
 
   const yAxisLabelWidth =
     props.yAxisLabelWidth ??
@@ -693,24 +746,27 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
     );
   };
 
-  const getNextPoint = (data, index, around) => {
+  const getNextPoint = (data, index, around, before) => {
     const isLast = index === data.length - 1;
-    return isLast && !around
+    return isLast && !(around || before)
       ? " "
       : " L" +
-          (getX(index) + (around ? (isLast ? 0 : spacing / 2) : spacing)) +
+          (getX(index) +
+            (around ? (isLast ? 0 : spacing / 2) : before ? 0 : spacing)) +
           " " +
           getY(data[index].value) +
           " ";
   };
   const getStepPath = (data, i) => {
     const around = edgePosition === EdgePosition.AROUND_DATA_POINT;
+    const before = edgePosition === EdgePosition.BEFORE_DATA_POINT;
     return (
       "L" +
-      (getX(i) - (around && i > 0 ? spacing / 2 : 0)) +
+      (getX(i) -
+        (around && i > 0 ? spacing / 2 : before && i > 0 ? spacing : 0)) +
       " " +
       getY(data[i].value) +
-      getNextPoint(data, i, around)
+      getNextPoint(data, i, around, before)
     );
   };
 

package/src/LineChart/types.ts

@@ -319,6 +319,10 @@ export type LineChartPropsType = {
   onEndReached?: () => void;
   onStartReached?: () => void;
   endReachedOffset?: number;
+
+  showDataPointsForMissingValues?: boolean;
+  interpolateMissingValues?: boolean;
+  onlyPositive?: boolean;
 };
 
 export type lineDataItem = {

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',
 };
@@ -232,7 +234,7 @@ export const LineDefaults = {
   stripWidth: 2,
   unFocusOnPressOut: true,
   delayBeforeUnFocus: 300,
-  edgePosition: EdgePosition.AT_DATA_POINT,
+  edgePosition: EdgePosition.AFTER_DATA_POINT,
   endReachedOffset: defaultEndReachedOffset,
 };
 

package/src/utils/index.tsx

@@ -1,3 +1,4 @@
+import { lineDataItem } from "../LineChart/types";
 import {
   AxesAndRulesDefaults,
   BarDefaults,
@@ -720,15 +721,25 @@ export const getExtendedContainerHeightWithPadding = (
 
 export const getSecondaryDataWithOffsetIncluded = (
   secondaryData?: any,
-  secondaryYAxis?: any
+  secondaryYAxis?: any,
+  showDataPointsForMissingValues?: boolean,
+  interpolateMissingValues?: boolean,
+  onlyPositive?: boolean
 ) => {
-  if (secondaryData && secondaryYAxis?.yAxisOffset) {
-    return secondaryData?.map((item) => {
+  if (!secondaryData) return secondaryData;
+  const nullishHandledData = getInterpolatedData(
+    secondaryData,
+    showDataPointsForMissingValues,
+    interpolateMissingValues,
+    onlyPositive
+  );
+  if (secondaryYAxis?.yAxisOffset) {
+    return nullishHandledData.map((item) => {
       item.value = item.value - (secondaryYAxis?.yAxisOffset ?? 0);
       return item;
     });
   }
-  return secondaryData;
+  return nullishHandledData;
 };
 
 export const getArrowProperty = (
@@ -1155,12 +1166,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 = (
@@ -1199,3 +1220,155 @@ export const getBarWidth = (
   }
   return localBarWidth;
 };
+
+export const getInterpolatedData = (
+  dataParam: lineDataItem[],
+  showDataPointsForMissingValues?: boolean,
+  interpolateMissingValues?: boolean,
+  onlyPositive?: boolean
+): lineDataItem[] => {
+  if (!interpolateMissingValues) {
+    return dataParam.map((item) => {
+      if (typeof item.value !== "number") {
+        if (showDataPointsForMissingValues) return { ...item, value: 0 };
+        return { ...item, value: 0, hideDataPoint: true };
+      }
+      return item;
+    });
+  }
+  if (!interpolateMissingValues) return dataParam;
+  const data = clone(dataParam);
+  const n = data.length;
+
+  /**************         PRE-PROCESSING           **************/
+  let numericValue;
+  const numericValuesLength = data.filter((item) => {
+    const isNum = typeof item.value === "number";
+    if (isNum) {
+      numericValue = item.value;
+      return true;
+    }
+    return false;
+  }).length;
+
+  if (!numericValuesLength) return [];
+
+  if (numericValuesLength === 1) {
+    data.forEach((item) => {
+      if (!showDataPointsForMissingValues && typeof item.value !== "number") {
+        item.hideDataPoint = true;
+      }
+      item.value = numericValue;
+    });
+    return data;
+  }
+  /**********************************************************************/
+
+  data.forEach((item, index) => {
+    if (typeof item.value === "number") return;
+    //  Cut the line in 2 halves-> pre and post
+    //  Now there are 4 possibilities-
+    //    1. Both pre and post have valid values
+    //    2. Only pre has valid value
+    //    3. Only post has valid value
+    //    4. None has valid value -> this is already handled in preprocessing
+
+    const pre = data.slice(0, index);
+    const post = data.slice(index + 1, n);
+
+    const preValidIndex = pre.findLastIndex(
+      (item) => typeof item.value === "number"
+    );
+    const postValidInd = post.findIndex(
+      (item) => typeof item.value === "number"
+    );
+    const postValidIndex = postValidInd + index + 1;
+
+    let count, step;
+
+    //    1. Both pre and post have valid values
+    if (preValidIndex !== -1 && postValidInd !== -1) {
+      count = postValidIndex - preValidIndex;
+      step = (data[postValidIndex].value - data[preValidIndex].value) / count;
+      data[index].value =
+        data[preValidIndex].value + step * (index - preValidIndex);
+    }
+
+    //    2. Only pre has valid value
+    else if (preValidIndex !== -1 && postValidInd === -1) {
+      //  Now there are 2 possibilities-
+      //    1. There's only 1 valid value in the pre -> this is already handled in preprocessing
+      //    2. There are more than valid values in pre
+      const secondPre = data.slice(0, preValidIndex);
+      const secondPreIndex = secondPre.findLastIndex(
+        (item) => typeof item.value === "number"
+      );
+
+      count = preValidIndex - secondPreIndex;
+      step = (data[secondPreIndex].value - data[preValidIndex].value) / count;
+      data[index].value =
+        data[preValidIndex].value - step * (index - preValidIndex);
+    }
+
+    //    3. Only post has valid value
+    else if (preValidIndex === -1 && postValidInd !== -1) {
+      //  Now there are 2 possibilities-
+      //    1. There's only 1 valid value in the post -> this is already handled in preprocessing
+      //    2. There are more than valid values in post
+
+      const secondPost = data.slice(postValidIndex + 1, n);
+      const secondPostInd = secondPost.findIndex(
+        (item) => typeof item.value === "number"
+      );
+      const secondPostIndex = secondPostInd + postValidIndex + 1;
+
+      count = secondPostIndex - postValidIndex;
+      step = (data[secondPostIndex].value - data[postValidIndex].value) / count;
+      data[index].value =
+        data[postValidIndex].value - step * (postValidIndex - index);
+    }
+
+    // hide data point (since it is interpolated)
+    if (!showDataPointsForMissingValues) {
+      item.hideDataPoint = true;
+    }
+  });
+  return onlyPositive
+    ? data.map((item) => ({ ...item, value: Math.max(item.value, 0) }))
+    : data;
+};
+
+export const getLineSegmentsForMissingValues = (
+  data: lineDataItem[]
+): LineSegment[] => {
+  let i,
+    n = data.length;
+  const numericValuesLength = data.filter(
+    (item) => typeof item.value === "number"
+  ).length;
+  if (!numericValuesLength) return [];
+  const segments: LineSegment[] = [];
+  for (i = 0; i < n; i++) {
+    if (typeof data[i].value !== "number") {
+      const nextValidInd = data
+        .slice(i + 1, n)
+        .findIndex((item) => typeof item.value === "number");
+      if (nextValidInd === -1) {
+        segments.push({
+          startIndex: Math.max(i - 1, 0),
+          endIndex: n,
+          color: "transparent",
+        });
+        break;
+      }
+      const nextValidIndex = nextValidInd + i + 1;
+      segments.push({
+        startIndex: Math.max(i - 1, 0),
+        endIndex: nextValidIndex,
+        color: "transparent",
+      });
+      i = nextValidIndex;
+    }
+  }
+  return segments;
+};

package/src/utils/types.ts

@@ -16,8 +16,9 @@ export enum CurveType {
 }
 
 export enum EdgePosition {
-  AT_DATA_POINT,
+  AFTER_DATA_POINT,
   AROUND_DATA_POINT,
+  BEFORE_DATA_POINT,
 }
 
 export type RulesConfig = {