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.
257 lines (256 loc) • 18.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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { Animated, Easing, I18nManager, Pressable, View, } from 'react-native';
import RenderBars from './RenderBars';
import RenderStackBars from './RenderStackBars';
import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
import { useBarAndLineChartsWrapper, useBarChart, } from 'gifted-charts-core';
import { StripAndLabel } from '../Components/common/StripAndLabel';
import { Pointer } from '../Components/common/Pointer';
import { screenWidth } from '../utils';
import RenderLineInBarChart from '../Components/BarAndLineChartsWrapper/renderLineInBarChart';
export var BarChart = function (props) {
var _a, _b, _c;
var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
var remainingScrollViewProps = {
onScroll: function (ev) { var _a; return (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev); },
onTouchStart: function (evt) {
if (props.renderTooltip) {
setSelectedIndex([-1]);
}
},
bounces: props.bounces,
overScrollMode: (_b = props.overScrollMode) !== null && _b !== void 0 ? _b : 'auto',
};
var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
var _e = useBarAndLineChartsWrapper(__assign(__assign({}, barAndLineChartsWrapperProps), { isRTL: I18nManager.isRTL })), lineInBarChartProps = _e.lineInBarChartProps, lineInBarChartProps2 = _e.lineInBarChartProps2;
var stackData = barAndLineChartsWrapperProps.stackData;
var labelsAppear = useCallback(function () {
opacityValue.setValue(0);
Animated.timing(opacityValue, {
toValue: 1,
duration: 500,
easing: Easing.ease,
useNativeDriver: false,
}).start();
}, [opacityValue]);
var decreaseWidth = useCallback(function () {
widthValue.setValue(0);
Animated.timing(widthValue, {
toValue: 1,
duration: lineConfig.animationDuration,
easing: Easing.linear,
useNativeDriver: false,
}).start();
}, [lineConfig.animationDuration, widthValue]);
useEffect(function () {
if (lineConfig.isAnimated) {
setTimeout(function () { return decreaseWidth(); }, lineConfig.delay || 0);
}
setTimeout(function () { return labelsAppear(); }, animationDuration);
}, [decreaseWidth, labelsAppear, animationDuration]);
var renderPointer = function (lineNumber) {
if (lineNumber === 1 && hidePointer1)
return;
var pointerItemLocal = pointerItem;
var pointerYLocal = pointerY;
var pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer1Color) || pointerColor;
return Pointer({
pointerX: pointerX,
pointerYLocal: pointerYLocal,
pointerComponent: pointerComponent,
pointerHeight: pointerHeight,
pointerRadius: pointerRadius,
pointerWidth: pointerWidth,
pointerItemLocal: pointerItemLocal,
pointerColorLocal: pointerColorLocal,
});
};
var renderStripAndLabel = function (pointerLabelComponent) {
var pointerItemLocal, pointerYLocal = pointerY;
pointerItemLocal = [pointerItem];
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,
scrollX: 0,
pointerEvents: pointerEvents,
isBarChart: true,
pointerIndex: pointerIndex,
width: totalWidth,
screenWidth: screenWidth,
containsNegative: false,
});
};
var contentContainerStyle = {
position: 'absolute',
height: containerHeightIncludingBelowXAxis,
bottom: 60 + labelsExtraHeight,
paddingLeft: initialSpacing,
width: totalWidth,
flexDirection: 'row',
};
var activatePointer = function (x) {
var _a;
var chartData = stackData !== null && stackData !== void 0 ? stackData : data;
var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
factor = Math.round(factor);
factor = Math.min(factor, chartData.length - 1);
factor = Math.max(factor, 0);
var z = initialSpacing +
(spacing + barWidth) * factor -
(pointerRadius || pointerWidth / 2) +
barWidth / 2;
setPointerX(z);
setPointerIndex(factor);
var item, y;
item = chartData[factor];
var stackSum = 0;
if ('stacks' in item) {
stackSum = item.stacks.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);
}
y =
containerHeight -
((stackSum !== null && stackSum !== void 0 ? stackSum : item.value) * containerHeight) / maxValue -
(pointerRadius || pointerHeight / 2) +
10;
setPointerY(y);
setPointerItem(item);
(_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
};
var renderChartContent = function () {
if (pointerConfig) {
return (_jsxs(View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchStart: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchEnd: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
setResponderStartTime(evt.timeStamp);
if (activatePointersOnLongPress ||
!(pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.activatePointersInstantlyOnTouch)) {
return;
}
var x = evt.nativeEvent.locationX;
if (!activatePointersOnLongPress &&
x > (props.width || screenWidth))
return;
setResponderActive(true);
activatePointer(x);
}, onResponderMove: function (evt) {
if (activatePointersOnLongPress &&
evt.timeStamp - responderStartTime < activatePointersDelay) {
return;
}
else {
setResponderActive(true);
}
var x = evt.nativeEvent.locationX;
if (!activatePointersOnLongPress &&
x > (props.width || screenWidth))
return;
activatePointer(x);
}, onResponderEnd: function (evt) {
var _a;
setResponderStartTime(0);
setPointerIndex(-1);
setResponderActive(false);
if (!persistPointer)
setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
(_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
}, onResponderTerminationRequest: function (evt) { return false; }, style: contentContainerStyle, children: [pointerX > 0 && stripBehindBars ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
position: 'absolute',
height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
bottom: xAxisLabelsVerticalShift,
width: totalWidth,
}, children: renderStripAndLabel(null) })) : null, renderChart(),
// Only For Bar Charts-
showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null,
// Only For Bar Charts-
showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
position: 'absolute',
height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
bottom: xAxisLabelsVerticalShift,
width: totalWidth,
zIndex: 200000,
}, children: [!stripOverPointer &&
!stripBehindBars &&
renderStripAndLabel(null), renderPointer(1), stripOverPointer &&
!stripBehindBars &&
renderStripAndLabel(null), pointerLabelComponent &&
renderStripAndLabel(pointerLabelComponent) // no matter what, pointerLabelComponent will be rendered at last -> over the chart content
] })) : null] }));
}
else {
return (_jsxs(Pressable, { style: contentContainerStyle, onPress: function () {
var _a, _b;
if (props.highlightEnabled && !((_a = selectedIndex.includes) === null || _a === void 0 ? void 0 : _a.call(selectedIndex, -1)))
setSelectedIndex([-1]);
if (props.stackHighlightEnabled && selectedStackIndex !== -1) {
setSelectedStackIndex(-1);
// props.setHighlightedStackIndex?.(-1)
}
(_b = props.onBackgroundPress) === null || _b === void 0 ? void 0 : _b.call(props);
}, children: [renderChart(),
// Only For Bar Charts-
showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null,
// Only For Bar Charts-
showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null] }));
}
};
var renderChart = function () {
if (stackData) {
return stackData.map(function (item, index) {
var _a = getPropsCommonForBarAndStack(item, index), selectedIndex = _a.selectedIndex, stackRestProps = __rest(_a, ["selectedIndex"]);
return (_jsx(RenderStackBars, __assign({ stackData: props.stackData || [], isAnimated: isAnimated, animationDuration: animationDuration, stackBorderRadius: props.stackBorderRadius, stackBorderTopLeftRadius: props.stackBorderTopLeftRadius, stackBorderTopRightRadius: props.stackBorderTopRightRadius, stackBorderBottomLeftRadius: props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius: props.stackBorderBottomRightRadius, autoShiftLabelsForNegativeStacks: autoShiftLabelsForNegativeStacks, selectedStackIndex: selectedStackIndex, setSelectedStackIndex: setSelectedStackIndex,
// highlightedStackIndex={props.highlightedStackIndex??-1}
selectedIndex: selectedIndex[0] }, stackRestProps), index));
});
}
else {
return data.map(function (item, index) {
var _a;
return (_jsx(RenderBars, __assign({ data: data, side: side, minHeight: (_a = props.minHeight) !== null && _a !== void 0 ? _a : (isAnimated && !isThreeD ? 0.1 : 0), sideWidth: props.sideWidth, labelWidth: labelWidth, isThreeD: isThreeD, isAnimated: isAnimated, animationDuration: animationDuration, animatedHeight: animatedHeight, appearingOpacity: appearingOpacity, roundedTop: props.roundedTop, roundedBottom: props.roundedBottom, frontColor: props.frontColor, sideColor: props.sideColor, topColor: props.topColor, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, autoShiftLabels: autoShiftLabels, barStyle: props.barStyle }, getPropsCommonForBarAndStack(item, index)), index));
});
}
};
return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, onScrollEndDrag: props.onScrollEndDrag })));
};