@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

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

@@ -8,10 +8,10 @@ import { DataSeriesModel, DataSeriesPoint, VisualSeriesPoint } from '../../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 readonly panes;
     private canvasModel;
     private dataSeriesIdCounter;
-    constructor(paneComponents: Record<string, PaneComponent>, canvasModel: CanvasModel);
+    constructor(panes: Record<string, PaneComponent>, canvasModel: CanvasModel);
     getNewDataSeriesHitTestId: () => number;
     /**
      * Returns an array with two numbers representing the range of IDs for data series.

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

@@ -3,4 +3,58 @@
  * 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()))}}
+import { HIT_TEST_ID_RANGE } from '../../model/hit-test-canvas.model';
+import { flatMap } from '../../utils/array.utils';
+export class PaneHitTestController {
+    constructor(panes, canvasModel) {
+        this.panes = panes;
+        this.canvasModel = canvasModel;
+        // used in hit test for creating series
+        this.dataSeriesIdCounter = HIT_TEST_ID_RANGE.DATA_SERIES[0];
+        this.getNewDataSeriesHitTestId = () => {
+            return this.dataSeriesIdCounter++;
+        };
+    }
+    /**
+     * 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() {
+        return HIT_TEST_ID_RANGE.DATA_SERIES;
+    }
+    get allDataSeries() {
+        return flatMap(flatMap(Object.values(this.panes), c => c.yExtentComponents), p => Array.from(p.dataSeries));
+    }
+    /**
+     * 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) {
+        const result = this.allDataSeries.find(d => d.id === id);
+        return result;
+    }
+    /**
+     * 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) {
+        this.allDataSeries.forEach(d => (d.hovered = d.id === (model === null || model === void 0 ? void 0 : model.id)));
+        this.canvasModel.fireDraw();
+    }
+    onMouseDown(model) {
+        model && this.handleYExtentDragStart(model);
+    }
+    onMouseUp() {
+        this.handleYExtentDragEnd();
+    }
+    handleYExtentDragStart(model) {
+        Object.values(this.panes).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.deactivate()));
+        model.extentComponent.dragNDrop.activate();
+    }
+    handleYExtentDragEnd() {
+        Object.values(this.panes).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.activate()));
+    }
+}

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

@@ -18,32 +18,37 @@ 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 { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
 import { PaneComponent } from './pane.component';
+import { DataSeriesModel } from '../../model/data-series.model';
 export declare class PaneManager extends ChartBaseElement {
     private chartBaseModel;
+    private dynamicObjectsCanvasModel;
     private userInputListenerComponents;
     private eventBus;
-    private mainScaleModel;
+    private mainScale;
     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>>;
+    private yAxisLabelsCanvasModel;
+    panes: Record<string, PaneComponent>;
+    paneRemovedSubject: Subject<PaneComponent>;
+    paneAddedSubject: Subject<Record<string, PaneComponent>>;
     hitTestController: PaneHitTestController;
+    dataSeriesAddedSubject: Subject<DataSeriesModel>;
+    dataSeriesRemovedSubject: Subject<DataSeriesModel>;
     /**
      * 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);
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, dynamicObjectsCanvasModel: CanvasModel, userInputListenerComponents: ChartEntity[], eventBus: EventBus, mainScale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, config: FullChartConfig, canvasAnimation: CanvasAnimation, canvasInputListener: CanvasInputListenerComponent, drawingManager: DrawingManager, cursorHandler: CursorHandler, crossEventProducer: CrossEventProducerComponent, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel);
     private addBounds;
     /**
      * Adds a resizer to the canvas bounds container for the given uuid.
@@ -51,6 +56,7 @@ export declare class PaneManager extends ChartBaseElement {
      * @returns {BarResizerComponent} - The BarResizerComponent instance that was added to the userInputListenerComponents array.
      */
     private addResizer;
+    get yExtents(): YExtentComponent[];
     /**
      * Returns the pane component that contains the given point.
      * @param {Point} point - The point to check.

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

@@ -3,4 +3,152 @@
  * 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"])}}
+import { Subject } from 'rxjs';
+import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { uuid as generateUuid } from '../../utils/uuid.utils';
+import { createHighLowOffsetCalculator } from '../chart/data-series.high-low-provider';
+import { BarResizerComponent } from '../resizer/bar-resizer.component';
+import { createDefaultYExtentHighLowProvider, } from './extent/y-extent-component';
+import { PaneHitTestController } from './pane-hit-test.controller';
+import { PaneComponent } from './pane.component';
+import { flatMap } from '../../utils/array.utils';
+export class PaneManager extends ChartBaseElement {
+    /**
+     * Returns order of panes in the chart from top to bottom.
+     */
+    get panesOrder() {
+        return this.canvasBoundsContainer.panesOrder;
+    }
+    constructor(chartBaseModel, dynamicObjectsCanvasModel, userInputListenerComponents, eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, cursorHandler, crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel) {
+        super();
+        this.chartBaseModel = chartBaseModel;
+        this.dynamicObjectsCanvasModel = dynamicObjectsCanvasModel;
+        this.userInputListenerComponents = userInputListenerComponents;
+        this.eventBus = eventBus;
+        this.mainScale = mainScale;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+        this.canvasAnimation = canvasAnimation;
+        this.canvasInputListener = canvasInputListener;
+        this.drawingManager = drawingManager;
+        this.cursorHandler = cursorHandler;
+        this.crossEventProducer = crossEventProducer;
+        this.chartPanComponent = chartPanComponent;
+        this.mainCanvasModel = mainCanvasModel;
+        this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.panes = {};
+        this.paneRemovedSubject = new Subject();
+        this.paneAddedSubject = new Subject();
+        this.dataSeriesAddedSubject = new Subject();
+        this.dataSeriesRemovedSubject = new Subject();
+        this.hitTestController = new PaneHitTestController(this.panes, this.dynamicObjectsCanvasModel);
+        const mainPane = this.createPane(CHART_UUID, {
+            useDefaultHighLow: false,
+            scale: this.mainScale,
+        });
+        mainPane.mainExtent.scale.autoScaleModel.setHighLowProvider('series', createDefaultYExtentHighLowProvider(mainPane.mainExtent));
+        mainScale.autoScaleModel.setHighLowPostProcessor('offsets', createHighLowOffsetCalculator(() => this.mainScale.getOffsets()));
+    }
+    addBounds(uuid, order) {
+        this.canvasBoundsContainer.addPaneBounds(uuid, order);
+        return () => this.canvasBoundsContainer.removedPaneBounds(uuid);
+    }
+    /**
+     * 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.
+     */
+    addResizer(uuid) {
+        const resizerHT = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID_RESIZER(uuid), {
+            extensionY: this.config.components.paneResizer.dragZone,
+        });
+        const dragTick = () => {
+            this.canvasBoundsContainer.resizePaneVertically(uuid, this.canvasInputListener.getCurrentPoint().y);
+            this.eventBus.fireDraw([this.mainCanvasModel.canvasId, 'dynamicObjectsCanvas']);
+        };
+        const resizerId = CanvasElement.PANE_UUID_RESIZER(uuid);
+        const barResizerComponent = new BarResizerComponent(resizerId, () => this.canvasBoundsContainer.getBounds(resizerId), resizerHT, dragTick, this.chartPanComponent, this.mainCanvasModel, this.drawingManager, this.canvasInputListener, this.canvasAnimation, this.config, this.canvasBoundsContainer);
+        this.userInputListenerComponents.push(barResizerComponent);
+        return barResizerComponent;
+    }
+    get yExtents() {
+        return flatMap(Object.values(this.panes), c => c.yExtentComponents);
+    }
+    /**
+     * 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) {
+        const panes = Object.values(this.panes);
+        return panes.find(p => this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID(p.uuid))(point.x, point.y));
+    }
+    /**
+     * Creates sub-plot on the chart with y-axis
+     * @param uuid
+     * @returns
+     */
+    createPane(uuid = generateUuid(), options) {
+        if (this.panes[uuid] !== undefined) {
+            return this.panes[uuid];
+        }
+        const paneComponent = new PaneComponent(this.chartBaseModel, this.mainCanvasModel, this.yAxisLabelsCanvasModel, this.dynamicObjectsCanvasModel, this.hitTestController, this.config, this.mainScale, this.drawingManager, this.chartPanComponent, this.canvasInputListener, this.canvasAnimation, this.cursorHandler, this.eventBus, this.canvasBoundsContainer, uuid, this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, options);
+        // TODO: is resizer should be added always?
+        if (this.config.components.paneResizer.visible) {
+            paneComponent.addChildEntity(this.addResizer(uuid));
+        }
+        paneComponent.addSubscription(this.addBounds(uuid, options === null || options === void 0 ? void 0 : options.order));
+        paneComponent.addSubscription(this.addCursors(uuid));
+        paneComponent.addSubscription(this.crossEventProducer.subscribeMouseOverHT(uuid, paneComponent.ht));
+        this.panes[uuid] = paneComponent;
+        paneComponent.activate();
+        this.recalculateState();
+        paneComponent.mainExtent.scale.autoScale(true);
+        this.paneAddedSubject.next(this.panes);
+        return paneComponent;
+    }
+    /**
+     * Removes pane from the chart and all related components
+     * @param uuid
+     */
+    removePane(uuid) {
+        const pane = this.panes[uuid];
+        if (pane !== undefined) {
+            this.paneRemovedSubject.next(pane);
+            pane.disable();
+            pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
+            delete this.panes[uuid];
+            this.recalculateState();
+        }
+    }
+    /**
+     * 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}
+     */
+    addCursors(uuid, cursor = this.config.components.chart.cursor) {
+        const pane = CanvasElement.PANE_UUID(uuid);
+        const paneResizer = CanvasElement.PANE_UUID_RESIZER(uuid);
+        this.cursorHandler.setCursorForCanvasEl(pane, cursor);
+        this.config.components.paneResizer.visible &&
+            this.cursorHandler.setCursorForCanvasEl(paneResizer, this.config.components.paneResizer.cursor, this.config.components.paneResizer.dragZone);
+        return () => {
+            this.cursorHandler.removeCursorForCanvasEl(pane);
+            this.config.components.paneResizer.visible && this.cursorHandler.removeCursorForCanvasEl(paneResizer);
+        };
+    }
+    /**
+     * 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() {
+        Object.values(this.panes).forEach(state => state.scale.recalculateZoomY());
+        this.eventBus.fireDraw([this.mainCanvasModel.canvasId, 'dynamicObjectsCanvas']);
+    }
+}

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

@@ -3,62 +3,56 @@
  * 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, HitBoundsTest } from '../../canvas/canvas-bounds-container';
 import { CursorHandler } from '../../canvas/cursor.handler';
-import { ChartConfigComponentsYAxis, FullChartConfig } from '../../chart.config';
+import { FullChartConfig } from '../../chart.config';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
 import { Bounds } from '../../model/bounds.model';
 import { CanvasModel } from '../../model/canvas.model';
-import { ChartBaseElement, ChartEntity } from '../../model/chart-base-element';
+import { ChartBaseElement } from '../../model/chart-base-element';
 import { DataSeriesModel } from '../../model/data-series.model';
 import { ScaleModel } from '../../model/scale.model';
-import { Unit } from '../../model/scaling/viewport.model';
-import { Unsubscriber } from '../../utils/function.utils';
+import { Pixel, Price, Unit } from '../../model/scaling/viewport.model';
 import { AtLeastOne } from '../../utils/object.utils';
 import { ChartBaseModel } from '../chart/chart-base.model';
 import { PriceAxisType } from '../labels_generator/numeric-axis-labels.generator';
 import { ChartPanComponent } from '../pan/chart-pan.component';
-import { NumericYAxisLabelsGenerator } from '../y_axis/numeric-y-axis-labels.generator';
-import { YAxisScaleHandler } from '../y_axis/y-axis-scale.handler';
-import { YAxisDrawer } from '../y_axis/y-axis.drawer';
+import { YAxisComponent } from '../y_axis/y-axis.component';
 import { YExtentComponent, YExtentCreationOptions } from './extent/y-extent-component';
 import { PaneHitTestController } from './pane-hit-test.controller';
-export interface ExtentYAxis {
-    labelsGenerator: NumericYAxisLabelsGenerator;
-    drawer: YAxisDrawer;
-    yAxisScaleHandler: YAxisScaleHandler;
-    state: ChartConfigComponentsYAxis;
-    unsub: Unsubscriber;
-}
 export declare class PaneComponent extends ChartBaseElement {
     chartBaseModel: ChartBaseModel<'candle'>;
+    private mainCanvasModel;
+    private yAxisLabelsCanvasModel;
+    readonly dynamicObjectsCanvasModel: CanvasModel;
     private hitTestController;
     private config;
-    private mainScaleModel;
+    private mainScale;
     private drawingManager;
     private chartPanComponent;
-    private mainCanvasModel;
     private canvasInputListener;
-    private userInputListenerComponents;
     private canvasAnimation;
     private cursorHandler;
     eventBus: EventBus;
     private canvasBoundsContainer;
     readonly uuid: string;
-    readonly dataSeriesCanvasModel: CanvasModel;
+    seriesAddedSubject: Subject<DataSeriesModel>;
+    seriesRemovedSubject: Subject<DataSeriesModel>;
     private _paneOrder;
     /**
      * Pane hit test (without Y-Axis and resizer)
      */
     ht: HitBoundsTest;
     yExtentComponents: YExtentComponent[];
-    get scaleModel(): ScaleModel;
+    get scale(): ScaleModel;
+    get yAxis(): YAxisComponent;
     get dataSeries(): DataSeriesModel<import("../../model/data-series.model").DataSeriesPoint, import("../../model/data-series.model").VisualSeriesPoint>[];
-    mainYExtentComponent: YExtentComponent;
-    constructor(chartBaseModel: ChartBaseModel<'candle'>, hitTestController: PaneHitTestController, config: FullChartConfig, mainScaleModel: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, mainCanvasModel: CanvasModel, canvasInputListener: CanvasInputListenerComponent, userInputListenerComponents: ChartEntity[], canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, dataSeriesCanvasModel: CanvasModel, options?: AtLeastOne<YExtentCreationOptions>);
+    mainExtent: YExtentComponent;
+    constructor(chartBaseModel: ChartBaseModel<'candle'>, mainCanvasModel: CanvasModel, yAxisLabelsCanvasModel: CanvasModel, dynamicObjectsCanvasModel: CanvasModel, hitTestController: PaneHitTestController, config: FullChartConfig, mainScale: ScaleModel, drawingManager: DrawingManager, chartPanComponent: ChartPanComponent, canvasInputListener: CanvasInputListenerComponent, canvasAnimation: CanvasAnimation, cursorHandler: CursorHandler, eventBus: EventBus, canvasBoundsContainer: CanvasBoundsContainer, uuid: string, seriesAddedSubject: Subject<DataSeriesModel>, seriesRemovedSubject: Subject<DataSeriesModel>, options?: AtLeastOne<YExtentCreationOptions>);
     /**
      * Method that activates the canvas bounds container and recalculates the zoom Y of the scale model.
      * @protected
@@ -66,17 +60,7 @@ export declare class PaneComponent extends ChartBaseElement {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * Creates a Y-axis component for the chart.
-     * @private
-     * @param {string} uuid - The unique identifier of the chart pane.
-     * @param {ScaleModel} scaleModel - The scale model for the chart.
-     * @param {(value: number) => string} formatter - The function to format the Y-axis labels.
-     * @param {Unsubscriber[]} subs - The array of unsubscriber functions.
-     * @param {number | null} increment - The increment value for the Y-axis labels.
-     * @returns {[NumericYAxisLabelsGenerator, YAxisDrawer, YAxisScaleHandler]} - An array containing the Y-axis labels generator, Y-axis drawer, and Y-axis scale handler.
-     */
-    private createYAxisComponent;
+    toY(price: Price): Pixel;
     /**
      * Creates a new GridComponent instance with the provided parameters.
      * @param {string} uuid - The unique identifier of the pane.