v19.1.67 is released

Author: pipeline

controls/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.1.66 (2021-06-01)
+## 19.1.67 (2021-06-08)
 
 ### Barcode
 

controls/base/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.1.66 (2021-06-01)
+## 19.1.67 (2021-06-08)
 
 ### Common
 

controls/calendars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-calendars",
-	"version": "19.1.64",
+	"version": "19.1.66",
 	"description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/CHANGELOG.md

@@ -2,10 +2,22 @@
 
 ## [Unreleased]
 
+## 19.1.67 (2021-06-08)
+
+### Chart
+
+#### Bug Fixes
+
+- `#F165670` - Marker Explode is now rendered properly with image.
+- `#328528` - Histogram is rendering properly when the `binInterval` value is 0.
+- `#328780` - `multiLevelLabelClick` event is now triggering in canvas mode.
+
 ## 19.1.65 (2021-05-25)
 
 ### Chart
 
+### Stock Chart
+
 #### Bug Fixes
 
 - `#F165171` - Tooltip for column in stock chart is working properly now.

controls/charts/spec/range-navigator/issue-fix/range-issue.spec.ts

@@ -59,5 +59,15 @@ describe('Range Navigator Issue fixes', () => {
             rangeControl.series = [{ dataSource: new DataManager(data), xName: 'x', yName: 'y' }];
             rangeControl.refresh();
         });
+        it('checking with background color', (done: Function) => {
+            rangeControl.loaded = (args: IRangeLoadedEventArgs) => {
+                rangeElement = document.getElementById('rangeContainer_ChartBorder');
+                expect(rangeElement.getAttribute("fill")).toEqual("red");
+                done();
+            };
+            rangeControl.background = 'red';
+            rangeControl.refresh();
+        });
+		
     });
 });

controls/charts/src/chart/axis/multi-level-labels.ts

@@ -11,7 +11,7 @@ import { Axis } from '../axis/axis';
 import { FontModel } from '../../common/model/base-model';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
 import { textWrap, appendClipElement, appendChildElement } from '../../common/utils/helper';
-import { valueToCoefficient, textTrim, textElement } from '../../common/utils/helper';
+import { valueToCoefficient, textTrim, textElement, withInBounds } from '../../common/utils/helper';
 import { Size, measureText, TextOption, PathOption, Rect, SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { MultiLevelLabels, MultiLevelCategories } from '../model/chart-base';
 import { IAxisMultiLabelRenderEventArgs, IMultiLevelLabelClickEventArgs } from '../../chart/model/chart-interface';
@@ -38,6 +38,10 @@ export class MultiLevelLabel {
     public multiElements: Element;
     /** @private */
     public labelElement: Element;
+    /** @private */
+    public multiLevelLabelRectXRegion: Rect[] = [];
+    /** @private */
+    public xLabelCollection: TextOption[] = [];
     /**
      * Constructor for the logerithmic module.
      *
@@ -170,6 +174,11 @@ export class MultiLevelLabel {
                         this.chart.renderer, options, argsData.textStyle, argsData.textStyle.color || this.chart.themeStyle.axisLabel,
                         this.labelElement, false, this.chart.redraw, true, null, null, null, null, null, this.chart.enableCanvas
                     );
+                    if (this.chart.enableCanvas) {
+                        let textSize: Size = measureText(argsData.text, argsData.textStyle);
+                        this.multiLevelLabelRectXRegion.push(new Rect(options.x, options.y, textSize.width, textSize.height));
+                        this.xLabelCollection.push(options);
+                    }
                     if (multiLevel.border.width > 0 && multiLevel.border.type !== 'WithoutBorder') {
                         pathRect = this.renderXAxisLabelBorder(
                             level, endX - startX - padding, axis, startX, startY, labelSize, options, axisRect, argsData.alignment,
@@ -511,11 +520,20 @@ export class MultiLevelLabel {
      * @private
      */
     public click(event: Event): void {
-        const targetId: string = (<HTMLElement>event.target).id;
+        let targetId: string = (<HTMLElement>event.target).id;
         const multiLevelID: string = '_Axis_MultiLevelLabel_Level_';
         let textId: string;
         let elementId: string;
         let axisIndex: number;
+        if (this.chart.enableCanvas) {
+            for (let i: number = 0; i < this.multiLevelLabelRectXRegion.length; i++) {
+                if (withInBounds(
+                    event['x'], event['y'], this.multiLevelLabelRectXRegion[i],
+                    this.multiLevelLabelRectXRegion[i].width, this.multiLevelLabelRectXRegion[i].height)) {
+                        targetId = this.xLabelCollection[i].id;
+                    }
+            }
+        }
         if (targetId.indexOf(multiLevelID) > -1) {
             textId = targetId.split(multiLevelID)[1];
             elementId = targetId.split(multiLevelID)[0];

controls/charts/src/chart/series/histogram-series.ts

@@ -41,7 +41,7 @@ export class HistogramSeries extends ColumnSeries {
         series.histogramValues.mean = mean;
         series.histogramValues.sDValue = Math.round(Math.sqrt(sumValue / yValues.length - 1));
         series.histogramValues.binWidth = series.binInterval ||
-            Math.round((3.5 * series.histogramValues.sDValue) / Math.pow(yValues.length, 1 / 3));
+            Math.round((3.5 * series.histogramValues.sDValue) / Math.pow(yValues.length, 1 / 3)) || 1;
     }
     /**
      * Add data points for Histogram series.

controls/charts/src/chart/series/marker-explode.ts

@@ -192,7 +192,7 @@ export class MarkerExplode extends ChartData {
                 i ? borderColor : markerShadow,
                 (marker.opacity || seriesMarker.opacity), null, null
             );
-            const symbol: Element = drawSymbol(location, shape, size, seriesMarker.imageUrl, options, '',
+            const symbol: Element = drawSymbol(location, shape, size, marker.imageUrl, options, '',
                                                this.chart.svgRenderer, series.clipRect);
             // incident: 252450 point click selection not working while maker explode
             //symbol.setAttribute('style', 'pointer-events:none');

controls/charts/src/chart/series/marker.ts

@@ -121,6 +121,7 @@ export class Marker extends MarkerExplode {
             const markerHeight: number = argsData.point.marker.height || argsData.height;
             const markerOpacity: number = argsData.point.marker.opacity || marker.opacity;
             const markerShape: ChartShape = argsData.point.marker.shape || argsData.shape;
+            const imageURL : string = argsData.point.marker.imageUrl || marker.imageUrl;
             shapeOption = new PathOption(
                 symbolId, markerFill, markerBorder.width, markerBorder.color, markerOpacity, null
             );
@@ -136,7 +137,7 @@ export class Marker extends MarkerExplode {
                 markerElement = drawSymbol(
                     location, markerShape,
                     new Size(markerWidth, markerHeight),
-                    marker.imageUrl, shapeOption,
+                    imageURL, shapeOption,
                     point.x.toString() + ':' + y.toString(), this.chart.renderer, series.clipRect
                 );
                 appendChildElement(
@@ -146,7 +147,7 @@ export class Marker extends MarkerExplode {
             }
             point.marker = {
                 border: markerBorder, fill: markerFill, height: markerHeight,
-                visible: true, shape: markerShape, width: markerWidth
+                visible: true, shape: markerShape, width: markerWidth, imageUrl: imageURL
             };
         } else {
             location = null;

controls/charts/src/chart/utils/get-data.ts

@@ -210,7 +210,7 @@ export class ChartData {
     public getClosest(series: Series, value: number, xvalues?: number[]): number {
         let closest: number; let data: number;
         const xData: number[] = xvalues ? xvalues : series.xData;
-        if (value >= <number>series.xAxis.visibleRange.min && value <= <number>series.xAxis.visibleRange.max) {
+        if (value >= <number>series.xMin - 0.5 && value <= <number>series.xMax + 0.5) {
             for (let i: number = 0; i < xData.length; i++) {
                 data = xData[i];
                 if (closest == null || Math.abs(data - value) < Math.abs(closest - value)) {

controls/charts/src/range-navigator/range-navigator-model.d.ts

@@ -232,6 +232,13 @@ export interface RangeNavigatorModel extends ComponentModel{
      */
     value?: number[] | Date[];
 
+    /**
+     * The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
+     *
+     * @default null
+     */
+    background?: string;
+
     /**
      * Used to format the axis label that accepts any global string format like 'C', 'n1', 'P' etc.
      * It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.

controls/charts/src/range-navigator/range-navigator.ts

@@ -348,6 +348,14 @@ export class RangeNavigator extends Component<HTMLElement> {
     @Property([])
     public value: number[] | Date[];
 
+    /**
+     * The background color of the chart that accepts value in hex and rgba as a valid CSS color string.
+     *
+     * @default null
+     */
+    @Property(null)
+    public background: string;
+
     /**
      * Used to format the axis label that accepts any global string format like 'C', 'n1', 'P' etc.
      * It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.
@@ -808,7 +816,10 @@ export class RangeNavigator extends Component<HTMLElement> {
                 arg.currentSize = this.availableSize;
                 this.trigger('resized', arg);
                 this.calculateBounds();
-                this.chartSeries.renderChart(this);
+                this.chartSeries.processXAxis(this);
+                this.chartSeries.calculateGroupingBounds(this);
+                this.chartSeries.processYAxis(this);
+                this.renderChart();
             },
             500);
         return false;
@@ -891,7 +902,7 @@ export class RangeNavigator extends Component<HTMLElement> {
      */
     private renderChartBackground(): void {
         const rect: RectOption = new RectOption(
-            this.element.id + '_ChartBorder', this.themeStyle.background, { width: 0, color: 'transparent' }, 1,
+            this.element.id + '_ChartBorder', this.background || this.themeStyle.background, { width: 0, color: 'transparent' }, 1,
             new Rect(0, 0, this.availableSize.width, this.availableSize.height));
         this.svgObject.appendChild(this.renderer.drawRectangle(rect) as HTMLElement);
     }
@@ -989,6 +1000,7 @@ export class RangeNavigator extends Component<HTMLElement> {
             case 'skeleton':
             case 'skeletonType':
             case 'secondaryLabelAlignment':
+            case "background":
                 renderer = true;
                 break;
             case 'dataSource':

controls/charts/src/range-navigator/renderer/chart-render.ts

@@ -120,7 +120,12 @@ export class RangeSeries extends NiceInterval {
             i++;
         }
     }
-    private processXAxis(control: RangeNavigator): void {
+    /**
+     * Process x axis for range navigator.
+     * 
+     * @private
+     */
+    public processXAxis(control: RangeNavigator): void {
         const axis: AxisModel = {
             minimum: control.minimum, maximum: control.maximum,
             interval: control.interval, valueType: control.valueType,
@@ -152,8 +157,9 @@ export class RangeSeries extends NiceInterval {
      * Process yAxis for range navigator
      *
      * @param {RangeNavigator} control RangeNavigator instance
+     * @private
      */
-    private processYAxis(control: RangeNavigator): void {
+    public processYAxis(control: RangeNavigator): void {
         const axis: AxisModel = {
             majorGridLines: { width: 0 }, rangePadding: 'None',
             majorTickLines: { width: 0 }, labelStyle: { size: '0' },
@@ -247,7 +253,12 @@ export class RangeSeries extends NiceInterval {
         series.seriesElement.appendChild(series.clipRectElement);
     }
 
-    private calculateGroupingBounds(control: RangeNavigator): void {
+    /**
+     * Calculate grouping bounds for x axis.
+     * 
+     * @private
+     */
+    public calculateGroupingBounds(control: RangeNavigator): void {
         const padding: number = control.margin.bottom;
         const labelHeight: number = measureText('string', control.labelStyle).height;
         this.calculateDateTimeNiceInterval(this.xAxis, new Size(control.bounds.width, control.bounds.height), this.xMin, this.xMax, false);

controls/circulargauge/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ## [Unreleased]
 
-## 19.1.66 (2021-06-01)
+## 19.1.67 (2021-06-08)
 
 ### CircularGauge
 

controls/compression/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.1.66 (2021-06-01)
+## 19.1.67 (2021-06-08)
 
 ### Compression
 

controls/data/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.1.66 (2021-06-01)
+## 19.1.67 (2021-06-08)
 
 ### DataManager
 

controls/diagrams/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## [Unreleased]
 
+## 19.1.67 (2021-06-08)
+
+### Diagram
+
+#### Bug Fixes
+
+- `#I327457` - The issue with node gradient is not applied while continuously performing the undo and redo functionality issue has been fixed.
+- `#330528` - The issue "Connector horizontal Alignment is not rendered properly at initial rendering" has been fixed.
+
 ## 19.1.66 (2021-06-01)
 
 ### Diagram

controls/diagrams/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-diagrams",
-	"version": "19.1.65",
+	"version": "19.1.66",
 	"description": "Feature-rich diagram control to create diagrams like flow charts, organizational charts, mind maps, and BPMN diagrams. Its rich feature set includes built-in shapes, editing, serializing, exporting, printing, overview, data binding, and automatic layouts.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/diagrams/spec/diagram/annotation/annotation-interaction.spec.ts

@@ -1650,4 +1650,55 @@ describe('Diagram Control', () => {
             done();
         });
     });
+});
+describe('Check annotation horizontalAlignment value ', () => {
+    let diagram: Diagram;
+    let ele: HTMLElement;
+    let savedata: string;
+
+    beforeAll((): void => {
+        const isDef = (o: any) => o !== undefined && o !== null;
+        if (!isDef(window.performance)) {
+            console.log("Unsupported environment, window.performance.memory is unavailable");
+            this.skip(); //Skips test (in Chai)
+            return;
+        }
+        ele = createElement('div', { id: 'CheckhorizontalAlignment' });
+        document.body.appendChild(ele);
+
+        let connector: ConnectorModel = {};
+        connector.id = "connector1";
+        connector.sourcePoint = { x: 350, y: 300 };
+        connector.targetPoint = { x: 550, y: 300 };
+        connector.annotations = [{ id: "con1", content: "connector", annotationType: "String", constraints: 4, visibility: true, rotateAngle: 0, horizontalAlignment: "Left", verticalAlignment: "Center", margin: { left: 0, right: 0, bottom: 0, top: 0 }, style: { strokeWidth: 0, strokeColor: "transparent", fill: "transparent", strokeDashArray: "", opacity: 1, gradient: { type: "None" }, fontSize: 12, fontFamily: "Arial", textOverflow: "Wrap", textDecoration: "None", whiteSpace: "CollapseSpace", textWrapping: "WrapWithOverflow", textAlign: "Center", color: "black", italic: false, bold: false }, offset: 0.5, alignment: "Center", segmentAngle: false }];
+
+        diagram = new Diagram({
+            width: 1000, height: 1000, connectors: [connector]
+        });
+        diagram.appendTo('#CheckhorizontalAlignment');
+    });
+
+    afterAll((): void => {
+        diagram.destroy();
+        ele.remove();
+    });
+    it('Checking connector with annotation horizontalAlignment at initial rendering', (done: Function) => {
+        expect(diagram.connectors[0].annotations[0].horizontalAlignment).toEqual('Left');
+        let diagramEle = (document.getElementById('CheckhorizontalAlignment') as any).ej2_instances[0];
+        let txtElement: Element = document.getElementById('connector1_con1');
+        expect((txtElement as any).x.animVal.value).toEqual(450.5);
+        expect((txtElement as any).y.animVal.value).toEqual(293.29998779296875);
+        done();
+    });
+    it('Checking connector annotation horizontalAlignment by save and load', (done: Function) => {
+        savedata = diagram.saveDiagram();
+        diagram.clear();
+        diagram.loadDiagram(savedata);
+        expect(diagram.connectors[0].annotations[0].horizontalAlignment).toEqual('Left');
+        let diagramEle = (document.getElementById('CheckhorizontalAlignment') as any).ej2_instances[0];
+        let txtElement: Element = document.getElementById('connector1_con1');
+        expect((txtElement as any).x.animVal.value).toEqual(450.5);
+        expect((txtElement as any).y.animVal.value).toEqual(293.29998779296875);
+        done();
+    });
 });