@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,115 @@
  * 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{merge as C}from"rxjs";import{filter as _,pairwise as N}from"rxjs/operators";import{ChartBaseElement as f}from"../../model/chart-base-element";import{CanvasElement as n}from"../../canvas/canvas-bounds-container";import{EVENT_RESIZED as g}from"../../events/events";import{NavigationMapDrawer as I}from"./navigation-map.drawer";import{NavigationMapMoveHandler as E}from"./navigation-map-move.handler";import{floor as A}from"../../utils/math.utils";export class NavigationMapComponent extends f{constructor(a,t,c,s,i,m,o,h,l,e){super(),this.eventBus=a,this.chartModel=t,this.canvasModel=c,this.config=s,this.canvasInputListeners=i,this.canvasBoundsContainer=m,this.chartPanComponent=l,this.visualCandles=[];const d=new I(s,t,c,m,h,()=>this.visualCandles);o.addDrawer(d,n.N_MAP_CHART),this.navigationMapMoveHandler=new E(this.eventBus,this.chartModel,this.chartModel.scaleModel,this.canvasInputListeners,this.canvasBoundsContainer,this.chartPanComponent),e.setCursorForCanvasEl(n.N_MAP_CHART,s.components.navigationMap.cursors.chart),e.setCursorForCanvasEl(n.N_MAP_BTN_L,s.components.navigationMap.cursors.buttonLeft),e.setCursorForCanvasEl(n.N_MAP_BTN_R,s.components.navigationMap.cursors.buttonRight),e.setCursorForCanvasEl(n.N_MAP_KNOT_L,s.components.navigationMap.cursors.leftResizer),e.setCursorForCanvasEl(n.N_MAP_KNOT_R,s.components.navigationMap.cursors.rightResizer),e.setCursorForCanvasEl(n.N_MAP_SLIDER_WINDOW,s.components.navigationMap.cursors.slider)}doActivate(){super.doActivate(),this.addRxSubscription(C(this.chartModel.observeCandlesChanged(),this.canvasBoundsContainer.observeBoundsChanged(n.N_MAP),this.chartModel.scaleModel.xChanged.pipe(N(),_(([a,t])=>{const s=a.start<0||a.end>0,i=t.start<0||t.end>0;return s&&!i||i}))).subscribe(()=>{this.config.components.navigationMap.visible&&(this.visualCandles=this.makeVisualCandles(),this.canvasModel.fireDraw())}))}makeVisualCandles(){var a;const t=this.chartModel.getCandles();if(!t.length)return[];const c=this.chartModel.mainCandleSeries.dataIdxStart,s=this.chartModel.mainCandleSeries.dataIdxEnd,i=Math.round(Math.max(-c,0)),m=Math.max(this.chartModel.getCandlesCountWithRightOffset(),s)+i;let o=Number.NEGATIVE_INFINITY,h=Number.POSITIVE_INFINITY;const l=this.canvasBoundsContainer.getBounds(n.N_MAP_CHART),e=l.width,d=[];let v=0,r,p;for(r=0;r<e;r++)p=A(r*m/e)-i,p in t?(d[r]=t[p].close,v=(a=d[r])!==null&&a!==void 0?a:0,o=Math.max(o,v),h=Math.min(h,v)):d[r]=0;return o-=h,d.map((u,M)=>[M+l.x,(o+h-u)*l.height/o+l.y])}setVisible(a=!0){var t;!((t=this.config.components)===null||t===void 0)&&t.navigationMap&&(this.config.components.navigationMap.visible=a,this.eventBus.fire(g),this.canvasModel.fireDraw())}}
+import { merge } from 'rxjs';
+import { filter, pairwise } from 'rxjs/operators';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { EVENT_RESIZED } from '../../events/events';
+import { NavigationMapDrawer } from './navigation-map.drawer';
+import { NavigationMapMoveHandler } from './navigation-map-move.handler';
+import { floor } from '../../utils/math.utils';
+/**
+ * Navigation map component for chart.
+ * Controls navigation map in the bottom.
+ */
+export class NavigationMapComponent extends ChartBaseElement {
+    constructor(eventBus, chartModel, canvasModel, config, canvasInputListeners, canvasBoundsContainer, drawingManager, formatterFactory, chartPanComponent, cursorHandler) {
+        super();
+        this.eventBus = eventBus;
+        this.chartModel = chartModel;
+        this.canvasModel = canvasModel;
+        this.config = config;
+        this.canvasInputListeners = canvasInputListeners;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.chartPanComponent = chartPanComponent;
+        this.visualCandles = [];
+        const navigationMapDrawer = new NavigationMapDrawer(config, chartModel, canvasModel, canvasBoundsContainer, formatterFactory, () => this.visualCandles);
+        drawingManager.addDrawer(navigationMapDrawer, CanvasElement.N_MAP_CHART);
+        this.navigationMapMoveHandler = new NavigationMapMoveHandler(this.eventBus, this.chartModel, this.chartModel.scale, this.canvasInputListeners, this.canvasBoundsContainer, this.chartPanComponent);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_CHART, config.components.navigationMap.cursors.chart);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_BTN_L, config.components.navigationMap.cursors.buttonLeft);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_BTN_R, config.components.navigationMap.cursors.buttonRight);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_KNOT_L, config.components.navigationMap.cursors.leftResizer);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_KNOT_R, config.components.navigationMap.cursors.rightResizer);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_SLIDER_WINDOW, config.components.navigationMap.cursors.slider);
+    }
+    /**
+     * Method to activate the chart. It subscribes to the observables of the chartModel and canvasBoundsContainer.
+     * It also subscribes to the xChanged observable of the chartModel's scaleModel and filters the values to check
+     * if the previous viewport had no-candles area and current viewport contains only candles or if the current viewport
+     * has no-candles area. If the navigationMap component is visible, it makes visual candles and fires the draw event
+     * of the canvasModel.
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(merge(this.chartModel.observeCandlesChanged(), this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.N_MAP), this.chartModel.scale.xChanged.pipe(pairwise(), filter(([prevScale, curScale]) => {
+            // TODO rework
+            const itemsCount = 0; //this.chartModel.scale.getItemsCount();
+            const prev = prevScale.start < 0 || prevScale.end > itemsCount;
+            const cur = curScale.start < 0 || curScale.end > itemsCount;
+            // trigger recalculation visual candles for nav map if previous viewport had
+            // no-candles area and current viewport contains only candles.
+            // OR if current viewport has no-candles area.
+            return (prev && !cur) || cur;
+        }))).subscribe(() => {
+            if (this.config.components.navigationMap.visible) {
+                this.visualCandles = this.makeVisualCandles();
+                this.canvasModel.fireDraw();
+            }
+        }));
+    }
+    /**
+     * This function generates an array of visual candles based on the data provided by the chartModel.
+     * It calculates the maximum and minimum values of the candles and maps them to the canvas bounds.
+     * @returns {Array<[number, number]>} An array of tuples containing the x and y coordinates of each visual candle.
+     */
+    makeVisualCandles() {
+        var _a;
+        const candles = this.chartModel.getCandles();
+        if (!candles.length) {
+            return [];
+        }
+        const firstId = this.chartModel.mainCandleSeries.dataIdxStart;
+        const lastId = this.chartModel.mainCandleSeries.dataIdxEnd;
+        const leftSideOffsetVisible = Math.round(Math.max(-firstId, 0));
+        // take into account left offset and a new rule using which we can scroll to right, so only two candles on left are visible
+        const len = Math.max(this.chartModel.getCandlesCountWithRightOffset(), lastId) + leftSideOffsetVisible;
+        let max = Number.NEGATIVE_INFINITY;
+        let min = Number.POSITIVE_INFINITY;
+        const nMapChart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+        const width = nMapChart.width;
+        const res = [];
+        let candleClose = 0;
+        let x;
+        let idx;
+        for (x = 0; x < width; x++) {
+            idx = floor((x * len) / width) - leftSideOffsetVisible;
+            if (idx in candles) {
+                res[x] = candles[idx].close;
+                candleClose = (_a = res[x]) !== null && _a !== void 0 ? _a : 0;
+                max = Math.max(max, candleClose);
+                min = Math.min(min, candleClose);
+            }
+            else {
+                res[x] = 0;
+            }
+        }
+        max -= min;
+        return res.map((y, x) => {
+            return [x + nMapChart.x, ((max + min - y) * nMapChart.height) / max + nMapChart.y];
+        });
+    }
+    /**
+     * Sets the visibility of the navigation map component.
+     * @param {boolean} visible - Whether the navigation map component should be visible or not. Default is true.
+     */
+    setVisible(visible = true) {
+        var _a;
+        if ((_a = this.config.components) === null || _a === void 0 ? void 0 : _a.navigationMap) {
+            this.config.components.navigationMap.visible = visible;
+            this.eventBus.fire(EVENT_RESIZED);
+            this.canvasModel.fireDraw();
+        }
+    }
+}

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

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

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

@@ -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

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

@@ -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;
     /**