@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/components/events/events-hit-test.drawer.js

@@ -1,6 +1,68 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
-import{CanvasElement as f}from"../../canvas/canvas-bounds-container";import{getEventSize as v}from"./events.drawer";const r=5;export class EventsHitTestDrawer{constructor(e,t,s,c,o){this.hitTestCanvasModel=e,this.chartModel=t,this.config=s,this.canvasBoundsContainer=c,this.model=o}draw(){const e=this.hitTestCanvasModel.ctx,t=this.canvasBoundsContainer.getBounds(f.EVENTS);e.save(),this.model.events.forEach((s,c)=>{const o=this.model.events[c-1],l=o&&this.chartModel.candleFromTimestamp(o.timestamp).xCenter(this.chartModel.scaleModel),i=this.chartModel.candleFromTimestamp(s.timestamp).xCenter(this.chartModel.scaleModel);if(i>t.x&&i<t.x+t.width){const h=this.config.colors.events[s.type].color;e.strokeStyle=h,e.fillStyle=h;const n=v(s);e.fillStyle=this.hitTestCanvasModel.idToColor(s.id);const a=(n+r)*2;if(l!==void 0){const d=v(o);if(l+d>i-a/2){const m=n*2+r;e.fillRect(l+d,t.y,m,t.height)}else e.fillRect(i-n-r,t.y,a,t.height)}else e.fillRect(i-n-r,t.y,a,t.height)}}),e.restore()}getCanvasIds(){return[this.hitTestCanvasModel.canvasId]}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { getEventSize } from './events.drawer';
+const hoverExtendedAreaPixels = 5;
+export class EventsHitTestDrawer {
+    constructor(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, model) {
+        this.hitTestCanvasModel = hitTestCanvasModel;
+        this.chartModel = chartModel;
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.model = model;
+    }
+    /**
+     * Draws events on the hit test canvas.
+     * @function
+     * @name draw
+     * @memberof CanvasElement.EVENTS
+     * @instance
+     * @returns {void}
+      
+    */
+    draw() {
+        const ctx = this.hitTestCanvasModel.ctx;
+        const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.EVENTS);
+        ctx.save();
+        this.model.events.forEach((event, idx) => {
+            const prevEvent = this.model.events[idx - 1];
+            const prevX = prevEvent &&
+                this.chartModel.candleFromTimestamp(prevEvent.timestamp).xCenter(this.chartModel.scale);
+            const x = this.chartModel.candleFromTimestamp(event.timestamp).xCenter(this.chartModel.scale);
+            if (x > bounds.x && x < bounds.x + bounds.width) {
+                const color = this.config.colors.events[event.type].color;
+                ctx.strokeStyle = color;
+                ctx.fillStyle = color;
+                const size = getEventSize(event);
+                // draw hit test
+                ctx.fillStyle = this.hitTestCanvasModel.idToColor(event.id);
+                const hoverSize = (size + hoverExtendedAreaPixels) * 2;
+                if (prevX !== undefined) {
+                    const prevSize = getEventSize(prevEvent);
+                    const isIntersectsWithPrev = prevX + prevSize > x - hoverSize / 2;
+                    if (isIntersectsWithPrev) {
+                        const hoverSize = size * 2 + hoverExtendedAreaPixels;
+                        ctx.fillRect(prevX + prevSize, bounds.y, hoverSize, bounds.height);
+                    }
+                    else {
+                        ctx.fillRect(x - size - hoverExtendedAreaPixels, bounds.y, hoverSize, bounds.height);
+                    }
+                }
+                else {
+                    ctx.fillRect(x - size - hoverExtendedAreaPixels, bounds.y, hoverSize, bounds.height);
+                }
+            }
+        });
+        ctx.restore();
+    }
+    /**
+     * Returns an array of string containing the canvas ID of the hitTestCanvasModel.
+     * @returns {Array<string>} An array of string containing the canvas ID of the hitTestCanvasModel.
+     */
+    getCanvasIds() {
+        return [this.hitTestCanvasModel.canvasId];
+    }
+}

package/dist/chart/components/events/events.component.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

package/dist/chart/components/events/events.component.js

@@ -1,6 +1,66 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
-import{CanvasElement as E}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as h}from"../../model/chart-base-element";import{recalculateXFormatter as c}from"../../model/date-time.formatter";import{merge as f}from"../../utils/merge.utils";import{EventsHitTestDrawer as p}from"./events-hit-test.drawer";import{EventsDrawer as w}from"./events.drawer";import{EventsModel as b}from"./events.model";export class EventsComponent extends h{constructor(e,s,n,r,i,o,a,v,m){super(),this.config=e,this.canvasModel=s,this.canvasBoundsContainer=i,this.drawingManager=o,this.formatterFactory=a,this.eventsXAxisLabelFormatterProvider=()=>c(this.config.components.events.xAxisLabelFormat,r.getPeriod(),this.formatterFactory);const t=new b(s);this.eventsModel=t,this.addChildEntity(t),n.addSubscriber(t);const d=new w(m,s,r,e,i,t,this.eventsXAxisLabelFormatterProvider);this.drawingManager.addDrawer(d,"EVENTS");const l=new p(n,r,e,i,t);this.drawingManager.addDrawerBefore(l,"HIT_TEST_EVENTS","HIT_TEST_DRAWINGS"),v.setCursorForCanvasEl(E.EVENTS,e.components.events.cursor)}setEvents(e){this.eventsModel.setEvents(e),this.canvasModel.fireDraw()}setVisible(e){this.config.components.events.visible=e,this.canvasBoundsContainer.recalculateBounds(),this.canvasModel.fireDraw()}setEventTypeVisible(e){f(this.config.components.events.eventsVisibility,e,{overrideExisting:!0,addIfMissing:!1}),this.canvasModel.fireDraw()}observeEventHovered(){return this.eventsModel.hoveredEvent.asObservable()}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { recalculateXFormatter } from '../../model/date-time.formatter';
+import { merge } from '../../utils/merge.utils';
+import { EventsHitTestDrawer } from './events-hit-test.drawer';
+import { EventsDrawer } from './events.drawer';
+import { EventsModel } from './events.model';
+export class EventsComponent extends ChartBaseElement {
+    constructor(config, canvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, cursorHandler, backgroundCanvasModel) {
+        super();
+        this.config = config;
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.drawingManager = drawingManager;
+        this.formatterFactory = formatterFactory;
+        this.eventsXAxisLabelFormatterProvider = () => recalculateXFormatter(this.config.components.events.xAxisLabelFormat, chartModel.getPeriod(), this.formatterFactory);
+        const eventsModel = new EventsModel(canvasModel);
+        this.eventsModel = eventsModel;
+        this.addChildEntity(eventsModel);
+        hitTestCanvasModel.addSubscriber(eventsModel);
+        const eventsDrawer = new EventsDrawer(backgroundCanvasModel, canvasModel, chartModel, config, canvasBoundsContainer, eventsModel, this.eventsXAxisLabelFormatterProvider);
+        this.drawingManager.addDrawer(eventsDrawer, 'EVENTS');
+        const eventsHitTestDrawer = new EventsHitTestDrawer(hitTestCanvasModel, chartModel, config, canvasBoundsContainer, eventsModel);
+        this.drawingManager.addDrawerBefore(eventsHitTestDrawer, 'HIT_TEST_EVENTS', 'HIT_TEST_DRAWINGS');
+        cursorHandler.setCursorForCanvasEl(CanvasElement.EVENTS, config.components.events.cursor);
+    }
+    /**
+     * Sets the new event list.
+     * @param events
+     */
+    setEvents(events) {
+        this.eventsModel.setEvents(events);
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Changes the component visibility.
+     * @param visible
+     */
+    setVisible(visible) {
+        this.config.components.events.visible = visible;
+        this.canvasBoundsContainer.recalculateBounds();
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Changes visibility for the specific event type.
+     * For example, to turn off dividends visibility you can call this method with { dividends: false } argument
+     */
+    setEventTypeVisible(eventsVisibility) {
+        merge(this.config.components.events.eventsVisibility, eventsVisibility, {
+            overrideExisting: true,
+            addIfMissing: false,
+        });
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Observes hovered event when mouse moves in, and provides null when mouse moves out.
+     */
+    observeEventHovered() {
+        return this.eventsModel.hoveredEvent.asObservable();
+    }
+}

package/dist/chart/components/events/events.drawer.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

package/dist/chart/components/events/events.drawer.js

@@ -1,6 +1,200 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
-import{CanvasElement as g}from"../../canvas/canvas-bounds-container";import{redrawBackgroundArea as v}from"../../drawers/chart-background.drawer";const f={"rhombus-small":4,rhombus:6,"rhombus-large":8},c=(h,t)=>`${h}_${t}`;export class EventsDrawer{constructor(t,e,o,s,n,i,a){this.backgroundCanvas=t,this.canvasModel=e,this.chartModel=o,this.config=s,this.canvasBoundsContainer=n,this.model=i,this.formatterProvider=a,this.customIcons={};const r=this.config.components.events.icons;r&&(this.createCustomIcon("earnings",r.earnings),this.createCustomIcon("dividends",r.dividends),this.createCustomIcon("splits",r.splits),this.createCustomIcon("conference-calls",r.conferenceCalls))}createCustomIcon(t,e){if(e){const o=this.createIconImage(e.normal),s=this.createIconImage(e.hover);this.customIcons[c(t,"normal")]=o,this.customIcons[c(t,"hover")]=s}}createIconImage(t){var e;const s=new DOMParser().parseFromString(t,"text/html").querySelector("svg");let n=0;s&&(n=parseInt((e=s.getAttribute("height"))!==null&&e!==void 0?e:"",10));const r="data:image/svg+xml;base64,"+btoa(t),l=new Image;return l.src=r,{img:l,svgHeight:n}}draw(){if(!this.config.components.events.visible)return;const t=this.canvasBoundsContainer.getBounds(g.EVENTS),e=this.canvasBoundsContainer.getBounds(g.ALL_PANES),o=this.canvasModel.ctx;o.save(),this.model.events.filter(s=>this.config.components.events.eventsVisibility[s.type]).forEach(s=>{const n=this.chartModel.candleFromTimestamp(s.timestamp).xCenter(this.chartModel.scaleModel);if(n>e.x&&n<e.x+e.width){const i=this.config.colors.events[s.type].color;o.strokeStyle=i,this.customIcons[c(s.type,"hover")]!==void 0?this.drawCustomSvgEvent(o,n,t,s):this.drawDefaultEvent(o,n,t,s,i),this.model.hoveredEvent.getValue()===s&&(o.beginPath(),o.moveTo(n,e.y),o.lineTo(n,t.y+t.height/2),o.stroke(),o.closePath(),this.config.components.xAxis.visible&&this.drawLabel(n,s))}}),o.restore()}drawCustomSvgEvent(t,e,o,s){const n=o.y+o.height/2,i=this.customIcons[c(s.type,"normal")],a=this.customIcons[c(s.type,"hover")];this.model.hoveredEvent.getValue()===s?t.drawImage(a.img,e-a.svgHeight/2,n-a.svgHeight/2):t.drawImage(i.img,e-i.svgHeight/2,n-i.svgHeight/2)}drawDefaultEvent(t,e,o,s,n){const i=o.y+o.height/2;t.fillStyle=n,t.lineWidth=1.5;const a=getEventSize(s);t.beginPath(),t.moveTo(e-a,i),t.lineTo(e,i-a),t.lineTo(e+a,i),t.lineTo(e,i+a),t.closePath(),this.model.hoveredEvent.getValue()===s?t.fill():t.stroke()}drawLabel(t,e){var o;const s=this.canvasModel.ctx,n=this.canvasBoundsContainer.getBounds(g.X_AXIS),i=this.config.components.xAxis.fontFamily,a=this.config.components.xAxis.fontSize,r=(o=this.config.components.xAxis.padding.top)!==null&&o!==void 0?o:0,l=n.y+a-1+r;s.font=`${a}px ${i}`;const d=this.formatterProvider()(e.timestamp),m=s.measureText(d).width;v(this.backgroundCanvas.ctx,s,t-m/2,n.y+1,m,n.height-1),s.fillStyle=this.config.colors.events[e.type].color,s.fillText(d,t-m/2,l)}getCanvasIds(){return[this.canvasModel.canvasId]}}export function getEventSize(h){return f[h.style]}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
+const eventsSizesDict = {
+    'rhombus-small': 4,
+    rhombus: 6,
+    'rhombus-large': 8,
+};
+const getIconHash = (type, state) => `${type}_${state}`;
+export class EventsDrawer {
+    constructor(backgroundCanvas, canvasModel, chartModel, config, canvasBoundsContainer, model, formatterProvider) {
+        this.backgroundCanvas = backgroundCanvas;
+        this.canvasModel = canvasModel;
+        this.chartModel = chartModel;
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.model = model;
+        this.formatterProvider = formatterProvider;
+        // cache of created icons
+        this.customIcons = {};
+        const iconsConfig = this.config.components.events.icons;
+        if (iconsConfig) {
+            this.createCustomIcon('earnings', iconsConfig.earnings);
+            this.createCustomIcon('dividends', iconsConfig.dividends);
+            this.createCustomIcon('splits', iconsConfig.splits);
+            this.createCustomIcon('conference-calls', iconsConfig.conferenceCalls);
+        }
+    }
+    /**
+     * Creates a custom icon for a given event type.
+     * @param {EventType} type - The type of the event.
+     * @param {CustomIcon} [icon] - The custom icon object containing the normal and hover images.
+     * @returns {void}
+     */
+    createCustomIcon(type, icon) {
+        if (icon) {
+            const normal = this.createIconImage(icon.normal);
+            const hover = this.createIconImage(icon.hover);
+            this.customIcons[getIconHash(type, 'normal')] = normal;
+            this.customIcons[getIconHash(type, 'hover')] = hover;
+        }
+    }
+    /**
+     * Creates an icon image from a string containing SVG data.
+     * @param {string} iconString - The string containing SVG data.
+     * @returns {Object} An object containing an Image object and the height of the SVG element.
+     */
+    createIconImage(iconString) {
+        var _a;
+        const parser = new DOMParser();
+        const svgSelector = parser.parseFromString(iconString, 'text/html').querySelector('svg');
+        let svgHeight = 0;
+        if (svgSelector) {
+            svgHeight = parseInt((_a = svgSelector.getAttribute('height')) !== null && _a !== void 0 ? _a : '', 10);
+        }
+        const svg64 = btoa(iconString);
+        const b64Start = 'data:image/svg+xml;base64,';
+        const image64 = b64Start + svg64;
+        const img = new Image();
+        img.src = image64;
+        return {
+            img,
+            svgHeight,
+        };
+    }
+    /**
+     * Draws events on the chart canvas if they are visible according to the configuration.
+     * The events are filtered by type and then iterated over to draw them on the chart.
+     * If a custom icon is available in the cache, it is used to draw the event, otherwise a default event is drawn.
+     * If the event is currently being hovered over, a vertical line is drawn and a label is added to the x-axis.
+     * @returns {void}
+     */
+    draw() {
+        if (!this.config.components.events.visible) {
+            return;
+        }
+        const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.EVENTS);
+        const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+        const ctx = this.canvasModel.ctx;
+        ctx.save();
+        this.model.events
+            .filter(e => this.config.components.events.eventsVisibility[e.type])
+            .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;
+                // 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);
+                }
+                // draw vertical line and label for the hovered event
+                if (this.model.hoveredEvent.getValue() === event) {
+                    ctx.beginPath();
+                    ctx.moveTo(x, chartBounds.y);
+                    ctx.lineTo(x, bounds.y + bounds.height / 2);
+                    ctx.stroke();
+                    ctx.closePath();
+                    if (this.config.components.xAxis.visible) {
+                        this.drawLabel(x, event);
+                    }
+                }
+            }
+        });
+        ctx.restore();
+    }
+    /**
+     * Draws a custom SVG event on a canvas context.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {number} x - The x coordinate of the event.
+     * @param {Bounds} bounds - The bounds of the event.
+     * @param {EventWithId} event - The event to draw.
+     * @returns {void}
+     */
+    drawCustomSvgEvent(ctx, x, bounds, event) {
+        const y = bounds.y + bounds.height / 2;
+        const normal = this.customIcons[getIconHash(event.type, 'normal')];
+        const hover = this.customIcons[getIconHash(event.type, 'hover')];
+        if (this.model.hoveredEvent.getValue() === event) {
+            ctx.drawImage(hover.img, x - hover.svgHeight / 2, y - hover.svgHeight / 2);
+        }
+        else {
+            ctx.drawImage(normal.img, x - normal.svgHeight / 2, y - normal.svgHeight / 2);
+        }
+    }
+    /**
+     * Draws a default event on a canvas context.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {number} x - The x coordinate of the event.
+     * @param {Bounds} bounds - The bounds of the event.
+     * @param {EventWithId} event - The event to draw.
+     * @param {string} color - The color of the event.
+     * @returns {void}
+     */
+    drawDefaultEvent(ctx, x, bounds, event, color) {
+        const y = bounds.y + bounds.height / 2;
+        ctx.fillStyle = color;
+        // draw figure
+        ctx.lineWidth = 1.5; // 1.5 pixels
+        const size = getEventSize(event);
+        ctx.beginPath();
+        ctx.moveTo(x - size, y);
+        ctx.lineTo(x, y - size);
+        ctx.lineTo(x + size, y);
+        ctx.lineTo(x, y + size);
+        ctx.closePath();
+        if (this.model.hoveredEvent.getValue() === event) {
+            ctx.fill();
+        }
+        else {
+            ctx.stroke();
+        }
+    }
+    /**
+     * This function is responsible for drawing a label on the canvas at a given x coordinate. The label contains a formatted timestamp of a given event. The function takes two parameters: x, which is the x coordinate where the label will be drawn, and event, which is an object containing information about the event, including its timestamp and type.
+     * The function first gets the canvas context and the bounds of the x-axis. It then retrieves the font family, font height, and top padding from the configuration object. The y coordinate of the label is calculated based on the font height, top padding, and the y coordinate of the x-axis bounds. The font is set using the retrieved font family and font height.
+     * The timestamp of the event is formatted using a formatter provider function. The width of the label is calculated using the canvas context's measureText() method. The function then calls another function, redrawBackgroundArea(), to hide the regular x-axis label that may overlap with the event label.
+     * Finally, the function sets the fill style of the canvas context to the color associated with the event type in the configuration object. The label text is then drawn on the canvas context at the calculated x and y coordinates.
+     */
+    drawLabel(x, event) {
+        var _a;
+        const ctx = this.canvasModel.ctx;
+        const xAxisBounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+        const fontFamily = this.config.components.xAxis.fontFamily;
+        const fontHeight = this.config.components.xAxis.fontSize;
+        const offsetTop = (_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0;
+        const y = xAxisBounds.y + fontHeight - 1 + offsetTop;
+        ctx.font = `${fontHeight}px ${fontFamily}`;
+        const labelText = this.formatterProvider()(event.timestamp);
+        const width = ctx.measureText(labelText).width;
+        // label can overlap with regular x-axis label, so we need to hide regular x-axis label
+        redrawBackgroundArea(this.backgroundCanvas.ctx, ctx, x - width / 2, xAxisBounds.y + 1, width, xAxisBounds.height - 1);
+        ctx.fillStyle = this.config.colors.events[event.type].color;
+        ctx.fillText(labelText, x - width / 2, y);
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the ID of the canvas model.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}
+/**
+ * Returns the size of an event based on its style
+ * @param {EconomicEvent} event - The event to get the size of
+ * @returns {number} - The size of the event
+ 
+*/
+export function getEventSize(event) {
+    return eventsSizesDict[event.style];
+}

package/dist/chart/components/events/events.model.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

package/dist/chart/components/events/events.model.js

@@ -1,6 +1,74 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
-import{BehaviorSubject as n}from"rxjs";import{ChartBaseElement as o}from"../../model/chart-base-element";import{HIT_TEST_ID_RANGE as i}from"../../model/hit-test-canvas.model";export class EventsModel extends o{constructor(t){super(),this.canvasModel=t,this.events=[],this.hoveredEvent=new n(null)}setEvents(t){this.events=this.indexEvents(t)}indexEvents(t){const e=this.getIdRange()[0];return t.map((s,r)=>Object.assign(Object.assign({},s),{id:r+e})).sort((s,r)=>s.timestamp-r.timestamp)}getIdRange(){return i.EVENTS}lookup(t){return this.events.filter(e=>e.id===t)[0]}onHover(t,e){this.hoveredEvent.getValue()!==t&&(t&&(t.point=e),this.hoveredEvent.next(t),this.canvasModel.fireDraw())}onTouchStart(t,e){this.onHover(t,e)}}
+import { BehaviorSubject } from 'rxjs';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { HIT_TEST_ID_RANGE } from '../../model/hit-test-canvas.model';
+export class EventsModel extends ChartBaseElement {
+    constructor(canvasModel) {
+        super();
+        this.canvasModel = canvasModel;
+        this.events = [];
+        this.hoveredEvent = new BehaviorSubject(null);
+    }
+    /**
+     * Sets the events array of the object to the provided array of events after indexing them.
+     * @param {EconomicEvent[]} events - An array of events to be set as the events array of the object.
+     * @returns {void}
+     */
+    setEvents(events) {
+        this.events = this.indexEvents(events);
+    }
+    /**
+     * Private method to index events with unique ids and sort them by timestamp
+     * @param {EconomicEvent[]} events - Array of events to be indexed
+     * @returns {EventWithId[]} - Array of indexed events with unique ids
+     */
+    indexEvents(events) {
+        const startId = this.getIdRange()[0];
+        return events
+            .map((event, id) => (Object.assign(Object.assign({}, event), { id: id + startId })))
+            .sort((a, b) => a.timestamp - b.timestamp);
+    }
+    /**
+     * Returns an array of two numbers representing the range of IDs for event hit tests.
+     * @returns {Array<number>} An array of two numbers representing the range of IDs for event hit tests.
+     */
+    getIdRange() {
+        return HIT_TEST_ID_RANGE.EVENTS;
+    }
+    /**
+     * Returns the event with the specified id.
+     * @param {number} id - The id of the event to look up.
+     * @returns {EventWithId} - The event with the specified id.
+     */
+    lookup(id) {
+        return this.events.filter(event => event.id === id)[0];
+    }
+    /**
+     * Function that handles the hover event on a canvas element.
+     * @param {EventWithId} event - The event that is being hovered.
+     * @param {Point} [point] - The point where the event is being hovered.
+     * @returns {void}
+     */
+    onHover(event, point) {
+        const currentValue = this.hoveredEvent.getValue();
+        if (currentValue !== event) {
+            event && (event.point = point);
+            this.hoveredEvent.next(event);
+            this.canvasModel.fireDraw();
+        }
+    }
+    /**
+     * Handles the touch start event.
+     *
+     * @param {EventWithId} event - The touch start event.
+     * @param {Point} [point] - The point where the touch started.
+     * @returns {void}
+     */
+    onTouchStart(event, point) {
+        this.onHover(event, point);
+    }
+}

package/dist/chart/components/grid/grid.component.d.ts

@@ -1,11 +1,11 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
 import { NumericAxisLabel } from '../labels_generator/numeric-axis-labels.generator';
 import { BoundsProvider } from '../../model/bounds.model';
-import { FullChartConfig } from '../../chart.config';
+import { FullChartConfig, YAxisConfig } from '../../chart.config';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasModel } from '../../model/canvas.model';
 import { CompositeDrawer } from '../../drawers/composite.drawer';
@@ -15,7 +15,7 @@ export declare class GridComponent extends ChartBaseElement {
     private drawerName;
     private drawingManager;
     private readonly drawer;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], getBaseLine?: () => Unit, drawPredicate?: () => boolean);
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], getBaseline?: () => Unit, drawPredicate?: () => boolean);
     /**
      * This method is used to deactivate the drawer and remove it from the drawing manager.
      * @protected

package/dist/chart/components/grid/grid.component.js

@@ -1,6 +1,36 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
-import{ChartBaseElement as m}from"../../model/chart-base-element";import{GridDrawer as c}from"./grid.drawer";export class GridComponent extends m{constructor(r,e,a,t,i,d,s,o,n,w,h){super(),this.drawerName=t,this.drawingManager=i,this.drawer=new c(r,e,a,d,s,o,n,h,w)}doDeactivate(){super.doDeactivate(),this.drawingManager.removeDrawer(this.drawer)}doActivate(){super.doActivate(),this.drawingManager.addDrawer(this.drawer,this.drawerName)}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { GridDrawer } from './grid.drawer';
+export class GridComponent extends ChartBaseElement {
+    constructor(canvasModel, viewportModel, config, yAxisState, drawerName, drawingManager, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, getBaseline, drawPredicate) {
+        super();
+        this.drawerName = drawerName;
+        this.drawingManager = drawingManager;
+        this.drawer = new GridDrawer(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate, getBaseline);
+    }
+    /**
+     * This method is used to deactivate the drawer and remove it from the drawing manager.
+     * @protected
+     * @function
+     * @name doDeactivate
+     * @returns {void}
+     */
+    doDeactivate() {
+        super.doDeactivate();
+        this.drawingManager.removeDrawer(this.drawer);
+    }
+    /**
+     * This method is used to activate the drawer. It calls the parent class's doActivate method and adds the drawer to the drawing manager.
+     * @protected
+     * @function
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        this.drawingManager.addDrawer(this.drawer, this.drawerName);
+    }
+}

package/dist/chart/components/grid/grid.drawer.d.ts

@@ -1,11 +1,11 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
 import { NumericAxisLabel } from '../labels_generator/numeric-axis-labels.generator';
 import { BoundsProvider } from '../../model/bounds.model';
-import { FullChartConfig } from '../../chart.config';
+import { FullChartConfig, YAxisConfig } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { Drawer } from '../../drawers/drawing-manager';
 import { Unit, ViewportModel } from '../../model/scaling/viewport.model';
@@ -20,13 +20,14 @@ export declare class GridDrawer implements Drawer {
     private canvasModel;
     private viewportModel;
     private config;
+    private yAxisState;
     private xBoundsProvider;
     private yBoundsProvider;
     private xLabelsProvider;
     private yLabelsProvider;
     private drawPredicate;
-    private getBaseLine?;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, getBaseLine?: (() => Unit) | undefined);
+    private getBaseline?;
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, getBaseline?: (() => Unit) | undefined);
     /**
      * Draws the chart on the canvas if the drawPredicate is true.
      * @returns {void}