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
258 lines • 18.4 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 { useEffect } from 'react';
import { useRenderStackBars, BarDefaults } from 'gifted-charts-core';
import Tooltip from '../Components/BarSpecificComponents/tooltip';
var RenderStackBars = function (props) {
var _a, _b, _c, _d;
var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, stackData = props.stackData, _e = props.animationDuration, animationDuration = _e === void 0 ? BarDefaults.animationDuration : _e, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _f = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _f === void 0 ? true : _f, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, barMarginBottom = props.barMarginBottom, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
var _g = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), containsNegativeValue = _g.containsNegativeValue, noAnimation = _g.noAnimation, localBarInnerComponent = _g.localBarInnerComponent, borderRadius = _g.borderRadius, borderTopLeftRadius = _g.borderTopLeftRadius, borderTopRightRadius = _g.borderTopRightRadius, borderBottomLeftRadius = _g.borderBottomLeftRadius, borderBottomRightRadius = _g.borderBottomRightRadius, leftSpacing = _g.leftSpacing, disablePress = _g.disablePress, totalHeight = _g.totalHeight, height = _g.height, setHeight = _g.setHeight, getBarHeight = _g.getBarHeight, getPosition = _g.getPosition, lowestBarPosition = _g.lowestBarPosition, getStackBorderRadii = _g.getStackBorderRadii, tooltipProps = _g.tooltipProps, renderTooltipConditions = _g.renderTooltipConditions;
var prevAndCurrentSpacing = ((_a = item.spacing) !== null && _a !== void 0 ? _a : spacing) + ((_c = (_b = stackData[index - 1]) === null || _b === void 0 ? void 0 : _b.spacing) !== null && _c !== void 0 ? _c : spacing);
var labelWidth = (item.stacks[0].barWidth || props.barWidth || 30) +
prevAndCurrentSpacing / 2;
var fourthQuadrantHeight = ((_d = containerHeightIncludingBelowXAxis !== null && containerHeightIncludingBelowXAxis !== void 0 ? containerHeightIncludingBelowXAxis : containerHeight) !== null && _d !== void 0 ? _d : 200) -
(containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200);
var renderLabel = function (label, labelTextStyle) {
return (_jsx("div", { style: (function () {
var style = {
width: labelWidth,
marginLeft: prevAndCurrentSpacing / -4 + (rotateLabel ? labelWidth / 6 : 0),
position: 'absolute',
left: leftSpacing,
bottom: fourthQuadrantHeight -
40 -
xAxisTextNumberOfLines * 18 +
(autoShiftLabelsForNegativeStacks ? lowestBarPosition : 0) //(rotateLabel ? labelWidth / -2 - 26 : -10)
};
if (rotateLabel) {
if (props.horizontal) {
style.transform = "rotate(330deg)";
}
else {
style.transform = "rotate(60deg)";
}
}
else if (props.horizontal) {
style.transform = "rotate(-90deg)";
}
return style;
})(), children: item.labelComponent ? (item.labelComponent()) : (_jsx("div", { style: __assign({ textAlign: rotateLabel ? 'left' : 'center' }, labelTextStyle), children: label || '' })) }));
};
// useEffect(() => {
// if (!noAnimation) {
// layoutAppear();
// }
// }, [totalHeight]);
// const elevate = () => {
// LayoutAnimation.configureNext({
// duration: animationDuration,
// update: {type: 'linear', property: 'scaleXY'},
// });
// setHeight(totalHeight);
// };
// const layoutAppear = () => {
// LayoutAnimation.configureNext({
// duration: Platform.OS == 'ios' ? animationDuration : 20,
// create: {type: 'linear', property: 'opacity'},
// update: {type: 'linear', property: 'scaleXY'},
// });
// setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
// };
var static2DSimple = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
var remainingBarMarginBottom = barMarginBottom;
return (_jsxs(_Fragment, { children: [_jsxs("div", {
// disabled={disablePress}
// activeOpacity={activeOpacity}
onClick: function () {
setSelectedIndex(index);
if (item.onPress) {
item.onPress();
}
else if (props.onPress) {
props.onPress(item, index);
}
}, onMouseEnter: function () {
if (item.onMouseEnter) {
item.onMouseEnter();
}
else if (props.onMouseEnter) {
props.onMouseEnter(item, index);
}
if (!stackHighlightEnabled &&
renderTooltip &&
renderTooltipConditions.includes('onHover')) {
setSelectedIndex(index);
}
}, onMouseLeave: function () {
if (item.onMouseLeave) {
item.onMouseLeave();
}
else if (props.onMouseLeave) {
props.onMouseLeave(item, index);
}
if (!stackHighlightEnabled &&
renderTooltip &&
renderTooltipConditions.includes('onHover')) {
setSelectedIndex(-1);
}
},
// onLongPress={() => {
// if (item.onLongPress) {
// item.onLongPress();
// } else if (props.onLongPress) {
// props.onLongPress(item, index);
// }
// }}
// onPressOut={() => {
// if (item.onPressOut) {
// item.onPressOut();
// } else if (props.onPressOut) {
// props.onPressOut(item, index);
// }
// }}
style: {
position: 'relative',
top: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200) * 1.05 - totalHeight - 2,
width: item.stacks[0].barWidth || props.barWidth || 30,
height: '100%',
borderTopLeftRadius: (_b = (_a = borderTopLeftRadius !== null && borderTopLeftRadius !== void 0 ? borderTopLeftRadius : borderRadius) !== null && _a !== void 0 ? _a : stackBorderTopLeftRadius) !== null && _b !== void 0 ? _b : stackBorderRadius,
borderTopRightRadius: (_d = (_c = borderTopRightRadius !== null && borderTopRightRadius !== void 0 ? borderTopRightRadius : borderRadius) !== null && _c !== void 0 ? _c : stackBorderTopRightRadius) !== null && _d !== void 0 ? _d : stackBorderRadius,
borderBottomLeftRadius: (_f = (_e = borderBottomLeftRadius !== null && borderBottomLeftRadius !== void 0 ? borderBottomLeftRadius : borderRadius) !== null && _e !== void 0 ? _e : stackBorderBottomLeftRadius) !== null && _f !== void 0 ? _f : stackBorderRadius,
borderBottomRightRadius: (_h = (_g = borderBottomRightRadius !== null && borderBottomRightRadius !== void 0 ? borderBottomRightRadius : borderRadius) !== null && _g !== void 0 ? _g : stackBorderBottomRightRadius) !== null && _h !== void 0 ? _h : stackBorderRadius,
overflow: lowestBarPosition ? 'visible' : 'hidden'
// transform: `translateY(${
// (containerHeight || 200) -
// (totalHeight + 10 + xAxisLabelsVerticalShift)
// }px)`
}, children: [item.stacks.map(function (stackItem, index) {
var _a;
var borderRadii = getStackBorderRadii(item, index);
var barHeight = getBarHeight(stackItem.value, 0);
var marginBottom = Math.max((_a = stackItem.marginBottom) !== null && _a !== void 0 ? _a : 0, remainingBarMarginBottom);
var deductedMargin = Math.min(barHeight, marginBottom);
remainingBarMarginBottom = Math.max(0, remainingBarMarginBottom - deductedMargin);
barHeight -= deductedMargin;
return (_jsx("div", {
// onClick={stackItem.onPress}
// activeOpacity={activeOpacity}
// disabled={disablePress || !stackItem.onPress}
style: __assign({ position: 'absolute', bottom: getPosition(index, barHeight) + deductedMargin, width: '100%', height: barHeight, backgroundColor: (stackItem.color ||
item.color ||
props.color ||
'black').toString(), opacity: stackHighlightEnabled
? selectedStackIndex === index || selectedStackIndex === -1
? 1
: lowlightOpacity
: 1, backgroundImage: props.showGradient
? "linear-gradient(".concat(stackItem.gradientColor ||
item.gradientColor ||
props.gradientColor ||
'white', ",").concat((stackItem.color ||
item.color ||
props.color ||
'black').toString(), ")")
: "", borderWidth: barBorderWidth !== null && barBorderWidth !== void 0 ? barBorderWidth : 0, borderColor: barBorderColor.toString() }, borderRadii), onMouseEnter: function () {
if (stackHighlightEnabled) {
setSelectedStackIndex(index);
}
}, onMouseLeave: function () {
if (stackHighlightEnabled) {
setSelectedStackIndex(-1);
}
}, children: stackItem.innerBarComponent && stackItem.innerBarComponent() }, index));
}), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs("svg", { children: [_jsx("defs", { children: item.barBackgroundPattern
? item.barBackgroundPattern()
: barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx("rect", { stroke: 'none', x: '1', y: '1', width: '100%', height: '100%',
// height={totalHeight}
fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx("div", { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx("div", { style: (function () {
var style = {
position: 'absolute',
height: 30,
width: item.barWidth || props.barWidth || 30,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
if (noAnimation) {
style.bottom = totalHeight + 70;
}
else {
style.top = (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200) - totalHeight + 14;
}
if (containsNegativeValue) {
style.transform = "translateY(".concat(totalHeight * 2, "px)");
}
if (props.horizontal && !props.intactTopLabel) {
style.transform = "rotate(270deg)";
}
return __assign(__assign({}, style), item.topLabelContainerStyle);
})(), children: showValuesAsTopLabel ? (_jsx("div", { style: (_j = item.topLabelTextStyle) !== null && _j !== void 0 ? _j : props.topLabelTextStyle, children: stackData[index].stacks.reduce(function (acc, stack) { return acc + stack.value; }, 0) })) : ((_k = item.topLabelComponent) === null || _k === void 0 ? void 0 : _k.call(item)) }))] }));
};
useEffect(function () {
if (!noAnimation) {
setTimeout(function () { return setHeight(totalHeight); }, 20);
}
}, []);
var barWrapper = function () {
return noAnimation ? (static2DSimple()) : (_jsx("div", { style: {
position: 'absolute',
left: leftSpacing,
bottom: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 200) - height + 10,
height: height,
transition: "height ".concat(animationDuration / 1000, "s")
// overflow: 'hidden'
}, children: static2DSimple() }));
};
return (_jsxs(_Fragment, { children: [_jsxs("div", {
// pointerEvents={
// props.pointerConfig
// ? props.pointerConfig.pointerEvents ?? 'none'
// : 'auto'
// }
style: (function () {
var style = {
// overflow: 'hidden',
// marginBottom: -60 + xAxisLabelsVerticalShift,
width: item.stacks[0].barWidth || props.barWidth || 30,
height: totalHeight,
marginRight: spacing,
opacity: highlightEnabled
? highlightedBarIndex === -1
? 1
: highlightedBarIndex === index
? 1
: lowlightOpacity
: 1
};
if (props.pointerConfig) {
style.transform = "translateY(".concat((containerHeight || 200) -
totalHeight -
10 +
xAxisLabelsVerticalShift, "px");
}
return style;
})(), children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx("div", { style: {
zIndex: 2,
position: 'absolute',
height: props.xAxisIndicesHeight,
width: props.xAxisIndicesWidth,
bottom: props.xAxisIndicesHeight / -2,
left: ((item.barWidth || props.barWidth || 30) -
props.xAxisIndicesWidth) /
2,
backgroundColor: props.xAxisIndicesColor.toString()
} })), barWrapper(), renderLabel(label || '', labelTextStyle)] }), renderTooltip && selectedIndex === index && (_jsx(Tooltip, __assign({}, tooltipProps)))] }));
};
export default RenderStackBars;
//# sourceMappingURL=RenderStackBars.js.map