react-native-gifted-charts 1.4.20 → 1.4.22

package/README.md

@@ -52,16 +52,17 @@ See the **[release changes by version here.](release-notes/release-notes.md)**
 ### React Native CLI
 
 ```sh
-npm install react-native-gifted-charts react-native-linear-gradient react-native-svg
+npm install react-native-gifted-charts gifted-charts-core react-native-linear-gradient react-native-svg
 ```
 
 ### Expo
 
 ```sh
-npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg
+npx expo install react-native-gifted-charts gifted-charts-core expo-linear-gradient react-native-svg
 ```
 
-Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-linear-gradient` are needed for the library to work, so make sure they are installed in your project.
+Please note that `gifted-charts-core`, `react-native-svg` and `react-native-linear-gradient`/`expo-linear-gradient` are needed for the library to work, so make sure they are installed in your project. <br />
+**[gifted-charts-core](https://www.npmjs.com/package/gifted-charts-core)** contains the mathematical and logical utilities used by this library.
 
 # Docs
 

package/dist/BarChart/Animated2DWithGradient.d.ts

@@ -0,0 +1,3 @@
+import { Animated2DWithGradientPropsType } from 'gifted-charts-core';
+declare const Animated2DWithGradient: (props: Animated2DWithGradientPropsType) => import("react/jsx-runtime").JSX.Element;
+export default Animated2DWithGradient;

package/dist/BarChart/Animated2DWithGradient.js

@@ -0,0 +1,113 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { View, LayoutAnimation, Platform, UIManager, Text } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import Cap from '../Components/BarSpecificComponents/cap';
+import LinearGradient from '../Components/common/LinearGradient';
+if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental &&
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var Animated2DWithGradient = function (props) {
+    var _a;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, barWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barMarginBottom = props.barMarginBottom, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset;
+    var _b = __read(useState(noAnimation ? props.height : 0.2), 2), height = _b[0], setHeight = _b[1];
+    var _c = __read(useState(noAnimation ? false : true), 2), initialRender = _c[0], setInitialRender = _c[1];
+    useEffect(function () {
+        if (!noAnimation) {
+            if (initialRender) {
+                setTimeout(function () { return layoutAppear(); }, 20);
+            }
+            else {
+                elevate();
+            }
+        }
+        else {
+            setHeight(props.height);
+        }
+    }, [props.height]);
+    var elevate = function () {
+        LayoutAnimation.configureNext({
+            duration: animationDuration,
+            update: { type: 'linear', property: 'scaleXY' },
+        });
+        setHeight(props.height);
+    };
+    var layoutAppear = function () {
+        LayoutAnimation.configureNext({
+            duration: Platform.OS == 'ios' ? animationDuration : 20,
+            create: { type: 'linear', property: 'opacity' },
+            update: { type: 'linear', property: 'scaleXY' },
+        });
+        setInitialRender(false);
+        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
+    };
+    return (_jsxs(_Fragment, { children: [!initialRender && (_jsx(View, { style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    width: '100%',
+                    overflow: 'hidden',
+                    height: (noAnimation
+                        ? Math.max(props.minHeight, Math.abs(height))
+                        : height) - (barMarginBottom || 0),
+                }, children: _jsxs(View, { style: [
+                        {
+                            width: '100%',
+                            height: (noAnimation
+                                ? Math.max(props.minHeight, Math.abs(height))
+                                : height) - (barMarginBottom || 0),
+                        },
+                        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: "transparent", x: "1", y: "1", width: item.barWidth || props.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(View, { style: [
+                    {
+                        position: 'absolute',
+                        top: (item.barWidth || barWidth || 30) * -1,
+                        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 })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) })) : null] }));
+};
+export default Animated2DWithGradient;

package/dist/BarChart/RenderBars.d.ts

@@ -0,0 +1,3 @@
+import { RenderBarsPropsType } from 'gifted-charts-core';
+declare const RenderBars: (props: RenderBarsPropsType) => import("react/jsx-runtime").JSX.Element;
+export default RenderBars;

package/dist/BarChart/RenderBars.js

@@ -0,0 +1,264 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, TouchableOpacity, Animated, Text } from 'react-native';
+import AnimatedThreeDBar from '../Components/AnimatedThreeDBar';
+import Animated2DWithGradient from './Animated2DWithGradient';
+import Cap from '../Components/BarSpecificComponents/cap';
+import BarBackgroundPattern from '../Components/BarSpecificComponents/barBackgroundPattern';
+import LinearGradient from '../Components/common/LinearGradient';
+import { getPropsForAnimated2DWithGradient, AxesAndRulesDefaults, } from 'gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
+var RenderBars = function (props) {
+    var _a, _b, _c, _d, _e;
+    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, leftShiftForTooltip = props.leftShiftForTooltip, leftShiftForLastIndexTooltip = props.leftShiftForLastIndexTooltip, initialSpacing = props.initialSpacing, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, _f = props.xAxisThickness, xAxisThickness = _f === void 0 ? AxesAndRulesDefaults.xAxisThickness : _f, horizontal = props.horizontal, rtl = props.rtl, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, pointerConfig = props.pointerConfig, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, yAxisOffset = props.yAxisOffset, barWidth = props.barWidth, _g = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _g === void 0 ? 0 : _g, stepHeight = props.stepHeight, stepValue = props.stepValue, negativeStepHeight = props.negativeStepHeight, negativeStepValue = props.negativeStepValue, autoCenterTooltip = props.autoCenterTooltip, secondaryXAxis = props.secondaryXAxis;
+    var heightFactor = item.value < 0
+        ? negativeStepHeight / negativeStepValue
+        : stepHeight / stepValue;
+    var barHeight = Math.max(minHeight, Math.abs(item.value) * heightFactor - xAxisThickness);
+    var _h = getPropsForAnimated2DWithGradient(__assign(__assign({}, props), { barHeight: barHeight })), commonStyleForBar = _h.commonStyleForBar, barStyleWithBackground = _h.barStyleWithBackground, commonPropsFor2Dand3Dbars = _h.commonPropsFor2Dand3Dbars, isFocused = _h.isFocused, focusedBarConfig = _h.focusedBarConfig, localFrontColor = _h.localFrontColor;
+    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 barMarginBottom = item.barMarginBottom === 0
+        ? 0
+        : item.barMarginBottom || props.barMarginBottom || 0;
+    var renderLabel = function (top, label, labelTextStyle, value) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.barWidth ||
+                        barWidth) + spacing,
+                    left: spacing / -2,
+                    position: 'absolute',
+                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                    bottom: 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,
+                },
+                rotateLabel
+                    ? horizontal
+                        ? { transform: [{ rotate: '330deg' }] }
+                        : {
+                            transform: [
+                                { rotate: value < 0 ? '240deg' : '60deg' },
+                                { translateX: value < 0 ? 56 : 0 },
+                                { translateY: value < 0 ? 32 : 0 },
+                            ],
+                        }
+                    : horizontal
+                        ? { transform: [{ rotate: '-90deg' }] }
+                        : value < 0
+                            ? {
+                                transform: [
+                                    { rotate: '180deg' },
+                                    {
+                                        translateY: autoShiftLabels
+                                            ? 0
+                                            : 16.5 * xAxisTextNumberOfLines + 14,
+                                    },
+                                ],
+                            }
+                            : {},
+            ], children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderAnimatedLabel = function (top, label, labelTextStyle, value) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.barWidth ||
+                        barWidth) + spacing,
+                    left: spacing / -2,
+                    position: 'absolute',
+                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                    bottom: 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,
+                    opacity: appearingOpacity,
+                },
+                value < 0 && { transform: [{ rotate: '180deg' }] },
+                rotateLabel
+                    ? horizontal
+                        ? { transform: [{ rotate: '330deg' }] }
+                        : { transform: [{ rotate: '60deg' }] }
+                    : horizontal
+                        ? { transform: [{ rotate: '-90deg' }] }
+                        : value < 0
+                            ? {
+                                transform: [
+                                    { rotate: '180deg' },
+                                    {
+                                        translateY: autoShiftLabels
+                                            ? 0
+                                            : 16.5 * xAxisTextNumberOfLines + 14,
+                                    },
+                                ],
+                            }
+                            : {},
+            ], children: top ? (item.secondaryLabelComponent ? (item.secondaryLabelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label }))) : item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var leftSpacing = initialSpacing;
+    for (var i = 0; i < index; i++) {
+        leftSpacing +=
+            ((_c = data[i].spacing) !== null && _c !== void 0 ? _c : propSpacing) + (data[i].barWidth || barWidth);
+    }
+    var static2DWithGradient = function (item) {
+        var _a, _b;
+        var localGradientColor = item.gradientColor || props.gradientColor || 'white';
+        return (_jsxs(_Fragment, { children: [_jsx(LinearGradient, { style: commonStyleForBar, start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, colors: [
+                        isFocused
+                            ? (_a = focusedBarConfig === null || focusedBarConfig === void 0 ? void 0 : focusedBarConfig.gradientColor) !== null && _a !== void 0 ? _a : localGradientColor
+                            : localGradientColor,
+                        localFrontColor,
+                    ], 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 }), (item.barBackgroundPattern || props.barBackgroundPattern) && (_jsx(BarBackgroundPattern, { barBackgroundPatternFromItem: item.barBackgroundPattern, barBackgroundPatternFromProps: props.barBackgroundPattern, patternIdFromItem: item.patternId, patternIdFromProps: props.patternId })), (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                        {
+                            position: 'absolute',
+                            top: (item.barWidth || barWidth) * -1,
+                            height: item.barWidth || barWidth,
+                            width: item.barWidth || barWidth,
+                            justifyContent: (horizontal && !intactTopLabel) || item.value < 0
+                                ? 'center'
+                                : 'flex-end',
+                            alignItems: 'center',
+                        },
+                        item.value < 0 && { transform: [{ rotate: '180deg' }] },
+                        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)) })), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null] }));
+    };
+    var barWrapperStyle = [
+        {
+            // overflow: 'visible',
+            marginBottom: 60 + barMarginBottom + xAxisLabelsVerticalShift - 0.5,
+            width: commonPropsFor2Dand3Dbars.barWidth,
+            height: barHeight,
+            marginRight: spacing,
+        },
+        pointerConfig
+            ? {
+                transform: [
+                    {
+                        translateY: (containerHeight || 200) -
+                            (barHeight - 10 + xAxisLabelsVerticalShift) +
+                            (item.value < 0 ? Math.abs(item.value) * heightFactor : 0),
+                    },
+                ],
+            }
+            : item.value < 0
+                ? {
+                    transform: [
+                        {
+                            translateY: Math.abs(item.value) * heightFactor,
+                        },
+                        { rotateZ: '180deg' },
+                    ],
+                }
+                : null,
+        side !== 'right' && { zIndex: data.length - index },
+    ];
+    var pressDisabled = item.disablePress ||
+        props.disablePress ||
+        (pointerConfig && pointerConfig.barTouchable !== true);
+    var barContent = function () {
+        var isBarBelowXaxisAndInvisible = item.value < 0 && !noOfSectionsBelowXAxis;
+        var animated2DWithGradient = function (noGradient, noAnimation) { return (_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, barStyleWithBackground: barStyleWithBackground }))); };
+        return (_jsxs(_Fragment, { children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { style: {
+                        zIndex: 2,
+                        position: 'absolute',
+                        height: props.xAxisIndicesHeight,
+                        width: props.xAxisIndicesWidth,
+                        bottom: props.xAxisIndicesHeight / -2,
+                        left: ((item.barWidth || barWidth) - props.xAxisIndicesWidth) / 2,
+                        backgroundColor: props.xAxisIndicesColor,
+                    } })), 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 }))) : item.showGradient || props.showGradient ? (isAnimated ? (animated2DWithGradient(false, false)) : (static2DWithGradient(item))) : isAnimated ? (animated2DWithGradient(true, false)) : (animated2DWithGradient(true, true)), 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] }));
+    };
+    var tooltipProps = {
+        barHeight: barHeight,
+        barWidth: item.barWidth || barWidth,
+        item: item,
+        index: index,
+        isLast: index === data.length - 1,
+        leftSpacing: leftSpacing,
+        leftShiftForLastIndexTooltip: leftShiftForLastIndexTooltip,
+        leftShiftForTooltip: (_e = (_d = item.leftShiftForTooltip) !== null && _d !== void 0 ? _d : leftShiftForTooltip) !== null && _e !== void 0 ? _e : 0,
+        renderTooltip: renderTooltip,
+        autoCenterTooltip: autoCenterTooltip,
+        horizontal: horizontal,
+    };
+    return (_jsxs(_Fragment, { children: [pressDisabled ? (_jsx(View, { pointerEvents: "none", style: barWrapperStyle, children: barContent() })) : (_jsx(TouchableOpacity, { activeOpacity: props.activeOpacity || 0.2, onPress: function () {
+                    if (renderTooltip || props.focusBarOnPress) {
+                        if (props.focusedBarIndex === undefined || !props.onPress) {
+                            setSelectedIndex(index);
+                        }
+                    }
+                    item.onPress
+                        ? item.onPress()
+                        : props.onPress
+                            ? props.onPress(item, index)
+                            : null;
+                }, onLongPress: function () {
+                    item.onLongPress
+                        ? item.onLongPress()
+                        : props.onLongPress
+                            ? props.onLongPress(item, index)
+                            : null;
+                }, onPressOut: function () {
+                    item.onPressOut
+                        ? item.onPressOut()
+                        : props.onPressOut
+                            ? props.onPressOut(item, index)
+                            : null;
+                }, style: barWrapperStyle, children: barContent() })), renderTooltip && selectedIndex === index && (_jsx(Tooltip, __assign({}, tooltipProps)))] }));
+};
+export default RenderBars;

package/dist/BarChart/RenderStackBars.d.ts

@@ -0,0 +1,3 @@
+import { StackedBarChartPropsType } from 'gifted-charts-core';
+declare const RenderStackBars: (props: StackedBarChartPropsType) => import("react/jsx-runtime").JSX.Element;
+export default RenderStackBars;

package/dist/BarChart/RenderStackBars.js

@@ -0,0 +1,172 @@
+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 { View, TouchableOpacity, Text, LayoutAnimation, Platform, UIManager, } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import LinearGradient from '../Components/common/LinearGradient';
+import { useRenderStackBars, BarDefaults, } from 'gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
+if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental &&
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var RenderStackBars = function (props) {
+    var _a;
+    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, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal;
+    var _e = useRenderStackBars(props), cotainsNegative = _e.cotainsNegative, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
+    var renderLabel = function (label, labelTextStyle) {
+        return (_jsx(View, { style: [
+                {
+                    width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
+                    position: 'absolute',
+                    bottom: autoShiftLabelsForNegativeStacks
+                        ? -6 - xAxisTextNumberOfLines * 18 + lowestBarPosition
+                        : -labelsDistanceFromXaxis,
+                },
+                rotateLabel
+                    ? horizontal
+                        ? { transform: [{ rotate: '330deg' }] }
+                        : { transform: [{ rotate: '60deg' }] }
+                    : horizontal
+                        ? { transform: [{ rotate: '-90deg' }] }
+                        : {},
+            ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+    };
+    useEffect(function () {
+        if (!noAnimation) {
+            layoutAppear();
+        }
+    }, [totalHeight]);
+    var elevate = function () {
+        LayoutAnimation.configureNext({
+            duration: animationDuration,
+            update: { type: 'linear', property: 'scaleXY' },
+        });
+        setHeight(totalHeight);
+    };
+    var layoutAppear = function () {
+        LayoutAnimation.configureNext({
+            duration: Platform.OS == 'ios' ? animationDuration : 20,
+            create: { type: 'linear', property: 'opacity' },
+            update: { type: 'linear', property: 'scaleXY' },
+        });
+        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
+    };
+    var static2DSimple = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress, activeOpacity: activeOpacity, onPress: function () {
+                        setSelectedIndex(index);
+                        if (item.onPress) {
+                            item.onPress();
+                        }
+                        else if (props.onPress) {
+                            props.onPress(item, index);
+                        }
+                    }, onLongPress: function () {
+                        if (item.onLongPress) {
+                            item.onLongPress();
+                        }
+                        else if (props.onLongPress) {
+                            props.onLongPress(item, index);
+                        }
+                    }, onPressOut: function () {
+                        if (item.onPressOut) {
+                            item.onPressOut();
+                        }
+                        else if (props.onPressOut) {
+                            props.onPressOut(item, index);
+                        }
+                    }, style: [
+                        {
+                            position: 'absolute',
+                            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',
+                        },
+                    ], children: [item.stacks.map(function (stackItem, index) {
+                            var borderRadii = getStackBorderRadii(item, index);
+                            var barHeight = getBarHeight(stackItem.value, stackItem.marginBottom);
+                            return (_jsxs(TouchableOpacity, { onPress: stackItem.onPress, activeOpacity: activeOpacity, disabled: disablePress || !stackItem.onPress, style: __assign({ position: 'absolute', bottom: getPosition(index) + (stackItem.marginBottom || 0), width: '100%', height: barHeight, backgroundColor: stackItem.color || item.color || props.color || 'black', borderWidth: barBorderWidth !== null && barBorderWidth !== void 0 ? barBorderWidth : 0, borderColor: barBorderColor }, borderRadii), children: [stackItem.showGradient ||
+                                        item.showGradient ||
+                                        props.showGradient ? (_jsx(LinearGradient, { style: __assign({ position: 'absolute', width: '100%', height: '100%' }, borderRadii), start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, colors: [
+                                            stackItem.gradientColor ||
+                                                item.gradientColor ||
+                                                props.gradientColor ||
+                                                'white',
+                                            stackItem.color || item.color || props.color || 'black',
+                                        ] })) : null, 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: "transparent", x: "1", y: "1", width: "100%", height: "100%", fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                        {
+                            position: 'absolute',
+                            top: cotainsNegative
+                                ? 0
+                                : (item.barWidth || props.barWidth || 30) * -1,
+                            height: item.barWidth || props.barWidth || 30,
+                            width: item.barWidth || props.barWidth || 30,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        },
+                        cotainsNegative && { transform: [{ translateY: totalHeight * 2 }] },
+                        horizontal &&
+                            !props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
+                        item.topLabelContainerStyle,
+                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: item.topLabelTextStyle, children: item.stacks.reduce(function (acc, stack) { return acc + stack.value; }, 0) })) : ((_j = item.topLabelComponent) === null || _j === void 0 ? void 0 : _j.call(item)) }))] }));
+    };
+    var barWrapper = function () {
+        return noAnimation ? (static2DSimple()) : (_jsx(View, { style: {
+                position: 'absolute',
+                bottom: 0,
+                height: height,
+                width: '100%',
+                overflow: 'hidden',
+            }, children: static2DSimple() }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { pointerEvents: props.pointerConfig
+                    ? (_a = props.pointerConfig.pointerEvents) !== null && _a !== void 0 ? _a : 'none'
+                    : 'auto', style: [
+                    {
+                        // overflow: 'visible',
+                        marginBottom: 60 + xAxisLabelsVerticalShift,
+                        width: item.stacks[0].barWidth || props.barWidth || 30,
+                        height: totalHeight,
+                        marginRight: spacing,
+                    },
+                    props.pointerConfig
+                        ? {
+                            transform: [
+                                {
+                                    translateY: (containerHeight || 200) -
+                                        (totalHeight - 10 + xAxisLabelsVerticalShift),
+                                },
+                            ],
+                        }
+                        : null,
+                ], children: [(props.showXAxisIndices || item.showXAxisIndex) && (_jsx(View, { 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,
+                        } })), barWrapper(), renderLabel(label || '', labelTextStyle)] }), renderTooltip && selectedIndex === index && (_jsx(Tooltip, __assign({}, tooltipProps)))] }));
+};
+export default RenderStackBars;

package/dist/BarChart/index.d.ts

@@ -0,0 +1,2 @@
+import { BarChartPropsType } from 'gifted-charts-core';
+export declare const BarChart: (props: BarChartPropsType) => import("react/jsx-runtime").JSX.Element;