react-gifted-charts
Version:
ReactJS counterpart of react-native-gifted-charts. An intuitive charting library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React
688 lines • 81.5 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, useRef, useState } from 'react';
import { screenWidth } from '../utils';
import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset } from 'gifted-charts-core';
import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
import { StripAndLabel } from '../Components/common/StripAndLabel';
import { Pointer } from '../Components/common/Pointer';
import { animated, useSpring } from '@react-spring/web';
// let initialData: Array<lineDataItem> | null = null;
// let animations: Array<Animated.Value> = [];
var prevPoints = '';
export var LineChart = function (props) {
var _a, _b, _c, _d;
var scrollRef = useRef(null);
// const opacValue = useMemo(() => new Animated.Value(0), []);
// const heightValue = useMemo(() => new Animated.Value(0), []);
// const widthValue = useMemo(() => new Animated.Value(0), []);
// const widthValue2 = useMemo(() => new Animated.Value(0), []);
// const widthValue3 = useMemo(() => new Animated.Value(0), []);
// const widthValue4 = useMemo(() => new Animated.Value(0), []);
// const widthValue5 = useMemo(() => new Animated.Value(0), []);
// if (!initialData) {
// initialData = props.dataSet?.[0]?.data ?? props.data ?? [];
// animations = initialData.map(item => new Animated.Value(item.value));
// }
var _e = useLineChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : 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, 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, pointerItem5 = _e.pointerItem5, setPointerItem5 = _e.setPointerItem5, pointerYsForDataSet = _e.pointerYsForDataSet, setPointerYsForDataSet = _e.setPointerYsForDataSet, secondaryPointerY = _e.secondaryPointerY, setSecondaryPointerY = _e.setSecondaryPointerY, secondaryPointerItem = _e.secondaryPointerItem, setSecondaryPointerItem = _e.setSecondaryPointerItem, setPointerItemsForSet = _e.setPointerItemsForSet, setSecondaryPointerItemsForSet = _e.setSecondaryPointerItemsForSet,
// responderStartTime,
// setResponderStartTime,
// 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, activatePointersDelay = _e.activatePointersDelay, persistPointer = _e.persistPointer, 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, pointerEvents = _e.pointerEvents, focusEnabled = _e.focusEnabled, showDataPointOnFocus = _e.showDataPointOnFocus, showStripOnFocus = _e.showStripOnFocus, 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, mostNegativeValue = _e.mostNegativeValue, lastLineNumber = _e.lastLineNumber, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, renderTooltip1 = _e.renderTooltip1, renderTooltip2 = _e.renderTooltip2, renderTooltip3 = _e.renderTooltip3, renderTooltip4 = _e.renderTooltip4, renderTooltip5 = _e.renderTooltip5, renderTooltipSecondary = _e.renderTooltipSecondary, pointerItemLocal = _e.pointerItemLocal
// oldPoints
;
var svgHeight = containerHeightIncludingBelowXAxis +
((_b = props.overflowBottom) !== null && _b !== void 0 ? _b : dataPointsRadius1);
var secondaryXAxis = props.secondaryXAxis, intersectionAreaConfig = props.intersectionAreaConfig;
// const widthValuesFromSet = useMemo(
// () => dataSet?.map(set => new Animated.Value(0)),
// [],
// );
// useEffect(() => {
// if (animateOnDataChange) {
// Animated.parallel(
// animations.map((anItem, index) =>
// Animated.timing(anItem, {
// toValue: data[index]?.value ?? 0,
// useNativeDriver: Platform.OS === 'ios', // if useNativeDriver is set to true, animateOnDataChange feature fails for Android, so setting it true only for iOS
// duration: onDataChangeAnimationDuration,
// }),
// ),
// ).start();
// }
// }, [animateOnDataChange, data, onDataChangeAnimationDuration]);
// const labelsAppear = useCallback(() => {
// opacValue.setValue(0);
// Animated.timing(opacValue, {
// toValue: 1,
// duration: 500,
// easing: Easing.ease,
// useNativeDriver: false,
// }).start();
// }, [opacValue]);
// const appearingOpacity = opacValue.interpolate({
// inputRange: [0, 1],
// outputRange: [0, 1],
// });
// const [mounted, setMounted] = useState(false)
// const [mounted2, setMounted2] = useState(false)
// const [mounted3, setMounted3] = useState(false)
// const [mounted4, setMounted4] = useState(false)
// const [mounted5, setMounted5] = useState(false)
var _g = __read(useState(dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (v) { return false; })), 2), mountedForDataSet = _g[0], setMountedForDataSet = _g[1];
var widthValue = useSpring({
from: { width: 0 },
to: { width: totalWidth },
config: { duration: animationDuration }
}).width;
var widthValue2 = useSpring({
from: { width: 0 },
to: { width: totalWidth },
delay: animateTogether ? 0 : animationDuration,
config: { duration: animationDuration }
}).width;
var widthValue3 = useSpring({
from: { width: 0 },
to: { width: totalWidth },
delay: animateTogether ? 0 : animationDuration * 2,
config: { duration: animationDuration }
}).width;
var widthValue4 = useSpring({
from: { width: 0 },
to: { width: totalWidth },
delay: animateTogether ? 0 : animationDuration * 3,
config: { duration: animationDuration }
}).width;
var widthValue5 = useSpring({
from: { width: 0 },
to: { width: totalWidth },
delay: animateTogether ? 0 : animationDuration * 4,
config: { duration: animationDuration }
}).width;
var widthValuesFromSet = useSpring({
widthValuesFromSet: mountedForDataSet === null || mountedForDataSet === void 0 ? void 0 : mountedForDataSet.map(function (v, i) {
return mountedForDataSet[i] ? totalWidth : 0;
})
}).widthValuesFromSet;
// const decreaseWidth = useCallback(() => {
// widthValue.setValue(0);
// Animated.timing(widthValue, {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [animationDuration, widthValue]);
// const decreaseWidth2 = useCallback(() => {
// widthValue2.setValue(0);
// Animated.timing(widthValue2, {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [animationDuration, widthValue2]);
// const decreaseWidth3 = useCallback(() => {
// widthValue3.setValue(0);
// Animated.timing(widthValue3, {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [animationDuration, widthValue3]);
// const decreaseWidth4 = useCallback(() => {
// widthValue4.setValue(0);
// Animated.timing(widthValue4, {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [animationDuration, widthValue4]);
// const decreaseWidth5 = useCallback(() => {
// widthValue5.setValue(0);
// Animated.timing(widthValue5, {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [animationDuration, widthValue5]);
// const decreaseWidthsFromSet = useCallback(() => {
// dataSet?.map((set, index) => {
// widthValuesFromSet?.[index]?.setValue(0);
// if (widthValuesFromSet?.[index]) {
// Animated.timing(widthValuesFromSet?.[index], {
// toValue: totalWidth,
// duration: animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }
// });
// }, [animationDuration, widthValuesFromSet]);
// useEffect(() => {
// setMounted(true)
// // labelsAppear();
// // widthValuesFromSet?.forEach((item, index) => {
// // setTimeout(
// // () => {
// // setMountedForDataSet(dataSet?.map((v,i)=>i===index));
// // },
// // animateTogether ? 0 : animationDuration * index,
// // );
// // });
// dataSet?.forEach((item, index) => {
// setTimeout(
// () => {
// setMountedForDataSet(dataSet?.map((v, i) => i === index))
// },
// animateTogether ? 0 : animationDuration * index
// )
// })
// setTimeout(
// () => {
// setMounted2(true)
// },
// animateTogether ? 0 : animationDuration
// )
// setTimeout(
// () => {
// setMounted3(true)
// },
// animateTogether ? 0 : animationDuration * 2
// )
// setTimeout(
// () => {
// setMounted4(true)
// },
// animateTogether ? 0 : animationDuration * 3
// )
// setTimeout(
// () => {
// setMounted5(true)
// },
// animateTogether ? 0 : animationDuration * 4
// )
// }, [
// animateTogether,
// animationDuration
// // labelsAppear,
// ])
var labelsWidth = spacing + labelsExtraHeight;
var svgWrapperViewStyle = {
position: 'absolute',
height: svgHeight,
left: 0,
bottom: 73 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
zIndex: 1,
overflow: 'hidden'
};
var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
var _a, _b;
return (_jsx("div", { style: {
position: 'absolute',
bottom: top
? containerHeight +
60 +
((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
: 64 - xAxisThickness - xAxisTextNumberOfLines * 18,
zIndex: 10,
width: spacing + labelsExtraHeight,
left: initialSpacing * 2 +
spacing * index -
labelsWidth / 2 +
(index === 0 && initialSpacing < 10 ? 10 : -2),
// index === 0 && initialSpacing < 10
// ? initialSpacing / 2 + spacing * index + spacing/2
// : initialSpacing / 2 + spacing * index + spacing/2 - 10,
height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
transform: rotateLabel ? "rotate(60deg)" : ""
}, children: labelComponent ? (labelComponent()) : (_jsx("div", { style: __assign({ textAlign: 'center' }, labelTextStyle), children: label || '' })) }));
};
// const renderAnimatedLabel = (
// index: number,
// label: String,
// labelTextStyle: any,
// labelComponent: Function | undefined,
// ) => {
// return (
// <Animated.View
// style={[
// {
// height: rotateLabel
// ? 40
// : props.xAxisLabelsHeight ?? xAxisTextNumberOfLines * 18,
// position: 'absolute',
// bottom: 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'}]},
// ]}>
// {labelComponent ? (
// labelComponent()
// ) : (
// <Text
// style={[{textAlign: 'center'}, labelTextStyle]}
// numberOfLines={xAxisTextNumberOfLines}>
// {label || ''}
// </Text>
// )}
// </Animated.View>
// );
// };
var onStripPress = function (item, index) {
if (props.focusedDataPointIndex === undefined || !props.onFocus) {
setSelectedIndex(index);
}
if (props.onFocus) {
props.onFocus(item, index);
}
};
var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key, renderTooltip) {
var focusEnabledLocal = focusEnabled || props.renderTooltip;
var getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
return dataForRender.map(function (item, index) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
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 ||
(focusEnabled && 'orange');
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;
}
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;
}
if (showValuesAsDataPointsText) {
text = originalDataFromProps[index].value;
}
var dataPointLabelWidth = item.dataPointLabelWidth
? item.dataPointLabelWidth
: props.dataPointLabelWidth
? props.dataPointLabelWidth
: 30;
var currentStripHeight = (_e = item.stripHeight) !== null && _e !== void 0 ? _e : stripHeight;
var currentStripWidth = (_f = item.stripWidth) !== null && _f !== void 0 ? _f : stripWidth;
var currentStripOpacity = (_g = item.stripOpacity) !== null && _g !== void 0 ? _g : stripOpacity;
var currentStripColor = item.stripColor || stripColor;
var currentStripStrokeDashArray = (_j = (_h = item.stripStrokeDashArray) !== null && _h !== void 0 ? _h : stripStrokeDashArray) !== null && _j !== void 0 ? _j : '';
var position = 'left'; // I18nManager.isRTL ? 'right' : 'left';
var y1 = currentStripHeight
? containerHeight - currentStripHeight + 8
: containerHeight -
dataPointsHeight / 2 +
14 -
(item.value * containerHeight) / maxValue;
var actualStripHeight = currentStripHeight ||
(item.value * containerHeight) / maxValue - 2 + overflowTop;
return (_jsxs(Fragment, { children: [focusEnabledLocal ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx("rect", { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'transparent', onMouseDown: function (evt) {
var locationY = evt.nativeEvent.y; // Note that we have another property named pageY which can be useful
handleFocus(index, item, locationY, onStripPress);
}, onMouseUp: handleUnFocus, onMouseMove: function (evt) {
if (!props.renderTooltip)
return;
var locationY = evt.nativeEvent.y; // Note that we have another property named pageY which can be useful
handleFocus(index, item, locationY, onStripPress);
}, onMouseLeave: function () {
if (props.renderTooltip)
handleUnFocus();
} })) : null })) : null, item.showStrip ||
(focusEnabledLocal && index === selectedIndex && showStripOnFocus) ? (_jsx("line", { x1: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y1: y1, x2: initialSpacing + spacing * index - currentStripWidth / 2 - 1, y2: y1 + actualStripHeight, strokeWidth: currentStripWidth, stroke: currentStripColor, strokeDasharray: currentStripStrokeDashArray.toString(), opacity: currentStripOpacity })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (_jsx("foreignObject", { height: dataPointsHeight * 2, width: dataPointsWidth * 2, x: initialSpacing -
dataPointsWidth / 2 +
((_k = spacingArray[index - 1]) !== null && _k !== void 0 ? _k : 0), y: getYOrSecondaryY(item.value) - dataPointsHeight / 2, onClick: function () {
if (item.onPress) {
item.onPress(item, index);
}
else if (props.onPress) {
props.onPress(item, index);
}
else if (focusEnabledLocal) {
handleFocus(index, item, 0, onStripPress);
}
}, onLoad: function () {
// In absence of this, focus persists forever
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
}, onMouseEnter: function () {
// In absence of this, focus persists forever
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
}, onMouseUp: function () {
// In absence of this, focus persists forever
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
}, 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: totalWidth, height: svgHeight, fill: showDataPointOnFocus
? index === selectedIndex
? dataPointsColor
: 'none'
: dataPointsColor, onClick: function () {
if (item.onPress) {
item.onPress(item, index);
}
else if (props.onPress) {
props.onPress(item, index);
}
else if (focusEnabledLocal) {
handleFocus(index, item, 0, onStripPress);
}
}, onMouseUp: 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, onClick: function () {
if (item.onPress) {
item.onPress(item, index);
}
else if (props.onPress) {
props.onPress(item, index);
}
else if (focusEnabledLocal) {
handleFocus(index, item, 0, onStripPress);
}
}, onMouseUp: function () {
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
} })) }, index)), dataPointLabelComponent || renderTooltip ? (!showTextOnFocus || index === selectedIndex ? (_jsxs("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, onLoad: function () {
// In absence of this, focus persists forever
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
}, onMouseEnter: function () {
// In absence of this, focus persists forever
if (!item.onPress && !props.onPress && focusEnabled) {
handleUnFocus();
}
}, children: [showDataPointLabelOnFocus
? index === selectedIndex &&
(focusTogether || key == selectedLineNumber)
? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
: null
: dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index), index === selectedIndex && key == selectedLineNumber
? renderTooltip === null || renderTooltip === void 0 ? void 0 : renderTooltip(item, index)
: null] })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx("text", { 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').toString(), strokeWidth: item.verticalLineThickness || props.verticalLinesThickness || 2, strokeDasharray: ((_c = (_b = item.verticalLineStrokeDashArray) !== null && _b !== void 0 ? _b : props.verticalLinesStrokeDashArray) !== null && _c !== void 0 ? _c : '').toString() }, index));
}
return null;
});
};
var renderPointer = function (lineNumber, isDataSet) {
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];
pointerYLocal_1 = pointerYsForDataSet[index] + xAxisThickness - 10; // -10 for web only
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,
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;
// 6 is for secondaryData
if (lineNumber === 6 && hideSecondaryPointer)
return;
var pointerItemLocal, pointerYLocal = 0, 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 6:
pointerItemLocal = secondaryPointerItem;
pointerYLocal = secondaryPointerY;
pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.secondaryPointerColor) || pointerColor;
break;
}
pointerYLocal += xAxisThickness - 10; // -10 for web only
return Pointer({
pointerX: pointerX,
pointerYLocal: pointerYLocal,
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));
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,
showPointerStrip: showPointerStrip,
pointerStripWidth: pointerStripWidth,
containerHeight: containerHeight,
xAxisThickness: xAxisThickness,
pointerStripColor: pointerStripColor,
pointerConfig: pointerConfig,
pointerLabelComponent: pointerLabelComponent,
secondaryPointerItem: secondaryPointerItem,
scrollX: scrollX,
pointerEvents: pointerEvents,
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 (key) {
return props.lineGradientComponent ? (props.lineGradientComponent()) : (_jsxs("linearGradient", { id: "lineGradient".concat(key), 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, key) {
return props.areaGradientComponent ? (props.areaGradientComponent()) : (_jsxs("linearGradient", { id: "Gradient".concat(key), 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("div", { style: __assign(__assign({}, svgWrapperViewStyle), { width: totalWidth }), children: _jsxs("svg", { height: svgHeight - 6, width: totalWidth, 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, renderTooltip = set.renderTooltip;
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, renderTooltip);
}) }));
}
return (_jsxs(_Fragment, { children: [renderDataPoints(hideDataPoints1, data, props.data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1, false, showValuesAsDataPointsText, cumulativeSpacing1, 0, renderTooltip1), points2
? renderDataPoints(hideDataPoints2, data2, props.data2, dataPointsShape2, dataPointsWidth2, dataPointsHeight2, dataPointsColor2, dataPointsRadius2, textColor2, textFontSize2, startIndex2, endIndex2, false, showValuesAsDataPointsText, cumulativeSpacing2, 1, renderTooltip2)
: null, points3
? renderDataPoints(hideDataPoints3, data3, props.data3, dataPointsShape3, dataPointsWidth3, dataPointsHeight3, dataPointsColor3, dataPointsRadius3, textColor3, textFontSize3, startIndex3, endIndex3, false, showValuesAsDataPointsText, cumulativeSpacing3, 2, renderTooltip3)
: null, points4
? renderDataPoints(hideDataPoints4, data4, props.data4, dataPointsShape4, dataPointsWidth4, dataPointsHeight4, dataPointsColor4, dataPointsRadius4, textColor4, textFontSize4, startIndex4, endIndex4, false, showValuesAsDataPointsText, cumulativeSpacing4, 3, renderTooltip4)
: null, points5
? renderDataPoints(hideDataPoints5, data5, props.data5, dataPointsShape5, dataPointsWidth5, dataPointsHeight5, dataPointsColor5, dataPointsRadius5, textColor5, textFontSize5, startIndex5, endIndex5, false, showValuesAsDataPointsText, cumulativeSpacing5, 4, renderTooltip5)
: null, secondaryPoints
? renderDataPoints(secondaryLineConfig.hideDataPoints, secondaryData, props.secondaryData, secondaryLineConfig.dataPointsShape, secondaryLineConfig.dataPointsWidth, secondaryLineConfig.dataPointsHeight, secondaryLineConfig.dataPointsColor, secondaryLineConfig.dataPointsRadius, se