@harveylx/react-native-gifted-charts 1.4.70

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -0,0 +1,468 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 '@harveylx/gifted-charts-core';
+export var renderHorizSections = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    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, onlyLabels = props.onlyLabels, renderReferenceLines = props.renderReferenceLines, secondaryXAxis = props.secondaryXAxis, customBackground = props.customBackground, allowFontScaling = props.allowFontScaling;
+    var _k = getHorizSectionVals(props), secondaryYAxisConfig = _k.secondaryYAxisConfig, horizSections = _k.horizSections, yAxisExtraHeightAtTop = _k.yAxisExtraHeightAtTop, secondaryHorizSections = _k.secondaryHorizSections, showReferenceLine1 = _k.showReferenceLine1, referenceLine1Config = _k.referenceLine1Config, referenceLine1Position = _k.referenceLine1Position, showReferenceLine2 = _k.showReferenceLine2, referenceLine2Config = _k.referenceLine2Config, referenceLine2Position = _k.referenceLine2Position, showReferenceLine3 = _k.showReferenceLine3, referenceLine3Config = _k.referenceLine3Config, referenceLine3Position = _k.referenceLine3Position, horizSectionsBelow = _k.horizSectionsBelow, secondaryHorizSectionsBelow = _k.secondaryHorizSectionsBelow, getLabelTexts = _k.getLabelTexts, getLabelTextsForSecondaryYAxis = _k.getLabelTextsForSecondaryYAxis;
+    var secondaryYAxisExtraHeightAtBottom = 10;
+    var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
+    var isLineChart = chartType === chartTypes.LINE;
+    var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
+    var renderAxesAndRules = function (index) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var invertedIndex = horizSections.length - index - 1;
+        var rulesConfigArrayLocal = rulesConfigArray[invertedIndex - 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: (_b = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesThickness) !== null && _b !== void 0 ? _b : rulesThickness,
+                        color: (_c = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesColor) !== null && _c !== void 0 ? _c : rulesColor,
+                        width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || totalWidth - spacing) + endSpacing,
+                        dashWidth: (_f = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashWidth) !== null && _f !== void 0 ? _f : dashWidth,
+                        dashGap: (_g = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashGap) !== null && _g !== void 0 ? _g : dashGap,
+                        type: (_h = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesType) !== null && _h !== void 0 ? _h : 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, _d, _e, _f, _g, _h, _j, _k;
+            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: (index - 0.5) *
+                            (isBelow
+                                ? ((_b = (_a = secondaryYAxisConfig.negativeStepHeight) !== null && _a !== void 0 ? _a : secondaryYAxisConfig.stepHeight) !== null && _b !== void 0 ? _b : 0)
+                                : ((_c = secondaryYAxisConfig.stepHeight) !== null && _c !== void 0 ? _c : 0)) +
+                            (isBelow ? secondaryYAxisExtraHeightAtBottom : 0),
+                        width: secondaryYAxisConfig.yAxisLabelWidth,
+                        height: isBelow
+                            ? ((_e = (_d = secondaryYAxisConfig.negativeStepHeight) !== null && _d !== void 0 ? _d : secondaryYAxisConfig.stepHeight) !== null && _e !== void 0 ? _e : 0)
+                            : ((_f = secondaryYAxisConfig.stepHeight) !== null && _f !== void 0 ? _f : 0),
+                    },
+                    (_g = secondaryYAxisConfig.yAxisLabelContainerStyle) !== null && _g !== void 0 ? _g : yAxisLabelContainerStyle,
+                ], children: [secondaryYAxisConfig.showYAxisIndices && (index !== 0 || isBelow) ? (_jsx(View, { style: {
+                            height: secondaryYAxisConfig.yAxisIndicesHeight,
+                            width: secondaryYAxisConfig.yAxisIndicesWidth,
+                            position: 'absolute',
+                            left: ((_h = secondaryYAxisConfig.yAxisIndicesWidth) !== null && _h !== void 0 ? _h : 0) / -2,
+                            backgroundColor: secondaryYAxisConfig.yAxisIndicesColor,
+                        } })) : null, _jsx(Text, { numberOfLines: secondaryYAxisConfig.yAxisTextNumberOfLines, ellipsizeMode: 'clip', allowFontScaling: allowFontScaling, style: [
+                            {
+                                textAlign: 'left',
+                                width: (_k = (_j = secondaryYAxisConfig.yAxisLabelContainerStyle) === null || _j === void 0 ? void 0 : _j.width) !== null && _k !== void 0 ? _k : secondaryYAxisConfig.yAxisLabelWidth,
+                                marginLeft: 10,
+                            },
+                            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, { allowFontScaling: allowFontScaling, 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, { allowFontScaling: allowFontScaling, 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, { allowFontScaling: allowFontScaling, style: [
+                                { position: 'absolute' },
+                                referenceLine3Config.labelTextStyle,
+                            ], children: referenceLine3Config.labelText })) : null] })) : null] }));
+    };
+    var horizSectionsBelowRenderer = function (index, showBorder) {
+        var _a;
+        // negative sections height will correspond to negative Y-axis config in case there are extra negative horiz sections corresponding to the secondary Y axis
+        var localNegativeStepHeight = !showBorder
+            ? ((_a = secondaryYAxisConfig.negativeStepHeight) !== null && _a !== void 0 ? _a : negativeStepHeight)
+            : negativeStepHeight;
+        return (_jsxs(View, { style: [
+                styles.horizBar,
+                {
+                    width: (width !== null && width !== void 0 ? width : totalWidth) + 15,
+                },
+                index === 0 && { marginTop: localNegativeStepHeight / 2 },
+            ], children: [_jsx(View, { style: [
+                        styles.leftLabel,
+                        {
+                            marginLeft: yAxisThickness,
+                        },
+                        {
+                            height: index === 0
+                                ? localNegativeStepHeight * 1.5
+                                : localNegativeStepHeight,
+                            width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
+                        },
+                        index === 0 && { marginTop: -localNegativeStepHeight / 2 },
+                    ] }), _jsx(View, { style: {
+                        position: 'absolute',
+                        top: index === 0 ? -localNegativeStepHeight / 2 : 0,
+                        left: yAxisSide === yAxisSides.RIGHT
+                            ? width
+                                ? width + 19
+                                : totalWidth -
+                                    (isLineChart ? 31 : isLineBiColor ? spacing - 19 : 1)
+                            : yAxisLabelWidth,
+                        borderRightWidth: yAxisThickness,
+                        borderColor: yAxisColor,
+                        height: index === 0
+                            ? localNegativeStepHeight * 1.5
+                            : localNegativeStepHeight,
+                    } }), _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));
+    };
+    var leftShiftForRIghtYaxis = (width ? width + (isLineChart ? 50 : 20) : totalWidth) +
+        yAxisLabelWidth / 2 +
+        endSpacing -
+        (isLineChart ? 70 : 40);
+    return (_jsx(_Fragment, { children: onlyReferenceLines ? (_jsx(View, { style: {
+                flexDirection: 'row',
+            }, 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,
+                position: onlyLabels ? 'absolute' : 'relative',
+            }, children: [_jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: onlyLabels ? (!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, { allowFontScaling: allowFontScaling, 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));
+                        })) : (_jsxs(_Fragment, { children: [customBackground ? (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    backgroundColor: customBackground.color,
+                                    width: (_a = customBackground.width) !== null && _a !== void 0 ? _a : (width !== null && width !== void 0 ? width : totalWidth) +
+                                        endSpacing -
+                                        9 +
+                                        ((_b = customBackground.widthAdjustment) !== null && _b !== void 0 ? _b : 0),
+                                    height: (_c = customBackground.height) !== null && _c !== void 0 ? _c : '100%',
+                                    left: yAxisLabelWidth +
+                                        ((_d = customBackground.horizontalShift) !== null && _d !== void 0 ? _d : 0),
+                                    top: (_e = customBackground.verticalShift) !== null && _e !== void 0 ? _e : 0,
+                                }, children: customBackground.component
+                                    ? customBackground.component()
+                                    : null })) : null, 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, { allowFontScaling: allowFontScaling, 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 (_, index) {
+                                return horizSectionsBelowRenderer(index, true);
+                            }), 
+                            /***********************************************************************************************/
+                            /*     If more -ve sections in Secondary Y-axis, then we need to render the Rules for them     */
+                            /***********************************************************************************************/
+                            secondaryYAxis &&
+                                negativeSectionsCountDiffPrimaryVsSecondary > 0
+                                ? __spreadArray([], __read(Array(negativeSectionsCountDiffPrimaryVsSecondary).keys()), false).map(function (_, index) {
+                                    return horizSectionsBelowRenderer(index, false);
+                                })
+                                : null, 
+                            /***********************************************************************************************/
+                            /*************************      Render the y axis labels below origin      *********************/
+                            /***********************************************************************************************/
+                            !hideYAxisText &&
+                                horizSectionsBelow.map(function (_, index) {
+                                    var invertedIndex = horizSectionsBelow.length - 1 - index;
+                                    var label = getLabelTexts(horizSectionsBelow[invertedIndex].value, index);
+                                    return (_jsx(View, { style: [
+                                            styles.horizBar,
+                                            styles.leftLabel,
+                                            {
+                                                position: 'absolute',
+                                                zIndex: 1,
+                                                top: containerHeight +
+                                                    negativeStepHeight * (invertedIndex + 1) +
+                                                    yAxisExtraHeightAtTop,
+                                                width: yAxisLabelWidth,
+                                                height: index === noOfSectionsBelowXAxis
+                                                    ? negativeStepHeight / 2
+                                                    : negativeStepHeight,
+                                            },
+                                            yAxisSide === yAxisSides.RIGHT && {
+                                                left: (width
+                                                    ? width - 15
+                                                    : totalWidth - (isLineChart ? 65 : 35)) +
+                                                    yAxisLabelWidth,
+                                            },
+                                            yAxisLabelContainerStyle,
+                                        ], children: _jsx(Text, { allowFontScaling: allowFontScaling, numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [
+                                                yAxisTextStyle,
+                                                index === noOfSectionsBelowXAxis && {
+                                                    marginBottom: negativeStepHeight / -2,
+                                                },
+                                            ], children: label }) }, index));
+                                })
+                            /***********************************************************************************************/
+                            /***********************************************************************************************/
+                            , renderReferenceLines ? referenceLines() : null] })) }), 
+                /***********************************************************************************************/
+                /*************************      Render the secondary Y Axis                *********************/
+                /***********************************************************************************************/
+                !onlyLabels && secondaryYAxis ? (_jsx(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 })) : null, 
+                /***********************************************************************************************/
+                /*************************      Render the secondary Y Axis below origin   *********************/
+                /***********************************************************************************************/
+                !onlyLabels &&
+                    secondaryYAxis &&
+                    secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx(View, { style: {
+                        width: (_f = secondaryYAxisConfig.yAxisLabelWidth) !== null && _f !== void 0 ? _f : yAxisLabelWidth,
+                        left: (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
+                            ((_g = secondaryYAxisConfig.yAxisLabelWidth) !== null && _g !== void 0 ? _g : yAxisLabelWidth),
+                        borderColor: secondaryYAxisConfig.yAxisColor,
+                        borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
+                        height: ((_j = (_h = secondaryYAxisConfig.negativeStepHeight) !== null && _h !== void 0 ? _h : secondaryYAxisConfig.stepHeight) !== null && _j !== void 0 ? _j : stepHeight) *
+                            secondaryHorizSectionsBelow.length +
+                            secondaryYAxisExtraHeightAtBottom,
+                        bottom: -containerHeight - stepHeight / 2 - yAxisExtraHeightAtTop,
+                    }, children: !secondaryYAxisConfig.hideYAxisText
+                        ? renderSecondaryYaxisLabels(secondaryHorizSectionsBelow, true)
+                        : null })) : null] })) }));
+};

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

@@ -0,0 +1,3 @@
+import { LineInBarChartPropsType } from '@harveylx/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,87 @@
+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';
+import { isIos } from '../../../utils';
+var RenderLineInBarChart = function (props) {
+    var _a, _b;
+    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, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset, highlightEnabled = props.highlightEnabled, lowlightOpacity = props.lowlightOpacity;
+    var firstBarWidth = (_a = data[0].barWidth) !== null && _a !== void 0 ? _a : barWidth;
+    var opacity = highlightEnabled
+        ? ((_b = selectedIndex.includes) === null || _b === void 0 ? void 0 : _b.call(selectedIndex, -1))
+            ? 1
+            : lowlightOpacity
+        : 1;
+    var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
+    var dataPointsProps = {
+        data: data,
+        lineConfig: lineConfig,
+        barWidth: barWidth,
+        containerHeight: containerHeight,
+        maxValue: maxValue,
+        firstBarWidth: firstBarWidth,
+        yAxisLabelWidth: yAxisLabelWidth,
+        spacing: spacing,
+        selectedIndex: selectedIndex[0],
+        yAxisOffset: yAxisOffset,
+        opacity: opacity,
+        svgHeight: svgHeight,
+        totalWidth: totalWidth,
+    };
+    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,
+        yAxisOffset: yAxisOffset,
+    };
+    var renderAnimatedLine = function () {
+        var _a, _b, _c;
+        return (_jsx(Animated.View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
+                position: 'absolute',
+                height: svgHeight,
+                left: 6 - yAxisLabelWidth,
+                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                width: animatedWidth,
+                zIndex: lineBehindBars ? -1 : 100000,
+                // backgroundColor: 'wheat',
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), 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: isIos ? 'none' : 'box-none', style: {
+                position: 'absolute',
+                height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
+                left: 6 - yAxisLabelWidth,
+                bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                width: totalWidth,
+                zIndex: lineBehindBars ? -1 : 100000,
+                // backgroundColor: 'rgba(200,150,150,0.1)'
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), 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 '@harveylx/gifted-charts-core';
+export declare const renderDataPoints: (props: DataPointProps) => import("react/jsx-runtime").JSX.Element;