@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,198 @@
  * 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.js

@@ -3,4 +3,72 @@
  * 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

@@ -5,7 +5,7 @@
  */
 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

@@ -3,4 +3,34 @@
  * 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

@@ -5,7 +5,7 @@
  */
 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}

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

@@ -3,4 +3,109 @@
  * 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{avoidAntialiasing as r}from"../../utils/canvas/canvas-drawing-functions.utils";import{DEFAULT_PRICE_LABEL_PADDING as c,getLabelYOffset as g}from"../y_axis/y-axis-labels.drawer";import{floor as h}from"../../utils/math.utils";export class GridDrawer{constructor(o,e,i,n,t,s,a,d=()=>!0,l){this.canvasModel=o,this.viewportModel=e,this.config=i,this.xBoundsProvider=n,this.yBoundsProvider=t,this.xLabelsProvider=s,this.yLabelsProvider=a,this.drawPredicate=d,this.getBaseLine=l}draw(){if(this.drawPredicate()){const o=this.canvasModel.ctx;r(o,()=>this.drawVertical(o)),r(o,()=>this.drawHorizontal(o)),r(o,()=>this.drawZeroLine(o))}}drawZeroLine(o){if(this.getBaseLine&&this.config.components.yAxis.type==="percent"&&this.config.components.yAxis.zeroPercentLine){const e=this.xBoundsProvider(),i=h(this.getBaseLine());o.beginPath(),o.strokeStyle=this.config.colors.yAxis.zeroPercentLine,o.setLineDash([]),o.moveTo(e.x,i),o.lineTo(e.x+e.width,i),o.stroke(),o.closePath()}}drawVertical(o){const e=this.xLabelsProvider();if(e.length&&this.config.components.grid.vertical){o.lineWidth=this.config.components.grid.width,o.strokeStyle=this.config.colors.chartAreaTheme.gridColor,o.setLineDash(this.config.components.grid.dash||[]);const i=this.xBoundsProvider(),n=i.x+i.width;for(const t of e){const s=h(this.viewportModel.toX(t.value));s>i.x&&s<n&&(o.beginPath(),o.moveTo(s,i.y),o.lineTo(s,i.y+i.height),o.stroke())}}}drawHorizontal(o){const e=this.yLabelsProvider();if(e.length&&this.config.components.grid.horizontal){o.lineWidth=this.config.components.grid.width,o.strokeStyle=this.config.colors.chartAreaTheme.gridColor,o.setLineDash(this.config.components.grid.dash||[]);const i=this.yBoundsProvider();for(const n of e){const t=h(this.viewportModel.toY(n.value)),s=g(n.text,o,c);t>i.y+s&&t<i.y+i.height-s&&(o.beginPath(),o.moveTo(i.x,t),o.lineTo(i.x+i.width,t),o.stroke())}}}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { avoidAntialiasing } from '../../utils/canvas/canvas-drawing-functions.utils';
+import { DEFAULT_PRICE_LABEL_PADDING, getLabelYOffset } from '../y_axis/y-axis-labels.drawer';
+import { floor } from '../../utils/math.utils';
+import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
+/**
+ * Draws grid lines on chart.
+ */
+export class GridDrawer {
+    constructor(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate = () => true, getBaseline) {
+        this.canvasModel = canvasModel;
+        this.viewportModel = viewportModel;
+        this.config = config;
+        this.yAxisState = yAxisState;
+        this.xBoundsProvider = xBoundsProvider;
+        this.yBoundsProvider = yBoundsProvider;
+        this.xLabelsProvider = xLabelsProvider;
+        this.yLabelsProvider = yLabelsProvider;
+        this.drawPredicate = drawPredicate;
+        this.getBaseline = getBaseline;
+    }
+    /**
+     * Draws the chart on the canvas if the drawPredicate is true.
+     * @returns {void}
+     */
+    draw() {
+        if (this.drawPredicate()) {
+            const ctx = this.canvasModel.ctx;
+            avoidAntialiasing(ctx, () => this.drawVertical(ctx));
+            avoidAntialiasing(ctx, () => this.drawHorizontal(ctx));
+            avoidAntialiasing(ctx, () => this.drawZeroLine(ctx));
+        }
+    }
+    /**
+     * Draws a zero line on the y-axis if the chart is a percentage chart and the zeroPercentLine option is enabled.
+     * @param {CanvasRenderingContext2D} ctx - The 2D rendering context of the canvas element.
+     */
+    drawZeroLine(ctx) {
+        if (this.getBaseline &&
+            this.yAxisState.type === 'percent' &&
+            this.yAxisState.zeroPercentLine) {
+            const bounds = this.xBoundsProvider();
+            const y = floor(this.getBaseline());
+            ctx.beginPath();
+            ctx.strokeStyle = this.config.colors.yAxis.zeroPercentLine;
+            ctx.setLineDash([]);
+            ctx.moveTo(bounds.x, y);
+            ctx.lineTo(bounds.x + bounds.width, y);
+            ctx.stroke();
+            ctx.closePath();
+        }
+    }
+    /**
+     * Draws vertical grid lines on the canvas context provided.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @returns {void}
+     */
+    drawVertical(ctx) {
+        const xAxisLabels = this.xLabelsProvider();
+        if (xAxisLabels.length && this.config.components.grid.vertical) {
+            ctx.lineWidth = this.config.components.grid.width;
+            ctx.strokeStyle = this.config.colors.chartAreaTheme.gridColor;
+            ctx.setLineDash(this.config.components.grid.dash || []);
+            const bounds = this.xBoundsProvider();
+            const boundsEnd = bounds.x + bounds.width;
+            for (const label of xAxisLabels) {
+                const x = floorToDPR(this.viewportModel.toX(label.value));
+                if (x > bounds.x && x < boundsEnd) {
+                    ctx.beginPath();
+                    ctx.moveTo(x, bounds.y);
+                    ctx.lineTo(x, bounds.y + bounds.height);
+                    ctx.stroke();
+                }
+            }
+        }
+    }
+    /**
+     * This function is responsible for drawing horizontal grid lines on the chart. It takes a CanvasRenderingContext2D object as a parameter. It first retrieves the y-axis labels using the yLabelsProvider method. If there are any labels and the horizontal grid is enabled in the configuration, it sets the line width, color, and dash style. It then retrieves the y-bounds using the yBoundsProvider method. For each label, it calculates the y-coordinate using the toY method of the viewportModel object. It also calculates the label's y-offset using the getLabelYOffset method. If the y-coordinate is within the bounds of the chart, it draws a horizontal line using the beginPath, moveTo, lineTo, and stroke methods of the CanvasRenderingContext2D object.
+     */
+    drawHorizontal(ctx) {
+        const yAxisLabels = this.yLabelsProvider();
+        if (yAxisLabels.length && this.config.components.grid.horizontal) {
+            ctx.lineWidth = this.config.components.grid.width;
+            ctx.strokeStyle = this.config.colors.chartAreaTheme.gridColor;
+            ctx.setLineDash(this.config.components.grid.dash || []);
+            const bounds = this.yBoundsProvider();
+            for (const label of yAxisLabels) {
+                const y = floor(this.viewportModel.toY(label.value));
+                const labelYOffset = getLabelYOffset(label.text, ctx, DEFAULT_PRICE_LABEL_PADDING);
+                // do not draw, if out of bounds
+                if (y > bounds.y + labelYOffset && y < bounds.y + bounds.height - labelYOffset) {
+                    ctx.beginPath();
+                    ctx.moveTo(bounds.x, y);
+                    ctx.lineTo(bounds.x + bounds.width, y);
+                    ctx.stroke();
+                }
+            }
+        }
+    }
+    /**
+     * Returns an array of strings containing the ID of the canvas model.
+     * @returns {Array<string>} An array of strings containing the ID of the canvas model.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/components/high_low/high-low.component.js

@@ -3,4 +3,15 @@
  * 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 s}from"../../model/chart-base-element";import{HighLowDrawer as w}from"./high-low.drawer";export class HighLowComponent extends s{constructor(r,o,e,t,a){super();const n=new w(o,e,r,t);a.addDrawer(n,"HIGH_LOW")}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { HighLowDrawer } from './high-low.drawer';
+/**
+ * Shows the highest and lowest prices labels over all candles in chart (not only in viewport).
+ */
+export class HighLowComponent extends ChartBaseElement {
+    constructor(config, canvasModel, chartModel, canvasBoundsContainer, drawingManager) {
+        super();
+        const hiLowDrawer = new HighLowDrawer(canvasModel, chartModel, config, canvasBoundsContainer);
+        drawingManager.addDrawer(hiLowDrawer, 'HIGH_LOW');
+    }
+}

package/dist/chart/components/high_low/high-low.drawer.js

@@ -3,4 +3,129 @@
  * 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 h}from"../../canvas/canvas-bounds-container";import{getTextLineHeight as c}from"../../utils/canvas/canvas-text-functions.utils";export class HighLowDrawer{constructor(t,o,r,e){this.canvasModel=t,this.chartModel=o,this.config=r,this.canvasBoundsContainer=e}draw(){if(this.config.components.highLow.visible&&this.chartModel.isReady()){const{high:t,low:o,highIdx:r,lowIdx:e}=this.chartModel.mainCandleSeries.zippedHighLow,s=this.chartModel.mainCandleSeries.dataIdxStart,i=s+r,n=s+e,a=this.canvasModel.ctx;a.save(),a.font=this.config.components.highLow.font,this.drawMarkerLabel(a,i,t,"high"),this.drawMarkerLabel(a,n,o,"low"),a.restore()}}drawMarkerLabel(t,o,r,e){const s=this.getMarkerY(t,r,e==="low");if(!this.checkMarkerInBounds(s))return;const i=this.getMarkerText(r,e),n=this.getMarkerX(t,o,i);t.fillStyle=e==="high"?this.config.colors.highLowTheme.highColor:this.config.colors.highLowTheme.lowColor,t.fillText(i,n,s)}getMarkerText(t,o){const r=this.chartModel.pane.regularFormatter(t);return`${o==="high"?"H:":"L:"} ${r}`}getMarkerY(t,o,r=!1){const e=this.chartModel.toY(o);if(r){const s=c(t);return e+s}return e}checkMarkerInBounds(t){const o=this.canvasBoundsContainer.getBounds(h.CHART);return t>o.y&&t<o.y+o.height}getMarkerX(t,o,r){let e=this.chartModel.toX(o);const s=this.canvasBoundsContainer.getBounds(h.CHART),i=4,n=t.measureText(r).width;return e+i+n>s.width&&(e=e-(i+n)),e+i}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { getTextLineHeight } from '../../utils/canvas/canvas-text-functions.utils';
+export class HighLowDrawer {
+    constructor(canvasModel, chartModel, config, canvasBoundsContainer) {
+        this.canvasModel = canvasModel;
+        this.chartModel = chartModel;
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+    }
+    /**
+     * This function is responsible for drawing the high and low markers on the chart canvas. It checks if the highLow component is visible and if the chartModel is ready. If so, it retrieves the high, low, highIdx, and lowIdx from the chartModel's mainCandleSeries zippedHighLow property.
+     * The function then calculates the global indexes of the high and low candles by adding the viewportStartCandleGlobalIdx to the highIdx and lowIdx respectively. It then saves the canvas context and sets the font to the highLow font specified in the config.
+     * Finally, it calls the drawMarkerLabel function twice, passing in the canvas context, the final global index of the high or low candle, the high or low value, and a string indicating whether it is a high or low marker. After both markers have been drawn, the canvas context is restored.
+     */
+    draw() {
+        if (this.config.components.highLow.visible && this.chartModel.isReady()) {
+            const { high, low, highIdx, lowIdx } = this.chartModel.mainCandleSeries.zippedHighLow;
+            /**
+             * the thing is that `highIdx` and `lowIdx` from the `this.chartModel.mainCandleSeries.zippedHighLow`
+             * are responsible for indexes in the viewport series array
+             * but to draw the high low text in the correct places, we need to know the global indexes of
+             * the `high` and `low` candles
+             */
+            const viewportStartCandleGlobalIdx = this.chartModel.mainCandleSeries.dataIdxStart;
+            const finalHighIdx = viewportStartCandleGlobalIdx + highIdx;
+            const finalLowIdx = viewportStartCandleGlobalIdx + lowIdx;
+            const ctx = this.canvasModel.ctx;
+            ctx.save();
+            ctx.font = this.config.components.highLow.font;
+            this.drawMarkerLabel(ctx, finalHighIdx, high, 'high');
+            this.drawMarkerLabel(ctx, finalLowIdx, low, 'low');
+            ctx.restore();
+        }
+    }
+    /**
+     * Draws a marker label on the canvas context at a specific position.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {number} candleIdx - The index of the candle.
+     * @param {number} yValue - The y value of the marker.
+     * @param {MarkerType} type - The type of the marker.
+     * @returns {void}
+     */
+    drawMarkerLabel(ctx, candleIdx, yValue, type) {
+        const y = this.getMarkerY(ctx, yValue, type === 'low');
+        if (!this.checkMarkerInBounds(y)) {
+            return;
+        }
+        const text = this.getMarkerText(yValue, type);
+        const x = this.getMarkerX(ctx, candleIdx, text);
+        ctx.fillStyle =
+            type === 'high' ? this.config.colors.highLowTheme.highColor : this.config.colors.highLowTheme.lowColor;
+        ctx.fillText(text, x, y);
+    }
+    /**
+     * Returns a string that represents a marker text for a given yValue and type.
+     *
+     * @private
+     * @param {number} yValue - The yValue to format.
+     * @param {MarkerType} type - The type of the marker ('high' or 'low').
+     * @returns {string} - The formatted marker text.
+     */
+    getMarkerText(yValue, type) {
+        const formattedValue = this.chartModel.pane.regularFormatter(yValue);
+        const prefix = type === 'high' ? 'H:' : 'L:';
+        return `${prefix} ${formattedValue}`;
+    }
+    /**
+     * Returns the y-coordinate of a marker on the chart.
+     * @param {CanvasRenderingContext2D} ctx - The rendering context of the canvas.
+     * @param {number} yValue - The y-value of the marker.
+     * @param {boolean} [offset=false] - Whether to add an offset to the y-coordinate.
+     * @returns {number} The y-coordinate of the marker.
+     */
+    getMarkerY(ctx, yValue, offset = false) {
+        const y = this.chartModel.toY(yValue);
+        if (offset) {
+            const fontSize = getTextLineHeight(ctx);
+            return y + fontSize;
+        }
+        return y;
+    }
+    /**
+     * Checks if the given Y coordinate is within the bounds of the chart.
+     * @param {number} y - The Y coordinate to check.
+     * @returns {boolean} - Returns true if the Y coordinate is within the bounds of the chart, otherwise returns false.
+     */
+    checkMarkerInBounds(y) {
+        const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.CHART);
+        if (y > chartBounds.y && y < chartBounds.y + chartBounds.height) {
+            return true;
+        }
+        // if the Y coordinate of the text doesn't fit the viewport -> do not draw it
+        return false;
+    }
+    /**
+     * Calculates the x position of the marker for a given candle index and text
+     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context
+     * @param {number} candleIdx - The index of the candle
+     * @param {string} text - The text to be displayed
+     * @returns {number} - The x position of the marker
+     */
+    getMarkerX(ctx, candleIdx, text) {
+        let x = this.chartModel.toX(candleIdx);
+        const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.CHART);
+        const shift = 4;
+        /**
+         * recalculates position of the text if it overexceed the chart bounds
+         * it will look like it turns from the right to the left
+         * it helps to fix the situation when
+         * the candle is still visible, but the text may overflow the bounds
+         */
+        const textWidth = ctx.measureText(text).width;
+        if (x + shift + textWidth > chartBounds.width) {
+            x = x - (shift + textWidth);
+        }
+        return x + shift;
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the ID of the canvas model.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}