react-native-gifted-charts 1.4.21 → 1.4.22

package/dist/LineChart/LineChartBicolor.js

@@ -1 +1,294 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LineChartBicolor=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styles=require("./styles");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _BarAndLineChartsWrapper=_interopRequireDefault(require("../Components/BarAndLineChartsWrapper"));var _giftedChartsCore=require("gifted-charts-core");var _utils=require("../utils");var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/LineChart/LineChartBicolor.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 LineChartBicolor=exports.LineChartBicolor=function LineChartBicolor(props){var _props$parentWidth;var scrollRef=(0,_react.useRef)();var widthValue=(0,_react.useMemo)(function(){return new _reactNative.Animated.Value(0);},[]);var opacValue=(0,_react.useMemo)(function(){return new _reactNative.Animated.Value(0);},[]);var _useLineChartBiColor=(0,_giftedChartsCore.useLineChartBiColor)(Object.assign({},props,{parentWidth:(_props$parentWidth=props.parentWidth)!=null?_props$parentWidth:_utils.screenWidth})),pointsArray=_useLineChartBiColor.pointsArray,fillPointsArray=_useLineChartBiColor.fillPointsArray,selectedIndex=_useLineChartBiColor.selectedIndex,setSelectedIndex=_useLineChartBiColor.setSelectedIndex,containerHeight=_useLineChartBiColor.containerHeight,data=_useLineChartBiColor.data,labelsExtraHeight=_useLineChartBiColor.labelsExtraHeight,animationDuration=_useLineChartBiColor.animationDuration,startIndex1=_useLineChartBiColor.startIndex1,endIndex1=_useLineChartBiColor.endIndex1,initialSpacing=_useLineChartBiColor.initialSpacing,thickness=_useLineChartBiColor.thickness,spacing=_useLineChartBiColor.spacing,xAxisThickness=_useLineChartBiColor.xAxisThickness,dataPointsHeight1=_useLineChartBiColor.dataPointsHeight1,dataPointsWidth1=_useLineChartBiColor.dataPointsWidth1,dataPointsRadius1=_useLineChartBiColor.dataPointsRadius1,dataPointsColor1=_useLineChartBiColor.dataPointsColor1,dataPointsShape1=_useLineChartBiColor.dataPointsShape1,areaChart=_useLineChartBiColor.areaChart,textFontSize1=_useLineChartBiColor.textFontSize1,textColor1=_useLineChartBiColor.textColor1,totalWidth=_useLineChartBiColor.totalWidth,maxValue=_useLineChartBiColor.maxValue,extendedContainerHeight=_useLineChartBiColor.extendedContainerHeight,getX=_useLineChartBiColor.getX,getY=_useLineChartBiColor.getY,stepHeight=_useLineChartBiColor.stepHeight,noOfSectionsBelowXAxis=_useLineChartBiColor.noOfSectionsBelowXAxis,thickness1=_useLineChartBiColor.thickness1,zIndex=_useLineChartBiColor.zIndex,strokeDashArray1=_useLineChartBiColor.strokeDashArray1,rotateLabel=_useLineChartBiColor.rotateLabel,isAnimated=_useLineChartBiColor.isAnimated,hideDataPoints1=_useLineChartBiColor.hideDataPoints1,color=_useLineChartBiColor.color,colorNegative=_useLineChartBiColor.colorNegative,startFillColor=_useLineChartBiColor.startFillColor,endFillColor=_useLineChartBiColor.endFillColor,startOpacity=_useLineChartBiColor.startOpacity,endOpacity=_useLineChartBiColor.endOpacity,startFillColorNegative=_useLineChartBiColor.startFillColorNegative,endFillColorNegative=_useLineChartBiColor.endFillColorNegative,startOpacityNegative=_useLineChartBiColor.startOpacityNegative,endOpacityNegative=_useLineChartBiColor.endOpacityNegative,gradientDirection=_useLineChartBiColor.gradientDirection,xAxisTextNumberOfLines=_useLineChartBiColor.xAxisTextNumberOfLines,focusEnabled=_useLineChartBiColor.focusEnabled,showDataPointOnFocus=_useLineChartBiColor.showDataPointOnFocus,showStripOnFocus=_useLineChartBiColor.showStripOnFocus,showTextOnFocus=_useLineChartBiColor.showTextOnFocus,stripHeight=_useLineChartBiColor.stripHeight,stripWidth=_useLineChartBiColor.stripWidth,stripColor=_useLineChartBiColor.stripColor,stripOpacity=_useLineChartBiColor.stripOpacity,unFocusOnPressOut=_useLineChartBiColor.unFocusOnPressOut,delayBeforeUnFocus=_useLineChartBiColor.delayBeforeUnFocus,barAndLineChartsWrapperProps=_useLineChartBiColor.barAndLineChartsWrapperProps;var labelsAppear=(0,_react.useCallback)(function(){opacValue.setValue(0);_reactNative.Animated.timing(opacValue,{toValue:1,duration:500,easing:_reactNative.Easing.ease,useNativeDriver:false}).start();},[opacValue]);var appearingOpacity=opacValue.interpolate({inputRange:[0,1],outputRange:[0,1]});var decreaseWidth=(0,_react.useCallback)(function(){widthValue.setValue(0);_reactNative.Animated.timing(widthValue,{toValue:1,duration:animationDuration,easing:_reactNative.Easing.linear,useNativeDriver:false}).start();},[animationDuration,widthValue]);(0,_react.useEffect)(function(){decreaseWidth();labelsAppear();},[animationDuration,decreaseWidth,labelsAppear]);var renderLabel=function renderLabel(index,label,labelTextStyle,labelComponent){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{position:'absolute',bottom:30,zIndex:10,width:spacing+labelsExtraHeight,left:index===0&&initialSpacing<10?getX(index)-spacing/2+8:getX(index)-spacing/2,justifyContent:'center'},rotateLabel&&{transform:[{rotate:'60deg'}]}],children:labelComponent?labelComponent():(0,_jsxRuntime.jsx)(_reactNative.Text,{style:labelTextStyle||{textAlign:'center'},numberOfLines:xAxisTextNumberOfLines,children:label||''})});};var renderAnimatedLabel=function renderAnimatedLabel(index,label,labelTextStyle,labelComponent){return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[{height:rotateLabel?40:20,position:'absolute',bottom:rotateLabel?10:30,zIndex:10,width:spacing,left:index===0&&initialSpacing<10?getX(index)-spacing/2+8:getX(index)-spacing/2,opacity:appearingOpacity},rotateLabel&&{transform:[{rotate:'60deg'}]}],children:labelComponent?labelComponent():(0,_jsxRuntime.jsx)(_reactNative.Text,{style:labelTextStyle||{textAlign:'center'},numberOfLines:xAxisTextNumberOfLines,children:label||''})});};var animatedWidth=widthValue.interpolate({inputRange:[0,1],outputRange:[0,totalWidth]});var onStripPress=function onStripPress(item,index){setSelectedIndex(index);if(props.onFocus){props.onFocus(item,index);}};var renderDataPoints=function renderDataPoints(dataForRender,dataPtsShape,dataPtsWidth,dataPtsHeight,dataPtsColor,dataPtsRadius,textColor,textFontSize,startIndex,endIndex){return dataForRender.map(function(item,index){var _item$stripHeight,_item$stripWidth,_item$stripOpacity;if(index<startIndex||index>endIndex)return null;if(item.hideDataPoint){return null;}var dataPointsShape,dataPointsWidth,dataPointsHeight,dataPointsColor,dataPointsRadius,text,customDataPoint,dataPointLabelComponent;if(index===selectedIndex){dataPointsShape=item.focusedDataPointShape||props.focusedDataPointShape||item.dataPointShape||dataPtsShape;dataPointsWidth=item.focusedDataPointWidth||props.focusedDataPointWidth||item.dataPointWidth||dataPtsWidth;dataPointsHeight=item.focusedDataPointHeight||props.focusedDataPointHeight||item.dataPointHeight||dataPtsHeight;dataPointsColor=item.focusedDataPointColor||props.focusedDataPointColor||'orange';dataPointsRadius=item.focusedDataPointRadius||props.focusedDataPointRadius||item.dataPointRadius||dataPtsRadius;if(showTextOnFocus){text=item.dataPointText;}customDataPoint=item.focusedCustomDataPoint||props.focusedCustomDataPoint||item.customDataPoint||props.customDataPoint;dataPointLabelComponent=item.focusedDataPointLabelComponent||item.dataPointLabelComponent;}else{dataPointsShape=item.dataPointShape||dataPtsShape;dataPointsWidth=item.dataPointWidth||dataPtsWidth;dataPointsHeight=item.dataPointHeight||dataPtsHeight;dataPointsColor=item.dataPointColor||dataPtsColor;dataPointsRadius=item.dataPointRadius||dataPtsRadius;if(showTextOnFocus){text='';}customDataPoint=item.customDataPoint||props.customDataPoint;dataPointLabelComponent=item.dataPointLabelComponent;}var currentStripHeight=(_item$stripHeight=item.stripHeight)!=null?_item$stripHeight:stripHeight;var currentStripWidth=(_item$stripWidth=item.stripWidth)!=null?_item$stripWidth:stripWidth;var currentStripOpacity=(_item$stripOpacity=item.stripOpacity)!=null?_item$stripOpacity:stripOpacity;var currentStripColor=item.stripColor||stripColor;return(0,_jsxRuntime.jsxs)(_react.Fragment,{children:[focusEnabled?(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:unFocusOnPressOut?(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{onPressIn:function onPressIn(){return onStripPress(item,index);},onPressOut:function onPressOut(){return setTimeout(function(){return setSelectedIndex(-1);},delayBeforeUnFocus);},x:initialSpacing+(spacing*index-spacing/2),y:8,width:spacing,height:containerHeight,fill:'none'}):(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{onPress:function onPress(){return onStripPress(item,index);},x:initialSpacing+(spacing*index-spacing/2),y:8,width:spacing,height:containerHeight,fill:'none'})}):null,item.showStrip||focusEnabled&&index===selectedIndex&&showStripOnFocus?(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{x:initialSpacing+(spacing*index-dataPointsWidth/2),y:currentStripHeight?containerHeight-currentStripHeight+8:containerHeight-dataPointsHeight/2+20-item.value*containerHeight/maxValue,width:currentStripWidth,height:currentStripHeight||containerHeight-dataPointsHeight/2+20,opacity:currentStripOpacity,fill:currentStripColor}):null,customDataPoint?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.customDataPointContainer,{height:dataPointsHeight,width:dataPointsWidth,top:containerHeight-item.value*containerHeight/maxValue,left:getX(index)-dataPointsWidth}],children:customDataPoint()}):null,dataPointsShape==='rectangular'?(0,_jsxRuntime.jsx)(_react.Fragment,{children:customDataPoint?null:(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{x:getX(index)-dataPointsWidth,y:extendedContainerHeight+dataPointsHeight/2-item.value*containerHeight/maxValue,width:dataPointsWidth,height:dataPointsHeight,fill:showDataPointOnFocus?index===selectedIndex?dataPointsColor:'none':dataPointsColor,onPress:function onPress(){item.onPress?item.onPress(item,index):props.onPress?props.onPress(item,index):null;}})},index):(0,_jsxRuntime.jsx)(_react.Fragment,{children:customDataPoint?null:(0,_jsxRuntime.jsx)(_reactNativeSvg.Circle,{cx:getX(index),cy:getY(index),r:dataPointsRadius,fill:showDataPointOnFocus?index===selectedIndex?dataPointsColor:'none':dataPointsColor,onPress:function onPress(){item.onPress?item.onPress(item,index):props.onPress?props.onPress(item,index):null;}})},index),dataPointLabelComponent?!showTextOnFocus||index===selectedIndex?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[_styles.styles.customDataPointContainer,{top:containerHeight+(item.dataPointLabelShiftY||props.dataPointLabelShiftY||0)-item.value*containerHeight/maxValue,left:initialSpacing+(item.dataPointLabelShiftX||props.dataPointLabelShiftX||0)-(item.dataPointLabelWidth?item.dataPointLabelWidth+20:props.dataPointLabelWidth?props.dataPointLabelWidth+20:50)/2+spacing*index}],children:dataPointLabelComponent()}):null:text||item.dataPointText?!showTextOnFocus||index===selectedIndex?(0,_jsxRuntime.jsx)(_reactNativeSvg.Text,{fill:item.textColor||textColor,fontSize:item.textFontSize||textFontSize,x:initialSpacing-dataPointsWidth+spacing*index+(item.textShiftX||props.textShiftX||0),y:extendedContainerHeight-dataPointsHeight/2-item.value*containerHeight/maxValue+(item.textShiftY||props.textShiftY||0),children:!showTextOnFocus?item.dataPointText:text}):null:null]},index);});};var renderSpecificVerticalLines=function renderSpecificVerticalLines(dataForRender){return dataForRender.map(function(item,index){if(item.showVerticalLine){return(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{x:initialSpacing-(item.verticalLineThickness||1)/2-1+spacing*index,y:item.verticalLineUptoDataPoint?containerHeight-item.value*containerHeight/maxValue+10:-xAxisThickness,width:item.verticalLineThickness||1,height:item.verticalLineUptoDataPoint?item.value*containerHeight/maxValue-xAxisThickness:containerHeight+10-xAxisThickness,fill:item.verticalLineColor||'lightgray'},index);}return null;});};var lineSvgComponent=function lineSvgComponent(pointsArray,currentLineThickness,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray){return(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{children:[strokeDashArray&&strokeDashArray.length===2&&typeof strokeDashArray[0]==='number'&&typeof strokeDashArray[1]==='number'?pointsArray.map(function(points,index){return(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:points.points,fill:"none",stroke:points.color==='green'?color:colorNegative,strokeWidth:currentLineThickness||thickness,strokeDasharray:strokeDashArray},index);}):pointsArray.map(function(points,index){return(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:points.points,fill:"none",stroke:points.color==='green'?color:colorNegative,strokeWidth:currentLineThickness||thickness},index);}),areaChart&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient,{id:"Gradient",x1:"0",y1:"0",x2:gradientDirection==='horizontal'?'1':'0',y2:gradientDirection==='vertical'?'1':'0',children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"0",stopColor:startFillColor,stopOpacity:startOpacity.toString()}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"1",stopColor:endFillColor,stopOpacity:endOpacity.toString()})]}),(0,_jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient,{id:"GradientNegative",x1:"0",y1:"0",x2:gradientDirection==='horizontal'?'1':'0',y2:gradientDirection==='vertical'?'1':'0',children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"1",stopColor:startFillColorNegative,stopOpacity:startOpacityNegative.toString()}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Stop,{offset:"0",stopColor:endFillColorNegative,stopOpacity:endOpacityNegative.toString()})]})]}),areaChart?fillPointsArray.map(function(item,index){return(0,_jsxRuntime.jsx)(_reactNativeSvg.Path,{d:item.points,fill:item.color==='green'?'url(#Gradient)':'url(#GradientNegative)',stroke:'transparent',strokeWidth:currentLineThickness||thickness},index);}):null,renderSpecificVerticalLines(data),!hideDataPoints1?renderDataPoints(data,dataPointsShape1,dataPointsWidth1,dataPointsHeight1,dataPointsColor1,dataPointsRadius1,textColor1,textFontSize1,startIndex1,endIndex1):null]});};var renderLine=function renderLine(zIndex,pointsArray,currentLineThickness,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',height:extendedContainerHeight+noOfSectionsBelowXAxis*stepHeight,bottom:60+labelsExtraHeight,width:totalWidth,zIndex:zIndex},children:pointsArray.length?lineSvgComponent(pointsArray,currentLineThickness,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray):null});};var renderAnimatedLine=function renderAnimatedLine(zIndex,points,animatedWidth,currentLineThickness,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray){return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{position:'absolute',height:extendedContainerHeight+noOfSectionsBelowXAxis*stepHeight,bottom:60,width:animatedWidth,zIndex:zIndex},children:lineSvgComponent(points,currentLineThickness,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray)});};var renderChartContent=function renderChartContent(){return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[isAnimated?renderAnimatedLine(zIndex,pointsArray,animatedWidth,thickness1,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray1):renderLine(zIndex,pointsArray,thickness1,color,startFillColor,endFillColor,startOpacity,endOpacity,strokeDashArray1),data.map(function(item,index){return(0,_jsxRuntime.jsx)(_reactNative.View,{children:isAnimated?renderAnimatedLabel(index,item.label||(props.xAxisLabelTexts&&props.xAxisLabelTexts[index]?props.xAxisLabelTexts[index]:''),item.labelTextStyle||props.xAxisLabelTextStyle,item.labelComponent):renderLabel(index,item.label||(props.xAxisLabelTexts&&props.xAxisLabelTexts[index]?props.xAxisLabelTexts[index]:''),item.labelTextStyle||props.xAxisLabelTextStyle,item.labelComponent)},index);})]});};return(0,_jsxRuntime.jsx)(_BarAndLineChartsWrapper.default,Object.assign({},barAndLineChartsWrapperProps,{scrollRef:scrollRef,animatedWidth:animatedWidth,renderChartContent:renderChartContent,remainingScrollViewProps:{onScroll:function onScroll(ev){return props.onScroll==null?void 0:props.onScroll(ev);}}}));};
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { View, Animated, Easing, Text } from 'react-native';
+import { styles } from './styles';
+import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, } from 'react-native-svg';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { useLineChartBiColor, } from 'gifted-charts-core';
+import { screenWidth } from '../utils';
+export var LineChartBicolor = function (props) {
+    var _a;
+    var scrollRef = useRef();
+    // const heightValue = useMemo(() => new Animated.Value(0), []);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var opacValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var _b = useLineChartBiColor(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), pointsArray = _b.pointsArray, fillPointsArray = _b.fillPointsArray, selectedIndex = _b.selectedIndex, setSelectedIndex = _b.setSelectedIndex, containerHeight = _b.containerHeight, data = _b.data, labelsExtraHeight = _b.labelsExtraHeight, animationDuration = _b.animationDuration, startIndex1 = _b.startIndex1, endIndex1 = _b.endIndex1, initialSpacing = _b.initialSpacing, thickness = _b.thickness, spacing = _b.spacing, xAxisThickness = _b.xAxisThickness, dataPointsHeight1 = _b.dataPointsHeight1, dataPointsWidth1 = _b.dataPointsWidth1, dataPointsRadius1 = _b.dataPointsRadius1, dataPointsColor1 = _b.dataPointsColor1, dataPointsShape1 = _b.dataPointsShape1, areaChart = _b.areaChart, textFontSize1 = _b.textFontSize1, textColor1 = _b.textColor1, totalWidth = _b.totalWidth, maxValue = _b.maxValue, extendedContainerHeight = _b.extendedContainerHeight, getX = _b.getX, getY = _b.getY, stepHeight = _b.stepHeight, noOfSectionsBelowXAxis = _b.noOfSectionsBelowXAxis, thickness1 = _b.thickness1, zIndex = _b.zIndex, strokeDashArray1 = _b.strokeDashArray1, rotateLabel = _b.rotateLabel, isAnimated = _b.isAnimated, hideDataPoints1 = _b.hideDataPoints1, color = _b.color, colorNegative = _b.colorNegative, startFillColor = _b.startFillColor, endFillColor = _b.endFillColor, startOpacity = _b.startOpacity, endOpacity = _b.endOpacity, startFillColorNegative = _b.startFillColorNegative, endFillColorNegative = _b.endFillColorNegative, startOpacityNegative = _b.startOpacityNegative, endOpacityNegative = _b.endOpacityNegative, gradientDirection = _b.gradientDirection, xAxisTextNumberOfLines = _b.xAxisTextNumberOfLines, focusEnabled = _b.focusEnabled, showDataPointOnFocus = _b.showDataPointOnFocus, showStripOnFocus = _b.showStripOnFocus, showTextOnFocus = _b.showTextOnFocus, stripHeight = _b.stripHeight, stripWidth = _b.stripWidth, stripColor = _b.stripColor, stripOpacity = _b.stripOpacity, unFocusOnPressOut = _b.unFocusOnPressOut, delayBeforeUnFocus = _b.delayBeforeUnFocus, barAndLineChartsWrapperProps = _b.barAndLineChartsWrapperProps;
+    var labelsAppear = useCallback(function () {
+        opacValue.setValue(0);
+        Animated.timing(opacValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacValue]);
+    var appearingOpacity = opacValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue]);
+    useEffect(function () {
+        decreaseWidth();
+        labelsAppear();
+    }, [animationDuration, decreaseWidth, labelsAppear]);
+    var renderLabel = function (index, label, labelTextStyle, labelComponent) {
+        return (_jsx(View, { style: [
+                {
+                    position: 'absolute',
+                    bottom: 30,
+                    zIndex: 10,
+                    width: spacing + labelsExtraHeight,
+                    left: index === 0 && initialSpacing < 10
+                        ? getX(index) - spacing / 2 + 8
+                        : getX(index) - spacing / 2,
+                    justifyContent: 'center',
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: labelTextStyle || { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+    };
+    var renderAnimatedLabel = function (index, label, labelTextStyle, labelComponent) {
+        return (_jsx(Animated.View, { style: [
+                {
+                    height: rotateLabel ? 40 : 20,
+                    // backgroundColor: 'yellow',
+                    position: 'absolute',
+                    bottom: rotateLabel ? 10 : 30,
+                    zIndex: 10,
+                    width: spacing,
+                    left: index === 0 && initialSpacing < 10
+                        ? getX(index) - spacing / 2 + 8
+                        : getX(index) - spacing / 2,
+                    opacity: appearingOpacity,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: labelTextStyle || { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+    };
+    var animatedWidth = widthValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, totalWidth],
+    });
+    var onStripPress = function (item, index) {
+        setSelectedIndex(index);
+        if (props.onFocus) {
+            props.onFocus(item, index);
+        }
+    };
+    var renderDataPoints = function (dataForRender, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex) {
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideDataPoint) {
+                return null;
+            }
+            var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
+            if (index === selectedIndex) {
+                dataPointsShape =
+                    item.focusedDataPointShape ||
+                        props.focusedDataPointShape ||
+                        item.dataPointShape ||
+                        dataPtsShape;
+                dataPointsWidth =
+                    item.focusedDataPointWidth ||
+                        props.focusedDataPointWidth ||
+                        item.dataPointWidth ||
+                        dataPtsWidth;
+                dataPointsHeight =
+                    item.focusedDataPointHeight ||
+                        props.focusedDataPointHeight ||
+                        item.dataPointHeight ||
+                        dataPtsHeight;
+                dataPointsColor =
+                    item.focusedDataPointColor || props.focusedDataPointColor || 'orange';
+                dataPointsRadius =
+                    item.focusedDataPointRadius ||
+                        props.focusedDataPointRadius ||
+                        item.dataPointRadius ||
+                        dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = item.dataPointText;
+                }
+                customDataPoint =
+                    item.focusedCustomDataPoint ||
+                        props.focusedCustomDataPoint ||
+                        item.customDataPoint ||
+                        props.customDataPoint;
+                dataPointLabelComponent =
+                    item.focusedDataPointLabelComponent || item.dataPointLabelComponent;
+            }
+            else {
+                dataPointsShape = item.dataPointShape || dataPtsShape;
+                dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+                dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+                dataPointsColor = item.dataPointColor || dataPtsColor;
+                dataPointsRadius = item.dataPointRadius || dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customDataPoint = item.customDataPoint || props.customDataPoint;
+                dataPointLabelComponent = item.dataPointLabelComponent;
+            }
+            var currentStripHeight = (_a = item.stripHeight) !== null && _a !== void 0 ? _a : stripHeight;
+            var currentStripWidth = (_b = item.stripWidth) !== null && _b !== void 0 ? _b : stripWidth;
+            var currentStripOpacity = (_c = item.stripOpacity) !== null && _c !== void 0 ? _c : stripOpacity;
+            var currentStripColor = item.stripColor || stripColor;
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: unFocusOnPressOut ? (_jsx(Rect, { onPressIn: function () { return onStripPress(item, index); }, onPressOut: function () {
+                                return setTimeout(function () { return setSelectedIndex(-1); }, delayBeforeUnFocus);
+                            }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'none' })) : (_jsx(Rect, { onPress: function () { return onStripPress(item, index); }, x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight, fill: 'none' })) })) : null, item.showStrip ||
+                        (focusEnabled && index === selectedIndex && showStripOnFocus) ? (_jsx(Rect, { x: initialSpacing + (spacing * index - dataPointsWidth / 2), y: currentStripHeight
+                            ? containerHeight - currentStripHeight + 8
+                            : containerHeight -
+                                dataPointsHeight / 2 +
+                                20 -
+                                (item.value * containerHeight) / maxValue, width: currentStripWidth, height: currentStripHeight ||
+                            containerHeight - dataPointsHeight / 2 + 20, opacity: currentStripOpacity, fill: currentStripColor })) : null, customDataPoint ? (_jsx(View, { style: [
+                            styles.customDataPointContainer,
+                            {
+                                height: dataPointsHeight,
+                                width: dataPointsWidth,
+                                top: containerHeight - (item.value * containerHeight) / maxValue,
+                                left: getX(index) - dataPointsWidth,
+                            },
+                        ], children: customDataPoint() })) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Rect, { x: getX(index) - dataPointsWidth, y: extendedContainerHeight +
+                                dataPointsHeight / 2 -
+                                (item.value * containerHeight) / maxValue, width: dataPointsWidth, height: dataPointsHeight, fill: showDataPointOnFocus
+                                ? index === selectedIndex
+                                    ? dataPointsColor
+                                    : 'none'
+                                : dataPointsColor, onPress: function () {
+                                item.onPress
+                                    ? item.onPress(item, index)
+                                    : props.onPress
+                                        ? props.onPress(item, index)
+                                        : null;
+                            } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(Circle, { cx: getX(index), cy: getY(index), r: dataPointsRadius, fill: showDataPointOnFocus
+                                ? index === selectedIndex
+                                    ? dataPointsColor
+                                    : 'none'
+                                : dataPointsColor, onPress: function () {
+                                item.onPress
+                                    ? item.onPress(item, index)
+                                    : props.onPress
+                                        ? props.onPress(item, index)
+                                        : null;
+                            } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (_jsx(View, { style: [
+                            styles.customDataPointContainer,
+                            {
+                                top: containerHeight +
+                                    (item.dataPointLabelShiftY ||
+                                        props.dataPointLabelShiftY ||
+                                        0) -
+                                    (item.value * containerHeight) / maxValue,
+                                left: initialSpacing +
+                                    (item.dataPointLabelShiftX ||
+                                        props.dataPointLabelShiftX ||
+                                        0) -
+                                    (item.dataPointLabelWidth
+                                        ? item.dataPointLabelWidth + 20
+                                        : props.dataPointLabelWidth
+                                            ? props.dataPointLabelWidth + 20
+                                            : 50) /
+                                        2 +
+                                    spacing * index,
+                            },
+                        ], children: dataPointLabelComponent() })) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: initialSpacing -
+                            dataPointsWidth +
+                            spacing * index +
+                            (item.textShiftX || props.textShiftX || 0), y: extendedContainerHeight -
+                            dataPointsHeight / 2 -
+                            (item.value * containerHeight) / maxValue +
+                            (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus ? item.dataPointText : text })) : null) : null] }, index));
+        });
+    };
+    var renderSpecificVerticalLines = function (dataForRender) {
+        return dataForRender.map(function (item, index) {
+            if (item.showVerticalLine) {
+                return (_jsx(Rect, { x: initialSpacing -
+                        (item.verticalLineThickness || 1) / 2 -
+                        1 +
+                        spacing * index, y: item.verticalLineUptoDataPoint
+                        ? containerHeight -
+                            (item.value * containerHeight) / maxValue +
+                            10
+                        : -xAxisThickness, width: item.verticalLineThickness || 1, height: item.verticalLineUptoDataPoint
+                        ? (item.value * containerHeight) / maxValue - xAxisThickness
+                        : containerHeight + 10 - xAxisThickness, fill: item.verticalLineColor || 'lightgray' }, index));
+            }
+            return null;
+        });
+    };
+    var lineSvgComponent = function (pointsArray, currentLineThickness, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray) {
+        return (_jsxs(Svg, { children: [strokeDashArray &&
+                    strokeDashArray.length === 2 &&
+                    typeof strokeDashArray[0] === 'number' &&
+                    typeof strokeDashArray[1] === 'number'
+                    ? pointsArray.map(function (points, index) { return (_jsx(Path, { d: points.points, fill: "none", stroke: points.color === 'green' ? color : colorNegative, strokeWidth: currentLineThickness || thickness, strokeDasharray: strokeDashArray }, index)); })
+                    : pointsArray.map(function (points, index) {
+                        return (_jsx(Path, { d: points.points, fill: "none", stroke: points.color === 'green' ? color : colorNegative, strokeWidth: currentLineThickness || thickness }, index));
+                    }), areaChart && (_jsxs(_Fragment, { children: [_jsxs(LinearGradient, { id: "Gradient", x1: "0", y1: "0", x2: gradientDirection === 'horizontal' ? '1' : '0', y2: gradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: startFillColor, stopOpacity: startOpacity.toString() }), _jsx(Stop, { offset: "1", stopColor: endFillColor, stopOpacity: endOpacity.toString() })] }), _jsxs(LinearGradient, { id: "GradientNegative", x1: "0", y1: "0", x2: gradientDirection === 'horizontal' ? '1' : '0', y2: gradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "1", stopColor: startFillColorNegative, stopOpacity: startOpacityNegative.toString() }), _jsx(Stop, { offset: "0", stopColor: endFillColorNegative, stopOpacity: endOpacityNegative.toString() })] })] })), areaChart
+                    ? fillPointsArray.map(function (item, index) {
+                        return (_jsx(Path, { d: item.points, fill: item.color === 'green'
+                                ? 'url(#Gradient)'
+                                : 'url(#GradientNegative)', stroke: 'transparent', strokeWidth: currentLineThickness || thickness }, index));
+                    })
+                    : null, renderSpecificVerticalLines(data), !hideDataPoints1
+                    ? renderDataPoints(data, dataPointsShape1, dataPointsWidth1, dataPointsHeight1, dataPointsColor1, dataPointsRadius1, textColor1, textFontSize1, startIndex1, endIndex1)
+                    : null] }));
+    };
+    var renderLine = function (zIndex, pointsArray, currentLineThickness, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray) {
+        return (_jsx(View, { style: {
+                position: 'absolute',
+                height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                bottom: 60 + labelsExtraHeight,
+                width: totalWidth,
+                zIndex: zIndex,
+            }, children: pointsArray.length
+                ? lineSvgComponent(pointsArray, currentLineThickness, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray)
+                : null }));
+    };
+    var renderAnimatedLine = function (zIndex, points, animatedWidth, currentLineThickness, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray) {
+        return (_jsx(Animated.View, { style: {
+                position: 'absolute',
+                height: extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
+                bottom: 60, //stepHeight * -0.5 + xAxisThickness,
+                width: animatedWidth,
+                zIndex: zIndex,
+                // backgroundColor: 'wheat',
+            }, children: lineSvgComponent(points, currentLineThickness, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray) }));
+    };
+    var renderChartContent = function () {
+        return (_jsxs(_Fragment, { children: [isAnimated
+                    ? renderAnimatedLine(zIndex, pointsArray, animatedWidth, thickness1, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray1)
+                    : renderLine(zIndex, pointsArray, thickness1, color, startFillColor, endFillColor, startOpacity, endOpacity, strokeDashArray1), data.map(function (item, index) {
+                    return (_jsx(View, { children: isAnimated
+                            ? renderAnimatedLabel(index, item.label ||
+                                (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                    ? props.xAxisLabelTexts[index]
+                                    : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
+                            : renderLabel(index, item.label ||
+                                (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                    ? props.xAxisLabelTexts[index]
+                                    : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent) }, index));
+                })] }));
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: animatedWidth, renderChartContent: renderChartContent, remainingScrollViewProps: { onScroll: function (ev) { var _a; return (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev); } } })));
+};

package/dist/LineChart/index.d.ts

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