@harveylx/react-native-gifted-charts 1.4.70

package/dist/LineChart/index.js

@@ -0,0 +1,1137 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
+import { isWebApp, screenWidth, usePrevious } from '../utils';
+import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, Defs, Mask, } from 'react-native-svg';
+import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, svgPath, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from '@harveylx/gifted-charts-core';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { StripAndLabel } from '../Components/common/StripAndLabel';
+import { Pointer } from '../Components/common/Pointer';
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+var AnimatedRect = Animated.createAnimatedComponent(Rect);
+export var LineChart = function (props) {
+    var _a, _b, _c, _d;
+    var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    // const heightValue = useMemo(() => new Animated.Value(0), []);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue2 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue3 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue4 = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue5 = useMemo(function () { return new Animated.Value(0); }, []);
+    var _e = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _e.curveType, scrollX = _e.scrollX, setScrollX = _e.setScrollX, arrow1Points = _e.arrow1Points, arrow2Points = _e.arrow2Points, arrow3Points = _e.arrow3Points, arrow4Points = _e.arrow4Points, arrow5Points = _e.arrow5Points, secondaryArrowPoints = _e.secondaryArrowPoints, pointerIndex = _e.pointerIndex, setPointerIndex = _e.setPointerIndex, pointerX = _e.pointerX, setPointerX = _e.setPointerX, pointerY = _e.pointerY, setPointerY = _e.setPointerY, pointerItem = _e.pointerItem, setPointerItem = _e.setPointerItem, pointerY2 = _e.pointerY2, setPointerY2 = _e.setPointerY2, pointerItem2 = _e.pointerItem2, setPointerItem2 = _e.setPointerItem2, pointerY3 = _e.pointerY3, setPointerY3 = _e.setPointerY3, pointerItem3 = _e.pointerItem3, setPointerItem3 = _e.setPointerItem3, pointerY4 = _e.pointerY4, setPointerY4 = _e.setPointerY4, pointerItem4 = _e.pointerItem4, setPointerItem4 = _e.setPointerItem4, pointerY5 = _e.pointerY5, setPointerY5 = _e.setPointerY5, pointerYsForDataSet = _e.pointerYsForDataSet, setPointerYsForDataSet = _e.setPointerYsForDataSet, pointerItem5 = _e.pointerItem5, setPointerItem5 = _e.setPointerItem5, secondaryPointerY = _e.secondaryPointerY, setSecondaryPointerY = _e.setSecondaryPointerY, secondaryPointerItem = _e.secondaryPointerItem, setSecondaryPointerItem = _e.setSecondaryPointerItem, pointerItemsForSet = _e.pointerItemsForSet, setPointerItemsForSet = _e.setPointerItemsForSet, secondaryPointerItemsForSet = _e.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _e.setSecondaryPointerItemsForSet, responderStartTime = _e.responderStartTime, setResponderStartTime = _e.setResponderStartTime, setResponderActive = _e.setResponderActive, points = _e.points, points2 = _e.points2, points3 = _e.points3, points4 = _e.points4, points5 = _e.points5, secondaryPoints = _e.secondaryPoints, fillPoints = _e.fillPoints, fillPoints2 = _e.fillPoints2, fillPoints3 = _e.fillPoints3, fillPoints4 = _e.fillPoints4, fillPoints5 = _e.fillPoints5, secondaryFillPoints = _e.secondaryFillPoints, pointsFromSet = _e.pointsFromSet, fillPointsFromSet = _e.fillPointsFromSet, arrowPointsFromSet = _e.arrowPointsFromSet, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, containerHeight = _e.containerHeight, data = _e.data, data2 = _e.data2, data3 = _e.data3, data4 = _e.data4, data5 = _e.data5, secondaryData = _e.secondaryData, dataSet = _e.dataSet, data0 = _e.data0, labelsExtraHeight = _e.labelsExtraHeight, animationDuration = _e.animationDuration, onDataChangeAnimationDuration = _e.onDataChangeAnimationDuration, animateTogether = _e.animateTogether, renderDataPointsAfterAnimationEnds = _e.renderDataPointsAfterAnimationEnds, animateOnDataChange = _e.animateOnDataChange, startIndex1 = _e.startIndex1, startIndex2 = _e.startIndex2, endIndex1 = _e.endIndex1, endIndex2 = _e.endIndex2, startIndex3 = _e.startIndex3, endIndex3 = _e.endIndex3, startIndex4 = _e.startIndex4, endIndex4 = _e.endIndex4, startIndex5 = _e.startIndex5, endIndex5 = _e.endIndex5, initialSpacing = _e.initialSpacing, thickness = _e.thickness, yAxisLabelWidth = _e.yAxisLabelWidth, spacing = _e.spacing, xAxisThickness = _e.xAxisThickness, dataPointsHeight1 = _e.dataPointsHeight1, dataPointsWidth1 = _e.dataPointsWidth1, dataPointsRadius1 = _e.dataPointsRadius1, dataPointsColor1 = _e.dataPointsColor1, dataPointsShape1 = _e.dataPointsShape1, dataPointsHeight2 = _e.dataPointsHeight2, dataPointsWidth2 = _e.dataPointsWidth2, dataPointsRadius2 = _e.dataPointsRadius2, dataPointsColor2 = _e.dataPointsColor2, dataPointsShape2 = _e.dataPointsShape2, dataPointsHeight3 = _e.dataPointsHeight3, dataPointsWidth3 = _e.dataPointsWidth3, dataPointsRadius3 = _e.dataPointsRadius3, dataPointsColor3 = _e.dataPointsColor3, dataPointsShape3 = _e.dataPointsShape3, dataPointsHeight4 = _e.dataPointsHeight4, dataPointsWidth4 = _e.dataPointsWidth4, dataPointsRadius4 = _e.dataPointsRadius4, dataPointsColor4 = _e.dataPointsColor4, dataPointsShape4 = _e.dataPointsShape4, dataPointsHeight5 = _e.dataPointsHeight5, dataPointsWidth5 = _e.dataPointsWidth5, dataPointsRadius5 = _e.dataPointsRadius5, dataPointsColor5 = _e.dataPointsColor5, dataPointsShape5 = _e.dataPointsShape5, getIsNthAreaChart = _e.getIsNthAreaChart, textFontSize1 = _e.textFontSize1, textFontSize2 = _e.textFontSize2, textFontSize3 = _e.textFontSize3, textFontSize4 = _e.textFontSize4, textFontSize5 = _e.textFontSize5, textColor1 = _e.textColor1, textColor2 = _e.textColor2, textColor3 = _e.textColor3, textColor4 = _e.textColor4, textColor5 = _e.textColor5, totalWidth = _e.totalWidth, maxValue = _e.maxValue, overflowTop = _e.overflowTop, extendedContainerHeight = _e.extendedContainerHeight, getX = _e.getX, getY = _e.getY, getSecondaryY = _e.getSecondaryY, secondaryMaxValue = _e.secondaryMaxValue, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, thickness1 = _e.thickness1, thickness2 = _e.thickness2, thickness3 = _e.thickness3, thickness4 = _e.thickness4, thickness5 = _e.thickness5, zIndex1 = _e.zIndex1, zIndex2 = _e.zIndex2, zIndex3 = _e.zIndex3, zIndex4 = _e.zIndex4, zIndex5 = _e.zIndex5, strokeDashArray1 = _e.strokeDashArray1, strokeDashArray2 = _e.strokeDashArray2, strokeDashArray3 = _e.strokeDashArray3, strokeDashArray4 = _e.strokeDashArray4, strokeDashArray5 = _e.strokeDashArray5, strokeLinecap1 = _e.strokeLinecap1, strokeLinecap2 = _e.strokeLinecap2, strokeLinecap3 = _e.strokeLinecap3, strokeLinecap4 = _e.strokeLinecap4, strokeLinecap5 = _e.strokeLinecap5, rotateLabel = _e.rotateLabel, isAnimated = _e.isAnimated, hideDataPoints1 = _e.hideDataPoints1, hideDataPoints2 = _e.hideDataPoints2, hideDataPoints3 = _e.hideDataPoints3, hideDataPoints4 = _e.hideDataPoints4, hideDataPoints5 = _e.hideDataPoints5, color1 = _e.color1, color2 = _e.color2, color3 = _e.color3, color4 = _e.color4, color5 = _e.color5, startFillColor1 = _e.startFillColor1, endFillColor1 = _e.endFillColor1, startOpacity1 = _e.startOpacity1, endOpacity1 = _e.endOpacity1, startFillColor2 = _e.startFillColor2, endFillColor2 = _e.endFillColor2, startOpacity2 = _e.startOpacity2, endOpacity2 = _e.endOpacity2, startFillColor3 = _e.startFillColor3, endFillColor3 = _e.endFillColor3, startOpacity3 = _e.startOpacity3, endOpacity3 = _e.endOpacity3, startFillColor4 = _e.startFillColor4, endFillColor4 = _e.endFillColor4, startOpacity4 = _e.startOpacity4, endOpacity4 = _e.endOpacity4, startFillColor5 = _e.startFillColor5, endFillColor5 = _e.endFillColor5, startOpacity5 = _e.startOpacity5, endOpacity5 = _e.endOpacity5, arrowStrokeWidth1 = _e.arrowStrokeWidth1, arrowStrokeColor1 = _e.arrowStrokeColor1, arrowFillColor1 = _e.arrowFillColor1, arrowStrokeWidth2 = _e.arrowStrokeWidth2, arrowStrokeColor2 = _e.arrowStrokeColor2, arrowFillColor2 = _e.arrowFillColor2, arrowStrokeWidth3 = _e.arrowStrokeWidth3, arrowStrokeColor3 = _e.arrowStrokeColor3, arrowFillColor3 = _e.arrowFillColor3, arrowStrokeWidth4 = _e.arrowStrokeWidth4, arrowStrokeColor4 = _e.arrowStrokeColor4, arrowFillColor4 = _e.arrowFillColor4, arrowStrokeWidth5 = _e.arrowStrokeWidth5, arrowStrokeColor5 = _e.arrowStrokeColor5, arrowFillColor5 = _e.arrowFillColor5, arrowStrokeWidthsFromSet = _e.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _e.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _e.arrowFillColorsFromSet, secondaryLineConfig = _e.secondaryLineConfig, gradientDirection = _e.gradientDirection, stepHeight = _e.stepHeight, noOfSectionsBelowXAxis = _e.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, pointerConfig = _e.pointerConfig, pointerHeight = _e.pointerHeight, pointerWidth = _e.pointerWidth, pointerRadius = _e.pointerRadius, pointerColor = _e.pointerColor, pointerComponent = _e.pointerComponent, showPointerStrip = _e.showPointerStrip, pointerStripHeight = _e.pointerStripHeight, pointerStripWidth = _e.pointerStripWidth, pointerStripColor = _e.pointerStripColor, pointerStripUptoDataPoint = _e.pointerStripUptoDataPoint, pointerLabelComponent = _e.pointerLabelComponent, stripOverPointer = _e.stripOverPointer, shiftPointerLabelX = _e.shiftPointerLabelX, shiftPointerLabelY = _e.shiftPointerLabelY, pointerLabelWidth = _e.pointerLabelWidth, pointerLabelHeight = _e.pointerLabelHeight, autoAdjustPointerLabelPosition = _e.autoAdjustPointerLabelPosition, pointerVanishDelay = _e.pointerVanishDelay, activatePointersOnLongPress = _e.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _e.activatePointersInstantlyOnTouch, activatePointersDelay = _e.activatePointersDelay, persistPointer = _e.persistPointer, resetPointerIndexOnRelease = _e.resetPointerIndexOnRelease, hidePointers = _e.hidePointers, hidePointer1 = _e.hidePointer1, hidePointer2 = _e.hidePointer2, hidePointer3 = _e.hidePointer3, hidePointer4 = _e.hidePointer4, hidePointer5 = _e.hidePointer5, cumulativeSpacing1 = _e.cumulativeSpacing1, cumulativeSpacing2 = _e.cumulativeSpacing2, cumulativeSpacing3 = _e.cumulativeSpacing3, cumulativeSpacing4 = _e.cumulativeSpacing4, cumulativeSpacing5 = _e.cumulativeSpacing5, cumulativeSpacingSecondary = _e.cumulativeSpacingSecondary, cumulativeSpacingForSet = _e.cumulativeSpacingForSet, hideSecondaryPointer = _e.hideSecondaryPointer, hidePointerDataPointForMissingValues = _e.hidePointerDataPointForMissingValues, pointerEvents = _e.pointerEvents, focusEnabled = _e.focusEnabled, showDataPointOnFocus = _e.showDataPointOnFocus, showStripOnFocus = _e.showStripOnFocus, stripOverDataPoints = _e.stripOverDataPoints, showTextOnFocus = _e.showTextOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, stripHeight = _e.stripHeight, stripWidth = _e.stripWidth, stripColor = _e.stripColor, stripOpacity = _e.stripOpacity, stripStrokeDashArray = _e.stripStrokeDashArray, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, lineGradient = _e.lineGradient, lineGradientDirection = _e.lineGradientDirection, lineGradientStartColor = _e.lineGradientStartColor, lineGradientEndColor = _e.lineGradientEndColor, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, areaChart = _e.areaChart, mostNegativeValue = _e.mostNegativeValue, strips = _e.strips, lastLineNumber = _e.lastLineNumber, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, stepValue = _e.stepValue, pointerItemLocal = _e.pointerItemLocal, allowFontScaling = _e.allowFontScaling, colors = _e.colors;
+    var svgHeight = containerHeightIncludingBelowXAxis +
+        ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : dataPointsRadius1);
+    var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
+    var widthValuesFromSet = useMemo(function () { return dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set) { return new Animated.Value(0); }); }, []);
+    var animatedPoints = new Animated.Value(0);
+    var animatedFillPoints = new Animated.Value(0);
+    var oldPoints = usePrevious(points);
+    var oldFillPoints = usePrevious(fillPoints);
+    var animatedPath = animateOnDataChange && points && oldPoints && points !== oldPoints
+        ? animatedPoints.interpolate({
+            inputRange: [0, 1],
+            outputRange: pointsWithPaddedRepititions(oldPoints, points),
+        })
+        : '';
+    var animatedFillPath = animateOnDataChange &&
+        fillPoints &&
+        oldFillPoints &&
+        fillPoints !== oldFillPoints
+        ? animatedFillPoints.interpolate({
+            inputRange: [0, 1],
+            outputRange: pointsWithPaddedRepititions(oldFillPoints, fillPoints),
+        })
+        : '';
+    useEffect(function () {
+        if (animateOnDataChange) {
+            Animated.timing(animatedPoints, {
+                toValue: 1,
+                duration: onDataChangeAnimationDuration,
+                useNativeDriver: true,
+                easing: Easing.ease,
+            }).start();
+            if (props.areaChart || props.areaChart1) {
+                Animated.timing(animatedFillPoints, {
+                    toValue: 1,
+                    duration: onDataChangeAnimationDuration,
+                    useNativeDriver: true,
+                    easing: Easing.ease,
+                }).start();
+            }
+        }
+    }, [animatedPoints]);
+    var labelsAppear = useCallback(function () {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacityValue]);
+    var appearingOpacity = opacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue]);
+    var decreaseWidth2 = useCallback(function () {
+        widthValue2.setValue(0);
+        Animated.timing(widthValue2, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue2]);
+    var decreaseWidth3 = useCallback(function () {
+        widthValue3.setValue(0);
+        Animated.timing(widthValue3, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue3]);
+    var decreaseWidth4 = useCallback(function () {
+        widthValue4.setValue(0);
+        Animated.timing(widthValue4, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue4]);
+    var decreaseWidth5 = useCallback(function () {
+        widthValue5.setValue(0);
+        Animated.timing(widthValue5, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue5]);
+    var decreaseWidthsFromSet = useCallback(function () {
+        dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+            var _a;
+            (_a = widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index]) === null || _a === void 0 ? void 0 : _a.setValue(0);
+            if (widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index]) {
+                Animated.timing(widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet[index], {
+                    toValue: totalWidth,
+                    duration: animationDuration,
+                    easing: Easing.linear,
+                    useNativeDriver: false,
+                }).start();
+            }
+        });
+    }, [animationDuration, widthValuesFromSet]);
+    useEffect(function () {
+        decreaseWidth();
+        labelsAppear();
+        widthValuesFromSet === null || widthValuesFromSet === void 0 ? void 0 : widthValuesFromSet.forEach(function (item, index) {
+            setTimeout(function () {
+                decreaseWidthsFromSet();
+            }, animateTogether ? 0 : animationDuration * index);
+        });
+        setTimeout(function () {
+            decreaseWidth2();
+        }, animateTogether ? 0 : animationDuration);
+        setTimeout(function () {
+            decreaseWidth3();
+        }, animateTogether ? 0 : animationDuration * 2);
+        setTimeout(function () {
+            decreaseWidth4();
+        }, animateTogether ? 0 : animationDuration * 3);
+        setTimeout(function () {
+            decreaseWidth5();
+        }, animateTogether ? 0 : animationDuration * 4);
+    }, [
+        animateTogether,
+        animationDuration,
+        decreaseWidth,
+        decreaseWidth2,
+        decreaseWidth3,
+        decreaseWidth4,
+        decreaseWidth5,
+        labelsAppear,
+    ]);
+    var svgWrapperViewStyle = {
+        position: 'absolute',
+        bottom: 61 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
+        left: 0,
+        zIndex: 1,
+        transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+    };
+    var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
+                        : 54 - xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing + labelsExtraHeight,
+                    left: spacing * index - spacing / 2,
+                    height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderAnimatedLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    height: rotateLabel
+                        ? 40
+                        : ((_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18),
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : rotateLabel
+                            ? 10
+                            : 54 - xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing,
+                    left: spacing * index - spacing / 2,
+                    opacity: appearingOpacity,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var onStripPress = function (item, index) {
+        if (props.focusedDataPointIndex === undefined || !props.onFocus) {
+            setSelectedIndex(index);
+        }
+        if (props.onFocus) {
+            props.onFocus(item, index);
+        }
+    };
+    // const [selectedLineNumber, setSelectedLineNumber] = useState(-1);
+    var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c, _d, _e, _f;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideDataPoint) {
+                return null;
+            }
+            var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
+            if (index === selectedIndex &&
+                (focusTogether || key === selectedLineNumber)) {
+                dataPointsShape =
+                    item.focusedDataPointShape ||
+                        props.focusedDataPointShape ||
+                        item.dataPointShape ||
+                        dataPtsShape;
+                dataPointsWidth =
+                    item.focusedDataPointWidth ||
+                        props.focusedDataPointWidth ||
+                        item.dataPointWidth ||
+                        dataPtsWidth;
+                dataPointsHeight =
+                    item.focusedDataPointHeight ||
+                        props.focusedDataPointHeight ||
+                        item.dataPointHeight ||
+                        dataPtsHeight;
+                dataPointsColor =
+                    item.focusedDataPointColor ||
+                        props.focusedDataPointColor ||
+                        LineDefaults.focusedDataPointColor;
+                dataPointsRadius =
+                    (_c = (_b = (_a = item.focusedDataPointRadius) !== null && _a !== void 0 ? _a : props.focusedDataPointRadius) !== null && _b !== void 0 ? _b : item.dataPointRadius) !== null && _c !== void 0 ? _c : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = item.dataPointText;
+                }
+                customDataPoint =
+                    item.focusedCustomDataPoint ||
+                        props.focusedCustomDataPoint ||
+                        item.customDataPoint ||
+                        props.customDataPoint;
+                dataPointLabelComponent =
+                    item.focusedDataPointLabelComponent ||
+                        item.dataPointLabelComponent ||
+                        props.focusedDataPointLabelComponent ||
+                        props.dataPointLabelComponent;
+            }
+            else {
+                dataPointsShape = item.dataPointShape || dataPtsShape;
+                dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+                dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+                dataPointsColor = item.dataPointColor || dataPtsColor;
+                dataPointsRadius = (_d = item.dataPointRadius) !== null && _d !== void 0 ? _d : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customDataPoint = item.customDataPoint || props.customDataPoint;
+                dataPointLabelComponent =
+                    item.dataPointLabelComponent || props.dataPointLabelComponent;
+            }
+            if (showValuesAsDataPointsText) {
+                text = originalDataFromProps[index].value;
+            }
+            var dataPointLabelWidth = item.dataPointLabelWidth
+                ? item.dataPointLabelWidth
+                : props.dataPointLabelWidth
+                    ? props.dataPointLabelWidth
+                    : 30;
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
+                                var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
+                                handleFocus(index, item, locationY, onStripPress);
+                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                                    dataPointsWidth / 2 +
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    // height: svgHeight,
+                                    // width: totalWidth,
+                                    left: initialSpacing -
+                                        dataPointsWidth / 2 +
+                                        ((_f = spacingArray[index - 1]) !== null && _f !== void 0 ? _f : 0),
+                                    top: getYOrSecondaryY(item.value) - dataPointsHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index, item, 0, onStripPress)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Circle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.value), r: dataPointsRadius, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index, item, 0, onStripPress)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
+                                    (item.dataPointLabelShiftX ||
+                                        props.dataPointLabelShiftX ||
+                                        0) -
+                                    dataPointLabelWidth / 2 +
+                                    spacing * index, y: containerHeight +
+                                    (item.dataPointLabelShiftY ||
+                                        props.dataPointLabelShiftY ||
+                                        0) -
+                                    (item.value * containerHeight) / maxValue, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    height: svgHeight,
+                                    width: dataPointLabelWidth,
+                                    left: initialSpacing +
+                                        (item.dataPointLabelShiftX ||
+                                            props.dataPointLabelShiftX ||
+                                            0) -
+                                        dataPointLabelWidth / 2 +
+                                        spacing * index,
+                                    top: containerHeight +
+                                        (item.dataPointLabelShiftY ||
+                                            props.dataPointLabelShiftY ||
+                                            0) -
+                                        (item.value * containerHeight) / maxValue,
+                                }, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) }))) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
+                                    dataPointsWidth +
+                                    (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.value) -
+                                    dataPointsHeight / 2 +
+                                    (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus && !showValuesAsDataPointsText
+                                    ? item.dataPointText
+                                    : text })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
+        });
+    };
+    var renderSpecificVerticalLines = function (dataForRender, spacingArray) {
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c;
+            if (item.showVerticalLine) {
+                var x = getX(spacingArray, index);
+                return (_jsx(Line, { x1: x, y1: extendedContainerHeight, x2: x, y2: item.verticalLineHeight
+                        ? extendedContainerHeight - item.verticalLineHeight
+                        : props.verticalLinesHeight
+                            ? extendedContainerHeight - props.verticalLinesHeight
+                            : ((_a = item.verticalLineUptoDataPoint) !== null && _a !== void 0 ? _a : props.verticalLinesUptoDataPoint)
+                                ? getY(item.value)
+                                : -xAxisThickness, stroke: item.verticalLineColor || props.verticalLinesColor || 'lightgray', strokeWidth: item.verticalLineThickness || props.verticalLinesThickness || 2, strokeDasharray: (_c = (_b = item.verticalLineStrokeDashArray) !== null && _b !== void 0 ? _b : props.verticalLinesStrokeDashArray) !== null && _c !== void 0 ? _c : '' }, index));
+            }
+            return null;
+        });
+    };
+    var renderPointer = function (lineNumber, isDataSet) {
+        var _a, _b;
+        if (hidePointers)
+            return;
+        if (isDataSet) {
+            var pointerItemLocal_1, pointerYLocal_1, pointerColorLocal_1;
+            return dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                var _a, _b;
+                var pIndex = barAndLineChartsWrapperProps.pointerIndex;
+                pointerItemLocal_1 = set.data[pIndex];
+                if (set.hidePointers || (pointerItemLocal_1 === null || pointerItemLocal_1 === void 0 ? void 0 : pointerItemLocal_1.hidePointer))
+                    return null;
+                if (hidePointerDataPointForMissingValues &&
+                    typeof pointerItemLocal_1.value !== 'number')
+                    return null;
+                pointerYLocal_1 = pointerYsForDataSet[index];
+                pointerColorLocal_1 =
+                    (_b = (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointerColorsForDataSet) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : pointerColor;
+                return (_jsx(Fragment, { children: Pointer({
+                        pointerX: pointerX,
+                        pointerYLocal: pointerYLocal_1 + xAxisThickness,
+                        pointerComponent: pointerComponent,
+                        pointerHeight: pointerHeight,
+                        pointerRadius: pointerRadius,
+                        pointerWidth: pointerWidth,
+                        pointerItemLocal: pointerItemLocal_1,
+                        pointerColorLocal: pointerColorLocal_1,
+                        pointerIndex: pIndex,
+                    }) }, 'dSetPts' + index));
+            });
+        }
+        if (lineNumber === 1 && hidePointer1)
+            return;
+        if (lineNumber === 2 && hidePointer2)
+            return;
+        if (lineNumber === 3 && hidePointer3)
+            return;
+        if (lineNumber === 4 && hidePointer4)
+            return;
+        if (lineNumber === 5 && hidePointer5)
+            return;
+        // 6666 is for secondaryData
+        if (lineNumber === 6666 && hideSecondaryPointer)
+            return;
+        var pointerItemLocal, pointerYLocal, pointerColorLocal;
+        switch (lineNumber) {
+            case 1:
+                pointerItemLocal = pointerItem;
+                pointerYLocal = pointerY;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer1Color) || pointerColor;
+                break;
+            case 2:
+                pointerItemLocal = pointerItem2;
+                pointerYLocal = pointerY2;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer2Color) || pointerColor;
+                break;
+            case 3:
+                pointerItemLocal = pointerItem3;
+                pointerYLocal = pointerY3;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer3Color) || pointerColor;
+                break;
+            case 4:
+                pointerItemLocal = pointerItem4;
+                pointerYLocal = pointerY4;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer4Color) || pointerColor;
+                break;
+            case 5:
+                pointerItemLocal = pointerItem5;
+                pointerYLocal = pointerY5;
+                pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer5Color) || pointerColor;
+                break;
+            case 6666:
+                pointerItemLocal = secondaryPointerItem;
+                pointerYLocal = secondaryPointerY;
+                pointerColorLocal =
+                    (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.secondaryPointerColor) || pointerColor;
+                break;
+        }
+        if (!pointerYLocal)
+            return;
+        if (hidePointerDataPointForMissingValues &&
+            typeof ((_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[pointerIndex]) === null || _b === void 0 ? void 0 : _b.value) !== 'number')
+            return null;
+        return Pointer({
+            pointerX: pointerX,
+            pointerYLocal: pointerYLocal + xAxisThickness,
+            pointerComponent: pointerComponent,
+            pointerHeight: pointerHeight,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            pointerItemLocal: pointerItemLocal,
+            pointerColorLocal: pointerColorLocal,
+            pointerIndex: pointerIndex,
+        });
+    };
+    var renderStripAndLabel = function () {
+        var _a, _b;
+        var pointerYLocal;
+        var arr = [pointerY];
+        if (pointerY2 !== 0) {
+            arr.push(pointerY2);
+        }
+        if (pointerY3 !== 0) {
+            arr.push(pointerY3);
+        }
+        if (pointerY4 !== 0) {
+            arr.push(pointerY4);
+        }
+        if (pointerY5 !== 0) {
+            arr.push(pointerY5);
+        }
+        pointerYLocal = Math.min.apply(Math, __spreadArray([], __read(arr), false));
+        if ((pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.hidePointerForMissingValues) &&
+            typeof pointerItemLocal[0].value !== 'number')
+            return null;
+        return StripAndLabel({
+            autoAdjustPointerLabelPosition: autoAdjustPointerLabelPosition,
+            pointerX: pointerX,
+            pointerLabelWidth: pointerLabelWidth,
+            activatePointersOnLongPress: activatePointersOnLongPress,
+            yAxisLabelWidth: yAxisLabelWidth,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            shiftPointerLabelX: shiftPointerLabelX,
+            pointerLabelHeight: pointerLabelHeight,
+            pointerYLocal: pointerYLocal,
+            pointerStripUptoDataPoint: pointerStripUptoDataPoint,
+            pointerStripHeight: pointerStripHeight,
+            shiftPointerLabelY: shiftPointerLabelY,
+            pointerItemLocal: pointerItemLocal,
+            secondaryPointerItem: secondaryPointerItem,
+            pointerItemsForSet: pointerItemsForSet,
+            secondaryPointerItemsForSet: secondaryPointerItemsForSet,
+            showPointerStrip: showPointerStrip,
+            pointerStripWidth: pointerStripWidth,
+            containerHeight: containerHeight,
+            xAxisThickness: xAxisThickness,
+            pointerStripColor: pointerStripColor,
+            pointerConfig: pointerConfig,
+            pointerLabelComponent: pointerLabelComponent,
+            scrollX: scrollX,
+            pointerEvents: pointerEvents,
+            isBarChart: false,
+            pointerIndex: pointerIndex,
+            width: totalWidth,
+            screenWidth: (_a = props.width) !== null && _a !== void 0 ? _a : Math.min(totalWidth, (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth) -
+                yAxisLabelWidth,
+            hasDataSet: !!dataSet,
+            containsNegative: mostNegativeValue < 0,
+            horizontalStripConfig: pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.horizontalStripConfig,
+        });
+    };
+    var getLineGradientComponent = function () {
+        return props.lineGradientComponent ? (props.lineGradientComponent()) : (_jsxs(LinearGradient, { id: "lineGradient", x1: "0", y1: "0", x2: lineGradientDirection === 'horizontal' ? '1' : '0', y2: lineGradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: lineGradientStartColor }), _jsx(Stop, { offset: "1", stopColor: lineGradientEndColor })] }));
+    };
+    var getAreaGradientComponent = function (startFillColor, endFillColor, startOpacity, endOpacity, gradientId) {
+        return props.areaGradientComponent ? (props.areaGradientComponent()) : (_jsxs(LinearGradient, { id: gradientId || 'Gradient', x1: "0", y1: "0", x2: gradientDirection === 'horizontal' ? '1' : '0', y2: gradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: startFillColor, stopOpacity: startOpacity.toString() }), _jsx(Stop, { offset: "1", stopColor: endFillColor, stopOpacity: endOpacity.toString() })] }));
+    };
+    var getSpreadAreaPath = function (spreadAreaData, getX, getY, spacingArray, curvature, curveType) {
+        if (!spreadAreaData || spreadAreaData.length === 0)
+            return '';
+        // Generate points arrays for upper and lower bounds
+        var upperPoints = spreadAreaData.map(function (point, index) { return [
+            getX(spacingArray, index),
+            getY(point.upper),
+        ]; });
+        var lowerPoints = spreadAreaData.map(function (point, index) { return [
+            getX(spacingArray, index),
+            getY(point.lower),
+        ]; });
+        // Use curve interpolation if curveType is specified
+        if (curveType !== undefined && curveType !== 0) {
+            var topPath = svgPath(upperPoints, curveType, props.curvature);
+            // Reverse the lower points for the path and create curved path
+            var reversedLowerPoints = lowerPoints.slice().reverse();
+            var bottomPath = svgPath(reversedLowerPoints, curveType, props.curvature);
+            // Remove the initial 'M' from bottomPath and prepend 'L' to connect it
+            var bottomPathConnected = bottomPath.replace(/^M/, 'L');
+            return "".concat(topPath, " ").concat(bottomPathConnected, " Z");
+        }
+        else {
+            // Fallback to straight lines for compatibility
+            var topPath = spreadAreaData
+                .map(function (point, index) {
+                return "L ".concat(getX(spacingArray, index), " ").concat(getY(point.upper));
+            })
+                .join(' ')
+                .replace(/^L/, 'M');
+            var bottomPath = spreadAreaData
+                .slice()
+                .reverse()
+                .map(function (point, index) {
+                return "L ".concat(getX(spacingArray, spreadAreaData.length - 1 - index), " ").concat(getY(point.lower));
+            })
+                .join(' ');
+            return "".concat(topPath, " ").concat(bottomPath, " Z");
+        }
+    };
+    var getClipRange = function (startIndex, endIndex, clipRangeId) {
+        var startX = startIndex * spacing + initialSpacing;
+        var endX = endIndex * spacing + initialSpacing;
+        var clipWidth = endX - startX;
+        return (_jsx(Defs, { children: _jsx(ClipPath, { id: clipRangeId, children: _jsx(Rect, { x: startX, y: 0, width: clipWidth, height: "100%" }) }) }));
+    };
+    var getColorBackRects = function () {
+        return colors === null || colors === void 0 ? void 0 : colors.map(function (colorItem) {
+            var key = JSON.stringify(colorItem);
+            var from = colorItem.from, to = colorItem.to, color = colorItem.color;
+            var y = getY(from);
+            var height = getY(to) - getY(from);
+            var rectProps = {
+                x: 0,
+                y: y,
+                height: height,
+                fill: color,
+                mask: 'url(#pathMask)',
+            };
+            return isAnimated ? (_createElement(AnimatedRect, __assign({}, rectProps, { key: key, width: widthValue }))) : (_createElement(Rect, __assign({}, rectProps, { key: key, width: '100%' })));
+        });
+    };
+    var renderIntersection = function () {
+        var _a;
+        return (_jsx(View, { style: [svgWrapperViewStyle, { width: totalWidth }], children: _jsxs(Svg, { children: [_jsx(Path, { id: "path1", d: fillPoints, fill: "none", stroke: 'none' }), _jsx(Path, { id: "path2", d: fillPoints2, fill: "none", stroke: 'none' }), _jsx(ClipPath, { id: "clip", children: _jsx(Use, { href: "#path1" }) }), _jsx(Path, { d: fillPoints2, clipPath: "url(#clip)", fill: (_a = intersectionAreaConfig === null || intersectionAreaConfig === void 0 ? void 0 : intersectionAreaConfig.fillColor) !== null && _a !== void 0 ? _a : 'white' }), _jsx(Path, { d: points, stroke: color1, strokeWidth: thickness1 !== null && thickness1 !== void 0 ? thickness1 : thickness, fill: 'none' })] }) }));
+    };
+    var renderDataPointsForEachLine = function () {
+        if (dataSet && pointsFromSet.length) {
+            return (_jsx(_Fragment, { children: dataSet.map(function (set, index) {
+                    var _a;
+                    var hideDataPoints = set.hideDataPoints, data = set.data, dataPointsShape = set.dataPointsShape, dataPointsWidth = set.dataPointsWidth, dataPointsHeight = set.dataPointsHeight, dataPointsColor = set.dataPointsColor, dataPointsRadius = set.dataPointsRadius, textColor = set.textColor, textFontSize = set.textFontSize, startIndex = set.startIndex, endIndex = set.endIndex, isSecondary = set.isSecondary;
+                    return renderDataPoints(hideDataPoints !== null && hideDataPoints !== void 0 ? hideDataPoints : hideDataPoints1, data, adjustToOffset(data, -((_a = props.yAxisOffset) !== null && _a !== void 0 ? _a : 0)), dataPointsShape !== null && dataPointsShape !== void 0 ? dataPointsShape : dataPointsShape1, dataPointsWidth !== null && dataPointsWidth !== void 0 ? dataPointsWidth : dataPointsWidth1, dataPointsHeight !== null && dataPointsHeight !== void 0 ? dataPointsHeight : dataPointsHeight1, dataPointsColor !== null && dataPointsColor !== void 0 ? dataPointsColor : dataPointsColor1, dataPointsRadius !== null && dataPointsRadius !== void 0 ? dataPointsRadius : dataPointsRadius1, textColor !== null && textColor !== void 0 ? textColor : textColor1, textFontSize !== null && textFontSize !== void 0 ? textFontSize : textFontSize1, startIndex !== null && startIndex !== void 0 ? startIndex : 0, endIndex !== null && endIndex !== void 0 ? endIndex : set.data.length - 1, isSecondary, showValuesAsDataPointsText, cumulativeSpacingForSet[index], index);
+                }) }));
+        }
+        return (_jsxs(_Fragment, { children: [renderDataPoints(hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0), points2
+                    ? renderDataPoints(hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1)
+                    : null, points3
+                    ? renderDataPoints(hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, cumulativeSpacing3, 2)
+                    : null, points4
+                    ? renderDataPoints(hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, cumulativeSpacing4, 3)
+                    : null, points5
+                    ? renderDataPoints(hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, cumulativeSpacing5, 4)
+                    : null, secondaryPoints
+                    ? renderDataPoints(secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6666)
+                    : null] }));
+    };
+    var lineSvgComponent = function (points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) {
+        var _a, _b;
+        if (!points)
+            return null;
+        var isCurved = points.includes('C') || points.includes('Q');
+        var clipRangeId = "Clip-range-".concat(key);
+        var uniqueId = "Gradient-line-".concat(key);
+        var isNthAreaChart = !!dataSet
+            ? ((_a = dataSet[Number(key)].areaChart) !== null && _a !== void 0 ? _a : areaChart)
+            : getIsNthAreaChart(key !== null && key !== void 0 ? key : 0);
+        // Add support for spread area data from props
+        var spreadAreaData = props.spreadAreaData;
+        var spreadAreaColor = props.spreadAreaColor;
+        var spreadAreaOpacity = props.spreadAreaOpacity;
+        var ar = [{ d: '', color: '', strokeWidth: 0 }];
+        if (points.includes(RANGE_ENTER)) {
+            ar = getRegionPathObjects(points, color, currentLineThickness !== null && currentLineThickness !== void 0 ? currentLineThickness : 0, thickness, strokeDashArray !== null && strokeDashArray !== void 0 ? strokeDashArray : [], isCurved, RANGE_ENTER, STOP, RANGE_EXIT, curveType);
+        }
+        else if (points.includes(SEGMENT_START)) {
+            ar = getSegmentedPathObjects(points, color, currentLineThickness !== null && currentLineThickness !== void 0 ? currentLineThickness : 0, thickness, strokeDashArray !== null && strokeDashArray !== void 0 ? strokeDashArray : [], isCurved, SEGMENT_START, SEGMENT_END, curveType);
+        }
+        var lineSvgPropsOuter = {
+            d: animateOnDataChange && animatedPath ? animatedPath : points,
+            fill: 'none',
+            stroke: lineGradient
+                ? props.lineGradientId
+                    ? "url(#".concat(props.lineGradientId, ")")
+                    : "url(#lineGradient)"
+                : color,
+            strokeWidth: currentLineThickness || thickness,
+            strokeLinecap: strokeLinecap,
+        };
+        if (strokeDashArray &&
+            strokeDashArray.length === 2 &&
+            typeof strokeDashArray[0] === 'number' &&
+            typeof strokeDashArray[1] === 'number') {
+            lineSvgPropsOuter.strokeDasharray = strokeDashArray;
+        }
+        return (_jsxs(Svg, { height: svgHeight, 
+            // width={widthValue}
+            onPress: props.onBackgroundPress, children: [lineGradient && getLineGradientComponent(), points.includes(SEGMENT_START) || points.includes(RANGE_ENTER) ? (ar.map(function (item, index) {
+                    var lineSvgProps = {
+                        d: item.d,
+                        fill: 'none',
+                        stroke: lineGradient
+                            ? props.lineGradientId
+                                ? "url(#".concat(props.lineGradientId, ")")
+                                : "url(#lineGradient)"
+                            : item.color,
+                        strokeWidth: item.strokeWidth,
+                        strokeLinecap: strokeLinecap,
+                    };
+                    if (item.strokeDashArray &&
+                        item.strokeDashArray.length === 2 &&
+                        typeof item.strokeDashArray[0] === 'number' &&
+                        typeof item.strokeDashArray[1] === 'number') {
+                        lineSvgProps.strokeDasharray = item.strokeDashArray;
+                    }
+                    return _jsx(Path, __assign({}, lineSvgProps), index);
+                })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : colors ? (_jsx(Defs, { children: _jsx(Mask, { id: "pathMask", children: _jsx(Path, __assign({}, lineSvgPropsOuter, { stroke: colors ? 'white' : color })) }) })) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), colors && getColorBackRects(), isNthAreaChart &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
+                    (startIndex !== 0 || endIndex !== data.length - 1) &&
+                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
+                    propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        ? "url(#".concat(props.areaGradientId, ")")
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 })), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                    return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
+                })) !== null && _b !== void 0 ? _b : null, isAnimated && !renderDataPointsAfterAnimationEnds // in this condition onPress won't work properly in case of multi-line, so it's suggested to use either renderDataPointsAfterAnimationEnds prop if you want to use onPress for data points
+                    ? renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key)
+                    : key === lastLineNumber - 1
+                        ? renderDataPointsForEachLine()
+                        : null, showArrow && (_jsx(Path, { d: arrowPoints, fill: arrowFillColor, stroke: arrowStrokeColor, strokeWidth: arrowStrokeWidth }))] }));
+    };
+    // const getClosestValueFromSpacingArray = (spacingArray:number[],x:number):number => {
+    //   let dif=0,prevDif=0,i;
+    //   for(i=0;i<spacingArray.length;i++){
+    //     dif = Math.abs(spacingArray[i]-x)
+    //     if(prevDif!=0 && prevDif<dif){
+    //       break;
+    //     }
+    //     prevDif = dif;
+    //   }
+    //   return i-1;
+    // }
+    var activatePointers = function (x) {
+        var _a;
+        var factor = (x - initialSpacing) / ((_a = props.spacing1) !== null && _a !== void 0 ? _a : spacing); // getClosestValueFromSpacingArray(cumulativeSpacing1,x-initialSpacing)
+        factor = Math.round(factor);
+        factor = Math.min(factor, (data0 !== null && data0 !== void 0 ? data0 : data).length - 1);
+        factor = Math.max(factor, 0);
+        var item, y;
+        item = (data0 !== null && data0 !== void 0 ? data0 : data)[factor];
+        if (!item.hidePointer) {
+            var z = getX((dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) ? cumulativeSpacingForSet[0] : cumulativeSpacing1, factor) -
+                (pointerRadius || pointerWidth / 2) -
+                1;
+            setPointerX(Math.max(0.1, z)); // 0.1 is to avoid pointer going out of the chart, See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/925
+            setPointerIndex(factor);
+            y =
+                containerHeight -
+                    (item.value * containerHeight) / maxValue -
+                    (pointerRadius || pointerHeight / 2) +
+                    10;
+            setPointerY(y);
+            setPointerItem(item);
+        }
+        if (data2 && data2.length) {
+            item = data2[factor];
+            if (item && !item.hidePointer) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY2(y);
+                setPointerItem2(item);
+            }
+        }
+        if (data3 && data3.length) {
+            item = data3[factor];
+            if (item && !item.hidePointer) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY3(y);
+                setPointerItem3(item);
+            }
+        }
+        if (data4 && data4.length) {
+            item = data4[factor];
+            if (item && !item.hidePointer) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY4(y);
+                setPointerItem4(item);
+            }
+        }
+        if (data5 && data5.length) {
+            item = data5[factor];
+            if (item && !item.hidePointer) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / maxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setPointerY5(y);
+                setPointerItem5(item);
+            }
+        }
+        if (secondaryData === null || secondaryData === void 0 ? void 0 : secondaryData.length) {
+            item = secondaryData[factor];
+            if (item) {
+                y =
+                    containerHeight -
+                        (item.value * containerHeight) / secondaryMaxValue -
+                        (pointerRadius || pointerHeight / 2) +
+                        10;
+                setSecondaryPointerY(y);
+                // @ts-ignore
+                setSecondaryPointerItem(item);
+            }
+        }
+        if (dataSet === null || dataSet === void 0 ? void 0 : dataSet.length) {
+            var pointerItemsForSetLocal_1 = [];
+            var secondaryPointerItemsForSetLocal_1 = [];
+            var ysForDataSet = dataSet.map(function (set) {
+                var item = set.data[factor];
+                if (set.isSecondary) {
+                    secondaryPointerItemsForSetLocal_1.push(item);
+                }
+                else {
+                    pointerItemsForSetLocal_1.push(item);
+                }
+                var y = item
+                    ? containerHeight -
+                        (item.value * containerHeight) /
+                            (set.isSecondary ? secondaryMaxValue : maxValue) -
+                        (pointerRadius || pointerHeight / 2) +
+                        10
+                    : 0;
+                return y;
+            });
+            setPointerItemsForSet(pointerItemsForSetLocal_1);
+            setSecondaryPointerItemsForSet(secondaryPointerItemsForSetLocal_1);
+            setPointerYsForDataSet(ysForDataSet);
+        }
+    };
+    var renderLine = function (containerHeightIncludingBelowXAxis, zIndex, points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        return (_jsx(View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchStart: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchEnd: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+                return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
+            }, onResponderGrant: function (evt) {
+                var _a;
+                if (!pointerConfig)
+                    return;
+                setResponderStartTime(evt.timeStamp);
+                if (activatePointersOnLongPress) {
+                    return;
+                }
+                var x = evt.nativeEvent.locationX;
+                activatePointers(x);
+                (_a = pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, onResponderMove: function (evt) {
+                var _a;
+                if (!pointerConfig)
+                    return;
+                if (activatePointersOnLongPress &&
+                    evt.timeStamp - responderStartTime < activatePointersDelay) {
+                    return;
+                }
+                else {
+                    setResponderActive(true);
+                }
+                var x = evt.nativeEvent.locationX;
+                var px = evt.nativeEvent.pageX;
+                if (yAxisLabelWidth != -1 && x == px)
+                    return; // if locationX and pageX are equal, it means pointer has gone out of the chart, but this is not the case when yAxisLabelWidth is -1
+                if (!activatePointersOnLongPress &&
+                    x > (props.width || Dimensions.get('window').width))
+                    return;
+                activatePointers(x);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderMove) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, 
+            // onResponderReject={evt => {
+            //   console.log('evt...reject.......',evt);
+            // }}
+            onResponderEnd: function (evt) {
+                var _a;
+                setResponderStartTime(0);
+                if (resetPointerIndexOnRelease)
+                    setPointerIndex(-1);
+                setResponderActive(false);
+                if (!persistPointer)
+                    setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, onResponderTerminationRequest: function (evt) { return false; }, 
+            // onResponderTerminate={evt => {
+            //   console.log('evt...terminate.......',evt);
+            // }}
+            // onResponderRelease={evt => {
+            //   setResponderStartTime(0);
+            //   setResponderActive(false);
+            //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+            // }}
+            style: [
+                svgWrapperViewStyle,
+                {
+                    width: totalWidth,
+                    height: containerHeightIncludingBelowXAxis,
+                    zIndex: zIndex,
+                },
+            ], children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) }, key !== null && key !== void 0 ? key : 0));
+    };
+    var renderAnimatedLine = function (containerHeightIncludingBelowXAxis, zIndex, points, animatedWidth, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        return (_jsx(Animated.View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onMoveShouldSetResponder: function (evt) { return (pointerConfig ? true : false); }, onStartShouldSetResponder: function (evt) {
+                return pointerConfig && activatePointersInstantlyOnTouch ? true : false;
+            }, onResponderGrant: function (evt) {
+                var _a;
+                if (!pointerConfig)
+                    return;
+                setResponderStartTime(evt.timeStamp);
+                if (activatePointersOnLongPress) {
+                    return;
+                }
+                var x = evt.nativeEvent.locationX;
+                activatePointers(x);
+                (_a = pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, onResponderMove: function (evt) {
+                var _a;
+                if (!pointerConfig)
+                    return;
+                if (activatePointersOnLongPress &&
+                    evt.timeStamp - responderStartTime < activatePointersDelay) {
+                    return;
+                }
+                else {
+                    setResponderActive(true);
+                }
+                var x = evt.nativeEvent.locationX;
+                if (!activatePointersOnLongPress &&
+                    x > (props.width || Dimensions.get('window').width))
+                    return;
+                activatePointers(x);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderMove) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, 
+            // onResponderReject={evt => {
+            //   console.log('evt...reject.......',evt);
+            // }}
+            onResponderEnd: function (evt) {
+                var _a;
+                // console.log('evt...end.......',evt);
+                setResponderStartTime(0);
+                if (resetPointerIndexOnRelease)
+                    setPointerIndex(-1);
+                setResponderActive(false);
+                if (!persistPointer)
+                    setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+                (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+            }, onResponderTerminationRequest: function (evt) { return false; }, 
+            // onResponderTerminate={evt => {
+            //   console.log('evt...terminate.......',evt);
+            // }}
+            // onResponderRelease={evt => {
+            //   setResponderStartTime(0);
+            //   setResponderActive(false);
+            //   setTimeout(() => setPointerX(0), pointerVanishDelay);
+            // }}
+            style: [
+                svgWrapperViewStyle,
+                {
+                    width: animatedWidth,
+                    height: containerHeightIncludingBelowXAxis,
+                    zIndex: zIndex,
+                },
+            ], children: lineSvgComponent(points, currentLineThickness, color, fillPoints, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray, strokeLinecap, showArrow, arrowPoints, arrowStrokeWidth, arrowStrokeColor, arrowFillColor, key, hideDataPoints, paramsData, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray) }, key !== null && key !== void 0 ? key : 0));
+    };
+    var remainingScrollViewProps = {
+        onScroll: function (ev) {
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
+            if (pointerConfig &&
+                pointerConfig.activatePointersOnLongPress &&
+                pointerConfig.autoAdjustPointerLabelPosition) {
+                setScrollX(ev.nativeEvent.contentOffset.x);
+            }
+        },
+        bounces: props.bounces,
+        overScrollMode: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
+    };
+    var renderStrips = function (item, index, ind) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (item.showStrip || index === selectedIndex) {
+            var currentStripHeight = (_a = item.stripHeight) !== null && _a !== void 0 ? _a : stripHeight;
+            var currentStripWidth = (_b = item.stripWidth) !== null && _b !== void 0 ? _b : stripWidth;
+            var currentStripOpacity = (_c = item.stripOpacity) !== null && _c !== void 0 ? _c : stripOpacity;
+            var currentStripStrokeDashArray = (_e = (_d = item.stripStrokeDashArray) !== null && _d !== void 0 ? _d : stripStrokeDashArray) !== null && _e !== void 0 ? _e : '';
+            var currentStripColor = item.stripColor || stripColor;
+            var y1 = currentStripHeight
+                ? containerHeight - currentStripHeight + 8
+                : containerHeight -
+                    ((_f = item.dataPointHeight) !== null && _f !== void 0 ? _f : dataPointsHeight1) / 2 +
+                    14 -
+                    (((_g = item.value) !== null && _g !== void 0 ? _g : 0) * containerHeight) / maxValue;
+            var actualStripHeight = currentStripHeight ||
+                (((_h = item.value) !== null && _h !== void 0 ? _h : 0) * containerHeight) / maxValue - 2 + overflowTop;
+            return (_jsx(Line, { x1: initialSpacing + spacing * index, y1: y1, x2: initialSpacing + spacing * index, y2: y1 + actualStripHeight + 2, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray, opacity: currentStripOpacity }, 'strip' + (ind * 10000 + index)));
+        }
+        return null;
+    };
+    var renderChartContent = function (containerHeightIncludingBelowXAxis) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return (_jsxs(_Fragment, { children: [Object.keys(strips).length > 0 ||
+                    (focusEnabled && showStripOnFocus && selectedIndex !== -1) ? ( // render focus strips separately (so that it's rendered below the data points unless specified otherwise)
+                _jsx(View, { pointerEvents: "none", style: [
+                        svgWrapperViewStyle,
+                        {
+                            width: totalWidth,
+                            height: containerHeightIncludingBelowXAxis,
+                            zIndex: stripOverDataPoints ? 10000 : -1,
+                        },
+                    ], children: _jsxs(Svg, { height: containerHeightIncludingBelowXAxis +
+                            ((_a = props.overflowBottom) !== null && _a !== void 0 ? _a : dataPointsRadius1), children: [Object.keys(strips).map(function (stripKey) {
+                                return Object.keys(strips[stripKey]).map(function (ind) {
+                                    var _a = strips[stripKey][ind], item = _a.item, index = _a.index, key = _a.key;
+                                    return renderStrips(item, index, key);
+                                });
+                            }), focusEnabled && showStripOnFocus && selectedIndex !== -1 ? (_jsxs(_Fragment, { children: [dataSet && pointsFromSet.length
+                                        ? dataSet.map(function (set, ind) {
+                                            return set.data.map(function (item, index) {
+                                                return renderStrips(item, index, ind);
+                                            });
+                                        })
+                                        : (_b = props.data) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
+                                            return renderStrips(item, index, 0);
+                                        }), (_c = props.data2) === null || _c === void 0 ? void 0 : _c.map(function (item, index) {
+                                        return renderStrips(item, index, 1);
+                                    }), (_d = props.data3) === null || _d === void 0 ? void 0 : _d.map(function (item, index) {
+                                        return renderStrips(item, index, 2);
+                                    }), (_e = props.data4) === null || _e === void 0 ? void 0 : _e.map(function (item, index) {
+                                        return renderStrips(item, index, 3);
+                                    }), (_f = props.data5) === null || _f === void 0 ? void 0 : _f.map(function (item, index) {
+                                        return renderStrips(item, index, 4);
+                                    }), (_g = props.secondaryData) === null || _g === void 0 ? void 0 : _g.map(function (item, index) {
+                                        return renderStrips(item, index, 5);
+                                    })] })) : null] }) })) : null, dataSet
+                    ? pointsFromSet.length
+                        ? dataSet.map(function (set, index) {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
+                            if (isAnimated) {
+                                return renderAnimatedLine(containerHeightIncludingBelowXAxis, (_a = set.zIndex) !== null && _a !== void 0 ? _a : zIndex1, pointsFromSet[index], widthValue, (_b = set.thickness) !== null && _b !== void 0 ? _b : thickness1, (_c = set.color) !== null && _c !== void 0 ? _c : color1, fillPointsFromSet[index], (_d = set.startFillColor) !== null && _d !== void 0 ? _d : startFillColor1, (_e = set.endFillColor) !== null && _e !== void 0 ? _e : endFillColor1, (_f = set.startOpacity) !== null && _f !== void 0 ? _f : startOpacity1, (_g = set.endOpacity) !== null && _g !== void 0 ? _g : endOpacity1, (_h = set.strokeDashArray) !== null && _h !== void 0 ? _h : strokeDashArray1, (_j = set.strokeLinecap) !== null && _j !== void 0 ? _j : strokeLinecap1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet === null || arrowStrokeWidthsFromSet === void 0 ? void 0 : arrowStrokeWidthsFromSet[index], arrowStrokeColorsFromSet === null || arrowStrokeColorsFromSet === void 0 ? void 0 : arrowStrokeColorsFromSet[index], arrowFillColorsFromSet === null || arrowFillColorsFromSet === void 0 ? void 0 : arrowFillColorsFromSet[index], (_k = set.hideDataPoints) !== null && _k !== void 0 ? _k : hideDataPoints1, set.data, adjustToOffset(set.data, -((_l = props.yAxisOffset) !== null && _l !== void 0 ? _l : 0)), // need the actual values passed by user
+                                (_m = set.dataPointsShape) !== null && _m !== void 0 ? _m : dataPointsShape1, (_o = set.dataPointsWidth) !== null && _o !== void 0 ? _o : dataPointsWidth1, (_p = set.dataPointsHeight) !== null && _p !== void 0 ? _p : dataPointsHeight1, (_q = set.dataPointsColor) !== null && _q !== void 0 ? _q : dataPointsColor1, (_r = set.dataPointsRadius) !== null && _r !== void 0 ? _r : dataPointsRadius1, (_s = set.textColor) !== null && _s !== void 0 ? _s : textColor1, (_t = set.textFontSize) !== null && _t !== void 0 ? _t : textFontSize1, (_u = set.startIndex) !== null && _u !== void 0 ? _u : 0, (_v = set.endIndex) !== null && _v !== void 0 ? _v : set.data.length - 1, set.isSecondary, showValuesAsDataPointsText, cumulativeSpacingForSet[index], index);
+                            }
+                            else {
+                                return renderLine(containerHeightIncludingBelowXAxis, (_w = set.zIndex) !== null && _w !== void 0 ? _w : zIndex1, pointsFromSet[index], (_x = set.thickness) !== null && _x !== void 0 ? _x : thickness1, (_y = set.color) !== null && _y !== void 0 ? _y : color1, fillPointsFromSet[index], (_z = set.startFillColor) !== null && _z !== void 0 ? _z : startFillColor1, (_0 = set.endFillColor) !== null && _0 !== void 0 ? _0 : endFillColor1, (_1 = set.startOpacity) !== null && _1 !== void 0 ? _1 : startOpacity1, (_2 = set.endOpacity) !== null && _2 !== void 0 ? _2 : endOpacity1, (_3 = set.strokeDashArray) !== null && _3 !== void 0 ? _3 : strokeDashArray1, (_4 = set.strokeLinecap) !== null && _4 !== void 0 ? _4 : strokeLinecap1, set.showArrow || props.showArrows, arrowPointsFromSet[index], arrowStrokeWidthsFromSet === null || arrowStrokeWidthsFromSet === void 0 ? void 0 : arrowStrokeWidthsFromSet[index], arrowStrokeColorsFromSet === null || arrowStrokeColorsFromSet === void 0 ? void 0 : arrowStrokeColorsFromSet[index], arrowFillColorsFromSet === null || arrowFillColorsFromSet === void 0 ? void 0 : arrowFillColorsFromSet[index], (_5 = set.hideDataPoints) !== null && _5 !== void 0 ? _5 : hideDataPoints1, set.data, adjustToOffset(set.data, -((_6 = props.yAxisOffset) !== null && _6 !== void 0 ? _6 : 0)), // need the actual values passed by user
+                                (_7 = set.dataPointsShape) !== null && _7 !== void 0 ? _7 : dataPointsShape1, (_8 = set.dataPointsWidth) !== null && _8 !== void 0 ? _8 : dataPointsWidth1, (_9 = set.dataPointsHeight) !== null && _9 !== void 0 ? _9 : dataPointsHeight1, (_10 = set.dataPointsColor) !== null && _10 !== void 0 ? _10 : dataPointsColor1, (_11 = set.dataPointsRadius) !== null && _11 !== void 0 ? _11 : dataPointsRadius1, (_12 = set.textColor) !== null && _12 !== void 0 ? _12 : textColor1, (_13 = set.textFontSize) !== null && _13 !== void 0 ? _13 : textFontSize1, (_14 = set.startIndex) !== null && _14 !== void 0 ? _14 : 0, (_15 = set.endIndex) !== null && _15 !== void 0 ? _15 : set.data.length - 1, set.isSecondary, showValuesAsDataPointsText, cumulativeSpacingForSet[index], index);
+                            }
+                        })
+                        : null
+                    : isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex1, points, widthValue, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, strokeLinecap1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0)
+                        : renderLine(containerHeightIncludingBelowXAxis, zIndex1, points, thickness1, color1, fillPoints, startFillColor1, endFillColor1, startOpacity1, endOpacity1, strokeDashArray1, strokeLinecap1, props.showArrow1 || props.showArrows, arrow1Points, arrowStrokeWidth1, arrowStrokeColor1, arrowFillColor1, hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0), secondaryPoints
+                    ? isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, widthValue, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.strokeLinecap, secondaryLineConfig.showArrow, secondaryArrowPoints, (_h = secondaryLineConfig.arrowConfig) === null || _h === void 0 ? void 0 : _h.strokeWidth, (_j = secondaryLineConfig.arrowConfig) === null || _j === void 0 ? void 0 : _j.strokeColor, (_k = secondaryLineConfig.arrowConfig) === null || _k === void 0 ? void 0 : _k.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6666)
+                        : renderLine(containerHeightIncludingBelowXAxis, secondaryLineConfig.zIndex, secondaryPoints, secondaryLineConfig.thickness, secondaryLineConfig.color, secondaryFillPoints, secondaryLineConfig.startFillColor, secondaryLineConfig.endFillColor, secondaryLineConfig.startOpacity, secondaryLineConfig.endOpacity, secondaryLineConfig.strokeDashArray, secondaryLineConfig.strokeLinecap, secondaryLineConfig.showArrow, secondaryArrowPoints, (_l = secondaryLineConfig.arrowConfig) === null || _l === void 0 ? void 0 : _l.strokeWidth, (_m = secondaryLineConfig.arrowConfig) === null || _m === void 0 ? void 0 : _m.strokeColor, (_o = secondaryLineConfig.arrowConfig) === null || _o === void 0 ? void 0 : _o.fillColor, secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, secondaryLineConfig.textColor, secondaryLineConfig.textFontSize, secondaryLineConfig.startIndex, secondaryLineConfig.endIndex, true, secondaryLineConfig.showValuesAsDataPointsText, cumulativeSpacingSecondary, 6666)
+                    : null, points2
+                    ? isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex2, points2, widthValue2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, strokeLinecap2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1)
+                        : renderLine(containerHeightIncludingBelowXAxis, zIndex2, points2, thickness2, color2, fillPoints2, startFillColor2, endFillColor2, startOpacity2, endOpacity2, strokeDashArray2, strokeLinecap2, props.showArrow2 || props.showArrows, arrow2Points, arrowStrokeWidth2, arrowStrokeColor2, arrowFillColor2, hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1)
+                    : null, points3
+                    ? isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex3, points3, widthValue3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, strokeLinecap3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, cumulativeSpacing3, 2)
+                        : renderLine(containerHeightIncludingBelowXAxis, zIndex3, points3, thickness3, color3, fillPoints3, startFillColor3, endFillColor3, startOpacity3, endOpacity3, strokeDashArray3, strokeLinecap3, props.showArrow3 || props.showArrows, arrow3Points, arrowStrokeWidth3, arrowStrokeColor3, arrowFillColor3, hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, cumulativeSpacing3, 2)
+                    : null, points4
+                    ? isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex4, points4, widthValue4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, strokeLinecap4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, cumulativeSpacing4, 3)
+                        : renderLine(containerHeightIncludingBelowXAxis, zIndex4, points4, thickness4, color4, fillPoints4, startFillColor4, endFillColor4, startOpacity4, endOpacity4, strokeDashArray4, strokeLinecap4, props.showArrow4 || props.showArrows, arrow4Points, arrowStrokeWidth4, arrowStrokeColor4, arrowFillColor4, hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, cumulativeSpacing4, 3)
+                    : null, points5
+                    ? isAnimated
+                        ? renderAnimatedLine(containerHeightIncludingBelowXAxis, zIndex5, points5, widthValue5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, strokeLinecap5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, cumulativeSpacing5, 4)
+                        : renderLine(containerHeightIncludingBelowXAxis, zIndex5, points5, thickness5, color5, fillPoints5, startFillColor5, endFillColor5, startOpacity5, endOpacity5, strokeDashArray5, strokeLinecap5, props.showArrow5 || props.showArrows, arrow5Points, arrowStrokeWidth5, arrowStrokeColor5, arrowFillColor5, hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, cumulativeSpacing5, 4)
+                    : null, intersectionAreaConfig &&
+                    (props.areaChart || (props.areaChart1 && props.areaChart2))
+                    ? renderIntersection()
+                    : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                        position: 'absolute',
+                        height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                        bottom: 58 + labelsExtraHeight + xAxisLabelsVerticalShift - overflowTop,
+                        // width: totalWidth,
+                        zIndex: 20,
+                    }, children: [!stripOverPointer && renderStripAndLabel(), dataSet ? (renderPointer(0, true)) : (
+                        // dataSet.map((set, index) => renderPointer(index))
+                        _jsxs(_Fragment, { children: [renderPointer(1), points2 ? renderPointer(2) : null, points3 ? renderPointer(3) : null, points4 ? renderPointer(4) : null, points5 ? renderPointer(5) : null, secondaryPoints ? renderPointer(6666) : null, stripOverPointer && renderStripAndLabel()] }))] })) : null, (data0 !== null && data0 !== void 0 ? data0 : data).map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var secondaryLabel = (_c = (_a = item.secondaryLabel) !== null && _a !== void 0 ? _a : (_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelTexts) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : '';
+                    var secondaryLabelTextStyle = (_f = (_e = (_d = item.secondaryLabelTextStyle) !== null && _d !== void 0 ? _d : secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsTextStyle) !== null && _e !== void 0 ? _e : item.labelTextStyle) !== null && _f !== void 0 ? _f : props.xAxisLabelTextStyle;
+                    return (_jsxs(View, { children: [isAnimated
+                                ? renderAnimatedLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
+                                : renderLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent), secondaryXAxis
+                                ? isAnimated
+                                    ? renderAnimatedLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                    : renderLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                : null] }, index));
+                }), (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.dynamicLegendComponent) && pointerX > 0 ? (_jsx(View, { style: [
+                        { position: 'absolute' },
+                        pointerConfig.dynamicLegendContainerStyle,
+                    ], children: pointerConfig.dynamicLegendComponent(pointerItemLocal, pointerIndex) })) : null] }));
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { dataSet: dataSet, scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, showBackgroundSlices: props.showBackgroundSlices })));
+};