gifted-charts-core 0.0.21 → 0.0.23

package/src/utils/{index.tsx → index.ts}

@@ -1,243 +1,262 @@
-import { lineDataItem } from "../LineChart/types";
+import { type ColorValue } from 'react-native'
+import {
+  type IDataSanitisationProps,
+  type lineDataItem
+} from '../LineChart/types'
 import {
   AxesAndRulesDefaults,
   BarDefaults,
   RANGE_ENTER,
   RANGE_EXIT,
   STOP,
+  defaultCurvature,
   defaultLineConfig,
-  loc,
-} from "./constants";
+  loc
+} from './constants'
 import {
-  arrowConfigType,
+  type arrowConfigType,
   CurveType,
-  LineProperties,
-  LineSegment,
-} from "./types";
-
-const versionString = require("react-native/package.json").version;
-
-const versionAr = versionString?.split?.(".") ?? "";
-const msb = Number(versionAr[0]);
-const mid = Number(versionAr[1]);
-const lsb = Number(versionAr[2]);
+  type HighlightedRange,
+  type LineProperties,
+  type LineSegment
+} from './types'
+import {
+  type lineConfigType,
+  type BarChartPropsType,
+  type FocusedBarConfig,
+  type barDataItem
+} from '../BarChart/types'
+import { type extendedLineChartPropsType } from '../LineChart'
+import { type extendedBarChartPropsType } from '../BarChart'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const versionString = require('react-native/package.json').version
+
+const versionAr = versionString?.split?.('.') ?? ''
+const msb = Number(versionAr[0])
+const mid = Number(versionAr[1])
+const lsb = Number(versionAr[2])
 
 export const rnVersion =
   (!isNaN(msb) ? msb : 0) * 1000000 +
   (!isNaN(mid) ? mid : 0) * 10000 +
-  (!isNaN(lsb) ? lsb : 0);
+  (!isNaN(lsb) ? lsb : 0)
 
 export const getCumulativeWidth = (
   data: any,
   index: number,
   spacing: number
-) => {
-  let cumWidth = 0;
+): number => {
+  let cumWidth = 0
   for (let i = 0; i < index; i++) {
-    let { barWidth } = data[i];
-    barWidth = barWidth || 30;
-    cumWidth += barWidth + (spacing ?? 20);
+    let { barWidth } = data[i]
+    barWidth = barWidth ?? 30
+    cumWidth += barWidth + (spacing ?? 20)
   }
-  return cumWidth;
-};
-
-export const getLighterColor = (color: String) => {
-  let r,
-    g,
-    b,
-    lighter = "#";
-  if (color.startsWith("#")) {
+  return cumWidth
+}
+
+export const getLighterColor = (color: string): string => {
+  let r
+  let g
+  let b
+  let lighter = '#'
+  if (color.startsWith('#')) {
     if (color.length < 7) {
-      r = parseInt(color[1], 16);
-      g = parseInt(color[2], 16);
-      b = parseInt(color[3], 16);
+      r = parseInt(color[1], 16)
+      g = parseInt(color[2], 16)
+      b = parseInt(color[3], 16)
       if (r < 14) {
-        r += 2;
-        lighter += r.toString(16);
+        r += 2
+        lighter += r.toString(16)
       }
       if (g < 14) {
-        g += 2;
-        lighter += g.toString(16);
+        g += 2
+        lighter += g.toString(16)
       }
       if (b < 14) {
-        b += 2;
-        lighter += b.toString(16);
+        b += 2
+        lighter += b.toString(16)
       }
     } else {
-      r = parseInt(color[1] + color[2], 16);
-      g = parseInt(color[3] + color[4], 16);
-      b = parseInt(color[5] + color[6], 16);
+      r = parseInt(color[1] + color[2], 16)
+      g = parseInt(color[3] + color[4], 16)
+      b = parseInt(color[5] + color[6], 16)
 
       if (r < 224) {
-        r += 32;
-        lighter += r.toString(16);
+        r += 32
+        lighter += r.toString(16)
       }
       if (g < 224) {
-        g += 32;
-        lighter += g.toString(16);
+        g += 32
+        lighter += g.toString(16)
       }
       if (b < 224) {
-        b += 32;
-        lighter += b.toString(16);
+        b += 32
+        lighter += b.toString(16)
       }
     }
   }
-  return lighter;
-};
+  return lighter
+}
 
-export const svgQuadraticCurvePath = (points) => {
-  let path = "M" + points[0][0] + "," + points[0][1];
+export const svgQuadraticCurvePath = (points: number[][]): string => {
+  let path = 'M' + points[0][0] + ',' + points[0][1]
 
   for (let i = 0; i < points.length - 1; i++) {
-    const xMid = (points[i][0] + points[i + 1][0]) / 2;
-    const yMid = (points[i][1] + points[i + 1][1]) / 2;
-    const cpX1 = (xMid + points[i][0]) / 2;
-    const cpX2 = (xMid + points[i + 1][0]) / 2;
+    const xMid = (points[i][0] + points[i + 1][0]) / 2
+    const yMid = (points[i][1] + points[i + 1][1]) / 2
+    const cpX1 = (xMid + points[i][0]) / 2
+    const cpX2 = (xMid + points[i + 1][0]) / 2
     path +=
-      "Q " +
+      'Q ' +
       cpX1 +
-      ", " +
+      ', ' +
       points[i][1] +
-      ", " +
+      ', ' +
       xMid +
-      ", " +
+      ', ' +
       yMid +
-      (" Q " +
+      (' Q ' +
         cpX2 +
-        ", " +
+        ', ' +
         points[i + 1][1] +
-        ", " +
+        ', ' +
         points[i + 1][0] +
-        ", " +
-        points[i + 1][1]);
+        ', ' +
+        points[i + 1][1])
   }
 
-  return path;
-};
+  return path
+}
 
 export const svgPath = (
-  points: Array<Array<number>>,
-  curveType: CurveType,
-  curvature: number
-) => {
-  if (!points?.length) return "";
+  points: number[][],
+  curveType?: CurveType,
+  curvature?: number
+): string => {
+  if (!points?.length) return ''
   if (curveType === CurveType.QUADRATIC) {
-    return svgQuadraticCurvePath(points);
+    return svgQuadraticCurvePath(points)
   }
   // build the d attributes by looping over the points
   const d = points.reduce(
     (acc, point, i, a) =>
       i === 0
-        ? // if first point
-          `M${point[0]},${point[1]}`
-        : // else
-          `${acc} ${bezierCommand(point, i, a, curvature)}`,
-    ""
-  );
-  return d;
-};
-
-const line = (pointA: Array<number>, pointB: Array<number>) => {
-  const lengthX = pointB[0] - pointA[0];
-  const lengthY = pointB[1] - pointA[1];
+        ? `M${point[0]},${point[1]}`
+        : `${acc} ${bezierCommand(point, i, a, curvature ?? defaultCurvature)}`,
+    ''
+  )
+  return d
+}
+interface Iline {
+  length: number
+  angle: number
+}
+const line = (pointA: number[], pointB: number[]): Iline => {
+  const lengthX = pointB[0] - pointA[0]
+  const lengthY = pointB[1] - pointA[1]
   return {
     length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-    angle: Math.atan2(lengthY, lengthX),
-  };
-};
+    angle: Math.atan2(lengthY, lengthX)
+  }
+}
 
 const controlPoint = (
   curvature: number,
-  current: Array<number>,
-  previous: Array<number>,
-  next: Array<number>,
+  current: number[],
+  previous: number[],
+  next: number[],
   reverse?: any
-) => {
+): number[] => {
   // When 'current' is the first or last point of the array
   // 'previous' or 'next' don't exist.
   // Replace with 'current'
-  const p = previous || current;
-  const n = next || current;
+  const p = previous ?? current
+  const n = next ?? current
   // The smoothing ratio
-  const smoothing = curvature;
+  const smoothing = curvature
   // Properties of the opposed-line
-  const o = line(p, n);
+  const o = line(p, n)
   // If is end-control-point, add PI to the angle to go backward
-  const angle = o.angle + (reverse ? Math.PI : 0);
-  const length = o.length * smoothing;
+  const angle = o.angle + (reverse ? Math.PI : 0)
+  const length = o.length * smoothing
   // The control point position is relative to the current point
-  const x = current[0] + Math.cos(angle) * length;
-  const y = current[1] + Math.sin(angle) * length;
-  return [x, y];
-};
+  const x = current[0] + Math.cos(angle) * length
+  const y = current[1] + Math.sin(angle) * length
+  return [x, y]
+}
 
 export const bezierCommand = (
-  point: Array<number>,
+  point: number[],
   i: number,
-  a: Array<Array<number>>,
+  a: number[][],
   curvature: number
-) => {
+): string => {
   // start control point
-  const [cpsX, cpsY] = controlPoint(curvature, a[i - 1], a[i - 2], point);
+  const [cpsX, cpsY] = controlPoint(curvature, a[i - 1], a[i - 2], point)
   // end control point
-  const [cpeX, cpeY] = controlPoint(curvature, point, a[i - 1], a[i + 1], true);
-  return `C${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
-};
+  const [cpeX, cpeY] = controlPoint(curvature, point, a[i - 1], a[i + 1], true)
+  return `C${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`
+}
 
 export const getSegmentString = (
-  lineSegment,
-  index,
-  startDelimeter,
-  endDelimeter
-) => {
-  const segment = lineSegment?.find((segment) => segment.startIndex === index);
-  return segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : "";
-};
+  lineSegment: LineSegment[] | undefined,
+  index: number,
+  startDelimeter: string,
+  endDelimeter: string
+): string => {
+  const segment = lineSegment?.find((segment) => segment.startIndex === index)
+  return segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : ''
+}
 
 export const getCurvePathWithSegments = (
   path: string,
   lineSegment: LineSegment[] | undefined,
-  startDelimeter,
-  endDelimeter
-) => {
-  if (!lineSegment?.length) return path;
-  let newPath = "";
-  const pathArray = path.split("C");
+  startDelimeter: string,
+  endDelimeter: string
+): string => {
+  if (!lineSegment?.length) return path
+  let newPath = ''
+  const pathArray = path.split('C')
   for (let i = 0; i < pathArray.length; i++) {
-    const segment = lineSegment?.find((segment) => segment.startIndex === i);
+    const segment = lineSegment?.find((segment) => segment.startIndex === i)
     newPath +=
-      (pathArray[i].startsWith("M") ? "" : "C") +
+      (pathArray[i].startsWith('M') ? '' : 'C') +
       pathArray[i] +
-      (segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : "");
+      (segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '')
   }
-  return newPath;
-};
+  return newPath
+}
 
-export const getPreviousSegmentsLastPoint = (isCurved, previousSegment) => {
+export const getPreviousSegmentsLastPoint = (
+  isCurved: boolean,
+  previousSegment: string
+): string => {
   const prevSegmentLastPoint = isCurved
-    ? previousSegment.substring(previousSegment.trim().lastIndexOf(" "))
+    ? previousSegment.substring(previousSegment.trim().lastIndexOf(' '))
     : previousSegment
-        .substring(previousSegment.lastIndexOf("L"))
-        .replace("L", "M");
+        .substring(previousSegment.lastIndexOf('L'))
+        .replace('L', 'M')
 
   return (
-    (prevSegmentLastPoint.trim()[0] === "M" ? "" : "M") + prevSegmentLastPoint
-  );
-};
+    (prevSegmentLastPoint.trim()[0] === 'M' ? '' : 'M') + prevSegmentLastPoint
+  )
+}
 
 export const getPathWithHighlight = (
-  data,
-  i,
-  highlightedRange,
-  startIndex,
-  endIndex,
-  getX,
-  getY
-) => {
-  let path = "";
-  const { from, to } = highlightedRange;
+  data: lineDataItem[],
+  i: number,
+  highlightedRange: HighlightedRange,
+  startIndex: number,
+  endIndex: number,
+  getX: (i: number) => number,
+  getY: (value: number) => number
+): string => {
+  let path = ''
+  const { from, to } = highlightedRange
   const currentPointRegion =
-    data[i].value < from ? loc.DOWN : data[i].value > to ? loc.UP : loc.IN;
+    data[i].value < from ? loc.DOWN : data[i].value > to ? loc.UP : loc.IN
 
   if (i !== endIndex) {
     const nextPointRegion =
@@ -245,351 +264,354 @@ export const getPathWithHighlight = (
         ? loc.DOWN
         : data[i + 1].value > to
         ? loc.UP
-        : loc.IN;
+        : loc.IN
     if (
       currentPointRegion !== nextPointRegion ||
       (i === startIndex && currentPointRegion === loc.IN)
     ) {
-      const x1 = getX(i),
-        y1 = getY(data[i].value),
-        x2 = getX(i + 1),
-        y2 = getY(data[i + 1].value);
-
-      let m = (y2 - y1) / (x2 - x1),
-        x,
-        y;
+      const x1 = getX(i)
+      const y1 = getY(data[i].value)
+      const x2 = getX(i + 1)
+      const y2 = getY(data[i + 1].value)
+
+      let m = (y2 - y1) / (x2 - x1)
+      let x = 0
+      let y = 0
       if (i === startIndex && currentPointRegion === loc.IN) {
         // If the 1st point lies IN
-        y = y1;
-        x = x1;
+        y = y1
+        x = x1
 
         path +=
-          "L" +
+          'L' +
           x +
-          " " +
+          ' ' +
           y +
-          " " +
+          ' ' +
           RANGE_ENTER +
           JSON.stringify(highlightedRange) +
-          STOP;
+          STOP
 
         if (nextPointRegion === loc.UP) {
-          y = getY(to);
-          x = (y - y1) / m + x1;
+          y = getY(to)
+          x = (y - y1) / m + x1
 
-          path += "L" + x + " " + y + " " + RANGE_EXIT;
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
         } else if (nextPointRegion === loc.DOWN) {
-          y = getY(from);
-          x = (y - y1) / m + x1;
+          y = getY(from)
+          x = (y - y1) / m + x1
 
-          path += "L" + x + " " + y + " " + RANGE_EXIT;
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
         }
       } else if (currentPointRegion !== nextPointRegion) {
         if (currentPointRegion === loc.DOWN && nextPointRegion === loc.UP) {
           // if current point is in DOWN and next point is in UP, then we will add 2 points to the the path
-          y = getY(from);
-          x = (y - y1) / m + x1;
+          y = getY(from)
+          x = (y - y1) / m + x1
 
           path +=
-            "L" +
+            'L' +
             x +
-            " " +
+            ' ' +
             y +
-            " " +
+            ' ' +
             RANGE_ENTER +
             JSON.stringify(highlightedRange) +
-            STOP;
-          y = getY(to);
-          x = (y - y1) / m + x1;
+            STOP
+          y = getY(to)
+          x = (y - y1) / m + x1
 
-          path += "L" + x + " " + y + " " + RANGE_EXIT;
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
         } else if (
           currentPointRegion === loc.UP &&
           nextPointRegion === loc.DOWN
         ) {
           // if current point is in UP and next point is in DOWN, then we will add 2 points to the the path
-          y = getY(to);
-          x = (y - y1) / m + x1;
+          y = getY(to)
+          x = (y - y1) / m + x1
 
           path +=
-            "L" +
+            'L' +
             x +
-            " " +
+            ' ' +
             y +
-            " " +
+            ' ' +
             RANGE_ENTER +
             JSON.stringify(highlightedRange) +
-            STOP;
-          y = getY(from);
-          x = (y - y1) / m + x1;
+            STOP
+          y = getY(from)
+          x = (y - y1) / m + x1
 
-          path += "L" + x + " " + y + " " + RANGE_EXIT;
+          path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
         } else {
           if (
             (currentPointRegion === loc.UP && nextPointRegion === loc.IN) ||
             (currentPointRegion === loc.IN && nextPointRegion === loc.UP)
           ) {
-            y = getY(to);
+            y = getY(to)
           } else if (
             (currentPointRegion === loc.IN && nextPointRegion === loc.DOWN) ||
             (currentPointRegion === loc.DOWN && nextPointRegion === loc.IN)
           ) {
-            y = getY(from);
+            y = getY(from)
           }
-          m = (y2 - y1) / (x2 - x1);
-          x = (y - y1) / m + x1;
+          m = (y2 - y1) / (x2 - x1)
+          x = (y - y1) / m + x1
 
           const prefix =
             nextPointRegion === loc.IN
               ? RANGE_ENTER + JSON.stringify(highlightedRange) + STOP
-              : RANGE_EXIT;
+              : RANGE_EXIT
 
-          path += "L" + x + " " + y + " " + prefix;
+          path += 'L' + x + ' ' + y + ' ' + prefix
         }
       }
     }
   } else if (currentPointRegion === loc.IN) {
     // If the last point lies IN, add RANGE_EXIT
-    path += RANGE_EXIT;
+    path += RANGE_EXIT
   }
 
-  return path;
-};
+  return path
+}
 
 export const getRegionPathObjects = (
-  points,
-  color,
-  currentLineThickness,
-  thickness,
-  strokeDashArray,
-  isCurved,
-  startDelimeter,
-  stop,
-  endDelimeter
-) => {
-  const ar: [any] = [{}];
-  let tempStr = points;
+  points: string,
+  color: ColorValue,
+  currentLineThickness: number,
+  thickness: number,
+  strokeDashArray: number[],
+  isCurved: boolean,
+  startDelimeter: string,
+  stop: string,
+  endDelimeter: string
+): LineProperties[] => {
+  const ar: [LineProperties] = [{ d: '', color: '', strokeWidth: 0 }]
+  let tempStr = points
 
   if (!points.startsWith(startDelimeter)) {
-    /**********************            line upto first segment                 *****************/
+    /** ********************            line upto first segment                 *****************/
 
     const lineSvgProps: LineProperties = {
       d: points.substring(0, points.indexOf(startDelimeter)),
       color,
-      strokeWidth: currentLineThickness || thickness,
-    };
+      strokeWidth: currentLineThickness || thickness
+    }
     if (strokeDashArray) {
-      lineSvgProps.strokeDashArray = strokeDashArray;
+      lineSvgProps.strokeDashArray = strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
   }
 
   while (tempStr.includes(startDelimeter)) {
-    const startDelimeterIndex = tempStr.indexOf(startDelimeter);
-    const stopIndex = tempStr.indexOf(stop);
-    const endDelimeterIndex = tempStr.indexOf(endDelimeter);
+    const startDelimeterIndex = tempStr.indexOf(startDelimeter)
+    const stopIndex = tempStr.indexOf(stop)
+    const endDelimeterIndex = tempStr.indexOf(endDelimeter)
 
     const segmentConfigString = tempStr.substring(
       startDelimeterIndex + startDelimeter.length,
       stopIndex
-    );
+    )
 
-    const segmentConfig = JSON.parse(segmentConfigString);
+    const segmentConfig = JSON.parse(segmentConfigString)
 
-    let segment = tempStr.substring(stopIndex + stop.length, endDelimeterIndex);
+    const segment = tempStr.substring(
+      stopIndex + stop.length,
+      endDelimeterIndex
+    )
 
-    const previousSegment = ar[ar.length - 1].d;
+    const previousSegment = ar[ar.length - 1].d
     const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
       isCurved,
       previousSegment
-    );
+    )
 
-    /**********************            segment line                 *****************/
+    /** ********************            segment line                 *****************/
 
     const lineSvgProps: LineProperties = {
       d: moveToLastPointOfPreviousSegment + segment,
       color: segmentConfig.color ?? color,
       strokeWidth:
-        segmentConfig.thickness ?? (currentLineThickness || thickness),
-    };
+        segmentConfig.thickness ?? (currentLineThickness || thickness)
+    }
     if (segmentConfig.strokeDashArray) {
-      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray;
+      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
 
-    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length);
+    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length)
 
-    const nextDelimiterIndex = tempStr.indexOf(startDelimeter);
-    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
+    const nextDelimiterIndex = tempStr.indexOf(startDelimeter)
+    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex)
 
-    /**********************            line upto the next segment            *****************/
+    /** ********************            line upto the next segment            *****************/
 
     if (
       nextDelimiterIndex !== -1 &&
-      stringUptoNextSegment.indexOf(isCurved ? "C" : "L") !== -1
+      stringUptoNextSegment.includes(isCurved ? 'C' : 'L')
     ) {
-      const previousSegment = ar[ar.length - 1].d;
+      const previousSegment = ar[ar.length - 1].d
       const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
         isCurved,
         previousSegment
-      );
+      )
       const lineSvgProps: LineProperties = {
-        d: moveToLastPointOfPreviousSegment + " " + stringUptoNextSegment,
+        d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
         color,
-        strokeWidth: currentLineThickness || thickness,
-      };
+        strokeWidth: currentLineThickness || thickness
+      }
       if (strokeDashArray) {
-        lineSvgProps.strokeDashArray = strokeDashArray;
+        lineSvgProps.strokeDashArray = strokeDashArray
       }
-      ar.push(lineSvgProps);
+      ar.push(lineSvgProps)
     }
   }
 
-  /**********************            line after the last segment            *****************/
+  /** ********************            line after the last segment            *****************/
 
   if (tempStr.length) {
-    const previousSegment = ar[ar.length - 1].d;
+    const previousSegment = ar[ar.length - 1].d
     const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
       isCurved,
       previousSegment
-    );
+    )
     const lineSvgProps: LineProperties = {
       d: moveToLastPointOfPreviousSegment + tempStr,
       color,
-      strokeWidth: currentLineThickness || thickness,
-    };
+      strokeWidth: currentLineThickness || thickness
+    }
     if (strokeDashArray) {
-      lineSvgProps.strokeDashArray = strokeDashArray;
+      lineSvgProps.strokeDashArray = strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
   }
 
-  ar.shift();
-  return ar;
-};
+  ar.shift()
+  return ar
+}
 
 export const getSegmentedPathObjects = (
-  points,
-  color,
-  currentLineThickness,
-  thickness,
-  strokeDashArray,
-  isCurved,
-  startDelimeter,
-  endDelimeter
-) => {
-  const ar: [any] = [{}];
-  let tempStr = points;
+  points: string,
+  color: ColorValue,
+  currentLineThickness: number,
+  thickness: number,
+  strokeDashArray: number[],
+  isCurved: boolean,
+  startDelimeter: string,
+  endDelimeter: string
+): LineProperties[] => {
+  const ar: [LineProperties] = [{ d: '', color: '', strokeWidth: 0 }]
+  let tempStr = points
 
   if (!points.startsWith(startDelimeter)) {
-    /**********************            line upto first segment                 *****************/
+    /** ********************            line upto first segment                 *****************/
 
     const lineSvgProps: LineProperties = {
       d: points.substring(0, points.indexOf(startDelimeter)),
       color,
-      strokeWidth: currentLineThickness || thickness,
-    };
+      strokeWidth: currentLineThickness || thickness
+    }
     if (strokeDashArray) {
-      lineSvgProps.strokeDashArray = strokeDashArray;
+      lineSvgProps.strokeDashArray = strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
   }
 
   while (tempStr.includes(startDelimeter)) {
-    const startDelimeterIndex = tempStr.indexOf(startDelimeter);
-    const endDelimeterIndex = tempStr.indexOf(endDelimeter);
+    const startDelimeterIndex = tempStr.indexOf(startDelimeter)
+    const endDelimeterIndex = tempStr.indexOf(endDelimeter)
 
     const segmentConfigString = tempStr.substring(
       startDelimeterIndex + startDelimeter.length,
       endDelimeterIndex
-    );
+    )
 
-    const segmentConfig = JSON.parse(segmentConfigString);
+    const segmentConfig = JSON.parse(segmentConfigString)
 
-    const { startIndex, endIndex } = segmentConfig;
-    const segmentLength = endIndex - startIndex;
-    let segment = tempStr.substring(endDelimeterIndex + endDelimeter.length);
-    let c = 0,
-      s = 0,
-      i;
+    const { startIndex, endIndex } = segmentConfig
+    const segmentLength = endIndex - startIndex
+    let segment = tempStr.substring(endDelimeterIndex + endDelimeter.length)
+    let c = 0
+    let s = 0
+    let i
     for (i = 0; i < segment.length; i++) {
-      if (segment[i] === (isCurved ? "C" : "L")) c++;
+      if (segment[i] === (isCurved ? 'C' : 'L')) c++
       if (c === segmentLength) {
-        if (segment[i] === " ") s++;
-        if (s === (isCurved ? 3 : 2)) break;
+        if (segment[i] === ' ') s++
+        if (s === (isCurved ? 3 : 2)) break
       }
     }
-    segment = segment.substring(0, i);
+    segment = segment.substring(0, i)
 
-    const previousSegment = ar[ar.length - 1].d;
+    const previousSegment = ar[ar.length - 1].d
     const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
       isCurved,
       previousSegment
-    );
+    )
 
-    /**********************            segment line                 *****************/
+    /** ********************            segment line                 *****************/
 
     const lineSvgProps: LineProperties = {
       d: moveToLastPointOfPreviousSegment + segment,
       color: segmentConfig.color ?? color,
       strokeWidth:
-        segmentConfig.thickness ?? (currentLineThickness || thickness),
-    };
+        segmentConfig.thickness ?? (currentLineThickness || thickness)
+    }
     if (segmentConfig.strokeDashArray) {
-      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray;
+      lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
 
-    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length + i);
+    tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length + i)
 
-    const nextDelimiterIndex = tempStr.indexOf(startDelimeter);
-    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex);
+    const nextDelimiterIndex = tempStr.indexOf(startDelimeter)
+    const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex)
 
-    /**********************            line upto the next segment            *****************/
+    /** ********************            line upto the next segment            *****************/
 
     if (
       nextDelimiterIndex !== -1 &&
-      stringUptoNextSegment.indexOf(isCurved ? "C" : "L") !== -1
+      stringUptoNextSegment.includes(isCurved ? 'C' : 'L')
     ) {
-      const previousSegment = ar[ar.length - 1].d;
+      const previousSegment = ar[ar.length - 1].d
       const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
         isCurved,
         previousSegment
-      );
+      )
       const lineSvgProps: LineProperties = {
-        d: moveToLastPointOfPreviousSegment + " " + stringUptoNextSegment,
+        d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
         color,
-        strokeWidth: currentLineThickness || thickness,
-      };
+        strokeWidth: currentLineThickness || thickness
+      }
       if (strokeDashArray) {
-        lineSvgProps.strokeDashArray = strokeDashArray;
+        lineSvgProps.strokeDashArray = strokeDashArray
       }
-      ar.push(lineSvgProps);
+      ar.push(lineSvgProps)
     }
   }
 
-  /**********************            line after the last segment            *****************/
+  /** ********************            line after the last segment            *****************/
 
   if (tempStr.length) {
-    const previousSegment = ar[ar.length - 1].d;
+    const previousSegment = ar[ar.length - 1].d
     const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
       isCurved,
       previousSegment
-    );
+    )
     const lineSvgProps: LineProperties = {
       d: moveToLastPointOfPreviousSegment + tempStr,
       color,
-      strokeWidth: currentLineThickness || thickness,
-    };
+      strokeWidth: currentLineThickness || thickness
+    }
     if (strokeDashArray) {
-      lineSvgProps.strokeDashArray = strokeDashArray;
+      lineSvgProps.strokeDashArray = strokeDashArray
     }
-    ar.push(lineSvgProps);
+    ar.push(lineSvgProps)
   }
 
-  ar.shift();
-  return ar;
-};
+  ar.shift()
+  return ar
+}
 
 export const getArrowPoints = (
   arrowTipX: number,
@@ -599,49 +621,55 @@ export const getArrowPoints = (
   arrowLength?: number,
   arrowWidth?: number,
   showArrowBase?: boolean
-) => {
-  let dataLineSlope = (arrowTipY - y1) / (arrowTipX - x1);
-  let d = arrowLength ?? 0;
-  let d2 = (arrowWidth ?? 0) / 2;
-  let interSectionX =
-    arrowTipX - Math.sqrt((d * d) / (dataLineSlope * dataLineSlope + 1));
-  let interSectionY = arrowTipY - dataLineSlope * (arrowTipX - interSectionX);
-
-  let arrowBasex1, arrowBaseY1, arrowBaseX2, arrowBaseY2;
+): string => {
+  const dataLineSlope = (arrowTipY - y1) / (arrowTipX - x1)
+  const d = arrowLength ?? 0
+  const d2 = (arrowWidth ?? 0) / 2
+  const interSectionX =
+    arrowTipX - Math.sqrt((d * d) / (dataLineSlope * dataLineSlope + 1))
+  const interSectionY = arrowTipY - dataLineSlope * (arrowTipX - interSectionX)
+
+  let arrowBasex1, arrowBaseY1, arrowBaseX2, arrowBaseY2
   if (dataLineSlope === 0) {
-    arrowBasex1 = interSectionX;
-    arrowBaseY1 = interSectionY - d2;
-    arrowBaseX2 = interSectionX;
-    arrowBaseY2 = interSectionY + d2;
+    arrowBasex1 = interSectionX
+    arrowBaseY1 = interSectionY - d2
+    arrowBaseX2 = interSectionX
+    arrowBaseY2 = interSectionY + d2
   } else {
-    let arrowBaseSlope = -1 / dataLineSlope;
+    const arrowBaseSlope = -1 / dataLineSlope
     arrowBasex1 =
       interSectionX -
-      Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
-    arrowBaseY1 =
-      interSectionY - arrowBaseSlope * (interSectionX - arrowBasex1);
+      Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1))
+    arrowBaseY1 = interSectionY - arrowBaseSlope * (interSectionX - arrowBasex1)
 
     arrowBaseX2 =
       interSectionX +
-      Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1));
-    arrowBaseY2 =
-      interSectionY + arrowBaseSlope * (interSectionX - arrowBasex1);
+      Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1))
+    arrowBaseY2 = interSectionY + arrowBaseSlope * (interSectionX - arrowBasex1)
   }
-  let arrowPoints = ` M${interSectionX} ${interSectionY}`;
-  arrowPoints += ` ${showArrowBase ? "L" : "M"}${arrowBasex1} ${arrowBaseY1}`;
-  arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
-  arrowPoints += ` M${interSectionX} ${interSectionY}`;
-  arrowPoints += ` ${showArrowBase ? "L" : "M"}${arrowBaseX2} ${arrowBaseY2}`;
-  arrowPoints += ` L${arrowTipX} ${arrowTipY}`;
+  let arrowPoints = ` M${interSectionX} ${interSectionY}`
+  arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBasex1} ${arrowBaseY1}`
+  arrowPoints += ` L${arrowTipX} ${arrowTipY}`
+  arrowPoints += ` M${interSectionX} ${interSectionY}`
+  arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBaseX2} ${arrowBaseY2}`
+  arrowPoints += ` L${arrowTipX} ${arrowTipY}`
+
+  return arrowPoints
+}
 
-  return arrowPoints;
-};
+interface IgetAxesAndRulesProps extends BarChartPropsType {
+  verticalLinesUptoDataPoint?: boolean
+}
 
 export const getAxesAndRulesProps = (
-  props: any,
+  props: extendedBarChartPropsType,
   stepValue: number,
   maxValue?: number
-) => {
+): IgetAxesAndRulesProps => {
+  const secondaryYAxis =
+    !props.secondaryYAxis || props.secondaryYAxis === true
+      ? {}
+      : props.secondaryYAxis
   const axesAndRulesProps = {
     yAxisSide: props.yAxisSide,
     yAxisLabelContainerStyle: props.yAxisLabelContainerStyle,
@@ -686,7 +714,7 @@ export const getAxesAndRulesProps = (
       showReferenceLine3: props.showReferenceLine3,
       referenceLine3Position: props.referenceLine3Position,
       referenceLine3Config: props.referenceLine3Config,
-      referenceLinesOverChartContent: props.referenceLinesOverChartContent,
+      referenceLinesOverChartContent: props.referenceLinesOverChartContent
     },
 
     showVerticalLines: props.showVerticalLines,
@@ -698,223 +726,263 @@ export const getAxesAndRulesProps = (
     verticalLinesSpacing: props.verticalLinesSpacing,
     noOfVerticalLines: props.noOfVerticalLines,
 
-    //specific to Line charts-
+    // specific to Line charts-
     verticalLinesUptoDataPoint: props.verticalLinesUptoDataPoint,
 
     roundToDigits: props.roundToDigits,
     stepValue,
 
     secondaryYAxis: props.secondaryYAxis,
-    formatYLabel: props.formatYLabel,
-  };
+    formatYLabel: props.formatYLabel
+  }
   if (
-    (props.secondaryYAxis || props.lineConfig?.isSecondary) &&
+    (props.secondaryYAxis ?? props.lineConfig?.isSecondary) &&
     maxValue !== undefined
   ) {
-    axesAndRulesProps.secondaryYAxis = { ...props.secondaryYAxis, maxValue };
+    axesAndRulesProps.secondaryYAxis = { ...secondaryYAxis, maxValue }
   }
 
-  return axesAndRulesProps;
-};
+  return axesAndRulesProps
+}
 
 export const getExtendedContainerHeightWithPadding = (
   containerHeight: number,
   overflowTop?: number
-) => containerHeight + (overflowTop ?? 0) + 10;
+): number => containerHeight + (overflowTop ?? 0) + 10
 
 export const getSecondaryDataWithOffsetIncluded = (
-  secondaryData?: any,
-  secondaryYAxis?: any,
+  secondaryData?: barDataItem[] | lineDataItem[],
+  secondaryYAxis?: any | undefined,
   showDataPointsForMissingValues?: boolean,
   interpolateMissingValues?: boolean,
   onlyPositive?: boolean
-) => {
-  if (!secondaryData) return secondaryData;
+): barDataItem[] | lineDataItem[] | undefined => {
+  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;
-    });
+      item.value = item.value - (secondaryYAxis?.yAxisOffset ?? 0)
+      return item
+    })
   }
-  return nullishHandledData;
-};
+  return nullishHandledData
+}
 
 export const getArrowProperty = (
   property: string,
   count: number,
-  props: any,
+  props: extendedLineChartPropsType,
   defaultArrowConfig: arrowConfigType
-) => {
+): any => {
+  const arrowNumber = `arrowConfig${count}` as keyof extendedLineChartPropsType
   return (
-    props[`arrowConfig${count}`]?.[`${property}`] ??
-    props[`arrowConfig`]?.[`${property}`] ??
-    defaultArrowConfig[`${property}`]
-  );
-};
+    props[arrowNumber]?.[property] ??
+    props['arrowConfig' as keyof extendedLineChartPropsType]?.[property] ??
+    defaultArrowConfig[property as keyof arrowConfigType]
+  )
+}
+
+interface IgetAllArrowProperties {
+  arrowLength1: number
+  arrowWidth1: number
+  arrowStrokeWidth1: number
+  arrowStrokeColor1: ColorValue
+  arrowFillColor1: ColorValue
+  showArrowBase1: boolean
+  arrowLength2: number
+  arrowWidth2: number
+  arrowStrokeWidth2: number
+  arrowStrokeColor2: ColorValue
+  arrowFillColor2: ColorValue
+  showArrowBase2: boolean
+  arrowLength3: number
+  arrowWidth3: number
+  arrowStrokeWidth3: number
+  arrowStrokeColor3: ColorValue
+  arrowFillColor3: ColorValue
+  showArrowBase3: boolean
+  arrowLength4: number
+  arrowWidth4: number
+  arrowStrokeWidth4: number
+  arrowStrokeColor4: ColorValue
+  arrowFillColor4: ColorValue
+  showArrowBase4: boolean
+  arrowLength5: number
+  arrowWidth5: number
+  arrowStrokeWidth5: number
+  arrowStrokeColor5: ColorValue
+  arrowFillColor5: ColorValue
+  showArrowBase5: boolean
+  arrowLengthsFromSet?: number[]
+  arrowWidthsFromSet?: number[]
+  arrowStrokeWidthsFromSet?: number[]
+  arrowStrokeColorsFromSet?: ColorValue[]
+  arrowFillColorsFromSet?: ColorValue[]
+  showArrowBasesFromSet?: boolean[]
+}
 
 export const getAllArrowProperties = (
-  props: any,
+  props: extendedLineChartPropsType,
   defaultArrowConfig: arrowConfigType
-) => {
-  const arrowLength1 = getArrowProperty("length", 1, props, defaultArrowConfig);
-  const arrowWidth1 = getArrowProperty("width", 1, props, defaultArrowConfig);
+): IgetAllArrowProperties => {
+  const arrowLength1 = getArrowProperty('length', 1, props, defaultArrowConfig)
+  const arrowWidth1 = getArrowProperty('width', 1, props, defaultArrowConfig)
   const arrowStrokeWidth1 = getArrowProperty(
-    "strokeWidth",
+    'strokeWidth',
     1,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowStrokeColor1 = getArrowProperty(
-    "strokeColor",
+    'strokeColor',
     1,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowFillColor1 = getArrowProperty(
-    "fillColor",
+    'fillColor',
     1,
     props,
     defaultArrowConfig
-  );
+  )
   const showArrowBase1 = getArrowProperty(
-    "showArrowBase",
+    'showArrowBase',
     1,
     props,
     defaultArrowConfig
-  );
+  )
 
-  const arrowLength2 = getArrowProperty("length", 2, props, defaultArrowConfig);
-  const arrowWidth2 = getArrowProperty("width", 2, props, defaultArrowConfig);
+  const arrowLength2 = getArrowProperty('length', 2, props, defaultArrowConfig)
+  const arrowWidth2 = getArrowProperty('width', 2, props, defaultArrowConfig)
   const arrowStrokeWidth2 = getArrowProperty(
-    "strokeWidth",
+    'strokeWidth',
     2,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowStrokeColor2 = getArrowProperty(
-    "strokeColor",
+    'strokeColor',
     2,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowFillColor2 = getArrowProperty(
-    "fillColor",
+    'fillColor',
     2,
     props,
     defaultArrowConfig
-  );
+  )
   const showArrowBase2 = getArrowProperty(
-    "showArrowBase",
+    'showArrowBase',
     2,
     props,
     defaultArrowConfig
-  );
+  )
 
-  const arrowLength3 = getArrowProperty("length", 3, props, defaultArrowConfig);
-  const arrowWidth3 = getArrowProperty("width", 3, props, defaultArrowConfig);
+  const arrowLength3 = getArrowProperty('length', 3, props, defaultArrowConfig)
+  const arrowWidth3 = getArrowProperty('width', 3, props, defaultArrowConfig)
   const arrowStrokeWidth3 = getArrowProperty(
-    "strokeWidth",
+    'strokeWidth',
     3,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowStrokeColor3 = getArrowProperty(
-    "strokeColor",
+    'strokeColor',
     3,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowFillColor3 = getArrowProperty(
-    "fillColor",
+    'fillColor',
     3,
     props,
     defaultArrowConfig
-  );
+  )
   const showArrowBase3 = getArrowProperty(
-    "showArrowBase",
+    'showArrowBase',
     3,
     props,
     defaultArrowConfig
-  );
+  )
 
-  const arrowLength4 = getArrowProperty("length", 4, props, defaultArrowConfig);
-  const arrowWidth4 = getArrowProperty("width", 4, props, defaultArrowConfig);
+  const arrowLength4 = getArrowProperty('length', 4, props, defaultArrowConfig)
+  const arrowWidth4 = getArrowProperty('width', 4, props, defaultArrowConfig)
   const arrowStrokeWidth4 = getArrowProperty(
-    "strokeWidth",
+    'strokeWidth',
     4,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowStrokeColor4 = getArrowProperty(
-    "strokeColor",
+    'strokeColor',
     4,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowFillColor4 = getArrowProperty(
-    "fillColor",
+    'fillColor',
     4,
     props,
     defaultArrowConfig
-  );
+  )
   const showArrowBase4 = getArrowProperty(
-    "showArrowBase",
+    'showArrowBase',
     4,
     props,
     defaultArrowConfig
-  );
+  )
 
-  const arrowLength5 = getArrowProperty("length", 5, props, defaultArrowConfig);
-  const arrowWidth5 = getArrowProperty("width", 5, props, defaultArrowConfig);
+  const arrowLength5 = getArrowProperty('length', 5, props, defaultArrowConfig)
+  const arrowWidth5 = getArrowProperty('width', 5, props, defaultArrowConfig)
   const arrowStrokeWidth5 = getArrowProperty(
-    "strokeWidth",
+    'strokeWidth',
     5,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowStrokeColor5 = getArrowProperty(
-    "strokeColor",
+    'strokeColor',
     5,
     props,
     defaultArrowConfig
-  );
+  )
   const arrowFillColor5 = getArrowProperty(
-    "fillColor",
+    'fillColor',
     5,
     props,
     defaultArrowConfig
-  );
+  )
   const showArrowBase5 = getArrowProperty(
-    "showArrowBase",
+    'showArrowBase',
     5,
     props,
     defaultArrowConfig
-  );
+  )
 
   const arrowLengthsFromSet = props.dataSet?.map(
     (item) => item?.arrowConfig?.length ?? arrowLength1
-  );
+  )
   const arrowWidthsFromSet = props.dataSet?.map(
-    (item) => item?.arrowConfig?.arrowWidth ?? arrowWidth1
-  );
+    (item) => item?.arrowConfig?.width ?? arrowWidth1
+  )
   const arrowStrokeWidthsFromSet = props.dataSet?.map(
-    (item) => item?.arrowConfig?.arrowStrokeWidth ?? arrowStrokeWidth1
-  );
+    (item) => item?.arrowConfig?.strokeWidth ?? arrowStrokeWidth1
+  )
   const arrowStrokeColorsFromSet = props.dataSet?.map(
-    (item) => item?.arrowConfig?.arrowStrokeColor ?? arrowStrokeColor1
-  );
+    (item) => item?.arrowConfig?.strokeColor ?? arrowStrokeColor1
+  )
   const arrowFillColorsFromSet = props.dataSet?.map(
-    (item) => item?.arrowConfig?.arrowFillColor ?? arrowFillColor1
-  );
+    (item) => item?.arrowConfig?.fillColor ?? arrowFillColor1
+  )
   const showArrowBasesFromSet = props.dataSet?.map(
     (item) => item?.arrowConfig?.showArrowBase ?? showArrowBase1
-  );
+  )
 
   return {
     arrowLength1,
@@ -952,14 +1020,14 @@ export const getAllArrowProperties = (
     arrowStrokeWidthsFromSet,
     arrowStrokeColorsFromSet,
     arrowFillColorsFromSet,
-    showArrowBasesFromSet,
-  };
-};
+    showArrowBasesFromSet
+  }
+}
 
-type MaxAndMin = {
-  maxItem: number;
-  minItem: number;
-};
+interface MaxAndMin {
+  maxItem: number
+  minItem: number
+}
 
 export const maxAndMinUtil = (
   maxItem: number,
@@ -967,81 +1035,78 @@ export const maxAndMinUtil = (
   roundToDigits?: number,
   showFractionalValues?: boolean
 ): MaxAndMin => {
-  if (showFractionalValues || roundToDigits) {
-    maxItem *= 10 * (roundToDigits || 1);
-    maxItem = maxItem + (10 - (maxItem % 10));
-    maxItem /= 10 * (roundToDigits || 1);
-    maxItem = parseFloat(maxItem.toFixed(roundToDigits || 1));
+  if (showFractionalValues ?? roundToDigits) {
+    maxItem *= 10 * (roundToDigits ?? 1)
+    maxItem = maxItem + (10 - (maxItem % 10))
+    maxItem /= 10 * (roundToDigits ?? 1)
+    maxItem = parseFloat(maxItem.toFixed(roundToDigits ?? 1))
 
     if (minItem !== 0) {
-      minItem *= 10 * (roundToDigits || 1);
-      minItem = minItem - (10 + (minItem % 10));
-      minItem /= 10 * (roundToDigits || 1);
-      minItem = parseFloat(minItem.toFixed(roundToDigits || 1));
+      minItem *= 10 * (roundToDigits ?? 1)
+      minItem = minItem - (10 + (minItem % 10))
+      minItem /= 10 * (roundToDigits ?? 1)
+      minItem = parseFloat(minItem.toFixed(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))
     }
   }
 
-  return { maxItem, minItem };
-};
+  return { maxItem, minItem }
+}
 
 export const computeMaxAndMinItems = (
-  data: any,
+  data: any[] | undefined,
   roundToDigits?: number,
   showFractionalValues?: boolean
 ): MaxAndMin => {
   if (!data?.length) {
-    return { maxItem: 0, minItem: 0 };
+    return { maxItem: 0, minItem: 0 }
   }
-  let maxItem = 0,
-    minItem = 0;
+  let maxItem = 0
+  let minItem = 0
 
   data.forEach((item: any) => {
     if (item.value > maxItem) {
-      maxItem = item.value;
+      maxItem = item.value
     }
     if (item.value < minItem) {
-      minItem = item.value;
+      minItem = item.value
     }
-  });
+  })
 
-  return maxAndMinUtil(maxItem, minItem, roundToDigits, showFractionalValues);
-};
+  return maxAndMinUtil(maxItem, minItem, roundToDigits, showFractionalValues)
+}
 
 export const getLabelTextUtil = (
-  val: any,
+  val: string,
   index: number,
   showFractionalValues?: boolean,
-  yAxisLabelTexts?: Array<string>,
+  yAxisLabelTexts?: string[],
   yAxisOffset?: number,
   yAxisLabelPrefix?: string,
   yAxisLabelSuffix?: string,
   roundToDigits?: number,
   formatYLabel?: (label: string) => string
-) => {
-  let label = "";
-  if (
-    showFractionalValues ||
-    (yAxisLabelTexts && yAxisLabelTexts[index] !== undefined)
-  ) {
-    if (yAxisLabelTexts?.[index]) return val;
+): string => {
+  let label = ''
+  if (showFractionalValues ?? yAxisLabelTexts?.[index] !== undefined) {
+    if (yAxisLabelTexts?.[index]) return val
     if (val) {
       label = isNaN(Number(val))
         ? val
-        : (Number(val) + (yAxisOffset ?? 0)).toFixed(roundToDigits);
+        : (Number(val) + (yAxisOffset ?? 0)).toFixed(roundToDigits)
     } else {
-      label = yAxisOffset?.toString() ?? "0";
+      label = yAxisOffset?.toString() ?? '0'
     }
   } else {
     if (val) {
-      label = val.toString().split(".")[0];
-      label = (Number(label) + (yAxisOffset ?? 0)).toString();
+      label = val.toString().split('.')[0]
+      label = (Number(label) + (yAxisOffset ?? 0)).toString()
     } else {
-      label = yAxisOffset?.toString() ?? "0";
+      label = yAxisOffset?.toString() ?? '0'
     }
   }
 
@@ -1049,8 +1114,8 @@ export const getLabelTextUtil = (
     yAxisLabelPrefix +
     (formatYLabel ? formatYLabel(label) : label) +
     yAxisLabelSuffix
-  );
-};
+  )
+}
 
 export const getXForLineInBar = (
   index: number,
@@ -1059,75 +1124,84 @@ export const getXForLineInBar = (
   yAxisLabelWidth: number,
   lineConfig: any,
   spacing: number
-) =>
+): number =>
   yAxisLabelWidth +
   firstBarWidth / 2 +
   lineConfig.initialSpacing +
   (currentBarWidth + (lineConfig.spacing ?? spacing)) * index +
   lineConfig.shiftX -
   lineConfig.dataPointsWidth / 2 -
-  4;
+  4
 
-export const getYForLineInBar = (value, shiftY, containerHeight, maxValue) =>
-  containerHeight - shiftY - (value * containerHeight) / maxValue;
+export const getYForLineInBar = (
+  value: number | undefined,
+  shiftY: number | undefined,
+  containerHeight: number,
+  maxValue: number
+): number =>
+  containerHeight - (shiftY ?? 0) - ((value ?? 0) * containerHeight) / maxValue
 
-export const clone = (obj) => {
-  if (obj === null || typeof obj !== "object" || "isActiveClone" in obj)
-    return obj;
+export const clone = (obj: any): any => {
+  if (obj === null || typeof obj !== 'object' || 'isActiveClone' in obj) {
+    return obj
+  }
 
-  let temp;
-  if (obj instanceof Date) temp = new Date(obj);
-  else temp = obj.constructor();
+  let temp
+  if (obj instanceof Date) temp = new Date(obj)
+  else temp = obj.constructor()
 
-  for (let key in obj) {
+  for (const key in obj) {
     if (Object.prototype.hasOwnProperty.call(obj, key)) {
-      obj["isActiveClone"] = null;
-      temp[key] = clone(obj[key]);
-      delete obj["isActiveClone"];
+      obj.isActiveClone = null
+      temp[key] = clone(obj[key])
+      delete obj.isActiveClone
     }
   }
-  return temp;
-};
+  return temp
+}
 
-export const getLineConfigForBarChart = (lineConfig, barInitialSpacing) => {
+export const getLineConfigForBarChart = (
+  lineConfig: lineConfigType,
+  barInitialSpacing: number
+): lineConfigType => {
   return {
     initialSpacing:
       lineConfig.initialSpacing ??
       barInitialSpacing ??
       defaultLineConfig.initialSpacing,
     spacing: lineConfig.spacing,
-    curved: lineConfig.curved || defaultLineConfig.curved,
+    curved: lineConfig.curved ?? defaultLineConfig.curved,
     curvature: lineConfig.curvature ?? defaultLineConfig.curvature,
     curveType: lineConfig.curveType ?? defaultLineConfig.curveType,
-    isAnimated: lineConfig.isAnimated || defaultLineConfig.isAnimated,
+    isAnimated: lineConfig.isAnimated ?? defaultLineConfig.isAnimated,
     animationDuration:
-      lineConfig.animationDuration || defaultLineConfig.animationDuration,
-    thickness: lineConfig.thickness || defaultLineConfig.thickness,
-    color: lineConfig.color || defaultLineConfig.color,
+      lineConfig.animationDuration ?? defaultLineConfig.animationDuration,
+    thickness: lineConfig.thickness ?? defaultLineConfig.thickness,
+    color: lineConfig.color ?? defaultLineConfig.color,
     hideDataPoints:
-      lineConfig.hideDataPoints || defaultLineConfig.hideDataPoints,
+      lineConfig.hideDataPoints ?? defaultLineConfig.hideDataPoints,
     dataPointsShape:
-      lineConfig.dataPointsShape || defaultLineConfig.dataPointsShape,
+      lineConfig.dataPointsShape ?? defaultLineConfig.dataPointsShape,
     dataPointsHeight:
-      lineConfig.dataPointsHeight || defaultLineConfig.dataPointsHeight,
+      lineConfig.dataPointsHeight ?? defaultLineConfig.dataPointsHeight,
     dataPointsWidth:
-      lineConfig.dataPointsWidth || defaultLineConfig.dataPointsWidth,
+      lineConfig.dataPointsWidth ?? defaultLineConfig.dataPointsWidth,
     dataPointsColor:
-      lineConfig.dataPointsColor || defaultLineConfig.dataPointsColor,
+      lineConfig.dataPointsColor ?? defaultLineConfig.dataPointsColor,
     dataPointsRadius:
-      lineConfig.dataPointsRadius || defaultLineConfig.dataPointsRadius,
-    textColor: lineConfig.textColor || defaultLineConfig.textColor,
-    textFontSize: lineConfig.textFontSize || defaultLineConfig.textFontSize,
-    textShiftX: lineConfig.textShiftX || defaultLineConfig.textShiftX,
-    textShiftY: lineConfig.textShiftY || defaultLineConfig.textShiftY,
-    shiftX: lineConfig.shiftX || defaultLineConfig.shiftX,
-    shiftY: lineConfig.shiftY || defaultLineConfig.shiftY,
-    delay: lineConfig.delay || defaultLineConfig.delay,
-    startIndex: lineConfig.startIndex || defaultLineConfig.startIndex,
+      lineConfig.dataPointsRadius ?? defaultLineConfig.dataPointsRadius,
+    textColor: lineConfig.textColor ?? defaultLineConfig.textColor,
+    textFontSize: lineConfig.textFontSize ?? defaultLineConfig.textFontSize,
+    textShiftX: lineConfig.textShiftX ?? defaultLineConfig.textShiftX,
+    textShiftY: lineConfig.textShiftY ?? defaultLineConfig.textShiftY,
+    shiftX: lineConfig.shiftX ?? defaultLineConfig.shiftX,
+    shiftY: lineConfig.shiftY ?? defaultLineConfig.shiftY,
+    delay: lineConfig.delay ?? defaultLineConfig.delay,
+    startIndex: lineConfig.startIndex ?? defaultLineConfig.startIndex,
     endIndex:
       lineConfig.endIndex === 0
         ? 0
-        : lineConfig.endIndex || defaultLineConfig.endIndex,
+        : lineConfig.endIndex ?? defaultLineConfig.endIndex,
 
     showArrow: lineConfig.showArrow ?? defaultLineConfig.showArrow,
     arrowConfig: {
@@ -1150,79 +1224,87 @@ export const getLineConfigForBarChart = (lineConfig, barInitialSpacing) => {
 
       showArrowBase:
         lineConfig.arrowConfig?.showArrowBase ??
-        defaultLineConfig.arrowConfig?.showArrowBase,
+        defaultLineConfig.arrowConfig?.showArrowBase
     },
     customDataPoint: lineConfig.customDataPoint,
-    isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
-  };
-};
+    isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary
+  }
+}
 
-export const getNoOfSections = (noOfSections, maxValue, stepValue) =>
+export const getNoOfSections = (
+  noOfSections: number | undefined,
+  maxValue: number | undefined,
+  stepValue: number | undefined
+): number =>
   maxValue && stepValue
     ? maxValue / stepValue
-    : noOfSections ?? AxesAndRulesDefaults.noOfSections;
+    : noOfSections ?? AxesAndRulesDefaults.noOfSections
 
-export const getMaxValue = (maxValue, stepValue, noOfSections, maxItem) =>
-  maxValue ?? (stepValue ? stepValue * noOfSections : maxItem);
+export const getMaxValue = (
+  maxValue: number | undefined,
+  stepValue: number | undefined,
+  noOfSections: number,
+  maxItem: number
+): number => maxValue ?? (stepValue ? stepValue * noOfSections : maxItem)
 
 export const getBarFrontColor = (
-  isFocused,
-  focusedBarConfig,
-  itemFrontColor,
-  frontColor,
-  isThreeD
-) => {
+  isFocused?: boolean,
+  focusedBarConfig?: FocusedBarConfig,
+  itemFrontColor?: ColorValue,
+  frontColor?: ColorValue,
+  isThreeD?: boolean
+): ColorValue => {
   if (isFocused) {
     return (
       focusedBarConfig?.color ??
       (isThreeD
         ? BarDefaults.focusedThreeDBarFrontColor
         : BarDefaults.focusedBarFrontColor)
-    );
+    )
   }
   return (
-    itemFrontColor ||
-    frontColor ||
+    itemFrontColor ??
+    frontColor ??
     (isThreeD ? BarDefaults.threeDBarFrontColor : BarDefaults.frontColor)
-  );
-};
+  )
+}
 
 export const getBarSideColor = (
-  isFocused,
-  focusedBarConfig,
-  itemSideColor,
-  sideColor
-) => {
+  isFocused?: boolean,
+  focusedBarConfig?: FocusedBarConfig,
+  itemSideColor?: ColorValue,
+  sideColor?: ColorValue
+): ColorValue | undefined => {
   if (isFocused) {
-    return focusedBarConfig?.sideColor ?? BarDefaults.focusedBarSideColor;
+    return focusedBarConfig?.sideColor ?? BarDefaults.focusedBarSideColor
   }
-  return itemSideColor || sideColor;
-};
+  return itemSideColor ?? sideColor
+}
 
 export const getBarTopColor = (
-  isFocused,
-  focusedBarConfig,
-  itemTopColor,
-  topColor
-) => {
+  isFocused?: boolean,
+  focusedBarConfig?: FocusedBarConfig,
+  itemTopColor?: ColorValue,
+  topColor?: ColorValue
+): ColorValue | undefined => {
   if (isFocused) {
-    return focusedBarConfig?.topColor ?? BarDefaults.focusedBarTopColor;
+    return focusedBarConfig?.topColor ?? BarDefaults.focusedBarTopColor
   }
-  return itemTopColor || topColor;
-};
+  return itemTopColor ?? topColor
+}
 
 export const getBarWidth = (
-  isFocused,
-  focusedBarConfig,
-  itemBarWidth,
-  barWidth
-) => {
-  const localBarWidth = itemBarWidth || barWidth || BarDefaults.barWidth;
+  isFocused?: boolean,
+  focusedBarConfig?: FocusedBarConfig,
+  itemBarWidth?: number,
+  barWidth?: number
+): number => {
+  const localBarWidth = itemBarWidth ?? barWidth ?? BarDefaults.barWidth
   if (isFocused) {
-    return focusedBarConfig?.width ?? localBarWidth;
+    return focusedBarConfig?.width ?? localBarWidth
   }
-  return localBarWidth;
-};
+  return localBarWidth
+}
 
 export const getInterpolatedData = (
   dataParam: lineDataItem[],
@@ -1232,43 +1314,43 @@ export const getInterpolatedData = (
 ): lineDataItem[] => {
   if (!interpolateMissingValues) {
     return dataParam.map((item) => {
-      if (typeof item.value !== "number") {
-        if (showDataPointsForMissingValues) return { ...item, value: 0 };
-        return { ...item, value: 0, hideDataPoint: true };
+      if (typeof item.value !== 'number') {
+        if (showDataPointsForMissingValues) return { ...item, value: 0 }
+        return { ...item, value: 0, hideDataPoint: true }
       }
-      return item;
-    });
+      return item
+    })
   }
-  if (!interpolateMissingValues) return dataParam;
-  const data = clone(dataParam);
-  const n = data.length;
+  if (!interpolateMissingValues) return dataParam
+  const data: lineDataItem[] = clone(dataParam)
+  const n = data.length
 
-  /**************         PRE-PROCESSING           **************/
-  let numericValue;
+  /** ************         PRE-PROCESSING           **************/
+  let numericValue: number
   const numericValuesLength = data.filter((item) => {
-    const isNum = typeof item.value === "number";
+    const isNum = typeof item.value === 'number'
     if (isNum) {
-      numericValue = item.value;
-      return true;
+      numericValue = item.value
+      return true
     }
-    return false;
-  }).length;
+    return false
+  }).length
 
-  if (!numericValuesLength) return [];
+  if (!numericValuesLength) return []
 
   if (numericValuesLength === 1) {
     data.forEach((item) => {
-      if (!showDataPointsForMissingValues && typeof item.value !== "number") {
-        item.hideDataPoint = true;
+      if (!showDataPointsForMissingValues && typeof item.value !== 'number') {
+        item.hideDataPoint = true
       }
-      item.value = numericValue;
-    });
-    return data;
+      item.value = numericValue
+    })
+    return data
   }
   /**********************************************************************/
 
   data.forEach((item, index) => {
-    if (typeof item.value === "number") return;
+    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
@@ -1276,133 +1358,135 @@ export const getInterpolatedData = (
     //    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 pre: lineDataItem[] = data.slice(0, index)
+    const post: lineDataItem[] = data.slice(index + 1, n)
 
     const preValidIndex = pre.findLastIndex(
-      (item) => typeof item.value === "number"
-    );
+      (item) => typeof item.value === 'number'
+    )
     const postValidInd = post.findIndex(
-      (item) => typeof item.value === "number"
-    );
-    const postValidIndex = postValidInd + index + 1;
+      (item) => typeof item.value === 'number'
+    )
+    const postValidIndex = postValidInd + index + 1
 
-    let count, step;
+    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;
+      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) {
+        data[preValidIndex].value + step * (index - preValidIndex)
+    } else if (preValidIndex !== -1 && postValidInd === -1) {
+      //    2. Only pre has valid value
       //  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 secondPre: lineDataItem[] = data.slice(0, preValidIndex)
       const secondPreIndex = secondPre.findLastIndex(
-        (item) => typeof item.value === "number"
-      );
+        (item) => typeof item.value === 'number'
+      )
 
-      count = preValidIndex - secondPreIndex;
-      step = (data[secondPreIndex].value - data[preValidIndex].value) / count;
+      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) {
+        data[preValidIndex].value - step * (index - preValidIndex)
+    } else if (preValidIndex === -1 && postValidInd !== -1) {
+      //    3. Only post has valid value
       //  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 secondPost: lineDataItem[] = data.slice(postValidIndex + 1, n)
       const secondPostInd = secondPost.findIndex(
-        (item) => typeof item.value === "number"
-      );
-      const secondPostIndex = secondPostInd + postValidIndex + 1;
+        (item) => typeof item.value === 'number'
+      )
+      const secondPostIndex = secondPostInd + postValidIndex + 1
 
-      count = secondPostIndex - postValidIndex;
-      step = (data[secondPostIndex].value - data[postValidIndex].value) / count;
+      count = secondPostIndex - postValidIndex
+      step = (data[secondPostIndex].value - data[postValidIndex].value) / count
       data[index].value =
-        data[postValidIndex].value - step * (postValidIndex - index);
+        data[postValidIndex].value - step * (postValidIndex - index)
     }
 
     // hide data point (since it is interpolated)
     if (!showDataPointsForMissingValues) {
-      item.hideDataPoint = true;
+      item.hideDataPoint = true
     }
-  });
+  })
   return onlyPositive
     ? data.map((item) => ({ ...item, value: Math.max(item.value, 0) }))
-    : data;
-};
+    : data
+}
 
 export const getLineSegmentsForMissingValues = (
   data?: lineDataItem[]
 ): LineSegment[] | undefined => {
-  if (!data?.length) return undefined;
-  let i,
-    n = data.length;
+  if (!data?.length) return undefined
+  let i
+  const n = data.length
   const numericValuesLength = data.filter(
-    (item) => typeof item.value === "number"
-  ).length;
-  if (!numericValuesLength) return undefined;
-  const segments: LineSegment[] = [];
+    (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
+    if (typeof data[i].value !== 'number') {
+      const nextValidInd: number = data
         .slice(i + 1, n)
-        .findIndex((item) => typeof item.value === "number");
+        .findIndex((item) => typeof item.value === 'number')
       if (nextValidInd === -1) {
         segments.push({
           startIndex: Math.max(i - 1, 0),
           endIndex: n,
-          color: "transparent",
-        });
-        break;
+          color: 'transparent'
+        })
+        break
       }
-      const nextValidIndex = nextValidInd + i + 1;
+      const nextValidIndex: number = nextValidInd + i + 1
       segments.push({
         startIndex: Math.max(i - 1, 0),
         endIndex: nextValidIndex,
-        color: "transparent",
-      });
-      i = nextValidIndex;
+        color: 'transparent'
+      })
+      i = nextValidIndex
     }
   }
-  return segments;
-};
+  return segments
+}
 
 export const getTextSizeForPieLabels = (
   textSize: number,
   radius: number
-): number => (textSize ? Math.min(textSize, radius / 5) : 16);
+): number => (textSize ? Math.min(textSize, radius / 5) : 16)
 
-export const adjustToOffset = (data, yAxisOffset) =>
-  data.map((item) => ({ ...item, value: item.value - (yAxisOffset ?? 0) }));
+export const adjustToOffset = (
+  data: lineDataItem[],
+  yAxisOffset?: number
+): lineDataItem[] =>
+  data.map((item) => ({ ...item, value: item.value - (yAxisOffset ?? 0) }))
 
-export const getSanitisedData = (data, dataSanitisationProps) => {
+export const getSanitisedData = (
+  data: lineDataItem[] | undefined,
+  dataSanitisationProps: IDataSanitisationProps
+): lineDataItem[] => {
   if (!data) {
-    return [];
+    return []
   }
   const {
     showDataPointsForMissingValues,
     interpolateMissingValues,
     onlyPositive,
-    yAxisOffset,
-  } = dataSanitisationProps;
+    yAxisOffset
+  } = dataSanitisationProps
   const nullishHandledData = getInterpolatedData(
     data,
     showDataPointsForMissingValues,
     interpolateMissingValues,
     onlyPositive
-  );
+  )
   if (yAxisOffset) {
-    return adjustToOffset(nullishHandledData, yAxisOffset);
+    return adjustToOffset(nullishHandledData, yAxisOffset)
   }
-  return nullishHandledData;
-};
+  return nullishHandledData
+}