@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,111 @@
 /*
- * 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{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.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/high_low/high-low.component.js

@@ -1,6 +1,17 @@
 /*
- * 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 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.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/high_low/high-low.drawer.js

@@ -1,6 +1,131 @@
 /*
- * 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 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];
+    }
+}

package/dist/chart/components/highlights/highlights.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/highlights/highlights.component.js

@@ -1,6 +1,51 @@
 /*
- * 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{HighlightsModel as r}from"./highlights.model";import{HighlightsDrawer as l}from"./highlights.drawer";import{ChartBaseElement as o}from"../../model/chart-base-element";const d="HIGHLIGHTS_PLUGIN";export class HighlightsComponent extends o{constructor(h,i,t,s,e,g){super(),this.eventBus=h,this.config=i,this.highlightsModel=new r(t),this.addChildEntity(this.highlightsModel),this.highLightsDrawer=new l(this.highlightsModel,t,s,e,i),g.addDrawer(this.highLightsDrawer,d)}getHighlights(){return this.highlightsModel.getHighlights()}setHighlights(h){this.highlightsModel.setHighlights(h)}setHighlightsVisible(h=!0){this.config.components.highlights.visible=h,this.eventBus.fireDraw(this.highLightsDrawer.getCanvasIds())}observeHighlightsUpdated(){return this.highlightsModel.observeHighlightsUpdated()}}
+import { HighlightsModel } from './highlights.model';
+import { HighlightsDrawer } from './highlights.drawer';
+import { ChartBaseElement } from '../../model/chart-base-element';
+const HIGHLIGHTS_DRAWER_TYPE = 'HIGHLIGHTS_PLUGIN';
+export class HighlightsComponent extends ChartBaseElement {
+    constructor(eventBus, config, chartModel, canvasModel, canvasBoundsContainer, drawingManager) {
+        super();
+        this.eventBus = eventBus;
+        this.config = config;
+        this.highlightsModel = new HighlightsModel(chartModel);
+        this.addChildEntity(this.highlightsModel);
+        this.highLightsDrawer = new HighlightsDrawer(this.highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config);
+        drawingManager.addDrawer(this.highLightsDrawer, HIGHLIGHTS_DRAWER_TYPE);
+    }
+    /**
+     * Returns the highlights from the highlightsModel
+     * @returns {Array} An array of highlights
+     */
+    getHighlights() {
+        return this.highlightsModel.getHighlights();
+    }
+    /**
+     * Sets the highlights of the highlights model.
+     * @param {Highlight[]} highlights - An array of Highlight objects to be set as the highlights of the model.
+     * @returns {void}
+     */
+    setHighlights(highlights) {
+        this.highlightsModel.setHighlights(highlights);
+    }
+    /**
+     * Sets the visibility of the highlights component.
+     * @param {boolean} visible - A boolean value indicating whether the highlights should be visible or not. Default value is true.
+     * @returns {void}
+     */
+    setHighlightsVisible(visible = true) {
+        this.config.components.highlights.visible = visible;
+        this.eventBus.fireDraw(this.highLightsDrawer.getCanvasIds());
+    }
+    /**
+     * Returns an observable that emits when the highlights are updated.
+     * @returns {Observable} An observable that emits when the highlights are updated.
+     */
+    observeHighlightsUpdated() {
+        return this.highlightsModel.observeHighlightsUpdated();
+    }
+}

package/dist/chart/components/highlights/highlights.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/highlights/highlights.drawer.js

@@ -1,6 +1,159 @@
 /*
- * 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{calculateTextWidth as A}from"../../utils/canvas/canvas-font-measure-tool.utils";import{HIGHLIGHTS_TYPES as F}from"./highlights.model";import{CanvasElement as x}from"../../canvas/canvas-bounds-container";import{unitToPixels as X}from"../../model/scaling/viewport.model";import{clipToBounds as G}from"../../drawers/data-series.drawer";const n=[20,10];export class HighlightsDrawer{constructor(e,o,s,l,i){this.highlightsModel=e,this.chartModel=o,this.canvasModel=s,this.canvasBoundsContainer=l,this.config=i}draw(){var e,o,s,l;if(this.config.components.highlights.visible){const i=this.chartModel.getCandles(),t=this.canvasModel.ctx,d=this.highlightsModel.getVisualHighlights();if(this.highlightsModel.getHighlights().length&&i.length!==0&&this.chartModel.scaleModel.isScaleReady()){const r=this.canvasBoundsContainer.getBounds(x.ALL_PANES);t.save(),G(t,r);const w=(e=this.config.components.highlights.border.width)!==null&&e!==void 0?e:1,E=(o=this.config.components.highlights.border.dash)!==null&&o!==void 0?o:[0,0],H=(s=this.config.components.highlights.fontSize)!==null&&s!==void 0?s:11,L=(l=this.config.components.highlights.fontFamily)!==null&&l!==void 0?l:"monospace",p=`${H}px ${L}, monospace`;t.font=p,t.lineWidth=w,t.setLineDash(E),F.forEach(y=>{var f,g;const S=d[y];if(S){const a=this.config.colors.highlights[y],k=(f=a==null?void 0:a.border)!==null&&f!==void 0?f:"#ffffff",B=(g=a==null?void 0:a.background)!==null&&g!==void 0?g:"#ffffff";t.save(),t.beginPath(),t.fillStyle=B,t.strokeStyle=k,S.forEach(h=>{var v,m,b;const P=this.chartModel.candleFromTimestamp(h.from),D=X(P.width,this.chartModel.scaleModel.zoomX),c=P.xStart(this.chartModel.scaleModel),_=this.chartModel.candleFromTimestamp(h.to),C=X(_.width,this.chartModel.scaleModel.zoomX),u=_.xStart(this.chartModel.scaleModel)+C;if(h.border&&this.drawBorders(h.border,t,c+D,u-C,r),t.fillRect(c,r.y,u-c,r.y+r.height),h.label){const T=(v=h.label.text)!==null&&v!==void 0?v:"",M=this.config.colors.highlights[h.type];t.save(),t.fillStyle=(m=M==null?void 0:M.label)!==null&&m!==void 0?m:"#ffffff";const I=A(T,t,p),[W,z]=this.resolveHighlightLabelPosition((b=h.label.placement)!==null&&b!==void 0?b:"left-left",r,[c,u],I);t.fillText(T,W,z),t.restore()}}),t.closePath(),t.restore()}}),t.restore()}}}resolveHighlightLabelPosition(e,o,s,l){const[i,t]=s;switch(e){case"right-left":return[t-n[1]-l,o.y+n[0]];case"left-left":return[i-n[1]-l,o.y+n[0]];case"right-right":return[t+n[1],o.y+n[0]];case"left-right":default:return[i+n[1],o.y+n[0]]}}drawBorders(e,o,s,l,i){const t=e.left,d=e.right;t&&(o.beginPath(),o.moveTo(s,i.y),o.lineTo(s,i.y+i.height),o.stroke(),o.closePath()),d&&(o.beginPath(),o.moveTo(l,i.y),o.lineTo(l,i.y+i.height),o.stroke(),o.closePath())}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+import { HIGHLIGHTS_TYPES } from './highlights.model';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { unitToPixels } from '../../model/scaling/viewport.model';
+import { clipToBounds } from '../../drawers/data-series.drawer';
+const LABEL_PADDINGS = [20, 10];
+export class HighlightsDrawer {
+    constructor(highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config) {
+        this.highlightsModel = highlightsModel;
+        this.chartModel = chartModel;
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+    }
+    /**
+     * Draws highlights on the chart canvas if they are visible.
+     * @function
+     * @name draw
+     * @memberof ChartComponent.prototype
+     *
+     * @returns {void}
+     *
+     * @example
+     * chartComponent.draw();
+     */
+    draw() {
+        var _a, _b, _c, _d;
+        if (this.config.components.highlights.visible) {
+            const candles = this.chartModel.getCandles();
+            const ctx = this.canvasModel.ctx;
+            const highlights = this.highlightsModel.getVisualHighlights();
+            const highlightsExist = this.highlightsModel.getHighlights().length;
+            if (highlightsExist && candles.length !== 0 && this.chartModel.scale.isScaleReady()) {
+                const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+                ctx.save();
+                //clip rect to throw away everything that doesn't fit chart bounds
+                clipToBounds(ctx, chartBounds);
+                const borderWidth = (_a = this.config.components.highlights.border.width) !== null && _a !== void 0 ? _a : 1;
+                const borderDash = (_b = this.config.components.highlights.border.dash) !== null && _b !== void 0 ? _b : [0, 0];
+                const fontSize = (_c = this.config.components.highlights.fontSize) !== null && _c !== void 0 ? _c : 11;
+                const fontFamily = (_d = this.config.components.highlights.fontFamily) !== null && _d !== void 0 ? _d : 'monospace';
+                const font = `${fontSize}px ${fontFamily}, monospace`;
+                ctx.font = font;
+                ctx.lineWidth = borderWidth;
+                ctx.setLineDash(borderDash);
+                HIGHLIGHTS_TYPES.forEach(highlightType => {
+                    var _a, _b;
+                    const items = highlights[highlightType];
+                    if (items) {
+                        const itemColors = this.config.colors.highlights[highlightType];
+                        const strokeStyle = (_a = itemColors === null || itemColors === void 0 ? void 0 : itemColors.border) !== null && _a !== void 0 ? _a : '#ffffff';
+                        const fillStyle = (_b = itemColors === null || itemColors === void 0 ? void 0 : itemColors.background) !== null && _b !== void 0 ? _b : '#ffffff';
+                        ctx.save();
+                        // start line path to draw highlights' borders
+                        // it is done once for all highlights because it is more perfomant
+                        ctx.beginPath();
+                        ctx.fillStyle = fillStyle;
+                        ctx.strokeStyle = strokeStyle;
+                        items.forEach(item => {
+                            var _a, _b, _c;
+                            const fromXCandle = this.chartModel.candleFromTimestamp(item.from);
+                            const fromXCandleWidth = unitToPixels(fromXCandle.width, this.chartModel.scale.zoomX);
+                            const fromX = fromXCandle.xStart(this.chartModel.scale);
+                            const toXCandle = this.chartModel.candleFromTimestamp(item.to);
+                            const toXCandleWidth = unitToPixels(toXCandle.width, this.chartModel.scale.zoomX);
+                            const toX = toXCandle.xStart(this.chartModel.scale) + toXCandleWidth;
+                            // draw highlight' borders
+                            if (item.border) {
+                                this.drawBorders(item.border, ctx, fromX + fromXCandleWidth, toX - toXCandleWidth, chartBounds);
+                            }
+                            // draw highlight' background
+                            ctx.fillRect(fromX, chartBounds.y, toX - fromX, chartBounds.y + chartBounds.height);
+                            // draw highlight' label
+                            if (item.label) {
+                                const label = (_a = item.label.text) !== null && _a !== void 0 ? _a : '';
+                                const itemColors = this.config.colors.highlights[item.type];
+                                ctx.save();
+                                ctx.fillStyle = (_b = itemColors === null || itemColors === void 0 ? void 0 : itemColors.label) !== null && _b !== void 0 ? _b : '#ffffff';
+                                const labelWidth = calculateTextWidth(label, ctx, font);
+                                const [labelX, labelY] = this.resolveHighlightLabelPosition((_c = item.label.placement) !== null && _c !== void 0 ? _c : 'left-left', chartBounds, [fromX, toX], labelWidth);
+                                ctx.fillText(label, labelX, labelY);
+                                ctx.restore();
+                            }
+                        });
+                        ctx.closePath();
+                        ctx.restore();
+                    }
+                });
+                ctx.restore();
+            }
+        }
+    }
+    /**
+     * Calculates the position of the highlight label based on the given parameters.
+     * @param {HighlightTextPlacement} placement - The placement of the highlight text.
+     * @param {Bounds} bounds - The bounds of the highlight.
+     * @param {[number, number]} highlightFromTo - The start and end position of the highlight.
+     * @param {number} labelWidth - The width of the label.
+     * @returns {[number, number]} - The x and y position of the highlight label.
+     */
+    resolveHighlightLabelPosition(placement, bounds, highlightFromTo, labelWidth) {
+        const [fromX, toX] = highlightFromTo;
+        switch (placement) {
+            case 'right-left': {
+                return [toX - LABEL_PADDINGS[1] - labelWidth, bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'left-left': {
+                return [fromX - LABEL_PADDINGS[1] - labelWidth, bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'right-right': {
+                return [toX + LABEL_PADDINGS[1], bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'left-right':
+            default: {
+                return [fromX + LABEL_PADDINGS[1], bounds.y + LABEL_PADDINGS[0]];
+            }
+        }
+    }
+    /**
+     * Draws borders on a canvas context for a given chart.
+     * @param {HighlightBorder} border - The border to draw.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {number} fromX - The starting x-coordinate of the border.
+     * @param {number} toX - The ending x-coordinate of the border.
+     * @param {Bounds} chartBounds - The bounds of the chart to draw the border on.
+     * @returns {void}
+     */
+    drawBorders(border, ctx, fromX, toX, chartBounds) {
+        const leftBorder = border.left;
+        const rightBorder = border.right;
+        if (leftBorder) {
+            ctx.beginPath();
+            ctx.moveTo(fromX, chartBounds.y);
+            ctx.lineTo(fromX, chartBounds.y + chartBounds.height);
+            ctx.stroke();
+            ctx.closePath();
+        }
+        if (rightBorder) {
+            ctx.beginPath();
+            ctx.moveTo(toX, chartBounds.y);
+            ctx.lineTo(toX, chartBounds.y + chartBounds.height);
+            ctx.stroke();
+            ctx.closePath();
+        }
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the canvas ID.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/components/highlights/highlights.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/highlights/highlights.model.js

@@ -1,6 +1,80 @@
 /*
- * 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{Subject as l}from"rxjs";import{ChartBaseElement as a}from"../../model/chart-base-element";import{getElementsInRange as r}from"../../utils/array.utils";export const HIGHLIGHTS_TYPES=["AFTER_MARKET","PRE_MARKET","NO_TRADING","REGULAR"];const o=24*60*60*1e3;export class HighlightsModel extends a{constructor(t){super(),this.chartModel=t,this.highlights=[],this.visualHighlights={},this.highlightsUpdatedSubject=new l}activate(){this.addRxSubscription(this.chartModel.scaleModel.xChanged.subscribe(()=>this.highlights.length&&this.recalculateVisualHighlights()))}getHighlights(){return this.highlights}getVisualHighlights(){return this.visualHighlights}recalculateVisualHighlights(){this.visualHighlights={};const t=this.chartModel.getFirstTimestamp(),h=this.chartModel.getLastTimestamp()+o;r(this.highlights,t,h,c).forEach(i=>{var s;this.visualHighlights[i.type]||(this.visualHighlights[i.type]=[]),(s=this.visualHighlights[i.type])===null||s===void 0||s.push(i)})}setHighlights(t){this.highlights=t,this.highlights.sort((h,e)=>h.to-e.to),this.highlightsUpdatedSubject.next(this.highlights),this.highlights.length?this.recalculateVisualHighlights():this.visualHighlights={}}observeHighlightsUpdated(){return this.highlightsUpdatedSubject.asObservable()}}const c=g=>g.to;
+import { Subject } from 'rxjs';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { getElementsInRange } from '../../utils/array.utils';
+export const HIGHLIGHTS_TYPES = ['AFTER_MARKET', 'PRE_MARKET', 'NO_TRADING', 'REGULAR'];
+const DAY_MS = 24 * 60 * 60 * 1000;
+export class HighlightsModel extends ChartBaseElement {
+    constructor(chartModel) {
+        super();
+        this.chartModel = chartModel;
+        this.highlights = [];
+        this.visualHighlights = {};
+        this.highlightsUpdatedSubject = new Subject();
+    }
+    /**
+     * Activates the chart by subscribing to the xChanged event of the scaleModel.
+     * If there are highlights, it recalculates the visual highlights.
+     */
+    activate() {
+        this.addRxSubscription(this.chartModel.scale.xChanged.subscribe(() => this.highlights.length && this.recalculateVisualHighlights()));
+    }
+    /**
+     * Returns an array of Highlight objects.
+     * @returns {Highlight[]} - An array of Highlight objects.
+     */
+    getHighlights() {
+        return this.highlights;
+    }
+    /**
+     * Returns the visual highlights object.
+     *
+     * @returns {VisualHighlights} The visual highlights object.
+     */
+    getVisualHighlights() {
+        return this.visualHighlights;
+    }
+    /**
+     * Recalculates the visual highlights based on the current chart model and highlights.
+     * @private
+     * @returns {void}
+     */
+    recalculateVisualHighlights() {
+        this.visualHighlights = {};
+        const firstTimestamp = this.chartModel.getFirstTimestamp();
+        const lastTimestamp = this.chartModel.getLastTimestamp() + DAY_MS;
+        const highlightsInRange = getElementsInRange(this.highlights, firstTimestamp, lastTimestamp, highlightTransformFunc);
+        highlightsInRange.forEach(h => {
+            var _a;
+            if (!this.visualHighlights[h.type]) {
+                this.visualHighlights[h.type] = [];
+            }
+            (_a = this.visualHighlights[h.type]) === null || _a === void 0 ? void 0 : _a.push(h);
+        });
+    }
+    /**
+     * Sets the highlights of the component and updates the visual highlights accordingly.
+     * @param {Highlight[]} highlights - An array of Highlight objects to be set as the new highlights.
+     * @returns {void}
+     */
+    setHighlights(highlights) {
+        this.highlights = highlights;
+        this.highlights.sort((a, b) => a.to - b.to);
+        this.highlightsUpdatedSubject.next(this.highlights);
+        this.highlights.length ? this.recalculateVisualHighlights() : (this.visualHighlights = {});
+    }
+    /**
+     * Returns an Observable that emits an array of Highlight objects whenever the highlightsUpdatedSubject emits a new value.
+     * @returns {Observable<Highlight[]>} An Observable that emits an array of Highlight objects.
+     */
+    observeHighlightsUpdated() {
+        return this.highlightsUpdatedSubject.asObservable();
+    }
+}
+const highlightTransformFunc = (item) => {
+    return item.to;
+};

package/dist/chart/components/labels_generator/numeric-axis-labels.generator.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 { Observable, Subject } from 'rxjs';
 import { Unit } from '../../model/scaling/viewport.model';
-import { AnimationFrameCache } from '../../utils/perfomance/animation-frame-cache.utils';
+import { AnimationFrameCache } from '../../utils/performance/animation-frame-cache.utils';
 export type PriceAxisType = 'regular' | 'percent' | 'logarithmic';
 export interface LabelsGenerator {
     readonly observeLabelsChanged: () => Observable<NumericAxisLabel[]>;