@devexperts/dxcharts-lite 2.2.0 → 2.3.0

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

@@ -35,11 +35,11 @@ export declare class CanvasElement {
     static CHART_WITH_Y_AXIS: string;
     static EVENTS: string;
     /**
-     * @deprecated - use CanvasElement.PANE_UUID(CHART_UUID) instead
+     * @returns pane bounds for the main chart
      */
     static CHART: string;
     /**
-     * @deprecated - use CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID) instead
+     * @returns y-axis bounds for the main chart
      */
     static Y_AXIS: string;
 }

package/dist/chart/canvas/canvas-bounds-container.js

@@ -31,11 +31,11 @@ CanvasElement.ALL_PANES = 'ALL_PANES';
 CanvasElement.CHART_WITH_Y_AXIS = 'CHART_WITH_Y_AXIS';
 CanvasElement.EVENTS = 'EVENTS';
 /**
- * @deprecated - use CanvasElement.PANE_UUID(CHART_UUID) instead
+ * @returns pane bounds for the main chart
  */
 CanvasElement.CHART = CanvasElement.PANE_UUID(CHART_UUID);
 /**
- * @deprecated - use CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID) instead
+ * @returns y-axis bounds for the main chart
  */
 CanvasElement.Y_AXIS = CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID);
 export { CanvasElement };

package/dist/chart/chart.config.d.ts

@@ -233,10 +233,23 @@ export interface ChartScale {
      * When dragging chart under specific angle - will automatically disable auto-scale.
      */
     autoScaleDisableOnDrag: AutoScaleDisableOnDrag;
-    /**
-     * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
-     */
-    zoomSensitivity: number;
+    zoomSensitivity: {
+        /**
+         * Value is related to zoom event (zooming chart via mouse wheel)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        wheel: number;
+        /**
+         * Value is related to pinch touchpad event (zooming chart via touchpad)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        pinch: number;
+        /**
+         * Value is related to glide touchpad event (scrolling chart via touchpad)
+         * 0..1 ratio of full viewport; 0.5 = middle, 0.75 = 3/4 of viewport
+         */
+        glide: number;
+    };
     /**
      * Defines how much items (candles) will be in viewport when chart applies basic scale
      */

package/dist/chart/chart.config.js

@@ -41,9 +41,13 @@ export const getDefaultConfig = () => ({
             yDiff: 80,
         },
         inverse: false,
-        zoomSensitivity: 0.25,
+        zoomSensitivity: {
+            wheel: 0.25,
+            pinch: 0.05,
+            glide: 0.05,
+        },
         defaultViewportItems: 100,
-        disableAnimations: false
+        disableAnimations: false,
     },
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     components: {

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

@@ -60,10 +60,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
          * @param {WheelEvent} e - Wheel event
          * @returns {void}
          */
-        this.zoomXHandler = (e) => {
-            const isTouchpad = touchpadDetector(e);
+        this.zoomXHandler = (e, zoomSensitivity) => {
             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;
@@ -115,7 +113,13 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         //#endregion
         this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
             .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
-            .subscribe(this.zoomXHandler));
+            .subscribe(e => {
+            const isTouchpad = touchpadDetector(e);
+            const zoomSensitivity = isTouchpad
+                ? getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.pinch)
+                : this.config.scale.zoomSensitivity.wheel;
+            this.zoomXHandler(e, zoomSensitivity);
+        }));
         this.addRxSubscription(this.canvasInputListener
             .observeScrollGesture()
             .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
@@ -134,7 +138,8 @@ export class ChartAreaPanHandler extends ChartBaseElement {
                 this.scale.moveXStart(this.scale.xStart - unitsDelta);
             }
             else if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
-                this.zoomXHandler(e);
+                const zoomSensitivity = getTouchpadSensitivity(this.config.components.yAxis.type, this.config.scale.zoomSensitivity.glide);
+                this.zoomXHandler(e, zoomSensitivity);
             }
             this.bus.fireDraw();
         }));

package/dist/chart/components/cross_tool/cross-tool.model.js

@@ -107,7 +107,7 @@ export class CrossToolModel extends ChartBaseElement {
         else {
             this.currentHover.y = hover.y;
         }
-        this.currentHover.paneId = CHART_UUID;
+        this.currentHover.paneId = hover.paneId;
         this.currentHoverSubject.next(this.currentHover);
     }
 }

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

@@ -40,6 +40,7 @@ export class SnapshotComponent extends ChartBaseElement {
             ctx.drawImage(this.elements.mainCanvas, 0, 0, width, height);
             ctx.drawImage(this.elements.dynamicObjectsCanvas, 0, 0, width, height);
             ctx.drawImage(this.elements.crossToolCanvas, 0, 0, width, height);
+            ctx.drawImage(this.elements.yAxisLabelsCanvas, 0, 0, width, height);
             userDrawCallback && userDrawCallback(ctx);
             return new Promise((resolve, fail) => this.elements.snapshotCanvas.toBlob(blob => {
                 return blob ? resolve(blob) : fail('Blob is null');

package/dist/chart/components/volumes/separate-volumes.component.js

@@ -31,9 +31,10 @@ class SeparateVolumesComponent extends ChartBaseElement {
      */
     activateSeparateVolumes() {
         if (this.paneManager.panes[SeparateVolumesComponent.UUID] === undefined) {
+            const precision = 1;
             const volumePane = this.paneManager.createPane(SeparateVolumesComponent.UUID, {
                 paneFormatters: {
-                    regular: volumeFormatter,
+                    regular: (value) => volumeFormatter(value, precision),
                 },
                 useDefaultHighLow: false,
                 increment: 1,

package/dist/chart/components/volumes/volumes.formatter.d.ts

@@ -3,4 +3,4 @@
  * 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 declare const volumeFormatter: (value: number) => string;
+export declare const volumeFormatter: (value: number, precision?: number) => string;

package/dist/chart/components/volumes/volumes.formatter.js

@@ -3,34 +3,37 @@
  * 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/.
  */
-const DEFAULT_PRECISION = 5;
-const MIN_VALUE = 0.0000000001;
-const TRAILLING_ZEROES_REGEXP = /\.?0+$/;
-const TRAILLING_FRACTION_WITH_ZEROES_REGEXP = /(\.[1-9]*)0+$/;
-export const volumeFormatter = (value) => {
-    const formatValue = (value, amountToCut) => {
-        const rounder = Math.pow(10, DEFAULT_PRECISION);
-        const roundedValue = Math.round(value * rounder) / rounder;
-        if (roundedValue < 1 && roundedValue >= MIN_VALUE) {
-            return roundedValue
-                .toFixed(DEFAULT_PRECISION)
-                .replace(TRAILLING_ZEROES_REGEXP, '')
-                .replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '');
+export const volumeFormatter = (value, precision = 1) => {
+    function formatNumber(value) {
+        let formattedResult;
+        const priceScale = Math.pow(10, precision);
+        value = Math.round(value * priceScale) / priceScale;
+        if (value >= 1e-15 && value < 1) {
+            formattedResult = value.toFixed(precision).replace(/\.?0+$/, ''); // regex removes trailing zeroes
         }
         else {
-            return (roundedValue + '').replace(TRAILLING_FRACTION_WITH_ZEROES_REGEXP, '') + (amountToCut || '');
+            formattedResult = String(value);
         }
-    };
-    if (Math.abs(value) > 999999999) {
-        value = Math.round(value / 1000000) * 1000000;
-        return formatValue(value / 1000000000, 'B');
+        return formattedResult.replace(/(\.[1-9]*)0+$/, (e, p1) => p1);
     }
-    if (Math.abs(value) > 999999) {
-        value = 1000 * Math.round(value / 1000);
-        return formatValue(value / 1000000, 'M');
-    }
-    if (Math.abs(value) > 9999) {
-        return formatValue(value / 1000, 'K');
+    function format(value) {
+        let sign = '';
+        if (value < 0) {
+            sign = '-';
+            value = -value;
+        }
+        if (value < 995) {
+            return sign + formatNumber(value);
+        }
+        if (value < 999995) {
+            return sign + formatNumber(value / 1000) + 'K';
+        }
+        if (value < 999999995) {
+            value = 1000 * Math.round(value / 1000);
+            return sign + formatNumber(value / 1000000) + 'M';
+        }
+        value = 1000000 * Math.round(value / 1000000);
+        return sign + formatNumber(value / 1000000000) + 'B';
     }
-    return formatValue(value);
+    return format(value);
 };

package/dist/chart/components/y_axis/y-axis-scale.handler.d.ts

@@ -9,23 +9,24 @@ import { YAxisConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasInputListenerComponent } from '../../inputlisteners/canvas-input-listener.component';
-import { Pixel, Unit, ViewportModel } from '../../model/scaling/viewport.model';
+import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartPanComponent } from '../pan/chart-pan.component';
+import { ScaleModel } from '../../model/scale.model';
 /**
  * Handles the mouse drag on Y axis - to zoom the viewport vertically.
  * @doc-tags scaling,zoom,viewport
  */
 export declare class YAxisScaleHandler extends ChartBaseElement {
     private bus;
-    private viewportModel;
-    private canvasBoundsContainer;
+    private scale;
+    private bounds;
     private autoScaleCallback;
     yAxisDragEndSubject: Subject<void>;
     lastYStart: Unit;
     lastYEnd: Unit;
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
-    constructor(bus: EventBus, config: YAxisConfig, chartPanComponent: ChartPanComponent, viewportModel: ViewportModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
     private onYDragStart;
     private onYDragTick;
     private onYDragEnd;

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -14,11 +14,11 @@ const FULL_Y_HEIGHT_ZOOM_FACTOR = 10;
  * @doc-tags scaling,zoom,viewport
  */
 export class YAxisScaleHandler extends ChartBaseElement {
-    constructor(bus, config, chartPanComponent, viewportModel, canvasInputListener, canvasBoundsContainer, hitTest, autoScaleCallback) {
+    constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback) {
         super();
         this.bus = bus;
-        this.viewportModel = viewportModel;
-        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.scale = scale;
+        this.bounds = bounds;
         this.autoScaleCallback = autoScaleCallback;
         this.yAxisDragEndSubject = new Subject();
         this.lastYStart = 0;
@@ -26,10 +26,10 @@ export class YAxisScaleHandler extends ChartBaseElement {
         this.lastYHeight = 0;
         this.lastYPxHeight = 0;
         this.onYDragStart = () => {
-            this.lastYStart = this.viewportModel.yStart;
-            this.lastYEnd = this.viewportModel.yEnd;
-            this.lastYHeight = this.viewportModel.yEnd - this.viewportModel.yStart;
-            this.lastYPxHeight = this.canvasBoundsContainer.getBounds(CanvasElement.Y_AXIS).height;
+            this.lastYStart = this.scale.yStart;
+            this.lastYEnd = this.scale.yEnd;
+            this.lastYHeight = this.scale.yEnd - this.scale.yStart;
+            this.lastYPxHeight = this.bounds.getBounds(CanvasElement.Y_AXIS).height;
         };
         this.onYDragTick = (dragInfo) => {
             const { delta: absoluteYDelta } = dragInfo;
@@ -48,7 +48,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
             const newYStart = this.lastYStart - delta;
             const newYEnd = this.lastYEnd + delta;
             this.autoScaleCallback(false);
-            this.viewportModel.setYScale(newYStart, newYEnd);
+            this.scale.setYScale(newYStart, newYEnd);
             this.bus.fireDraw();
         };
         this.onYDragEnd = () => {
@@ -61,7 +61,7 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 onDragTick: callIfPredicateTrue(this.onYDragTick, dragPredicate),
                 onDragStart: callIfPredicateTrue(this.onYDragStart, dragPredicate),
                 onDragEnd: callIfPredicateTrue(this.onYDragEnd, dragPredicate),
-            }, canvasInputListener, chartPanComponent, {
+            }, canvasInputListener, panning, {
                 disableChartPanning: false,
             });
             this.addChildEntity(dragNDropYComponent);

package/dist/chart/components/y_axis/y-axis.component.js

@@ -151,6 +151,7 @@ export class YAxisComponent extends ChartBaseElement {
     setAxisType(type) {
         if (type !== this.state.type) {
             this.state.type = type;
+            this.config.components.yAxis.type = type;
             this.axisTypeSetSubject.next(type);
             this.scale.autoScale(true);
             this.model.fancyLabelsModel.updateLabels(true);

package/dist/chart/drawers/data-series.drawer.js

@@ -53,7 +53,7 @@ export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSel
         ctx.lineWidth = drawerConfig.forceBold;
     }
     else if (dataSeries.hovered) {
-        ctx.lineWidth = seriesSelectedWidth;
+        ctx.lineWidth = lineWidth !== seriesSelectedWidth ? lineWidth + 1 : seriesSelectedWidth;
     }
     else {
         ctx.lineWidth = lineWidth;

package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts

@@ -44,6 +44,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private mouseUpDocumentSubject;
     private wheelSubject;
     private touchStartSubject;
+    private touchStartTimestamp;
     private touchMoveSubject;
     private touchEndSubject;
     private touchCancelSubject;
@@ -52,6 +53,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
     private contextMenuSubject;
     private pinchSubject;
     private scrollGestureSubject;
+    private fastTouchScroll;
     mouseLeavesCanvasSubject: Subject<boolean>;
     dragStartPoint: Point;
     prevDragPoint: Point;
@@ -312,6 +314,13 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
      * @returns {Observable<TouchEvent>} - An Observable that emits a TouchEvent when a long touch is detected on the current element.
      */
     observeLongTouchEnd(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest?: HitBoundsTest): Observable<TouchEvent>;
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -46,6 +46,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.mouseUpDocumentSubject = new Subject();
         this.wheelSubject = new Subject();
         this.touchStartSubject = new Subject();
+        this.touchStartTimestamp = 0;
         this.touchMoveSubject = new Subject();
         this.touchEndSubject = new Subject();
         this.touchCancelSubject = new Subject();
@@ -54,6 +55,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
         this.contextMenuSubject = new Subject();
         this.pinchSubject = new Subject();
         this.scrollGestureSubject = new Subject();
+        this.fastTouchScroll = new Subject();
         this.mouseLeavesCanvasSubject = new Subject();
         // point at which start dragging
         this.dragStartPoint = { x: 0, y: 0 };
@@ -236,9 +238,33 @@ class CanvasInputListenerComponent extends ChartBaseElement {
                 this.element.addEventListener('touchend', touchEndHandler);
             };
             this.addSubscription(subscribeListener(this.element, (e) => longTouchListeners(e), 'touchstart'));
+            const fastScrollListenerProducer = (e) => {
+                e.preventDefault();
+                // should work only if dragged to the left
+                if (this.prevDragPoint.x > this.dragStartPoint.x) {
+                    // in percent, perhaps should be changed to just pixels,
+                    // because landscape and portait orientations would give different % results
+                    const minDistance = 35;
+                    // in ms, should be lower to detect as "fast"
+                    const maxTime = 250;
+                    const touchStartTs = this.touchStartTimestamp;
+                    const touchEndTs = Date.now();
+                    const time = touchEndTs - touchStartTs;
+                    const distance = ((this.prevDragPoint.x - this.dragStartPoint.x) / this.canvasBounds.width) * 100;
+                    const isRightDistance = distance > minDistance;
+                    const isRightTime = time <= maxTime;
+                    if (isRightDistance && isRightTime) {
+                        this.fastTouchScroll.next(e);
+                    }
+                }
+            };
+            this.addSubscription(subscribeListener(this.element, fastScrollListenerProducer, 'touchend'));
         }
         this.addSubscription(subscribeListener(this.element, leftMouseButtonListener(() => this.dbClickSubject.next(this.currentPoint)), 'dblclick'));
-        this.addSubscription(subscribeListener(this.element, (e) => this.touchStartSubject.next(e), 'touchstart'));
+        this.addSubscription(subscribeListener(this.element, (e) => {
+            this.touchStartSubject.next(e);
+            this.touchStartTimestamp = Date.now();
+        }, 'touchstart'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchMoveSubject.next(e), 'touchmove', true));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchEndSubject.next(e), 'touchend'));
         this.addSubscription(subscribeListener(this.element, (e) => this.touchCancelSubject.next(e), 'touchcancel'));
@@ -643,6 +669,17 @@ class CanvasInputListenerComponent extends ChartBaseElement {
             .asObservable()
             .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
     }
+    /**
+     * Returns an Observable that emits a Touch whenever a fast scroll is detected.
+     * Fast scroll happens whenever chart or any other pane were moved faster than usual
+     * The Observable is created from a Subject that is subscribed to by the component's template.
+     * @returns {Observable<TouchEvent>} An Observable that emits a TouchEvent whenever a fast scroll is detected.
+     */
+    observeFastTouchScroll(hitBoundsTest = () => true) {
+        return this.fastTouchScroll
+            .asObservable()
+            .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
+    }
     /**
      * Returns the current point of the object.
      * @returns {Point} The current point of the object.

package/dist/chart/model/scale.model.d.ts

@@ -71,13 +71,13 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAnimation Whether to skip animation.
      * @param zoomSensitivity The sensitivity of the zoom.
      */
-    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation?: boolean, zoomSensitivity?: number): void;
+    zoomXToPercent(viewportPercent: ViewportPercent, zoomIn: boolean, forceNoAnimation: boolean | undefined, zoomSensitivity: number): void;
     /**
      * Zooms the X axis of the chart relativly to the end of the data range.
      * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
-    zoomXToEnd(zoomIn: boolean, zoomSensitivity?: number): void;
+    zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
     /**
@@ -89,6 +89,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
     setXScale(xStart: Unit, xEnd: Unit): void;
+    setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.

package/dist/chart/model/scale.model.js

@@ -8,7 +8,7 @@ import { startViewportModelAnimation } from '../animation/viewport-model-animati
 import { cloneUnsafe } from '../utils/object.utils';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
 import { zoomConstraint } from './scaling/constrait.functions';
-import { lockedYEndViewportCalculator, ratioFromZoomXY } from './scaling/lock-ratio.model';
+import { changeXToKeepRatio, changeYToKeepRatio, ratioFromZoomXY } from './scaling/lock-ratio.model';
 import { moveXStart, moveYStart } from './scaling/move-chart.functions';
 import { ViewportModel, compareStates } from './scaling/viewport.model';
 import { zoomXToEndViewportCalculator, zoomXToPercentViewportCalculator } from './scaling/x-zooming.functions';
@@ -81,7 +81,7 @@ export class ScaleModel extends ViewportModel {
      * @param forceNoAnimation Whether to skip animation.
      * @param zoomSensitivity The sensitivity of the zoom.
      */
-    zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity = this.config.scale.zoomSensitivity) {
+    zoomXToPercent(viewportPercent, zoomIn, forceNoAnimation = false, zoomSensitivity) {
         const disabledAnimations = this.config.scale.disableAnimations || forceNoAnimation;
         if (disabledAnimations) {
             this.haltAnimation();
@@ -96,7 +96,7 @@ export class ScaleModel extends ViewportModel {
      * @param zoomIn - If true, the chart will be zoomed in. If false, the chart will be zoomed out.
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
-    zoomXToEnd(zoomIn, zoomSensitivity = this.config.scale.zoomSensitivity) {
+    zoomXToEnd(zoomIn, zoomSensitivity) {
         if (this.config.scale.disableAnimations) {
             this.haltAnimation();
         }
@@ -116,7 +116,7 @@ export class ScaleModel extends ViewportModel {
         const initialStateCopy = Object.assign({}, state);
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         if (this.state.lockPriceToBarRatio) {
-            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
@@ -142,13 +142,31 @@ export class ScaleModel extends ViewportModel {
         const state = this.export();
         const constrainedState = this.scalePostProcessor(initialState, state);
         if (this.state.lockPriceToBarRatio) {
-            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
+            changeYToKeepRatio(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
         }
         this.apply(constrainedState);
     }
+    setYScale(yStart, yEnd, fire = false) {
+        const initialState = this.export();
+        super.setYScale(yStart, yEnd, fire);
+        const state = this.export();
+        const constrainedState = this.scalePostProcessor(initialState, state);
+        if (this.state.lockPriceToBarRatio) {
+            changeXToKeepRatio(constrainedState, this.zoomXYRatio);
+            this.setXScale(constrainedState.xStart, constrainedState.xEnd);
+            // TODO: rewrite logic for applying constraints to consider both axes, now constraints on Y may not work correctly
+            return;
+        }
+        else {
+            if (this.state.auto) {
+                this.autoScaleModel.doAutoYScale(constrainedState);
+            }
+            this.apply(constrainedState);
+        }
+    }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
      * Works without animation.

package/dist/chart/model/scaling/constrait.functions.d.ts

@@ -32,7 +32,7 @@ export declare const candleEdgesConstrait: (state: ViewportModelState, visualCan
  * @returns
  * @doc-tags viewport,zoom,scaling
  */
-export declare const zoomConstraint: (initialState: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
+export declare const zoomConstraint: (_: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
     xStart: number;
     xEnd: number;
     yStart: number;

package/dist/chart/model/scaling/constrait.functions.js

@@ -40,7 +40,7 @@ export const candleEdgesConstrait = (state, visualCandlesCoordinates, candleLimi
  * @returns
  * @doc-tags viewport,zoom,scaling
  */
-export const zoomConstraint = (initialState, state, chartConfig, boundsProvider) => {
+export const zoomConstraint = (_, state, chartConfig, boundsProvider) => {
     const newState = Object.assign({}, state);
     const bounds = boundsProvider();
     // 1 - is an average candle width: newXEnd - newXStart = avg candles amount in the viewport
@@ -56,7 +56,6 @@ export const zoomConstraint = (initialState, state, chartConfig, boundsProvider)
             return newState;
         }
         if (minViewportReached) {
-            newState.xEnd = initialState.xEnd;
             newState.xStart = newState.xEnd - chartConfig.minCandles;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
             return newState;

package/dist/chart/model/scaling/lock-ratio.model.d.ts

@@ -9,8 +9,14 @@ export declare const ratioFromZoomXY: (zoomX: Zoom, zoomY: Zoom) => ZoomXToZoomY
 export declare const zoomXToZoomY: (zoomX: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 export declare const zoomYToZoomX: (zoomY: Zoom, ratio: ZoomXToZoomYRatio) => Zoom;
 /**
- * Locks the zoomY with zoomX and moves yEnd according to ratio changes.
+ * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
  * @param state
  * @param zoomXYRatio
  */
-export declare const lockedYEndViewportCalculator: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+export declare const changeYToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;
+/**
+ *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
+ * @param state
+ * @param zoomXYRatio
+ */
+export declare const changeXToKeepRatio: (state: ViewportModelState, zoomXYRatio: ZoomXToZoomYRatio) => void;

package/dist/chart/model/scaling/lock-ratio.model.js

@@ -7,16 +7,31 @@ export const ratioFromZoomXY = (zoomX, zoomY) => zoomX / zoomY;
 export const zoomXToZoomY = (zoomX, ratio) => zoomX / ratio;
 export const zoomYToZoomX = (zoomY, ratio) => zoomY * ratio;
 /**
- * Locks the zoomY with zoomX and moves yEnd according to ratio changes.
+ * Locks the zoomY with zoomX and zooms y-scale depending on x-scale.
  * @param state
  * @param zoomXYRatio
  */
-export const lockedYEndViewportCalculator = (state, zoomXYRatio) => {
+export const changeYToKeepRatio = (state, zoomXYRatio) => {
     const prevZoomY = state.zoomY;
     state.zoomY = zoomXToZoomY(state.zoomX, zoomXYRatio);
     const zoomYMult = state.zoomY / prevZoomY;
     const lastYHeight = state.yEnd - state.yStart;
     const newYHeight = lastYHeight * zoomYMult;
     const delta = newYHeight - lastYHeight;
-    state.yEnd = state.yEnd + delta;
+    state.yEnd = state.yEnd + delta / 2;
+    state.yStart = state.yStart - delta / 2;
+};
+/**
+ *  Locks the zoomY with zoomX and zooms x-scale depending on y-scale.
+ * @param state
+ * @param zoomXYRatio
+ */
+export const changeXToKeepRatio = (state, zoomXYRatio) => {
+    const prevZoomX = state.zoomX;
+    state.zoomX = zoomYToZoomX(state.zoomY, zoomXYRatio);
+    const zoomXMult = state.zoomX / prevZoomX;
+    const lastXWidth = state.xEnd - state.xStart;
+    const newXWidth = lastXWidth * zoomXMult;
+    const delta = newXWidth - lastXWidth;
+    state.xStart = state.xStart - delta;
 };

package/dist/chart/utils/device/touchpad.utils.d.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { FullChartConfig } from '../../chart.config';
+import { PriceAxisType } from '../../components/labels_generator/numeric-axis-labels.generator';
 export declare const isFirefox: boolean;
 /**
  * this function determines whether the event was triggered with the mouse or the touchpad
@@ -20,11 +20,11 @@ export declare const isFirefox: boolean;
  */
 export declare const touchpadDetector: (e: WheelEvent) => boolean;
 /**
- * this function returns different ящщь sensitivity for the percent axis and the others
+ * this function returns different zoom sensitivity for the percent axis and the others
  * @param config
  * @param isTouchpad
  * @returns {number}
  *
  * @doc-tags chart-core, zoom
  */
-export declare const getTouchpadSensitivity: (config: FullChartConfig) => number;
+export declare const getTouchpadSensitivity: (type: PriceAxisType, zoomSensitivity: number) => number;

package/dist/chart/utils/device/touchpad.utils.js

@@ -82,15 +82,13 @@ export const touchpadDetector = (e) => {
     return isTouchpad;
 };
 /**
- * this function returns different ящщь sensitivity for the percent axis and the others
+ * this function returns different zoom sensitivity for the percent axis and the others
  * @param config
  * @param isTouchpad
  * @returns {number}
  *
  * @doc-tags chart-core, zoom
  */
-export const getTouchpadSensitivity = (config) => {
-    const isPercentAxisType = config.components.yAxis.type === 'percent';
-    const zoomSensitivity = isPercentAxisType ? config.scale.zoomSensitivity / 4 : config.scale.zoomSensitivity;
-    return zoomSensitivity;
+export const getTouchpadSensitivity = (type, zoomSensitivity) => {
+    return type === 'percent' ? zoomSensitivity / 4 : zoomSensitivity;
 };

package/dist/chart/utils/math.utils.d.ts

@@ -3,7 +3,6 @@
  * 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 declare const MAX_DECIMAL_DIGITS = 14;
 export type NumberFormatLabels = 'K' | 'M' | 'B';
 export declare class MathUtils {
     static roundToNearest(value: number, precision: number): number;