@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/bootstrap.js

@@ -1,6 +1,454 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{merge as Y}from"rxjs";import{CanvasAnimation as N}from"./animation/canvas-animation";import{CHART_UUID as W,CanvasBoundsContainer as Z,CanvasElement as x}from"./canvas/canvas-bounds-container";import{CursorHandler as X}from"./canvas/cursor.handler";import{createDefaultLayoutTemplate as j,extractElements as q}from"./canvas/layout-creator";import{mergeWithDefaultConfig as J}from"./chart.config";import{ChartBaseModel as K}from"./components/chart/chart-base.model";import{ChartComponent as Q}from"./components/chart/chart.component";import{ChartModel as $}from"./components/chart/chart.model";import{CrossToolComponent as tt}from"./components/cross_tool/cross-tool.component";import{EventsComponent as et}from"./components/events/events.component";import{GridComponent as st}from"./components/grid/grid.component";import{HighLowComponent as nt}from"./components/high_low/high-low.component";import{HighlightsComponent as ot}from"./components/highlights/highlights.component";import{NavigationMapComponent as it}from"./components/navigation_map/navigation-map.component";import{ChartPanComponent as rt}from"./components/pan/chart-pan.component";import{PaneManager as at}from"./components/pane/pane-manager.component";import{SnapshotComponent as ht}from"./components/snapshot/snapshot.component";import{VolumesComponent as ct}from"./components/volumes/volumes.component";import{WaterMarkComponent as mt}from"./components/watermark/water-mark.component";import{XAxisComponent as dt}from"./components/x_axis/x-axis.component";import{YAxisComponent as pt}from"./components/y_axis/y-axis.component";import{ClearCanvasDrawer as S}from"./drawers/clear-canvas.drawer";import{DrawingManager as lt}from"./drawers/drawing-manager";import Ct from"./events/event-bus";import{EVENT_DRAW as ut}from"./events/events";import{CandleTapHandler as vt}from"./inputhandlers/candle-tap.handler";import{ChartResizeHandler as gt}from"./inputhandlers/chart-resize.handler";import{CrossEventProducerComponent as ft}from"./inputhandlers/cross-event-producer.component";import{HoverProducerComponent as Mt}from"./inputhandlers/hover-producer.component";import{CanvasInputListenerComponent as wt}from"./inputlisteners/canvas-input-listener.component";import{createCanvasModel as f,createMainCanvasModel as bt}from"./model/canvas.model";import{HitTestCanvasModel as Tt}from"./model/hit-test-canvas.model";import{ScaleModel as Et}from"./model/scale.model";import{TimeZoneModel as Ht}from"./model/time-zone.model";import{clearerSafe as At}from"./utils/function.utils";import{merge as St}from"./utils/merge.utils";export default class B{constructor(t,n={}){var s,h;this.components=[],this.chartComponents=[],this.userInputListenerComponents=[],this.canvasModels=[],this.parentElement=t;const e=n;J(e),this.config=e;const M=j(e);t.innerHTML="",t.appendChild(M.content),this.id=(s=t.getAttribute("data-id"))!==null&&s!==void 0?s:"",e.fixedSize&&(t.style.width=e.fixedSize.width+"px",t.style.height=e.fixedSize.height+"px");const C=new Ht(e);this.timeZoneModel=C;const w=this.timeZoneModel.getFormatterFactory(),r=q(t);this.elements=r;const i=new Ct;this.bus=i;const u=new gt(t,(h=r.chartResizer)!==null&&h!==void 0?h:t,i,this.canvasModels,e);this.chartResizeHandler=u,u.subscribeResize(),this.components.push(u.unsubscribeAnimationUpdate.bind(u));const o=new lt(i,u);this.drawingManager=o;const p=bt(i,r.mainCanvas,r.chartResizer,this.config.components.chart.type,this.config,o,this.canvasModels);this.mainCanvasModel=p;const E=f(i,r.overDataSeriesCanvas,e,o,this.canvasModels,r.chartResizer);this.overSeriesCanvasModel=E;const I=new S(E);o.addDrawer(I,"OVER_SERIES_CLEAR"),this.dataSeriesCanvasModel=f(i,r.dataSeriesCanvas,e,o,this.canvasModels,r.chartResizer);const D=new S(this.dataSeriesCanvasModel);o.addDrawer(D,"SERIES_CLEAR");const F=f(i,r.yAxisLabelsCanvas,e,o,this.canvasModels,r.chartResizer),a=new Z(e,i,p,w,u);this.canvasBoundsContainer=a;const b=r.mainCanvas.parentElement;if(b===null)throw new Error("Couldn't get main canvas parent");const c=new wt(i,b);this.canvasInputListener=c,this.chartComponents.push(this.canvasInputListener);const g=new Tt(i,r.hitTestCanvas,c,a,o,e,this.canvasModels,r.chartResizer);this.hitTestCanvasModel=g;const P=new S(g);o.addDrawer(P,"HIT_TEST_CLEAR");const H=new N(i);this.canvasAnimation=H;const m=new Et(e,()=>a.getBounds(x.CHART),H);this.scaleModel=m;const T=f(i,r.backgroundCanvas,e,o,this.canvasModels,r.chartResizer,{willReadFrequently:!0});this.backgroundCanvasModel=T,this.cursorHandler=new X(r.canvasArea,c,a,g),this.chartComponents.push(this.cursorHandler),this.crossEventProducer=new ft(c,a),this.chartComponents.push(this.crossEventProducer);const L=new K("candle"),v=new rt(i,m,a,e,H,c,b,L);this.chartPanComponent=v,this.chartComponents.push(v),this.userInputListenerComponents.push(v.chartAreaPanHandler);const l=new at(L,this.userInputListenerComponents,i,m,a,e,H,c,o,this.dataSeriesCanvasModel,this.cursorHandler,this.crossEventProducer,v,p);this.paneManager=l,this.chartComponents.push(l),this.chartModel=new $(L,l,i,this.dataSeriesCanvasModel,e,m,w,b,a,u);const A=new Q(this.chartModel,this.dataSeriesCanvasModel,e,m,a,o,g,c,T,v,l,this.cursorHandler);this.chartComponents.push(A),this.chartComponent=A;const d=this.chartComponent.chartModel;this.chartModel=d,this.canvasBoundsContainer.setMainCandleSeries(this.chartModel.mainCandleSeries),g.addSubscriber(l.hitTestController),this.xAxisComponent=new dt(i,e,p,A,m,a,c,u,this.drawingManager,C,v,this.cursorHandler,T),this.chartComponents.push(this.xAxisComponent),this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);const z=new S(p);o.addDrawer(z,"MAIN_CLEAR");const _=new vt(b,d,c,e);this.chartComponents.push(_),this.watermarkComponent=new mt(l,d,i,e,a,E,o),this.chartComponents.push(this.watermarkComponent);const U=f(i,r.crossToolCanvas,e,o,this.canvasModels,r.chartResizer);this.highlightsComponent=new ot(i,e,d,p,a,o),this.chartComponents.push(this.highlightsComponent),e.useUTCTimeOverride&&e.dateFormatter&&!e.dateFormatter.utcTimeOverride&&(e.dateFormatter.utcTimeOverride=this.createUTCTimeOverrideConfig(d)),this.navigationMapComponent=new it(i,d,p,e,c,a,o,w,v,this.cursorHandler),this.chartComponents.push(this.navigationMapComponent),this.userInputListenerComponents.push(this.navigationMapComponent.navigationMapMoveHandler);const O=new nt(e,this.dataSeriesCanvasModel,d,a,o);this.chartComponents.push(O),this.yAxisComponent=new pt(i,e,p,F,T,d,m,this.canvasInputListener,a,this.drawingManager,v,l,this.cursorHandler),this.chartComponents.push(this.yAxisComponent),this.userInputListenerComponents.push(this.yAxisComponent.yAxisScaleHandler),this.volumesComponent=new ct(this.dataSeriesCanvasModel,A,m,a,o,e,l,this.yAxisComponent),this.chartComponents.push(this.volumesComponent);const V=new st(p,m,e,"GRID",o,()=>this.canvasBoundsContainer.getBounds(x.ALL_PANES),()=>this.canvasBoundsContainer.getBounds(x.PANE_UUID(W)),()=>this.xAxisComponent.xAxisLabelsGenerator.labels,()=>this.yAxisComponent.yAxisModel.yAxisBaseLabelsModel.labels,()=>this.chartModel.toY(this.chartModel.getBaseLine()),()=>e.components.grid.visible);this.chartComponents.push(V),this.hoverProducer=new Mt(this.crossEventProducer,m,e,d,c,this.canvasBoundsContainer,this.paneManager,C,w),this.chartComponents.push(this.hoverProducer),this.crossToolComponent=new tt(e,U,a,o,l,this.crossEventProducer,this.hoverProducer),this.chartComponents.push(this.crossToolComponent);const k=f(i,r.snapshotCanvas,e,o,this.canvasModels,r.chartResizer),R=new ht(this.elements,k);this.snapshotComponent=R,this.chartComponents.push(R);const y=new et(e,E,g,d,a,o,w,this.cursorHandler,T);this.eventsComponent=y,this.chartComponents.push(y),this.chartComponents.forEach(G=>G.activate()),this.enableUserControls(),o.reorderDrawers(e.drawingOrder),this.clearer=At(this.components)}createUTCTimeOverrideConfig(t){const n=new RegExp("HH|H|mm|m|s|ss|sss|SSS");return{pattern:"MM/dd/YY",test:s=>n.test(s)&&(t.getPeriod()||0)>=86400}}static mergeConfig(t,n){for(const s in n)s in t?typeof t[s]=="object"&&B.mergeConfig(t[s],n[s]):t[s]=n[s];return t}getConfig(){return this.config}setRtl(t){this.config.rtl=t,this.bus.fire(ut)}setChartType(t){this.chartComponent.setChartType(t)}disableUserControls(){this.userInputListenerComponents.forEach(t=>t.deactivate()),this.hitTestCanvasModel.disableUserControls()}enableUserControls(){this.userInputListenerComponents.forEach(t=>t.activate()),this.hitTestCanvasModel.enableUserControls()}setGridConfig(t){var n,s,h,e,M;const C=this.config.components.grid;C.visible=(n=t.visible)!==null&&n!==void 0?n:!1,C.dash=(s=t.dash)!==null&&s!==void 0?s:[0,0],C.width=(h=t.width)!==null&&h!==void 0?h:1,C.color=(e=t.color)!==null&&e!==void 0?e:"#FFFFFF",this.config.colors.chartAreaTheme.gridColor=(M=t.color)!==null&&M!==void 0?M:"#FFFFFF",this.redraw()}setGridVisible(t){this.config.components&&this.config.components.grid&&(this.config.components.grid.visible=t,this.redraw())}setGridVertical(t){this.config.components.grid.vertical=t,this.redraw()}setGridHorizontal(t){this.config.components.grid.horizontal=t,this.redraw()}deactivate(){this.clearer(),this.disableUserControls(),this.chartComponents.forEach(t=>t.deactivate())}redraw(){this.bus.fireDraw()}getOffsets(){return this.config.components&&this.config.components.offsets}showSeparateVolumes(t=!1){this.volumesComponent&&(this.volumesComponent.setShowVolumesSeparatly(t),this.canvasBoundsContainer.updateYAxisWidths())}setAutoScale(t=!0){this.scaleModel.autoScale(t)}setShowCandleBorders(t=!0){this.config.components&&this.config.components.chart&&(this.config.components.chart.showCandlesBorder=t,this.redraw())}valueToY(t){return this.chartModel.toY(t)}setHighLowVisible(t=!0){this.config.components&&this.config.components.highLow&&(this.config.components.highLow.visible=t,this.redraw())}setCrossToolVisible(t="cross-and-labels"){this.config.components&&this.config.components.crossTool&&(this.config.components.crossTool.type=t,this.redraw())}setHighlightsVisible(t=!0){var n;!((n=this.config.components)===null||n===void 0)&&n.highlights&&(this.config.components.highlights.visible=t,this.redraw())}setHighlightsData(t){this.highlightsComponent.setHighlights(t)}setColors(t){St(this.config.colors,t,{addIfMissing:!0,overrideExisting:!0}),this.redraw()}addMouseMoveOnChartElementHandler(t,n){const s=this.canvasBoundsContainer.getBoundsHitTest(t),h=this.canvasInputListener.observeMouseMove(s).subscribe(n);return()=>h.unsubscribe()}addMouseEnterOnChartElementHandler(t,n,s=!1){const h=this.canvasBoundsContainer.getBoundsHitTest(t),e=this.canvasInputListener.observeMouseEnter(h,s).subscribe(n);return()=>e.unsubscribe()}addClickOnChartElementHandler(t,n){const s=this.canvasBoundsContainer.getBoundsHitTest(t),h=this.canvasInputListener.observeClick(s).subscribe(n);return()=>h.unsubscribe()}addDragEventsListener(t,n){const s=this.canvasBoundsContainer.getBoundsHitTest(t),h=Y(this.canvasInputListener.observeYDrag(s),this.canvasInputListener.observeXDrag(s)).subscribe(n);return()=>h.unsubscribe()}destroy(){this.bus.setMuted(!0),this.chartComponents.forEach(t=>t.disable()),this.parentElement.childNodes.forEach(t=>t.remove()),this.parentElement.style.width="",this.parentElement.style.height=""}registerComponent(t,n){const s=t(this);this.components.push(s),n&&n(s),s.activate()}registerPaneFormatters(t,n){var s;(s=this.paneManager.paneComponents[t])===null||s===void 0||s.setPaneValueFormatters(n)}}
+import { merge as mergeRx } from 'rxjs';
+import { CanvasAnimation } from './animation/canvas-animation';
+import { CHART_UUID, CanvasBoundsContainer, CanvasElement } from './canvas/canvas-bounds-container';
+import { CursorHandler } from './canvas/cursor.handler';
+import { createDefaultLayoutTemplate, extractElements } from './canvas/layout-creator';
+import { mergeWithDefaultConfig } from './chart.config';
+import { ChartBaseModel } from './components/chart/chart-base.model';
+import { ChartComponent } from './components/chart/chart.component';
+import { ChartModel } from './components/chart/chart.model';
+import { CrossToolComponent } from './components/cross_tool/cross-tool.component';
+import { DynamicObjectsComponent } from './components/dynamic-objects/dynamic-objects.component';
+import { EventsComponent } from './components/events/events.component';
+import { GridComponent } from './components/grid/grid.component';
+import { HighLowComponent } from './components/high_low/high-low.component';
+import { HighlightsComponent } from './components/highlights/highlights.component';
+import { NavigationMapComponent } from './components/navigation_map/navigation-map.component';
+import { ChartPanComponent } from './components/pan/chart-pan.component';
+import { PaneManager } from './components/pane/pane-manager.component';
+import { SnapshotComponent } from './components/snapshot/snapshot.component';
+import { VolumesComponent } from './components/volumes/volumes.component';
+import { WaterMarkComponent } from './components/watermark/water-mark.component';
+import { XAxisComponent } from './components/x_axis/x-axis.component';
+import { LastCandleLabelsProvider } from './components/y_axis/price_labels/last-candle-labels.provider';
+import { LabelsGroups } from './components/y_axis/price_labels/y-axis-labels.model';
+import { YAxisPriceLabelsDrawer } from './components/y_axis/price_labels/y-axis-price-labels.drawer';
+import { YAxisDrawer } from './components/y_axis/y-axis.drawer';
+import { ClearCanvasDrawer } from './drawers/clear-canvas.drawer';
+import { CompositeDrawer } from './drawers/composite.drawer';
+import { DrawingManager } from './drawers/drawing-manager';
+import EventBus from './events/event-bus';
+import { CandleTapHandler } from './inputhandlers/candle-tap.handler';
+import { ChartResizeHandler } from './inputhandlers/chart-resize.handler';
+import { CrossEventProducerComponent } from './inputhandlers/cross-event-producer.component';
+import { HoverProducerComponent } from './inputhandlers/hover-producer.component';
+import { CanvasInputListenerComponent } from './inputlisteners/canvas-input-listener.component';
+import { createCanvasModel, createMainCanvasModel } from './model/canvas.model';
+import { HitTestCanvasModel } from './model/hit-test-canvas.model';
+import { ScaleModel } from './model/scale.model';
+import { TimeZoneModel } from './model/time-zone.model';
+import { clearerSafe } from './utils/function.utils';
+import { merge } from './utils/merge.utils';
+/**
+ * @deprecated use {Chart} instead
+ */
+export default class ChartBootstrap {
+    constructor(element, userConfig = {}) {
+        var _a, _b;
+        this.components = [];
+        this.chartComponents = [];
+        // components list which listen for mouse and keyboard
+        this.userInputListenerComponents = [];
+        this.canvasModels = [];
+        this.parentElement = element;
+        // eslint-disable-next-line no-restricted-syntax
+        const config = userConfig;
+        mergeWithDefaultConfig(config);
+        this.config = config;
+        const chartLayoutTemplate = createDefaultLayoutTemplate(config);
+        element.innerHTML = '';
+        element.appendChild(chartLayoutTemplate.content);
+        this.id = (_a = element.getAttribute('data-id')) !== null && _a !== void 0 ? _a : '';
+        if (config.fixedSize) {
+            element.style.width = config.fixedSize.width + 'px';
+            element.style.height = config.fixedSize.height + 'px';
+        }
+        const timeZoneModel = new TimeZoneModel(config);
+        this.timeZoneModel = timeZoneModel;
+        const formatterFactory = this.timeZoneModel.getFormatterFactory();
+        const elements = extractElements(element);
+        this.elements = elements;
+        const eventBus = new EventBus();
+        this.bus = eventBus;
+        const chartResizeHandler = new ChartResizeHandler(element, (_b = elements.chartResizer) !== null && _b !== void 0 ? _b : element, eventBus, this.canvasModels, config);
+        this.chartResizeHandler = chartResizeHandler;
+        chartResizeHandler.subscribeResize();
+        this.components.push(chartResizeHandler.unsubscribeAnimationUpdate.bind(chartResizeHandler));
+        const drawingManager = new DrawingManager(eventBus, chartResizeHandler);
+        this.drawingManager = drawingManager;
+        const mainCanvasModel = createMainCanvasModel(eventBus, elements.mainCanvas, elements.chartResizer, this.config.components.chart.type, this.config, drawingManager, this.canvasModels);
+        this.mainCanvasModel = mainCanvasModel;
+        this.dynamicObjectsCanvasModel = createCanvasModel(eventBus, elements.dynamicObjectsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        const dataSeriesCanvasClearDrawer = new ClearCanvasDrawer(this.dynamicObjectsCanvasModel);
+        drawingManager.addDrawer(dataSeriesCanvasClearDrawer, 'SERIES_CLEAR');
+        const yAxisLabelsCanvasModel = createCanvasModel(eventBus, elements.yAxisLabelsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        const canvasBoundsContainer = new CanvasBoundsContainer(config, eventBus, mainCanvasModel, formatterFactory, chartResizeHandler);
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        //#region  main canvas user input listeners
+        const mainCanvasParent = elements.mainCanvas.parentElement;
+        if (mainCanvasParent === null) {
+            throw new Error(`Couldn't get main canvas parent`);
+        }
+        const canvasInputListener = new CanvasInputListenerComponent(eventBus, mainCanvasParent);
+        this.canvasInputListener = canvasInputListener;
+        this.chartComponents.push(this.canvasInputListener);
+        //#endregion
+        const hitTestCanvasModel = new HitTestCanvasModel(eventBus, elements.hitTestCanvas, canvasInputListener, canvasBoundsContainer, drawingManager, config, this.canvasModels, elements.chartResizer);
+        this.hitTestCanvasModel = hitTestCanvasModel;
+        const hitTestClearCanvas = new ClearCanvasDrawer(hitTestCanvasModel);
+        drawingManager.addDrawer(hitTestClearCanvas, 'HIT_TEST_CLEAR');
+        //#endregion
+        // canvas animation container
+        const canvasAnimation = new CanvasAnimation(eventBus);
+        this.canvasAnimation = canvasAnimation;
+        //#region ScaleModel init
+        const scaleModel = new ScaleModel(config, () => canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), canvasAnimation);
+        this.scaleModel = scaleModel;
+        //#endregion
+        const backgroundCanvasModel = createCanvasModel(eventBus, elements.backgroundCanvas, config, drawingManager, this.canvasModels, elements.chartResizer, {
+            // can be read frequently, see {redrawBackgroundArea} function
+            willReadFrequently: true,
+        });
+        this.backgroundCanvasModel = backgroundCanvasModel;
+        this.cursorHandler = new CursorHandler(elements.canvasArea, canvasInputListener, canvasBoundsContainer, hitTestCanvasModel);
+        this.chartComponents.push(this.cursorHandler);
+        this.crossEventProducer = new CrossEventProducerComponent(canvasInputListener, canvasBoundsContainer);
+        this.chartComponents.push(this.crossEventProducer);
+        const chartBaseModel = new ChartBaseModel('candle');
+        this.chartBaseModel = chartBaseModel;
+        const chartPanComponent = new ChartPanComponent(eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel);
+        this.chartPanComponent = chartPanComponent;
+        this.chartComponents.push(chartPanComponent);
+        this.userInputListenerComponents.push(chartPanComponent.chartAreaPanHandler);
+        const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel);
+        this.paneManager = paneManager;
+        const mainPane = this.paneManager.panes[CHART_UUID];
+        this.mainPane = mainPane;
+        this.chartComponents.push(paneManager);
+        // dynamic objects component
+        this.dynamicObjects = new DynamicObjectsComponent(this.dynamicObjectsCanvasModel, drawingManager);
+        this.chartComponents.push(this.dynamicObjects);
+        this.chartModel = new ChartModel(chartBaseModel, paneManager, eventBus, this.dynamicObjectsCanvasModel, config, scaleModel, formatterFactory, mainCanvasParent, canvasBoundsContainer, chartResizeHandler);
+        //#region main chart component init
+        const chartComponent = new ChartComponent(this.chartModel, this.dynamicObjectsCanvasModel, config, scaleModel, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, this.cursorHandler, this.dynamicObjects);
+        this.chartComponents.push(chartComponent);
+        this.chartComponent = chartComponent;
+        const chartModel = this.chartComponent.chartModel;
+        this.chartModel = chartModel;
+        this.canvasBoundsContainer.setMainCandleSeries(this.chartModel.mainCandleSeries);
+        hitTestCanvasModel.addSubscriber(paneManager.hitTestController);
+        // X-axis component
+        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, backgroundCanvasModel);
+        this.chartComponents.push(this.xAxisComponent);
+        this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);
+        const mainCanvasClearDrawer = new ClearCanvasDrawer(mainCanvasModel);
+        drawingManager.addDrawer(mainCanvasClearDrawer, 'MAIN_CLEAR');
+        const candleTap = new CandleTapHandler(mainCanvasParent, chartModel, canvasInputListener, config);
+        this.chartComponents.push(candleTap);
+        // watermark component
+        this.watermarkComponent = new WaterMarkComponent(paneManager, chartModel, eventBus, config, canvasBoundsContainer, this.dynamicObjectsCanvasModel, drawingManager);
+        this.chartComponents.push(this.watermarkComponent);
+        const crossToolCanvasModel = createCanvasModel(eventBus, elements.crossToolCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        this.highlightsComponent = new HighlightsComponent(eventBus, config, chartModel, mainCanvasModel, canvasBoundsContainer, drawingManager);
+        this.chartComponents.push(this.highlightsComponent);
+        // setup default rules for UTC datetime override
+        if (config.useUTCTimeOverride && config.dateFormatter && !config.dateFormatter.utcTimeOverride) {
+            config.dateFormatter.utcTimeOverride = this.createUTCTimeOverrideConfig(chartModel);
+        }
+        // X navigation area component
+        this.navigationMapComponent = new NavigationMapComponent(eventBus, chartModel, mainCanvasModel, config, canvasInputListener, canvasBoundsContainer, drawingManager, formatterFactory, chartPanComponent, this.cursorHandler);
+        this.chartComponents.push(this.navigationMapComponent);
+        this.userInputListenerComponents.push(this.navigationMapComponent.navigationMapMoveHandler);
+        // high low component
+        const highLowComponent = new HighLowComponent(config, this.dynamicObjectsCanvasModel, chartModel, canvasBoundsContainer, drawingManager);
+        this.chartComponents.push(highLowComponent);
+        this.initYAxisDrawer(yAxisLabelsCanvasModel);
+        this.yAxisComponent = mainPane.mainExtent.yAxis;
+        // default labels provider
+        const lastCandleLabelsProvider = new LastCandleLabelsProvider(this.chartModel, this.config, this.chartModel.lastCandleLabelsByChartType, this.yAxisComponent.getLabelsColorResolver.bind(this.yAxisComponent));
+        this.yAxisComponent.registerYAxisLabelsProvider(lastCandleLabelsProvider, LabelsGroups.MAIN);
+        this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
+        this.chartComponents.push(this.volumesComponent);
+        // grid component
+        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
+        this.chartComponents.push(mainChartGridComponent);
+        this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
+        this.chartComponents.push(this.hoverProducer);
+        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);
+        this.chartComponents.push(this.crossToolComponent);
+        // Snapshot component
+        const snapshotCanvasModel = createCanvasModel(eventBus, elements.snapshotCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        const snapshotComponent = new SnapshotComponent(this.elements, snapshotCanvasModel);
+        this.snapshotComponent = snapshotComponent;
+        this.chartComponents.push(snapshotComponent);
+        // events
+        const eventsComponent = new EventsComponent(config, this.dynamicObjectsCanvasModel, hitTestCanvasModel, chartModel, canvasBoundsContainer, drawingManager, formatterFactory, this.cursorHandler, backgroundCanvasModel);
+        this.eventsComponent = eventsComponent;
+        this.chartComponents.push(eventsComponent);
+        // Temporary solution - all in one place
+        this.chartComponents.forEach(c => c.activate());
+        this.enableUserControls();
+        drawingManager.reorderDrawers(config.drawingOrder);
+        this.clearer = clearerSafe(this.components);
+    }
+    initYAxisDrawer(yAxisLabelsCanvasModel) {
+        const yAxisCompositeDrawer = new CompositeDrawer();
+        const clearYAxis = new ClearCanvasDrawer(yAxisLabelsCanvasModel);
+        yAxisCompositeDrawer.addDrawer(clearYAxis, 'YAXIS_CLEAR');
+        this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
+        const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
+        yAxisCompositeDrawer.addDrawer(yAxisDrawer);
+        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config.colors.yAxis, this.paneManager);
+        yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
+    }
+    // TODO remove chartModel dependency, put period to global config somewhere
+    /**
+     * Creates a configuration object for overriding UTC time in a chart.
+     * @param {ChartModel} chartModel - The chart model object.
+     * @returns {Object} - The configuration object containing a pattern and a test function.
+     * The pattern is a string representing the date format to be used for the override.
+     * The test function checks if the pattern contains hours/minutes/seconds and if the current chart period is more than 1 day.
+     * If both conditions are met, the function returns true, indicating that the override should be applied.
+     * Note: The chartModel dependency should be removed and the period should be put in a global config somewhere.
+     */
+    createUTCTimeOverrideConfig(chartModel) {
+        // default rules for UTC datetime override - if datetime pattern contains hours/minutes/seconds and current
+        // chart period is more than 1d we override it with simple UTC date without any specific timezones applied
+        const re = new RegExp('HH|H|mm|m|s|ss|sss|SSS');
+        return {
+            pattern: 'MM/dd/YY',
+            test: (pattern) => re.test(pattern) && (chartModel.getPeriod() || 0) >= 86400,
+        };
+    }
+    /**
+     * Merges a local configuration object with a global configuration object recursively.
+     * @template L - Type of the local configuration object.
+     * @param {L} local - The local configuration object to be merged.
+     * @param {Record<string, any>} global - The global configuration object to be merged.
+     * @returns {L} - The merged local configuration object.
+     */
+    static mergeConfig(local, global) {
+        for (const k in global) {
+            if (k in local) {
+                if (typeof local[k] === 'object') {
+                    ChartBootstrap.mergeConfig(local[k], global[k]);
+                }
+            }
+            else {
+                // @ts-ignore
+                local[k] = global[k];
+            }
+        }
+        return local;
+    }
+    /**
+     * Returns the FullChartConfig object.
+     *
+     * @returns {FullChartConfig} The FullChartConfig object.
+     */
+    getConfig() {
+        // eslint-disable-next-line no-restricted-syntax
+        return this.config;
+    }
+    /**
+     * Disables user controls by deactivating all userInputListenerComponents and disabling hitTestCanvasModel.
+     * @returns {void}
+     */
+    disableUserControls() {
+        this.userInputListenerComponents.forEach(component => component.deactivate());
+        this.hitTestCanvasModel.disableUserControls();
+    }
+    /**
+     * Enables user controls for the hit test canvas model and all the user input listener components.
+     * @returns {void}
+     */
+    enableUserControls() {
+        this.userInputListenerComponents.forEach(component => component.activate());
+        this.hitTestCanvasModel.enableUserControls();
+    }
+    /**
+     * Sets the configuration for the grid component of the chart.
+     * @param {GridComponentConfig} config - The configuration object for the grid component.
+     * @returns {void}
+     */
+    setGridConfig(config) {
+        var _a, _b, _c, _d, _e;
+        const gridComponent = this.config.components.grid;
+        gridComponent.visible = (_a = config.visible) !== null && _a !== void 0 ? _a : false;
+        gridComponent.dash = (_b = config.dash) !== null && _b !== void 0 ? _b : [0, 0];
+        gridComponent.width = (_c = config.width) !== null && _c !== void 0 ? _c : 1;
+        gridComponent.color = (_d = config.color) !== null && _d !== void 0 ? _d : '#FFFFFF';
+        this.config.colors.chartAreaTheme.gridColor = (_e = config.color) !== null && _e !== void 0 ? _e : '#FFFFFF';
+        this.redraw();
+    }
+    /**
+     * Sets the visibility of the grid component.
+     * @param {boolean} visible - A boolean value indicating whether the grid should be visible or not.
+     * @returns {void}
+     */
+    setGridVisible(visible) {
+        if (this.config.components && this.config.components.grid) {
+            this.config.components.grid.visible = visible;
+            this.redraw();
+        }
+    }
+    /**
+     * Sets the visibility of the vertical grid lines in the grid component.
+     * @param {boolean} showVertical - A boolean value indicating whether to show or hide the vertical grid lines.
+     * @returns {void}
+     */
+    setGridVertical(showVertical) {
+        this.config.components.grid.vertical = showVertical;
+        this.redraw();
+    }
+    /**
+     * Sets the visibility of the horizontal grid lines in the chart.
+     * @param {boolean} showHorizontal - A boolean value indicating whether to show or hide the horizontal grid lines.
+     * @returns {void}
+     */
+    setGridHorizontal(showHorizontal) {
+        this.config.components.grid.horizontal = showHorizontal;
+        this.redraw();
+    }
+    /**
+     * This method triggers the 'draw' event on the 'bus' object.
+     * @returns {void}
+     */
+    redraw() {
+        this.bus.fireDraw();
+    }
+    /**
+     * Returns the offsets of the chart components from the chart configuration object.
+     *
+     * @returns {ChartConfigComponentsOffsets} The offsets of the chart components.
+     */
+    getOffsets() {
+        return this.config.components && this.config.components.offsets;
+    }
+    /**
+     * Sets the visibility of the borders of the candles in the chart.
+     * @param {boolean} show - A boolean value indicating whether to show or hide the borders of the candles. Default value is true.
+     * @returns {void}
+     */
+    setShowCandleBorders(show = true) {
+        if (this.config.components && this.config.components.chart) {
+            this.config.components.chart.showCandlesBorder = show;
+            this.redraw();
+        }
+    }
+    /**
+     * Sets the visibility of the high-low component.
+     * @param {boolean} visible - Whether the high-low component should be visible or not. Default is true.
+     * @returns {void}
+     */
+    setHighLowVisible(visible = true) {
+        if (this.config.components && this.config.components.highLow) {
+            this.config.components.highLow.visible = visible;
+            this.redraw();
+        }
+    }
+    /**
+     * Sets the visibility of the cross tool component.
+     * @param {string} type - The type of cross tool to be displayed. Default value is 'cross-and-labels'.
+     * @returns {void}
+     */
+    setCrossToolVisible(type = 'cross-and-labels') {
+        if (this.config.components && this.config.components.crossTool) {
+            this.config.components.crossTool.type = type;
+            this.redraw();
+        }
+    }
+    /**
+     * @deprecated use {@link highlightsComponent.setHighlightsVisible} instead
+     */
+    setHighlightsVisible(visible = true) {
+        var _a;
+        if ((_a = this.config.components) === null || _a === void 0 ? void 0 : _a.highlights) {
+            this.config.components.highlights.visible = visible;
+            this.redraw();
+        }
+    }
+    /**
+     * @deprecated use {@link highlightsComponent.setHighlights} instead
+     */
+    setHighlightsData(data) {
+        this.highlightsComponent.setHighlights(data);
+    }
+    /**
+     * Sets the colors of the chart.
+     *
+     * @param {DeepPartial<ChartColors>} colors - An object containing the colors to be set.
+     * @returns {void}
+     */
+    setColors(colors) {
+        merge(this.config.colors, colors, {
+            addIfMissing: true,
+            overrideExisting: true,
+        });
+        this.redraw();
+    }
+    /**
+     * Adds a mouse move event listener to a canvas element.
+     * @param {string} canvasElement - The ID of the canvas element to add the listener to.
+     * @param {function} handler - The function to be called when the mouse moves over the canvas element.
+     * @returns {function} - A function that removes the event listener when called.
+     */
+    addMouseMoveOnChartElementHandler(canvasElement, handler) {
+        const elementBoundsHitTest = this.canvasBoundsContainer.getBoundsHitTest(canvasElement);
+        const subscription = this.canvasInputListener.observeMouseMove(elementBoundsHitTest).subscribe(handler);
+        return () => subscription.unsubscribe();
+    }
+    /**
+     * Adds a mouse enter event handler to a chart element.
+     *
+     * @param {string} canvasElement - The ID of the canvas element to attach the event handler to.
+     * @param {(mouseEnter: boolean) => void} handler - The function to be called when the mouse enters or leaves the element.
+     * @param {boolean} [skipWhileDragging=false] - Whether to skip the event while the user is dragging the chart.
+     * @returns {Function} - A function that can be called to unsubscribe from the event.
+     */
+    addMouseEnterOnChartElementHandler(canvasElement, handler, skipWhileDragging = false) {
+        const elementBoundsHitTest = this.canvasBoundsContainer.getBoundsHitTest(canvasElement);
+        const subscription = this.canvasInputListener
+            .observeMouseEnter(elementBoundsHitTest, skipWhileDragging)
+            .subscribe(handler);
+        return () => subscription.unsubscribe();
+    }
+    /**
+     * Adds a click event listener to a chart element on the canvas.
+     * @param {string} canvasElement - The element on the canvas to add the click event listener to.
+     * @param {function} handler - The function to be called when the element is clicked. It takes a Point object as a parameter.
+     * @returns {function} - A function that can be called to unsubscribe the click event listener.
+     */
+    addClickOnChartElementHandler(canvasElement, handler) {
+        const elementBoundsHitTest = this.canvasBoundsContainer.getBoundsHitTest(canvasElement);
+        const subscription = this.canvasInputListener.observeClick(elementBoundsHitTest).subscribe(handler);
+        return () => subscription.unsubscribe();
+    }
+    /**
+     * Adds a drag event listener to the specified canvas element.
+     * @param {string} canvasElement - The ID of the canvas element to add the listener to.
+     * @param {(xPosition: number) => void} handler - The function to be called when a drag event occurs. It takes the x position of the drag event as a parameter.
+     * @returns {() => void} - A function that can be called to unsubscribe from the drag event listener.
+     */
+    addDragEventsListener(canvasElement, handler) {
+        const elementBoundsHitTest = this.canvasBoundsContainer.getBoundsHitTest(canvasElement);
+        const subscription = mergeRx(this.canvasInputListener.observeYDrag(elementBoundsHitTest), this.canvasInputListener.observeXDrag(elementBoundsHitTest)).subscribe(handler);
+        return () => subscription.unsubscribe();
+    }
+    /**
+     * Registers a chart component and includes it in the the chart lifecycle
+     * @param initComponent - a function for component init
+     * @param onComponentInit - will be called after component init
+     */
+    registerComponent(initComponent, onComponentInit) {
+        const component = initComponent(this);
+        this.components.push(component);
+        onComponentInit && onComponentInit(component);
+        component.activate();
+    }
+}

package/dist/chart/canvas/canvas-bounds-container.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -184,11 +184,6 @@ export declare class CanvasBoundsContainer {
      * @returns {void}
      */
     setPanesOrder(panesOrder: string[]): void;
-    /**
-     * Returns the widths of the Y axis if it is visible, otherwise returns [0].
-     * @returns {number} The width of the Y axis.
-     */
-    private getYAxisWidth;
     /**
      * Recalculates the height ratios of the panes by calling the calculateGraphsHeightRatios() and recalculateBounds() methods.
      */