Skip to content

Commit 703b794

Browse files
author
pipeline
committed
v19.2.55 is released
1 parent 72bba3f commit 703b794

File tree

253 files changed

+60237
-4815
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

253 files changed

+60237
-4815
lines changed

‎controls/base/CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## [Unreleased]
44

5-
## 19.2.51 (2021-08-03)
5+
## 19.2.55 (2021-08-11)
66

77
### Common
88

‎controls/buttons/CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## [Unreleased]
44

5-
## 19.2.51 (2021-08-03)
5+
## 19.2.55 (2021-08-11)
66

77
### Checkbox
88

‎controls/charts/CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
## [Unreleased]
44

5+
## 19.2.55 (2021-08-11)
6+
7+
### Chart
8+
9+
#### New Features
10+
11+
- `#335166` - Provide Fade out support for chart tooltip on touch.
12+
513
## 19.2.51 (2021-08-03)
614

715
### Chart

‎controls/charts/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-charts",
3-
"version": "19.2.49",
3+
"version": "19.2.51",
44
"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",

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

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Chart } from '../../../src/chart/chart';
66
import { ChartSeriesType, ChartRangePadding, ValueType, LabelPlacement, } from '../../../src/chart/utils/enum';
77
import { LineSeries } from '../../../src/chart/series/line-series';
88
import { ColumnSeries } from '../../../src/chart/series/column-series';
9+
import { AreaSeries } from '../../../src/chart/series/area-series';
910
import { Crosshair } from '../../../src/chart/user-interaction/crosshair';
1011
import { Tooltip } from '../../../src/chart/user-interaction/tooltip';
1112

@@ -20,7 +21,7 @@ import { EmitType } from '@syncfusion/ej2-base';
2021
import {profile , inMB, getMemoryProfile} from '../../common.spec';
2122
import { ILoadedEventArgs, } from '../../../src/chart/model/chart-interface';
2223
Chart.Inject(LineSeries, ColumnSeries, DateTime, Category, Tooltip, DataEditing);
23-
Chart.Inject(Crosshair);
24+
Chart.Inject(Crosshair, AreaSeries);
2425

2526

2627
describe('Chart Crosshair', () => {
@@ -578,6 +579,115 @@ describe('Chart Crosshair', () => {
578579
chartObj.refresh();
579580
});
580581
});
582+
583+
describe('Crosshair customization', () => {
584+
let chartObj: Chart; let x: number; let y: number;
585+
let loaded: EmitType<ILoadedEventArgs>;
586+
let trigger: MouseEvents = new MouseEvents();
587+
let elem: HTMLElement = createElement('div', { id: 'crosshairContainer' });
588+
let series1: Object[] = [];
589+
let point1: Object;
590+
let value: number = 80;
591+
let i: number;
592+
for (i = 1; i < 500; i++) {
593+
if (Math.random() > .5) {
594+
value += Math.random();
595+
} else {
596+
value -= Math.random();
597+
}
598+
point1 = { x: new Date(1910, i + 2, i), y: value.toFixed(1) };
599+
series1.push(point1);
600+
}
601+
beforeAll(() => {
602+
document.body.appendChild(elem);
603+
chartObj = new Chart(
604+
{
605+
//Initializing Primary X Axis
606+
primaryXAxis: {
607+
majorGridLines: { width: 0 },
608+
valueType: 'DateTime',
609+
crosshairTooltip: { enable: true },
610+
},
611+
primaryYAxis:
612+
{
613+
minimum: 83, maximum: 95, interval: 1,
614+
title: 'Millions in USD',
615+
labelFormat: '{value}M',
616+
rowIndex: 0,
617+
crosshairTooltip: {
618+
enable: true
619+
}
620+
},
621+
622+
//Initializing Chart Series
623+
series: [
624+
{
625+
type: 'Area',
626+
dataSource: series1,
627+
name: 'Product X',
628+
xName: 'x',
629+
yName: 'y',
630+
border: { width: 0.5, color: 'black' },
631+
},
632+
],
633+
//Initializing Zooming
634+
635+
//Initializing Chart title
636+
title: 'Sales History of Product X',
637+
crosshair: { enable: true },
638+
});
639+
chartObj.appendTo('#crosshairContainer');
640+
641+
});
642+
afterAll((): void => {
643+
chartObj.destroy();
644+
elem.remove();
645+
});
646+
647+
it('X axis crosshair opacity checking', (done: Function) => {
648+
loaded = (args: Object): void => {
649+
let chartArea: HTMLElement = document.getElementById('crosshairContainer_ChartAreaBorder');
650+
y = parseFloat(chartArea.getAttribute('y')) + parseFloat(chartArea.getAttribute('height')) / 4 + elem.offsetTop;
651+
x = parseFloat(chartArea.getAttribute('x')) + parseFloat(chartArea.getAttribute('width')) / 4 + elem.offsetLeft;
652+
trigger.mousemovetEvent(chartArea, Math.ceil(x), Math.ceil(y));
653+
let crosshair: Element = <Element>document.getElementById('crosshairContainer_svg').lastChild;
654+
let element1: HTMLElement;
655+
let element2: HTMLElement;
656+
expect(crosshair.childNodes.length == 3 || crosshair.childNodes.length == 2).toBe(true);
657+
element1 = <HTMLElement>crosshair.childNodes[0];
658+
expect(element1.getAttribute('opacity') == '0.5' || element1.getAttribute('opacity') == '1').toBe(true);
659+
element2 = <HTMLElement>crosshair.childNodes[1];
660+
expect(element2.getAttribute('opacity') == '0.5' || element2.getAttribute('opacity') == null).toBe(true);
661+
done();
662+
};
663+
chartObj.crosshair.opacity = 0.5;
664+
chartObj.loaded = loaded;
665+
chartObj.refresh();
666+
});
667+
668+
it('Customizing crosshair color', (done: Function) => {
669+
loaded = (args: Object): void => {
670+
let chartArea: HTMLElement = document.getElementById('crosshairContainer_ChartAreaBorder');
671+
y = parseFloat(chartArea.getAttribute('y')) + parseFloat(chartArea.getAttribute('height')) / 4 + elem.offsetTop;
672+
x = parseFloat(chartArea.getAttribute('x')) + parseFloat(chartArea.getAttribute('width')) / 4 + elem.offsetLeft;
673+
trigger.mousemovetEvent(chartArea, Math.ceil(x), Math.ceil(y));
674+
let crosshair: Element = <Element>document.getElementById('crosshairContainer_svg').lastChild;
675+
let element1: HTMLElement;
676+
let element2: HTMLElement;
677+
expect(crosshair.childNodes.length == 3 || crosshair.childNodes.length == 2).toBe(true);
678+
element1 = <HTMLElement>crosshair.childNodes[0];
679+
element2 = <HTMLElement>crosshair.childNodes[1];
680+
expect(element1.getAttribute('fill') == 'red' || element1.getAttribute('fill') == 'transparent' ).toBe(true);
681+
expect(element2.getAttribute('fill') == 'green' || element2.getAttribute('fill') == null ).toBe(true);
682+
done();
683+
};
684+
chartObj.crosshair.horizontalColor= 'red';
685+
chartObj.crosshair.verticalColor = 'green';
686+
chartObj.loaded = loaded;
687+
chartObj.refresh();
688+
});
689+
});
690+
581691
it('memory leak', () => {
582692
profile.sample();
583693
let average: any = inMB(profile.averageChange)

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,24 @@ export interface CrosshairSettingsModel {
6363
*/
6464
lineType?: LineType;
6565

66+
/**
67+
* The color of the border that accepts value in hex and rgba as a valid CSS color string.
68+
* @default ''
69+
*/
70+
verticalColor?: string;
71+
72+
/**
73+
* The color of the border that accepts value in hex and rgba as a valid CSS color string.
74+
* @default ''
75+
*/
76+
horizontalColor?: string;
77+
78+
/**
79+
* The opacity for background.
80+
* @default 1
81+
*/
82+
opacity?: number;
83+
6684
}
6785

6886
/**

‎controls/charts/src/chart/chart.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,26 @@ export class CrosshairSettings extends ChildProperty<CrosshairSettings> {
174174
@Property('Both')
175175
public lineType: LineType;
176176

177+
/**
178+
* The color of the border that accepts value in hex and rgba as a valid CSS color string.
179+
* @default ''
180+
*/
181+
@Property('')
182+
public verticalColor: string;
183+
184+
/**
185+
* The color of the border that accepts value in hex and rgba as a valid CSS color string.
186+
* @default ''
187+
*/
188+
@Property('')
189+
public horizontalColor: string;
190+
191+
/**
192+
* The opacity for background.
193+
* @default 1
194+
*/
195+
@Property(1)
196+
public opacity: number;
177197
}
178198
/**
179199
* Configures the zooming behavior for the chart.

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,18 @@ export class Crosshair {
159159
}
160160
options = new PathOption(
161161
this.elementID + '_HorizontalLine', 'none', crosshair.line.width,
162-
crosshair.line.color || chart.themeStyle.crosshairLine, 1, crosshair.dashArray, horizontalCross
162+
crosshair.horizontalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, horizontalCross
163163
);
164164
this.drawCrosshairLine(options, cross, chartRect.x, this.valueY, chartRect.width, 0, horizontalCross);
165-
options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
166-
this.drawCrosshairLine(options, cross, this.valueX, chartRect.y, 0, chartRect.height, verticalCross);
165+
/**
166+
* due to not working for vertical line side I added new option
167+
* options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
168+
*/
169+
options = new PathOption(
170+
this.elementID + '_VerticalLine', 'none', crosshair.line.width,
171+
crosshair.verticalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, verticalCross
172+
);
173+
this.drawCrosshairLine(options, cross, this.valueX, chartRect.y, 0, chartRect.height, verticalCross);
167174
this.renderAxisTooltip(chart, chartRect, <Element>axisTooltipGroup);
168175
crosshairsvg.appendChild(axisTooltipGroup);
169176
if (!chart.tooltip.enable) {
@@ -174,10 +181,13 @@ export class Crosshair {
174181
axisTooltipGroup = chart.renderer.createGroup({ 'id': this.elementID + '_crosshair_axis' });
175182
options = new PathOption(
176183
this.elementID + '_HorizontalLine', 'none', crosshair.line.width,
177-
crosshair.line.color || chart.themeStyle.crosshairLine, 1, crosshair.dashArray, horizontalCross
184+
crosshair.horizontalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, horizontalCross
178185
);
179186
this.renderCrosshairLine(options, crossGroup);
180-
options.d = verticalCross; options.id = this.elementID + '_VerticalLine';
187+
options = new PathOption(
188+
this.elementID + '_VerticalLine', 'none', crosshair.line.width,
189+
crosshair.verticalColor || crosshair.line.color || chart.themeStyle.crosshairLine, crosshair.opacity, crosshair.dashArray, verticalCross
190+
);
181191
this.renderCrosshairLine(options, crossGroup);
182192
crossGroup.appendChild(axisTooltipGroup);
183193
this.renderAxisTooltip(chart, chartRect, <Element>crossGroup.lastChild);
@@ -210,7 +220,8 @@ export class Crosshair {
210220
'width:' + width + 'px;' +
211221
'height:' + height + 'px;' +
212222
'fill:' + options.stroke + ';' +
213-
'border: 0.5px solid black;' +
223+
'border: 0.5px solid ' + options.stroke + ';' +
224+
'opacity: ' + options.opacity + ' ; ' +
214225
'position: absolute';
215226
const crosshairline: HTMLElement = document.getElementById(options.id);
216227
const crosshairtooltip: HTMLElement = document.getElementById(this.elementID + '_crosshair_axis');

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,21 @@ export class Tooltip extends BaseTooltip {
4545

4646
private mouseUpHandler(): void {
4747
const chart: Chart = this.control as Chart;
48+
let data: PointData = this.getData();
49+
data.lierIndex = this.lierIndex;
4850
if (chart.isTouch && !this.isSelected(chart) &&
4951
((withInBounds(chart.mouseX, chart.mouseY, chart.chartAxisLayoutPanel.seriesClipRect) && chart.tooltip.shared)
5052
|| !chart.tooltip.shared)) {
5153
if (!chart.crosshair.enable) {
5254
this.tooltip();
53-
this.removeTooltip(2000);
54-
} else if (chart.startMove) {
55+
if (chart.tooltip.fadeOutMode === 'Move') {
56+
this.removeTooltip(2000);
57+
}
58+
} else if (chart.startMove && chart.tooltip.fadeOutMode === 'Move') {
5559
this.removeTooltip(2000);
5660
}
61+
} else if (!this.findData(data, this.previousPoints[0] as PointData) && chart.tooltip.fadeOutMode === 'Click') {
62+
this.removeTooltip(0);
5763
}
5864
}
5965

@@ -73,7 +79,7 @@ export class Tooltip extends BaseTooltip {
7379
this.tooltip();
7480
}
7581
} else {
76-
if (chart.tooltip.shared) {
82+
if (chart.tooltip.shared && chart.tooltip.fadeOutMode === 'Move') {
7783
this.removeTooltip(this.chart.tooltip.fadeOutDuration);
7884
}
7985
}
@@ -154,7 +160,7 @@ export class Tooltip extends BaseTooltip {
154160
this.triggerTooltipRender(data, isFirst, this.getTooltipText(data), this.findHeader(data));
155161
}
156162
} else {
157-
if (!data.point && this.isRemove) {
163+
if (!data.point && this.isRemove && chart.tooltip.fadeOutMode === 'Move') {
158164
this.removeTooltip(this.chart.tooltip.fadeOutDuration);
159165
this.isRemove = false;
160166
} else {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -681,6 +681,17 @@ export type EmptyPointMode =
681681
/** Used to display empty points as previous and next point average */
682682
'Average';
683683

684+
/**
685+
* Defines the tooltip fade out mode of the chart.
686+
* * Click - Used to remove the tooltip on click.
687+
* * Move - Used to remove the tooltip with some delay.
688+
*/
689+
export type FadeOutMode =
690+
/** Used to remove the tooltip on click */
691+
'Click' |
692+
/** Used to remove the tooltip with some delay */
693+
'Move';
694+
684695
/**
685696
* Defines the type of technical indicators. They are
686697
* * Sma - Predicts the trend using Simple Moving Average approach

‎controls/charts/src/common/model/base-model.d.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { EmptyPointMode} from '../../chart/utils/enum';import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';import { Alignment, TextOverflow } from '../utils/enum';import { RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';import { Theme } from '../model/theme';
1+
import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';import { EmptyPointMode, FadeOutMode } from '../../chart/utils/enum';import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';import { Alignment, TextOverflow } from '../utils/enum';import { RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';import { Theme } from '../model/theme';
22

33
/**
44
* Interface for a class Connector
@@ -540,6 +540,14 @@ export interface TooltipSettingsModel {
540540

541541
fadeOutDuration?: number;
542542

543+
/**
544+
* Fade Out duration for the Tooltip hide.
545+
*
546+
* @default Move
547+
*/
548+
549+
fadeOutMode?: FadeOutMode;
550+
543551
/**
544552
* To wrap the tooltip long text based on available space.
545553
* This is only application for chart tooltip.

‎controls/charts/src/common/model/base.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Property, ChildProperty, Complex, Collection } from '@syncfusion/ej2-base';
22
import { BorderModel, FontModel, PeriodsModel } from './base-model';
3-
import { EmptyPointMode} from '../../chart/utils/enum';
3+
import { EmptyPointMode, FadeOutMode } from '../../chart/utils/enum';
44
import { AccEmptyPointMode, ConnectorType} from '../../accumulation-chart/model/enum';
55
import { Alignment, TextOverflow } from '../utils/enum';
66
import { RangeIntervalType, PeriodSelectorPosition } from '../utils/enum';
@@ -596,6 +596,15 @@ export class TooltipSettings extends ChildProperty<TooltipSettings> {
596596
@Property(1000)
597597
public fadeOutDuration: number;
598598

599+
/**
600+
* Fade Out duration for the Tooltip hide.
601+
*
602+
* @default Move
603+
*/
604+
605+
@Property('Move')
606+
public fadeOutMode: FadeOutMode;
607+
599608
/**
600609
* To wrap the tooltip long text based on available space.
601610
* This is only application for chart tooltip.

‎controls/data/CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## [Unreleased]
44

5-
## 19.2.51 (2021-08-03)
5+
## 19.2.55 (2021-08-11)
66

77
### DataManager
88

‎controls/diagrams/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-diagrams",
3-
"version": "19.2.49",
3+
"version": "19.2.51",
44
"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.",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",

0 commit comments

Comments
 (0)