react-native-gifted-charts
Version:
The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
641 lines • 88.7 kB
JavaScript
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 { 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 { screenWidth, usePrevious } from '../utils';
import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, } from 'react-native-svg';
import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from '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);
export var LineChart = function (props) {
var _a, _b, _c;
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 _d = useLineChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : screenWidth })), curveType = _d.curveType, scrollX = _d.scrollX, setScrollX = _d.setScrollX, arrow1Points = _d.arrow1Points, arrow2Points = _d.arrow2Points, arrow3Points = _d.arrow3Points, arrow4Points = _d.arrow4Points, arrow5Points = _d.arrow5Points, secondaryArrowPoints = _d.secondaryArrowPoints, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, pointerX = _d.pointerX, setPointerX = _d.setPointerX, pointerY = _d.pointerY, setPointerY = _d.setPointerY, pointerItem = _d.pointerItem, setPointerItem = _d.setPointerItem, pointerY2 = _d.pointerY2, setPointerY2 = _d.setPointerY2, pointerItem2 = _d.pointerItem2, setPointerItem2 = _d.setPointerItem2, pointerY3 = _d.pointerY3, setPointerY3 = _d.setPointerY3, pointerItem3 = _d.pointerItem3, setPointerItem3 = _d.setPointerItem3, pointerY4 = _d.pointerY4, setPointerY4 = _d.setPointerY4, pointerItem4 = _d.pointerItem4, setPointerItem4 = _d.setPointerItem4, pointerY5 = _d.pointerY5, setPointerY5 = _d.setPointerY5, pointerYsForDataSet = _d.pointerYsForDataSet, setPointerYsForDataSet = _d.setPointerYsForDataSet, pointerItem5 = _d.pointerItem5, setPointerItem5 = _d.setPointerItem5, secondaryPointerY = _d.secondaryPointerY, setSecondaryPointerY = _d.setSecondaryPointerY, secondaryPointerItem = _d.secondaryPointerItem, setSecondaryPointerItem = _d.setSecondaryPointerItem, pointerItemsForSet = _d.pointerItemsForSet, setPointerItemsForSet = _d.setPointerItemsForSet, secondaryPointerItemsForSet = _d.secondaryPointerItemsForSet, setSecondaryPointerItemsForSet = _d.setSecondaryPointerItemsForSet, responderStartTime = _d.responderStartTime, setResponderStartTime = _d.setResponderStartTime, setResponderActive = _d.setResponderActive, points = _d.points, points2 = _d.points2, points3 = _d.points3, points4 = _d.points4, points5 = _d.points5, secondaryPoints = _d.secondaryPoints, fillPoints = _d.fillPoints, fillPoints2 = _d.fillPoints2, fillPoints3 = _d.fillPoints3, fillPoints4 = _d.fillPoints4, fillPoints5 = _d.fillPoints5, secondaryFillPoints = _d.secondaryFillPoints, pointsFromSet = _d.pointsFromSet, fillPointsFromSet = _d.fillPointsFromSet, arrowPointsFromSet = _d.arrowPointsFromSet, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, containerHeight = _d.containerHeight, data = _d.data, data2 = _d.data2, data3 = _d.data3, data4 = _d.data4, data5 = _d.data5, secondaryData = _d.secondaryData, dataSet = _d.dataSet, data0 = _d.data0, labelsExtraHeight = _d.labelsExtraHeight, animationDuration = _d.animationDuration, onDataChangeAnimationDuration = _d.onDataChangeAnimationDuration, animateTogether = _d.animateTogether, renderDataPointsAfterAnimationEnds = _d.renderDataPointsAfterAnimationEnds, animateOnDataChange = _d.animateOnDataChange, startIndex1 = _d.startIndex1, startIndex2 = _d.startIndex2, endIndex1 = _d.endIndex1, endIndex2 = _d.endIndex2, startIndex3 = _d.startIndex3, endIndex3 = _d.endIndex3, startIndex4 = _d.startIndex4, endIndex4 = _d.endIndex4, startIndex5 = _d.startIndex5, endIndex5 = _d.endIndex5, initialSpacing = _d.initialSpacing, thickness = _d.thickness, yAxisLabelWidth = _d.yAxisLabelWidth, spacing = _d.spacing, xAxisThickness = _d.xAxisThickness, dataPointsHeight1 = _d.dataPointsHeight1, dataPointsWidth1 = _d.dataPointsWidth1, dataPointsRadius1 = _d.dataPointsRadius1, dataPointsColor1 = _d.dataPointsColor1, dataPointsShape1 = _d.dataPointsShape1, dataPointsHeight2 = _d.dataPointsHeight2, dataPointsWidth2 = _d.dataPointsWidth2, dataPointsRadius2 = _d.dataPointsRadius2, dataPointsColor2 = _d.dataPointsColor2, dataPointsShape2 = _d.dataPointsShape2, dataPointsHeight3 = _d.dataPointsHeight3, dataPointsWidth3 = _d.dataPointsWidth3, dataPointsRadius3 = _d.dataPointsRadius3, dataPointsColor3 = _d.dataPointsColor3, dataPointsShape3 = _d.dataPointsShape3, dataPointsHeight4 = _d.dataPointsHeight4, dataPointsWidth4 = _d.dataPointsWidth4, dataPointsRadius4 = _d.dataPointsRadius4, dataPointsColor4 = _d.dataPointsColor4, dataPointsShape4 = _d.dataPointsShape4, dataPointsHeight5 = _d.dataPointsHeight5, dataPointsWidth5 = _d.dataPointsWidth5, dataPointsRadius5 = _d.dataPointsRadius5, dataPointsColor5 = _d.dataPointsColor5, dataPointsShape5 = _d.dataPointsShape5, getIsNthAreaChart = _d.getIsNthAreaChart, textFontSize1 = _d.textFontSize1, textFontSize2 = _d.textFontSize2, textFontSize3 = _d.textFontSize3, textFontSize4 = _d.textFontSize4, textFontSize5 = _d.textFontSize5, textColor1 = _d.textColor1, textColor2 = _d.textColor2, textColor3 = _d.textColor3, textColor4 = _d.textColor4, textColor5 = _d.textColor5, totalWidth = _d.totalWidth, maxValue = _d.maxValue, overflowTop = _d.overflowTop, extendedContainerHeight = _d.extendedContainerHeight, getX = _d.getX, getY = _d.getY, getSecondaryY = _d.getSecondaryY, secondaryMaxValue = _d.secondaryMaxValue, showValuesAsDataPointsText = _d.showValuesAsDataPointsText, thickness1 = _d.thickness1, thickness2 = _d.thickness2, thickness3 = _d.thickness3, thickness4 = _d.thickness4, thickness5 = _d.thickness5, zIndex1 = _d.zIndex1, zIndex2 = _d.zIndex2, zIndex3 = _d.zIndex3, zIndex4 = _d.zIndex4, zIndex5 = _d.zIndex5, strokeDashArray1 = _d.strokeDashArray1, strokeDashArray2 = _d.strokeDashArray2, strokeDashArray3 = _d.strokeDashArray3, strokeDashArray4 = _d.strokeDashArray4, strokeDashArray5 = _d.strokeDashArray5, strokeLinecap1 = _d.strokeLinecap1, strokeLinecap2 = _d.strokeLinecap2, strokeLinecap3 = _d.strokeLinecap3, strokeLinecap4 = _d.strokeLinecap4, strokeLinecap5 = _d.strokeLinecap5, rotateLabel = _d.rotateLabel, isAnimated = _d.isAnimated, hideDataPoints1 = _d.hideDataPoints1, hideDataPoints2 = _d.hideDataPoints2, hideDataPoints3 = _d.hideDataPoints3, hideDataPoints4 = _d.hideDataPoints4, hideDataPoints5 = _d.hideDataPoints5, color1 = _d.color1, color2 = _d.color2, color3 = _d.color3, color4 = _d.color4, color5 = _d.color5, startFillColor1 = _d.startFillColor1, endFillColor1 = _d.endFillColor1, startOpacity1 = _d.startOpacity1, endOpacity1 = _d.endOpacity1, startFillColor2 = _d.startFillColor2, endFillColor2 = _d.endFillColor2, startOpacity2 = _d.startOpacity2, endOpacity2 = _d.endOpacity2, startFillColor3 = _d.startFillColor3, endFillColor3 = _d.endFillColor3, startOpacity3 = _d.startOpacity3, endOpacity3 = _d.endOpacity3, startFillColor4 = _d.startFillColor4, endFillColor4 = _d.endFillColor4, startOpacity4 = _d.startOpacity4, endOpacity4 = _d.endOpacity4, startFillColor5 = _d.startFillColor5, endFillColor5 = _d.endFillColor5, startOpacity5 = _d.startOpacity5, endOpacity5 = _d.endOpacity5, arrowStrokeWidth1 = _d.arrowStrokeWidth1, arrowStrokeColor1 = _d.arrowStrokeColor1, arrowFillColor1 = _d.arrowFillColor1, arrowStrokeWidth2 = _d.arrowStrokeWidth2, arrowStrokeColor2 = _d.arrowStrokeColor2, arrowFillColor2 = _d.arrowFillColor2, arrowStrokeWidth3 = _d.arrowStrokeWidth3, arrowStrokeColor3 = _d.arrowStrokeColor3, arrowFillColor3 = _d.arrowFillColor3, arrowStrokeWidth4 = _d.arrowStrokeWidth4, arrowStrokeColor4 = _d.arrowStrokeColor4, arrowFillColor4 = _d.arrowFillColor4, arrowStrokeWidth5 = _d.arrowStrokeWidth5, arrowStrokeColor5 = _d.arrowStrokeColor5, arrowFillColor5 = _d.arrowFillColor5, arrowStrokeWidthsFromSet = _d.arrowStrokeWidthsFromSet, arrowStrokeColorsFromSet = _d.arrowStrokeColorsFromSet, arrowFillColorsFromSet = _d.arrowFillColorsFromSet, secondaryLineConfig = _d.secondaryLineConfig, gradientDirection = _d.gradientDirection, stepHeight = _d.stepHeight, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, xAxisTextNumberOfLines = _d.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, pointerConfig = _d.pointerConfig, pointerHeight = _d.pointerHeight, pointerWidth = _d.pointerWidth, pointerRadius = _d.pointerRadius, pointerColor = _d.pointerColor, pointerComponent = _d.pointerComponent, showPointerStrip = _d.showPointerStrip, pointerStripHeight = _d.pointerStripHeight, pointerStripWidth = _d.pointerStripWidth, pointerStripColor = _d.pointerStripColor, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerLabelComponent = _d.pointerLabelComponent, stripOverPointer = _d.stripOverPointer, shiftPointerLabelX = _d.shiftPointerLabelX, shiftPointerLabelY = _d.shiftPointerLabelY, pointerLabelWidth = _d.pointerLabelWidth, pointerLabelHeight = _d.pointerLabelHeight, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerVanishDelay = _d.pointerVanishDelay, activatePointersOnLongPress = _d.activatePointersOnLongPress, activatePointersInstantlyOnTouch = _d.activatePointersInstantlyOnTouch, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, resetPointerIndexOnRelease = _d.resetPointerIndexOnRelease, hidePointers = _d.hidePointers, hidePointer1 = _d.hidePointer1, hidePointer2 = _d.hidePointer2, hidePointer3 = _d.hidePointer3, hidePointer4 = _d.hidePointer4, hidePointer5 = _d.hidePointer5, cumulativeSpacing1 = _d.cumulativeSpacing1, cumulativeSpacing2 = _d.cumulativeSpacing2, cumulativeSpacing3 = _d.cumulativeSpacing3, cumulativeSpacing4 = _d.cumulativeSpacing4, cumulativeSpacing5 = _d.cumulativeSpacing5, cumulativeSpacingSecondary = _d.cumulativeSpacingSecondary, cumulativeSpacingForSet = _d.cumulativeSpacingForSet, hideSecondaryPointer = _d.hideSecondaryPointer, hidePointerDataPointForMissingValues = _d.hidePointerDataPointForMissingValues, pointerEvents = _d.pointerEvents, focusEnabled = _d.focusEnabled, showDataPointOnFocus = _d.showDataPointOnFocus, showStripOnFocus = _d.showStripOnFocus, stripOverDataPoints = _d.stripOverDataPoints, showTextOnFocus = _d.showTextOnFocus, showDataPointLabelOnFocus = _d.showDataPointLabelOnFocus, stripHeight = _d.stripHeight, stripWidth = _d.stripWidth, stripColor = _d.stripColor, stripOpacity = _d.stripOpacity, stripStrokeDashArray = _d.stripStrokeDashArray, _e = _d.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _e === void 0 ? 0 : _e, lineGradient = _d.lineGradient, lineGradientDirection = _d.lineGradientDirection, lineGradientStartColor = _d.lineGradientStartColor, lineGradientEndColor = _d.lineGradientEndColor, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, areaChart = _d.areaChart, mostNegativeValue = _d.mostNegativeValue, strips = _d.strips, lastLineNumber = _d.lastLineNumber, focusTogether = _d.focusTogether, selectedLineNumber = _d.selectedLineNumber, handleFocus = _d.handleFocus, handleUnFocus = _d.handleUnFocus, stepValue = _d.stepValue, pointerItemLocal = _d.pointerItemLocal;
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: index === 0 && initialSpacing < 10
? initialSpacing / 2 + spacing * index - spacing / 2 + 4
: initialSpacing / 2 + spacing * index - spacing / 2 - 10,
height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
},
rotateLabel && { transform: [{ rotate: '60deg' }] },
], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], 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: index === 0 && initialSpacing < 10
? initialSpacing / 2 + spacing * index - spacing / 2 + 4
: initialSpacing / 2 + spacing * index - spacing / 2 - 10,
opacity: appearingOpacity,
},
rotateLabel && { transform: [{ rotate: '60deg' }] },
], children: labelComponent ? (labelComponent()) : (_jsx(Text, { 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;
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 ? (_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) })) : 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 ? (_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) })) : 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));
});
};
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,
}) }, '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,
});
};
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) {
return props.areaGradientComponent ? (props.areaGradientComponent()) : (_jsxs(LinearGradient, { id: "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 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 isNthAreaChart = !!dataSet
? ((_a = dataSet[Number(key)].areaChart) !== null && _a !== void 0 ? _a : areaChart)
: getIsNthAreaChart(key !== null && key !== void 0 ? key : 0);
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))) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), isNthAreaChart &&
getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity), isNthAreaChart ? (props.interpolateMissingValues === false &&
propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animate