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
133 lines • 8.54 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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styles } from './styles';
import { useAnimatedThreeDBar } from 'gifted-charts-core';
var TriangleCorner = function (props) {
return (_jsx("div", { style: __assign(__assign(__assign({}, triangleStyles.triangleCorner), props.style), { borderRightWidth: props.width / 2, borderTopWidth: props.width / 2, borderTopColor: props.color }) }));
};
var triangleStyles = {
triangleCorner: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 0,
borderBottomWidth: 0,
borderRightColor: 'transparent',
transform: [{ rotate: '90deg' }]
}
};
var AnimatedThreeDBar = function (props) {
var _a, _b;
var _c = __read(useState(props.isAnimated ? 0 : props.height), 2), height = _c[0], setHeight = _c[1];
var isAnimated = props.isAnimated, animationDuration = props.animationDuration, item = props.item, index = props.index, barWidth = props.barWidth, sideWidth = props.sideWidth, barStyle = props.barStyle, barBackgroundPattern = props.barBackgroundPattern, barInnerComponent = props.barInnerComponent, patternId = props.patternId, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, containerHeight = props.containerHeight;
var _d = useAnimatedThreeDBar(props), showGradient = _d.showGradient, gradientColor = _d.gradientColor, frontColor = _d.frontColor, sideColor = _d.sideColor, topColor = _d.topColor, opacity = _d.opacity, initialRender = _d.initialRender, setInitialRender = _d.setInitialRender;
// useEffect(() => {
// if (isAnimated) {
// if (initialRender) {
// setTimeout(() => {
// layoutAppear();
// }, 20);
// } else {
// elevate();
// }
// }
// }, [props.height]);
// const elevate = () => {
// LayoutAnimation.configureNext({
// duration: animationDuration,
// update: {type: 'linear', property: 'scaleY'},
// });
// setHeight(props.height);
// };
// const layoutAppear = () => {
// LayoutAnimation.configureNext({
// duration: Platform.OS == 'ios' ? animationDuration : 20,
// create: {type: 'linear', property: 'scaleY'},
// // update: { type: 'linear' }
// });
// setInitialRender(false);
// setTimeout(() => elevate(), Platform.OS == 'ios' ? 10 : 100);
// };
var _e = __read(useState(isAnimated), 2), isAnimating = _e[0], setIsAnimating = _e[1];
useEffect(function () {
if (isAnimated) {
setTimeout(function () { return setHeight(props.height); }, 20);
setTimeout(function () { return setIsAnimating(false); }, animationDuration - 50);
}
}, [props.height]);
return (_jsx("div", { style: __assign({}, styles.container
// transform:`rotate(180deg) translateY(-200px)`
), children: _jsxs("div", { style: __assign(__assign({}, styles.row), { opacity: opacity, position: 'absolute', overflow: isAnimating
? 'hidden'
: ((_a = item.topLabelComponent) !== null && _a !== void 0 ? _a : showValuesAsTopLabel)
? 'visible'
: 'hidden', height: height + sideWidth / 2, transition: isAnimated ? "height ".concat(animationDuration / 1000, "s") : "", bottom: 30, transform: "".concat(props.side === 'right' ? 'rotateY(180deg)' : '', " translateY(").concat(containerHeight * 1.05 + 28 - props.height, "px)") }), children: [props.height ? (_jsxs("div", { style: { position: 'absolute', top: sideWidth / 2 }, children: [_jsx("div", { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: "rotate(90deg)", opacity: opacity } }) }), _jsx("div", { style: { position: 'absolute', top: sideWidth / -2, zIndex: -1 }, children: _jsx("div", { style: {
width: barWidth,
height: barWidth * 0.4,
// left: barWidth / 2,
backgroundColor: topColor.toString(),
opacity: opacity
} }) }), _jsx("div", { style: {
position: 'absolute',
top: sideWidth / -2,
left: barWidth
}, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: "rotate(-90deg)", opacity: opacity } }) })] })) : null, _jsxs("div", { children: [_jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth, style: { transform: "rotate(-90deg)", opacity: opacity } }), _jsx("div", { style: {
width: sideWidth / 2,
height: height - sideWidth / 2, //animatedSideHeight
backgroundColor: sideColor.toString(),
opacity: opacity
} }), _jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth, style: { transform: "rotate(90deg)", opacity: opacity } })] }), _jsxs("div", { style: __assign({ width: barWidth, height: height, backgroundColor: frontColor.toString(), backgroundImage: showGradient
? "linear-gradient(".concat(gradientColor, ",").concat(frontColor.toString(), ")")
: "", borderLeftWidth: 0.5, borderTopWidth: 0.5, borderColor: 'white', opacity: opacity, marginTop: sideWidth / 2 }, (item.barStyle || barStyle)), children: [barBackgroundPattern && (_jsxs("svg", { children: [_jsx("defs", { children: barBackgroundPattern() }), _jsx("rect", { stroke: 'transparent', x: '1', y: '1', width: barWidth || 30, height: height, fill: "url(#".concat(patternId, ")") })] })), barInnerComponent ? (_jsx("div", { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), (item.topLabelComponent || showValuesAsTopLabel) && (_jsx("div", { style: (function () {
var style = {
position: 'absolute',
top: -30,
height: 30,
width: barWidth,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
opacity: opacity
};
if (props.horizontal && !intactTopLabel) {
style.transform = "rotate(270deg)";
}
if (props.side === 'right') {
style.transform = "rotateY(180deg)";
}
if (topLabelContainerStyle) {
style = __assign(__assign({}, style), item.topLabelContainerStyle);
}
return style;
})(), children: showValuesAsTopLabel ? (_jsx("div", { style: topLabelTextStyle, children: item.value })) : ((_b = item.topLabelComponent) === null || _b === void 0 ? void 0 : _b.call(item)) }))] }) }));
};
export default AnimatedThreeDBar;
//# sourceMappingURL=index.js.map