react-native-gifted-charts 1.4.40 → 1.4.42

package/README.md

@@ -14,8 +14,7 @@ The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Popul
 6. Fully customizable (see the [props](docs/docs.md))
 7. Detailed [documentation](https://gifted-charts.web.app/) with examples
 8. Support for **_combined_** Bar and Line charts
-
-## 📣 Announcement
+9. Tested to be pixel perfect using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). See [the screenshot tests here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html)
 
 The web counterpart of this library is public now. Try out our new reactJS library- [react-gifted-charts](https://www.npmjs.com/package/react-gifted-charts) <br />
 The exact same piece of code that you write to render charts in react-native, can be used to render charts in reactJS using this library!
@@ -122,6 +121,12 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 
 [To do list](./src/todos.md)
 
+## 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/>
+Around 200 screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
+
 ## License
 
 MIT

package/dist/BarChart/Animated2DWithGradient.js

@@ -25,11 +25,13 @@ if (Platform.OS === 'android') {
         UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 var Animated2DWithGradient = function (props) {
-    var _a;
-    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, barWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barMarginBottom = props.barMarginBottom, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset;
-    var _b = __read(useState(noAnimation ? props.height : 0.4), 2), height = _b[0], setHeight = _b[1]; // if animation fails, increase this constant value of 0.4
-    var _c = __read(useState(!noAnimation), 2), initialRender = _c[0], setInitialRender = _c[1];
+    var _a, _b;
+    var barBackgroundPattern = props.barBackgroundPattern, patternId = props.patternId, bWidth = props.barWidth, barStyle = props.barStyle, item = props.item, index = props.index, opacity = props.opacity, animationDuration = props.animationDuration, noGradient = props.noGradient, noAnimation = props.noAnimation, barMarginBottom = props.barMarginBottom, barInnerComponent = props.barInnerComponent, intactTopLabel = props.intactTopLabel, showValuesAsTopLabel = props.showValuesAsTopLabel, topLabelContainerStyle = props.topLabelContainerStyle, topLabelTextStyle = props.topLabelTextStyle, commonStyleForBar = props.commonStyleForBar, barStyleWithBackground = props.barStyleWithBackground, yAxisOffset = props.yAxisOffset;
+    var _c = __read(useState(noAnimation ? props.height : 0.4), 2), height = _c[0], setHeight = _c[1]; // if animation fails, increase this constant value of 0.4
+    var _d = __read(useState(!noAnimation), 2), initialRender = _d[0], setInitialRender = _d[1];
+    var _e = __read(useState((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth), 2), barWidth = _e[0], setBarWidth = _e[1]; // setting width in state for animation purpose
     useEffect(function () {
+        var _a;
         if (!noAnimation) {
             if (initialRender) {
                 setTimeout(function () { return layoutAppear(); }, 20);
@@ -40,14 +42,17 @@ var Animated2DWithGradient = function (props) {
         }
         else {
             setHeight(props.height);
+            setBarWidth((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth);
         }
-    }, [props.height]);
+    }, [props.height, bWidth, item.barWidth]);
     var elevate = function () {
+        var _a;
         LayoutAnimation.configureNext({
             duration: animationDuration,
             update: { type: 'linear', property: 'scaleXY' },
         });
         setHeight(props.height);
+        setBarWidth((_a = item.barWidth) !== null && _a !== void 0 ? _a : bWidth);
     };
     var layoutAppear = function () {
         LayoutAnimation.configureNext({
@@ -61,7 +66,7 @@ var Animated2DWithGradient = function (props) {
     return (_jsxs(_Fragment, { children: [!initialRender && (_jsx(View, { style: {
                     position: 'absolute',
                     bottom: 0,
-                    width: '100%',
+                    width: barWidth,
                     overflow: 'hidden',
                     height: (noAnimation
                         ? Math.max(props.minHeight, Math.abs(height))
@@ -92,7 +97,7 @@ var Animated2DWithGradient = function (props) {
                                         : item.capRadius || props.capRadius || 0,
                                 } })) })), (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: item.barWidth || props.barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }) })), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(View, { style: [
+                                        : barBackgroundPattern === null || barBackgroundPattern === void 0 ? void 0 : barBackgroundPattern() }), _jsx(Rect, { stroke: "none", x: "1", y: "1", width: item.barWidth || barWidth || 30, height: noAnimation ? Math.abs(height) : height, fill: "url(#".concat(item.patternId || patternId, ")") })] })), barInnerComponent ? (_jsx(View, { style: { height: '100%', width: '100%' }, children: barInnerComponent(item, index) })) : null] }) })), item.topLabelComponent || showValuesAsTopLabel ? (_jsx(View, { style: [
                     {
                         position: 'absolute',
                         top: (item.barWidth || barWidth || 30) * -1,
@@ -108,6 +113,6 @@ var Animated2DWithGradient = function (props) {
                     props.horizontal &&
                         !intactTopLabel && { transform: [{ rotate: '270deg' }] },
                     topLabelContainerStyle !== null && topLabelContainerStyle !== void 0 ? topLabelContainerStyle : item.topLabelContainerStyle,
-                ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value + yAxisOffset })) : ((_a = item.topLabelComponent) === null || _a === void 0 ? void 0 : _a.call(item)) })) : null] }));
+                ], children: showValuesAsTopLabel ? (_jsx(Text, { style: topLabelTextStyle, children: item.value + yAxisOffset })) : ((_b = item.topLabelComponent) === null || _b === void 0 ? void 0 : _b.call(item)) })) : null] }));
 };
 export default Animated2DWithGradient;

package/dist/BarChart/RenderBars.js

@@ -108,7 +108,10 @@ var RenderBars = function (props) {
                         barWidth) + spacing,
                     left: spacing / -2,
                     position: 'absolute',
-                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18,
+                    height: (_a = props.xAxisLabelsHeight) !== null && _a !== void 0 ? _a : xAxisTextNumberOfLines * 18 -
+                        (value < 0
+                            ? -xAxisLabelsVerticalShift
+                            : xAxisLabelsVerticalShift),
                     bottom: top
                         ? (containerHeight || 200) +
                             ((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
@@ -133,7 +136,7 @@ var RenderBars = function (props) {
                                     {
                                         translateY: autoShiftLabels
                                             ? 0
-                                            : 16.5 * xAxisTextNumberOfLines + 14,
+                                            : 16.5 * xAxisTextNumberOfLines + 12,
                                     },
                                 ],
                             }

package/dist/Components/BarAndLineChartsWrapper/index.js

@@ -37,7 +37,9 @@ var BarAndLineChartsWrapper = function (props) {
                 50 -
                 overflowTop,
             marginTop: trimYAxisAtTop ? containerHeight / 20 : 0,
-            marginBottom: (xAxisLabelsHeight !== null && xAxisLabelsHeight !== void 0 ? xAxisLabelsHeight : xAxisTextNumberOfLines * 18) - 55, //This is to not let the Things that should be rendered below the chart overlap with it
+            marginBottom: (xAxisLabelsHeight !== null && xAxisLabelsHeight !== void 0 ? xAxisLabelsHeight : xAxisTextNumberOfLines * 18) -
+                55 -
+                xAxisLabelsVerticalShift, //This is to not let the Things that should be rendered below the chart overlap with it
         },
     });
     return (_jsxs(View, { style: [

package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js

@@ -34,6 +34,8 @@ export var renderHorizSections = function (props) {
     var _e = getHorizSectionVals(props), secondaryYAxisConfig = _e.secondaryYAxisConfig, horizSections = _e.horizSections, yAxisExtraHeightAtTop = _e.yAxisExtraHeightAtTop, secondaryHorizSections = _e.secondaryHorizSections, showReferenceLine1 = _e.showReferenceLine1, referenceLine1Config = _e.referenceLine1Config, referenceLine1Position = _e.referenceLine1Position, showReferenceLine2 = _e.showReferenceLine2, referenceLine2Config = _e.referenceLine2Config, referenceLine2Position = _e.referenceLine2Position, showReferenceLine3 = _e.showReferenceLine3, referenceLine3Config = _e.referenceLine3Config, referenceLine3Position = _e.referenceLine3Position, horizSectionsBelow = _e.horizSectionsBelow, secondaryHorizSectionsBelow = _e.secondaryHorizSectionsBelow, getLabelTexts = _e.getLabelTexts, getLabelTextsForSecondaryYAxis = _e.getLabelTextsForSecondaryYAxis;
     var secondaryYAxisExtraHeightAtBottom = 10;
     var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
+    var isLineChart = chartType === chartTypes.LINE;
+    var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
     var renderAxesAndRules = function (index) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var invertedIndex = horizSections.length - index - 1;
@@ -213,10 +215,6 @@ export var renderHorizSections = function (props) {
                         {
                             marginLeft: yAxisThickness,
                         },
-                        showBorder && {
-                            borderRightWidth: yAxisThickness,
-                            borderColor: yAxisColor,
-                        },
                         {
                             height: index === 0
                                 ? localNegativeStepHeight * 1.5
@@ -224,7 +222,21 @@ export var renderHorizSections = function (props) {
                             width: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth,
                         },
                         index === 0 && { marginTop: -localNegativeStepHeight / 2 },
-                    ] }), _jsx(View, { style: [styles.leftPart, { backgroundColor: backgroundColor }], children: hideRules ? null : (_jsx(Rule, { config: {
+                    ] }), _jsx(View, { style: {
+                        position: 'absolute',
+                        top: index === 0 ? -localNegativeStepHeight / 2 : 0,
+                        left: yAxisSide === yAxisSides.RIGHT
+                            ? width
+                                ? width + 19
+                                : totalWidth -
+                                    (isLineChart ? 31 : isLineBiColor ? spacing - 19 : 1)
+                            : yAxisLabelWidth,
+                        borderRightWidth: yAxisThickness,
+                        borderColor: yAxisColor,
+                        height: index === 0
+                            ? localNegativeStepHeight * 1.5
+                            : localNegativeStepHeight,
+                    } }), _jsx(View, { style: [styles.leftPart, { backgroundColor: backgroundColor }], children: hideRules ? null : (_jsx(Rule, { config: {
                             thickness: rulesThickness,
                             color: rulesColor,
                             width: rulesLength ||
@@ -234,10 +246,10 @@ export var renderHorizSections = function (props) {
                             type: rulesType,
                         } })) })] }, index));
     };
-    var leftShiftForRIghtYaxis = (width ? width + 20 : totalWidth) +
+    var leftShiftForRIghtYaxis = (width ? width + (isLineChart ? 50 : 20) : totalWidth) +
         yAxisLabelWidth / 2 +
         endSpacing -
-        (chartType === chartTypes.BAR ? 40 : 60);
+        (isLineChart ? 70 : 40);
     return (_jsx(_Fragment, { children: onlyReferenceLines ? (_jsx(View, { style: {
                 flexDirection: 'row',
             }, children: _jsx(View, { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs(View, { pointerEvents: "none", style: {
@@ -343,7 +355,10 @@ export var renderHorizSections = function (props) {
                                                 : negativeStepHeight,
                                         },
                                         yAxisSide === yAxisSides.RIGHT && {
-                                            left: (width !== null && width !== void 0 ? width : totalWidth) + yAxisLabelWidth,
+                                            left: (width
+                                                ? width - 15
+                                                : totalWidth - (isLineChart ? 65 : 35)) +
+                                                yAxisLabelWidth,
                                         },
                                         yAxisLabelContainerStyle,
                                     ], children: _jsx(Text, { numberOfLines: yAxisTextNumberOfLines, ellipsizeMode: 'clip', style: [

package/dist/LineChart/index.js

@@ -62,13 +62,16 @@ export var LineChart = function (props) {
     var animatedFillPoints = new Animated.Value(0);
     var oldPoints = usePrevious(points);
     var oldFillPoints = usePrevious(fillPoints);
-    var animatedPath = animateOnDataChange && points && oldPoints
+    var animatedPath = animateOnDataChange && points && oldPoints && points !== oldPoints
         ? animatedPoints.interpolate({
             inputRange: [0, 1],
             outputRange: pointsWithPaddedRepititions(oldPoints, points),
         })
         : '';
-    var animatedFillPath = animateOnDataChange && fillPoints && oldFillPoints
+    var animatedFillPath = animateOnDataChange &&
+        fillPoints &&
+        oldFillPoints &&
+        fillPoints !== oldFillPoints
         ? animatedFillPoints.interpolate({
             inputRange: [0, 1],
             outputRange: pointsWithPaddedRepititions(oldFillPoints, fillPoints),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.40",
+  "version": "1.4.42",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "android": "react-native run-android",
-    "build": "tsc -p . && ./build.sh",
+    "build": "rm -rf ./dist && tsc -p . && ./build.sh",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.41"
+    "gifted-charts-core": "0.1.42"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",