react-native-gifted-charts 1.4.61 → 1.4.63

package/README.md

@@ -3,12 +3,21 @@
 <p align="center">
   <a href="https://gifted-charts.web.app">
     <img src="/demos/favicon.png" height="auto" width="26" height="26" />
-  </a> &nbsp; &nbsp;
+  </a> &nbsp; &nbsp; &nbsp;
   <a href="https://www.npmjs.com/package/react-native-gifted-charts">
     <img src="/demos/npmIcon.png" height="auto" width="28" height="28" />
-  </a> &nbsp; &nbsp;
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts">
+    <img src="/demos/gitLogo.png" height="auto" width="28" height="28" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://stackoverflow.com/questions/tagged/react-native-gifted-charts?tab=Newest">
+    <img src="/demos/stackOverflow.png" height="auto" width="28" height="28" />
+  </a> &nbsp; &nbsp; &nbsp;
   <a href="https://discord.gg/FBbu9duJxs">
     <img src="/demos/discord.png" height="auto" width="30" height="30" />
+  </a> &nbsp; &nbsp; &nbsp;
+  <a href="https://www.reddit.com/r/gifted_charts/">
+    <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.
@@ -73,10 +82,12 @@ npx expo install react-native-gifted-charts expo-linear-gradient react-native-sv
 Please note that `react-native-svg` and `react-native-linear-gradient`/`expo-linear-gradient` are needed for the library to work, so make sure they are installed in your project. <br />
 **[gifted-charts-core](https://www.npmjs.com/package/gifted-charts-core)** contains the mathematical and logical utilities used by this library.
 
-# Docs
+# 📚 Docs & Demos 🎦
 
 - [Documentation and gallery](https://gifted-charts.web.app/) <br />
 - [Architecture and working (dev docs)](docs/dev/index.md)
+- [Demo repo and snacks list](https://github.com/Abhinandan-Kushwaha/GiftedChartsDemo?tab=readme-ov-file#gifted-charts-demo)
+- [Demo app on Play Store](https://play.google.com/store/apps/details?id=com.giftedcharts.demo)
 
 ## Usage
 
@@ -115,7 +126,7 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
 **4. [Population Pyramid props](docs/PopulationPyramid/PopulationPyramid.md)** \
 **5. [RadarChart props](docs/RadarChart/RadarChartProps.md)**
 
-## Contributing
+## 🤝 Contributing
 
 This project exists thanks to all the people who contribute.
 
@@ -132,15 +143,20 @@ Sometimes people report issues which don't exist, or request for features which
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
-[To do list](./src/todos.md)
+📝 [To do list](./src/todos.md)
 
-## Test cases
+## 🧐 Test cases
 
 - Test strategy and cases are discussed here- [TESTS.md](./TESTS.md) <br />
 - Pixel perfection is assured using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). <br/>
 - 220+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
 - Screenshot tests are written in a separate repo named [TestingCharts](https://github.com/Abhinandan-Kushwaha/TestingCharts)
 
+## 🏆 Showcase
+
+Showcase your dashing charts on [Expo snack](https://snack.expo.dev/) and list them on the [Demo app repo](https://github.com/Abhinandan-Kushwaha/GiftedChartsDemo?tab=readme-ov-file#gifted-charts-demo).<br />
+Your snack might get published in the [Demo app on Play Store!](https://play.google.com/store/apps/details?id=com.giftedcharts.demo)
+
 ## License
 
 MIT

package/dist/BarChart/RenderStackBars.js

@@ -160,7 +160,7 @@ var RenderStackBars = function (props) {
                                         ] })) : null, stackItem.innerBarComponent && stackItem.innerBarComponent()] }, index));
                         }), (item.barBackgroundPattern || barBackgroundPattern) && (_jsxs(Svg, { children: [_jsx(Defs, { children: item.barBackgroundPattern
                                         ? item.barBackgroundPattern()
-                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: "100%", height: totalHeight, fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
+                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "0", y: "0", width: "100%", height: totalHeight, fill: "url(#".concat(item.patternId || patternId, ")") })] }))] }), localBarInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: localBarInnerComponent(item, index) })) : null, (item.topLabelComponent || showValuesAsTopLabel) && (_jsx(View, { style: [
                         {
                             position: 'absolute',
                             top: containsNegativeValue

package/dist/BarChart/index.js

@@ -133,9 +133,10 @@ export var BarChart = function (props) {
     };
     var activatePointer = function (x) {
         var _a;
+        var chartData = stackData !== null && stackData !== void 0 ? stackData : data;
         var factor = (x - initialSpacing - barWidth / 2) / (spacing + barWidth);
         factor = Math.round(factor);
-        factor = Math.min(factor, data.length - 1);
+        factor = Math.min(factor, chartData.length - 1);
         factor = Math.max(factor, 0);
         var z = initialSpacing +
             (spacing + barWidth) * factor -
@@ -144,7 +145,7 @@ export var BarChart = function (props) {
         setPointerX(z);
         setPointerIndex(factor);
         var item, y;
-        item = (stackData !== null && stackData !== void 0 ? stackData : data)[factor];
+        item = chartData[factor];
         var stackSum = 0;
         if ('stacks' in item) {
             stackSum = item.stacks.reduce(function (acc, stack) { var _a; return acc + ((_a = stack.value) !== null && _a !== void 0 ? _a : 0); }, 0);

package/dist/LineChart/index.js

@@ -38,8 +38,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
 import { View, Animated, Easing, Text, Dimensions, I18nManager, } from 'react-native';
 import { screenWidth, usePrevious } from '../utils';
-import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, } from 'react-native-svg';
-import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
+import Svg, { Path, LinearGradient, Stop, Circle, Rect, Text as CanvasText, Line, ClipPath, Use, ForeignObject, Defs, } from 'react-native-svg';
+import { getSegmentedPathObjects, getRegionPathObjects, RANGE_ENTER, RANGE_EXIT, SEGMENT_END, SEGMENT_START, STOP, svgPath, useLineChart, adjustToOffset, LineDefaults, pointsWithPaddedRepititions, } from 'gifted-charts-core';
 import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
 import { StripAndLabel } from '../Components/common/StripAndLabel';
 import { Pointer } from '../Components/common/Pointer';
@@ -558,8 +558,54 @@ export var LineChart = function (props) {
     var getLineGradientComponent = function () {
         return props.lineGradientComponent ? (props.lineGradientComponent()) : (_jsxs(LinearGradient, { id: "lineGradient", x1: "0", y1: "0", x2: lineGradientDirection === 'horizontal' ? '1' : '0', y2: lineGradientDirection === 'vertical' ? '1' : '0', children: [_jsx(Stop, { offset: "0", stopColor: lineGradientStartColor }), _jsx(Stop, { offset: "1", stopColor: lineGradientEndColor })] }));
     };
-    var getAreaGradientComponent = function (startFillColor, endFillColor, startOpacity, endOpacity) {
-        return props.areaGradientComponent ? (props.areaGradientComponent()) : (_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() })] }));
+    var getAreaGradientComponent = function (startFillColor, endFillColor, startOpacity, endOpacity, gradientId) {
+        return props.areaGradientComponent ? (props.areaGradientComponent()) : (_jsxs(LinearGradient, { id: gradientId || '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() })] }));
+    };
+    var getSpreadAreaPath = function (spreadAreaData, getX, getY, spacingArray, curvature, curveType) {
+        if (!spreadAreaData || spreadAreaData.length === 0)
+            return '';
+        // Generate points arrays for upper and lower bounds
+        var upperPoints = spreadAreaData.map(function (point, index) { return [
+            getX(spacingArray, index),
+            getY(point.upper),
+        ]; });
+        var lowerPoints = spreadAreaData.map(function (point, index) { return [
+            getX(spacingArray, index),
+            getY(point.lower),
+        ]; });
+        // Use curve interpolation if curveType is specified
+        if (curveType !== undefined && curveType !== 0) {
+            var topPath = svgPath(upperPoints, curveType, props.curvature);
+            // Reverse the lower points for the path and create curved path
+            var reversedLowerPoints = lowerPoints.slice().reverse();
+            var bottomPath = svgPath(reversedLowerPoints, curveType, props.curvature);
+            // Remove the initial 'M' from bottomPath and prepend 'L' to connect it
+            var bottomPathConnected = bottomPath.replace(/^M/, 'L');
+            return "".concat(topPath, " ").concat(bottomPathConnected, " Z");
+        }
+        else {
+            // Fallback to straight lines for compatibility
+            var topPath = spreadAreaData
+                .map(function (point, index) {
+                return "L ".concat(getX(spacingArray, index), " ").concat(getY(point.upper));
+            })
+                .join(' ')
+                .replace(/^L/, 'M');
+            var bottomPath = spreadAreaData
+                .slice()
+                .reverse()
+                .map(function (point, index) {
+                return "L ".concat(getX(spacingArray, spreadAreaData.length - 1 - index), " ").concat(getY(point.lower));
+            })
+                .join(' ');
+            return "".concat(topPath, " ").concat(bottomPath, " Z");
+        }
+    };
+    var getClipRange = function (startIndex, endIndex, clipRangeId) {
+        var startX = startIndex * spacing + initialSpacing;
+        var endX = endIndex * spacing + initialSpacing;
+        var clipWidth = endX - startX;
+        return (_jsx(Defs, { children: _jsx(ClipPath, { id: clipRangeId, children: _jsx(Rect, { x: startX, y: 0, width: clipWidth, height: "100%" }) }) }));
     };
     var renderIntersection = function () {
         var _a;
@@ -590,9 +636,15 @@ export var LineChart = function (props) {
         if (!points)
             return null;
         var isCurved = points.includes('C') || points.includes('Q');
+        var clipRangeId = "Clip-range-".concat(key);
+        var uniqueId = "Gradient-line-".concat(key);
         var isNthAreaChart = !!dataSet
             ? ((_a = dataSet[Number(key)].areaChart) !== null && _a !== void 0 ? _a : areaChart)
             : getIsNthAreaChart(key !== null && key !== void 0 ? key : 0);
+        // Add support for spread area data from props
+        var spreadAreaData = props.spreadAreaData;
+        var spreadAreaColor = props.spreadAreaColor;
+        var spreadAreaOpacity = props.spreadAreaOpacity;
         var ar = [{ d: '', color: '', strokeWidth: 0 }];
         if (points.includes(RANGE_ENTER)) {
             ar = getRegionPathObjects(points, color, currentLineThickness !== null && currentLineThickness !== void 0 ? currentLineThickness : 0, thickness, strokeDashArray !== null && strokeDashArray !== void 0 ? strokeDashArray : [], isCurved, RANGE_ENTER, STOP, RANGE_EXIT, curveType);
@@ -639,12 +691,14 @@ export var LineChart = function (props) {
                     }
                     return _jsx(Path, __assign({}, lineSvgProps), index);
                 })) : animateOnDataChange && animatedPath ? (_jsx(AnimatedPath, __assign({}, lineSvgPropsOuter))) : (_jsx(Path, __assign({}, lineSvgPropsOuter))), isNthAreaChart &&
-                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity), isNthAreaChart ? (props.interpolateMissingValues === false &&
+                    getAreaGradientComponent(startFillColor, endFillColor, startOpacity, endOpacity, uniqueId), isNthAreaChart &&
+                    (startIndex !== 0 || endIndex !== data.length - 1) &&
+                    getClipRange(startIndex, endIndex, clipRangeId), isNthAreaChart ? (props.interpolateMissingValues === false &&
                     propsData.some(function (item) { return isNaN(item.value); }) ? null : animateOnDataChange && animatedFillPath ? (_jsx(AnimatedPath, { onPress: props.onChartAreaPress, d: animatedFillPath, fill: props.areaGradientId
                         ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness })) : (_jsx(Path, { onPress: props.onChartAreaPress, d: fillPoints, fill: props.areaGradientId
                         ? "url(#".concat(props.areaGradientId, ")")
-                        : "url(#Gradient)", stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
+                        : "url(#".concat(uniqueId, ")"), clipPath: "url(#".concat(clipRangeId, ")"), stroke: 'none', strokeWidth: currentLineThickness || thickness }))) : null, spreadAreaData && (_jsx(Path, { d: getSpreadAreaPath(spreadAreaData, getX, getY, spacingArray, props.curvature, curveType), fill: spreadAreaColor || 'rgba(0,0,255,0.2)', stroke: "none", opacity: spreadAreaOpacity !== null && spreadAreaOpacity !== void 0 ? spreadAreaOpacity : 0.3 })), renderSpecificVerticalLines(data, cumulativeSpacing1), renderSpecificVerticalLines(data2, cumulativeSpacing2), renderSpecificVerticalLines(data3, cumulativeSpacing3), renderSpecificVerticalLines(data4, cumulativeSpacing4), renderSpecificVerticalLines(data5, cumulativeSpacing5), (_b = dataSet === null || dataSet === void 0 ? void 0 : dataSet.map(function (set, index) {
                     return renderSpecificVerticalLines(set === null || set === void 0 ? void 0 : set.data, cumulativeSpacingForSet[index]);
                 })) !== null && _b !== void 0 ? _b : null, isAnimated && !renderDataPointsAfterAnimationEnds // in this condition onPress won't work properly in case of multi-line, so it's suggested to use either renderDataPointsAfterAnimationEnds prop if you want to use onPress for data points
                     ? renderDataPoints(hideDataPoints, data, propsData, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.61",
+  "version": "1.4.63",
   "description": "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.",
   "main": "dist/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.63"
+    "gifted-charts-core": "0.1.65"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",