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.
79 lines (78 loc) • 5.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { View, Text, Animated } from 'react-native';
import Svg, { Defs, Rect } from 'react-native-svg';
import Cap from '../Components/BarSpecificComponents/cap';
import LinearGradient from '../Components/common/LinearGradient';
var Animated2DWithGradient = function (props) {
var _a, _b;
var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset, height = props.height;
var barWidth = (_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth; // setting width in state for animation purpose
var topLabelPosition = (item.barWidth || barWidth || 30) * -1;
var animatedHeight = useRef(new Animated.Value(0)).current; // initial height = 0
var animatedLabelHeight = useRef(new Animated.Value(height + topLabelPosition)).current;
var elevate = function () {
Animated.parallel([
Animated.timing(animatedHeight, {
toValue: height,
duration: animationDuration,
useNativeDriver: false,
}),
Animated.timing(animatedLabelHeight, {
toValue: topLabelPosition,
duration: animationDuration,
useNativeDriver: false,
}),
]).start();
};
useEffect(function () {
if (!noAnimation) {
elevate();
}
}, []);
return (_jsxs(_Fragment, { children: [_jsxs(Animated.View, { style: [
{
position: 'absolute',
bottom: 0,
width: barWidth,
overflow: 'hidden',
height: noAnimation ? height : animatedHeight,
},
item.barStyle || barStyle,
], children: [noGradient ? (_jsx(View, { style: barStyleWithBackground, children: props.cappedBars && item.value ? (_jsx(Cap, { capThicknessFromItem: item.capThickness, capThicknessFromProps: props.capThickness, capColorFromItem: item.capColor, capColorFromProps: props.capColor, capRadiusFromItem: item.capRadius, capRadiusFromProps: props.capRadius })) : null })) : (_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [
item.gradientColor || props.gradientColor || 'white',
item.frontColor || props.frontColor || 'black',
], children: props.cappedBars && (_jsx(View, { style: {
position: 'absolute',
width: '100%',
height: item.capThickness === 0
? 0
: item.capThickness || props.capThickness || 6,
backgroundColor: item.capColor || props.capColor || 'black',
borderTopLeftRadius: item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
borderTopRightRadius: item.capRadius === 0
? 0
: item.capRadius || props.capRadius || 0,
} })) })), (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: item.barWidth || barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(Animated.View, { style: [
{
position: 'absolute',
top: noAnimation ? topLabelPosition : animatedLabelHeight,
height: item.barWidth || barWidth || 30,
width: item.barWidth || barWidth || 30,
justifyContent: (props.horizontal && !intactTopLabel) || item.value < 0
? 'center'
: 'flex-end',
alignItems: 'center',
opacity: opacity,
},
item.value < 0 && { transform: [{ rotate: '180deg' }] },
props.horizontal &&
!intactTopLabel && { transform: [{ rotate: '270deg' }] },
topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value + yAxisOffset })) : ((_b = item.topLabelComponent) === null || _b === void 0 ? void 0 : _b.call(item)) })) : null] }));
};
export default Animated2DWithGradient;