@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/components/navigation_map/navigation-map.drawer.js

@@ -1,6 +1,249 @@
 /*
- * 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{getTextLines as m,drawText as f,getTextLineHeight as v,prepareTextForFill as w}from"../../utils/canvas/canvas-text-functions.utils";import{getFormattedTimeLabel as M}from"./navigation-map.model";import{flat as T}from"../../utils/array.utils";const g=4;export class NavigationMapDrawer{constructor(i,t,o,e,a,l){this.config=i,this.chartModel=t,this.canvasModel=o,this.canvasBoundsContainer=e,this.formatterFactory=a,this.visualCandlesProvider=l}draw(){if(this.config.components.navigationMap.visible){const i=this.visualCandlesProvider();if(i.length){const t=this.canvasBoundsContainer.getBounds(h.N_MAP),o=this.canvasBoundsContainer.getBounds(h.N_MAP_BTN_L),e=this.canvasBoundsContainer.getBounds(h.N_MAP_BTN_R),a=this.canvasBoundsContainer.getBounds(h.N_MAP_KNOT_L),l=this.canvasBoundsContainer.getBounds(h.N_MAP_KNOT_R),d=this.canvasBoundsContainer.getBounds(h.N_MAP_SLIDER_WINDOW),r=this.canvasBoundsContainer.getBounds(h.N_MAP_CHART),n=this.canvasModel.ctx;n.fillStyle=this.config.colors.navigationMap.backgroundColor,n.fillRect(t.x,t.y,t.width,t.height),n.strokeStyle=this.config.colors.paneResizer.lineColor,n.lineWidth=1,n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(t.x+t.width,t.y),n.closePath(),n.stroke(),o.width!==0&&this.drawLeftArrowButton(n,o,this.config),e.width!==0&&this.drawRightArrowButton(n,e,this.config),n.fillStyle=this.config.colors.navigationMap.mapFillColor,n.beginPath(),n.moveTo(r.x,r.y+r.height);for(const s of i)n.lineTo(s[0],s[1]);if(n.lineTo(r.x+r.width,r.y+r.height),n.lineTo(r.x,r.y+r.height),n.closePath(),this.config.colors.navigationMap.mapGradientTopColor&&this.config.colors.navigationMap.mapGradientBottomColor){const s=n.createLinearGradient(r.x,r.y,r.x,r.y+r.height);s.addColorStop(0,this.config.colors.navigationMap.mapGradientTopColor),s.addColorStop(1,this.config.colors.navigationMap.mapGradientBottomColor),n.fillStyle=s}n.fill(),this.config.colors.navigationMap.mapColor&&(n.strokeStyle=this.config.colors.navigationMap.mapColor,n.stroke()),this.drawSlider(n,a,l,o,d),this.drawTimeLabels(n)}}}blockDrawSliderOnLeftArrow(i,t,o,e){i.x<=o.x+o.width&&(i.x=o.x+o.width,e.x=i.x+i.width,t.x=e.x+e.width)}drawSlider(i,t,o,e,a){this.blockDrawSliderOnLeftArrow(t,o,e,a),this.drawKnotButton(i,t,this.config,!0),this.drawKnotButton(i,o,this.config,!1),i.fillStyle=this.config.colors.navigationMap.sliderColor,i.fillRect(a.x,a.y,a.width,a.height)}drawLeftArrowButton(i,t,o){i.fillStyle=o.colors.navigationMap.buttonColor,i.fillRect(t.x,t.y,t.width,t.height),i.beginPath();const e=Math.round(t.x+t.width/2-g/2),a=Math.round(t.y+t.height/2);i.moveTo(e,a),i.lineTo(e+g,a+g),i.lineTo(e+g,a-g),i.fillStyle=o.colors.navigationMap.buttonArrowColor,i.fill()}drawRightArrowButton(i,t,o){i.fillStyle=o.colors.navigationMap.buttonColor,i.fillRect(t.x,t.y,t.width,t.height),i.beginPath();const e=Math.round(t.x+t.width/2-g/2),a=Math.round(t.y+t.height/2);i.moveTo(e,a-g),i.lineTo(e,a+g),i.lineTo(e+g,a),i.fillStyle=o.colors.navigationMap.buttonArrowColor,i.fill()}drawKnotButton(i,t,o,e){const a=o.components.navigationMap.knots.border;i.fillStyle=o.colors.navigationMap.knotColor;const l=e?t.x-a:t.x+a;i.fillRect(l,t.y,t.width,t.height),i.lineWidth=o.components.navigationMap.knots.lineWidth,a>0&&(i.beginPath(),i.moveTo(l,t.y),i.lineTo(l,t.y+t.height),i.lineTo(l+t.width,t.y+t.height),i.lineTo(l+t.width,t.y),i.lineTo(l,t.y),i.lineWidth=a,i.strokeStyle=o.colors.navigationMap.knotBorderColor,i.stroke()),i.beginPath(),i.moveTo(l+t.width/2,t.y+t.height/4),i.lineTo(l+t.width/2,t.y+3*t.height/4),i.strokeStyle=o.colors.navigationMap.knotLineColor,i.stroke()}drawTimeLabels(i){const t=T(this.chartModel.mainCandleSeries.getSeriesInViewport()),o=this.config.components.navigationMap.timeLabels,e=o.visible;if(t.length&&e){const a=t[0].candle.timestamp,l=t[t.length-1].candle.timestamp,d=this.canvasBoundsContainer.getBounds(h.N_MAP_LABEL_L),r=this.canvasBoundsContainer.getBounds(h.N_MAP_LABEL_R),s={textFill:this.config.colors.navigationMap.timeLabelsTextColor,textFontFamily:o.fontFamily,textSize:`${o.fontSize}px`},c={dateFormat:o.dateFormat,padding:o.padding,textProperties:Object.assign(Object.assign({},s),{textAlign:"left"})},p={dateFormat:o.dateFormat,padding:o.padding,textProperties:Object.assign(Object.assign({},s),{textAlign:"right"})};this.drawTimeLabel(i,d,a,c),this.drawTimeLabel(i,r,l,p)}}drawTimeLabel(i,t,o,e){const a=e.padding,l=M(o,e.dateFormat,this.formatterFactory);w(i,e.textProperties);const d=v(i),r=m(l);f(i,r,t.x+a.x,t.y+d+a.y,e.textProperties)}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { getTextLines, drawText, getTextLineHeight, prepareTextForFill, } from '../../utils/canvas/canvas-text-functions.utils';
+import { getFormattedTimeLabel } from './navigation-map.model';
+import { flat } from '../../utils/array.utils';
+const BTN_ARROW_WIDTH = 4;
+export class NavigationMapDrawer {
+    constructor(config, chartModel, canvasModel, canvasBoundsContainer, formatterFactory, visualCandlesProvider) {
+        this.config = config;
+        this.chartModel = chartModel;
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.formatterFactory = formatterFactory;
+        this.visualCandlesProvider = visualCandlesProvider;
+    }
+    /**
+     * Draws the navigation map on the canvas if it is visible in the configuration.
+     * It first gets the bounds of all the necessary elements on the canvas.
+     * Then it fills the background of the navigation map with the configured color.
+     * Draws a line at the top of the navigation map with the configured color.
+     * Draws the left and right arrow buttons if their width is not zero.
+     * Draws the chart with the configured colors and fills it with a gradient if the gradient colors are configured.
+     * Draws the slider with the left and right knots and the slider window.
+     * Draws the time labels.
+     * @returns {void}
+     */
+    draw() {
+        if (this.config.components.navigationMap.visible) {
+            const candles = this.visualCandlesProvider();
+            if (candles.length) {
+                const nMap = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP);
+                const btnL = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_BTN_L);
+                const btnR = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_BTN_R);
+                const knotL = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_KNOT_L);
+                const knotR = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_KNOT_R);
+                const slider = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_SLIDER_WINDOW);
+                const chart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+                const ctx = this.canvasModel.ctx;
+                ctx.fillStyle = this.config.colors.navigationMap.backgroundColor;
+                ctx.fillRect(nMap.x, nMap.y, nMap.width, nMap.height);
+                // bar resizer at the very top
+                ctx.strokeStyle = this.config.colors.paneResizer.lineColor;
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.moveTo(nMap.x, nMap.y);
+                ctx.lineTo(nMap.x + nMap.width, nMap.y);
+                ctx.closePath();
+                ctx.stroke();
+                // btn left and right
+                if (btnL.width !== 0) {
+                    this.drawLeftArrowButton(ctx, btnL, this.config);
+                }
+                if (btnR.width !== 0) {
+                    this.drawRightArrowButton(ctx, btnR, this.config);
+                }
+                // chart
+                ctx.fillStyle = this.config.colors.navigationMap.mapFillColor;
+                ctx.beginPath();
+                ctx.moveTo(chart.x, chart.y + chart.height);
+                for (const candle of candles) {
+                    ctx.lineTo(candle[0], candle[1]);
+                }
+                ctx.lineTo(chart.x + chart.width, chart.y + chart.height);
+                ctx.lineTo(chart.x, chart.y + chart.height);
+                ctx.closePath();
+                if (this.config.colors.navigationMap.mapGradientTopColor &&
+                    this.config.colors.navigationMap.mapGradientBottomColor) {
+                    const grd = ctx.createLinearGradient(chart.x, chart.y, chart.x, chart.y + chart.height);
+                    grd.addColorStop(0, this.config.colors.navigationMap.mapGradientTopColor);
+                    grd.addColorStop(1, this.config.colors.navigationMap.mapGradientBottomColor);
+                    ctx.fillStyle = grd;
+                }
+                ctx.fill();
+                if (this.config.colors.navigationMap.mapColor) {
+                    ctx.strokeStyle = this.config.colors.navigationMap.mapColor;
+                    ctx.stroke();
+                }
+                // slider
+                this.drawSlider(ctx, knotL, knotR, btnL, slider);
+                // time labels
+                this.drawTimeLabels(ctx);
+            }
+        }
+    }
+    /**
+     * Moves the left knot and the slider to the right of the left arrow button if the left knot is to the left of the button.
+     * @param {Bounds} knotL - The bounds of the left knot.
+     * @param {Bounds} knotR - The bounds of the right knot.
+     * @param {Bounds} btnL - The bounds of the left arrow button.
+     * @param {Bounds} slider - The bounds of the slider.
+     */
+    blockDrawSliderOnLeftArrow(knotL, knotR, btnL, slider) {
+        if (knotL.x <= btnL.x + btnL.width) {
+            knotL.x = btnL.x + btnL.width;
+            slider.x = knotL.x + knotL.width;
+            knotR.x = slider.x + slider.width;
+        }
+    }
+    /**
+     * Draws a slider on a canvas context with given bounds for knots, button and slider.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {Bounds} knotL - The bounds for the left knot.
+     * @param {Bounds} knotR - The bounds for the right knot.
+     * @param {Bounds} btnL - The bounds for the left button.
+     * @param {Bounds} slider - The bounds for the slider.
+     * @returns {void}
+     */
+    drawSlider(ctx, knotL, knotR, btnL, slider) {
+        //Slider can't move above the left arrow
+        this.blockDrawSliderOnLeftArrow(knotL, knotR, btnL, slider);
+        // knots
+        this.drawKnotButton(ctx, knotL, this.config, true);
+        this.drawKnotButton(ctx, knotR, this.config, false);
+        // slider
+        ctx.fillStyle = this.config.colors.navigationMap.sliderColor;
+        ctx.fillRect(slider.x, slider.y, slider.width, slider.height);
+    }
+    /**
+     * Draws a left arrow button on a canvas context with the provided bounds and configuration
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on
+     * @param {Bounds} bounds - The bounds of the button to be drawn
+     * @param {FullChartConfig} config - The configuration object containing the colors to be used for the button and arrow
+     * @returns {void}
+     */
+    drawLeftArrowButton(ctx, bounds, config) {
+        ctx.fillStyle = config.colors.navigationMap.buttonColor;
+        ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        ctx.beginPath();
+        const leftX = Math.round(bounds.x + bounds.width / 2 - BTN_ARROW_WIDTH / 2);
+        const midY = Math.round(bounds.y + bounds.height / 2);
+        ctx.moveTo(leftX, midY);
+        ctx.lineTo(leftX + BTN_ARROW_WIDTH, midY + BTN_ARROW_WIDTH);
+        ctx.lineTo(leftX + BTN_ARROW_WIDTH, midY - BTN_ARROW_WIDTH);
+        ctx.fillStyle = config.colors.navigationMap.buttonArrowColor;
+        ctx.fill();
+    }
+    /**
+     * Draws a right arrow button on a canvas context with the provided bounds and configuration
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on
+     * @param {Bounds} bounds - The bounds of the button to be drawn
+     * @param {FullChartConfig} config - The configuration object containing the colors to be used for the button and arrow
+     * @returns {void}
+     */
+    drawRightArrowButton(ctx, bounds, config) {
+        ctx.fillStyle = config.colors.navigationMap.buttonColor;
+        ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+        ctx.beginPath();
+        const leftX = Math.round(bounds.x + bounds.width / 2 - BTN_ARROW_WIDTH / 2);
+        const midY = Math.round(bounds.y + bounds.height / 2);
+        ctx.moveTo(leftX, midY - BTN_ARROW_WIDTH);
+        ctx.lineTo(leftX, midY + BTN_ARROW_WIDTH);
+        ctx.lineTo(leftX + BTN_ARROW_WIDTH, midY);
+        ctx.fillStyle = config.colors.navigationMap.buttonArrowColor;
+        ctx.fill();
+    }
+    /**
+     * Draws a knot button on a canvas context with the given bounds and configuration.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {Bounds} bounds - The bounds of the knot button.
+     * @param {FullChartConfig} config - The configuration for the chart.
+     * @param {boolean} isLeft - Whether the knot button is on the left side of the chart.
+     * @returns {void}
+     */
+    drawKnotButton(ctx, bounds, config, isLeft) {
+        const borderWidth = config.components.navigationMap.knots.border;
+        ctx.fillStyle = config.colors.navigationMap.knotColor;
+        const xWithBorder = isLeft ? bounds.x - borderWidth : bounds.x + borderWidth;
+        ctx.fillRect(xWithBorder, bounds.y, bounds.width, bounds.height);
+        ctx.lineWidth = config.components.navigationMap.knots.lineWidth;
+        if (borderWidth > 0) {
+            ctx.beginPath();
+            ctx.moveTo(xWithBorder, bounds.y);
+            ctx.lineTo(xWithBorder, bounds.y + bounds.height);
+            ctx.lineTo(xWithBorder + bounds.width, bounds.y + bounds.height);
+            ctx.lineTo(xWithBorder + bounds.width, bounds.y);
+            ctx.lineTo(xWithBorder, bounds.y);
+            ctx.lineWidth = borderWidth;
+            ctx.strokeStyle = config.colors.navigationMap.knotBorderColor;
+            ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.moveTo(xWithBorder + bounds.width / 2, bounds.y + bounds.height / 4);
+        ctx.lineTo(xWithBorder + bounds.width / 2, bounds.y + (3 * bounds.height) / 4);
+        ctx.strokeStyle = config.colors.navigationMap.knotLineColor;
+        ctx.stroke();
+    }
+    /**
+     * Draws time labels on the navigation map canvas.
+     * @param {CanvasRenderingContext2D} ctx - The 2D rendering context for the canvas.
+     * @returns {void}
+     */
+    drawTimeLabels(ctx) {
+        const candleSource = flat(this.chartModel.mainCandleSeries.getSeriesInViewport());
+        const timeLabelsConfig = this.config.components.navigationMap.timeLabels;
+        const timeLabelsVisible = timeLabelsConfig.visible;
+        if (candleSource.length && timeLabelsVisible) {
+            const startViewportTimestamp = candleSource[0].candle.timestamp;
+            const endViewportTimestamp = candleSource[candleSource.length - 1].candle.timestamp;
+            const textLabelL = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_LABEL_L);
+            const textLabelR = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_LABEL_R);
+            const timeLabelsColor = this.config.colors.navigationMap.timeLabelsTextColor;
+            const textProperties = {
+                textFill: timeLabelsColor,
+                textFontFamily: timeLabelsConfig.fontFamily,
+                textSize: `${timeLabelsConfig.fontSize}px`,
+            };
+            const leftLabelProperties = {
+                dateFormat: timeLabelsConfig.dateFormat,
+                padding: timeLabelsConfig.padding,
+                textProperties: Object.assign(Object.assign({}, textProperties), { textAlign: 'left' }),
+            };
+            const rightLabelProperties = {
+                dateFormat: timeLabelsConfig.dateFormat,
+                padding: timeLabelsConfig.padding,
+                textProperties: Object.assign(Object.assign({}, textProperties), { textAlign: 'right' }),
+            };
+            this.drawTimeLabel(ctx, textLabelL, startViewportTimestamp, leftLabelProperties);
+            this.drawTimeLabel(ctx, textLabelR, endViewportTimestamp, rightLabelProperties);
+        }
+    }
+    /**
+     * Draws a time label on a canvas context.
+     * @private
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {Bounds} bounds - The bounds of the label.
+     * @param {number} timestamp - The timestamp to display.
+     * @param {NMapTimeLabelProperties} config - The configuration for the label.
+     * @returns {void}
+     */
+    drawTimeLabel(ctx, bounds, timestamp, config) {
+        const padding = config.padding;
+        const text = getFormattedTimeLabel(timestamp, config.dateFormat, this.formatterFactory);
+        prepareTextForFill(ctx, config.textProperties);
+        const lineHeight = getTextLineHeight(ctx);
+        const lines = getTextLines(text);
+        drawText(ctx, lines, bounds.x + padding.x, bounds.y + lineHeight + padding.y, config.textProperties);
+    }
+    /**
+     * Returns an array of string containing the canvas ID.
+     * @returns {Array<string>} An array of string containing the canvas ID.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

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

@@ -1,7 +1,38 @@
 /*
- * 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{getTextBounds as p,getTextLines as d}from"../../utils/canvas/canvas-text-functions.utils";export function calcTimeLabelBounds(e,n,o,i){const t=i.components.navigationMap.timeLabels,s=t.padding,a=getFormattedTimeLabel(n,t.dateFormat,o),x=d(a),c={textFontFamily:t.fontFamily,textSize:`${t.fontSize}px`},[r,m]=p(e,x,c);return[r+s.x*2,m+s.y*2]}export function getFormattedTimeLabel(e,n,o){return o(n)(e).split(" ").join(`
-`)}
+import { getTextBounds, getTextLines } from '../../utils/canvas/canvas-text-functions.utils';
+/**
+ * Calculates the bounds of a time label based on the provided timestamp, formatterFactory, and config.
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
+ * @param {number} timestamp - The timestamp to be formatted.
+ * @param {DateTimeFormatterFactory} formatterFactory - The factory used to create the formatter for the timestamp.
+ * @param {FullChartConfig} config - The configuration object for the chart.
+ * @returns {[number, number]} - An array containing the width and height of the time label, including padding.
+ */
+export function calcTimeLabelBounds(ctx, timestamp, formatterFactory, config) {
+    const timeLabelsConfig = config.components.navigationMap.timeLabels;
+    const paddings = timeLabelsConfig.padding;
+    const textWithCR = getFormattedTimeLabel(timestamp, timeLabelsConfig.dateFormat, formatterFactory);
+    const textLines = getTextLines(textWithCR);
+    const textProperties = {
+        textFontFamily: timeLabelsConfig.fontFamily,
+        textSize: `${timeLabelsConfig.fontSize}px`,
+    };
+    const [textWidth, textHeight] = getTextBounds(ctx, textLines, textProperties);
+    return [textWidth + paddings.x * 2, textHeight + paddings.y * 2];
+}
+/**
+ * Returns a formatted time label.
+ *
+ * @param {number} timestamp - The timestamp to format.
+ * @param {string} format - The format to use for the timestamp.
+ * @param {DateTimeFormatterFactory} formatterFactory - The factory function to create a formatter for the given format.
+ * @returns {string} The formatted time label with line breaks instead of spaces.
+ */
+export function getFormattedTimeLabel(timestamp, format, formatterFactory) {
+    const text = formatterFactory(format)(timestamp);
+    return text.split(' ').join('\n');
+}

package/dist/chart/components/pan/chart-pan.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/.
  */
@@ -14,7 +14,7 @@ import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 import { BaseType, ChartBaseModel } from '../chart/chart-base.model';
 export declare class ChartPanComponent extends ChartBaseElement {
     private eventBus;
-    private mainScaleModel;
+    private mainScale;
     private canvasBoundsContainer;
     private config;
     private canvasAnimation;
@@ -23,7 +23,7 @@ export declare class ChartPanComponent extends ChartBaseElement {
     chartBaseModel: ChartBaseModel<BaseType>;
     chartPanComponents: Array<ChartEntity>;
     chartAreaPanHandler: ChartAreaPanHandler;
-    constructor(eventBus: EventBus, mainScaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, mainCanvasParent: Element, chartBaseModel: ChartBaseModel<BaseType>);
+    constructor(eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, mainCanvasParent: Element, chartBaseModel: ChartBaseModel<BaseType>);
     /**
      * Activates the chart pan handlers.
      * @protected

package/dist/chart/components/pan/chart-pan.component.js

@@ -1,6 +1,56 @@
 /*
- * 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 o}from"../../model/chart-base-element";import{ChartAreaPanHandler as c}from"../chart/chart-area-pan.handler";export class ChartPanComponent extends o{constructor(a,t,n,s,e,i,h,r){super(),this.eventBus=a,this.mainScaleModel=t,this.canvasBoundsContainer=n,this.config=s,this.canvasAnimation=e,this.canvasInputListener=i,this.mainCanvasParent=h,this.chartBaseModel=r,this.chartPanComponents=[],this.chartAreaPanHandler=new c(this.eventBus,this.config,this.mainScaleModel,this.mainCanvasParent,this.canvasInputListener,this.canvasBoundsContainer,this.canvasAnimation,this),this.chartPanComponents.push(this.chartAreaPanHandler)}doActivate(){this.activateChartPanHandlers()}doDeactivate(){this.deactivatePanHandlers()}activateChartPanHandlers(){this.chartPanComponents.forEach(a=>a.activate())}deactivatePanHandlers(){this.chartPanComponents.forEach(a=>a.deactivate())}}
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
+export class ChartPanComponent extends ChartBaseElement {
+    constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel) {
+        super();
+        this.eventBus = eventBus;
+        this.mainScale = mainScale;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+        this.canvasAnimation = canvasAnimation;
+        this.canvasInputListener = canvasInputListener;
+        this.mainCanvasParent = mainCanvasParent;
+        this.chartBaseModel = chartBaseModel;
+        this.chartPanComponents = [];
+        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.mainCanvasParent, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this);
+        this.chartPanComponents.push(this.chartAreaPanHandler);
+    }
+    /**
+     * Activates the chart pan handlers.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        this.activateChartPanHandlers();
+    }
+    /**
+     * This method is used to deactivate the pan handlers.
+     * @returns {void}
+     * @protected
+     */
+    doDeactivate() {
+        this.deactivatePanHandlers();
+    }
+    /**
+     * Activates user mouse handlers on main chart view.
+     * @function
+     * @name activateChartPanHandlers
+     * @memberof [object Object]
+     * @instance
+     * @returns {void}
+     */
+    activateChartPanHandlers() {
+        this.chartPanComponents.forEach(c => c.activate());
+    }
+    /**
+     * Deactivates all the pan handlers of the chart.
+     */
+    deactivatePanHandlers() {
+        this.chartPanComponents.forEach(c => c.deactivate());
+    }
+}

package/dist/chart/components/pane/extent/y-extent-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/.
  */
@@ -10,36 +10,35 @@ import { ChartBaseElement } from '../../../model/chart-base-element';
 import { DataSeriesModel } from '../../../model/data-series.model';
 import { ScaleModel } from '../../../model/scale.model';
 import { HighLowProvider } from '../../../model/scaling/auto-scale.model';
-import { Unit } from '../../../model/scaling/viewport.model';
+import { Pixel, Price, Unit } from '../../../model/scaling/viewport.model';
 import { ChartBaseModel } from '../../chart/chart-base.model';
 import { DragNDropYComponent } from '../../dran-n-drop_helper/drag-n-drop-y.component';
-import { PriceAxisType } from '../../labels_generator/numeric-axis-labels.generator';
+import { YAxisComponent } from '../../y_axis/y-axis.component';
 import { PaneHitTestController } from '../pane-hit-test.controller';
-import { ExtentYAxis, PaneComponent, YExtentFormatters } from '../pane.component';
+import { PaneComponent, YExtentFormatters } from '../pane.component';
 export interface YExtentCreationOptions {
-    scaleModel: ScaleModel;
+    scale: ScaleModel;
     order: number;
     useDefaultHighLow: boolean;
-    useDefaultYAxis: boolean;
     cursor: string;
     paneFormatters: YExtentFormatters;
     increment: number | null;
 }
 export declare class YExtentComponent extends ChartBaseElement {
-    paneUuid: string;
+    paneUUID: string;
     idx: number;
     paneComponent: PaneComponent;
     private chartBaseModel;
     private canvasBoundsContainer;
     private hitTestController;
-    dataSeriesCanvasModel: CanvasModel;
-    readonly scaleModel: ScaleModel;
-    readonly yAxisComponent: ExtentYAxis | undefined;
+    dynamicObjectsCanvasModel: CanvasModel;
+    readonly scale: ScaleModel;
     readonly dragNDrop: DragNDropYComponent;
     dataSeries: Set<DataSeriesModel>;
     formatters: YExtentFormatters;
-    private mainDataSeries?;
-    constructor(paneUuid: string, idx: number, paneComponent: PaneComponent, chartBaseModel: ChartBaseModel<'candle'>, canvasBoundsContainer: CanvasBoundsContainer, hitTestController: PaneHitTestController, dataSeriesCanvasModel: CanvasModel, scaleModel: ScaleModel, yAxisComponent: ExtentYAxis | undefined, dragNDrop: DragNDropYComponent, dataSeries?: Set<DataSeriesModel>, formatters?: YExtentFormatters);
+    yAxis: YAxisComponent;
+    mainDataSeries?: DataSeriesModel;
+    constructor(paneUUID: string, idx: number, paneComponent: PaneComponent, chartBaseModel: ChartBaseModel<'candle'>, canvasBoundsContainer: CanvasBoundsContainer, hitTestController: PaneHitTestController, dynamicObjectsCanvasModel: CanvasModel, scale: ScaleModel, createYAxisComponent: (formatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined) => YAxisComponent, dragNDrop: DragNDropYComponent, dataSeries?: Set<DataSeriesModel>, formatters?: YExtentFormatters);
     protected doDeactivate(): void;
     getYAxisBounds: () => Bounds;
     yAxisHT: import("../../../canvas/canvas-bounds-container").HitBoundsTest;
@@ -48,6 +47,7 @@ export declare class YExtentComponent extends ChartBaseElement {
      * @returns {Bounds} The bounds of the scale model.
      */
     getBounds(): Bounds;
+    getBaseline(): number;
     private toVisualPoints;
     /**
      * Creates a new DataSeriesModel object.
@@ -60,6 +60,7 @@ export declare class YExtentComponent extends ChartBaseElement {
      * @returns {void}
      */
     addDataSeries(series: DataSeriesModel): void;
+    toY: (value: Price) => Pixel;
     /**
      * Removes a data series from the chart.
      *
@@ -67,13 +68,6 @@ export declare class YExtentComponent extends ChartBaseElement {
      * @returns {void}
      */
     removeDataSeries(series: DataSeriesModel): void;
-    /**
-     * Returns the type of the y-axis component for the current pane.
-     *
-     * @returns {PriceAxisType} The 'regular' type of the y-axis component for the current pane.
-     *
-     */
-    getAxisType(): PriceAxisType;
     valueFormatter: (value: Unit, dataSeries?: DataSeriesModel) => string;
     get regularFormatter(): (value: number) => string;
     /**

package/dist/chart/components/pane/extent/y-extent-component.js

@@ -1,6 +1,125 @@
 /*
- * 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 d}from"../../../canvas/canvas-bounds-container";import{ChartBaseElement as f}from"../../../model/chart-base-element";import{DataSeriesModel as S,VisualSeriesPoint as w,defaultValueFormatter as x}from"../../../model/data-series.model";import{mergeHighLow as A}from"../../../model/scaling/auto-scale.model";import{createYExtentFormatters as B}from"../../chart/price.formatter";export class YExtentComponent extends f{constructor(t,i,e,u,l,m,c,h,a,g,v=new Set,p={regular:x}){if(super(),this.paneUuid=t,this.idx=i,this.paneComponent=e,this.chartBaseModel=u,this.canvasBoundsContainer=l,this.hitTestController=m,this.dataSeriesCanvasModel=c,this.scaleModel=h,this.yAxisComponent=a,this.dragNDrop=g,this.dataSeries=v,this.formatters=p,this.getYAxisBounds=()=>this.canvasBoundsContainer.getBounds(d.PANE_UUID_Y_AXIS(this.paneUuid,this.idx)),this.yAxisHT=this.canvasBoundsContainer.getBoundsHitTest(d.PANE_UUID_Y_AXIS(this.paneUuid,this.idx)),this.toVisualPoints=s=>s.map(r=>new w(this.chartBaseModel.dataFromTimestamp(r.timestamp).centerUnit,r.close)),this.valueFormatter=(s,r)=>{var o;return((o=this.formatters[this.getAxisType()])!==null&&o!==void 0?o:this.formatters.regular)(s,r)},this.addChildEntity(h),a!==void 0){this.addChildEntity(a.yAxisScaleHandler),this.addSubscription(a.unsub);const s={getLargestLabel:()=>{var r;return(r=a.labelsGenerator.getLargestLabel())!==null&&r!==void 0?r:""},getYAxisIndex:()=>i,getYAxisAlign:()=>a.state.align,getPaneUUID:()=>e.uuid};this.canvasBoundsContainer.yAxisBoundsContainer.registerYAxisWidthContributor(s),this.addSubscription(()=>this.canvasBoundsContainer.yAxisBoundsContainer.removeYAxisWidthContributor(s))}this.setValueFormatters(B(this))}doDeactivate(){super.doDeactivate(),this.dataSeries.forEach(t=>t.deactivate())}getBounds(){return this.scaleModel.getBounds()}createDataSeries(){const t=new S(this,this.hitTestController.getNewDataSeriesHitTestId());return t.toVisualPoints=this.toVisualPoints,t}addDataSeries(t){this.dataSeries.add(t),this.dataSeries.size===1&&(this.mainDataSeries=t),this.paneComponent.updateView()}removeDataSeries(t){this.dataSeries.delete(t),this.paneComponent.updateView()}getAxisType(){return"regular"}get regularFormatter(){return this.formatters.regular}setValueFormatters(t){this.formatters=t}regularValueFromY(t){var i,e;return(e=(i=this.mainDataSeries)===null||i===void 0?void 0:i.view.priceFromY(t))!==null&&e!==void 0?e:this.scaleModel.fromY(t)}}export const createDefaultYExtentHighLowProvider=n=>({isHighLowActive:()=>!0,calculateHighLow:t=>{const i=Array.from(n.dataSeries).filter(e=>e.highLowProvider.isHighLowActive()).map(e=>e.highLowProvider.calculateHighLow(t));return A(i)}});
+import { CanvasElement } from '../../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../../model/chart-base-element';
+import { DataSeriesModel, VisualSeriesPoint, defaultValueFormatter, } from '../../../model/data-series.model';
+import { mergeHighLow } from '../../../model/scaling/auto-scale.model';
+import { createYExtentFormatters } from '../../chart/price.formatter';
+export class YExtentComponent extends ChartBaseElement {
+    constructor(paneUUID, idx, paneComponent, chartBaseModel, canvasBoundsContainer, hitTestController, dynamicObjectsCanvasModel, scale, createYAxisComponent, dragNDrop, dataSeries = new Set(), formatters = {
+        regular: defaultValueFormatter,
+    }) {
+        super();
+        this.paneUUID = paneUUID;
+        this.idx = idx;
+        this.paneComponent = paneComponent;
+        this.chartBaseModel = chartBaseModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.hitTestController = hitTestController;
+        this.dynamicObjectsCanvasModel = dynamicObjectsCanvasModel;
+        this.scale = scale;
+        this.dragNDrop = dragNDrop;
+        this.dataSeries = dataSeries;
+        this.formatters = formatters;
+        this.getYAxisBounds = () => {
+            return this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.idx));
+        };
+        this.yAxisHT = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_Y_AXIS(this.paneUUID, this.idx));
+        this.toVisualPoints = (points) => points.map(p => new VisualSeriesPoint(this.chartBaseModel.dataFromTimestamp(p.timestamp).centerUnit, p.close));
+        this.toY = (value) => {
+            var _a, _b;
+            return (_b = (_a = this.mainDataSeries) === null || _a === void 0 ? void 0 : _a.view.toY(value)) !== null && _b !== void 0 ? _b : 1;
+        };
+        this.valueFormatter = (value, dataSeries) => {
+            var _a;
+            const formatter = (_a = this.formatters[this.yAxis.getAxisType()]) !== null && _a !== void 0 ? _a : this.formatters.regular;
+            return formatter(value, dataSeries);
+        };
+        this.addChildEntity(scale);
+        this.setValueFormatters(createYExtentFormatters(this));
+        this.yAxis = createYAxisComponent(this.valueFormatter.bind(this), () => this.mainDataSeries);
+        this.addChildEntity(this.yAxis);
+    }
+    doDeactivate() {
+        super.doDeactivate();
+        this.dataSeries.forEach(ds => {
+            this.paneComponent.seriesRemovedSubject.next(ds);
+            ds.deactivate();
+        });
+    }
+    /**
+     * Returns the bounds of the scale model.
+     * @returns {Bounds} The bounds of the scale model.
+     */
+    getBounds() {
+        return this.scale.getBounds();
+    }
+    getBaseline() {
+        var _a, _b;
+        return (_b = (_a = this.mainDataSeries) === null || _a === void 0 ? void 0 : _a.getBaseline()) !== null && _b !== void 0 ? _b : 1;
+    }
+    /**
+     * Creates a new DataSeriesModel object.
+     * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
+     */
+    createDataSeries() {
+        const series = new DataSeriesModel(this, this.hitTestController.getNewDataSeriesHitTestId());
+        series.toVisualPoints = this.toVisualPoints;
+        return series;
+    }
+    /**
+     * Adds a new data series to the chart.
+     * @param {DataSeriesModel} series - The data series to be added.
+     * @returns {void}
+     */
+    addDataSeries(series) {
+        this.dataSeries.add(series);
+        if (this.dataSeries.size === 1) {
+            this.mainDataSeries = series;
+        }
+        this.paneComponent.updateView();
+        this.paneComponent.seriesAddedSubject.next(series);
+    }
+    /**
+     * Removes a data series from the chart.
+     *
+     * @param {DataSeriesModel} series - The data series to be removed.
+     * @returns {void}
+     */
+    removeDataSeries(series) {
+        this.dataSeries.delete(series);
+        this.paneComponent.updateView();
+        this.paneComponent.seriesRemovedSubject.next(series);
+    }
+    get regularFormatter() {
+        return this.formatters.regular;
+    }
+    /**
+     * Sets the pane value formatters for the current instance.
+     * @param {YExtentFormatters} formatters - The pane value formatters to be set.
+     */
+    setValueFormatters(formatters) {
+        this.formatters = formatters;
+    }
+    /**
+     * Returns the regular value from Y coordinate.
+     * @param {number} y - The Y coordinate.
+     * @returns {number} - The regular value.
+     */
+    regularValueFromY(y) {
+        var _a, _b;
+        return (_b = (_a = this.mainDataSeries) === null || _a === void 0 ? void 0 : _a.view.priceFromY(y)) !== null && _b !== void 0 ? _b : this.scale.fromY(y);
+    }
+}
+export const createDefaultYExtentHighLowProvider = (extent) => ({
+    isHighLowActive: () => true,
+    calculateHighLow: state => {
+        const highLows = Array.from(extent.dataSeries)
+            .filter(ds => ds.highLowProvider.isHighLowActive())
+            .map(ds => ds.highLowProvider.calculateHighLow(state));
+        return mergeHighLow(highLows);
+    },
+});

package/dist/chart/components/pane/pane-hit-test.controller.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/.
  */