react-native-gifted-charts 1.3.33 → 1.4.0

package/src/LineChart/LineChartBicolor.tsx

@@ -1,12 +1,5 @@
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  useRef,
-} from 'react';
-import {View, Animated, Easing, Text, ColorValue} from 'react-native';
+import React, {Fragment, useCallback, useEffect, useMemo, useRef} from 'react';
+import {View, Animated, Easing, Text} from 'react-native';
 import {styles} from './styles';
 import Svg, {
   Path,
@@ -18,97 +11,76 @@ import Svg, {
 } from 'react-native-svg';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import {
-  getAxesAndRulesProps,
-  getExtendedContainerHeightWithPadding,
-} from '../utils';
-import {
-  AxesAndRulesDefaults,
-  LineDefaults,
-  chartTypes,
-  yAxisSides,
-} from '../utils/constants';
-import {BarAndLineChartsWrapperTypes, RuleType} from '../utils/types';
-import { LineChartBicolorPropsType, bicolorLineDataItem } from './types';
-
-let initialData: Array<bicolorLineDataItem> | null = null;
-
-type Points = {
-  points: string;
-  color: string;
-};
+  LineChartBicolorPropsType,
+  bicolorLineDataItem,
+  useLineChartBiColor,
+} from 'gifted-charts-core';
 
 export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
   const scrollRef = useRef();
-  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(() => {
-    if (!props.data) {
-      return [];
-    }
-    if (props.yAxisOffset) {
-      return props.data.map(item => {
-        item.value = item.value - (props.yAxisOffset ?? 0);
-        return item;
-      });
-    }
-    return props.data;
-  }, [props.yAxisOffset, props.data]);
-
-  const scrollToEnd = props.scrollToEnd ?? LineDefaults.scrollToEnd;
-  const scrollAnimation = props.scrollAnimation ?? LineDefaults.scrollAnimation;
-  const scrollEventThrottle =
-    props.scrollEventThrottle ?? LineDefaults.scrollEventThrottle;
-
   const opacValue = useMemo(() => new Animated.Value(0), []);
   const widthValue = useMemo(() => new Animated.Value(0), []);
-  const labelsExtraHeight = props.labelsExtraHeight || 0;
-
-  const animationDuration =
-    props.animationDuration || LineDefaults.animationDuration;
-
-  const startIndex1 = props.startIndex || 0;
-
-  let endIndex1;
-  if (props.endIndex === undefined || props.endIndex === null) {
-    endIndex1 = data.length - 1;
-  } else {
-    endIndex1 = props.endIndex;
-  }
-
-  if (!initialData) {
-    initialData = [...data];
-  }
-
-  const adjustToWidth = props.adjustToWidth || false;
-
-  const initialSpacing = props.initialSpacing ?? LineDefaults.initialSpacing;
-  const endSpacing =
-    props.endSpacing ?? (adjustToWidth ? 0 : LineDefaults.endSpacing);
-  const thickness = props.thickness || LineDefaults.thickness;
-
-  const spacing =
-    props.spacing ??
-    (adjustToWidth
-      ? ((props.width || AxesAndRulesDefaults.width) - initialSpacing) /
-        data.length
-      : LineDefaults.spacing);
 
-  const xAxisThickness =
-    props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness;
-  const dataPointsHeight1 =
-    props.dataPointsHeight ?? LineDefaults.dataPointsHeight;
-  const dataPointsWidth1 =
-    props.dataPointsWidth ?? LineDefaults.dataPointsWidth;
-  const dataPointsRadius1 =
-    props.dataPointsRadius ?? LineDefaults.dataPointsRadius;
-  const dataPointsColor1 =
-    props.dataPointsColor ?? LineDefaults.dataPointsColor;
-  const dataPointsShape1 =
-    props.dataPointsShape ?? LineDefaults.dataPointsShape;
+  const {
+    pointsArray,
+    fillPointsArray,
+    selectedIndex,
+    setSelectedIndex,
+    containerHeight,
+    data,
+    labelsExtraHeight,
+    animationDuration,
+    startIndex1,
+    endIndex1,
+    initialSpacing,
+    thickness,
+    spacing,
+    xAxisThickness,
+    dataPointsHeight1,
+    dataPointsWidth1,
+    dataPointsRadius1,
+    dataPointsColor1,
+    dataPointsShape1,
+    areaChart,
+    textFontSize1,
+    textColor1,
+    totalWidth,
+    maxValue,
+    extendedContainerHeight,
+    getX,
+    getY,
+    stepHeight,
+    noOfSectionsBelowXAxis,
+    thickness1,
+    zIndex,
+    strokeDashArray1,
+    rotateLabel,
+    isAnimated,
+    hideDataPoints1,
+    color,
+    colorNegative,
+    startFillColor,
+    endFillColor,
+    startOpacity,
+    endOpacity,
+    startFillColorNegative,
+    endFillColorNegative,
+    startOpacityNegative,
+    endOpacityNegative,
+    gradientDirection,
+    xAxisTextNumberOfLines,
+    focusEnabled,
+    showDataPointOnFocus,
+    showStripOnFocus,
+    showTextOnFocus,
+    stripHeight,
+    stripWidth,
+    stripColor,
+    stripOpacity,
+    unFocusOnPressOut,
+    delayBeforeUnFocus,
+    barAndLineChartsWrapperProps,
+  } = useLineChartBiColor(props);
 
   const labelsAppear = useCallback(() => {
     opacValue.setValue(0);
@@ -135,355 +107,11 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
     }).start();
   }, [animationDuration, widthValue]);
 
-  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;
-  data.forEach((item: bicolorLineDataItem) => {
-    if (item.value > maxItem) {
-      maxItem = item.value;
-    }
-    if (item.value < minItem) {
-      minItem = item.value;
-    }
-    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 (minItem !== 0) {
-      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));
-    if (minItem !== 0) {
-      minItem = minItem - (10 + (minItem % 10));
-    }
-  }
-
-  const maxValue = props.maxValue || maxItem;
-  const mostNegativeValue = props.mostNegativeValue || minItem;
-
   useEffect(() => {
     decreaseWidth();
     labelsAppear();
   }, [animationDuration, decreaseWidth, labelsAppear]);
 
-  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;
-
-  useEffect(() => {
-    let ppArray: Array<Points> = [];
-    let pp = 'M' + initialSpacing + ' ' + getY(0),
-      prevValuev,
-      nextValue;
-    for (let i = 0; i < data.length - 1; i++) {
-      prevValuev = data[i].value;
-      nextValue = data[i + 1].value;
-
-      if (prevValuev < 0 && nextValue < 0) {
-        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 + ' ';
-
-        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 + ' ';
-        pointsOb = {
-          points: pp,
-          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);
-
-        let 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 + ' ';
-        pointsOb = {
-          points: pp,
-          color: 'red',
-        };
-        ppArray.push(pointsOb);
-      } else {
-        pp += 'L' + getX(i) + ' ' + getY(i) + ' ';
-      }
-    }
-    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) + ' ';
-    }
-    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;
-    for (i = 0; i < data.length - 1; 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;
-      }
-    }
-    if (!broken) {
-      i = data.length - 1;
-      pp +=
-        'L' +
-        getX(i) +
-        ' ' +
-        getY(i) +
-        ' L' +
-        getX(i) +
-        ' ' +
-        (yAtxAxis - xAxisThickness / 2);
-    }
-    localArray.push({points: pp, color: data[0].value >= 0 ? 'green' : 'red'});
-
-    let xs: Array<string> = [];
-    data.forEach((item, index) => {
-      let x = getX(index);
-      xs.push(x + '');
-    });
-
-    pointsArray.forEach((item: any, index) => {
-      let splitArray = item.points
-        .split(' ')
-        .filter(spItem => spItem && spItem !== ' ');
-
-      if (
-        splitArray[1] === yAtxAxis + '' &&
-        !xs.includes(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', '');
-          if (Number(startY) < Number(endY)) {
-            color = 'red';
-          } else {
-            color = 'green';
-          }
-        }
-      }
-      if (
-        splitArray[splitArray.length - 1] === yAtxAxis + '' &&
-        !xs.includes(
-          splitArray[splitArray.length - 2].replace('M', '').replace('L', ''),
-        )
-      ) {
-        endIndex = index;
-      }
-      if (startX) {
-        let filPts = '';
-        for (let j = startIndex; j <= endIndex; j++) {
-          if (pointsArray[j]) {
-            filPts += pointsArray[j].points.replaceAll('M', 'L');
-          }
-        }
-        filPts += 'L ' + startX + ' ' + yAtxAxis;
-        localArray.push({points: filPts.replace('L', 'M'), color});
-      }
-    });
-    if (broken) {
-      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) + ' ';
-        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;
-        }
-      }
-
-      localArray.push({
-        points: pp,
-        color: data[data.length - 1].value > 0 ? 'green' : 'red',
-      });
-    }
-
-    setFillPointsArray([...localArray]);
-    setToggle(true);
-  }, [
-    areaChart,
-    containerHeight,
-    data,
-    dataPointsWidth1,
-    initialSpacing,
-    spacing,
-    xAxisThickness,
-    toggle,
-    maxValue,
-  ]);
-
-  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;
-
-  const strokeDashArray1 = props.strokeDashArray;
-
-  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 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;
-  const endOpacityNegative =
-    props.endOpacityNegative ?? LineDefaults.endOpacity;
-
-  const gradientDirection = props.gradientDirection || 'vertical';
-
-  const showXAxisIndices =
-    props.showXAxisIndices ?? AxesAndRulesDefaults.showXAxisIndices;
-  const xAxisIndicesHeight =
-    props.xAxisIndicesHeight ?? AxesAndRulesDefaults.xAxisIndicesHeight;
-  const xAxisIndicesWidth =
-    props.xAxisIndicesWidth ?? AxesAndRulesDefaults.xAxisIndicesWidth;
-  const xAxisIndicesColor =
-    props.xAxisIndicesColor ?? AxesAndRulesDefaults.xAxisIndicesColor;
-
-  const xAxisTextNumberOfLines =
-    props.xAxisTextNumberOfLines ?? AxesAndRulesDefaults.xAxisTextNumberOfLines;
-  const horizontalRulesStyle = props.horizontalRulesStyle;
-  const showFractionalValues =
-    props.showFractionalValues ?? AxesAndRulesDefaults.showFractionalValues;
-  const yAxisLabelWidth =
-    props.yAxisLabelWidth ??
-    (props.hideYAxisText
-      ? AxesAndRulesDefaults.yAxisEmptyLabelWidth
-      : AxesAndRulesDefaults.yAxisLabelWidth);
-
-  const horizontal = false;
-  const yAxisAtTop = false;
-
-  const disableScroll = props.disableScroll ?? LineDefaults.disableScroll;
-  const showScrollIndicator =
-    props.showScrollIndicator || LineDefaults.showScrollIndicator;
-
-  const focusEnabled = props.focusEnabled ?? LineDefaults.focusEnabled;
-  const 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;
-  const unFocusOnPressOut =
-    props.unFocusOnPressOut ?? LineDefaults.unFocusOnPressOut;
-  const delayBeforeUnFocus =
-    props.delayBeforeUnFocus ?? LineDefaults.delayBeforeUnFocus;
-
-  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));
-    }
-    horizSections.push({
-      value: props.yAxisLabelTexts
-        ? props.yAxisLabelTexts[noOfSections - i] ?? value.toString()
-        : value.toString(),
-    });
-  }
-
   const renderLabel = (
     index: number,
     label: String,
@@ -731,8 +359,8 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
                     item.onPress
                       ? item.onPress(item, index)
                       : props.onPress
-                      ? props.onPress(item, index)
-                      : null;
+                        ? props.onPress(item, index)
+                        : null;
                   }}
                 />
               )}
@@ -755,8 +383,8 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
                     item.onPress
                       ? item.onPress(item, index)
                       : props.onPress
-                      ? props.onPress(item, index)
-                      : null;
+                        ? props.onPress(item, index)
+                        : null;
                   }}
                 />
               )}
@@ -782,8 +410,8 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
                       (item.dataPointLabelWidth
                         ? item.dataPointLabelWidth + 20
                         : props.dataPointLabelWidth
-                        ? props.dataPointLabelWidth + 20
-                        : 50) /
+                          ? props.dataPointLabelWidth + 20
+                          : 50) /
                         2 +
                       spacing * index,
                   },
@@ -1098,76 +726,12 @@ export const LineChartBicolor = (props: LineChartBicolorPropsType) => {
     );
   };
 
-  const barAndLineChartsWrapperProps: BarAndLineChartsWrapperTypes = {
-    chartType: chartTypes.LINE_BI_COLOR,
-    containerHeight,
-    noOfSectionsBelowXAxis,
-    stepHeight,
-    labelsExtraHeight,
-    yAxisLabelWidth,
-    horizontal,
-    rtl: false,
-    shiftX: 0,
-    shiftY: 0,
-    scrollRef,
-    yAxisAtTop,
-    initialSpacing,
-    data,
-    stackData: undefined, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    secondaryData: [],
-    barWidth: 0, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    xAxisThickness,
-    totalWidth,
-    disableScroll,
-    showScrollIndicator,
-    scrollToEnd,
-    scrollToIndex: props.scrollToIndex,
-    scrollAnimation,
-    scrollEventThrottle,
-    indicatorColor: props.indicatorColor,
-    setSelectedIndex,
-    spacing,
-    showLine: false,
-    lineConfig: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    lineConfig2: null, // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    maxValue,
-    lineData: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    lineData2: [], // Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    animatedWidth,
-    lineBehindBars: false,
-    points: pointsArray,
-    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)
-    renderChartContent,
-    remainingScrollViewProps: {},
-
-    //horizSectionProps-
-    width: props.width,
-    horizSections,
-    endSpacing,
-    horizontalRulesStyle,
-    noOfSections,
-    showFractionalValues,
-
-    axesAndRulesProps: getAxesAndRulesProps(props, stepValue, undefined),
-
-    yAxisLabelTexts: props.yAxisLabelTexts,
-    yAxisOffset: props.yAxisOffset,
-    rotateYAxisTexts: 0,
-    hideAxesAndRules: props.hideAxesAndRules,
-
-    showXAxisIndices,
-    xAxisIndicesHeight,
-    xAxisIndicesWidth,
-    xAxisIndicesColor,
-
-    // These are Not needed but passing this prop to maintain consistency (between LineChart and BarChart props)
-    pointerConfig: null,
-    getPointerProps: null,
-    pointerIndex: 0,
-    pointerX: 0,
-    pointerY: 0,
-  };
-
-  return <BarAndLineChartsWrapper {...barAndLineChartsWrapperProps} />;
+  return (
+    <BarAndLineChartsWrapper
+      {...barAndLineChartsWrapperProps}
+      scrollRef={scrollRef}
+      animatedWidth={animatedWidth}
+      renderChartContent={renderChartContent}
+    />
+  );
 };