react-native-gifted-charts 1.4.21 → 1.4.23

package/dist/Components/AnimatedThreeDBar/index.js

@@ -1 +1,129 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _styles=require("./styles");var _LinearGradient=_interopRequireDefault(require("../common/LinearGradient"));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/AnimatedThreeDBar/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;}if(_reactNative.Platform.OS==='android'){_reactNative.UIManager.setLayoutAnimationEnabledExperimental&&_reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);}var TriangleCorner=function TriangleCorner(props){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[triangleStyles.triangleCorner,props.style,{borderRightWidth:props.width/2,borderTopWidth:props.width/2,borderTopColor:props.color}]});};var triangleStyles=_reactNative.StyleSheet.create({triangleCorner:{width:0,height:0,backgroundColor:'transparent',borderStyle:'solid',borderRightColor:'transparent',transform:[{rotate:'90deg'}]}});var AnimatedThreeDBar=function AnimatedThreeDBar(props){var heightCopy=props.height;var _useState=(0,_react.useState)(props.isAnimated?_reactNative.Platform.OS==='ios'?0:20:heightCopy),_useState2=(0,_slicedToArray2.default)(_useState,2),height=_useState2[0],setHeight=_useState2[1];var isAnimated=props.isAnimated,animationDuration=props.animationDuration,item=props.item,index=props.index,barWidth=props.barWidth,sideWidth=props.sideWidth,barStyle=props.barStyle,barBackgroundPattern=props.barBackgroundPattern,barInnerComponent=props.barInnerComponent,patternId=props.patternId,intactTopLabel=props.intactTopLabel,showValuesAsTopLabel=props.showValuesAsTopLabel,topLabelContainerStyle=props.topLabelContainerStyle,topLabelTextStyle=props.topLabelTextStyle;var _useAnimatedThreeDBar=(0,_giftedChartsCore.useAnimatedThreeDBar)(props),showGradient=_useAnimatedThreeDBar.showGradient,gradientColor=_useAnimatedThreeDBar.gradientColor,frontColor=_useAnimatedThreeDBar.frontColor,sideColor=_useAnimatedThreeDBar.sideColor,topColor=_useAnimatedThreeDBar.topColor,opacity=_useAnimatedThreeDBar.opacity,initialRender=_useAnimatedThreeDBar.initialRender,setInitialRender=_useAnimatedThreeDBar.setInitialRender;(0,_react.useEffect)(function(){if(isAnimated){if(initialRender){setTimeout(function(){layoutAppear();},20);}else{elevate();}}},[props.height]);var elevate=function elevate(){_reactNative.LayoutAnimation.configureNext({duration:animationDuration,update:{type:'linear',property:'scaleY'}});setHeight(props.height);};var layoutAppear=function layoutAppear(){_reactNative.LayoutAnimation.configureNext({duration:_reactNative.Platform.OS=='ios'?animationDuration:20,create:{type:'linear',property:'scaleY'}});setInitialRender(false);setTimeout(function(){return elevate();},_reactNative.Platform.OS=='ios'?10:100);};return(0,_jsxRuntime.jsx)(_reactNative.View,{style:_styles.styles.container,children:!initialRender&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_styles.styles.row,{opacity:opacity,position:'absolute',bottom:0},props.side==='right'&&{transform:[{rotateY:'180deg'}]}],children:[props.height?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',top:sideWidth/-2},children:(0,_jsxRuntime.jsx)(TriangleCorner,{color:topColor,width:sideWidth,style:{transform:[{rotate:'90deg'}],opacity:opacity}})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',top:sideWidth/-2},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:barWidth,height:barWidth,backgroundColor:topColor,opacity:opacity}})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',top:sideWidth/-2,left:barWidth-1},children:(0,_jsxRuntime.jsx)(TriangleCorner,{color:topColor,width:sideWidth,style:{transform:[{rotate:'-90deg'}],opacity:opacity}})})]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{marginTop:sideWidth/-2-1},children:[(0,_jsxRuntime.jsx)(TriangleCorner,{color:height?sideColor:'transparent',width:sideWidth,style:{transform:[{rotate:'-90deg'}],opacity:opacity}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:sideWidth/2+1,height:height-sideWidth/2,backgroundColor:sideColor,opacity:opacity}}),(0,_jsxRuntime.jsx)(TriangleCorner,{color:height?sideColor:'transparent',width:sideWidth+1,style:{transform:[{rotate:'90deg'}],opacity:opacity}})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{width:barWidth,height:height,backgroundColor:frontColor,borderLeftWidth:_reactNative.StyleSheet.hairlineWidth,borderTopWidth:_reactNative.StyleSheet.hairlineWidth,borderColor:'white',opacity:opacity},item.barStyle||barStyle],children:[showGradient&&(0,_jsxRuntime.jsx)(_LinearGradient.default,{style:{position:'absolute',width:'100%',height:'100%'},start:{x:0,y:0},end:{x:1,y:1},colors:[gradientColor,frontColor]}),barBackgroundPattern&&(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Defs,{children:barBackgroundPattern()}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{stroke:"transparent",x:"1",y:"1",width:barWidth||30,height:height,fill:`url(#${patternId})`})]}),barInnerComponent?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:'100%',width:'100%'},children:barInnerComponent(item,index)}):null]}),(item.topLabelComponent||showValuesAsTopLabel)&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{position:'absolute',top:barWidth*-2,height:barWidth*3/2,width:barWidth*3/2,justifyContent:'flex-end',alignItems:'center',opacity:opacity},props.horizontal&&!intactTopLabel&&{transform:[{rotate:'270deg'}]},props.side==='right'&&{transform:[{rotateY:'180deg'}]},topLabelContainerStyle!=null?topLabelContainerStyle:item.topLabelContainerStyle],children:showValuesAsTopLabel?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:topLabelTextStyle,children:item.value}):item.topLabelComponent==null?void 0:item.topLabelComponent()})]})});};var _default=exports.default=AnimatedThreeDBar;
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { View, StyleSheet, LayoutAnimation, Platform, UIManager, Text, } from 'react-native';
+import Svg, { Defs, Rect } from 'react-native-svg';
+import { styles } from './styles';
+import LinearGradient from "../common/LinearGradient";
+import { useAnimatedThreeDBar, } from 'gifted-charts-core';
+if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental &&
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+var TriangleCorner = function (props) {
+    return (_jsx(View, { style: [
+            triangleStyles.triangleCorner,
+            props.style,
+            {
+                borderRightWidth: props.width / 2,
+                borderTopWidth: props.width / 2,
+                borderTopColor: props.color,
+            },
+        ] }));
+};
+var triangleStyles = StyleSheet.create({
+    triangleCorner: {
+        width: 0,
+        height: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'solid',
+        borderRightColor: 'transparent',
+        transform: [{ rotate: '90deg' }],
+    },
+});
+var AnimatedThreeDBar = function (props) {
+    var _a;
+    var heightCopy = props.height;
+    var _b = __read(useState(props.isAnimated ? (Platform.OS === 'ios' ? 0 : 20) : heightCopy), 2), height = _b[0], setHeight = _b[1];
+    var isAnimated = props.isAnimated, animationDuration = props.animationDuration, item = props.item, index = props.index, barWidth = props.barWidth, sideWidth = props.sideWidth, barStyle = props.barStyle, barBackgroundPattern = props.barBackgroundPattern, barInnerComponent = props.barInnerComponent, patternId = props.patternId, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle;
+    var _c = useAnimatedThreeDBar(props), showGradient = _c.showGradient, gradientColor = _c.gradientColor, frontColor = _c.frontColor, sideColor = _c.sideColor, topColor = _c.topColor, opacity = _c.opacity, initialRender = _c.initialRender, setInitialRender = _c.setInitialRender;
+    useEffect(function () {
+        if (isAnimated) {
+            if (initialRender) {
+                setTimeout(function () {
+                    layoutAppear();
+                }, 20);
+            }
+            else {
+                elevate();
+            }
+        }
+    }, [props.height]);
+    var elevate = function () {
+        LayoutAnimation.configureNext({
+            duration: animationDuration,
+            update: { type: 'linear', property: 'scaleY' },
+        });
+        setHeight(props.height);
+    };
+    var layoutAppear = function () {
+        LayoutAnimation.configureNext({
+            duration: Platform.OS == 'ios' ? animationDuration : 20,
+            create: { type: 'linear', property: 'scaleY' },
+            // update: { type: 'linear' }
+        });
+        setInitialRender(false);
+        setTimeout(function () { return elevate(); }, Platform.OS == 'ios' ? 10 : 100);
+    };
+    return (_jsx(View, { style: styles.container, children: !initialRender && (_jsxs(View, { style: [
+                styles.row,
+                { opacity: opacity, position: 'absolute', bottom: 0 },
+                props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
+            ], children: [props.height ? (_jsxs(_Fragment, { children: [_jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: [{ rotate: '90deg' }], opacity: opacity } }) }), _jsx(View, { style: { position: 'absolute', top: sideWidth / -2 }, children: _jsx(View, { style: {
+                                    width: barWidth,
+                                    height: barWidth,
+                                    // left: width / 2,
+                                    backgroundColor: topColor,
+                                    opacity: opacity,
+                                } }) }), _jsx(View, { style: {
+                                position: 'absolute',
+                                top: sideWidth / -2,
+                                left: barWidth - 1,
+                            }, children: _jsx(TriangleCorner, { color: topColor, width: sideWidth, style: { transform: [{ rotate: '-90deg' }], opacity: opacity } }) })] })) : null, _jsxs(View, { style: { marginTop: sideWidth / -2 - 1 }, children: [_jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth, style: { transform: [{ rotate: '-90deg' }], opacity: opacity } }), _jsx(View, { style: {
+                                width: sideWidth / 2 + 1,
+                                height: height - sideWidth / 2, //animatedSideHeight
+                                backgroundColor: sideColor,
+                                opacity: opacity,
+                            } }), _jsx(TriangleCorner, { color: height ? sideColor : 'transparent', width: sideWidth + 1, style: { transform: [{ rotate: '90deg' }], opacity: opacity } })] }), _jsxs(View, { style: [
+                        {
+                            width: barWidth,
+                            height: height, //animatedHeight
+                            backgroundColor: frontColor,
+                            borderLeftWidth: StyleSheet.hairlineWidth,
+                            borderTopWidth: StyleSheet.hairlineWidth,
+                            borderColor: 'white',
+                            opacity: opacity,
+                        },
+                        item.barStyle || barStyle,
+                    ], children: [showGradient && (_jsx(LinearGradient, { style: { position: 'absolute', width: '100%', height: '100%' }, start: { x: 0, y: 0 }, end: { x: 1, y: 1 }, colors: [gradientColor, frontColor] })), barBackgroundPattern && (_jsxs(Svg, { children: [_jsx(Defs, { children: barBackgroundPattern() }), _jsx(Rect, { stroke: "transparent", x: "1", y: "1", width: barWidth || 30, height: height, fill: "url(#".concat(patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }), (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                        {
+                            position: 'absolute',
+                            top: barWidth * -2,
+                            height: (barWidth * 3) / 2,
+                            width: (barWidth * 3) / 2,
+                            justifyContent: 'flex-end',
+                            alignItems: 'center',
+                            opacity: opacity,
+                        },
+                        props.horizontal &&
+                            !intactTopLabel && { transform: [{ rotate: '270deg' }] },
+                        props.side === 'right' && { transform: [{ rotateY: '180deg' }] },
+                        topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
+                    ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) }))] })) }));
+};
+export default AnimatedThreeDBar;

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

@@ -0,0 +1,10 @@
+export declare const styles: {
+    container: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    row: {
+        flexDirection: "row";
+    };
+};

package/dist/Components/AnimatedThreeDBar/styles.js

@@ -1 +1,13 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.styles=void 0;var _reactNative=require("react-native");var styles=exports.styles=_reactNative.StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center'},row:{flexDirection:'row'}});
+import { StyleSheet } from 'react-native';
+export var styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        // width: '100%',
+        // height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    row: {
+        flexDirection: 'row',
+    },
+});

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

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

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -1 +1,128 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _renderHorizSections=require("./renderHorizSections");var _renderLineInBarChart=_interopRequireDefault(require("./renderLineInBarChart"));var _renderVerticalLines=_interopRequireDefault(require("./renderVerticalLines"));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/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 BarAndLineChartsWrapper=function BarAndLineChartsWrapper(props){var _ref2,_data$barWidth,_data,_props$width,_props$width2;var chartType=props.chartType,containerHeight=props.containerHeight,noOfSectionsBelowXAxis=props.noOfSectionsBelowXAxis,stepHeight=props.stepHeight,labelsExtraHeight=props.labelsExtraHeight,yAxisLabelWidth=props.yAxisLabelWidth,horizontal=props.horizontal,scrollRef=props.scrollRef,initialSpacing=props.initialSpacing,data=props.data,barWidth=props.barWidth,xAxisThickness=props.xAxisThickness,totalWidth=props.totalWidth,disableScroll=props.disableScroll,showScrollIndicator=props.showScrollIndicator,scrollToEnd=props.scrollToEnd,scrollToIndex=props.scrollToIndex,scrollAnimation=props.scrollAnimation,indicatorColor=props.indicatorColor,spacing=props.spacing,showLine=props.showLine,points2=props.points2,renderChartContent=props.renderChartContent,remainingScrollViewProps=props.remainingScrollViewProps,endSpacing=props.endSpacing,hideAxesAndRules=props.hideAxesAndRules,showXAxisIndices=props.showXAxisIndices,xAxisIndicesHeight=props.xAxisIndicesHeight,xAxisIndicesWidth=props.xAxisIndicesWidth,xAxisIndicesColor=props.xAxisIndicesColor,pointerConfig=props.pointerConfig,getPointerProps=props.getPointerProps,pointerIndex=props.pointerIndex,pointerX=props.pointerX,pointerY=props.pointerY,onEndReached=props.onEndReached,onStartReached=props.onStartReached,_onMomentumScrollEnd=props.onMomentumScrollEnd,nestedScrollEnabled=props.nestedScrollEnabled,_props$extraWidthDueT=props.extraWidthDueToDataPoint,extraWidthDueToDataPoint=_props$extraWidthDueT===void 0?0:_props$extraWidthDueT;var _useBarAndLineChartsW=(0,_giftedChartsCore.useBarAndLineChartsWrapper)(Object.assign({},props,{isRTL:_reactNative.I18nManager.isRTL})),containerHeightIncludingBelowXAxis=_useBarAndLineChartsW.containerHeightIncludingBelowXAxis,xAxisLabelsVerticalShift=_useBarAndLineChartsW.xAxisLabelsVerticalShift,trimYAxisAtTop=_useBarAndLineChartsW.trimYAxisAtTop,yAxisExtraHeight=_useBarAndLineChartsW.yAxisExtraHeight,overflowTop=_useBarAndLineChartsW.overflowTop,xAxisLabelsHeight=_useBarAndLineChartsW.xAxisLabelsHeight,xAxisTextNumberOfLines=_useBarAndLineChartsW.xAxisTextNumberOfLines,actualContainerWidth=_useBarAndLineChartsW.actualContainerWidth,transformForHorizontal=_useBarAndLineChartsW.transformForHorizontal,horizSectionProps=_useBarAndLineChartsW.horizSectionProps,referenceLinesOverChartContent=_useBarAndLineChartsW.referenceLinesOverChartContent,setCanMomentum=_useBarAndLineChartsW.setCanMomentum,isCloseToStart=_useBarAndLineChartsW.isCloseToStart,isCloseToEnd=_useBarAndLineChartsW.isCloseToEnd,canMomentum=_useBarAndLineChartsW.canMomentum,yAxisAtTop=_useBarAndLineChartsW.yAxisAtTop,yAxisThickness=_useBarAndLineChartsW.yAxisThickness,yAxisSide=_useBarAndLineChartsW.yAxisSide,showVerticalLines=_useBarAndLineChartsW.showVerticalLines,verticalLinesProps=_useBarAndLineChartsW.verticalLinesProps,lineInBarChartProps=_useBarAndLineChartsW.lineInBarChartProps,lineInBarChartProps2=_useBarAndLineChartsW.lineInBarChartProps2;(0,_react.useEffect)(function(){if(pointerConfig&&getPointerProps){getPointerProps({pointerIndex:pointerIndex,pointerX:pointerX,pointerY:pointerY});}},[pointerIndex,pointerX,pointerY]);var styles=_reactNative.StyleSheet.create({container:{width:'100%',height:containerHeightIncludingBelowXAxis+labelsExtraHeight+xAxisLabelsVerticalShift+(trimYAxisAtTop?0:yAxisExtraHeight)+50-overflowTop,marginTop:trimYAxisAtTop?containerHeight/20:0,marginBottom:(xAxisLabelsHeight!=null?xAxisLabelsHeight:xAxisTextNumberOfLines*18)-55}});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.container,horizontal&&{width:actualContainerWidth,transform:transformForHorizontal}],children:[hideAxesAndRules!==true?(0,_renderHorizSections.renderHorizSections)(Object.assign({},horizSectionProps,{onlyReferenceLines:false,renderReferenceLines:!referenceLinesOverChartContent})):null,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setCanMomentum(true);},nestedScrollEnabled:nestedScrollEnabled,onMomentumScrollEnd:function onMomentumScrollEnd(_ref){var nativeEvent=_ref.nativeEvent;if(_onMomentumScrollEnd){_onMomentumScrollEnd();}if(isCloseToEnd(nativeEvent)&&canMomentum){onEndReached?onEndReached():null;setCanMomentum(false);}if(isCloseToStart(nativeEvent)&&canMomentum){onStartReached?onStartReached():null;setCanMomentum(false);}},scrollEventThrottle:props.scrollEventThrottle?props.scrollEventThrottle:16,horizontal:true,ref:scrollRef,style:[{marginLeft:horizontal&&!yAxisAtTop?-yAxisThickness-(props.width?20:0)-((_ref2=(_data$barWidth=(_data=data[data.length-1])==null?void 0:_data.barWidth)!=null?_data$barWidth:barWidth)!=null?_ref2:0)/2:yAxisSide===_giftedChartsCore.yAxisSides.RIGHT?0:yAxisLabelWidth+yAxisThickness,position:'absolute',bottom:chartType===_giftedChartsCore.chartTypes.LINE_BI_COLOR?0:xAxisThickness},!!props.width&&{width:props.width+extraWidthDueToDataPoint},horizontal&&{width:((_props$width=props.width)!=null?_props$width:totalWidth)+(props.width?endSpacing:-20)}],contentContainerStyle:[{height:containerHeightIncludingBelowXAxis+yAxisExtraHeight+labelsExtraHeight+(50+xAxisLabelsVerticalShift),width:Math.max((_props$width2=props.width)!=null?_props$width2:0,totalWidth-spacing+endSpacing)+extraWidthDueToDataPoint,paddingLeft:initialSpacing,paddingBottom:noOfSectionsBelowXAxis*stepHeight+labelsExtraHeight,alignItems:'flex-end'},!props.width&&{width:totalWidth}],scrollEnabled:!disableScroll,showsHorizontalScrollIndicator:showScrollIndicator,indicatorStyle:indicatorColor,onContentSizeChange:function onContentSizeChange(){if(scrollRef.current&&scrollToEnd){scrollRef.current.scrollToEnd({animated:scrollAnimation});}else if(scrollRef.current&&scrollToIndex){scrollRef.current.scrollTo({x:initialSpacing+((barWidth!=null?barWidth:0)+spacing)*scrollToIndex-spacing});}}},remainingScrollViewProps,{children:(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[showVerticalLines?(0,_jsxRuntime.jsx)(_renderVerticalLines.default,Object.assign({},verticalLinesProps)):null,showLine?(0,_jsxRuntime.jsx)(_renderLineInBarChart.default,Object.assign({},lineInBarChartProps)):null,showLine&&points2!=null&&points2.length?(0,_jsxRuntime.jsx)(_renderLineInBarChart.default,Object.assign({},lineInBarChartProps2)):null,chartType===_giftedChartsCore.chartTypes.LINE&&data.map(function(item,index){return showXAxisIndices||item.showXAxisIndex?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',height:xAxisIndicesHeight,width:xAxisIndicesWidth,backgroundColor:xAxisIndicesColor,bottom:60-xAxisIndicesHeight/2,left:index*spacing+(initialSpacing-xAxisIndicesWidth/2)-3}},index+''+item.value):null;}),renderChartContent()]})})),referenceLinesOverChartContent?(0,_renderHorizSections.renderHorizSections)(Object.assign({},horizSectionProps,{onlyReferenceLines:true})):null]});};var _default=exports.default=BarAndLineChartsWrapper;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, I18nManager } from 'react-native';
+import { renderHorizSections } from './renderHorizSections';
+import RenderLineInBarChart from './renderLineInBarChart';
+import RenderVerticalLines from './renderVerticalLines';
+import { chartTypes, yAxisSides, useBarAndLineChartsWrapper, } from 'gifted-charts-core';
+var BarAndLineChartsWrapper = function (props) {
+    var _a, _b, _c, _d, _e;
+    var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, showLine = props.showLine, points2 = props.points2, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, onMomentumScrollEnd = props.onMomentumScrollEnd, nestedScrollEnabled = props.nestedScrollEnabled, _f = props.extraWidthDueToDataPoint, extraWidthDueToDataPoint = _f === void 0 ? 0 : _f;
+    var _g = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: I18nManager.isRTL })), containerHeightIncludingBelowXAxis = _g.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, trimYAxisAtTop = _g.trimYAxisAtTop, yAxisExtraHeight = _g.yAxisExtraHeight, overflowTop = _g.overflowTop, xAxisLabelsHeight = _g.xAxisLabelsHeight, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, actualContainerWidth = _g.actualContainerWidth, transformForHorizontal = _g.transformForHorizontal, horizSectionProps = _g.horizSectionProps, referenceLinesOverChartContent = _g.referenceLinesOverChartContent, setCanMomentum = _g.setCanMomentum, isCloseToStart = _g.isCloseToStart, isCloseToEnd = _g.isCloseToEnd, canMomentum = _g.canMomentum, yAxisAtTop = _g.yAxisAtTop, yAxisThickness = _g.yAxisThickness, yAxisSide = _g.yAxisSide, showVerticalLines = _g.showVerticalLines, verticalLinesProps = _g.verticalLinesProps, lineInBarChartProps = _g.lineInBarChartProps, lineInBarChartProps2 = _g.lineInBarChartProps2;
+    useEffect(function () {
+        if (pointerConfig && getPointerProps) {
+            getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
+        }
+    }, [pointerIndex, pointerX, pointerY]);
+    /*******************************************************************************************************************************************/
+    /*******************************************************************************************************************************************/
+    var styles = StyleSheet.create({
+        container: {
+            width: '100%',
+            height: containerHeightIncludingBelowXAxis +
+                labelsExtraHeight +
+                xAxisLabelsVerticalShift +
+                (trimYAxisAtTop ? 0 : yAxisExtraHeight) +
+                50 -
+                overflowTop,
+            marginTop: trimYAxisAtTop ? containerHeight / 20 : 0,
+            marginBottom: (xAxisLabelsHeight !== null && xAxisLabelsHeight !== void 0 ? xAxisLabelsHeight : xAxisTextNumberOfLines * 18) - 55, //This is to not let the Things that should be rendered below the chart overlap with it
+        },
+    });
+    return (_jsxs(View, { style: [
+            styles.container,
+            horizontal && {
+                width: actualContainerWidth,
+                transform: transformForHorizontal,
+            },
+        ], children: [hideAxesAndRules !== true
+                ? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: false, renderReferenceLines: !referenceLinesOverChartContent }))
+                : null, _jsx(ScrollView, __assign({ onScrollBeginDrag: function () {
+                    setCanMomentum(true);
+                }, nestedScrollEnabled: nestedScrollEnabled, onMomentumScrollEnd: function (_a) {
+                    var nativeEvent = _a.nativeEvent;
+                    if (onMomentumScrollEnd) {
+                        onMomentumScrollEnd();
+                    }
+                    if (isCloseToEnd(nativeEvent) && canMomentum) {
+                        onEndReached ? onEndReached() : null;
+                        setCanMomentum(false);
+                    }
+                    if (isCloseToStart(nativeEvent) && canMomentum) {
+                        onStartReached ? onStartReached() : null;
+                        setCanMomentum(false);
+                    }
+                }, scrollEventThrottle: props.scrollEventThrottle ? props.scrollEventThrottle : 16, horizontal: true, ref: scrollRef, style: [
+                    {
+                        marginLeft: horizontal && !yAxisAtTop
+                            ? -yAxisThickness -
+                                (props.width ? 20 : 0) -
+                                ((_c = (_b = (_a = data[data.length - 1]) === null || _a === void 0 ? void 0 : _a.barWidth) !== null && _b !== void 0 ? _b : barWidth) !== null && _c !== void 0 ? _c : 0) / 2
+                            : yAxisSide === yAxisSides.RIGHT
+                                ? 0
+                                : yAxisLabelWidth + yAxisThickness,
+                        position: 'absolute',
+                        bottom: chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness,
+                    },
+                    !!props.width && { width: props.width + extraWidthDueToDataPoint },
+                    horizontal && {
+                        width: ((_d = props.width) !== null && _d !== void 0 ? _d : totalWidth) + (props.width ? endSpacing : -20),
+                    },
+                ], contentContainerStyle: [
+                    {
+                        height: containerHeightIncludingBelowXAxis +
+                            yAxisExtraHeight +
+                            labelsExtraHeight +
+                            (50 + xAxisLabelsVerticalShift),
+                        width: Math.max((_e = props.width) !== null && _e !== void 0 ? _e : 0, totalWidth - spacing + endSpacing) +
+                            extraWidthDueToDataPoint,
+                        paddingLeft: initialSpacing,
+                        paddingBottom: noOfSectionsBelowXAxis * stepHeight + labelsExtraHeight,
+                        alignItems: 'flex-end',
+                    },
+                    !props.width && { width: totalWidth },
+                ], scrollEnabled: !disableScroll, showsHorizontalScrollIndicator: showScrollIndicator, indicatorStyle: indicatorColor, onContentSizeChange: function () {
+                    if (scrollRef.current && scrollToEnd) {
+                        scrollRef.current.scrollToEnd({ animated: scrollAnimation });
+                    }
+                    else if (scrollRef.current && scrollToIndex) {
+                        scrollRef.current.scrollTo({
+                            x: initialSpacing +
+                                ((barWidth !== null && barWidth !== void 0 ? barWidth : 0) + spacing) * scrollToIndex -
+                                spacing,
+                        });
+                    }
+                } }, remainingScrollViewProps, { children: _jsxs(Fragment, { children: [showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps))) : null, 
+                        // Only For Bar Charts-
+                        showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null, 
+                        // Only For Bar Charts-
+                        showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null, 
+                        // Only For Line Charts-
+                        chartType === chartTypes.LINE &&
+                            data.map(function (item, index) {
+                                return showXAxisIndices || item.showXAxisIndex ? (_jsx(View, { style: {
+                                        position: 'absolute',
+                                        height: xAxisIndicesHeight,
+                                        width: xAxisIndicesWidth,
+                                        backgroundColor: xAxisIndicesColor,
+                                        bottom: 60 - xAxisIndicesHeight / 2,
+                                        left: index * spacing +
+                                            (initialSpacing - xAxisIndicesWidth / 2) -
+                                            3,
+                                    } }, index + '' + item.value)) : null;
+                            }), renderChartContent()] }) })), referenceLinesOverChartContent
+                ? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: true }))
+                : null] }));
+};
+export default BarAndLineChartsWrapper;

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

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