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.
668 lines • 95.2 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 { 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 '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, endI