v19.2.55 is released

Author: pipeline

controls/base/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.2.51 (2021-08-03)
+## 19.2.55 (2021-08-11)
 
 ### Common
 

controls/buttons/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 19.2.51 (2021-08-03)
+## 19.2.55 (2021-08-11)
 
 ### Checkbox
 

controls/charts/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 19.2.55 (2021-08-11)
+
+### Chart
+
+#### New Features
+
+- `#335166` - Provide Fade out support for chart tooltip on touch.
+
 ## 19.2.51 (2021-08-03)
 
 ### Chart

controls/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "19.2.49",
+	"version": "19.2.51",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/spec/chart/user-interaction/crosshair.spec.ts

@@ -6,6 +6,7 @@ import { Chart } from '../../../src/chart/chart';
 import { ChartSeriesType, ChartRangePadding, ValueType, LabelPlacement, } from '../../../src/chart/utils/enum';
 import { LineSeries } from '../../../src/chart/series/line-series';
 import { ColumnSeries } from '../../../src/chart/series/column-series';
+import { AreaSeries } from '../../../src/chart/series/area-series';
 import { Crosshair } from '../../../src/chart/user-interaction/crosshair';
 import { Tooltip } from '../../../src/chart/user-interaction/tooltip';
 
@@ -20,7 +21,7 @@ import { EmitType } from '@syncfusion/ej2-base';
 import  {profile , inMB, getMemoryProfile} from '../../common.spec';
 import { ILoadedEventArgs,  } from '../../../src/chart/model/chart-interface';
 Chart.Inject(LineSeries, ColumnSeries, DateTime, Category, Tooltip, DataEditing);
-Chart.Inject(Crosshair);
+Chart.Inject(Crosshair, AreaSeries);
 
 
 describe('Chart Crosshair', () => {
@@ -578,6 +579,115 @@ describe('Chart Crosshair', () => {
             chartObj.refresh();
         });
     });
+
+    describe('Crosshair customization', () => {
+        let chartObj: Chart; let x: number; let y: number;
+        let loaded: EmitType<ILoadedEventArgs>;
+        let trigger: MouseEvents = new MouseEvents();
+        let elem: HTMLElement = createElement('div', { id: 'crosshairContainer' }); 
+        let series1: Object[] = [];
+        let point1: Object;
+        let value: number = 80;
+        let i: number;
+        for (i = 1; i < 500; i++) {
+            if (Math.random() > .5) {
+                value += Math.random();
+            } else {
+                value -= Math.random();
+            }
+            point1 = { x: new Date(1910, i + 2, i), y: value.toFixed(1) };
+            series1.push(point1);
+        }
+        beforeAll(() => {
+            document.body.appendChild(elem);
+            chartObj = new Chart(
+                {
+                    //Initializing Primary X Axis
+                    primaryXAxis: {
+                        majorGridLines: { width: 0 },
+                        valueType: 'DateTime',
+                        crosshairTooltip: { enable: true },
+                    },
+                    primaryYAxis:
+                    {
+                        minimum: 83, maximum: 95, interval: 1,
+                        title: 'Millions in USD',
+                        labelFormat: '{value}M',
+                        rowIndex: 0,
+                        crosshairTooltip: {
+                            enable: true
+                        }
+                    },
+
+                    //Initializing Chart Series
+                    series: [
+                        {
+                            type: 'Area',
+                            dataSource: series1,
+                            name: 'Product X',
+                            xName: 'x',
+                            yName: 'y',
+                            border: { width: 0.5, color: 'black' },
+                        },
+                    ],
+                    //Initializing Zooming
+
+                    //Initializing Chart title
+                    title: 'Sales History of Product X',
+                    crosshair: { enable: true },
+                });
+            chartObj.appendTo('#crosshairContainer');
+
+        });
+        afterAll((): void => {
+            chartObj.destroy();
+            elem.remove();
+        });
+
+        it('X axis crosshair opacity checking', (done: Function) => {
+            loaded = (args: Object): void => {
+                let chartArea: HTMLElement = document.getElementById('crosshairContainer_ChartAreaBorder');
+                y = parseFloat(chartArea.getAttribute('y')) + parseFloat(chartArea.getAttribute('height')) / 4 + elem.offsetTop;
+                x = parseFloat(chartArea.getAttribute('x')) + parseFloat(chartArea.getAttribute('width')) / 4 + elem.offsetLeft;
+                trigger.mousemovetEvent(chartArea, Math.ceil(x), Math.ceil(y));
+                let crosshair: Element = <Element>document.getElementById('crosshairContainer_svg').lastChild;
+                let element1: HTMLElement;
+                let element2: HTMLElement;
+                expect(crosshair.childNodes.length == 3 || crosshair.childNodes.length == 2).toBe(true);
+                element1 = <HTMLElement>crosshair.childNodes[0];
+                expect(element1.getAttribute('opacity') == '0.5' || element1.getAttribute('opacity') == '1').toBe(true);
+                element2 = <HTMLElement>crosshair.childNodes[1];
+                expect(element2.getAttribute('opacity') == '0.5' || element2.getAttribute('opacity') == null).toBe(true);
+                done();
+            };
+            chartObj.crosshair.opacity = 0.5;
+            chartObj.loaded = loaded;
+            chartObj.refresh();
+        });
+
+        it('Customizing crosshair color', (done: Function) => {
+            loaded = (args: Object): void => {
+                let chartArea: HTMLElement = document.getElementById('crosshairContainer_ChartAreaBorder');
+                y = parseFloat(chartArea.getAttribute('y')) + parseFloat(chartArea.getAttribute('height')) / 4 + elem.offsetTop;
+                x = parseFloat(chartArea.getAttribute('x')) + parseFloat(chartArea.getAttribute('width')) / 4 + elem.offsetLeft;
+                trigger.mousemovetEvent(chartArea, Math.ceil(x), Math.ceil(y));
+                let crosshair: Element = <Element>document.getElementById('crosshairContainer_svg').lastChild;
+                let element1: HTMLElement;
+                let element2: HTMLElement;
+                expect(crosshair.childNodes.length == 3 || crosshair.childNodes.length == 2).toBe(true);
+                element1 = <HTMLElement>crosshair.childNodes[0];
+                element2 = <HTMLElement>crosshair.childNodes[1];
+                expect(element1.getAttribute('fill') == 'red' || element1.getAttribute('fill') == 'transparent' ).toBe(true);
+                expect(element2.getAttribute('fill') == 'green' || element2.getAttribute('fill') == null ).toBe(true); 
+                done();
+            };
+            chartObj.crosshair.horizontalColor= 'red';
+            chartObj.crosshair.verticalColor = 'green'; 
+            chartObj.loaded = loaded;
+            chartObj.refresh();
+        });
+    });
+
     it('memory leak', () => {
         profile.sample();
         let average: any = inMB(profile.averageChange)

controls/charts/src/chart/chart-model.d.ts

@@ -63,6 +63,24 @@ export interface CrosshairSettingsModel {
      */
     lineType?: LineType;
 
+    /**
+     * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
+     */
+    verticalColor?: string;
+
+    /**
+     * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
+     */
+    horizontalColor?: string;
+
+    /**
+     * The opacity for background.
+     * @default 1
+     */
+    opacity?: number;
+
 }
 
 /**

controls/charts/src/chart/chart.ts

@@ -174,6 +174,26 @@ export class CrosshairSettings extends ChildProperty<CrosshairSettings> {
     @Property('Both')
     public lineType: LineType;
 
+    /**
+     * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
+     */
+    @Property('')
+    public verticalColor: string;
+      
+    /**
+     * The color of the border that accepts value in hex and rgba as a valid CSS color string.
+     * @default ''
+     */
+    @Property('')
+    public horizontalColor: string;
+    
+    /**
+     * The opacity for background.
+     * @default 1
+     */
+     @Property(1)
+     public opacity: number;
 }
 /**
  * Configures the zooming behavior for the chart.

controls/charts/src/chart/user-interaction/crosshair.ts

@@ -159,11 +159,18 @@ export class Crosshair {
             }
             options = new PathOption(
                 this.elementID + '_HorizontalLine', 'none', crosshair.line.width,
-                crosshair.line.color || chart.themeStyle.crosshairLine, 1, crosshair.dashArray, horizontalCross
+                crosshair.horizontalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, horizontalCross
             );
             this.drawCrosshairLine(options, cross, chartRect.x, this.valueY, chartRect.width, 0, horizontalCross);
-            options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
-            this.drawCrosshairLine(options, cross, this.valueX, chartRect.y, 0, chartRect.height, verticalCross);
+            /**
+             * due to not working for vertical line side I added new option
+             * options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
+             */
+            options = new PathOption(
+                this.elementID + '_VerticalLine', 'none', crosshair.line.width,
+                crosshair.verticalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, verticalCross
+            );
+            this.drawCrosshairLine(options, cross, this.valueX, chartRect.y, 0, chartRect.height, verticalCross);   
             this.renderAxisTooltip(chart, chartRect, <Element>axisTooltipGroup);
             crosshairsvg.appendChild(axisTooltipGroup);
             if (!chart.tooltip.enable) {
@@ -174,10 +181,13 @@ export class Crosshair {
                 axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
                 options = new PathOption(
                     this.elementID + '_HorizontalLine', 'none', crosshair.line.width,
-                    crosshair.line.color || chart.themeStyle.crosshairLine, 1, crosshair.dashArray, horizontalCross
+                    crosshair.horizontalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, horizontalCross
                 );
                 this.renderCrosshairLine(options, crossGroup);
-                options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
+                options = new PathOption(
+                    this.elementID + '_VerticalLine', 'none', crosshair.line.width,
+                    crosshair.verticalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, verticalCross
+                );
                 this.renderCrosshairLine(options, crossGroup);
                 crossGroup.appendChild(axisTooltipGroup);
                 this.renderAxisTooltip(chart, chartRect, <Element>crossGroup.lastChild);
@@ -210,7 +220,8 @@ export class Crosshair {
                 'width:' + width + 'px;' +
                 'height:' + height + 'px;' +
                 'fill:' + options.stroke + ';' +
-                'border: 0.5px solid black;' +
+                'border: 0.5px solid ' + options.stroke + ';' +
+                'opacity: ' + options.opacity + ' ; ' +
                 'position: absolute';
             const crosshairline: HTMLElement = document.getElementById(options.id);
             const crosshairtooltip: HTMLElement = document.getElementById(this.elementID + '_crosshair_axis');

controls/charts/src/chart/user-interaction/tooltip.ts

@@ -45,15 +45,21 @@ export class Tooltip extends BaseTooltip {
 
     private mouseUpHandler(): void {
         const chart: Chart = this.control as Chart;
+        let data: PointData = this.getData();
+        data.lierIndex = this.lierIndex;
         if (chart.isTouch && !this.isSelected(chart) &&
             ((withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect) && chart.tooltip.shared)
              || !chart.tooltip.shared)) {
             if (!chart.crosshair.enable) {
                 this.tooltip();
-                this.removeTooltip(2000);
-            } else if (chart.startMove) {
+                if (chart.tooltip.fadeOutMode === 'Move') {
+                    this.removeTooltip(2000);
+                }
+            } else if (chart.startMove && chart.tooltip.fadeOutMode === 'Move') {
                 this.removeTooltip(2000);
             }
+        } else if (!this.findData(data, this.previousPoints[0] as PointData) && chart.tooltip.fadeOutMode === 'Click') {
+            this.removeTooltip(0);
         }
     }
 
@@ -73,7 +79,7 @@ export class Tooltip extends BaseTooltip {
                     this.tooltip();
                 }
             } else {
-                if (chart.tooltip.shared) {
+                if (chart.tooltip.shared && chart.tooltip.fadeOutMode === 'Move') {
                     this.removeTooltip(this.chart.tooltip.fadeOutDuration);
                 }
             }
@@ -154,7 +160,7 @@ export class Tooltip extends BaseTooltip {
                 this.triggerTooltipRender(data, isFirst, this.getTooltipText(data), this.findHeader(data));
             }
         } else {
-            if (!data.point && this.isRemove) {
+            if (!data.point && this.isRemove && chart.tooltip.fadeOutMode === 'Move') {
                 this.removeTooltip(this.chart.tooltip.fadeOutDuration);
                 this.isRemove = false;
             } else {

controls/charts/src/chart/utils/enum.ts

@@ -681,6 +681,17 @@ export type EmptyPointMode =
     /** Used to display empty points as previous and next point average  */
     'Average';
 
+/**
+ * Defines the tooltip fade out mode of the chart.
+ * * Click - Used to remove the tooltip on click.
+ * * Move - Used to remove the tooltip with some delay.
+ */
+export type FadeOutMode =
+    /** Used to remove the tooltip on click  */
+    'Click' |
+    /** Used to remove the tooltip with some delay  */
+    'Move';
+
 /**
  * Defines the type of technical indicators. They are
  * * Sma - Predicts the trend using Simple Moving Average approach