@syncfusion/ej2-charts - npm Package Compare versions

Comparing version 21.2.6 to 21.2.8

CHANGELOG.md

@@ -9,2 +9,16 @@ # Changelog
 
+- `#F181551` - The tooltip now displays the percentage of each stacking group.
+- `#F182191` - Now, tooltip values are displayed correctly when no data is given for the data point in a series.
+- `#I461357` - Now, zooming and selection are working properly when using both at the same time.
+- `#I452148` - The issue of the y-axis label overlap has been fixed.
+- `#I464813` - Fixed MinorGridLine to be visible even when the width is not set for MajorTickLine.
+- `#I463171` - Fixed issue where column width was not being set properly.
+- `#I462090` - Fixed an issue where startFromAxis was not working correctly for stripLine.
+
+## 21.2.6 (2023-05-23)
+
+### Chart
+
+#### Bug Fixes
+
 - `#F182033` - The marker is now proper while zooming the chart.
@@ -11,0 +25,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 21.2.6
+*  version : 21.2.8
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-charts@*",
-  "_id": "@syncfusion/ej2-charts@21.2.5",
+  "_id": "@syncfusion/ej2-charts@21.2.6",
   "_inBundle": false,
-  "_integrity": "sha512-lt153vv8ZycLqj1/c/I8HKjn/oeEuBsXWvqAi1gQhaUFkZyoo5hQNYYpTYxpEYCP0HoisocHm7pGeoJBZgZ6RQ==",
+  "_integrity": "sha512-Rju0k0AsxsxmSS/PtsHWUNmpS41ELPzDhmA+PnPLrr4oITNbmyJov56cwPhmC7MaVfTXFALk1YUY55vkO6DOyQ==",
   "_location": "/@syncfusion/ej2-charts",
@@ -29,4 +29,4 @@ "_phantomChildren": {},
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-charts/-/ej2-charts-21.2.5.tgz",
-  "_shasum": "35080cfc7525698a8724272d6676894ec2b612c2",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-charts/-/ej2-charts-21.2.6.tgz",
+  "_shasum": "1fe076bec35cc1b42b002eb6bb01422bb045c09e",
   "_spec": "@syncfusion/ej2-charts@*",
@@ -40,8 +40,8 @@ "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
     "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-calendars": "~21.2.6",
+    "@syncfusion/ej2-calendars": "~21.2.8",
     "@syncfusion/ej2-compression": "~21.2.3",
-    "@syncfusion/ej2-data": "~21.2.6",
+    "@syncfusion/ej2-data": "~21.2.8",
     "@syncfusion/ej2-file-utils": "~21.2.3",
-    "@syncfusion/ej2-navigations": "~21.2.6",
-    "@syncfusion/ej2-pdf-export": "~21.2.3",
+    "@syncfusion/ej2-navigations": "~21.2.8",
+    "@syncfusion/ej2-pdf-export": "~21.2.8",
     "@syncfusion/ej2-svg-base": "~21.2.3"
@@ -76,5 +76,5 @@ },
   "typings": "index.d.ts",
-  "version": "21.2.6",
+  "version": "21.2.8",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

src/chart/axis/strip-line.d.ts

@@ -102,2 +102,12 @@ import { Chart } from '../chart';
     /**
+     * To draw the Image
+     *
+     * @param {StripLineSettingsModel} stripline stripline
+     * @param {Rect} rect rect
+     * @param {string} id id
+     * @param {Element} parent parent
+     * @param {Chart} chart chart
+     */
+    private drawImage;
+    /**
      * To create the text on strip line
@@ -104,0 +114,0 @@ *

src/chart/axis/strip-line.js

@@ -9,3 +9,3 @@ /* eslint-disable @typescript-eslint/no-unused-vars */
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
-import { valueToCoefficient, textElement, RectOption, appendChildElement, appendClipElement, withIn, getElement } from '../../common/utils/helper';
+import { valueToCoefficient, textElement, RectOption, appendChildElement, appendClipElement, withIn, getElement, ImageOption } from '../../common/utils/helper';
 import { measureText, TextOption, PathOption, Rect } from '@syncfusion/ej2-svg-base';
@@ -93,2 +93,5 @@ import { DataUtil } from '@syncfusion/ej2-data';
         var from = (!stripline.isRepeat && startFromAxis) ? axis.visibleRange.min : start;
+        if (axis.valueType === 'Double' && size !== null && !startFromAxis && stripline.start == null) {
+            from += size;
+        }
         var to = this.getToValue(Math.max(start, isNullOrUndefined(end) ? start : end), from, size, axis, end, stripline);
@@ -287,2 +290,20 @@ from = this.findValue(from, axis);
     /**
+     * To draw the Image
+     *
+     * @param {StripLineSettingsModel} stripline stripline
+     * @param {Rect} rect rect
+     * @param {string} id id
+     * @param {Element} parent parent
+     * @param {Chart} chart chart
+     */
+    StripLine.prototype.drawImage = function (stripline, rect, id, parent, chart) {
+        if (stripline.sizeType === 'Pixel') {
+            rect.width = rect.width ? rect.width : stripline.size;
+            rect.height = rect.height ? rect.height : stripline.size;
+        }
+        var image = new ImageOption(rect.height, rect.width, stripline.imageUrl, rect.x, rect.y, id, 'visible', 'none');
+        var htmlObject = chart.renderer.drawImage(image);
+        appendChildElement(chart.enableCanvas, parent, htmlObject, chart.redraw, true, 'x', 'y', null, null, true, true);
+    };
+    /**
      * To create the text on strip line
@@ -383,3 +404,6 @@ *
         var rect = this.measureStripLine(axis, stripline, seriesClipRect, startValue, segmentAxis, chart);
-        if (stripline.sizeType === 'Pixel') {
+        if (stripline.imageUrl) {
+            this.drawImage(stripline, rect, id + 'rect_' + axis.name + '_' + count, striplineGroup, chart);
+        }
+        else if (stripline.sizeType === 'Pixel') {
             this.renderPath(stripline, rect, id + 'path_' + axis.name + '_' + count, striplineGroup, chart, axis);
@@ -386,0 +410,0 @@ }

src/chart/model/chart-base-model.d.ts

@@ -379,2 +379,9 @@ import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { ZIndex, Anchor, BorderType, SizeType } from '../utils/enum';import { Theme } from '../../common/model/theme';import { Font, Border } from '../../common/model/base';import { BorderModel, FontModel } from '../../common/model/base-model';import { Units, Alignment, Regions, Position, TextOverflow } from '../../common/utils/enum';
 
+    /**
+     * The URL of the background image for the strip line.
+     *
+     * @default ''
+     */
+    imageUrl?: string;
+
 }
@@ -381,0 +388,0 @@

src/chart/model/chart-base.d.ts

@@ -327,2 +327,8 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     opacity: number;
+    /**
+     * The URL of the background image for the strip line.
+     *
+     * @default ''
+     */
+    imageUrl: string;
 }
@@ -329,0 +335,0 @@ /**

src/chart/model/chart-base.js

@@ -190,2 +190,5 @@ var __extends = (this && this.__extends) || (function () {
     ], StripLineSettings.prototype, "opacity", void 0);
+    __decorate([
+        Property('')
+    ], StripLineSettings.prototype, "imageUrl", void 0);
     return StripLineSettings;
@@ -192,0 +195,0 @@ }(ChildProperty));

src/chart/series/chart-series.js

@@ -988,66 +988,81 @@ var __extends = (this && this.__extends) || (function () {
         }
-        var stackingSeies = [];
-        var stackedValues = [];
+        var groupingValues = [];
         var visiblePoints = [];
-        for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {
-            var series = seriesCollection_1[_i];
-            if (series.type.indexOf('Stacking') !== -1 || (series.drawType.indexOf('Stacking') !== -1 &&
-                (series.chart.chartAreaType === 'PolarRadar'))) {
-                stackingGroup = (series.type.indexOf('StackingArea') !== -1) ? 'StackingArea100' :
-                    (series.type.indexOf('StackingLine') !== -1) ? 'StackingLine100' : series.stackingGroup;
-                if (!lastPositive[stackingGroup]) {
-                    lastPositive[stackingGroup] = [];
-                    lastNegative[stackingGroup] = [];
-                }
-                yValues = series.yData;
-                startValues = [];
-                endValues = [];
-                stackingSeies.push(series);
-                visiblePoints = getVisiblePoints(series);
-                for (var j = 0, pointsLength = visiblePoints.length; j < pointsLength; j++) {
-                    lastValue = 0;
-                    value = +yValues[j]; // Fix for chart not rendering while y value is given as string issue
-                    if (lastPositive[stackingGroup][visiblePoints[j].xValue] === undefined) {
-                        lastPositive[stackingGroup][visiblePoints[j].xValue] = 0;
+        for (var i = 0; i < seriesCollection.length; i++) {
+            var series = seriesCollection[i];
+            if (!groupingValues[series.stackingGroup]) {
+                groupingValues[series.stackingGroup] = [];
+                groupingValues[series.stackingGroup].push(series);
+            }
+            else if (groupingValues[series.stackingGroup] !== undefined) {
+                groupingValues[series.stackingGroup].push(series);
+            }
+        }
+        var keys = Object.keys(groupingValues);
+        for (var k = 0; k < keys.length; k++) {
+            var stackingSeies = [];
+            var stackedValues = [];
+            var seriesCollection_2 = groupingValues[keys[k]];
+            for (var _i = 0, seriesCollection_1 = seriesCollection_2; _i < seriesCollection_1.length; _i++) {
+                var series = seriesCollection_1[_i];
+                if (series.type.indexOf('Stacking') !== -1 || (series.drawType.indexOf('Stacking') !== -1 &&
+                    (series.chart.chartAreaType === 'PolarRadar'))) {
+                    stackingGroup = (series.type.indexOf('StackingArea') !== -1) ? 'StackingArea100' :
+                        (series.type.indexOf('StackingLine') !== -1) ? 'StackingLine100' : series.stackingGroup;
+                    if (!lastPositive[stackingGroup]) {
+                        lastPositive[stackingGroup] = [];
+                        lastNegative[stackingGroup] = [];
                     }
-                    if (lastNegative[stackingGroup][visiblePoints[j].xValue] === undefined) {
-                        lastNegative[stackingGroup][visiblePoints[j].xValue] = 0;
+                    yValues = series.yData;
+                    startValues = [];
+                    endValues = [];
+                    stackingSeies.push(series);
+                    visiblePoints = getVisiblePoints(series);
+                    for (var j = 0, pointsLength = visiblePoints.length; j < pointsLength; j++) {
+                        lastValue = 0;
+                        value = +yValues[j]; // Fix for chart not rendering while y value is given as string issue
+                        if (lastPositive[stackingGroup][visiblePoints[j].xValue] === undefined) {
+                            lastPositive[stackingGroup][visiblePoints[j].xValue] = 0;
+                        }
+                        if (lastNegative[stackingGroup][visiblePoints[j].xValue] === undefined) {
+                            lastNegative[stackingGroup][visiblePoints[j].xValue] = 0;
+                        }
+                        if (isStacking100) {
+                            value = value / frequencies[stackingGroup][visiblePoints[j].xValue] * 100;
+                            value = !isNaN(value) ? value : 0;
+                            visiblePoints[j].percentage = +(value.toFixed(2));
+                        }
+                        else {
+                            stackedValues[j] = stackedValues[j] ? stackedValues[j] + Math.abs(value) : Math.abs(value);
+                        }
+                        if (value >= 0) {
+                            lastValue = lastPositive[stackingGroup][visiblePoints[j].xValue];
+                            lastPositive[stackingGroup][visiblePoints[j].xValue] += value;
+                        }
+                        else {
+                            lastValue = lastNegative[stackingGroup][visiblePoints[j].xValue];
+                            lastNegative[stackingGroup][visiblePoints[j].xValue] += value;
+                        }
+                        startValues.push(lastValue);
+                        endValues.push(value + lastValue);
+                        if (isStacking100 && (endValues[j] > 100)) {
+                            endValues[j] = 100;
+                        }
                     }
-                    if (isStacking100) {
-                        value = value / frequencies[stackingGroup][visiblePoints[j].xValue] * 100;
-                        value = !isNaN(value) ? value : 0;
-                        visiblePoints[j].percentage = +(value.toFixed(2));
+                    series.stackedValues = new StackValues(startValues, endValues);
+                    var isLogAxis = series.yAxis.valueType === 'Logarithmic';
+                    var isColumnBarType = (series.type.indexOf('Column') !== -1 || series.type.indexOf('Bar') !== -1);
+                    series.yMin = isLogAxis && isColumnBarType && series.yMin < 1 ? series.yMin : Math.min.apply(0, startValues);
+                    series.yMax = Math.max.apply(0, endValues);
+                    if (series.yMin > Math.min.apply(0, endValues)) {
+                        series.yMin = (isStacking100) ? -100 :
+                            isLogAxis && isColumnBarType && series.yMin < 1 ? series.yMin : Math.min.apply(0, endValues);
                     }
-                    else {
-                        stackedValues[j] = stackedValues[j] ? stackedValues[j] + Math.abs(value) : Math.abs(value);
+                    if (series.yMax < Math.max.apply(0, startValues)) {
+                        series.yMax = 0;
                     }
-                    if (value >= 0) {
-                        lastValue = lastPositive[stackingGroup][visiblePoints[j].xValue];
-                        lastPositive[stackingGroup][visiblePoints[j].xValue] += value;
-                    }
-                    else {
-                        lastValue = lastNegative[stackingGroup][visiblePoints[j].xValue];
-                        lastNegative[stackingGroup][visiblePoints[j].xValue] += value;
-                    }
-                    startValues.push(lastValue);
-                    endValues.push(value + lastValue);
-                    if (isStacking100 && (endValues[j] > 100)) {
-                        endValues[j] = 100;
-                    }
                 }
-                series.stackedValues = new StackValues(startValues, endValues);
-                var isLogAxis = series.yAxis.valueType === 'Logarithmic';
-                var isColumnBarType = (series.type.indexOf('Column') !== -1 || series.type.indexOf('Bar') !== -1);
-                series.yMin = isLogAxis && isColumnBarType && series.yMin < 1 ? series.yMin : Math.min.apply(0, startValues);
-                series.yMax = Math.max.apply(0, endValues);
-                if (series.yMin > Math.min.apply(0, endValues)) {
-                    series.yMin = (isStacking100) ? -100 :
-                        isLogAxis && isColumnBarType && series.yMin < 1 ? series.yMin : Math.min.apply(0, endValues);
-                }
-                if (series.yMax < Math.max.apply(0, startValues)) {
-                    series.yMax = 0;
-                }
             }
+            this.findPercentageOfStacking(stackingSeies, stackedValues, isStacking100);
         }
-        this.findPercentageOfStacking(stackingSeies, stackedValues, isStacking100);
     };
@@ -1070,4 +1085,4 @@ Series.prototype.findPercentageOfStacking = function (stackingSeies, values, isStacking100) {
         var visiblePoints = [];
-        for (var _i = 0, seriesCollection_2 = seriesCollection; _i < seriesCollection_2.length; _i++) {
-            var series = seriesCollection_2[_i];
+        for (var _i = 0, seriesCollection_3 = seriesCollection; _i < seriesCollection_3.length; _i++) {
+            var series = seriesCollection_3[_i];
             series.yAxis.isStack100 = series.type.indexOf('100') !== -1 ? true : false;
@@ -1074,0 +1089,0 @@ visiblePoints = getVisiblePoints(series);

src/chart/series/column-base.js

@@ -37,3 +37,3 @@ /* eslint-disable @typescript-eslint/tslint/config */
         var pointSpacing = (series.columnWidth === null || isNaN(+series.columnWidth)) ? ((series.type === 'Histogram') ? 1 : 0.7) :
-            series.columnWidth; // Column width
+            Math.min(series.columnWidth, 1); // Column width
         var minimumPointDelta = getMinPointsDelta(series.xAxis, visibleSeries);
@@ -40,0 +40,0 @@ var width = minimumPointDelta * pointSpacing;

src/chart/user-interaction/tooltip.js

@@ -343,2 +343,5 @@ var __extends = (this && this.__extends) || (function () {
         var extraPoints = [];
+        var closestValue = Number.MAX_VALUE;
+        var pointValue;
+        var tempData;
         //let headerContent : string = '';
@@ -389,4 +392,9 @@ if (isFirst) {
                 argument.text.push(this.getTooltipText(data));
+                pointValue = (!chart.requireInvertedAxis) ? chart.mouseX - data.series.clipRect.x : chart.mouseY - data.series.clipRect.y;
+                if (data.point.symbolLocations.length && Math.abs(pointValue - data.point.symbolLocations[0].x) < closestValue) {
+                    closestValue = Math.abs(pointValue - data.point.symbolLocations[0].x);
+                    tempData = data;
+                }
                 if (showNearest) {
-                    lastData = (data.series.category === 'TrendLine' && chart.tooltip.shared) ? lastData : data;
+                    lastData = (data.series.category === 'TrendLine' && chart.tooltip.shared) ? lastData : tempData || data;
                 }
@@ -393,0 +401,0 @@ dataCollection.push(data);

No alert changes

Improved metrics

Total package byte prevSize

28140140

increased by0.12%

Lines of code

209052

increased by0.09%

Dependency changes

• Updated@syncfusion/ej2-calendars@~21.2.8

• Updated@syncfusion/ej2-data@~21.2.8

• Updated@syncfusion/ej2-navigations@~21.2.8

• Updated@syncfusion/ej2-pdf-export@~21.2.8