gifted-charts-core 0.0.20 → 0.0.22

package/src/LineChart/LineChartBiColor.ts

@@ -1,343 +1,350 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from 'react'
 import {
   AxesAndRulesDefaults,
   LineDefaults,
-  chartTypes,
-} from "../utils/constants";
+  chartTypes
+} from '../utils/constants'
 import {
   getAxesAndRulesProps,
-  getExtendedContainerHeightWithPadding,
-} from "../utils";
-import { bicolorLineDataItem } from "./types";
-import { BarAndLineChartsWrapperTypes } from "../utils/types";
-
-let initialData: Array<bicolorLineDataItem> | null = null;
-
-type Points = {
-  points: string;
-  color: string;
-};
-
-export const useLineChartBiColor = (props) => {
-  const [toggle, setToggle] = useState(false);
-  const [pointsArray, setPointsArray] = useState<Array<Points>>([]);
-  const [fillPointsArray, setFillPointsArray] = useState<Array<Points>>([]);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const containerHeight = props.height || AxesAndRulesDefaults.containerHeight;
-  const noOfSections = props.noOfSections || AxesAndRulesDefaults.noOfSections;
-  let data = useMemo(() => {
+  getExtendedContainerHeightWithPadding
+} from '../utils'
+import { type LineChartBicolorPropsType, type bicolorLineDataItem } from './types'
+import { type BarAndLineChartsWrapperTypes } from '../utils/types'
+import { type Animated } from 'react-native'
+
+let initialData: bicolorLineDataItem[] | null = null
+
+interface Points {
+  points: string
+  color: string
+}
+
+interface extendedLineChartBicolorPropsType extends LineChartBicolorPropsType {
+  heightValue: Animated.Value
+  widthValue: Animated.Value
+  opacValue: Animated.Value
+}
+
+export const useLineChartBiColor = (props: extendedLineChartBicolorPropsType) => {
+  const [toggle, setToggle] = useState(false)
+  const [pointsArray, setPointsArray] = useState<Points[]>([])
+  const [fillPointsArray, setFillPointsArray] = useState<Points[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+  const containerHeight = props.height ?? AxesAndRulesDefaults.containerHeight
+  const noOfSections = props.noOfSections ?? AxesAndRulesDefaults.noOfSections
+  const data = useMemo(() => {
     if (!props.data) {
-      return [];
+      return []
     }
     if (props.yAxisOffset) {
-      return props.data.map((item) => {
-        item.value = item.value - (props.yAxisOffset ?? 0);
-        return item;
-      });
+      return props.data.map(item => {
+        item.value = item.value - (props.yAxisOffset ?? 0)
+        return item
+      })
     }
-    return props.data;
-  }, [props.yAxisOffset, props.data]);
+    return props.data
+  }, [props.yAxisOffset, props.data])
 
-  const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd;
-  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation;
+  const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd
+  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation
   const scrollEventThrottle =
-    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle;
+    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle
 
-  const labelsExtraHeight = props.labelsExtraHeight || 0;
+  const labelsExtraHeight = props.labelsExtraHeight ?? 0
 
   const animationDuration =
-    props.animationDuration || LineDefaults.animationDuration;
+    props.animationDuration ?? LineDefaults.animationDuration
 
-  const startIndex1 = props.startIndex || 0;
+  const startIndex1 = props.startIndex ?? 0
 
-  let endIndex1;
+  let endIndex1
   if (props.endIndex === undefined || props.endIndex === null) {
-    endIndex1 = data.length - 1;
+    endIndex1 = data.length - 1
   } else {
-    endIndex1 = props.endIndex;
+    endIndex1 = props.endIndex
   }
 
   if (!initialData) {
-    initialData = [...data];
+    initialData = [...data]
   }
 
-  const adjustToWidth = props.adjustToWidth || false;
+  const adjustToWidth = props.adjustToWidth ?? false
 
-  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing;
+  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing
   const endSpacing =
-    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing);
-  const thickness = props.thickness || LineDefaults.thickness;
+    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing)
+  const thickness = props.thickness ?? LineDefaults.thickness
 
   const spacing =
     props.spacing ??
     (adjustToWidth
-      ? ((props.width || AxesAndRulesDefaults.width) - initialSpacing) /
+      ? ((props.width ?? AxesAndRulesDefaults.width) - initialSpacing) /
         data.length
-      : LineDefaults.spacing);
+      : LineDefaults.spacing)
 
   const xAxisThickness =
-    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness;
+    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness
   const dataPointsHeight1 =
-    props.dataPointsHeight ?? LineDefaults.dataPointsHeight;
+    props.dataPointsHeight ?? LineDefaults.dataPointsHeight
   const dataPointsWidth1 =
-    props.dataPointsWidth ?? LineDefaults.dataPointsWidth;
+    props.dataPointsWidth ?? LineDefaults.dataPointsWidth
   const dataPointsRadius1 =
-    props.dataPointsRadius ?? LineDefaults.dataPointsRadius;
+    props.dataPointsRadius ?? LineDefaults.dataPointsRadius
   const dataPointsColor1 =
-    props.dataPointsColor ?? LineDefaults.dataPointsColor;
+    props.dataPointsColor ?? LineDefaults.dataPointsColor
   const dataPointsShape1 =
-    props.dataPointsShape ?? LineDefaults.dataPointsShape;
+    props.dataPointsShape ?? LineDefaults.dataPointsShape
 
-  const areaChart = props.areaChart || false;
-  const textFontSize1 = props.textFontSize || LineDefaults.textFontSize;
-  const textColor1 = props.textColor || LineDefaults.textColor;
+  const areaChart = props.areaChart ?? false
+  const textFontSize1 = props.textFontSize ?? LineDefaults.textFontSize
+  const textColor1 = props.textColor ?? LineDefaults.textColor
 
-  let totalWidth = initialSpacing;
-  let maxItem = 0,
-    minItem = 0;
+  let totalWidth = initialSpacing
+  let maxItem = 0
+  let minItem = 0
   data.forEach((item: bicolorLineDataItem) => {
     if (item.value > maxItem) {
-      maxItem = item.value;
+      maxItem = item.value
     }
     if (item.value < minItem) {
-      minItem = item.value;
+      minItem = item.value
     }
-    totalWidth += spacing;
-  });
+    totalWidth += spacing
+  })
 
-  if (props.showFractionalValues || props.roundToDigits) {
-    maxItem *= 10 * (props.roundToDigits || 1);
-    maxItem = maxItem + (10 - (maxItem % 10));
-    maxItem /= 10 * (props.roundToDigits || 1);
-    maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
+  if (props.showFractionalValues ?? props.roundToDigits) {
+    maxItem *= 10 * (props.roundToDigits ?? 1)
+    maxItem = maxItem + (10 - (maxItem % 10))
+    maxItem /= 10 * (props.roundToDigits ?? 1)
+    maxItem = parseFloat(maxItem.toFixed(props.roundToDigits ?? 1))
 
     if (minItem !== 0) {
-      minItem *= 10 * (props.roundToDigits || 1);
-      minItem = minItem - (10 + (minItem % 10));
-      minItem /= 10 * (props.roundToDigits || 1);
-      minItem = parseFloat(minItem.toFixed(props.roundToDigits || 1));
+      minItem *= 10 * (props.roundToDigits ?? 1)
+      minItem = minItem - (10 + (minItem % 10))
+      minItem /= 10 * (props.roundToDigits ?? 1)
+      minItem = parseFloat(minItem.toFixed(props.roundToDigits ?? 1))
     }
   } else {
-    maxItem = maxItem + (10 - (maxItem % 10));
+    maxItem = maxItem + (10 - (maxItem % 10))
     if (minItem !== 0) {
-      minItem = minItem - (10 + (minItem % 10));
+      minItem = minItem - (10 + (minItem % 10))
     }
   }
 
-  const maxValue = props.maxValue || maxItem;
-  const mostNegativeValue = props.mostNegativeValue || minItem;
+  const maxValue = props.maxValue ?? maxItem
+  const mostNegativeValue = props.mostNegativeValue ?? minItem
 
   const extendedContainerHeight = getExtendedContainerHeightWithPadding(
     containerHeight,
     props.overflowTop
-  );
+  )
 
-  let yAtxAxis = extendedContainerHeight - xAxisThickness / 2;
-  const getX = (index) => initialSpacing + spacing * index;
-  const getY = (index) =>
-    yAtxAxis - (data[index].value * containerHeight) / maxValue;
+  const yAtxAxis = extendedContainerHeight - xAxisThickness / 2
+  const getX = (index: number): number => initialSpacing + spacing * index
+  const getY = (index: number): number =>
+    yAtxAxis - (data[index].value * containerHeight) / maxValue
 
   useEffect(() => {
-    let ppArray: Array<Points> = [];
-    let pp = "M" + initialSpacing + " " + getY(0),
-      prevValuev,
-      nextValue;
+    const ppArray: Points[] = []
+    let pp = 'M' + initialSpacing + ' ' + getY(0)
+    let prevValuev
+    let nextValue
     for (let i = 0; i < data.length - 1; i++) {
-      prevValuev = data[i].value;
-      nextValue = data[i + 1].value;
+      prevValuev = data[i].value
+      nextValue = data[i + 1].value
 
       if (prevValuev < 0 && nextValue < 0) {
-        pp += "L" + getX(i) + " " + getY(i) + " ";
+        pp += 'L' + getX(i) + ' ' + getY(i) + ' '
       } else if (prevValuev < 0 && nextValue > 0) {
-        pp += "L" + getX(i) + " " + getY(i) + " ";
-        let prevX = getX(i);
-        let prevY = getY(i);
-        let nextX = getX(i + 1);
-        let nextY = getY(i + 1);
-        let slope = (nextY - prevY) / (nextX - prevX);
-        let x = (yAtxAxis - prevY) / slope + prevX;
-        pp += "L" + (x - thickness / 2) + " " + yAtxAxis + " ";
+        pp += 'L' + getX(i) + ' ' + getY(i) + ' '
+        const prevX = getX(i)
+        const prevY = getY(i)
+        const nextX = getX(i + 1)
+        const nextY = getY(i + 1)
+        const slope = (nextY - prevY) / (nextX - prevX)
+        const x = (yAtxAxis - prevY) / slope + prevX
+        pp += 'L' + (x - thickness / 2) + ' ' + yAtxAxis + ' '
 
         let pointsOb = {
-          points: pp.startsWith("L") ? pp.replace("L", "M") : pp,
-          color: "red",
-        };
-        ppArray.push(pointsOb);
-        setPointsArray([...ppArray]);
-        pp = "M" + x + " " + yAtxAxis + " L" + nextX + " " + nextY + " ";
+          points: pp.startsWith('L') ? pp.replace('L', 'M') : pp,
+          color: 'red'
+        }
+        ppArray.push(pointsOb)
+        setPointsArray([...ppArray])
+        pp = 'M' + x + ' ' + yAtxAxis + ' L' + nextX + ' ' + nextY + ' '
         pointsOb = {
           points: pp,
-          color: "green",
-        };
-        ppArray.push(pointsOb);
+          color: 'green'
+        }
+        ppArray.push(pointsOb)
       } else if (prevValuev > 0 && nextValue < 0) {
-        pp += "L" + getX(i) + " " + getY(i) + " ";
-        let prevX = getX(i);
-        let prevY = getY(i);
-        let nextX = getX(i + 1);
-        let nextY = getY(i + 1);
-        let slope = (nextY - prevY) / (nextX - prevX);
+        pp += 'L' + getX(i) + ' ' + getY(i) + ' '
+        const prevX = getX(i)
+        const prevY = getY(i)
+        const nextX = getX(i + 1)
+        const nextY = getY(i + 1)
+        const slope = (nextY - prevY) / (nextX - prevX)
 
-        let x = (yAtxAxis - prevY) / slope + prevX;
-        pp += "L" + (x - thickness / 2) + " " + yAtxAxis + " ";
+        const x = (yAtxAxis - prevY) / slope + prevX
+        pp += 'L' + (x - thickness / 2) + ' ' + yAtxAxis + ' '
 
         let pointsOb = {
-          points: pp.startsWith("L") ? pp.replace("L", "M") : pp,
-          color: "green",
-        };
-        ppArray.push(pointsOb);
-        setPointsArray([...ppArray]);
-        pp = "M" + x + " " + yAtxAxis + " L" + nextX + " " + nextY + " ";
+          points: pp.startsWith('L') ? pp.replace('L', 'M') : pp,
+          color: 'green'
+        }
+        ppArray.push(pointsOb)
+        setPointsArray([...ppArray])
+        pp = 'M' + x + ' ' + yAtxAxis + ' L' + nextX + ' ' + nextY + ' '
         pointsOb = {
           points: pp,
-          color: "red",
-        };
-        ppArray.push(pointsOb);
+          color: 'red'
+        }
+        ppArray.push(pointsOb)
       } else {
-        pp += "L" + getX(i) + " " + getY(i) + " ";
+        pp += 'L' + getX(i) + ' ' + getY(i) + ' '
       }
     }
-    let i = data.length - 1;
-    prevValuev = data[i - 1].value;
-    nextValue = data[i].value;
+    let i = data.length - 1
+    prevValuev = data[i - 1].value
+    nextValue = data[i].value
     if (
       (prevValuev > 0 && nextValue > 0) ||
       (prevValuev < 0 && nextValue < 0)
     ) {
-      pp += "L" + getX(i) + " " + getY(i) + " ";
+      pp += 'L' + getX(i) + ' ' + getY(i) + ' '
+    }
+    const pointsOb = {
+      points: pp.startsWith('L') ? pp.replace('L', 'M') : pp,
+      color: nextValue > 0 ? 'green' : 'red'
     }
-    let pointsOb = {
-      points: pp.startsWith("L") ? pp.replace("L", "M") : pp,
-      color: nextValue > 0 ? "green" : "red",
-    };
-    ppArray.push(pointsOb);
-    setPointsArray([...ppArray]);
-
-    /***************************          For Area Charts          *************************/
-
-    let startIndex = -1,
-      endIndex = -1,
-      startX,
-      startY,
-      endY,
-      color = "green",
-      localArray: Array<Points> = [],
-      broken = false;
-
-    pp = "M" + initialSpacing + " " + yAtxAxis;
+    ppArray.push(pointsOb)
+    setPointsArray([...ppArray])
+
+    /** *************************          For Area Charts          *************************/
+
+    let startIndex = -1
+    let endIndex = -1
+    let startX: string
+    let startY: string
+    let endY: string
+    let color = 'green'
+    const localArray: Points[] = []
+    let broken = false
+
+    pp = 'M' + initialSpacing + ' ' + yAtxAxis
     for (i = 0; i < data.length - 1; i++) {
-      prevValuev = data[i].value;
-      nextValue = data[i + 1].value;
-      pp += "L" + getX(i) + " " + getY(i) + " ";
+      prevValuev = data[i].value
+      nextValue = data[i + 1].value
+      pp += 'L' + getX(i) + ' ' + getY(i) + ' '
       if (
         (prevValuev > 0 && nextValue < 0) ||
         (prevValuev < 0 && nextValue > 0)
       ) {
-        let prevX = getX(i);
-        let prevY = getY(i);
-        let nextX = getX(i + 1);
-        let nextY = getY(i + 1);
-        let slope = (nextY - prevY) / (nextX - prevX);
-
-        let x = (yAtxAxis - prevY) / slope + prevX;
-        pp += "L" + (x - thickness / 2) + " " + yAtxAxis + " ";
-        broken = true;
-        break;
+        const prevX = getX(i)
+        const prevY = getY(i)
+        const nextX = getX(i + 1)
+        const nextY = getY(i + 1)
+        const slope = (nextY - prevY) / (nextX - prevX)
+
+        const x = (yAtxAxis - prevY) / slope + prevX
+        pp += 'L' + (x - thickness / 2) + ' ' + yAtxAxis + ' '
+        broken = true
+        break
       }
     }
     if (!broken) {
-      i = data.length - 1;
+      i = data.length - 1
       pp +=
-        "L" +
+        'L' +
         getX(i) +
-        " " +
+        ' ' +
         getY(i) +
-        " L" +
+        ' L' +
         getX(i) +
-        " " +
-        (yAtxAxis - xAxisThickness / 2);
+        ' ' +
+        (yAtxAxis - xAxisThickness / 2)
     }
     localArray.push({
       points: pp,
-      color: data[0].value >= 0 ? "green" : "red",
-    });
+      color: data[0].value >= 0 ? 'green' : 'red'
+    })
 
-    let xs: Array<string> = [];
+    const xs: string[] = []
     data.forEach((item, index) => {
-      let x = getX(index);
-      xs.push(x + "");
-    });
+      const x = getX(index)
+      xs.push(x + '')
+    })
 
-    pointsArray.forEach((item: any, index) => {
-      let splitArray = item.points
-        .split(" ")
-        .filter((spItem) => spItem && spItem !== " ");
+    pointsArray.forEach((item, index) => {
+      const splitArray = item.points
+        .split(' ')
+        .filter((spItem) => spItem && spItem !== ' ')
 
       if (
-        splitArray[1] === yAtxAxis + "" &&
-        !xs.includes(splitArray[0].replace("M", "").replace("L", ""))
+        splitArray[1] === yAtxAxis + '' &&
+        !xs.includes(splitArray[0].replace('M', '').replace('L', ''))
       ) {
-        startIndex = index;
-        startX = splitArray[0].replace("M", "").replace("L", "");
+        startIndex = index
+        startX = splitArray[0].replace('M', '').replace('L', '')
         if (splitArray.length > 3) {
-          startY = splitArray[1].replace("M", "").replace("L", "");
-          endY = splitArray[3].replace("M", "").replace("L", "");
+          startY = splitArray[1].replace('M', '').replace('L', '')
+          endY = splitArray[3].replace('M', '').replace('L', '')
           if (Number(startY) < Number(endY)) {
-            color = "red";
+            color = 'red'
           } else {
-            color = "green";
+            color = 'green'
           }
         }
       }
       if (
-        splitArray[splitArray.length - 1] === yAtxAxis + "" &&
+        splitArray[splitArray.length - 1] === yAtxAxis + '' &&
         !xs.includes(
-          splitArray[splitArray.length - 2].replace("M", "").replace("L", "")
+          splitArray[splitArray.length - 2].replace('M', '').replace('L', '')
         )
       ) {
-        endIndex = index;
+        endIndex = index
       }
       if (startX) {
-        let filPts = "";
+        let filPts = ''
         for (let j = startIndex; j <= endIndex; j++) {
           if (pointsArray[j]) {
-            filPts += pointsArray[j].points.replaceAll("M", "L");
+            filPts += pointsArray[j].points.replaceAll('M', 'L')
           }
         }
-        filPts += "L " + startX + " " + yAtxAxis;
-        localArray.push({ points: filPts.replace("L", "M"), color });
+        filPts += 'L ' + startX + ' ' + yAtxAxis
+        localArray.push({ points: filPts.replace('L', 'M'), color })
       }
-    });
+    })
     if (broken) {
-      pp = "M" + getX(data.length - 1) + " " + yAtxAxis;
+      pp = 'M' + getX(data.length - 1) + ' ' + yAtxAxis
       for (let i = data.length - 1; i > 0; i--) {
-        prevValuev = data[i].value;
-        nextValue = data[i - 1].value;
-        pp += "L" + getX(i) + " " + getY(i) + " ";
+        prevValuev = data[i].value
+        nextValue = data[i - 1].value
+        pp += 'L' + getX(i) + ' ' + getY(i) + ' '
         if (
           (prevValuev > 0 && nextValue < 0) ||
           (prevValuev < 0 && nextValue > 0)
         ) {
-          let prevX = getX(i);
-          let prevY = getY(i);
-          let nextX = getX(i - 1);
-          let nextY = getY(i - 1);
-          let slope = (nextY - prevY) / (nextX - prevX);
-
-          let x = (yAtxAxis - prevY) / slope + prevX;
-          pp += "L" + x + " " + yAtxAxis + " ";
-          break;
+          const prevX = getX(i)
+          const prevY = getY(i)
+          const nextX = getX(i - 1)
+          const nextY = getY(i - 1)
+          const slope = (nextY - prevY) / (nextX - prevX)
+
+          const x = (yAtxAxis - prevY) / slope + prevX
+          pp += 'L' + x + ' ' + yAtxAxis + ' '
+          break
         }
       }
 
       localArray.push({
         points: pp,
-        color: data[data.length - 1].value > 0 ? "green" : "red",
-      });
+        color: data[data.length - 1].value > 0 ? 'green' : 'red'
+      })
     }
 
-    setFillPointsArray([...localArray]);
-    setToggle(true);
+    setFillPointsArray([...localArray])
+    setToggle(true)
   }, [
     areaChart,
     containerHeight,
@@ -347,92 +354,92 @@ export const useLineChartBiColor = (props) => {
     spacing,
     xAxisThickness,
     toggle,
-    maxValue,
-  ]);
+    maxValue
+  ])
 
-  const horizSections = [{ value: "0" }];
-  const stepHeight = props.stepHeight || containerHeight / noOfSections;
-  const stepValue = props.stepValue || maxValue / noOfSections;
+  const horizSections = [{ value: '0' }]
+  const stepHeight = props.stepHeight ?? containerHeight / noOfSections
+  const stepValue = props.stepValue ?? maxValue / noOfSections
   const noOfSectionsBelowXAxis =
-    props.noOfSectionsBelowXAxis || -mostNegativeValue / stepValue;
-  const thickness1 = props.thickness || LineDefaults.thickness;
-  const zIndex = props.zIndex || 0;
+    props.noOfSectionsBelowXAxis ?? -mostNegativeValue / stepValue
+  const thickness1 = props.thickness ?? LineDefaults.thickness
+  const zIndex = props.zIndex ?? 0
 
-  const strokeDashArray1 = props.strokeDashArray;
+  const strokeDashArray1 = props.strokeDashArray
 
-  const rotateLabel = props.rotateLabel ?? AxesAndRulesDefaults.rotateLabel;
-  const isAnimated = props.isAnimated ?? LineDefaults.isAnimated;
-  const hideDataPoints1 = props.hideDataPoints ?? LineDefaults.hideDataPoints;
+  const rotateLabel = props.rotateLabel ?? AxesAndRulesDefaults.rotateLabel
+  const isAnimated = props.isAnimated ?? LineDefaults.isAnimated
+  const hideDataPoints1 = props.hideDataPoints ?? LineDefaults.hideDataPoints
 
-  const color = props.color || "green";
-  const colorNegative = props.colorNegative || "red";
+  const color = props.color ?? 'green'
+  const colorNegative = props.colorNegative ?? 'red'
 
-  const startFillColor = props.startFillColor || "lightgreen";
-  const endFillColor = props.endFillColor || "white";
-  const startOpacity = props.startOpacity ?? LineDefaults.startOpacity;
-  const endOpacity = props.endOpacity ?? LineDefaults.endOpacity;
-  const startFillColorNegative = props.startFillColorNegative || "pink";
-  const endFillColorNegative = props.endFillColorNegative || "white";
+  const startFillColor = props.startFillColor ?? 'lightgreen'
+  const endFillColor = props.endFillColor ?? 'white'
+  const startOpacity = props.startOpacity ?? LineDefaults.startOpacity
+  const endOpacity = props.endOpacity ?? LineDefaults.endOpacity
+  const startFillColorNegative = props.startFillColorNegative ?? 'pink'
+  const endFillColorNegative = props.endFillColorNegative ?? 'white'
   const startOpacityNegative =
-    props.startOpacityNegative ?? LineDefaults.startOpacity;
+    props.startOpacityNegative ?? LineDefaults.startOpacity
   const endOpacityNegative =
-    props.endOpacityNegative ?? LineDefaults.endOpacity;
+    props.endOpacityNegative ?? LineDefaults.endOpacity
 
-  const gradientDirection = props.gradientDirection || "vertical";
+  const gradientDirection = props.gradientDirection ?? 'vertical'
 
   const showXAxisIndices =
-    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices;
+    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices
   const xAxisIndicesHeight =
-    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight;
+    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight
   const xAxisIndicesWidth =
-    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth;
+    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth
   const xAxisIndicesColor =
-    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor;
+    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor
 
   const xAxisTextNumberOfLines =
-    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines;
-  const horizontalRulesStyle = props.horizontalRulesStyle;
+    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines
+  const horizontalRulesStyle = props.horizontalRulesStyle
   const showFractionalValues =
-    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues;
+    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues
   const yAxisLabelWidth =
     props.yAxisLabelWidth ??
     (props.hideYAxisText
       ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth);
+      : AxesAndRulesDefaults.yAxisLabelWidth)
 
-  const horizontal = false;
-  const yAxisAtTop = false;
+  const horizontal = false
+  const yAxisAtTop = false
 
-  const disableScroll = props.disableScroll ?? LineDefaults.disableScroll;
+  const disableScroll = props.disableScroll ?? LineDefaults.disableScroll
   const showScrollIndicator =
-    props.showScrollIndicator || LineDefaults.showScrollIndicator;
+    props.showScrollIndicator ?? LineDefaults.showScrollIndicator
 
-  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled;
+  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled
   const showDataPointOnFocus =
-    props.showDataPointOnFocus ?? LineDefaults.showDataPointOnFocus;
+    props.showDataPointOnFocus ?? LineDefaults.showDataPointOnFocus
   const showStripOnFocus =
-    props.showStripOnFocus ?? LineDefaults.showStripOnFocus;
-  const showTextOnFocus = props.showTextOnFocus ?? LineDefaults.showTextOnFocus;
-  const stripHeight = props.stripHeight;
-  const stripWidth = props.stripWidth ?? LineDefaults.stripWidth;
-  const stripColor = props.stripColor ?? color;
-  const stripOpacity = props.stripOpacity ?? (startOpacity + endOpacity) / 2;
+    props.showStripOnFocus ?? LineDefaults.showStripOnFocus
+  const showTextOnFocus = props.showTextOnFocus ?? LineDefaults.showTextOnFocus
+  const stripHeight = props.stripHeight
+  const stripWidth = props.stripWidth ?? LineDefaults.stripWidth
+  const stripColor = props.stripColor ?? color
+  const stripOpacity = props.stripOpacity ?? (startOpacity + endOpacity) / 2
   const unFocusOnPressOut =
-    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut;
+    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut
   const delayBeforeUnFocus =
-    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus;
+    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus
 
-  horizSections.pop();
+  horizSections.pop()
   for (let i = 0; i <= noOfSections; i++) {
-    let value = maxValue - stepValue * i;
-    if (props.showFractionalValues || props.roundToDigits) {
-      value = parseFloat(value.toFixed(props.roundToDigits || 1));
+    let value = maxValue - stepValue * i
+    if (props.showFractionalValues ?? props.roundToDigits) {
+      value = parseFloat(value.toFixed(props.roundToDigits ?? 1))
     }
     horizSections.push({
       value: props.yAxisLabelTexts
         ? props.yAxisLabelTexts[noOfSections - i] ?? value.toString()
-        : value.toString(),
-    });
+        : value.toString()
+    })
   }
 
   const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
@@ -471,11 +478,11 @@ export const useLineChartBiColor = (props) => {
     lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     lineBehindBars: false,
     points: pointsArray,
-    points2: "", // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
+    points2: '', // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     arrowPoints: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
     remainingScrollViewProps: {},
 
-    //horizSectionProps-
+    // horizSectionProps-
     width: props.width,
     horizSections,
     endSpacing,
@@ -501,8 +508,8 @@ export const useLineChartBiColor = (props) => {
     pointerIndex: 0,
     pointerX: 0,
     pointerY: 0,
-    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset,
-  };
+    endReachedOffset: props.endReachedOffset ?? LineDefaults.endReachedOffset
+  }
 
   return {
     toggle,
@@ -590,6 +597,6 @@ export const useLineChartBiColor = (props) => {
     unFocusOnPressOut,
     delayBeforeUnFocus,
     horizSections,
-    barAndLineChartsWrapperProps,
-  };
-};
+    barAndLineChartsWrapperProps
+  }
+}