react-native-gifted-charts 1.4.21 → 1.4.23

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -1 +1,322 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.renderHorizSections=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _lineSvg=_interopRequireDefault(require("../lineSvg"));var _styles=require("../../LineChart/styles");var _giftedChartsCore=require("gifted-charts-core");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/Components/BarAndLineChartsWrapper/renderHorizSections.tsx";var renderHorizSections=exports.renderHorizSections=function renderHorizSections(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 _getHorizSectionVals=(0,_giftedChartsCore.getHorizSectionVals)(props),secondaryYAxisConfig=_getHorizSectionVals.secondaryYAxisConfig,horizSections=_getHorizSectionVals.horizSections,yAxisExtraHeightAtTop=_getHorizSectionVals.yAxisExtraHeightAtTop,secondaryHorizSections=_getHorizSectionVals.secondaryHorizSections,showReferenceLine1=_getHorizSectionVals.showReferenceLine1,referenceLine1Config=_getHorizSectionVals.referenceLine1Config,referenceLine1Position=_getHorizSectionVals.referenceLine1Position,showReferenceLine2=_getHorizSectionVals.showReferenceLine2,referenceLine2Config=_getHorizSectionVals.referenceLine2Config,referenceLine2Position=_getHorizSectionVals.referenceLine2Position,showReferenceLine3=_getHorizSectionVals.showReferenceLine3,referenceLine3Config=_getHorizSectionVals.referenceLine3Config,referenceLine3Position=_getHorizSectionVals.referenceLine3Position,horizSectionsBelow=_getHorizSectionVals.horizSectionsBelow,secondaryHorizSectionsBelow=_getHorizSectionVals.secondaryHorizSectionsBelow,getLabelTexts=_getHorizSectionVals.getLabelTexts,getLabelTextsForSecondaryYAxis=_getHorizSectionVals.getLabelTextsForSecondaryYAxis;var renderAxesAndRules=function renderAxesAndRules(index){var _sectionColors$invert,_rulesConfigArray$inv,_rulesConfigArray$inv2,_rulesConfigArray$inv3,_rulesConfigArray$inv4,_ref,_rulesConfigArray$inv5,_rulesConfigArray$inv6,_rulesConfigArray$inv7,_rulesConfigArray$inv8,_rulesConfigArray$inv9,_rulesConfigArray$inv10,_rulesConfigArray$inv11,_rulesConfigArray$inv12;var invertedIndex=horizSections.length-index-1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[index===noOfSections?_styles.styles.lastLeftPart:!index?{justifyContent:'flex-start'}:_styles.styles.leftPart,{borderColor:yAxisColor,backgroundColor:(_sectionColors$invert=sectionColors==null?void 0:sectionColors[invertedIndex])!=null?_sectionColors$invert:backgroundColor,width:(props.width||totalWidth-spacing)+endSpacing},!index?{height:stepHeight/2,marginTop:stepHeight/2}:null,yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?{borderRightWidth:yAxisThickness}:{borderLeftWidth:yAxisThickness}],children:[index===noOfSections?(0,_jsxRuntime.jsx)(_lineSvg.default,{config:{thickness:xAxisThickness,color:xAxisColor,width:xAxisLength||(props.width||totalWidth-spacing)+endSpacing,dashWidth:dashWidth,dashGap:dashGap,type:xAxisType}}):hideRules?null:(0,_jsxRuntime.jsx)(_lineSvg.default,{config:{thickness:(_rulesConfigArray$inv=(_rulesConfigArray$inv2=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv2.rulesThickness)!=null?_rulesConfigArray$inv:rulesThickness,color:(_rulesConfigArray$inv3=(_rulesConfigArray$inv4=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv4.rulesColor)!=null?_rulesConfigArray$inv3:rulesColor,width:(_ref=(_rulesConfigArray$inv5=(_rulesConfigArray$inv6=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv6.rulesLength)!=null?_rulesConfigArray$inv5:rulesLength)!=null?_ref:(props.width||totalWidth-spacing)+endSpacing,dashWidth:(_rulesConfigArray$inv7=(_rulesConfigArray$inv8=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv8.dashWidth)!=null?_rulesConfigArray$inv7:dashWidth,dashGap:(_rulesConfigArray$inv9=(_rulesConfigArray$inv10=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv10.dashGap)!=null?_rulesConfigArray$inv9:dashGap,type:(_rulesConfigArray$inv11=(_rulesConfigArray$inv12=rulesConfigArray[invertedIndex])==null?void 0:_rulesConfigArray$inv12.rulesType)!=null?_rulesConfigArray$inv11:rulesType}}),showYAxisIndices&&index!==noOfSections?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',height:yAxisIndicesHeight,width:yAxisIndicesWidth,left:yAxisIndicesWidth/-2+(yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?(width!=null?width:totalWidth)+yAxisLabelWidth/2+yAxisIndicesWidth/4:0),backgroundColor:yAxisIndicesColor}}):null]});};var renderExtraHeightOfYAxisAtTop=function renderExtraHeightOfYAxisAtTop(){var _secondaryXAxis$color,_secondaryXAxis$thick;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_styles.styles.horizBar,{width:(width!=null?width:totalWidth)+endSpacing,top:stepHeight/2},horizontal&&!yAxisAtTop&&{transform:[{rotateY:'180deg'}]},horizontalRulesStyle],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.leftLabel,{height:yAxisExtraHeightAtTop,width:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth},yAxisLabelContainerStyle]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.leftPart,{borderLeftColor:yAxisColor,borderRightColor:yAxisColor,borderTopColor:(_secondaryXAxis$color=secondaryXAxis==null?void 0:secondaryXAxis.color)!=null?_secondaryXAxis$color:xAxisColor,borderTopWidth:secondaryXAxis?(_secondaryXAxis$thick=secondaryXAxis.thickness)!=null?_secondaryXAxis$thick:xAxisThickness:0,backgroundColor:backgroundColor,width:(props.width||totalWidth-spacing)+endSpacing},yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?{borderRightWidth:yAxisThickness}:{borderLeftWidth:yAxisThickness}]})]});};var renderSecondaryYaxisLabels=function renderSecondaryYaxisLabels(horizSections,isBelow){return horizSections.map(function(sectionItems,index){var _secondaryYAxisConfig,_secondaryYAxisConfig2,_secondaryYAxisConfig3;var label=getLabelTextsForSecondaryYAxis(sectionItems.value,index);if(secondaryYAxisConfig.hideOrigin&&index===0){label='';}return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_styles.styles.horizBar,_styles.styles.leftLabel,{position:'absolute',zIndex:1,bottom:((_secondaryYAxisConfig=secondaryYAxisConfig.stepHeight)!=null?_secondaryYAxisConfig:0)*((isBelow?0:noOfSectionsBelowXAxis)+index-(noOfSectionsBelowXAxis?0:0.5)),width:secondaryYAxisConfig.yAxisLabelWidth,height:(_secondaryYAxisConfig2=secondaryYAxisConfig.stepHeight)!=null?_secondaryYAxisConfig2:0},yAxisLabelContainerStyle],children:[secondaryYAxisConfig.showYAxisIndices&&index!==0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:secondaryYAxisConfig.yAxisIndicesHeight,width:secondaryYAxisConfig.yAxisIndicesWidth,position:'absolute',left:((_secondaryYAxisConfig3=secondaryYAxisConfig.yAxisIndicesWidth)!=null?_secondaryYAxisConfig3:0)/-2,backgroundColor:secondaryYAxisConfig.yAxisIndicesColor}}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:secondaryYAxisConfig.yAxisTextNumberOfLines,ellipsizeMode:'clip',style:[secondaryYAxisConfig.yAxisTextStyle],children:label})]},index);});};var referenceLines=function referenceLines(){return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[showReferenceLine1?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:'absolute',zIndex:referenceLine1Config.zIndex,bottom:(referenceLine1Position-(yAxisOffset!=null?yAxisOffset:0))*containerHeight/maxValue,left:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth+yAxisThickness},children:[(0,_jsxRuntime.jsx)(_lineSvg.default,{config:referenceLine1Config}),referenceLine1Config.labelText?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{position:'absolute'},referenceLine1Config.labelTextStyle],children:referenceLine1Config.labelText}):null]}):null,showReferenceLine2?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:'absolute',zIndex:referenceLine2Config.zIndex,bottom:(referenceLine2Position-(yAxisOffset!=null?yAxisOffset:0))*containerHeight/maxValue,left:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth+yAxisThickness},children:[(0,_jsxRuntime.jsx)(_lineSvg.default,{config:referenceLine2Config}),referenceLine2Config.labelText?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{position:'absolute'},referenceLine2Config.labelTextStyle],children:referenceLine2Config.labelText}):null]}):null,showReferenceLine3?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:'absolute',zIndex:referenceLine3Config.zIndex,bottom:(referenceLine3Position-(yAxisOffset!=null?yAxisOffset:0))*containerHeight/maxValue,left:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth+yAxisThickness},children:[(0,_jsxRuntime.jsx)(_lineSvg.default,{config:referenceLine3Config}),referenceLine3Config.labelText?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{position:'absolute'},referenceLine3Config.labelTextStyle],children:referenceLine3Config.labelText}):null]}):null]});};var leftShiftForRIghtYaxis=(width?width+20:totalWidth)+yAxisLabelWidth/2+endSpacing-(chartType===_giftedChartsCore.chartTypes.BAR?40:60);return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:onlyReferenceLines?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:'row',backgroundColor:'green'},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:(width!=null?width:totalWidth)+endSpacing},children:referenceLines()})}):(0,_jsxRuntime.jsxs)(_reactNative.View,{pointerEvents:"none",style:{flexDirection:'row',marginTop:stepHeight/-2},children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{width:(width!=null?width:totalWidth)+endSpacing},children:[yAxisExtraHeightAtTop?renderExtraHeightOfYAxisAtTop():null,horizSections.map(function(sectionItems,index){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_styles.styles.horizBar,{width:(width!=null?width:totalWidth)+endSpacing},horizontal&&!yAxisAtTop&&{transform:[{rotateY:'180deg'}]},horizontalRulesStyle],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.leftLabel,{height:index===noOfSections?stepHeight/2:stepHeight,width:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth},yAxisLabelContainerStyle]}),renderAxesAndRules(index)]},index);}),!hideYAxisText&&horizSections.map(function(sectionItems,index){var label=getLabelTexts(sectionItems.value,index);if(hideOrigin&&index===horizSections.length-1){label='';}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.horizBar,_styles.styles.leftLabel,{position:'absolute',zIndex:1,top:stepHeight*index+yAxisExtraHeightAtTop,width:yAxisLabelWidth,height:index===noOfSections?stepHeight/2:stepHeight},yAxisSide===_giftedChartsCore.yAxisSides.RIGHT&&{left:leftShiftForRIghtYaxis},horizontal&&!yAxisAtTop&&{transform:[{translateX:(width!=null?width:totalWidth)-30+endSpacing}]},yAxisLabelContainerStyle],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:yAxisTextNumberOfLines,ellipsizeMode:'clip',style:[yAxisTextStyle,horizontal&&{transform:[{rotate:`${rotateYAxisTexts!=null?rotateYAxisTexts:rtl?90:-90}deg`}]},index===noOfSections&&{marginBottom:stepHeight/-2}],children:label})},index);}),horizSectionsBelow.map(function(sectionItems,index){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_styles.styles.horizBar,{width:(width!=null?width:totalWidth)+15},index===0&&{marginTop:negativeStepHeight/2}],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.leftLabel,{borderRightWidth:yAxisThickness,borderColor:yAxisColor,marginLeft:yAxisThickness},{height:index===0?negativeStepHeight*1.5:negativeStepHeight,width:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth},index===0&&{marginTop:-negativeStepHeight/2}]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.leftPart,{backgroundColor:backgroundColor}],children:hideRules?null:(0,_jsxRuntime.jsx)(_lineSvg.default,{config:{thickness:rulesThickness,color:rulesColor,width:rulesLength||(props.width||totalWidth-spacing)+endSpacing,dashWidth:dashWidth,dashGap:dashGap,type:rulesType}})})]},index);}),!hideYAxisText&&horizSectionsBelow.map(function(sectionItems,index){var label=getLabelTexts(horizSectionsBelow[horizSectionsBelow.length-1-index].value,index);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.horizBar,_styles.styles.leftLabel,{position:'absolute',zIndex:1,bottom:negativeStepHeight*index,width:yAxisLabelWidth,height:index===noOfSectionsBelowXAxis?negativeStepHeight/2:negativeStepHeight},yAxisSide===_giftedChartsCore.yAxisSides.RIGHT&&{left:(width!=null?width:totalWidth)+yAxisLabelWidth},yAxisLabelContainerStyle],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:yAxisTextNumberOfLines,ellipsizeMode:'clip',style:[yAxisTextStyle,index===noOfSectionsBelowXAxis&&{marginBottom:negativeStepHeight/-2}],children:label})},index);}),renderReferenceLines?referenceLines():null]}),secondaryYAxis?(0,_jsxRuntime.jsxs)(_reactNative.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]})});};
+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

@@ -1 +1,76 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _renderSpecificVerticalLines=require("./renderSpecificVerticalLines");var _renderDataPoints=require("./renderDataPoints");var _renderSpecificDataPoints=require("./renderSpecificDataPoints");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/index.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var RenderLineInBarChart=function RenderLineInBarChart(props){var _data$0$barWidth;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=(_data$0$barWidth=data[0].barWidth)!=null?_data$0$barWidth: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 renderAnimatedLine(){var _lineConfig$arrowConf,_lineConfig$arrowConf2,_lineConfig$arrowConf3;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:{position:'absolute',height:containerHeight+10,left:6-yAxisLabelWidth,bottom:50+xAxisLabelsVerticalShift,width:animatedWidth,zIndex:lineBehindBars?-1:100000},children:(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:points,fill:"none",stroke:lineConfig.color,strokeWidth:lineConfig.thickness}),(0,_renderSpecificVerticalLines.renderSpecificVerticalLines)(specificVerticalLinesProps),!lineConfig.hideDataPoints?(0,_renderDataPoints.renderDataPoints)(dataPointsProps):(0,_renderSpecificDataPoints.renderSpecificDataPoints)(specificDataPointsProps),lineConfig.showArrow&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:arrowPoints,fill:(_lineConfig$arrowConf=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf.fillColor,stroke:(_lineConfig$arrowConf2=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf2.strokeColor,strokeWidth:(_lineConfig$arrowConf3=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf3.strokeWidth})]})});};var renderLine=function renderLine(){var _lineConfig$arrowConf4,_lineConfig$arrowConf5,_lineConfig$arrowConf6;return(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:{position:'absolute',height:containerHeight+10+labelsExtraHeight,left:6-yAxisLabelWidth,bottom:50+xAxisLabelsVerticalShift,width:totalWidth,zIndex:lineBehindBars?-1:100000},children:(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:points,fill:"none",stroke:lineConfig.color,strokeWidth:lineConfig.thickness}),(0,_renderSpecificVerticalLines.renderSpecificVerticalLines)(specificVerticalLinesProps),!lineConfig.hideDataPoints?(0,_renderDataPoints.renderDataPoints)(dataPointsProps):(0,_renderSpecificDataPoints.renderSpecificDataPoints)(specificDataPointsProps),lineConfig.showArrow&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:arrowPoints,fill:(_lineConfig$arrowConf4=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf4.fillColor,stroke:(_lineConfig$arrowConf5=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf5.strokeColor,strokeWidth:(_lineConfig$arrowConf6=lineConfig.arrowConfig)==null?void 0:_lineConfig$arrowConf6.strokeWidth})]})});};if(lineConfig.isAnimated){return renderAnimatedLine();}return renderLine();};var _default=exports.default=RenderLineInBarChart;
+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

@@ -1 +1,50 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.renderDataPoints=void 0;var _react=_interopRequireWildcard(require("react"));var _styles=require("../../../BarChart/styles");var _reactNative=require("react-native");var _giftedChartsCore=require("gifted-charts-core");var _reactNativeSvg=require("react-native-svg");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderDataPoints.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var renderDataPoints=exports.renderDataPoints=function renderDataPoints(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 _lineConfig$focusedDa,_lineConfig$focusedDa2,_item$value;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===((_lineConfig$focusedDa=lineConfig.focusedDataPointIndex)!=null?_lineConfig$focusedDa:selectedIndex)?lineConfig.focusedDataPointColor:lineConfig.dataPointsColor;var dataPointRadius=lineConfig.focusEnabled&&index===((_lineConfig$focusedDa2=lineConfig.focusedDataPointIndex)!=null?_lineConfig$focusedDa2:selectedIndex)?lineConfig.focusedDataPointRadius:lineConfig.dataPointsRadius;var value=(_item$value=item.value)!=null?_item$value:item.stacks.reduce(function(total,item){return total+item.value;},0);if(customDataPoint){var _ref,_item$shiftY;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.customDataPointContainer,{height:lineConfig.dataPointsHeight,width:lineConfig.dataPointsWidth,top:containerHeight-value*containerHeight/maxValue-((_ref=(_item$shiftY=item.shiftY)!=null?_item$shiftY:lineConfig.shiftY)!=null?_ref:0),left:(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing)}],children:customDataPoint(item,index)});}if(lineConfig.dataPointsShape==='rectangular'){return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{x:(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing),y:(0,_giftedChartsCore.getYForLineInBar)(value,lineConfig.shiftY,containerHeight,maxValue)-lineConfig.dataPointsHeight/2,width:lineConfig.dataPointsWidth,height:lineConfig.dataPointsHeight,fill:dataPointColor}),item.dataPointText&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{fill:item.textColor||lineConfig.textColor,fontSize:item.textFontSize||lineConfig.textFontSize,x:(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing)+(item.textShiftX||lineConfig.textShiftX||0),y:(0,_giftedChartsCore.getYForLineInBar)(value,lineConfig.shiftY,containerHeight,maxValue)-lineConfig.dataPointsHeight/2+(item.textShiftY||lineConfig.textShiftY||0),children:item.dataPointText})]},index);}return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing),cy:(0,_giftedChartsCore.getYForLineInBar)(value,lineConfig.shiftY,containerHeight,maxValue),r:dataPointRadius,fill:dataPointColor}),item.dataPointText&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{fill:item.textColor||lineConfig.textColor,fontSize:item.textFontSize||lineConfig.textFontSize,x:(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing)+(item.textShiftX||lineConfig.textShiftX||0),y:(0,_giftedChartsCore.getYForLineInBar)(value,lineConfig.shiftY,containerHeight,maxValue)-lineConfig.dataPointsHeight/2+(item.textShiftY||lineConfig.textShiftY||0),children:item.dataPointText})]},index);});};
+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

@@ -1 +1,25 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.renderSpecificDataPoints=void 0;var _react=_interopRequireWildcard(require("react"));var _giftedChartsCore=require("gifted-charts-core");var _reactNativeSvg=require("react-native-svg");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificDataPoints.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var renderSpecificDataPoints=exports.renderSpecificDataPoints=function renderSpecificDataPoints(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=(0,_giftedChartsCore.getXForLineInBar)(index,firstBarWidth,currentBarWidth,yAxisLabelWidth,lineConfig,spacing);var y=(0,_giftedChartsCore.getYForLineInBar)(item.value,lineConfig.shiftY,containerHeight,maxValue);if(item.showDataPoint){if(item.dataPointShape==='rectangular'){return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{x:x,y:y-item.dataPointsHeight/2,width:item.dataPointWidth||lineConfig.dataPointsWidth,height:item.dataPointHeight||2,fill:item.dataPointColor||'black'}),item.dataPointText&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{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(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:x,cy:y,r:item.dataPointRadius||3,fill:item.dataPointColor||'black'}),item.dataPointText&&(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{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;});};
+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

@@ -1 +1,20 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.renderSpecificVerticalLines=void 0;var _react=_interopRequireDefault(require("react"));var _reactNativeSvg=require("react-native-svg");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/Components/BarAndLineChartsWrapper/renderLineInBarChart/renderSpecificVerticalLines.tsx";var renderSpecificVerticalLines=exports.renderSpecificVerticalLines=function renderSpecificVerticalLines(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(0,_jsxRuntime.jsx)(_reactNativeSvg.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;});};
+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;