Pull request #5366: Feature/DXCF-5677 web allow events hover customis…

…ation

Merge in DXCHARTS/dxchart5 from feature/DXCF-5677-web-allow-events-hover-customisation to master

* commit 'f49aad171849cb1b3a0a9dcc03eaf8b7b9a75754':
  [DXCF-5677] [web] allow events hover customisation // init
  [DXCF-5677] [web] allow events hover customisation // init
  [DXCF-5677] [web] allow events hover customisation // init
  [DXCF-5677] [web] allow events hover customisation // init

GitOrigin-RevId: 5a4d3bb3506b15a3940076bbeb06c5297cb57fa6

src/chart/chart.config.ts

@@ -1,8 +1,3 @@
-/*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
- * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
- * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
 /*
  * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
@@ -436,10 +431,30 @@ export const getDefaultConfig = (): FullChartConfig => ({
 			bgHoverColor: 'rgba(55,55,54,0.6)',
 		},
 		events: {
-			earnings: { color: 'rgba(217,44,64,1)' },
-			dividends: { color: 'rgba(169,38,251,1)' },
-			splits: { color: 'rgba(244,187,63,1)' },
-			'conference-calls': { color: 'rgba(48,194,97,1)' },
+			earnings: {
+				color: 'rgba(217,44,64,1)',
+				normal: 'rgba(217,44,64,1)',
+				hover: 'rgba(217,44,64,1)',
+				line: 'rgba(217,44,64,1)',
+			},
+			dividends: {
+				color: 'rgba(169,38,251,1)',
+				normal: 'rgba(169,38,251,1)',
+				hover: 'rgba(169,38,251,1)',
+				line: 'rgba(169,38,251,1)',
+			},
+			splits: {
+				color: 'rgba(244,187,63,1)',
+				normal: 'rgba(244,187,63,1)',
+				hover: 'rgba(244,187,63,1)',
+				line: 'rgba(244,187,63,1)',
+			},
+			'conference-calls': {
+				color: 'rgba(48,194,97,1)',
+				normal: 'rgba(48,194,97,1)',
+				hover: 'rgba(48,194,97,1)',
+				line: 'rgba(48,194,97,1)',
+			},
 		},
 		secondaryChartTheme: [
 			{
@@ -777,12 +792,7 @@ export interface FullChartColors {
 		labelBoxColor: string;
 		labelTextColor: string;
 	};
-	events: {
-		earnings: EventColors;
-		dividends: EventColors;
-		splits: EventColors;
-		'conference-calls': EventColors;
-	};
+	events: ChartConfigComponentsEventsColors;
 	navigationMap: {
 		buttonColor: string;
 		knotColor: string;
@@ -1021,6 +1031,17 @@ export interface ChartConfigComponentsEvents {
 	 * 	</svg>'
 	 */
 	icons?: ChartConfigComponentsEventsIcons;
+	/**
+	 * Configure the event type vertical line appearance
+	 */
+	line?: ChartConfigComponentsEventsLine;
+}
+
+export interface ChartConfigComponentsEventsColors {
+	earnings: EventColors;
+	dividends: EventColors;
+	splits: EventColors;
+	'conference-calls': EventColors;
 }
 
 export interface DateTimeFormatConfig {
@@ -1348,10 +1369,19 @@ export interface HighlightsColors {
 	label: string;
 }
 
-export interface EventColors {
+/**
+ * @deprecated use {normal}, {hover} instead, will be removed in v6
+ */
+export interface EventColorsOld {
 	color: string;
 }
 
+export interface EventColors extends EventColorsOld {
+	line?: string;
+	normal?: string;
+	hover?: string;
+}
+
 export interface HistogramColors {
 	upCap: string;
 	upBottom: string;
@@ -1491,7 +1521,14 @@ export interface ChartConfigComponentsEventsIcons {
 	earnings?: CustomIcon;
 	dividends?: CustomIcon;
 	splits?: CustomIcon;
-	conferenceCalls?: CustomIcon;
+	'conference-calls'?: CustomIcon;
+}
+
+export interface ChartConfigComponentsEventsLine {
+	earnings?: { width: number; dash: Array<number> };
+	dividends?: { width: number; dash: Array<number> };
+	splits?: { width: number; dash: Array<number> };
+	'conference-calls'?: { width: number; dash: Array<number> };
 }
 
 export type CursorType = string;

src/chart/components/events/events.drawer.ts

@@ -5,7 +5,7 @@
  */
 import { Bounds } from '../../model/bounds.model';
 import { CanvasBoundsContainer, CanvasElement } from '../../canvas/canvas-bounds-container';
-import { CustomIcon, FullChartConfig } from '../../chart.config';
+import { CustomIcon, EventColors, FullChartConfig } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { Drawer } from '../../drawers/drawing-manager';
 import { DateTimeFormatter } from '../../model/date-time.formatter';
@@ -42,7 +42,7 @@ export class EventsDrawer implements Drawer {
 			this.createCustomIcon('earnings', iconsConfig.earnings);
 			this.createCustomIcon('dividends', iconsConfig.dividends);
 			this.createCustomIcon('splits', iconsConfig.splits);
-			this.createCustomIcon('conference-calls', iconsConfig.conferenceCalls);
+			this.createCustomIcon('conference-calls', iconsConfig['conference-calls']);
 		}
 	}
 
@@ -107,18 +107,24 @@ export class EventsDrawer implements Drawer {
 			.forEach(event => {
 				const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
 				if (x > chartBounds.x && x < chartBounds.x + chartBounds.width) {
-					const color = this.config.colors.events[event.type].color;
-					ctx.strokeStyle = color;
+					const colors = this.config.colors.events[event.type];
+					ctx.strokeStyle = colors.line ?? colors.normal ?? colors.color;
 
 					// check custom icon in cache
 					if (this.customIcons[getIconHash(event.type, 'hover')] !== undefined) {
 						this.drawCustomSvgEvent(ctx, x, bounds, event);
 					} else {
-						this.drawDefaultEvent(ctx, x, bounds, event, color);
+						this.drawDefaultEvent(ctx, x, bounds, event, colors);
 					}
 					// draw vertical line and label for the hovered event
 					if (this.model.hoveredEvent.getValue() === event) {
+						const line = this.config.components.events.line;
+						const width = line && line[event.type] && line[event.type]?.width;
+						const dash = line && line[event.type] && line[event.type]?.dash;
+
+						ctx.lineWidth = width ?? 1;
 						ctx.beginPath();
+						ctx.setLineDash(dash ?? []);
 						ctx.moveTo(x, chartBounds.y);
 						ctx.lineTo(x, bounds.y + bounds.height / 2);
 						ctx.stroke();
@@ -161,9 +167,15 @@ export class EventsDrawer implements Drawer {
 	 * @param {string} color - The color of the event.
 	 * @returns {void}
 	 */
-	drawDefaultEvent(ctx: CanvasRenderingContext2D, x: number, bounds: Bounds, event: EventWithId, color: string) {
+	drawDefaultEvent(
+		ctx: CanvasRenderingContext2D,
+		x: number,
+		bounds: Bounds,
+		event: EventWithId,
+		colors: EventColors,
+	) {
 		const y = bounds.y + bounds.height / 2;
-		ctx.fillStyle = color;
+		ctx.fillStyle = colors.normal ?? colors.color;
 		// draw figure
 		ctx.lineWidth = 1.5; // 1.5 pixels
 		const size = getEventSize(event);
@@ -174,8 +186,10 @@ export class EventsDrawer implements Drawer {
 		ctx.lineTo(x, y + size);
 		ctx.closePath();
 		if (this.model.hoveredEvent.getValue() === event) {
+			ctx.fillStyle = colors.hover ?? colors.color;
 			ctx.fill();
 		} else {
+			ctx.strokeStyle = colors.normal ?? colors.color;
 			ctx.stroke();
 		}
 	}