react-native-gifted-charts 1.4.20 → 1.4.22

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -0,0 +1,322 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text, View } from 'react-native';
+import Rule from '../lineSvg';
+import { styles } from '../../LineChart/styles';
+import { getHorizSectionVals, yAxisSides, chartTypes, } from 'gifted-charts-core';
+export var renderHorizSections = function (props) {
+    var chartType = props.chartType, width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis;
+    var _a = getHorizSectionVals(props), secondaryYAxisConfig = _a.secondaryYAxisConfig, horizSections = _a.horizSections, yAxisExtraHeightAtTop = _a.yAxisExtraHeightAtTop, secondaryHorizSections = _a.secondaryHorizSections, showReferenceLine1 = _a.showReferenceLine1, referenceLine1Config = _a.referenceLine1Config, referenceLine1Position = _a.referenceLine1Position, showReferenceLine2 = _a.showReferenceLine2, referenceLine2Config = _a.referenceLine2Config, referenceLine2Position = _a.referenceLine2Position, showReferenceLine3 = _a.showReferenceLine3, referenceLine3Config = _a.referenceLine3Config, referenceLine3Position = _a.referenceLine3Position, horizSectionsBelow = _a.horizSectionsBelow, secondaryHorizSectionsBelow = _a.secondaryHorizSectionsBelow, getLabelTexts = _a.getLabelTexts, getLabelTextsForSecondaryYAxis = _a.getLabelTextsForSecondaryYAxis;
+    var renderAxesAndRules = function (index) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var invertedIndex = horizSections.length - index - 1;
+        return (_jsxs(View, { style: [
+                index === noOfSections
+                    ? styles.lastLeftPart
+                    : !index
+                        ? { justifyContent: 'flex-start' }
+                        : styles.leftPart,
+                {
+                    borderColor: yAxisColor,
+                    backgroundColor: (_a = sectionColors === null || sectionColors === void 0 ? void 0 : sectionColors[invertedIndex]) !== null && _a !== void 0 ? _a : backgroundColor,
+                    width: (props.width || totalWidth - spacing) + endSpacing,
+                },
+                !index ? { height: stepHeight / 2, marginTop: stepHeight / 2 } : null,
+                yAxisSide === yAxisSides.RIGHT
+                    ? { borderRightWidth: yAxisThickness }
+                    : { borderLeftWidth: yAxisThickness },
+            ], children: [index === noOfSections ? (_jsx(Rule, { config: {
+                        thickness: xAxisThickness,
+                        color: xAxisColor,
+                        width: xAxisLength ||
+                            (props.width || totalWidth - spacing) + endSpacing,
+                        dashWidth: dashWidth,
+                        dashGap: dashGap,
+                        type: xAxisType,
+                    } })) : hideRules ? null : (_jsx(Rule, { config: {
+                        thickness: (_c = (_b = rulesConfigArray[invertedIndex]) === null || _b === void 0 ? void 0 : _b.rulesThickness) !== null && _c !== void 0 ? _c : rulesThickness,
+                        color: (_e = (_d = rulesConfigArray[invertedIndex]) === null || _d === void 0 ? void 0 : _d.rulesColor) !== null && _e !== void 0 ? _e : rulesColor,
+                        width: (_h = (_g = (_f = rulesConfigArray[invertedIndex]) === null || _f === void 0 ? void 0 : _f.rulesLength) !== null && _g !== void 0 ? _g : rulesLength) !== null && _h !== void 0 ? _h : (props.width || totalWidth - spacing) + endSpacing,
+                        dashWidth: (_k = (_j = rulesConfigArray[invertedIndex]) === null || _j === void 0 ? void 0 : _j.dashWidth) !== null && _k !== void 0 ? _k : dashWidth,
+                        dashGap: (_m = (_l = rulesConfigArray[invertedIndex]) === null || _l === void 0 ? void 0 : _l.dashGap) !== null && _m !== void 0 ? _m : dashGap,
+                        type: (_p = (_o = rulesConfigArray[invertedIndex]) === null || _o === void 0 ? void 0 : _o.rulesType) !== null && _p !== void 0 ? _p : rulesType,
+                    } })), showYAxisIndices && index !== noOfSections ? (_jsx(View, { style: {
+                        position: 'absolute',
+                        height: yAxisIndicesHeight,
+                        width: yAxisIndicesWidth,
+                        left: yAxisIndicesWidth / -2 +
+                            (yAxisSide === yAxisSides.RIGHT
+                                ? (width !== null && width !== void 0 ? width : totalWidth) +
+                                    yAxisLabelWidth / 2 +
+                                    yAxisIndicesWidth / 4
+                                : 0),
+                        backgroundColor: yAxisIndicesColor,
+                    } })) : null] }));
+    };
+    var renderExtraHeightOfYAxisAtTop = function () {
+        var _a, _b;
+        return (_jsxs(View, { style: [
+                styles.horizBar,
+                {
+                    width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing,
+                    top: stepHeight / 2,
+                },
+                horizontal &&
+                    !yAxisAtTop && {
+                    transform: [{ rotateY: '180deg' }],
+                },
+                horizontalRulesStyle,
+            ], children: [_jsx(View, { style: [
+                        styles.leftLabel,
+                        {
+                            height: yAxisExtraHeightAtTop,
+                            width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                        },
+                        yAxisLabelContainerStyle,
+                    ] }), _jsx(View, { style: [
+                        styles.leftPart,
+                        {
+                            borderLeftColor: yAxisColor,
+                            borderRightColor: yAxisColor,
+                            borderTopColor: (_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.color) !== null && _a !== void 0 ? _a : xAxisColor,
+                            borderTopWidth: secondaryXAxis
+                                ? (_b = secondaryXAxis.thickness) !== null && _b !== void 0 ? _b : xAxisThickness
+                                : 0,
+                            backgroundColor: backgroundColor,
+                            width: (props.width || totalWidth - spacing) + endSpacing,
+                        },
+                        yAxisSide === yAxisSides.RIGHT
+                            ? { borderRightWidth: yAxisThickness }
+                            : { borderLeftWidth: yAxisThickness },
+                    ] })] }));
+    };
+    var renderSecondaryYaxisLabels = function (horizSections, isBelow) {
+        return horizSections.map(function (sectionItems, index) {
+            var _a, _b, _c;
+            var label = getLabelTextsForSecondaryYAxis(sectionItems.value, index);
+            if (secondaryYAxisConfig.hideOrigin && index === 0) {
+                label = '';
+            }
+            return (_jsxs(View, { style: [
+                    styles.horizBar,
+                    styles.leftLabel,
+                    {
+                        position: 'absolute',
+                        zIndex: 1,
+                        bottom: ((_a = secondaryYAxisConfig.stepHeight) !== null && _a !== void 0 ? _a : 0) *
+                            ((isBelow ? 0 : noOfSectionsBelowXAxis) +
+                                index -
+                                (noOfSectionsBelowXAxis ? 0 : 0.5)),
+                        width: secondaryYAxisConfig.yAxisLabelWidth,
+                        height: (_b = secondaryYAxisConfig.stepHeight) !== null && _b !== void 0 ? _b : 0,
+                    },
+                    yAxisLabelContainerStyle,
+                ], children: [secondaryYAxisConfig.showYAxisIndices && index !== 0 ? (_jsx(View, { style: {
+                            height: secondaryYAxisConfig.yAxisIndicesHeight,
+                            width: secondaryYAxisConfig.yAxisIndicesWidth,
+                            position: 'absolute',
+                            left: ((_c = secondaryYAxisConfig.yAxisIndicesWidth) !== null && _c !== void 0 ? _c : 0) / -2,
+                            backgroundColor: secondaryYAxisConfig.yAxisIndicesColor,
+                        } })) : null, _jsx(Text, { numberOfLines: secondaryYAxisConfig.yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [secondaryYAxisConfig.yAxisTextStyle], children: label })] }, index));
+        });
+    };
+    var referenceLines = function () {
+        return (_jsxs(_Fragment, { children: [showReferenceLine1 ? (_jsxs(View, { style: {
+                        position: 'absolute',
+                        zIndex: referenceLine1Config.zIndex,
+                        bottom: ((referenceLine1Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
+                            containerHeight) /
+                            maxValue,
+                        left: yAxisSide === yAxisSides.RIGHT
+                            ? 0
+                            : yAxisLabelWidth + yAxisThickness,
+                    }, children: [_jsx(Rule, { config: referenceLine1Config }), referenceLine1Config.labelText ? (_jsx(Text, { style: [
+                                { position: 'absolute' },
+                                referenceLine1Config.labelTextStyle,
+                            ], children: referenceLine1Config.labelText })) : null] })) : null, showReferenceLine2 ? (_jsxs(View, { style: {
+                        position: 'absolute',
+                        zIndex: referenceLine2Config.zIndex,
+                        bottom: ((referenceLine2Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
+                            containerHeight) /
+                            maxValue,
+                        left: yAxisSide === yAxisSides.RIGHT
+                            ? 0
+                            : yAxisLabelWidth + yAxisThickness,
+                    }, children: [_jsx(Rule, { config: referenceLine2Config }), referenceLine2Config.labelText ? (_jsx(Text, { style: [
+                                { position: 'absolute' },
+                                referenceLine2Config.labelTextStyle,
+                            ], children: referenceLine2Config.labelText })) : null] })) : null, showReferenceLine3 ? (_jsxs(View, { style: {
+                        position: 'absolute',
+                        zIndex: referenceLine3Config.zIndex,
+                        bottom: ((referenceLine3Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
+                            containerHeight) /
+                            maxValue,
+                        left: yAxisSide === yAxisSides.RIGHT
+                            ? 0
+                            : yAxisLabelWidth + yAxisThickness,
+                    }, children: [_jsx(Rule, { config: referenceLine3Config }), referenceLine3Config.labelText ? (_jsx(Text, { style: [
+                                { position: 'absolute' },
+                                referenceLine3Config.labelTextStyle,
+                            ], children: referenceLine3Config.labelText })) : null] })) : null] }));
+    };
+    var leftShiftForRIghtYaxis = (width ? width + 20 : totalWidth) +
+        yAxisLabelWidth / 2 +
+        endSpacing -
+        (chartType === chartTypes.BAR ? 40 : 60);
+    return (_jsx(_Fragment, { children: onlyReferenceLines ? (_jsx(View, { style: {
+                flexDirection: 'row',
+                backgroundColor: 'green',
+            }, children: _jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs(View, { pointerEvents: "none", style: {
+                flexDirection: 'row',
+                marginTop: stepHeight / -2,
+            }, children: [_jsxs(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: [yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
+                            return (_jsxs(View, { style: [
+                                    styles.horizBar,
+                                    {
+                                        width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing,
+                                    },
+                                    horizontal &&
+                                        !yAxisAtTop && {
+                                        transform: [{ rotateY: '180deg' }],
+                                    },
+                                    horizontalRulesStyle,
+                                ], children: [_jsx(View, { style: [
+                                            styles.leftLabel,
+                                            {
+                                                height: index === noOfSections ? stepHeight / 2 : stepHeight,
+                                                width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                                            },
+                                            yAxisLabelContainerStyle,
+                                        ] }), renderAxesAndRules(index)] }, index));
+                        }), 
+                        /***********************************************************************************************/
+                        /**************************      Render the y axis labels separately      **********************/
+                        /***********************************************************************************************/
+                        !hideYAxisText &&
+                            horizSections.map(function (sectionItems, index) {
+                                var label = getLabelTexts(sectionItems.value, index);
+                                if (hideOrigin && index === horizSections.length - 1) {
+                                    label = '';
+                                }
+                                return (_jsx(View, { style: [
+                                        styles.horizBar,
+                                        styles.leftLabel,
+                                        {
+                                            position: 'absolute',
+                                            zIndex: 1,
+                                            top: stepHeight * index + yAxisExtraHeightAtTop,
+                                            width: yAxisLabelWidth,
+                                            height: index === noOfSections
+                                                ? stepHeight / 2
+                                                : stepHeight,
+                                        },
+                                        yAxisSide === yAxisSides.RIGHT && {
+                                            left: leftShiftForRIghtYaxis,
+                                        },
+                                        horizontal &&
+                                            !yAxisAtTop && {
+                                            transform: [
+                                                {
+                                                    translateX: (width !== null && width !== void 0 ? width : totalWidth) - 30 + endSpacing,
+                                                },
+                                            ],
+                                        },
+                                        yAxisLabelContainerStyle,
+                                    ], children: _jsx(Text, { numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                            yAxisTextStyle,
+                                            horizontal && {
+                                                transform: [
+                                                    {
+                                                        rotate: "".concat(rotateYAxisTexts !== null && rotateYAxisTexts !== void 0 ? rotateYAxisTexts : (rtl ? 90 : -90), "deg"),
+                                                    },
+                                                ],
+                                            },
+                                            index === noOfSections && {
+                                                marginBottom: stepHeight / -2,
+                                            },
+                                        ], children: label }) }, index));
+                            })
+                        /***********************************************************************************************/
+                        /***********************************************************************************************/
+                        , horizSectionsBelow.map(function (sectionItems, index) {
+                            return (_jsxs(View, { style: [
+                                    styles.horizBar,
+                                    {
+                                        width: (width !== null && width !== void 0 ? width : totalWidth) + 15,
+                                    },
+                                    index === 0 && { marginTop: negativeStepHeight / 2 },
+                                ], children: [_jsx(View, { style: [
+                                            styles.leftLabel,
+                                            {
+                                                borderRightWidth: yAxisThickness,
+                                                borderColor: yAxisColor,
+                                                marginLeft: yAxisThickness,
+                                            },
+                                            {
+                                                height: index === 0
+                                                    ? negativeStepHeight * 1.5
+                                                    : negativeStepHeight,
+                                                width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                                            },
+                                            index === 0 && { marginTop: -negativeStepHeight / 2 },
+                                        ] }), _jsx(View, { style: [
+                                            styles.leftPart,
+                                            { backgroundColor: backgroundColor },
+                                        ], children: hideRules ? null : (_jsx(Rule, { config: {
+                                                thickness: rulesThickness,
+                                                color: rulesColor,
+                                                width: rulesLength ||
+                                                    (props.width || totalWidth - spacing) + endSpacing,
+                                                dashWidth: dashWidth,
+                                                dashGap: dashGap,
+                                                type: rulesType,
+                                            } })) })] }, index));
+                        }), 
+                        /***********************************************************************************************/
+                        /*************************      Render the y axis labels below origin      *********************/
+                        /***********************************************************************************************/
+                        !hideYAxisText &&
+                            horizSectionsBelow.map(function (sectionItems, index) {
+                                var label = getLabelTexts(horizSectionsBelow[horizSectionsBelow.length - 1 - index]
+                                    .value, index);
+                                return (_jsx(View, { style: [
+                                        styles.horizBar,
+                                        styles.leftLabel,
+                                        {
+                                            position: 'absolute',
+                                            zIndex: 1,
+                                            bottom: negativeStepHeight * index,
+                                            width: yAxisLabelWidth,
+                                            height: index === noOfSectionsBelowXAxis
+                                                ? negativeStepHeight / 2
+                                                : negativeStepHeight,
+                                        },
+                                        yAxisSide === yAxisSides.RIGHT && {
+                                            left: (width !== null && width !== void 0 ? width : totalWidth) + yAxisLabelWidth,
+                                        },
+                                        yAxisLabelContainerStyle,
+                                    ], children: _jsx(Text, { numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                            yAxisTextStyle,
+                                            index === noOfSectionsBelowXAxis && {
+                                                marginBottom: negativeStepHeight / -2,
+                                            },
+                                        ], children: label }) }, index));
+                            })
+                        /***********************************************************************************************/
+                        /***********************************************************************************************/
+                        , renderReferenceLines ? referenceLines() : null] }), 
+                /***********************************************************************************************/
+                /*************************      Render the secondary Y Axis                *********************/
+                /***********************************************************************************************/
+                secondaryYAxis ? (_jsxs(View, { style: {
+                        width: secondaryYAxisConfig.yAxisLabelWidth,
+                        left: width ? yAxisLabelWidth : yAxisLabelWidth - spacing,
+                        borderColor: secondaryYAxisConfig.yAxisColor,
+                        borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
+                        height: containerHeight + yAxisExtraHeightAtTop,
+                        bottom: stepHeight / -2,
+                    }, children: [!secondaryYAxisConfig.hideYAxisText
+                            ? renderSecondaryYaxisLabels(secondaryHorizSections, false)
+                            : null, noOfSectionsBelowXAxis && !secondaryYAxisConfig.hideYAxisText
+                            ? renderSecondaryYaxisLabels(secondaryHorizSectionsBelow, true)
+                            : null] })) : null] })) }));
+};

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

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

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Animated } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { renderSpecificVerticalLines } from './renderSpecificVerticalLines';
+import { renderDataPoints } from './renderDataPoints';
+import { renderSpecificDataPoints } from './renderSpecificDataPoints';
+var RenderLineInBarChart = function (props) {
+    var _a;
+    var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex;
+    var firstBarWidth = (_a = data[0].barWidth) !== null && _a !== void 0 ? _a : barWidth;
+    var dataPointsProps = {
+        data: data,
+        lineConfig: lineConfig,
+        barWidth: barWidth,
+        containerHeight: containerHeight,
+        maxValue: maxValue,
+        firstBarWidth: firstBarWidth,
+        yAxisLabelWidth: yAxisLabelWidth,
+        spacing: spacing,
+        selectedIndex: selectedIndex,
+    };
+    var specificVerticalLinesProps = {
+        data: data,
+        barWidth: barWidth,
+        yAxisLabelWidth: yAxisLabelWidth,
+        initialSpacing: initialSpacing,
+        spacing: spacing,
+        containerHeight: containerHeight,
+        lineConfig: lineConfig,
+        maxValue: maxValue,
+    };
+    var specificDataPointsProps = {
+        data: data,
+        barWidth: barWidth,
+        firstBarWidth: firstBarWidth,
+        yAxisLabelWidth: yAxisLabelWidth,
+        lineConfig: lineConfig,
+        spacing: spacing,
+        containerHeight: containerHeight,
+        maxValue: maxValue,
+    };
+    var renderAnimatedLine = function () {
+        var _a, _b, _c;
+        // console.log('animatedWidth is-------->', animatedWidth);
+        return (_jsx(Animated.View, { pointerEvents: "none", style: {
+                position: 'absolute',
+                height: containerHeight + 10,
+                left: 6 - yAxisLabelWidth,
+                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                width: animatedWidth,
+                zIndex: lineBehindBars ? -1 : 100000,
+                // backgroundColor: 'wheat',
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+                        ? renderDataPoints(dataPointsProps)
+                        : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
+    };
+    var renderLine = function () {
+        var _a, _b, _c;
+        return (_jsx(View, { pointerEvents: "none", style: {
+                position: 'absolute',
+                height: containerHeight + 10 + labelsExtraHeight,
+                left: 6 - yAxisLabelWidth,
+                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                width: totalWidth,
+                zIndex: lineBehindBars ? -1 : 100000,
+                // backgroundColor: 'rgba(200,150,150,0.1)'
+            }, children: _jsxs(Svg, { children: [_jsx(Path, { d: points, fill: "none", stroke: lineConfig.color, strokeWidth: lineConfig.thickness }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+                        ? renderDataPoints(dataPointsProps)
+                        : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
+    };
+    if (lineConfig.isAnimated) {
+        return renderAnimatedLine();
+    }
+    return renderLine();
+};
+export default RenderLineInBarChart;

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.d.ts

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

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { styles } from '../../../BarChart/styles';
+import { View } from 'react-native';
+import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
+import { Rect, Text as CanvasText, Circle } from 'react-native-svg';
+export var renderDataPoints = function (props) {
+    var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex;
+    return data.map(function (item, index) {
+        var _a, _b, _c, _d, _e;
+        if (index < lineConfig.startIndex ||
+            index > lineConfig.endIndex ||
+            item.hideDataPoint) {
+            return null;
+        }
+        var currentBarWidth = item.barWidth || barWidth || 30;
+        var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
+        var dataPointColor = lineConfig.focusEnabled &&
+            index === ((_a = lineConfig.focusedDataPointIndex) !== null && _a !== void 0 ? _a : selectedIndex)
+            ? lineConfig.focusedDataPointColor
+            : lineConfig.dataPointsColor;
+        var dataPointRadius = lineConfig.focusEnabled &&
+            index === ((_b = lineConfig.focusedDataPointIndex) !== null && _b !== void 0 ? _b : selectedIndex)
+            ? lineConfig.focusedDataPointRadius
+            : lineConfig.dataPointsRadius;
+        var value = (_c = item.value) !== null && _c !== void 0 ? _c : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
+        if (customDataPoint) {
+            return (_jsx(View, { style: [
+                    styles.customDataPointContainer,
+                    {
+                        height: lineConfig.dataPointsHeight,
+                        width: lineConfig.dataPointsWidth,
+                        top: containerHeight -
+                            (value * containerHeight) / maxValue -
+                            ((_e = (_d = item.shiftY) !== null && _d !== void 0 ? _d : lineConfig.shiftY) !== null && _e !== void 0 ? _e : 0),
+                        left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
+                    },
+                ], children: customDataPoint(item, index) }));
+        }
+        if (lineConfig.dataPointsShape === 'rectangular') {
+            return (_jsxs(Fragment, { children: [_jsx(Rect, { x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
+                            lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
+                            lineConfig.dataPointsHeight / 2 +
+                            (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
+        }
+        return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing), cy: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue), r: dataPointRadius, fill: dataPointColor }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, fontSize: item.textFontSize || lineConfig.textFontSize, x: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing) + (item.textShiftX || lineConfig.textShiftX || 0), y: getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue) -
+                        lineConfig.dataPointsHeight / 2 +
+                        (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
+    });
+};

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.d.ts

@@ -0,0 +1 @@
+export declare const renderSpecificDataPoints: (props: any) => any;

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
+import { Circle, Rect, Text as CanvasText } from 'react-native-svg';
+export var renderSpecificDataPoints = function (props) {
+    var data = props.data, barWidth = props.barWidth, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, lineConfig = props.lineConfig, spacing = props.spacing, containerHeight = props.containerHeight, maxValue = props.maxValue;
+    return data.map(function (item, index) {
+        var currentBarWidth = item.barWidth || barWidth || 30;
+        var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
+        var y = getYForLineInBar(item.value, lineConfig.shiftY, containerHeight, maxValue);
+        if (item.showDataPoint) {
+            if (item.dataPointShape === 'rectangular') {
+                return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - item.dataPointsHeight / 2, width: item.dataPointWidth || lineConfig.dataPointsWidth, height: item.dataPointHeight || 2, fill: item.dataPointColor || 'black' }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || 'black', fontSize: item.textFontSize || 10, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
+                                (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
+            }
+            else {
+                return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: x, cy: y, r: item.dataPointRadius || 3, fill: item.dataPointColor || 'black' }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || 'black', fontSize: item.textFontSize || 10, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
+                                (item.dataPointHeight || lineConfig.dataPointsHeight) / 2 +
+                                (item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index));
+            }
+        }
+        return null;
+    });
+};

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.d.ts

@@ -0,0 +1 @@
+export declare const renderSpecificVerticalLines: (props: any) => any;

package/dist/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Rect } from 'react-native-svg';
+export var renderSpecificVerticalLines = function (props) {
+    var data = props.data, barWidth = props.barWidth, yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue;
+    return data.map(function (item, index) {
+        if (item.showVerticalLine) {
+            var currentBarWidth = item.barWidth || barWidth || 30;
+            return (_jsx(Rect, { x: yAxisLabelWidth +
+                    6 -
+                    (item.verticalLineThickness || 1) / 2 -
+                    1 -
+                    (initialSpacing - currentBarWidth / 2) +
+                    (currentBarWidth + spacing) * index, y: containerHeight -
+                    lineConfig.shiftY -
+                    (item.value * containerHeight) / maxValue +
+                    9, width: item.verticalLineThickness || 1, height: (item.value * containerHeight) / maxValue + lineConfig.shiftY, fill: item.verticalLineColor || 'lightgray' }));
+        }
+        return null;
+    });
+};

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

@@ -0,0 +1,2 @@
+declare const RenderVerticalLines: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default RenderVerticalLines;

package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { chartTypes } from 'gifted-charts-core';
+import { Line, Svg } from 'react-native-svg';
+var RenderVerticalLines = function (props) {
+    var verticalLinesAr = props.verticalLinesAr, verticalLinesSpacing = props.verticalLinesSpacing, spacing = props.spacing, initialSpacing = props.initialSpacing, verticalLinesZIndex = props.verticalLinesZIndex, verticalLinesHeight = props.verticalLinesHeight, verticalLinesThickness = props.verticalLinesThickness, verticalLinesColor = props.verticalLinesColor, verticalLinesStrokeDashArray = props.verticalLinesStrokeDashArray, verticalLinesShift = props.verticalLinesShift, verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint, verticalLinesStrokeLinecap = props.verticalLinesStrokeLinecap, xAxisThickness = props.xAxisThickness, labelsExtraHeight = props.labelsExtraHeight, containerHeight = props.containerHeight, data = props.data, stackData = props.stackData, barWidth = props.barWidth, maxValue = props.maxValue, chartType = props.chartType, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, totalWidth = props.totalWidth, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift;
+    var getHeightOfVerticalLine = function (index) {
+        if (verticalLinesUptoDataPoint) {
+            if (index < data.length) {
+                return ((data[index].value * containerHeight) / maxValue - xAxisThickness);
+            }
+            else {
+                return verticalLinesHeight !== null && verticalLinesHeight !== void 0 ? verticalLinesHeight : 0;
+            }
+        }
+        else {
+            return (verticalLinesHeight ||
+                containerHeightIncludingBelowXAxis - xAxisThickness);
+        }
+    };
+    var extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
+    var thickness = verticalLinesThickness || 2;
+    var heightAdjustmentDueToStrokeLinecap = verticalLinesStrokeLinecap === 'round' ||
+        verticalLinesStrokeLinecap === 'square'
+        ? thickness / 2
+        : 0;
+    return (_jsx(View, { style: {
+            position: 'absolute',
+            height: extendedContainerHeight,
+            bottom: 60 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+            width: totalWidth,
+            zIndex: verticalLinesZIndex || -1,
+        }, children: _jsx(Svg, { children: verticalLinesAr.map(function (item, index) {
+                var totalSpacing = initialSpacing;
+                if (verticalLinesSpacing) {
+                    totalSpacing = verticalLinesSpacing * (index + 1);
+                }
+                else {
+                    if (stackData) {
+                        totalSpacing += (stackData[0].barWidth || barWidth || 30) / 2;
+                    }
+                    else {
+                        totalSpacing += (data[0].barWidth || barWidth || 30) / 2;
+                    }
+                    for (var i = 0; i < index; i++) {
+                        var actualSpacing = spacing;
+                        if (stackData) {
+                            if (i >= stackData.length - 1) {
+                                actualSpacing += (barWidth || 30) / 2;
+                            }
+                            else {
+                                if (stackData[i].spacing || stackData[i].spacing === 0) {
+                                    actualSpacing = stackData[i].spacing;
+                                }
+                                if (stackData[i + 1].barWidth) {
+                                    actualSpacing += stackData[i + 1].barWidth;
+                                }
+                                else {
+                                    actualSpacing += barWidth || 30;
+                                }
+                            }
+                        }
+                        else {
+                            if (i >= data.length - 1) {
+                                actualSpacing += (barWidth || 30) / 2;
+                            }
+                            else {
+                                if (data[i].spacing || data[i].spacing === 0) {
+                                    actualSpacing = data[i].spacing;
+                                }
+                                if (data[i + 1].barWidth) {
+                                    actualSpacing += data[i + 1].barWidth;
+                                }
+                                else {
+                                    actualSpacing += barWidth || 30;
+                                }
+                            }
+                        }
+                        totalSpacing += actualSpacing;
+                    }
+                }
+                var x = verticalLinesShift +
+                    1 +
+                    (chartType === chartTypes.BAR
+                        ? totalSpacing - 1
+                        : verticalLinesSpacing
+                            ? verticalLinesSpacing * (index + 1)
+                            : index * spacing + (initialSpacing - 2));
+                return (_jsx(Line, { x1: x, y1: extendedContainerHeight -
+                        getHeightOfVerticalLine(index) +
+                        heightAdjustmentDueToStrokeLinecap, x2: x, y2: extendedContainerHeight - heightAdjustmentDueToStrokeLinecap, stroke: verticalLinesColor || 'lightgray', strokeWidth: verticalLinesThickness || 2, strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '', strokeLinecap: verticalLinesStrokeLinecap }, index));
+            }) }) }));
+};
+export default RenderVerticalLines;

package/dist/Components/BarSpecificComponents/barBackgroundPattern.d.ts

@@ -0,0 +1,2 @@
+declare const BarBackgroundPattern: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default BarBackgroundPattern;

package/dist/Components/BarSpecificComponents/barBackgroundPattern.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { Defs, Rect } from 'react-native-svg';
+var BarBackgroundPattern = function (props) {
+    var barBackgroundPatternFromItem = props.barBackgroundPatternFromItem, barBackgroundPatternFromProps = props.barBackgroundPatternFromProps, patternIdFromItem = props.patternIdFromItem, patternIdFromProps = props.patternIdFromProps;
+    return (_jsxs(Svg, { children: [_jsx(Defs, { children: barBackgroundPatternFromItem
+                    ? barBackgroundPatternFromItem()
+                    : barBackgroundPatternFromProps() }), _jsx(Rect, { stroke: "transparent", x: "1", y: "1", width: "100%", height: "100%", fill: "url(#".concat(patternIdFromItem !== null && patternIdFromItem !== void 0 ? patternIdFromItem : patternIdFromProps, ")") })] }));
+};
+export default BarBackgroundPattern;

package/dist/Components/BarSpecificComponents/cap.d.ts

@@ -0,0 +1,2 @@
+declare const Cap: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Cap;