@devexperts/dxcharts-lite 2.7.28 → 2.7.29

package/dist/chart/bootstrap.js

@@ -161,7 +161,7 @@ export default class ChartBootstrap {
         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, this.hitTestCanvasModel);
+        this.xAxisComponent = new XAxisComponent(eventBus, config, mainCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, canvasInputListener, chartResizeHandler, this.drawingManager, timeZoneModel, chartPanComponent, this.cursorHandler, this.hitTestCanvasModel, this.mainPane.yAxis);
         this.chartComponents.push(this.xAxisComponent);
         this.userInputListenerComponents.push(this.xAxisComponent.xAxisScaleHandler);
         const mainCanvasClearDrawer = new ClearCanvasDrawer(mainCanvasModel);

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

@@ -10,6 +10,7 @@ import EventBus from '../../events/event-bus';
 import { CanvasInputListenerComponent, Point } from '../../inputlisteners/canvas-input-listener.component';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 import { DragInfo } from '../dran-n-drop_helper/drag-n-drop.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
@@ -53,7 +54,12 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     lastXStart: number;
     wheelThrottleTime: number;
     chartPanningOptions: ChartPanningOptions;
+    dragNDropXComponent: DragNDropXComponent;
     constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle: boolean): void;
     /**
      * 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.

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

@@ -99,16 +99,22 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         };
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#region drag-n-drop logic
-        const dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
+        this.dragNDropXComponent = new DragNDropXComponent(allPanesHitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             dragPredicate: () => this.chartPanningOptions.horizontal,
-        });
-        this.addChildEntity(dragNDropXComponent);
+        }, this.config.components.yAxis.type === 'percent');
+        this.addChildEntity(this.dragNDropXComponent);
         //#endregion
     }
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle) {
+        this.dragNDropXComponent.setShouldThrottle(shouldThrottle);
+    }
     /**
      * This method is used to activate the zoom functionality of the canvas. It extends the doActivate method of the parent class.
      * @protected

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-x.component.d.ts

@@ -8,7 +8,12 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { DragComponentOptions, DragNDropComponent, DragNDropComponentCallbacks } from './drag-n-drop.component';
 export declare class DragNDropXComponent extends DragNDropComponent {
-    constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions?: DragComponentOptions);
+    private shouldThrottleSubject;
+    constructor(hitTest: HitBoundsTest, dragCallbacks: DragNDropComponentCallbacks, canvasInputListener: CanvasInputListenerComponent, chartPanComponent: ChartPanComponent, dragComponentOptions?: DragComponentOptions, shouldThrottle?: boolean);
+    /**
+     * When true, X drag ticks are throttled to one animation frame (e.g. percent axis).
+     */
+    setShouldThrottle(value: boolean): void;
     /**
      * This method is used to activate the component and add the necessary subscriptions to the canvasInputListener.
      * It calls the super method doActivate() and then adds the following subscriptions:

package/dist/chart/components/dran-n-drop_helper/drag-n-drop-x.component.js

@@ -3,10 +3,25 @@
  * 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/.
  */
+/*
+ * Copyright (C) 2019 - 2024 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 { animationFrameScheduler, BehaviorSubject, identity } from 'rxjs';
+import { distinctUntilChanged, switchMap, throttleTime } from 'rxjs/operators';
 import { defaultDragComponentOptions, DragNDropComponent, } from './drag-n-drop.component';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 export class DragNDropXComponent extends DragNDropComponent {
-    constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions = defaultDragComponentOptions) {
+    constructor(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions = defaultDragComponentOptions, shouldThrottle) {
         super(hitTest, dragCallbacks, canvasInputListener, chartPanComponent, dragComponentOptions);
+        this.shouldThrottleSubject = new BehaviorSubject(!!shouldThrottle);
+    }
+    /**
+     * When true, X drag ticks are throttled to one animation frame (e.g. percent axis).
+     */
+    setShouldThrottle(value) {
+        this.shouldThrottleSubject.next(value);
     }
     /**
      * This method is used to activate the component and add the necessary subscriptions to the canvasInputListener.
@@ -17,9 +32,17 @@ export class DragNDropXComponent extends DragNDropComponent {
      * @returns {void}
      */
     doActivate() {
+        const dragThrottleTime = ONE_FRAME_MS;
         super.doActivate();
         this.addRxSubscription(this.canvasInputListener.observeXDragStart(this.hitTest).subscribe(this.onDragStart));
-        this.addRxSubscription(this.canvasInputListener.observeXDrag().subscribe(this.onDragTick));
+        this.addRxSubscription(this.shouldThrottleSubject
+            .pipe(distinctUntilChanged(), switchMap(shouldThrottle => this.canvasInputListener.observeXDrag().pipe(shouldThrottle
+            ? throttleTime(dragThrottleTime, animationFrameScheduler, {
+                trailing: true,
+                leading: true,
+            })
+            : identity)))
+            .subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeXDragEnd().subscribe(this.onDragEnd));
     }
 }

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

@@ -4,8 +4,8 @@
  * 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 { distinctUntilChanged } from 'rxjs/operators';
-import { areBoundsChanged, CanvasElement, } from '../../canvas/canvas-bounds-container';
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators';
+import { areBoundsChanged, CHART_UUID, CanvasElement, } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { SyncedByXScaleModel } from '../../model/scale.model';
 import { firstOf, flatMap, lastOf } from '../../utils/array.utils';
@@ -80,6 +80,13 @@ export class PaneComponent extends ChartBaseElement {
             this.yExtentComponents.forEach(c => c.scale.recalculateZoomY());
             this.dynamicObjectsCanvasModel.fireDraw();
         }));
+        if (this.uuid === CHART_UUID) {
+            this.addRxSubscription(this.yAxis.axisTypeSetSubject
+                .pipe(startWith(this.yAxis.getAxisType()), distinctUntilChanged(), map((axisType) => axisType === 'percent'))
+                .subscribe(shouldThrottle => {
+                this.chartPanComponent.chartAreaPanHandler.setChartAreaXDragThrottled(shouldThrottle);
+            }));
+        }
     }
     toY(price) {
         var _a, _b;

package/dist/chart/components/x_axis/x-axis-scale.handler.d.ts

@@ -9,6 +9,7 @@ import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-
 import { ScaleModel } from '../../model/scale.model';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartModel } from '../chart/chart.model';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 /**
@@ -30,7 +31,12 @@ export declare class XAxisScaleHandler extends ChartBaseElement {
     private dblClickCallback;
     private touches;
     private dblTapCallback;
+    dragNDropXComponent: DragNDropXComponent;
     constructor(scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, chartModel: ChartModel, hitTest: HitBoundsTest, hitTestCanvasModel: HitTestCanvasModel);
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle: boolean): void;
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.
      * It calls the parent class's doActivate method and then subscribes to the canvasInputListener's observeDbClick method.

package/dist/chart/components/x_axis/x-axis-scale.handler.js

@@ -85,14 +85,22 @@ export class XAxisScaleHandler extends ChartBaseElement {
         this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => chartModel.doBasicScale();
         this.dblTapCallback = () => chartModel.doBasicScale();
-        const dragNDropXComponent = new DragNDropXComponent(hitTest, {
+        //#region drag-n-drop logic
+        this.dragNDropXComponent = new DragNDropXComponent(hitTest, {
             onDragStart: this.onXDragStart,
             onDragTick: this.onXDragTick,
             onDragEnd: this.onXDragEnd,
         }, this.canvasInputListener, this.chartPanComponent, {
             dragPredicate: () => chartPanComponent.chartAreaPanHandler.chartPanningOptions.horizontal,
         });
-        this.addChildEntity(dragNDropXComponent);
+        this.addChildEntity(this.dragNDropXComponent);
+        //#endregion
+    }
+    /**
+     * Throttles chart-area horizontal drag to one animation frame when needed (percent Y-axis).
+     */
+    setChartAreaXDragThrottled(shouldThrottle) {
+        this.dragNDropXComponent.setShouldThrottle(shouldThrottle);
     }
     /**
      * This method is used to activate the canvas input listener and add a subscription to it.

package/dist/chart/components/x_axis/x-axis.component.d.ts

@@ -23,6 +23,7 @@ import { XAxisLabelsModel, XAxisLabelsProvider } from './x-axis-labels.model';
 import { XAxisScaleHandler } from './x-axis-scale.handler';
 import { XAxisTimeLabelsDrawer } from './x-axis-time-labels.drawer';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
+import { YAxisComponent } from '../y_axis/y-axis.component';
 /**
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
@@ -34,12 +35,13 @@ export declare class XAxisComponent extends ChartBaseElement {
     private scale;
     private chartResizeHandler;
     private timeZoneModel;
+    private yAxis;
     xAxisDrawer: XAxisTimeLabelsDrawer;
     xAxisLabelsDrawer: XAxisLabelsDrawer;
     xAxisLabelsGenerator: XAxisLabelsGenerator;
     readonly xAxisLabelsModel: XAxisLabelsModel;
     xAxisScaleHandler: XAxisScaleHandler;
-    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, hitTestCanvasModel: HitTestCanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, chartComponent: ChartComponent, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, canvasInputListener: CanvasInputListenerComponent, chartResizeHandler: ChartResizeHandler, drawingManager: DrawingManager, timeZoneModel: TimeZoneModel, chartPanComponent: ChartPanComponent, cursorHandler: CursorHandler, hitTestCanvasModel: HitTestCanvasModel, yAxis: YAxisComponent);
     /**
      * This method is used to activate the chart and update the labels if there is a new data set or equivolume type.
      * It subscribes to the chart type change, candles set subject, candles updated subject, and time zone change to generate new labels.

package/dist/chart/components/x_axis/x-axis.component.js

@@ -4,7 +4,7 @@
  * 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, animationFrameScheduler } from 'rxjs';
-import { distinctUntilChanged, map, throttleTime, filter } from 'rxjs/operators';
+import { distinctUntilChanged, map, throttleTime, filter, startWith } from 'rxjs/operators';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CompositeDrawer } from '../../drawers/composite.drawer';
@@ -20,7 +20,7 @@ import { availableBarTypes } from '../../chart.config';
  * X-axis component, contains all x-axis calculation and rendering logic.
  */
 export class XAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler, hitTestCanvasModel) {
+    constructor(eventBus, config, canvasModel, chartComponent, scale, canvasBoundsContainer, canvasInputListener, chartResizeHandler, drawingManager, timeZoneModel, chartPanComponent, cursorHandler, hitTestCanvasModel, yAxis) {
         super();
         this.eventBus = eventBus;
         this.config = config;
@@ -29,6 +29,7 @@ export class XAxisComponent extends ChartBaseElement {
         this.scale = scale;
         this.chartResizeHandler = chartResizeHandler;
         this.timeZoneModel = timeZoneModel;
+        this.yAxis = yAxis;
         /* This function assigns a callback to be executed when a double-click event is detected.
          * It accepts one parameter `cb`, which is a callback function.
          * When a double-click event occurs, the specified callback function `cb` will be invoked.
@@ -91,6 +92,11 @@ export class XAxisComponent extends ChartBaseElement {
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
             .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.id) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.id); }), filter(notEmpty))
             .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
+        this.addRxSubscription(this.yAxis.axisTypeSetSubject
+            .pipe(startWith(this.yAxis.getAxisType()), distinctUntilChanged(), map((axisType) => axisType === 'percent'))
+            .subscribe(shouldThrottle => {
+            this.xAxisScaleHandler.setChartAreaXDragThrottled(shouldThrottle);
+        }));
     }
     /**
      * Returns the xAxisDrawer object.