From b943e9f87e317126a3363e7dfd0fd2b43796b9de Mon Sep 17 00:00:00 2001 From: Anton Vorobev Date: Thu, 21 Nov 2024 13:22:57 +0000 Subject: [PATCH] Pull request #5366: Feature/DXCF-5677 web allow events hover customisation 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 | 71 +++++++++++++++----- src/chart/components/events/events.drawer.ts | 28 ++++++-- 2 files changed, 75 insertions(+), 24 deletions(-) diff --git a/src/chart/chart.config.ts b/src/chart/chart.config.ts index 98d03e4..4e1e0f7 100644 --- a/src/chart/chart.config.ts +++ b/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 { * ' */ 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 }; + dividends?: { width: number; dash: Array }; + splits?: { width: number; dash: Array }; + 'conference-calls'?: { width: number; dash: Array }; } export type CursorType = string; diff --git a/src/chart/components/events/events.drawer.ts b/src/chart/components/events/events.drawer.ts index 2c6cac0..7ff7d5f 100644 --- a/src/chart/components/events/events.drawer.ts +++ b/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(); } }