react-native-gifted-charts 1.4.69 → 1.4.71

package/README.md

@@ -20,7 +20,7 @@
     <img src="/demos/redditLogo.png" height="auto" width="32" height="32" />
   </a>
 </p>
-The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
+The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
 
 ### Yet another chart library? Why?
 
@@ -94,7 +94,7 @@ Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-lin
 The simplest usage of various types of charts can be done as below-
 
 ```js
-import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart } from "react-native-gifted-charts";
+import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart, BubbleChart } from "react-native-gifted-charts";
 
 // ...
 const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
@@ -104,6 +104,10 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 <PieChart data = {data} />
 <PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />
 <RadarChart data = {[50, 80, 90, 70]} />
+<BubbleChart data = {
+  {x: 20, y: 4, r: 10},
+  {x: 40, y: 6, r: 20},
+} />
 
 // For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component
 
@@ -124,7 +128,8 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 **2. [LineChart and AreaChart props](docs/LineChart/LineChartProps.md)** \
 **3. [PieChart and DonutChart props](docs/PieChart/PieChartProps.md)** \
 **4. [Population Pyramid props](docs/PopulationPyramid/PopulationPyramid.md)** \
-**5. [RadarChart props](docs/RadarChart/RadarChartProps.md)**
+**5. [RadarChart props](docs/RadarChart/RadarChartProps.md)** \
+**6. [BubbleChart props](docs/BubbleChart/BubbleChartProps.md)**
 
 ## 🤝 Contributing
 

package/dist/BarChart/RenderStackBars.js

@@ -18,11 +18,11 @@ import { useRenderStackBars, BarDefaults, } from 'gifted-charts-core';
 import Tooltip from '../Components/BarSpecificComponents/tooltip';
 var RenderStackBars = function (props) {
     var _a;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, barMarginBottom = props.barMarginBottom, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, stackData = props.stackData, item = props.item, index = props.index, containerHeight = props.containerHeight, spacing = props.spacing, rotateLabel = props.rotateLabel, label = props.label, rtl = props.rtl, labelTextStyle = props.labelTextStyle, xAxisTextNumberOfLines = props.xAxisTextNumberOfLines, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, renderTooltip = props.renderTooltip, selectedIndex = props.selectedIndex, setSelectedIndex = props.setSelectedIndex, activeOpacity = props.activeOpacity, _b = props.animationDuration, animationDuration = _b === void 0 ? BarDefaults.animationDuration : _b, barBorderWidth = props.barBorderWidth, barBorderColor = props.barBorderColor, stackBorderRadius = props.stackBorderRadius, stackBorderTopLeftRadius = props.stackBorderTopLeftRadius, stackBorderTopRightRadius = props.stackBorderTopRightRadius, stackBorderBottomLeftRadius = props.stackBorderBottomLeftRadius, stackBorderBottomRightRadius = props.stackBorderBottomRightRadius, showValuesAsTopLabel = props.showValuesAsTopLabel, _c = props.autoShiftLabelsForNegativeStacks, autoShiftLabelsForNegativeStacks = _c === void 0 ? true : _c, _d = props.labelsDistanceFromXaxis, labelsDistanceFromXaxis = _d === void 0 ? 0 : _d, horizontal = props.horizontal, secondaryStepHeight = props.secondaryStepHeight, secondaryStepValue = props.secondaryStepValue, secondaryNegativeStepHeight = props.secondaryNegativeStepHeight, secondaryNegativeStepValue = props.secondaryNegativeStepValue, barMarginBottom = props.barMarginBottom, highlightEnabled = props.highlightEnabled, highlightedBarIndex = props.highlightedBarIndex, lowlightOpacity = props.lowlightOpacity, stackHighlightEnabled = props.stackHighlightEnabled, selectedStackIndex = props.selectedStackIndex, setSelectedStackIndex = props.setSelectedStackIndex;
     var _e = useRenderStackBars(__assign(__assign({}, props), { secondaryStepHeight: secondaryStepHeight, secondaryStepValue: secondaryStepValue, secondaryNegativeStepHeight: secondaryNegativeStepHeight, secondaryNegativeStepValue: secondaryNegativeStepValue })), containsNegativeValue = _e.containsNegativeValue, noAnimation = _e.noAnimation, localBarInnerComponent = _e.localBarInnerComponent, borderRadius = _e.borderRadius, borderTopLeftRadius = _e.borderTopLeftRadius, borderTopRightRadius = _e.borderTopRightRadius, borderBottomLeftRadius = _e.borderBottomLeftRadius, borderBottomRightRadius = _e.borderBottomRightRadius, disablePress = _e.disablePress, totalHeight = _e.totalHeight, height = _e.height, setHeight = _e.setHeight, getBarHeight = _e.getBarHeight, getPosition = _e.getPosition, lowestBarPosition = _e.lowestBarPosition, getStackBorderRadii = _e.getStackBorderRadii, tooltipProps = _e.tooltipProps;
     var renderLabel = function (label, labelTextStyle) {
         return (_jsx(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
-                setSelectedIndex(index);
+                setSelectedIndex([index]);
                 if (item.onPress) {
                     item.onPress();
                 }
@@ -49,8 +49,8 @@ var RenderStackBars = function (props) {
                         props.labelWidth ||
                         item.stacks[0].barWidth ||
                         props.barWidth ||
-                        30) +
-                        spacing / 2,
+                        30) + spacing,
+                    left: spacing / -2,
                     position: 'absolute',
                     bottom: !labelsDistanceFromXaxis && autoShiftLabelsForNegativeStacks
                         ? containsNegativeValue
@@ -65,7 +65,11 @@ var RenderStackBars = function (props) {
                     : horizontal
                         ? { transform: [{ rotate: '-90deg' }] }
                         : {},
-            ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
+            ], children: item.labelComponent ? (item.labelComponent()) : (_jsx(Text, { style: [
+                    { textAlign: 'center' },
+                    rtl && horizontal && { transform: [{ rotate: '180deg' }] },
+                    labelTextStyle,
+                ], numberOfLines: xAxisTextNumberOfLines, children: label || '' })) }));
     };
     var animatedHeight = useRef(new Animated.Value(0)).current;
     var elevate = function () {
@@ -84,7 +88,7 @@ var RenderStackBars = function (props) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var remainingBarMarginBottom = barMarginBottom;
         return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { disabled: disablePress || (stackHighlightEnabled && !highlightEnabled), activeOpacity: activeOpacity, onPress: function () {
-                        setSelectedIndex(index);
+                        setSelectedIndex([index]);
                         if (item.onPress) {
                             item.onPress();
                         }

package/dist/BarChart/index.js

@@ -47,7 +47,7 @@ export var BarChart = function (props) {
         bounces: props.bounces,
         overScrollMode: (_b = props.overScrollMode) !== null && _b !== void 0 ? _b : 'auto',
     };
-    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
+    var _d = useBarChart(__assign(__assign({}, props), { heightValue: heightValue, widthValue: widthValue, opacityValue: opacityValue, parentWidth: (_c = props.parentWidth) !== null && _c !== void 0 ? _c : screenWidth })), lineConfig = _d.lineConfig, lineConfig2 = _d.lineConfig2, hidePointer1 = _d.hidePointer1, pointerItem = _d.pointerItem, pointerY = _d.pointerY, pointerConfig = _d.pointerConfig, pointerColor = _d.pointerColor, pointerX = _d.pointerX, pointerComponent = _d.pointerComponent, pointerHeight = _d.pointerHeight, pointerRadius = _d.pointerRadius, pointerWidth = _d.pointerWidth, autoAdjustPointerLabelPosition = _d.autoAdjustPointerLabelPosition, pointerLabelWidth = _d.pointerLabelWidth, activatePointersOnLongPress = _d.activatePointersOnLongPress, yAxisLabelWidth = _d.yAxisLabelWidth, shiftPointerLabelX = _d.shiftPointerLabelX, pointerLabelHeight = _d.pointerLabelHeight, pointerStripUptoDataPoint = _d.pointerStripUptoDataPoint, pointerStripHeight = _d.pointerStripHeight, shiftPointerLabelY = _d.shiftPointerLabelY, showPointerStrip = _d.showPointerStrip, pointerStripWidth = _d.pointerStripWidth, containerHeight = _d.containerHeight, xAxisThickness = _d.xAxisThickness, pointerStripColor = _d.pointerStripColor, pointerEvents = _d.pointerEvents, setResponderStartTime = _d.setResponderStartTime, setPointerY = _d.setPointerY, setPointerItem = _d.setPointerItem, initialSpacing = _d.initialSpacing, spacing = _d.spacing, data = _d.data, barWidth = _d.barWidth, setPointerX = _d.setPointerX, pointerIndex = _d.pointerIndex, setPointerIndex = _d.setPointerIndex, maxValue = _d.maxValue, responderStartTime = _d.responderStartTime, setResponderActive = _d.setResponderActive, activatePointersDelay = _d.activatePointersDelay, persistPointer = _d.persistPointer, pointerVanishDelay = _d.pointerVanishDelay, containerHeightIncludingBelowXAxis = _d.containerHeightIncludingBelowXAxis, extendedContainerHeight = _d.extendedContainerHeight, totalWidth = _d.totalWidth, stripBehindBars = _d.stripBehindBars, noOfSectionsBelowXAxis = _d.noOfSectionsBelowXAxis, stepHeight = _d.stepHeight, xAxisLabelsVerticalShift = _d.xAxisLabelsVerticalShift, labelsExtraHeight = _d.labelsExtraHeight, stripOverPointer = _d.stripOverPointer, pointerLabelComponent = _d.pointerLabelComponent, selectedIndex = _d.selectedIndex, setSelectedIndex = _d.setSelectedIndex, selectedStackIndex = _d.selectedStackIndex, setSelectedStackIndex = _d.setSelectedStackIndex, isAnimated = _d.isAnimated, animationDuration = _d.animationDuration, side = _d.side, labelWidth = _d.labelWidth, isThreeD = _d.isThreeD, animatedHeight = _d.animatedHeight, appearingOpacity = _d.appearingOpacity, autoShiftLabels = _d.autoShiftLabels, getPropsCommonForBarAndStack = _d.getPropsCommonForBarAndStack, barAndLineChartsWrapperProps = _d.barAndLineChartsWrapperProps, autoShiftLabelsForNegativeStacks = _d.autoShiftLabelsForNegativeStacks, showLine = _d.showLine, points2 = _d.points2;
     var _e = useBarAndLineChartsWrapper(__assign(__assign({}, barAndLineChartsWrapperProps), { isRTL: I18nManager.isRTL })), lineInBarChartProps = _e.lineInBarChartProps, lineInBarChartProps2 = _e.lineInBarChartProps2;
     var stackData = barAndLineChartsWrapperProps.stackData;
     var labelsAppear = useCallback(function () {
@@ -228,6 +228,12 @@ export var BarChart = function (props) {
                         setSelectedStackIndex(-1);
                         // props.setHighlightedStackIndex?.(-1)
                     }
+                    if (lineConfig.focusEnabled) {
+                        lineConfig.setFocusedDataPointIndex(-1);
+                    }
+                    if (lineConfig2.focusEnabled) {
+                        lineConfig2.setFocusedDataPointIndex(-1);
+                    }
                     (_b = props.onBackgroundPress) === null || _b === void 0 ? void 0 : _b.call(props);
                 }, children: [renderChart(), 
                     // Only For Bar Charts-

package/dist/BubbleChart/index.d.ts

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

package/dist/BubbleChart/index.js

@@ -0,0 +1,385 @@
+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 { LineDefaults, useBubbleChart, } from 'gifted-charts-core';
+import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, I18nManager, Text, View, } from 'react-native';
+import { Circle, ForeignObject, Rect, Svg, Text as CanvasText, } from 'react-native-svg';
+import { isWebApp, screenWidth } from '../utils';
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var AnimatedRect = Animated.createAnimatedComponent(Rect);
+export var BubbleChart = function (props) {
+    var _a, _b, _c, _d;
+    var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var secondaryXAxis = props.secondaryXAxis;
+    var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showDataPointOnFocus = _e.showDataPointOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, dataPointsShape = _e.dataPointsShape, dataPointsWidth = _e.dataPointsWidth, dataPointsHeight = _e.dataPointsHeight, dataPointsColor = _e.dataPointsColor, dataPointsRadius = _e.dataPointsRadius, textColor = _e.textColor, textFontSize = _e.textFontSize, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, cumulativeSpacing = _e.cumulativeSpacing, hideDataPoints = _e.hideDataPoints, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity;
+    var radiiValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    var pointsHeightValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    var pointsWidthValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
+    var scrollRef = (_b = props.scrollRef) !== null && _b !== void 0 ? _b : useRef(null);
+    var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
+    var appearingOpacity = opacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+    });
+    var growingRadii = radiiValues.map(function (r, i) {
+        var _a, _b;
+        return r.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].r) !== null && _b !== void 0 ? _b : dataPointsRadius],
+        });
+    });
+    var growingHeight = pointsHeightValues.map(function (h, i) {
+        var _a, _b;
+        return h.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointHeight) !== null && _b !== void 0 ? _b : dataPointsHeight],
+        });
+    });
+    var growingWidth = pointsHeightValues.map(function (w, i) {
+        var _a, _b;
+        return w.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointWidth) !== null && _b !== void 0 ? _b : dataPointsWidth],
+        });
+    });
+    var appearingDataPoints = pointsOpacityValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, opacity],
+    });
+    var decreaseWidth = useCallback(function () {
+        widthValue.setValue(0);
+        Animated.timing(widthValue, {
+            toValue: totalWidth,
+            duration: animationDuration,
+            easing: Easing.linear,
+            useNativeDriver: false,
+        }).start();
+    }, [animationDuration, widthValue]);
+    var labelsAppear = useCallback(function () {
+        opacityValue.setValue(0);
+        Animated.timing(opacityValue, {
+            toValue: 1,
+            duration: 500,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [opacityValue]);
+    var radiiGrow = useCallback(function () {
+        radiiValues.forEach(function (radiusValue) {
+            radiusValue.setValue(0);
+            Animated.timing(radiusValue, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [radiiValues]);
+    var dataPointsHeightsGrow = useCallback(function () {
+        pointsHeightValues.forEach(function (h) {
+            h.setValue(0);
+            Animated.timing(h, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [pointsHeightValues]);
+    var dataPointsWidthsGrow = useCallback(function () {
+        pointsWidthValues.forEach(function (w) {
+            w.setValue(0);
+            Animated.timing(w, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: Easing.ease,
+                useNativeDriver: false,
+            }).start();
+        });
+    }, [pointsWidthValues]);
+    // const dataPointsHeightGrow
+    var dataPointsAppear = useCallback(function () {
+        pointsOpacityValue.setValue(0);
+        Animated.timing(pointsOpacityValue, {
+            toValue: 1,
+            duration: animationDuration,
+            easing: Easing.ease,
+            useNativeDriver: false,
+        }).start();
+    }, [pointsOpacityValue]);
+    useEffect(function () {
+        if (isAnimated) {
+            decreaseWidth();
+            labelsAppear();
+            radiiGrow();
+            dataPointsAppear();
+            if (dataPointsShape === 'rectangular') {
+                dataPointsHeightsGrow();
+                dataPointsWidthsGrow();
+            }
+        }
+    }, [isAnimated, dataPointsShape]);
+    var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
+    var onStripPress = function (item, index) {
+        if (props.focusedDataPointIndex === undefined || !props.onFocus) {
+            setSelectedIndex(index);
+        }
+        if (props.onFocus) {
+            props.onFocus(item, index);
+        }
+    };
+    var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(View, { style: [
+                {
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
+                        : -xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing + labelsExtraHeight,
+                    left: initialSpacing + spacing * index - spacing / 2,
+                    height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderAnimatedLabel = function (top, index, label, labelTextStyle, labelComponent) {
+        var _a, _b;
+        return (_jsx(Animated.View, { style: [
+                {
+                    height: rotateLabel
+                        ? 40
+                        : ((_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18),
+                    position: 'absolute',
+                    bottom: top
+                        ? containerHeight +
+                            60 +
+                            ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
+                        : rotateLabel
+                            ? 10
+                            : -xAxisTextNumberOfLines * 18,
+                    zIndex: 10,
+                    width: spacing,
+                    left: initialSpacing + spacing * index - spacing / 2,
+                    opacity: appearingOpacity,
+                },
+                rotateLabel && { transform: [{ rotate: '60deg' }] },
+            ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
+    };
+    var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
+        var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
+        return dataForRender.map(function (item, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (index < startIndex || index > endIndex)
+                return null;
+            if (item.hideDataPoint) {
+                return null;
+            }
+            var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
+            if (index === selectedIndex &&
+                (focusTogether || key === selectedLineNumber)) {
+                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 ||
+                        LineDefaults.focusedDataPointColor;
+                dataPointsRadius =
+                    (_c = (_b = (_a = item.focusedDataPointRadius) !== null && _a !== void 0 ? _a : props.focusedDataPointRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = item.dataPointText;
+                }
+                customDataPoint =
+                    item.focusedCustomDataPoint ||
+                        props.focusedCustomDataPoint ||
+                        item.customDataPoint ||
+                        props.customDataPoint;
+                dataPointLabelComponent =
+                    item.focusedDataPointLabelComponent ||
+                        item.dataPointLabelComponent ||
+                        props.focusedDataPointLabelComponent ||
+                        props.dataPointLabelComponent;
+            }
+            else {
+                dataPointsShape = item.dataPointShape || dataPtsShape;
+                dataPointsWidth = item.dataPointWidth || dataPtsWidth;
+                dataPointsHeight = item.dataPointHeight || dataPtsHeight;
+                dataPointsColor = item.dataPointColor || dataPtsColor;
+                dataPointsRadius = (_d = item.r) !== null && _d !== void 0 ? _d : dataPtsRadius;
+                if (showTextOnFocus) {
+                    text = '';
+                }
+                customDataPoint = item.customDataPoint || props.customDataPoint;
+                dataPointLabelComponent =
+                    item.dataPointLabelComponent || props.dataPointLabelComponent;
+            }
+            if (showValuesAsDataPointsText) {
+                text = originalDataFromProps[index].y;
+            }
+            var dataPointLabelWidth = item.dataPointLabelWidth
+                ? item.dataPointLabelWidth
+                : props.dataPointLabelWidth
+                    ? props.dataPointLabelWidth
+                    : 30;
+            return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
+                                var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
+                                handleFocus(index);
+                            }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
+                                    dataPointsWidth / 2 +
+                                    ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : (_jsx(Animated.View, { style: {
+                                    position: 'absolute',
+                                    // height: svgHeight,
+                                    // width: totalWidth,
+                                    left: initialSpacing -
+                                        dataPointsWidth / 2 +
+                                        ((_f = spacingArray[index - 1]) !== null && _f !== void 0 ? _f : 0),
+                                    top: getYOrSecondaryY(item.y) - dataPointsHeight / 2,
+                                    opacity: isAnimated ? appearingOpacity : 1,
+                                }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedRect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, width: isAnimated ? growingWidth[index] : dataPointsWidth, height: isAnimated ? growingHeight[index] : dataPointsHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedCircle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : dataPointsRadius, fill: showDataPointOnFocus
+                                        ? index === selectedIndex
+                                            ? dataPointsColor
+                                            : 'none'
+                                        : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, onPress: function () {
+                                        item.onPress
+                                            ? item.onPress(item, index)
+                                            : props.onPress
+                                                ? props.onPress(item, index)
+                                                : focusEnabled
+                                                    ? handleFocus(index)
+                                                    : null;
+                                    }, onPressOut: function () {
+                                        if (!item.onPress && !props.onPress && focusEnabled) {
+                                            handleUnFocus();
+                                        }
+                                    } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
+                                    (item.dataPointLabelShiftX ||
+                                        props.dataPointLabelShiftX ||
+                                        0) -
+                                    dataPointLabelWidth / 2 +
+                                    spacing * index, y: containerHeight +
+                                    (item.dataPointLabelShiftY ||
+                                        props.dataPointLabelShiftY ||
+                                        0) -
+                                    (item.y * containerHeight) / maxValue, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
+                                    position: 'absolute',
+                                    height: svgHeight,
+                                    width: dataPointLabelWidth,
+                                    left: initialSpacing +
+                                        (item.dataPointLabelShiftX ||
+                                            props.dataPointLabelShiftX ||
+                                            0) -
+                                        dataPointLabelWidth / 2 +
+                                        spacing * index,
+                                    top: containerHeight +
+                                        (item.dataPointLabelShiftY ||
+                                            props.dataPointLabelShiftY ||
+                                            0) -
+                                        (item.y * containerHeight) / maxValue,
+                                }, children: showDataPointLabelOnFocus
+                                    ? index === selectedIndex &&
+                                        (focusTogether || key == selectedLineNumber)
+                                        ? dataPointLabelComponent(item, index) // not pushed in latest release
+                                        : null
+                                    : dataPointLabelComponent(item, index) }))) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
+                                    dataPointsWidth +
+                                    (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.y) -
+                                    dataPointsHeight / 2 +
+                                    (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus && !showValuesAsDataPointsText
+                                    ? item.dataPointText
+                                    : text })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
+        });
+    };
+    var svgWrapperViewStyle = {
+        position: 'absolute',
+        top: 0, // 281 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
+        left: 0,
+        zIndex: 1,
+        transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+    };
+    var renderChartContent = function () {
+        var _a;
+        return (_jsxs(View, { style: [
+                svgWrapperViewStyle,
+                {
+                    width: totalWidth,
+                    height: containerHeightIncludingBelowXAxis,
+                    //   zIndex,
+                },
+            ], children: [_jsx(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: renderDataPoints(hideDataPoints, props.data, props.data, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, false, showValuesAsDataPointsText, cumulativeSpacing, 0) }), (_a = props.data) === null || _a === void 0 ? void 0 : _a.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var secondaryLabel = (_c = (_a = item.secondaryLabel) !== null && _a !== void 0 ? _a : (_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelTexts) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : '';
+                    var secondaryLabelTextStyle = (_f = (_e = (_d = item.secondaryLabelTextStyle) !== null && _d !== void 0 ? _d : secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsTextStyle) !== null && _e !== void 0 ? _e : item.labelTextStyle) !== null && _f !== void 0 ? _f : props.xAxisLabelTextStyle;
+                    return (_jsxs(View, { children: [isAnimated
+                                ? renderAnimatedLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
+                                : renderLabel(false, index, item.label ||
+                                    (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
+                                        ? props.xAxisLabelTexts[index]
+                                        : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent), secondaryXAxis
+                                ? isAnimated
+                                    ? renderAnimatedLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                    : renderLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
+                                : null] }, index));
+                })] }));
+    };
+    var remainingScrollViewProps = {
+        onScroll: function (ev) {
+            var _a;
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
+        },
+        bounces: props.bounces,
+        overScrollMode: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
+    };
+    return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
+};

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

@@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { renderSpecificVerticalLines } from './renderSpecificVerticalLines';
 import { renderDataPoints } from './renderDataPoints';
 import { renderSpecificDataPoints } from './renderSpecificDataPoints';
-import { isIos } from '../../../utils';
+import { isIos, isWebApp } from '../../../utils';
 var RenderLineInBarChart = function (props) {
     var _a, _b;
     var yAxisLabelWidth = props.yAxisLabelWidth, initialSpacing = props.initialSpacing, spacing = props.spacing, containerHeight = props.containerHeight, lineConfig = props.lineConfig, maxValue = props.maxValue, animatedWidth = props.animatedWidth, lineBehindBars = props.lineBehindBars, points = props.points, arrowPoints = props.arrowPoints, data = props.data, totalWidth = props.totalWidth, barWidth = props.barWidth, labelsExtraHeight = props.labelsExtraHeight, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, selectedIndex = props.selectedIndex, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, yAxisOffset = props.yAxisOffset, highlightEnabled = props.highlightEnabled, lowlightOpacity = props.lowlightOpacity;
@@ -15,6 +15,7 @@ var RenderLineInBarChart = function (props) {
             : lowlightOpacity
         : 1;
     var svgHeight = containerHeightIncludingBelowXAxis + labelsExtraHeight;
+    var svgHeightProp = isWebApp ? svgHeight : undefined;
     var dataPointsProps = {
         data: data,
         lineConfig: lineConfig,
@@ -57,11 +58,11 @@ var RenderLineInBarChart = function (props) {
                 position: 'absolute',
                 height: svgHeight,
                 left: 6 - yAxisLabelWidth,
-                bottom: 50 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
+                bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: animatedWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'wheat',
-            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? animatedWidth : undefined, children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };
@@ -69,13 +70,13 @@ var RenderLineInBarChart = function (props) {
         var _a, _b, _c;
         return (_jsx(View, { pointerEvents: isIos ? 'none' : 'box-none', style: {
                 position: 'absolute',
-                height: containerHeightIncludingBelowXAxis + labelsExtraHeight,
+                height: svgHeight,
                 left: 6 - yAxisLabelWidth,
                 bottom: -10 + xAxisLabelsVerticalShift, //stepHeight * -0.5 + xAxisThickness,
                 width: totalWidth,
                 zIndex: lineBehindBars ? -1 : 100000,
                 // backgroundColor: 'rgba(200,150,150,0.1)'
-            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
+            }, children: _jsxs(Svg, { pointerEvents: isIos ? 'none' : 'box-none', height: svgHeightProp, width: isWebApp ? totalWidth : undefined, children: [_jsx(Path, { d: points, fill: "none", opacity: opacity, stroke: lineConfig.color, strokeWidth: lineConfig.thickness, strokeDasharray: lineConfig.strokeDashArray }), renderSpecificVerticalLines(specificVerticalLinesProps), !lineConfig.hideDataPoints
                         ? renderDataPoints(dataPointsProps)
                         : renderSpecificDataPoints(specificDataPointsProps), lineConfig.showArrow && (_jsx(Path, { d: arrowPoints, fill: (_a = lineConfig.arrowConfig) === null || _a === void 0 ? void 0 : _a.fillColor, stroke: (_b = lineConfig.arrowConfig) === null || _b === void 0 ? void 0 : _b.strokeColor, strokeWidth: (_c = lineConfig.arrowConfig) === null || _c === void 0 ? void 0 : _c.strokeWidth }))] }) }));
     };