@harveylx/react-native-gifted-charts 1.4.70

package/dist/Components/AnimatedThreeDBar/index.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, StyleSheet, Text, Animated } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import { styles } from './styles';
+import LinearGradient from '../common/LinearGradient';
+import { useAnimatedThreeDBar, } from '@harveylx/gifted-charts-core';
+var TriangleCorner = function (props) {
+    return (_jsx(View, { style: [
+            triangleStyles.triangleCorner,
+            props.style,
+            {
+                borderRightWidth: props.width / 2,
+                borderTopWidth: props.width / 2,
+                borderTopColor: props.color,
+            },
+        ] }));
+};
+var triangleStyles = StyleSheet.create({
+    triangleCorner: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderRightColor: 'transparent',
+        transform: [{ rotate: '90deg' }],
+    },
+});
+var AnimatedThreeDBar = function (props) {
+    var _a;
+    var height = props.height, side = props.side;
+    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 _b = useAnimatedThreeDBar(props), showGradient = _b.showGradient, gradientColor = _b.gradientColor, frontColor = _b.frontColor, sideColor = _b.sideColor, topColor = _b.topColor, opacity = _b.opacity;
+    var animatedHeight = useRef(new Animated.Value(0)).current;
+    var elevate = function () {
+        Animated.timing(animatedHeight, {
+            toValue: height,
+            duration: animationDuration,
+            useNativeDriver: false,
+        }).start();
+    };
+    useEffect(function () {
+        if (isAnimated) {
+            elevate();
+        }
+    }, []);
+    return (_jsx(View, { style: [styles.container, { height: containerHeight }], children: _jsxs(Animated.View, { style: [
+                styles.row,
+                {
+                    height: isAnimated ? animatedHeight : height,
+                    opacity: opacity,
+                    position: 'absolute',
+                    bottom: 0,
+                },
+                props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
+            ], children: [props.height ? (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: [{ rotate: '90deg' }], opacity: opacity } }) }), _jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(View, { style: {
+                                    width: barWidth,
+                                    height: barWidth,
+                                    // left: width / 2,
+                                    backgroundColor: topColor,
+                                    opacity: opacity,
+                                } }) }), _jsx(View, { style: {
+                                position: 'absolute',
+                                top: sideWidth / -2,
+                                left: barWidth - 1,
+                            }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: [{ rotate: '-90deg' }], opacity: opacity } }) })] })) : null, _jsxs(View, { style: { marginTop: sideWidth / -2 - 1 }, children: [_jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth, style: { transform: [{ rotate: '-90deg' }], opacity: opacity } }), _jsx(View, { style: {
+                                width: sideWidth / 2 + 1,
+                                height: height - sideWidth / 2, //animatedSideHeight
+                                backgroundColor: sideColor,
+                                opacity: opacity,
+                            } }), _jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth + 1, style: {
+                                transform: [{ rotate: '90deg' }],
+                                opacity: opacity,
+                                right: -0.5,
+                            } })] }), _jsxs(View, { style: [
+                        {
+                            width: barWidth,
+                            height: height, //animatedHeight
+                            backgroundColor: frontColor,
+                            borderLeftWidth: StyleSheet.hairlineWidth,
+                            borderTopWidth: StyleSheet.hairlineWidth,
+                            borderColor: 'white',
+                            opacity: opacity,
+                        },
+                        item.barStyle || barStyle,
+                    ], children: [showGradient && (_jsx(LinearGradient, { style: { position: 'absolute', width: '100%', height: '100%' }, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [gradientColor, frontColor] })), barBackgroundPattern && (_jsxs(Svg, { children: [_jsx(Defs, { children: barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: barWidth || 30, height: height, fill: "url(#".concat(patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                        {
+                            position: 'absolute',
+                            top: barWidth * -2,
+                            marginLeft: side === 'right' ? 0 : -Math.min(barWidth / 2 - 4, 8),
+                            height: (barWidth * 3) / 2,
+                            width: (barWidth * 3) / 2,
+                            justifyContent: 'flex-end',
+                            alignItems: 'center',
+                            opacity: opacity,
+                        },
+                        props.horizontal &&
+                            !intactTopLabel && { transform: [{ rotate: '270deg' }] },
+                        props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
+                        topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
+                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) }))] }) }));
+};
+export default AnimatedThreeDBar;

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

@@ -0,0 +1,11 @@
+export declare const styles: {
+    container: {
+        width: "150%";
+        position: "absolute";
+        bottom: number;
+        overflow: "hidden";
+    };
+    row: {
+        flexDirection: "row";
+    };
+};

package/dist/Components/AnimatedThreeDBar/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    container: {
+        width: '150%',
+        position: 'absolute',
+        bottom: 0,
+        overflow: 'hidden',
+    },
+    row: {
+        flexDirection: 'row',
+    },
+});

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

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

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -0,0 +1,161 @@
+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 } from "react/jsx-runtime";
+import { Fragment, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, I18nManager, } from 'react-native';
+import { renderHorizSections } from './renderHorizSections';
+import RenderVerticalLines from './renderVerticalLines';
+import { chartTypes, yAxisSides, useBarAndLineChartsWrapper, } from '@harveylx/gifted-charts-core';
+import { renderBackgroundSlices } from './renderBackgroundSlices';
+var isCloseToRight = function (_a, endReachedOffset) {
+    var layoutMeasurement = _a.layoutMeasurement, contentOffset = _a.contentOffset, contentSize = _a.contentSize;
+    return (layoutMeasurement.width + contentOffset.x >=
+        contentSize.width - endReachedOffset);
+};
+var isCloseToLeft = function (_a, endReachedOffset) {
+    var layoutMeasurement = _a.layoutMeasurement, contentOffset = _a.contentOffset, contentSize = _a.contentSize;
+    return (layoutMeasurement.width + contentOffset.x <=
+        contentSize.width - endReachedOffset);
+};
+var BarAndLineChartsWrapper = function (props) {
+    var _a, _b, _c, _d, _e;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, endReachedOffset = props.endReachedOffset, onMomentumScrollEnd = props.onMomentumScrollEnd, onScrollEndDrag = props.onScrollEndDrag, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f, // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
+    showBackgroundSlices = props.showBackgroundSlices;
+    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps;
+    useEffect(function () {
+        if (pointerConfig && getPointerProps) {
+            getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
+        }
+    }, [pointerIndex, pointerX, pointerY]);
+    /*******************************************************************************************************************************************/
+    /*******************************************************************************************************************************************/
+    var styles = StyleSheet.create({
+        container: {
+            width: '100%',
+            height: containerHeightIncludingBelowXAxis +
+                labelsExtraHeight +
+                xAxisLabelsVerticalShift +
+                (trimYAxisAtTop ? 0 : yAxisExtraHeight) +
+                50 -
+                overflowTop,
+            marginTop: trimYAxisAtTop ? containerHeight / 20 : 0,
+            marginBottom: (xAxisLabelsHeight !== null && xAxisLabelsHeight !== void 0 ? xAxisLabelsHeight : xAxisTextNumberOfLines * 18) -
+                55 -
+                xAxisLabelsVerticalShift, //This is to not let the Things that should be rendered below the chart overlap with it
+        },
+    });
+    return (_jsxs(View, { style: [
+            styles.container,
+            horizontal && {
+                width: actualContainerWidth,
+                transform: transformForHorizontal,
+            },
+        ], children: [hideAxesAndRules !== true
+                ? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: false, renderReferenceLines: !referenceLinesOverChartContent }))
+                : null, _jsx(ScrollView, __assign({ onScrollBeginDrag: function () {
+                    setCanMomentum(true);
+                }, onScrollEndDrag: function (evt) {
+                    var direction = 0;
+                    if (isCloseToLeft(evt.nativeEvent, endReachedOffset)) {
+                        direction = -1;
+                    }
+                    else if (isCloseToRight(evt.nativeEvent, endReachedOffset)) {
+                        direction = 1;
+                    }
+                    if (onScrollEndDrag) {
+                        onScrollEndDrag(evt, direction);
+                    }
+                }, nestedScrollEnabled: nestedScrollEnabled, onMomentumScrollEnd: function (_a) {
+                    var nativeEvent = _a.nativeEvent;
+                    if (onMomentumScrollEnd) {
+                        onMomentumScrollEnd();
+                    }
+                    if (isCloseToEnd(nativeEvent) && canMomentum) {
+                        onEndReached ? onEndReached() : null;
+                        setCanMomentum(false);
+                    }
+                    if (isCloseToStart(nativeEvent) && canMomentum) {
+                        onStartReached ? onStartReached() : null;
+                        setCanMomentum(false);
+                    }
+                }, scrollEventThrottle: props.scrollEventThrottle ? props.scrollEventThrottle : 16, horizontal: true, ref: scrollRef, style: [
+                    {
+                        marginLeft: horizontal && !yAxisAtTop
+                            ? -yAxisThickness -
+                                (props.width ? 20 : 0) -
+                                ((_c = (_b = (_a = data[data.length - 1]) === null || _a === void 0 ? void 0 : _a.barWidth) !== null && _b !== void 0 ? _b : barWidth) !== null && _c !== void 0 ? _c : 0) / 2
+                            : yAxisSide === yAxisSides.RIGHT
+                                ? 0
+                                : yAxisLabelWidth + yAxisThickness,
+                        position: 'absolute',
+                        bottom: chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness,
+                    },
+                    !!props.width && { width: props.width + extraWidthDueToDataPoint },
+                    horizontal && {
+                        width: ((_d = props.width) !== null && _d !== void 0 ? _d : totalWidth) + (props.width ? endSpacing : -20),
+                    },
+                ], contentContainerStyle: [
+                    {
+                        height: containerHeightIncludingBelowXAxis +
+                            yAxisExtraHeight +
+                            labelsExtraHeight +
+                            (50 + xAxisLabelsVerticalShift),
+                        width: Math.max((_e = props.width) !== null && _e !== void 0 ? _e : 0, totalWidth - spacing + endSpacing) +
+                            extraWidthDueToDataPoint,
+                        paddingLeft: initialSpacing,
+                        paddingBottom: noOfSectionsBelowXAxis * stepHeight + labelsExtraHeight,
+                        alignItems: 'flex-end',
+                    },
+                    !props.width && { width: totalWidth },
+                ], scrollEnabled: !disableScroll, showsHorizontalScrollIndicator: showScrollIndicator, indicatorStyle: indicatorColor, onContentSizeChange: function () {
+                    if (scrollRef.current && scrollToEnd) {
+                        scrollRef.current.scrollToEnd({ animated: scrollAnimation });
+                    }
+                    else if (scrollRef.current && scrollToIndex) {
+                        scrollRef.current.scrollTo({
+                            x: initialSpacing +
+                                ((barWidth !== null && barWidth !== void 0 ? barWidth : 0) + spacing) * scrollToIndex -
+                                spacing,
+                            animated: scrollAnimation,
+                        });
+                    }
+                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [showBackgroundSlices && chartType === chartTypes.LINE ? (_jsx(View, { style: {
+                                position: 'absolute',
+                                bottom: 61 + xAxisLabelsVerticalShift,
+                                left: initialSpacing,
+                                height: containerHeightIncludingBelowXAxis,
+                                width: totalWidth,
+                                zIndex: -1,
+                            }, children: renderBackgroundSlices({
+                                data: data || [],
+                                endSpacing: endSpacing,
+                                totalWidth: totalWidth,
+                            }) })) : null, showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps))) : null, 
+                        // Only For Line Charts-
+                        chartType === chartTypes.LINE &&
+                            data.map(function (item, index) {
+                                return showXAxisIndices || item.showXAxisIndex ? (_jsx(View, { style: {
+                                        position: 'absolute',
+                                        height: xAxisIndicesHeight,
+                                        width: xAxisIndicesWidth,
+                                        backgroundColor: xAxisIndicesColor,
+                                        bottom: 60 - xAxisIndicesHeight / 2,
+                                        left: index * spacing +
+                                            (initialSpacing - xAxisIndicesWidth / 2) -
+                                            3,
+                                    } }, index + '' + item.value)) : null;
+                            }), renderChartContent(containerHeightIncludingBelowXAxis)] }) })), referenceLinesOverChartContent
+                ? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: true }))
+                : null, horizSectionProps.floatingYAxisLabels &&
+                renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyLabels: true }))] }));
+};
+export default BarAndLineChartsWrapper;

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.d.ts

@@ -0,0 +1,7 @@
+interface RenderBackgroundSlicesProps {
+    data: any[];
+    endSpacing?: number;
+    totalWidth: number;
+}
+export declare const renderBackgroundSlices: (props: RenderBackgroundSlicesProps) => (import("react/jsx-runtime").JSX.Element | null)[] | null;
+export {};

package/dist/Components/BarAndLineChartsWrapper/renderBackgroundSlices.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+export var renderBackgroundSlices = function (props) {
+    var data = props.data, totalWidth = props.totalWidth, _a = props.endSpacing, endSpacing = _a === void 0 ? 0 : _a;
+    if (!data || data.length === 0) {
+        return null;
+    }
+    // Calculate total chart width
+    var totalChartWidth = totalWidth - endSpacing;
+    // Each slice gets equal width based on TOTAL data length (not filtered)
+    var sliceWidth = totalChartWidth / data.length;
+    // Map over ALL data items, preserving original index positions
+    return data.map(function (item, index) {
+        // Skip rendering if no background slice color specified
+        if (!item.backgroundSliceColor) {
+            return null;
+        }
+        // Use original data index for position
+        return (_jsx(View, { style: {
+                position: 'absolute',
+                left: sliceWidth * index,
+                top: 0,
+                bottom: 0,
+                width: sliceWidth,
+                backgroundColor: item.backgroundSliceColor,
+                zIndex: -100,
+                opacity: 0.5,
+            } }, "bg-slice-".concat(item.id, "-").concat(index)));
+    });
+};

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.d.ts

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