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
211 lines • 14 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);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import RenderBars from './RenderBars';
import RenderStackBars from './RenderStackBars';
import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
import { useBarChart } from 'gifted-charts-core';
import { StripAndLabel } from '../Components/common/StripAndLabel';
import { Pointer } from '../Components/common/Pointer';
export var BarChart = function (props) {
// const heightValue = useMemo(() => new Animated.Value(0), []);
// const opacValue = useMemo(() => new Animated.Value(0), []);
// const widthValue = useMemo(() => new Animated.Value(0), []);
var _a, _b, _c, _d;
// eslint-disable-next-line react-hooks/rules-of-hooks
var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
var scrollToBarRef = 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);
}
}
};
var _e = useBarChart(__assign(__assign({}, props), { parentWidth: (_b = props.parentWidth) !== null && _b !== void 0 ? _b : window.innerWidth })), hidePointer1 = _e.hidePointer1, pointerItem = _e.pointerItem, pointerY = _e.pointerY, pointerConfig = _e.pointerConfig, pointerColor = _e.pointerColor, pointerX = _e.pointerX, setPointerX = _e.setPointerX, setPointerY = _e.setPointerY, setPointerIndex = _e.setPointerIndex, setPointerItem = _e.setPointerItem, maxValue = _e.maxValue, persistPointer = _e.persistPointer, pointerVanishDelay = _e.pointerVanishDelay, pointerComponent = _e.pointerComponent, pointerHeight = _e.pointerHeight, pointerRadius = _e.pointerRadius, pointerWidth = _e.pointerWidth, autoAdjustPointerLabelPosition = _e.autoAdjustPointerLabelPosition, pointerLabelWidth = _e.pointerLabelWidth, activatePointersOnLongPress = _e.activatePointersOnLongPress, yAxisLabelWidth = _e.yAxisLabelWidth, shiftPointerLabelX = _e.shiftPointerLabelX, pointerLabelHeight = _e.pointerLabelHeight, pointerStripUptoDataPoint = _e.pointerStripUptoDataPoint, pointerStripHeight = _e.pointerStripHeight, shiftPointerLabelY = _e.shiftPointerLabelY, showPointerStrip = _e.showPointerStrip, pointerStripWidth = _e.pointerStripWidth, containerHeight = _e.containerHeight, xAxisThickness = _e.xAxisThickness, pointerStripColor = _e.pointerStripColor, pointerEvents = _e.pointerEvents, initialSpacing = _e.initialSpacing, data = _e.data, containerHeightIncludingBelowXAxis = _e.containerHeightIncludingBelowXAxis, extendedContainerHeight = _e.extendedContainerHeight, totalWidth = _e.totalWidth, stripBehindBars = _e.stripBehindBars, noOfSectionsBelowXAxis = _e.noOfSectionsBelowXAxis, stepHeight = _e.stepHeight, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, stripOverPointer = _e.stripOverPointer, pointerLabelComponent = _e.pointerLabelComponent, setSelectedIndex = _e.setSelectedIndex, isAnimated = _e.isAnimated, animationDuration = _e.animationDuration, side = _e.side, labelWidth = _e.labelWidth, isThreeD = _e.isThreeD, animatedHeight = _e.animatedHeight, appearingOpacity = _e.appearingOpacity, autoShiftLabels = _e.autoShiftLabels, getPropsCommonForBarAndStack = _e.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _e.autoShiftLabelsForNegativeStacks, selectedStackIndex = _e.selectedStackIndex, setSelectedStackIndex = _e.setSelectedStackIndex, barWidth = _e.barWidth, spacing = _e.spacing;
var stackData = barAndLineChartsWrapperProps.stackData;
useEffect(function () {
if (props.scrollToEnd || props.scrollToIndex)
if (scrollToBarRef === null || scrollToBarRef === void 0 ? void 0 : scrollToBarRef.current) {
scrollToBarRef.current.scrollIntoView({
behavior: 'smooth'
});
}
}, []);
// const labelsAppear = useCallback(() => {
// opacValue.setValue(0);
// Animated.timing(opacValue, {
// toValue: 1,
// duration: 500,
// easing: Easing.ease,
// useNativeDriver: false,
// }).start();
// }, [opacValue]);
// const decreaseWidth = useCallback(() => {
// widthValue.setValue(0);
// Animated.timing(widthValue, {
// toValue: 1,
// duration: lineConfig.animationDuration,
// easing: Easing.linear,
// useNativeDriver: false,
// }).start();
// }, [lineConfig.animationDuration, widthValue]);
// useEffect(() => {
// if (lineConfig.isAnimated) {
// setTimeout(() => decreaseWidth(), lineConfig.delay || 0);
// }
// setTimeout(() => 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
});
};
// const totalWidth = totalWidthPre - 200
var yTranslate = (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200) * 1.05 + 28; //yAxisExtraHeightAtTop
var contentContainerStyle = {
position: 'absolute',
height: containerHeightIncludingBelowXAxis,
bottom: 68 + labelsExtraHeight,
paddingLeft: initialSpacing,
width: totalWidth - initialSpacing - 40,
display: 'flex'
};
var divRef = useRef(null);
var divOffsetX = (_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().x) !== null && _d !== void 0 ? _d : 0;
var activatePointer = function (x) {
var _a;
var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
factor = Math.round(factor);
factor = Math.min(factor, data.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 = (stackData !== null && stackData !== void 0 ? stackData : data)[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 () {
return (_jsx("div", { ref: divRef, children: pointerConfig ? (_jsxs("div", { onMouseMove: function (evt) {
var _a;
var x = ((_a = evt.clientX) !== null && _a !== void 0 ? _a : 0) - divOffsetX;
activatePointer(x);
}, onMouseLeave: function () {
if (!persistPointer)
setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
}, style: contentContainerStyle, children: [pointerX > 0 && stripBehindBars ? (_jsx("div", {
// pointerEvents={pointerEvents ?? 'none'}
style: {
position: 'absolute',
left: 0,
// backgroundColor: 'rgba(0,0,0,0.2)',
height: extendedContainerHeight +
noOfSectionsBelowXAxis * stepHeight,
bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
width: totalWidth,
pointerEvents: 'none'
}, children: renderStripAndLabel(null) })) : null, renderChart(), pointerX > 0 ? (_jsxs("div", {
// pointerEvents={pointerEvents ?? 'none'}
style: {
position: 'absolute',
left: 0,
height: extendedContainerHeight +
noOfSectionsBelowXAxis * stepHeight,
bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
width: totalWidth,
zIndex: 20,
pointerEvents: 'none'
}, 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] })) : (_jsx("div", { style: contentContainerStyle, children: renderChart() })) }));
};
var renderChart = function () {
if (stackData) {
return stackData.map(function (item, index) {
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 }, getPropsCommonForBarAndStack(item, index)), 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,
// barMarginBottom={props.barMarginBottom}
barStyle: props.barStyle, yTranslate: yTranslate, scrollToBarRef: scrollToBarRef, scrollToIndex: props.scrollToIndex }, getPropsCommonForBarAndStack(item, index)), index + ''));
});
}
};
return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps })));
};
//# sourceMappingURL=index.js.map