@harveylx/react-native-gifted-charts 1.4.70

package/dist/BarChart/RenderStackBars.js

@@ -0,0 +1,214 @@
+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, useRef } from 'react';
+import { View, TouchableOpacity, Text, Animated } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import LinearGradient from '../Components/common/LinearGradient';
+import { useRenderStackBars, BarDefaults, } from '@harveylx/gifted-charts-core';
+import Tooltip from '../Components/BarSpecificComponents/tooltip';
+var RenderStackBars = function (props) {
+    var _a;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, 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, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, barMarginBottom = props.barMarginBottom, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
+    var _e = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), containsNegativeValue = _e.containsNegativeValue, 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(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), 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: [
+                {
+                    width: (item.labelWidth ||
+                        props.labelWidth ||
+                        item.stacks[0].barWidth ||
+                        props.barWidth ||
+                        30) +
+                        spacing / 2,
+                    position: 'absolute',
+                    bottom: !labelsDistanceFromXaxis && autoShiftLabelsForNegativeStacks
+                        ? containsNegativeValue
+                            ? -0
+                            : -6 - xAxisTextNumberOfLines * 18
+                        : -labelsDistanceFromXaxis - 6 - xAxisTextNumberOfLines * 18,
+                },
+                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 || '' })) }));
+    };
+    var animatedHeight = useRef(new Animated.Value(0)).current;
+    var elevate = function () {
+        Animated.timing(animatedHeight, {
+            toValue: totalHeight,
+            duration: animationDuration,
+            useNativeDriver: false,
+        }).start();
+    };
+    useEffect(function () {
+        if (!noAnimation) {
+            elevate();
+        }
+    }, []);
+    var static2DSimple = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var remainingBarMarginBottom = barMarginBottom;
+        return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), 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',
+                            // bottom: barMarginBottom
+                        },
+                    ], children: [item.stacks.map(function (stackItem, index) {
+                            var _a;
+                            var borderRadii = getStackBorderRadii(item, index);
+                            // compute marginBottom here
+                            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 (_jsxs(TouchableOpacity, { onPress: function (e) {
+                                    var _a;
+                                    if (stackHighlightEnabled) {
+                                        setSelectedStackIndex(index);
+                                    }
+                                    (_a = stackItem.onPress) === null || _a === void 0 ? void 0 : _a.call(stackItem, e);
+                                }, activeOpacity: activeOpacity, disabled: disablePress ||
+                                    highlightEnabled ||
+                                    (!stackHighlightEnabled && !stackItem.onPress), style: __assign({ opacity: stackHighlightEnabled
+                                        ? selectedStackIndex === index || selectedStackIndex === -1
+                                            ? 1
+                                            : lowlightOpacity
+                                        : 1, position: 'absolute', bottom: getPosition(index, barHeight) + deductedMargin, 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: "none", x: "0", y: "0", width: "100%", height: totalHeight, 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: containsNegativeValue
+                                ? 0
+                                : (item.barWidth || props.barWidth || 30) * -1,
+                            height: item.barWidth || props.barWidth || 30,
+                            width: item.barWidth || props.barWidth || 30,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        },
+                        containsNegativeValue && {
+                            transform: [{ translateY: totalHeight * 2 }],
+                        },
+                        horizontal &&
+                            !props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
+                        item.topLabelContainerStyle,
+                    ], children: showValuesAsTopLabel ? (_jsx(Text, { 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)) }))] }));
+    };
+    var barWrapper = function () {
+        return noAnimation ? (static2DSimple()) : (_jsx(Animated.View, { style: {
+                position: 'absolute',
+                bottom: 0,
+                height: animatedHeight,
+                width: '100%',
+            }, 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',
+                        opacity: highlightEnabled
+                            ? highlightedBarIndex === -1
+                                ? 1
+                                : highlightedBarIndex === index
+                                    ? 1
+                                    : lowlightOpacity
+                            : 1,
+                        marginBottom: 60 + xAxisLabelsVerticalShift,
+                        width: item.stacks[0].barWidth || props.barWidth || 30,
+                        height: totalHeight,
+                        marginRight: spacing,
+                        transform: [
+                            {
+                                translateY: (containerHeight || 200) -
+                                    (totalHeight - 10 + xAxisLabelsVerticalShift),
+                            },
+                        ],
+                    },
+                ], 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 '@harveylx/gifted-charts-core';
+export declare const BarChart: (props: BarChartPropsType) => import("react/jsx-runtime").JSX.Element;

package/dist/BarChart/index.js

@@ -0,0 +1,256 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, I18nManager, Pressable, View, } from 'react-native';
+import RenderBars from './RenderBars';
+import RenderStackBars from './RenderStackBars';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { useBarAndLineChartsWrapper, useBarChart, } from '@harveylx/gifted-charts-core';
+import { StripAndLabel } from '../Components/common/StripAndLabel';
+import { Pointer } from '../Components/common/Pointer';
+import { screenWidth } from '../utils';
+import RenderLineInBarChart from '../Components/BarAndLineChartsWrapper/renderLineInBarChart';
+export var BarChart = function (props) {
+    var _a, _b, _c;
+    var heightValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var scrollRef = (_a = props.scrollRef) !== null && _a !== void 0 ? _a : useRef(null);
+    var remainingScrollViewProps = {
+        onScroll: function (ev) { var _a; return (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev); },
+        onTouchStart: function (evt) {
+            if (props.renderTooltip) {
+                setSelectedIndex([-1]);
+            }
+        },
+        bounces: props.bounces,
+        overScrollMode: (_b = props.overScrollMode) !== null && _b !== void 0 ? _b : 'auto',
+    };
+    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
+    var _e = useBarAndLineChartsWrapper(__assign(__assign({}, barAndLineChartsWrapperProps), { isRTL: I18nManager.isRTL })), lineInBarChartProps = _e.lineInBarChartProps, lineInBarChartProps2 = _e.lineInBarChartProps2;
+    var stackData = barAndLineChartsWrapperProps.stackData;
+    var labelsAppear = useCallback(function () {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacityValue]);
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: 1,
+            duration: lineConfig.animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [lineConfig.animationDuration, widthValue]);
+    useEffect(function () {
+        if (lineConfig.isAnimated) {
+            setTimeout(function () { return decreaseWidth(); }, lineConfig.delay || 0);
+        }
+        setTimeout(function () { return labelsAppear(); }, animationDuration);
+    }, [decreaseWidth, labelsAppear, animationDuration]);
+    var renderPointer = function (lineNumber) {
+        if (lineNumber === 1 && hidePointer1)
+            return;
+        var pointerItemLocal = pointerItem;
+        var pointerYLocal = pointerY;
+        var pointerColorLocal = (pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.pointer1Color) || pointerColor;
+        return Pointer({
+            pointerX: pointerX,
+            pointerYLocal: pointerYLocal,
+            pointerComponent: pointerComponent,
+            pointerHeight: pointerHeight,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            pointerItemLocal: pointerItemLocal,
+            pointerColorLocal: pointerColorLocal,
+        });
+    };
+    var renderStripAndLabel = function (pointerLabelComponent) {
+        var pointerItemLocal, pointerYLocal = pointerY;
+        pointerItemLocal = [pointerItem];
+        return StripAndLabel({
+            autoAdjustPointerLabelPosition: autoAdjustPointerLabelPosition,
+            pointerX: pointerX,
+            pointerLabelWidth: pointerLabelWidth,
+            activatePointersOnLongPress: activatePointersOnLongPress,
+            yAxisLabelWidth: yAxisLabelWidth,
+            pointerRadius: pointerRadius,
+            pointerWidth: pointerWidth,
+            shiftPointerLabelX: shiftPointerLabelX,
+            pointerLabelHeight: pointerLabelHeight,
+            pointerYLocal: pointerYLocal,
+            pointerStripUptoDataPoint: pointerStripUptoDataPoint,
+            pointerStripHeight: pointerStripHeight,
+            shiftPointerLabelY: shiftPointerLabelY,
+            pointerItemLocal: pointerItemLocal,
+            showPointerStrip: showPointerStrip,
+            pointerStripWidth: pointerStripWidth,
+            containerHeight: containerHeight,
+            xAxisThickness: xAxisThickness,
+            pointerStripColor: pointerStripColor,
+            pointerConfig: pointerConfig,
+            pointerLabelComponent: pointerLabelComponent,
+            scrollX: 0,
+            pointerEvents: pointerEvents,
+            isBarChart: true,
+            pointerIndex: pointerIndex,
+            width: totalWidth,
+            screenWidth: screenWidth,
+            containsNegative: false,
+        });
+    };
+    var contentContainerStyle = {
+        position: 'absolute',
+        height: containerHeightIncludingBelowXAxis,
+        bottom: 60 + labelsExtraHeight,
+        paddingLeft: initialSpacing,
+        width: totalWidth,
+        flexDirection: 'row',
+    };
+    var activatePointer = function (x) {
+        var _a;
+        var chartData = stackData !== null && stackData !== void 0 ? stackData : data;
+        var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
+        factor = Math.round(factor);
+        factor = Math.min(factor, chartData.length - 1);
+        factor = Math.max(factor, 0);
+        var z = initialSpacing +
+            (spacing + barWidth) * factor -
+            (pointerRadius || pointerWidth / 2) +
+            barWidth / 2;
+        setPointerX(z);
+        setPointerIndex(factor);
+        var item, y;
+        item = chartData[factor];
+        var stackSum = 0;
+        if ('stacks' in item) {
+            stackSum = item.stacks.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);
+        }
+        y =
+            containerHeight -
+                ((stackSum !== null && stackSum !== void 0 ? stackSum : item.value) * containerHeight) / maxValue -
+                (pointerRadius || pointerHeight / 2) +
+                10;
+        setPointerY(y);
+        setPointerItem(item);
+        (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderGrant) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+    };
+    var renderChartContent = function () {
+        if (pointerConfig) {
+            return (_jsxs(View, { onPointerEnter: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onPointerLeave: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onPointerLeave) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchStart: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchStart) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onTouchEnd: function () { var _a; return (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onTouchEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig); }, onStartShouldSetResponder: function () { return !!pointerConfig; }, onMoveShouldSetResponder: function () { return !!pointerConfig; }, onResponderGrant: function (evt) {
+                    setResponderStartTime(evt.timeStamp);
+                    if (activatePointersOnLongPress ||
+                        !(pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.activatePointersInstantlyOnTouch)) {
+                        return;
+                    }
+                    var x = evt.nativeEvent.locationX;
+                    if (!activatePointersOnLongPress &&
+                        x > (props.width || screenWidth))
+                        return;
+                    setResponderActive(true);
+                    activatePointer(x);
+                }, onResponderMove: function (evt) {
+                    if (activatePointersOnLongPress &&
+                        evt.timeStamp - responderStartTime < activatePointersDelay) {
+                        return;
+                    }
+                    else {
+                        setResponderActive(true);
+                    }
+                    var x = evt.nativeEvent.locationX;
+                    if (!activatePointersOnLongPress &&
+                        x > (props.width || screenWidth))
+                        return;
+                    activatePointer(x);
+                }, onResponderEnd: function (evt) {
+                    var _a;
+                    setResponderStartTime(0);
+                    setPointerIndex(-1);
+                    setResponderActive(false);
+                    if (!persistPointer)
+                        setTimeout(function () { return setPointerX(0); }, pointerVanishDelay);
+                    (_a = pointerConfig === null || pointerConfig === void 0 ? void 0 : pointerConfig.onResponderEnd) === null || _a === void 0 ? void 0 : _a.call(pointerConfig);
+                }, onResponderTerminationRequest: function (evt) { return false; }, style: contentContainerStyle, children: [pointerX > 0 && stripBehindBars ? (_jsx(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                            position: 'absolute',
+                            height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                            bottom: xAxisLabelsVerticalShift,
+                            width: totalWidth,
+                        }, children: renderStripAndLabel(null) })) : null, renderChart(), 
+                    // Only For Bar Charts-
+                    showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null, 
+                    // Only For Bar Charts-
+                    showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null, pointerX > 0 ? (_jsxs(View, { pointerEvents: pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : 'none', style: {
+                            position: 'absolute',
+                            height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                            bottom: xAxisLabelsVerticalShift,
+                            width: totalWidth,
+                            zIndex: 200000,
+                        }, children: [!stripOverPointer &&
+                                !stripBehindBars &&
+                                renderStripAndLabel(null), renderPointer(1), stripOverPointer &&
+                                !stripBehindBars &&
+                                renderStripAndLabel(null), pointerLabelComponent &&
+                                renderStripAndLabel(pointerLabelComponent) // no matter what, pointerLabelComponent will be rendered at last -> over the chart content
+                        ] })) : null] }));
+        }
+        else {
+            return (_jsxs(Pressable, { style: contentContainerStyle, onPress: function () {
+                    var _a, _b;
+                    if (props.highlightEnabled && !((_a = selectedIndex.includes) === null || _a === void 0 ? void 0 : _a.call(selectedIndex, -1)))
+                        setSelectedIndex([-1]);
+                    if (props.stackHighlightEnabled && selectedStackIndex !== -1) {
+                        setSelectedStackIndex(-1);
+                        // props.setHighlightedStackIndex?.(-1)
+                    }
+                    (_b = props.onBackgroundPress) === null || _b === void 0 ? void 0 : _b.call(props);
+                }, children: [renderChart(), 
+                    // Only For Bar Charts-
+                    showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null, 
+                    // Only For Bar Charts-
+                    showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null] }));
+        }
+    };
+    var renderChart = function () {
+        if (stackData) {
+            return stackData.map(function (item, index) {
+                var _a = getPropsCommonForBarAndStack(item, index), selectedIndex = _a.selectedIndex, stackRestProps = __rest(_a, ["selectedIndex"]);
+                return (_jsx(RenderStackBars, __assign({ stackData: props.stackData || [], isAnimated: isAnimated, animationDuration: animationDuration, stackBorderRadius: props.stackBorderRadius, stackBorderTopLeftRadius: props.stackBorderTopLeftRadius, stackBorderTopRightRadius: props.stackBorderTopRightRadius, stackBorderBottomLeftRadius: props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius: props.stackBorderBottomRightRadius, autoShiftLabelsForNegativeStacks: autoShiftLabelsForNegativeStacks, selectedStackIndex: selectedStackIndex, setSelectedStackIndex: setSelectedStackIndex, 
+                    // highlightedStackIndex={props.highlightedStackIndex??-1}
+                    selectedIndex: selectedIndex[0] }, stackRestProps), index));
+            });
+        }
+        else {
+            return data.map(function (item, index) {
+                var _a;
+                return (_jsx(RenderBars, __assign({ data: data, side: side, minHeight: (_a = props.minHeight) !== null && _a !== void 0 ? _a : (isAnimated && !isThreeD ? 0.1 : 0), sideWidth: props.sideWidth, labelWidth: labelWidth, isThreeD: isThreeD, isAnimated: isAnimated, animationDuration: animationDuration, animatedHeight: animatedHeight, appearingOpacity: appearingOpacity, roundedTop: props.roundedTop, roundedBottom: props.roundedBottom, frontColor: props.frontColor, sideColor: props.sideColor, topColor: props.topColor, cappedBars: props.cappedBars, capThickness: props.capThickness, capColor: props.capColor, capRadius: props.capRadius, autoShiftLabels: autoShiftLabels, barStyle: props.barStyle }, getPropsCommonForBarAndStack(item, index)), index));
+            });
+        }
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled, onScrollEndDrag: props.onScrollEndDrag })));
+};

package/dist/BarChart/styles.d.ts

@@ -0,0 +1,45 @@
+export declare const styles: {
+    container: {
+        width: "100%";
+        marginBottom: number;
+        marginRight: number;
+    };
+    horizBar: {
+        flexDirection: "row";
+    };
+    leftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    lastLeftLabel: {
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    leftPart: {
+        justifyContent: "center";
+        width: "100%";
+    };
+    lastLeftPart: {
+        justifyContent: "flex-end";
+        width: "100%";
+    };
+    line: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+        opacity: number;
+    };
+    lastLine: {
+        width: "100%";
+        height: number;
+        backgroundColor: string;
+    };
+    bottomLabel: {
+        width: "100%";
+    };
+    customDataPointContainer: {
+        position: "absolute";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

package/dist/BarChart/styles.js

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        marginBottom: 40,
+        marginRight: 40,
+    },
+    horizBar: {
+        flexDirection: 'row',
+    },
+    leftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    lastLeftLabel: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    leftPart: {
+        justifyContent: 'center',
+        width: '100%',
+    },
+    lastLeftPart: {
+        justifyContent: 'flex-end',
+        width: '100%',
+    },
+    line: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'gray',
+        opacity: 0.5,
+    },
+    lastLine: {
+        width: '100%',
+        height: 1,
+        backgroundColor: 'black',
+    },
+    bottomLabel: {
+        width: '100%',
+    },
+    customDataPointContainer: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/Components/AnimatedThreeDBar/index.d.ts

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