gifted-charts-core 0.0.10 → 0.0.12

package/package.json

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

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,11 +275,21 @@ export const useLineChart = (props: extendedLineChartPropsType) => {
   const startIndex5 = props.startIndex5 || 0;
   const endIndex5 = props.endIndex5 ?? data5.length - 1;
 
-  const lineSegments = props.lineSegments;
-  const lineSegments2 = props.lineSegments2;
-  const lineSegments3 = props.lineSegments3;
-  const lineSegments4 = props.lineSegments4;
-  const lineSegments5 = props.lineSegments5;
+  const lineSegments = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(props.data)
+    : props.lineSegments;
+  const lineSegments2 = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(props.data2)
+    : props.lineSegments2;
+  const lineSegments3 = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(props.data3)
+    : props.lineSegments3;
+  const lineSegments4 = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(props.data4)
+    : props.lineSegments4;
+  const lineSegments5 = !interpolateMissingValues
+    ? getLineSegmentsForMissingValues(props.data5)
+    : props.lineSegments5;
 
   const highlightedRange = props.highlightedRange;
 
@@ -242,7 +303,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 +754,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/utils/constants.ts

@@ -234,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 = (
@@ -1209,3 +1220,156 @@ 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[] | undefined => {
+  if (!data?.length) return undefined;
+  let i,
+    n = data.length;
+  const numericValuesLength = data.filter(
+    (item) => typeof item.value === "number"
+  ).length;
+  if (!numericValuesLength) return undefined;
+  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 = {