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
273 lines • 17.8 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, Fragment as _Fragment } from "react/jsx-runtime";
import Animated2DWithGradient from './Animated2DWithGradient';
import { getPropsForAnimated2DWithGradient, AxesAndRulesDefaults, useRenderBars } from 'gifted-charts-core';
import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
import Tooltip from '../Components/BarSpecificComponents/tooltip';
var RenderBars = function (props) {
var _a, _b, _c, _d, _e, _f;
var item = props.item, index = props.index, containerHeight = props.containerHeight, maxValue = props.maxValue, minHeight = props.minHeight, spacing = props.spacing, propSpacing = props.propSpacing, side = props.side, data = props.data, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, isThreeD = props.isThreeD, isAnimated = props.isAnimated, rotateLabel = props.rotateLabel, appearingOpacity = props.appearingOpacity, animationDuration = props.animationDuration, autoShiftLabels = props.autoShiftLabels, label = props.label, secondaryLabel = props.secondaryLabel, labelTextStyle = props.labelTextStyle, secondaryLabelTextStyle = props.secondaryLabelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, renderTooltipConditions = props.renderTooltipConditions, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _g = props.xAxisThickness, xAxisThickness = _g === void 0 ? AxesAndRulesDefaults.xAxisThickness : _g, horizontal = props.horizontal, rtl = props.rtl, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yTranslate = props.yTranslate, scrollToBarRef = props.scrollToBarRef, scrollToIndex = props.scrollToIndex, barWidth = props.barWidth, _h = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _h === void 0 ? 0 : _h, secondaryXAxis = props.secondaryXAxis, secondaryNoOfSectionsBelowXAxis = props.secondaryNoOfSectionsBelowXAxis, _j = props.barMarginBottom, barMarginBottom = _j === void 0 ? 0 : _j, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity;
var _k = useRenderBars(props), barHeight = _k.barHeight, tooltipProps = _k.tooltipProps;
var _l = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _l.commonStyleForBar, commonPropsFor2dAnd3dBars = _l.commonPropsFor2dAnd3dBars, isFocused = _l.isFocused, focusedBarConfig = _l.focusedBarConfig, localFrontColor = _l.localFrontColor;
// const barStyleWithBackground:React.CSSProperties = {}
var itemOrPropsBarInnerComponent = (_a = item.barInnerComponent) !== null && _a !== void 0 ? _a : props.barInnerComponent;
var localBarInnerComponent = isFocused
? (_b = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.barInnerComponent) !== null && _b !== void 0 ? _b : itemOrPropsBarInnerComponent
: itemOrPropsBarInnerComponent;
var isStaticGradient = (item.showGradient || props.showGradient) && !isAnimated;
var adjustBarStyle = {
transform: "translateY(".concat(yTranslate, "px)"),
width: commonPropsFor2dAnd3dBars.barWidth
};
// const adjustForGradientBars = {
// transform: `translateY(${yTranslate - barHeight}px)`
// }
var prevAndCurrentSpacing = ((_c = item.spacing) !== null && _c !== void 0 ? _c : spacing) + ((_e = (_d = data[index - 1]) === null || _d === void 0 ? void 0 : _d.spacing) !== null && _e !== void 0 ? _e : spacing);
var labelWidth = item.labelWidth ||
props.labelWidth ||
(item.barWidth || barWidth) + prevAndCurrentSpacing / 2;
var renderLabel = function (top, label, labelTextStyle, value) {
return (_jsx("div", { style: (function () {
var _a, _b;
var style = {
width: labelWidth,
left: spacing / -2,
position: 'absolute',
height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18 -
(value < 0
? -xAxisLabelsVerticalShift
: xAxisLabelsVerticalShift),
bottom: 32 +
(top
? (containerHeight || 200) +
((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
: (rotateLabel
? -40
: -6 -
xAxisTextNumberOfLines * 18 -
(value < 0
? -xAxisLabelsVerticalShift
: xAxisLabelsVerticalShift)) -
barMarginBottom -
xAxisThickness -
(value < 0 && !autoShiftLabels
? -labelsDistanceFromXaxis
: labelsDistanceFromXaxis))
};
if (rotateLabel) {
if (horizontal) {
style.transform = "rotate(330deg)";
}
else {
style.transform = "rotate(".concat(value < 0 ? '240deg' : '60deg', ")\n translateX(").concat(value < 0 ? 56 : (labelWidth - 50) / 2, "px)\n translateY(").concat(value < 0 ? 32 : -10, "px)");
}
}
else {
if (horizontal) {
style.transform = "rotate(-90deg)";
}
else if (value < 0 && autoShiftLabels) {
style.transform = "translateY(".concat(-30, "px)");
}
}
return style;
})(), children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx("div", { style: (function () {
var style = { textAlign: 'center' };
if (rtl && horizontal) {
style.transform = "rotate(180deg)";
}
style = __assign(__assign({}, style), labelTextStyle);
return style;
})(), children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx("div", { style: (function () {
var style = {
textAlign: rotateLabel ? 'left' : 'center'
};
if (rtl && horizontal) {
style.transform = "rotate(180deg)";
}
style = __assign(__assign({}, style), labelTextStyle);
return style;
})(), children: label })) }));
};
var renderAnimatedLabel = function (top, label, labelTextStyle, value) {
return (_jsx("div", { style: (function () {
var _a, _b;
var style = {
width: labelWidth,
left: spacing / -2,
position: 'absolute',
height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18 -
(value < 0
? -xAxisLabelsVerticalShift
: xAxisLabelsVerticalShift),
bottom: 32 +
(top
? (containerHeight || 200) +
((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
: (rotateLabel
? -40
: -6 -
xAxisTextNumberOfLines * 18 -
xAxisLabelsVerticalShift) -
barMarginBottom -
labelsDistanceFromXaxis),
opacity: appearingOpacity
};
if (value < 0) {
style.transform = "rotate(180deg)";
}
if (rotateLabel) {
if (horizontal) {
style.transform = "rotate(330deg)";
}
else {
style.transform = "rotate(60deg)";
}
}
else {
if (horizontal) {
style.transform = "rotate(-90deg)";
}
else if (value < 0) {
style.transform = "translateY(".concat(autoShiftLabels ? -16.5 * xAxisTextNumberOfLines - 10 : 0, "px)");
}
}
return style;
})(), children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx("div", { style: (function () {
var style = { textAlign: 'center' };
if (rtl && horizontal) {
style.transform = "rotate(180deg)";
}
style = __assign(__assign({}, style), labelTextStyle);
return style;
})(), children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx("div", { style: (function () {
var style = { textAlign: 'center' };
if (rtl && horizontal) {
style.transform = "rotate(180deg)";
}
style = __assign(__assign({}, style), labelTextStyle);
return style;
})(), children: label })) }));
};
var leftSpacing = initialSpacing;
for (var i = 0; i < index; i++) {
leftSpacing +=
((_f = data[i].spacing) !== null && _f !== void 0 ? _f : propSpacing) + (data[i].barWidth || barWidth || 30);
}
var barWrapperStyle = {
// overflow: 'visible',
opacity: highlightEnabled
? highlightedBarIndex === -1
? 1
: highlightedBarIndex === index
? 1
: lowlightOpacity
: 1,
marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift,
width: commonPropsFor2dAnd3dBars.barWidth,
height: barHeight,
marginRight: spacing,
position: 'relative',
transform: "translateY(".concat(-xAxisLabelsVerticalShift, "px)")
// transform: `translateY(
// ${
// (containerHeight || 200) -
// (barHeight - 10 + xAxisLabelsVerticalShift)
// }px)`
};
// if (item.value < 0) {
// barWrapperStyle.transform = `translateY(
// ${
// (containerHeight || 200) -
// (barHeight - 10 + xAxisLabelsVerticalShift)
// }px) rotateZ(180deg)`
// }
if (side !== 'right') {
barWrapperStyle.zIndex = data.length - index;
}
var pressDisabled = item.disablePress ||
props.disablePress ||
(pointerConfig && pointerConfig.barTouchable !== true);
var barContent = function () {
var isBarBelowXaxisAndInvisible = item.value < 0 &&
!(noOfSectionsBelowXAxis || secondaryNoOfSectionsBelowXAxis);
var animated2DWithGradient = function (noGradient, noAnimation) { return (_jsx("div", { style: adjustBarStyle, children: _jsx(Animated2DWithGradient, __assign({}, commonPropsFor2dAnd3dBars, { animationDuration: animationDuration || 800, roundedBottom: props.roundedBottom || false, roundedTop: props.roundedTop || false, noGradient: noGradient, noAnimation: noAnimation, containerHeight: containerHeight, maxValue: maxValue, minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : 0, barMarginBottom: barMarginBottom, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, horizontal: horizontal, barBorderWidth: barBorderWidth, barBorderColor: barBorderColor, commonStyleForBar: commonStyleForBar, yTranslate: yTranslate })) })); };
return (_jsxs(_Fragment, { children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx("div", { style: {
zIndex: 2,
position: 'absolute',
width: props.xAxisIndicesHeight,
height: props.xAxisIndicesWidth,
bottom: barHeight - (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200) * 1.05, //props.xAxisIndicesHeight / -2,
left: (commonPropsFor2dAnd3dBars.barWidth - props.xAxisIndicesWidth) /
2,
backgroundColor: props.xAxisIndicesColor.toString()
} })), isBarBelowXaxisAndInvisible ? null : isThreeD ? (_jsx(AnimatedThreeDBar, __assign({}, commonPropsFor2dAnd3dBars, { sideWidth: item.sideWidth ||
props.sideWidth ||
(item.barWidth || barWidth) / 2, side: side || 'left', sideColor: item.sideColor || props.sideColor || '', topColor: item.topColor || props.topColor || '', horizontal: horizontal, isAnimated: isAnimated, animationDuration: animationDuration || 800, selectedIndex: selectedIndex, containerHeight: containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200 }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (animated2DWithGradient(false, true))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), _jsxs("div", { style: adjustBarStyle, children: [isAnimated
? renderAnimatedLabel(false, label, labelTextStyle, item.value)
: renderLabel(false, label, labelTextStyle, item.value), secondaryXAxis
? isAnimated
? renderAnimatedLabel(true, secondaryLabel, secondaryLabelTextStyle, item.value)
: renderLabel(true, secondaryLabel, secondaryLabelTextStyle, item.value)
: null] })] }));
};
return (_jsxs(_Fragment, { children: [pressDisabled ? (_jsx("div", {
// pointerEvents='none'
style: barWrapperStyle, children: barContent() })) : (_jsx("div", { ref: index === (scrollToIndex !== null && scrollToIndex !== void 0 ? scrollToIndex : data.length - 1) ? scrollToBarRef : null,
// activeOpacity={props.activeOpacity || 0.2}
onClick: function () {
var _a;
if (renderTooltip || props.focusBarOnPress) {
setSelectedIndex(index);
}
item.onPress ? item.onPress() : (_a = props.onPress) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
}, onContextMenu: function (event) {
var _a;
if (item.onContextMenu || props.onContextMenu)
event.preventDefault();
item.onContextMenu
? item.onContextMenu()
: (_a = props.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
}, onMouseEnter: function () {
var _a;
item.onMouseEnter
? item.onMouseEnter()
: (_a = props.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
if ((renderTooltip && renderTooltipConditions.includes('onHover')) ||
highlightEnabled) {
setSelectedIndex(index);
}
}, onMouseLeave: function () {
var _a;
item.onMouseLeave
? item.onMouseLeave()
: (_a = props.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
if ((renderTooltip && renderTooltipConditions.includes('onHover')) ||
highlightEnabled) {
setSelectedIndex(-1);
}
},
// onLongPress={() => {
// item.onLongPress
// ? item.onLongPress()
// : props.onLongPress?.(item, index)
// }}
// onPressOut={() => {
// item.onPressOut
// ? item.onPressOut()
// : props.onPressOut?.(item, index)
// }}
style: barWrapperStyle, children: barContent() })), renderTooltip && selectedIndex === index && (_jsx(Tooltip, __assign({}, tooltipProps)))] }));
};
export default RenderBars;
//# sourceMappingURL=RenderBars.js.map