@devexperts/dxcharts-lite 1.0.1

package/dist/chart/components/navigation_map/navigation-map.component.d.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { FullChartConfig } from '../../chart.config';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import EventBus from '../../events/event-bus';
+import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { CursorHandler } from '../../canvas/cursor.handler';
+import { CanvasModel } from '../../model/canvas.model';
+import { DrawingManager } from '../../drawers/drawing-manager';
+import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
+import { DateTimeFormatterFactory } from '../../model/date-time.formatter';
+import { ChartModel } from '../chart/chart.model';
+import { ChartPanComponent } from '../pan/chart-pan.component';
+import { NavigationMapMoveHandler } from './navigation-map-move.handler';
+/**
+ * Navigation map component for chart.
+ * Controls navigation map in the bottom.
+ */
+export declare class NavigationMapComponent extends ChartBaseElement {
+    protected eventBus: EventBus;
+    private chartModel;
+    private canvasModel;
+    private config;
+    private canvasInputListeners;
+    private canvasBoundsContainer;
+    private chartPanComponent;
+    private visualCandles;
+    navigationMapMoveHandler: NavigationMapMoveHandler;
+    constructor(eventBus: EventBus, chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, formatterFactory: DateTimeFormatterFactory, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler);
+    /**
+     * 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.
+     */
+    protected doActivate(): void;
+    /**
+     * 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.
+     */
+    private makeVisualCandles;
+    /**
+     * 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?: boolean): void;
+}

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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())}}

package/dist/chart/components/navigation_map/navigation-map.drawer.d.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { FullChartConfig } from '../../chart.config';
+import { ChartModel } from '../chart/chart.model';
+import { CanvasModel } from '../../model/canvas.model';
+import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { Drawer } from '../../drawers/drawing-manager';
+import { DateTimeFormatterFactory } from '../../model/date-time.formatter';
+export declare class NavigationMapDrawer implements Drawer {
+    private config;
+    private chartModel;
+    private canvasModel;
+    private canvasBoundsContainer;
+    private formatterFactory;
+    private visualCandlesProvider;
+    constructor(config: FullChartConfig, chartModel: ChartModel, canvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, formatterFactory: DateTimeFormatterFactory, visualCandlesProvider: () => Array<[number, number]>);
+    /**
+     * 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(): void;
+    /**
+     * 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.
+     */
+    private blockDrawSliderOnLeftArrow;
+    /**
+     * 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}
+     */
+    private drawSlider;
+    /**
+     * 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}
+     */
+    private drawLeftArrowButton;
+    /**
+     * 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}
+     */
+    private drawRightArrowButton;
+    /**
+     * 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}
+     */
+    private drawKnotButton;
+    /**
+     * Draws time labels on the navigation map canvas.
+     * @param {CanvasRenderingContext2D} ctx - The 2D rendering context for the canvas.
+     * @returns {void}
+     */
+    private drawTimeLabels;
+    /**
+     * 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}
+     */
+    private drawTimeLabel;
+    /**
+     * Returns an array of string containing the canvas ID.
+     * @returns {Array<string>} An array of string containing the canvas ID.
+     */
+    getCanvasIds(): Array<string>;
+}

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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]}}

package/dist/chart/components/navigation_map/navigation-map.model.d.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { FullChartConfig } from '../../chart.config';
+import { DateTimeFormatterFactory } from '../../model/date-time.formatter';
+/**
+ * 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 declare function calcTimeLabelBounds(ctx: CanvasRenderingContext2D, timestamp: number, formatterFactory: DateTimeFormatterFactory, config: FullChartConfig): [number, number];
+/**
+ * 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 declare function getFormattedTimeLabel(timestamp: number, format: string, formatterFactory: DateTimeFormatterFactory): string;

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

@@ -0,0 +1,7 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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(`
+`)}

package/dist/chart/components/pan/chart-pan.component.d.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { CanvasAnimation } from '../../animation/canvas-animation';
+import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { FullChartConfig } from '../../chart.config';
+import EventBus from '../../events/event-bus';
+import { ChartBaseElement, ChartEntity } from '../../model/chart-base-element';
+import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
+import { ScaleModel } from '../../model/scale.model';
+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 canvasBoundsContainer;
+    private config;
+    private canvasAnimation;
+    private canvasInputListener;
+    private mainCanvasParent;
+    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>);
+    /**
+     * Activates the chart pan handlers.
+     * @protected
+     * @returns {void}
+     */
+    protected doActivate(): void;
+    /**
+     * This method is used to deactivate the pan handlers.
+     * @returns {void}
+     * @protected
+     */
+    protected doDeactivate(): void;
+    /**
+     * Activates user mouse handlers on main chart view.
+     * @function
+     * @name activateChartPanHandlers
+     * @memberof [object Object]
+     * @instance
+     * @returns {void}
+     */
+    activateChartPanHandlers(): void;
+    /**
+     * Deactivates all the pan handlers of the chart.
+     */
+    deactivatePanHandlers(): void;
+}

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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())}}

package/dist/chart/components/pane/extent/y-extent-component.d.ts

@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { CanvasBoundsContainer } from '../../../canvas/canvas-bounds-container';
+import { Bounds } from '../../../model/bounds.model';
+import { CanvasModel } from '../../../model/canvas.model';
+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 { 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 { PaneHitTestController } from '../pane-hit-test.controller';
+import { ExtentYAxis, PaneComponent, YExtentFormatters } from '../pane.component';
+export interface YExtentCreationOptions {
+    scaleModel: ScaleModel;
+    order: number;
+    useDefaultHighLow: boolean;
+    useDefaultYAxis: boolean;
+    cursor: string;
+    paneFormatters: YExtentFormatters;
+    increment: number | null;
+}
+export declare class YExtentComponent extends ChartBaseElement {
+    paneUuid: string;
+    idx: number;
+    paneComponent: PaneComponent;
+    private chartBaseModel;
+    private canvasBoundsContainer;
+    private hitTestController;
+    dataSeriesCanvasModel: CanvasModel;
+    readonly scaleModel: ScaleModel;
+    readonly yAxisComponent: ExtentYAxis | undefined;
+    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);
+    protected doDeactivate(): void;
+    getYAxisBounds: () => Bounds;
+    yAxisHT: import("../../../canvas/canvas-bounds-container").HitBoundsTest;
+    /**
+     * Returns the bounds of the scale model.
+     * @returns {Bounds} The bounds of the scale model.
+     */
+    getBounds(): Bounds;
+    private toVisualPoints;
+    /**
+     * Creates a new DataSeriesModel object.
+     * @returns {DataSeriesModel} - The newly created DataSeriesModel object.
+     */
+    createDataSeries(): DataSeriesModel;
+    /**
+     * Adds a new data series to the chart.
+     * @param {DataSeriesModel} series - The data series to be added.
+     * @returns {void}
+     */
+    addDataSeries(series: DataSeriesModel): void;
+    /**
+     * Removes a data series from the chart.
+     *
+     * @param {DataSeriesModel} series - The data series to be removed.
+     * @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;
+    /**
+     * Sets the pane value formatters for the current instance.
+     * @param {YExtentFormatters} formatters - The pane value formatters to be set.
+     */
+    setValueFormatters(formatters: YExtentFormatters): void;
+    /**
+     * Returns the regular value from Y coordinate.
+     * @param {number} y - The Y coordinate.
+     * @returns {number} - The regular value.
+     */
+    regularValueFromY(y: number): number;
+}
+export declare const createDefaultYExtentHighLowProvider: (extent: YExtentComponent) => HighLowProvider;

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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)}});

package/dist/chart/components/pane/pane-hit-test.controller.d.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 { CanvasModel } from '../../model/canvas.model';
+import { DataSeriesModel, DataSeriesPoint, VisualSeriesPoint } from '../../model/data-series.model';
+import { HitTestSubscriber } from '../../model/hit-test-canvas.model';
+import { PaneComponent } from './pane.component';
+export declare class PaneHitTestController implements HitTestSubscriber<DataSeriesModel> {
+    private readonly paneComponents;
+    private canvasModel;
+    private dataSeriesIdCounter;
+    constructor(paneComponents: Record<string, PaneComponent>, canvasModel: CanvasModel);
+    getNewDataSeriesHitTestId: () => number;
+    /**
+     * Returns an array with two numbers representing the range of IDs for data series.
+     * @returns {Array<number>} An array with two numbers representing the range of IDs for data series.
+     */
+    getIdRange(): [number, number];
+    get allDataSeries(): DataSeriesModel[];
+    /**
+     * Looks up a data series by its ID.
+     *
+     * @param {number} id - The ID of the data series to look up.
+     * @returns {DataSeriesModel | undefined} - The data series with the given ID, or undefined if it does not exist.
+     */
+    lookup(id: number): DataSeriesModel | undefined;
+    /**
+     * Changes the hovered property of all data series to true if their id matches the id of the provided model.
+     * @param {DataSeriesModel | null} model - The model to compare the id with.
+     * @returns {void}
+     */
+    onHover(model: DataSeriesModel | null): void;
+    onMouseDown(model: DataSeriesModel<DataSeriesPoint, VisualSeriesPoint>): void;
+    onMouseUp(): void;
+    handleYExtentDragStart(model: DataSeriesModel<DataSeriesPoint, VisualSeriesPoint>): void;
+    handleYExtentDragEnd(): void;
+}

package/dist/chart/components/pane/pane-hit-test.controller.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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{HIT_TEST_ID_RANGE as n}from"../../model/hit-test-canvas.model";import{flatMap as r}from"../../utils/array.utils";export class PaneHitTestController{constructor(t,e){this.paneComponents=t,this.canvasModel=e,this.dataSeriesIdCounter=n.DATA_SERIES[0],this.getNewDataSeriesHitTestId=()=>this.dataSeriesIdCounter++}getIdRange(){return n.DATA_SERIES}get allDataSeries(){return r(r(Object.values(this.paneComponents),t=>t.yExtentComponents),t=>Array.from(t.dataSeries))}lookup(t){return this.allDataSeries.find(a=>a.id===t)}onHover(t){this.allDataSeries.forEach(e=>e.hovered=e.id===(t==null?void 0:t.id)),this.canvasModel.fireDraw()}onMouseDown(t){t&&this.handleYExtentDragStart(t)}onMouseUp(){this.handleYExtentDragEnd()}handleYExtentDragStart(t){Object.values(this.paneComponents).forEach(e=>e.yExtentComponents.forEach(a=>a.dragNDrop.deactivate())),t.extentComponent.dragNDrop.activate()}handleYExtentDragEnd(){Object.values(this.paneComponents).forEach(t=>t.yExtentComponents.forEach(e=>e.dragNDrop.activate()))}}

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 } from 'rxjs';
+import { CanvasAnimation } from '../../animation/canvas-animation';
+import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
+import { CursorHandler } from '../../canvas/cursor.handler';
+import { FullChartConfig } from '../../chart.config';
+import { DrawingManager } from '../../drawers/drawing-manager';
+import EventBus from '../../events/event-bus';
+import { CrossEventProducerComponent } from '../../inputhandlers/cross-event-producer.component';
+import { CanvasInputListenerComponent, Point } from '../../inputlisteners/canvas-input-listener.component';
+import { CanvasModel } from '../../model/canvas.model';
+import { ChartBaseElement, ChartEntity } from '../../model/chart-base-element';
+import { ScaleModel } from '../../model/scale.model';
+import { AtLeastOne } from '../../utils/object.utils';
+import { ChartBaseModel } from '../chart/chart-base.model';
+import { ChartPanComponent } from '../pan/chart-pan.component';
+import { YExtentCreationOptions } from './extent/y-extent-component';
+import { PaneHitTestController } from './pane-hit-test.controller';
+import { PaneComponent } from './pane.component';
+export declare class PaneManager extends ChartBaseElement {
+    private chartBaseModel;
+    private userInputListenerComponents;
+    private eventBus;
+    private mainScaleModel;
+    private canvasBoundsContainer;
+    private config;
+    private canvasAnimation;
+    private canvasInputListener;
+    private drawingManager;
+    private dataSeriesCanvasModel;
+    private cursorHandler;
+    private crossEventProducer;
+    chartPanComponent: ChartPanComponent;
+    private mainCanvasModel;
+    paneComponents: Record<string, PaneComponent>;
+    panesChangedSubject: Subject<Record<string, PaneComponent>>;
+    hitTestController: PaneHitTestController;
+    /**
+     * Returns order of panes in the chart from top to bottom.
+     */
+    get panesOrder(): string[];
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, dataSeriesCanvasModel: CanvasModel, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel);
+    private addBounds;
+    /**
+     * Adds a resizer to the canvas bounds container for the given uuid.
+     * @param {string} uuid - The uuid of the pane to which the resizer is to be added.
+     * @returns {BarResizerComponent} - The BarResizerComponent instance that was added to the userInputListenerComponents array.
+     */
+    private addResizer;
+    /**
+     * Returns the pane component that contains the given point.
+     * @param {Point} point - The point to check.
+     * @returns {PaneComponent | undefined} - The pane component that contains the point or undefined if no pane contains it.
+     */
+    getPaneIfHit(point: Point): PaneComponent | undefined;
+    /**
+     * Creates sub-plot on the chart with y-axis
+     * @param uuid
+     * @returns
+     */
+    createPane(uuid?: string, options?: AtLeastOne<YExtentCreationOptions>): PaneComponent;
+    /**
+     * Removes pane from the chart and all related components
+     * @param uuid
+     */
+    removePane(uuid: string): void;
+    /**
+     * Adds cursors to the chart elements based on the provided uuid and cursor type.
+     * @private
+     * @param {string} uuid - The unique identifier for the chart element.
+     * @param {string} [cursor=this.config.components.chart.cursor] - The type of cursor to be added to the chart element.
+     * @returns {void}
+     */
+    private addCursors;
+    /**
+     * Recalculates the zoom Y of all pane components and fires a draw event on the event bus.
+     * @function
+     * @name recalculateState
+     * @memberof PaneManager
+     * @returns {void}
+     */
+    recalculateState(): void;
+}

package/dist/chart/components/pane/pane-manager.component.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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 v}from"rxjs";import{CHART_UUID as f,CanvasElement as a}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as g}from"../../model/chart-base-element";import{uuid as E}from"../../utils/uuid.utils";import{createHighLowOffsetCalculator as P}from"../chart/data-series.high-low-provider";import{BarResizerComponent as B}from"../resizer/bar-resizer.component";import{createDefaultYExtentHighLowProvider as M}from"./extent/y-extent-component";import{PaneHitTestController as S}from"./pane-hit-test.controller";import{PaneComponent as I}from"./pane.component";export class PaneManager extends g{get panesOrder(){return this.canvasBoundsContainer.panesOrder}constructor(e,s,n,t,o,r,c,h,d,p,l,m,u,C){super(),this.chartBaseModel=e,this.userInputListenerComponents=s,this.eventBus=n,this.mainScaleModel=t,this.canvasBoundsContainer=o,this.config=r,this.canvasAnimation=c,this.canvasInputListener=h,this.drawingManager=d,this.dataSeriesCanvasModel=p,this.cursorHandler=l,this.crossEventProducer=m,this.chartPanComponent=u,this.mainCanvasModel=C,this.paneComponents={},this.panesChangedSubject=new v,this.hitTestController=new S(this.paneComponents,this.dataSeriesCanvasModel);const i=this.createPane(f,{useDefaultHighLow:!1,scaleModel:this.mainScaleModel,useDefaultYAxis:!1});i.mainYExtentComponent.scaleModel.autoScaleModel.setHighLowProvider("series",M(i.mainYExtentComponent)),t.autoScaleModel.setHighLowPostProcessor("offsets",P(()=>this.mainScaleModel.getOffsets()))}addBounds(e,s){return this.canvasBoundsContainer.addPaneBounds(e,s),()=>this.canvasBoundsContainer.removedPaneBounds(e)}addResizer(e){const s=this.canvasBoundsContainer.getBoundsHitTest(a.PANE_UUID_RESIZER(e),{extensionY:this.config.components.paneResizer.dragZone}),n=()=>{this.canvasBoundsContainer.resizePaneVertically(e,this.canvasInputListener.getCurrentPoint().y),this.eventBus.fireDraw([this.mainCanvasModel.canvasId,"overDataSeriesCanvas"])},t=a.PANE_UUID_RESIZER(e),o=new B(t,()=>this.canvasBoundsContainer.getBounds(t),s,n,this.chartPanComponent,this.mainCanvasModel,this.drawingManager,this.canvasInputListener,this.canvasAnimation,this.config,this.canvasBoundsContainer);return this.userInputListenerComponents.push(o),o}getPaneIfHit(e){return Object.values(this.paneComponents).find(n=>this.canvasBoundsContainer.getBoundsHitTest(a.PANE_UUID(n.uuid))(e.x,e.y))}createPane(e=E(),s){if(this.paneComponents[e]!==void 0)return this.paneComponents[e];const n=new I(this.chartBaseModel,this.hitTestController,this.config,this.mainScaleModel,this.drawingManager,this.chartPanComponent,this.mainCanvasModel,this.canvasInputListener,this.userInputListenerComponents,this.canvasAnimation,this.cursorHandler,this.eventBus,this.canvasBoundsContainer,e,this.dataSeriesCanvasModel,s);return this.config.components.paneResizer.visible&&n.addChildEntity(this.addResizer(e)),n.addSubscription(this.addBounds(e,s==null?void 0:s.order)),n.addSubscription(this.addCursors(e)),n.addSubscription(this.crossEventProducer.subscribeMouseOverHT(e,n.ht)),this.paneComponents[e]=n,n.activate(),this.recalculateState(),n.mainYExtentComponent.scaleModel.autoScale(!0),this.panesChangedSubject.next(this.paneComponents),n}removePane(e){const s=this.paneComponents[e];s!==void 0&&(s.disable(),s.yExtentComponents.forEach(n=>n.disable()),delete this.paneComponents[e],this.recalculateState(),this.panesChangedSubject.next(this.paneComponents))}addCursors(e,s=this.config.components.chart.cursor){const n=a.PANE_UUID(e),t=a.PANE_UUID_RESIZER(e);return this.cursorHandler.setCursorForCanvasEl(n,s),this.config.components.paneResizer.visible&&this.cursorHandler.setCursorForCanvasEl(t,this.config.components.paneResizer.cursor,this.config.components.paneResizer.dragZone),()=>{this.cursorHandler.removeCursorForCanvasEl(n),this.config.components.paneResizer.visible&&this.cursorHandler.removeCursorForCanvasEl(t)}}recalculateState(){Object.values(this.paneComponents).forEach(e=>e.scaleModel.recalculateZoomY()),this.eventBus.fireDraw([this.mainCanvasModel.canvasId,"overDataSeriesCanvas"])}}