@devexperts/dxcharts-lite 1.0.2 → 2.0.0

package/dist/chart/chart.d.ts

@@ -0,0 +1,62 @@
+/*
+ * 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 ChartBootstrap from './bootstrap';
+import { BarType, PartialChartConfig } from './chart.config';
+import { CandleSeries } from './components/chart/chart.component';
+import { PaneComponent, YExtentFormatters } from './components/pane/pane.component';
+/**
+ * New shiny chart wrapper
+ */
+export declare class Chart extends ChartBootstrap {
+    yAxis: import("./components/y_axis/y-axis.component").YAxisComponent;
+    xAxis: import("./components/x_axis/x-axis.component").XAxisComponent;
+    watermark: import("./components/watermark/water-mark.component").WaterMarkComponent;
+    highlights: import("./components/highlights/highlights.component").HighlightsComponent;
+    events: import("./components/events/events.component").EventsComponent;
+    snapshot: import("./components/snapshot/snapshot.component").SnapshotComponent;
+    crosshair: import("./components/cross_tool/cross-tool.component").CrossToolComponent;
+    navigationMap: import("./components/navigation_map/navigation-map.component").NavigationMapComponent;
+    volumes: import("./components/volumes/volumes.component").VolumesComponent;
+    cursors: import("./canvas/cursor.handler").CursorHandler;
+    data: import("./components/chart/chart.component").ChartComponent;
+    scale: import("./model/scale.model").ScaleModel;
+    panning: import("./components/pan/chart-pan.component").ChartPanComponent;
+    constructor(element: HTMLElement, config?: PartialChartConfig);
+    /**
+     * Registers number formatters for pane
+     * @param uuid - pane's id
+     * @param formatters - object, that contains 3 fileds: 'regular', 'percent', 'logarithmic'.
+     * Each filed must have it's own formatter.
+     * If 'percent' and 'logarithmic' formatters did not provided, 'regular' will be applied.
+     */
+    registerPaneFormatters(uuid: string, formatters: YExtentFormatters): void;
+    /**
+     * Contains tear-down logic for chart
+     * Use when you want to unmount the chart from the host app
+     */
+    destroy(): void;
+    /**
+     * Sets the visibility of the volumes separately and updates the yAxis width.
+     * @param {boolean} separate - A boolean value indicating whether to show the volumes separately or not. Default value is false.
+     */
+    showSeparateVolumes(separate?: boolean): void;
+    setData(data: CandleSeries | CandleSeries[]): void;
+    updateData(data: CandleSeries | CandleSeries[]): void;
+    /**
+     * Sets the auto scale property of the scale model.
+     * @param {boolean} auto - A boolean value indicating whether the auto scale is enabled or not. Default value is true.
+     */
+    setAutoScale(auto?: boolean): void;
+    /**
+     * Sets the right-to-left (RTL) configuration of the component.
+     *
+     * @param {boolean} rtl - A boolean value indicating whether the component should be displayed in RTL mode.
+     * @returns {void}
+     */
+    setRtl(rtl: boolean): void;
+    setChartType(type: BarType): void;
+    createPane(): PaneComponent;
+}

package/dist/chart/chart.js

@@ -0,0 +1,106 @@
+/*
+ * 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 ChartBootstrap from './bootstrap';
+/**
+ * New shiny chart wrapper
+ */
+export class Chart extends ChartBootstrap {
+    constructor(element, config = {}) {
+        super(element, config);
+        this.yAxis = this.yAxisComponent;
+        this.xAxis = this.xAxisComponent;
+        this.watermark = this.watermarkComponent;
+        this.highlights = this.highlightsComponent;
+        this.events = this.eventsComponent;
+        this.snapshot = this.snapshotComponent;
+        this.crosshair = this.crossToolComponent;
+        this.navigationMap = this.navigationMapComponent;
+        this.volumes = this.volumesComponent;
+        this.cursors = this.cursorHandler;
+        this.data = this.chartComponent;
+        this.scale = this.scaleModel;
+        this.panning = this.chartPanComponent;
+    }
+    /**
+     * Registers number formatters for pane
+     * @param uuid - pane's id
+     * @param formatters - object, that contains 3 fileds: 'regular', 'percent', 'logarithmic'.
+     * Each filed must have it's own formatter.
+     * If 'percent' and 'logarithmic' formatters did not provided, 'regular' will be applied.
+     */
+    registerPaneFormatters(uuid, formatters) {
+        var _a;
+        (_a = this.paneManager.panes[uuid]) === null || _a === void 0 ? void 0 : _a.setPaneValueFormatters(formatters);
+    }
+    /**
+     * Contains tear-down logic for chart
+     * Use when you want to unmount the chart from the host app
+     */
+    destroy() {
+        this.bus.setMuted(true);
+        this.chartComponents.forEach(c => c.disable());
+        this.parentElement.childNodes.forEach(n => n.remove());
+        this.parentElement.style.width = '';
+        this.parentElement.style.height = '';
+    }
+    /**
+     * Sets the visibility of the volumes separately and updates the yAxis width.
+     * @param {boolean} separate - A boolean value indicating whether to show the volumes separately or not. Default value is false.
+     */
+    showSeparateVolumes(separate = false) {
+        if (this.volumes) {
+            this.volumes.setShowVolumesSeparatly(separate);
+            this.canvasBoundsContainer.updateYAxisWidths();
+        }
+    }
+    setData(data) {
+        if (Array.isArray(data)) {
+            if (data.length === 0) {
+                return;
+            }
+            const [mainSeries, ...restSeries] = data;
+            this.chartComponent.setAllSeries(mainSeries, restSeries);
+        }
+        else {
+            this.chartComponent.setMainSeries(data);
+        }
+    }
+    updateData(data) {
+        if (Array.isArray(data)) {
+            if (data.length === 0) {
+                return;
+            }
+            const [mainSeries, ...restSeries] = data;
+            this.chartComponent.updateAllSeries(mainSeries, restSeries);
+        }
+        else {
+            this.chartComponent.updateAllSeries(data);
+        }
+    }
+    /**
+     * Sets the auto scale property of the scale model.
+     * @param {boolean} auto - A boolean value indicating whether the auto scale is enabled or not. Default value is true.
+     */
+    setAutoScale(auto = true) {
+        this.scale.autoScale(auto);
+    }
+    /**
+     * Sets the right-to-left (RTL) configuration of the component.
+     *
+     * @param {boolean} rtl - A boolean value indicating whether the component should be displayed in RTL mode.
+     * @returns {void}
+     */
+    setRtl(rtl) {
+        this.config.rtl = rtl;
+        this.bus.fireDraw();
+    }
+    setChartType(type) {
+        this.chartComponent.setChartType(type);
+    }
+    createPane() {
+        return this.paneManager.createPane();
+    }
+}

package/dist/chart/components/chart/basic-scale.d.ts

@@ -12,11 +12,11 @@ import { ChartModel } from './chart.model';
  * @param scaleModel
  * @doc-tags scaling,viewport
  */
-export declare const createBasicScaleViewportTransformer: (scaleModel: ScaleModel) => (visualCandleSource: VisualCandle[]) => void;
+export declare const createBasicScaleViewportTransformer: (scale: ScaleModel) => (visualCandleSource: VisualCandle[]) => void;
 /**
  * Moves the viewport between 2 timestamps.
  * @param scaleModel
  * @param chartModel
  * @param canvasAnimationContainer
  */
-export declare const createTimeFrameViewportTransformer: (scaleModel: ScaleModel, chartModel: ChartModel) => (timeframe: [Timestamp, Timestamp], zoomIn?: boolean | null) => void;
+export declare const createTimeFrameViewportTransformer: (scale: ScaleModel, chartModel: ChartModel) => (timeframe: [Timestamp, Timestamp], zoomIn?: boolean | null) => void;

package/dist/chart/components/chart/basic-scale.js

@@ -3,4 +3,34 @@
  * 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/.
  */
-export const createBasicScaleViewportTransformer=t=>n=>{if(n.length!==0){const a=n.slice(Math.max(n.length-t.state.defaultViewportItems,0)),e=a[0],i=a[a.length-1];t.setXScale(e.startUnit,i.startUnit+i.width+t.offsets.right),t.doAutoScale(!0),t.recalculateZoomXYRatio(),t.fireChanged()}},createTimeFrameViewportTransformer=(t,n)=>(a,e=null)=>{const[i,o]=a,r=n.candleFromTimestamp(i).startUnit,m=n.candleFromTimestamp(o).startUnit,s=e===null?0:n.mainCandleSeries.meanCandleWidth*2,c=e?r-s:r+s,f=e?m+s:m-s;t.setXScale(c,f)};
+/**
+ * Calculates the initial viewport.
+ * @param scaleModel
+ * @doc-tags scaling,viewport
+ */
+export const createBasicScaleViewportTransformer = (scale) => (visualCandleSource) => {
+    if (visualCandleSource.length !== 0) {
+        const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - scale.state.defaultViewportItems, 0));
+        const startCandle = vCandles[0];
+        const endCandle = vCandles[vCandles.length - 1];
+        scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
+        scale.doAutoScale(true);
+        scale.recalculateZoomXYRatio();
+        scale.fireChanged();
+    }
+};
+/**
+ * Moves the viewport between 2 timestamps.
+ * @param scaleModel
+ * @param chartModel
+ * @param canvasAnimationContainer
+ */
+export const createTimeFrameViewportTransformer = (scale, chartModel) => (timeframe, zoomIn = null) => {
+    const [firstTimestamp, lastTimestamp] = timeframe;
+    const xStart = chartModel.candleFromTimestamp(firstTimestamp).startUnit;
+    const xEnd = chartModel.candleFromTimestamp(lastTimestamp).startUnit;
+    const additionalAnimationWidth = zoomIn === null ? 0 : chartModel.mainCandleSeries.meanCandleWidth * 2;
+    const animationEffectXStart = zoomIn ? xStart - additionalAnimationWidth : xStart + additionalAnimationWidth;
+    const animationEffectXEnd = zoomIn ? xEnd + additionalAnimationWidth : xEnd - additionalAnimationWidth;
+    scale.setXScale(animationEffectXStart, animationEffectXEnd);
+};

package/dist/chart/components/chart/candle-transformer.functions.js

@@ -3,4 +3,18 @@
  * 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{hollowDirection as p,nameDirection as m}from"../../model/candle.model";import u from"../../model/visual-candle";export const defaultCandleTransformer=(o,{x:s,width:r,activeCandle:e})=>new u(s,r,o.open,o.close,o.hi,o.lo,m(o.open,o.close),o,!0,getCandleIsActive(o,e)),hollowCandleTransformer=(o,{x:s,width:r,activeCandle:e,prevCandle:t})=>{var i;return new u(s,r,o.open,o.close,o.hi,o.lo,p((i=t==null?void 0:t.close)!==null&&i!==void 0?i:o.close,o.close),o,!0,getCandleIsActive(o,e),o.close>o.open)},trendCandleTransformer=(o,{x:s,width:r,activeCandle:e,prevCandle:t})=>{var i;return new u(s,r,o.open,o.close,o.hi,o.lo,m((i=t==null?void 0:t.close)!==null&&i!==void 0?i:o.close,o.close),o,!0,getCandleIsActive(o,e),o.close>o.open)},getCandleIsActive=(o,s)=>{const r=s&&s.idx===o.idx;return r!=null?r:!1};
+import { hollowDirection, nameDirection } from '../../model/candle.model';
+import VisualCandle from '../../model/visual-candle';
+export const defaultCandleTransformer = (candle, { x, width, activeCandle }) => new VisualCandle(x, width, candle.open, candle.close, candle.hi, candle.lo, nameDirection(candle.open, candle.close), candle, true, getCandleIsActive(candle, activeCandle));
+export const hollowCandleTransformer = (candle, { x, width, activeCandle, prevCandle }) => {
+    var _a;
+    return new VisualCandle(x, width, candle.open, candle.close, candle.hi, candle.lo, hollowDirection((_a = prevCandle === null || prevCandle === void 0 ? void 0 : prevCandle.close) !== null && _a !== void 0 ? _a : candle.close, candle.close), candle, true, getCandleIsActive(candle, activeCandle), candle.close > candle.open);
+};
+export const trendCandleTransformer = (candle, { x, width, activeCandle, prevCandle }) => {
+    var _a;
+    return new VisualCandle(x, width, candle.open, candle.close, candle.hi, candle.lo, nameDirection((_a = prevCandle === null || prevCandle === void 0 ? void 0 : prevCandle.close) !== null && _a !== void 0 ? _a : candle.close, candle.close), candle, true, getCandleIsActive(candle, activeCandle), candle.close > candle.open);
+};
+export const getCandleIsActive = (candle, activeCandle) => {
+    const isActive = activeCandle && activeCandle.idx === candle.idx;
+    return isActive !== null && isActive !== void 0 ? isActive : false;
+};

package/dist/chart/components/chart/candle-width-calculator.functions.js

@@ -3,4 +3,5 @@
  * 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{BASIC_CANDLE_WIDTH as t}from"../../model/candle.model";export const calculateCandleWidth=()=>t;
+import { BASIC_CANDLE_WIDTH } from '../../model/candle.model';
+export const calculateCandleWidth = () => BASIC_CANDLE_WIDTH;

package/dist/chart/components/chart/candle.functions.js

@@ -3,4 +3,47 @@
  * 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{finite as t}from"../../utils/math.utils";export const prepareCandle=e=>{var o;const i=t(e.close,e.open,e.hi,e.lo);if(!isFinite(i))throw new Error("Received candle without any price");const p=t(e.hi,Math.max(e.open,e.close),i),r=t(e.lo,Math.min(e.open,e.close),i),s=t(e.open,e.lo,i),n=t(e.close,e.hi,i);return{hi:p,lo:r,open:s,close:n,timestamp:e.timestamp,volume:(o=e.volume)!==null&&o!==void 0?o:0,expansion:e.expansion,idx:e.idx,impVolatility:e.impVolatility}},reindexCandles=e=>{for(let o=0;o<e.length;++o)e[o].idx=o},deleteCandlesIndex=e=>{e.forEach(o=>{o.idx=void 0})};
+import { finite } from '../../utils/math.utils';
+/**
+ * In the early days of Futures contract there is no much trading,
+ * so there is not enough information to build a candle: only Open/Close value available.
+ * In this case Daily candle, which we receive, must be completed to full OHLC with equal values.
+ */
+export const prepareCandle = (candle) => {
+    var _a;
+    const settlementPrice = finite(candle.close, candle.open, candle.hi, candle.lo);
+    if (!isFinite(settlementPrice)) {
+        throw new Error('Received candle without any price');
+    }
+    // @ts-ignore
+    const preparedCandleHi = finite(candle.hi, Math.max(candle.open, candle.close), settlementPrice);
+    // @ts-ignore
+    const preparedCandleLo = finite(candle.lo, Math.min(candle.open, candle.close), settlementPrice);
+    const preparedCandleOpen = finite(candle.open, candle.lo, settlementPrice);
+    const preparedCandleClose = finite(candle.close, candle.hi, settlementPrice);
+    return {
+        hi: preparedCandleHi,
+        lo: preparedCandleLo,
+        open: preparedCandleOpen,
+        close: preparedCandleClose,
+        timestamp: candle.timestamp,
+        volume: (_a = candle.volume) !== null && _a !== void 0 ? _a : 0,
+        expansion: candle.expansion,
+        idx: candle.idx,
+        impVolatility: candle.impVolatility,
+    };
+};
+/**
+ * Adds index to candles according to their array index.
+ * @param candles
+ */
+export const reindexCandles = (candles) => {
+    for (let i = 0; i < candles.length; ++i) {
+        candles[i].idx = i;
+    }
+};
+export const deleteCandlesIndex = (candles) => {
+    candles.forEach(candle => {
+        candle.idx = undefined;
+    });
+};

package/dist/chart/components/chart/chart-area-pan.handler.d.ts

@@ -39,7 +39,7 @@ export interface ChartWheelEvent {
 export declare class ChartAreaPanHandler extends ChartBaseElement {
     private bus;
     private config;
-    private scaleModel;
+    private scale;
     private mainCanvasParent;
     private canvasInputListener;
     private canvasBoundsContainer;
@@ -50,7 +50,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     xDraggedCandlesDelta: number;
     lastXStart: number;
     wheelTrottleTime: number;
-    constructor(bus: EventBus, config: FullChartConfig, scaleModel: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent);
+    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent);
     /**
      * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
      * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.
@@ -74,7 +74,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * @param {HitBoundsTest} hitTest - The hit test of the pane.
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */
-    registerChartYPanHandler(scaleModel: ScaleModel, hitTest: HitBoundsTest): DragNDropYComponent;
+    registerChartYPanHandler(scale: ScaleModel, hitTest: HitBoundsTest): DragNDropYComponent;
     private onXDragStart;
     private onXDragTick;
 }

package/dist/chart/components/chart/chart-area-pan.handler.js

@@ -3,4 +3,200 @@
  * 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{throttleTime as b}from"rxjs/operators";import{VIEWPORT_ANIMATION_ID as v}from"../../animation/canvas-animation";import{CanvasElement as m}from"../../canvas/canvas-bounds-container";import{MainCanvasTouchHandler as P}from"../../inputhandlers/main-canvas-touch.handler";import{ChartBaseElement as T}from"../../model/chart-base-element";import{pixelsToUnits as p}from"../../model/scaling/viewport.model";import{deviceDetector as X}from"../../utils/device/device-detector.utils";import{getTouchpadSensitivity as A,touchpadDetector as M}from"../../utils/device/touchpad.utils";import{DragNDropXComponent as x}from"../dran-n-drop_helper/drag-n-drop-x.component";import{DragNDropYComponent as w}from"../dran-n-drop_helper/drag-n-drop-y.component";export class ChartAreaPanHandler extends T{constructor(t,a,e,i,s,n,o,r){super(),this.bus=t,this.config=a,this.scaleModel=e,this.mainCanvasParent=i,this.canvasInputListener=s,this.canvasBoundsContainer=n,this.canvasAnimation=o,this.chartPanComponent=r,this.currentPoint={x:0,y:0},this.xDraggedCandlesDelta=0,this.lastXStart=0,this.wheelTrottleTime=15,this.zoomXHandler=h=>{const c=M(h),l=h.deltaY<0,f=c?A(this.config):this.config.scale.zoomSensitivity;if(this.config.scale.zoomToCursor){const D=this.canvasBoundsContainer.getBounds(m.CANVAS).width,S=h.offsetX/D;this.scaleModel.zoomXToPercent(S,l,!1,f)}else this.scaleModel.zoomXToEnd(l,f);this.bus.fireDraw()},this.onXDragStart=()=>{this.canvasAnimation.forceStopAnimation(v),this.xDraggedCandlesDelta=0,this.lastXStart=this.scaleModel.xStart},this.onXDragTick=h=>{const{delta:c}=h;this.currentPoint.x=c;const l=p(c,this.scaleModel.zoomX);this.scaleModel.moveXStart(this.lastXStart-l),this.bus.fireDraw()},this.touchHandler=new P(this.scaleModel,this.canvasInputListener,this.mainCanvasParent);const u=this.canvasBoundsContainer.getBoundsHitTest(m.ALL_PANES),g=new x(u,{onDragStart:this.onXDragStart,onDragTick:this.onXDragTick},this.canvasInputListener,this.chartPanComponent,{disableChartPanning:!1});this.addChildEntity(g)}doActivate(){super.doActivate();const t=this.canvasBoundsContainer.getBoundsHitTest(m.ALL_PANES);this.addRxSubscription(C(this.canvasInputListener.observeWheel(t),this.canvasInputListener.observePinch(t)).pipe(b(this.wheelTrottleTime,void 0,{trailing:!0,leading:!0})).subscribe(this.zoomXHandler)),this.addRxSubscription(this.canvasInputListener.observeScrollGesture().pipe(b(this.wheelTrottleTime,void 0,{trailing:!0,leading:!0})).subscribe(a=>{let e=-1;const i=X();(i==="apple"||i==="mobile")&&(e=1);let s=0,n=0;if(s+=a.deltaX*e,n+=a.deltaY*-e,s!==0&&Math.abs(s)>Math.abs(n)){const o=p(s,this.scaleModel.zoomX);this.scaleModel.moveXStart(this.scaleModel.xStart-o)}else n!==0&&Math.abs(n)>Math.abs(s)&&this.zoomXHandler(a);this.bus.fireDraw()})),this.addRxSubscription(this.chartPanComponent.chartBaseModel.dataPrependSubject.asObservable().subscribe(({prependedCandlesWidth:a})=>{this.lastXStart+=a})),this.touchHandler.activate(),this.addSubscription(this.touchHandler.deactivate.bind(this.touchHandler))}registerChartYPanHandler(t,a){let e=t.yStart;const i=()=>{this.canvasAnimation.forceStopAnimation(v),this.currentPoint={x:0,y:0},e=t.yStart},s=o=>{const{delta:r}=o;if(this.currentPoint.y=r,t.state.auto)shouldDisableAutoScale(this.currentPoint,t.state.autoScaleDisableOnDrag)&&t.autoScale(!1);else{const u=p(t.state.inverse?-r:r,t.zoomY);t.moveYStart(e+u)}},n=new w(a,{onDragTick:s,onDragStart:i},this.canvasInputListener,this.chartPanComponent,{disableChartPanning:!1});return this.addChildEntity(n),n}}export const shouldDisableAutoScale=(d,t)=>{if(!t.enabled)return!1;const a=Math.abs(d.y),e=Math.pow(Math.pow(Math.abs(d.x),2)+Math.pow(a,2),.5),i=Math.abs(Math.acos(a/e));return a>t.yDiff&&i<t.edgeAngle};
+import { merge } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
+import { VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { pixelsToUnits } from '../../model/scaling/viewport.model';
+import { deviceDetector } from '../../utils/device/device-detector.utils';
+import { getTouchpadSensitivity, touchpadDetector } from '../../utils/device/touchpad.utils';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
+import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
+/**
+ * ChartAreaPanHandler is a class that handles the panning and zooming of the chart area.
+ * It extends the ChartBaseElement class and has the following properties:
+ * @property {MainCanvasTouchHandler} touchHandler - An instance of the MainCanvasTouchHandler class.
+ * @property {Point} currentPoint - An object that represents the current point of the chart area.
+ * @property {number} xDraggedCandlesDelta - A number that represents the number of candles delta changed during X dragging.
+ * @property {number} lastXStart - A number that represents the last X start position.
+ * @property {number} lastYStart - A number that represents the last Y start position.
+ * @property {number} wheelTrottleTime - A number that represents the time in ms for the wheel throttle.
+ * @constructor
+ * @param {EventBus} bus - An instance of the EventBus class.
+ * @param {FullChartConfig} config - An instance of the FullChartConfig class.
+ * @param {ScaleModel} scaleModel - An instance of the ScaleModel class.
+ * @param {Element} mainCanvasParent - The parent element of the main canvas.
+ * @param {CanvasInputListenerComponent} canvasInputListener - An instance of the CanvasInputListenerComponent class.
+ * @param {CanvasBoundsContainer} canvasBoundsContainer - An instance of the CanvasBoundsContainer class.
+ * @param {CanvasAnimation} canvasAnimation - An instance of the CanvasAnimation class.
+ * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
+ 
+*/
+export class ChartAreaPanHandler extends ChartBaseElement {
+    constructor(bus, config, scale, mainCanvasParent, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent) {
+        super();
+        this.bus = bus;
+        this.config = config;
+        this.scale = scale;
+        this.mainCanvasParent = mainCanvasParent;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.canvasAnimation = canvasAnimation;
+        this.chartPanComponent = chartPanComponent;
+        this.currentPoint = { x: 0, y: 0 };
+        // number of candles delta changed during X dragging: 1, 5 or -3 for ex.
+        this.xDraggedCandlesDelta = 0;
+        this.lastXStart = 0;
+        this.wheelTrottleTime = 15; // in ms
+        /**
+         * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
+         * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.
+         * If the zoomToCursor configuration is set to true, it calculates the viewport percentage based on the zoomCanvasOffset and canvas width.
+         * It then calls the zoomXToPercent method of the scaleModel to zoom in or out based on the zoomIn parameter.
+         * If the zoomToCursor configuration is set to false, it calls the zoomXToEnd method of the scaleModel to zoom in or out based on the zoomIn parameter.
+         * Finally, it fires the draw event of the bus to redraw the canvas.
+         * @param {WheelEvent} e - Wheel event
+         * @returns {void}
+         */
+        this.zoomXHandler = (e) => {
+            const isTouchpad = touchpadDetector(e);
+            const zoomIn = e.deltaY < 0;
+            const zoomSensitivity = isTouchpad ? getTouchpadSensitivity(this.config) : this.config.scale.zoomSensitivity;
+            if (this.config.scale.zoomToCursor) {
+                const b = this.canvasBoundsContainer.getBounds(CanvasElement.CANVAS);
+                const canvasW = b.width;
+                const zoomCanvasOffset = e.offsetX;
+                // 0.5 - zoom middle exactly
+                // 0..0.5 - zoom to left side
+                // 0.5..1 - zoom to right side
+                const viewportPercent = zoomCanvasOffset / canvasW;
+                this.scale.zoomXToPercent(viewportPercent, zoomIn, false, zoomSensitivity);
+            }
+            else {
+                this.scale.zoomXToEnd(zoomIn, zoomSensitivity);
+            }
+            this.bus.fireDraw();
+        };
+        this.onXDragStart = () => {
+            this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
+            this.xDraggedCandlesDelta = 0;
+            this.lastXStart = this.scale.xStart;
+        };
+        this.onXDragTick = (dragInfo) => {
+            const { delta: absoluteXDelta } = dragInfo;
+            this.currentPoint.x = absoluteXDelta;
+            const unitsDelta = pixelsToUnits(absoluteXDelta, this.scale.zoomX);
+            this.scale.moveXStart(this.lastXStart - unitsDelta);
+            this.bus.fireDraw();
+        };
+        this.touchHandler = new MainCanvasTouchHandler(this.scale, this.canvasInputListener, this.mainCanvasParent);
+        const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
+        //#region drag-n-drop logic
+        const dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
+            onDragStart: this.onXDragStart,
+            onDragTick: this.onXDragTick,
+        }, this.canvasInputListener, this.chartPanComponent, {
+            disableChartPanning: false,
+        });
+        this.addChildEntity(dragNDropXComponent);
+        //#endregion
+    }
+    /**
+     * This method is used to activate the zoom functionality of the canvas. It extends the doActivate method of the parent class.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        //#region hit tests
+        const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
+        //#endregion
+        this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
+            .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+            .subscribe(this.zoomXHandler));
+        this.addRxSubscription(this.canvasInputListener
+            .observeScrollGesture()
+            .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+            .subscribe((e) => {
+            let direction = -1;
+            const device = deviceDetector();
+            if (device === 'apple' || device === 'mobile') {
+                direction = 1;
+            }
+            let deltaX = 0;
+            let deltaY = 0;
+            deltaX += e.deltaX * direction;
+            deltaY += e.deltaY * -direction;
+            if (deltaX !== 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                const unitsDelta = pixelsToUnits(deltaX, this.scale.zoomX);
+                this.scale.moveXStart(this.scale.xStart - unitsDelta);
+            }
+            else if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                this.zoomXHandler(e);
+            }
+            this.bus.fireDraw();
+        }));
+        this.addRxSubscription(this.chartPanComponent.chartBaseModel.dataPrependSubject
+            .asObservable()
+            .subscribe(({ prependedCandlesWidth }) => {
+            this.lastXStart += prependedCandlesWidth;
+        }));
+        this.touchHandler.activate();
+        this.addSubscription(this.touchHandler.deactivate.bind(this.touchHandler));
+    }
+    /**
+     * Registers a handler for panning the chart along the Y-axis.
+     * @param {ScaleModel} scaleModel - The scale model of the extent.
+     * @param {HitBoundsTest} hitTest - The hit test of the pane.
+     * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
+     */
+    registerChartYPanHandler(scale, hitTest) {
+        // we can have multiple extents which can have different yStarts, so we need to store last yStart for each extent
+        let lastYStart = scale.yStart;
+        // disable all pan handlers when hover data series
+        const onYDragStart = () => {
+            this.canvasAnimation.forceStopAnimation(VIEWPORT_ANIMATION_ID);
+            this.currentPoint = { x: 0, y: 0 };
+            lastYStart = scale.yStart;
+        };
+        const onYDragTick = (dragInfo) => {
+            const { delta: absoluteDelta } = dragInfo;
+            this.currentPoint.y = absoluteDelta;
+            if (scale.state.auto) {
+                if (shouldDisableAutoScale(this.currentPoint, scale.state.autoScaleDisableOnDrag)) {
+                    scale.autoScale(false);
+                }
+            }
+            else {
+                const unitsDelta = pixelsToUnits(scale.state.inverse ? -absoluteDelta : absoluteDelta, scale.zoomY);
+                scale.moveYStart(lastYStart + unitsDelta);
+            }
+        };
+        const dragNDropYComponent = new DragNDropYComponent(hitTest, {
+            onDragTick: onYDragTick,
+            onDragStart: onYDragStart,
+        }, this.canvasInputListener, this.chartPanComponent, {
+            disableChartPanning: false,
+        });
+        this.addChildEntity(dragNDropYComponent);
+        return dragNDropYComponent;
+    }
+}
+/**
+ * This function calculates angle between current point and point(0, 0), and compares the result with config values
+ * @param point
+ * @param config
+ *
+ * @doc-tags chart-core,auto-scale,y-axis
+ */
+export const shouldDisableAutoScale = (point, config) => {
+    if (!config.enabled) {
+        return false;
+    }
+    const absY = Math.abs(point.y);
+    const lenProduct = Math.pow((Math.pow(Math.abs(point.x), 2) + Math.pow(absY, 2)), 0.5);
+    const angle = Math.abs(Math.acos(absY / lenProduct));
+    return absY > config.yDiff && angle < config.edgeAngle;
+};

package/dist/chart/components/chart/chart-base.model.js

@@ -3,4 +3,69 @@
  * 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 a}from"rxjs";import{autoDetectPeriod as s}from"../../utils/auto-period-detector.utils";import{searchCandleIndex as n}from"../../utils/candles.utils";import{fakeVisualCandle as o,fakeVisualPoint as r}from"./fake-candles";export class ChartBaseModel{constructor(t){this.type=t,this.mainDataPoints=[],this.mainVisualPoints=[],this.dataUpdatedSubject=new a,this.dataSetSubject=new a,this.dataRemovedSubject=new a,this.dataPrependSubject=new a,this.meanDataWidth=1,this.period=1}dataFromTimestamp(t,i=!0){const e=n(t,i,this.mainDataPoints,this.period);return this.dataFromIdx(e.index)}recalculatePeriod(){const t=s(this.mainDataPoints);t&&(this.period=t)}dataFromIdx(t){const i=this.mainVisualPoints[t];return i||(this.type==="candle"?o(this.mainDataPoints,this.mainVisualPoints,this.meanDataWidth,t,this.period):r(this.mainDataPoints,this.mainVisualPoints,this.meanDataWidth,t,this.period))}}
+import { Subject } from 'rxjs';
+import { autoDetectPeriod } from '../../utils/auto-period-detector.utils';
+import { searchCandleIndex } from '../../utils/candles.utils';
+import { fakeVisualCandle, fakeVisualPoint } from './fake-candles';
+/**
+ * This model is an abstraction which describes manipulations tied to the main data series.
+ * For example, all x-scale is based on the main data series. If we add a new data series, we need to match its coordinates to the main data series.
+ */
+export class ChartBaseModel {
+    constructor(type) {
+        this.type = type;
+        this.mainDataPoints = [];
+        this.mainVisualPoints = [];
+        this.dataUpdatedSubject = new Subject();
+        this.dataSetSubject = new Subject();
+        this.dataRemovedSubject = new Subject();
+        this.dataPrependSubject = new Subject();
+        /**
+         * Mean data point width in abstract units.
+         */
+        this.meanDataWidth = 1;
+        /**
+         * Candles aggregation period in ms. Required for future candles calculation.
+         */
+        this.period = 1;
+    }
+    /**
+     * For given timestamp finds the closest candle in dataset.
+     * @param timestamp
+     */
+    // TODO think how to make this function like candleFromX
+    dataFromTimestamp(timestamp, shouldExtrapolate = true) {
+        const result = searchCandleIndex(timestamp, shouldExtrapolate, this.mainDataPoints, this.period);
+        return this.dataFromIdx(result.index);
+    }
+    /**
+     * Recalculates the period of the main candle series based on the data points.
+     * If a period is detected, it is set as the new period.
+     */
+    recalculatePeriod() {
+        const naivePeriod = autoDetectPeriod(this.mainDataPoints);
+        if (naivePeriod) {
+            this.period = naivePeriod;
+        }
+    }
+    /**
+     * For given index returns the closest visual candle, or fake candle with correct X coordinate.
+     * @param idx - index of candle
+     */
+    dataFromIdx(idx) {
+        const vc = this.mainVisualPoints[idx];
+        if (vc) {
+            return vc;
+        }
+        // TODO think maybe to create fake candles in advance, maybe this will improve performance
+        if (this.type === 'candle') {
+            // TODO how to correctly infer type?
+            // @ts-ignore
+            return fakeVisualCandle(this.mainDataPoints, this.mainVisualPoints, this.meanDataWidth, idx, this.period);
+        }
+        else {
+            // @ts-ignore
+            return fakeVisualPoint(this.mainDataPoints, this.mainVisualPoints, this.meanDataWidth, idx, this.period);
+        }
+    }
+}

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

@@ -23,6 +23,7 @@ import { ChartPanComponent } from '../pan/chart-pan.component';
 import { PaneManager } from '../pane/pane-manager.component';
 import { CandleWidthCalculator, ChartModel, LastCandleLabelHandler, VisualCandleCalculator } from './chart.model';
 import { PrependedCandlesData } from './chart-base.model';
+import { DynamicObjectsComponent } from '../dynamic-objects/dynamic-objects.component';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -51,16 +52,18 @@ export declare class ChartComponent extends ChartBaseElement {
     readonly chartModel: ChartModel;
     canvasModel: CanvasModel;
     private config;
-    private scaleModel;
+    private scale;
     private canvasBoundsContainer;
     private drawingManager;
     private hitTestCanvasModel;
     private canvasInputListener;
+    private paneManager;
+    private dynamicObjects;
     readonly baselineModel: BaselineModel;
     private readonly backgroundDrawer;
-    private readonly dataSeriesDrawers;
+    private readonly _dataSeriesDrawers;
     private readonly dataSeriesDrawer;
-    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scaleModel: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler);
+    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent);
     /**
      * This method overrides the doActivate method of the parent class and calls it.
      * It does not take any parameters and does not return anything.
@@ -76,6 +79,7 @@ export declare class ChartComponent extends ChartBaseElement {
      */
     private registerDefaultCandlesTransformers;
     get barTypeValues(): Array<BarType>;
+    get dataSeriesDrawers(): Record<string, SeriesDrawer>;
     strToBarType: (str: string) => BarType;
     /**
      * You can use this method to determine logic of visual candle transformation for specified chart type.