@devexperts/dxcharts-lite 2.4.5 → 2.5.0

package/dist/chart/__tests__/model/date-time.formatter.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * 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 '../env';

package/dist/chart/__tests__/model/date-time.formatter.test.js

@@ -0,0 +1,30 @@
+/*
+ * 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 '../env';
+import { formatDate, getShortDays, getShortMonths } from '../../model/date-time.formatter';
+import { getDefaultConfig } from '../../chart.config';
+import { getTimezoneOffset } from '../../utils/timezone.utils';
+describe('Date time formatter', () => {
+    const config = getDefaultConfig();
+    const days = getShortDays(config);
+    const months = getShortMonths(config);
+    const timestamp = 1710501810500;
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const utcTimestamp = timestamp - getTimezoneOffset(tz, timestamp);
+    const utcDate = new Date(utcTimestamp); // 03/15/2024 @ 11:23am UTC
+    describe('Timezones', () => {
+        it('should always be UTC', () => {
+            expect(getTimezoneOffset('UTC', utcTimestamp)).toBe(0);
+        });
+    });
+    describe('Formatter', () => {
+        it('should return formatted value according to given pattern', () => {
+            expect(formatDate(utcDate, 'YYYY', days, months)).toEqual('2024');
+            expect(formatDate(utcDate, 'HH:mm:ss', days, months)).toEqual('11:23:30');
+            expect(formatDate(utcDate, 'dd.MM.YYYY', days, months)).toEqual('15.03.2024');
+        });
+    });
+});

package/dist/chart/bootstrap.js

@@ -127,7 +127,7 @@ export default class ChartBootstrap {
         this.chartPanComponent = chartPanComponent;
         this.chartComponents.push(chartPanComponent);
         this.userInputListenerComponents.push(chartPanComponent.chartAreaPanHandler);
-        const hitTestComponent = new HitTestComponent(hitTestCanvasModel, canvasAnimation);
+        const hitTestComponent = new HitTestComponent(hitTestCanvasModel, canvasAnimation, eventBus);
         this.hitTestComponent = hitTestComponent;
         this.chartComponents.push(hitTestComponent);
         const paneManager = new PaneManager(chartBaseModel, this.dynamicObjectsCanvasModel, this.userInputListenerComponents, eventBus, scaleModel, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, drawingManager, this.cursorHandler, this.crossEventProducer, chartPanComponent, mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel);

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

@@ -44,6 +44,7 @@ export declare class CanvasElement {
     static Y_AXIS: string;
 }
 export declare const DEFAULT_BOUNDS: Bounds;
+export declare const DEFAULT_MIN_PANE_HEIGHT = 20;
 /**
  * This component listens EVENT_DRAW and recalculates bounds of canvas chart elements.
  * {@link getBounds} method will always give actual placement of element you want.
@@ -61,6 +62,7 @@ export declare class CanvasBoundsContainer {
     canvasOnPageLocation: Bounds;
     panesOrder: Array<string>;
     panesOrderChangedSubject: Subject<string[]>;
+    paneVisibilityChangedSubject: Subject<void>;
     xAxisHeight: number | undefined;
     yAxisWidths: YAxisWidths;
     leftRatio: number;
@@ -85,8 +87,7 @@ export declare class CanvasBoundsContainer {
      * @param {Record<string, number>} heightRatios - An object containing the height ratios to be set.
      * @returns {void}
      * @throws {Error} If the sum of the height ratios is not equal to 1.
-     
-    */
+     */
     overrideChartHeightRatios(heightRatios: Record<string, number>): void;
     /**
      * Moves a pane up in the panesOrder array.
@@ -109,12 +110,14 @@ export declare class CanvasBoundsContainer {
      * 	result: ['3', '2', '1']
      */
     reorderPanes(newPanesOrder: string[]): void;
+    hidePaneBounds(uuid: string): void;
+    showPaneBounds(uuid: string): void;
     /**
      * Removes the bounds of a pane with the given uuid from the canvas element.
      * @param {string} uuid - The uuid of the pane to remove.
      * @returns {void}
      */
-    removedPaneBounds(uuid: string): void;
+    removePaneBounds(uuid: string): void;
     /**
      * Recalculates the bounds of the chart elements based on the current configuration and canvas size.
      * The function updates the bounds of the canvas, the main chart, the panes, the y-axis, and the chart with y-axis.
@@ -326,6 +329,7 @@ export declare class CanvasBoundsContainer {
      */
     setMainCandleSeries(candleSeries: CandleSeriesModel): void;
 }
+export declare const getHeightRatios: (pecLength: number) => [number, number];
 export declare const isInBounds: (point: Point, bounds: Bounds) => boolean;
 export declare const isInVerticalBounds: (y: number, bounds: Bounds) => boolean;
 export declare const limitYToBounds: (y: Pixel, bounds: Bounds) => number;

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

@@ -40,7 +40,7 @@ CanvasElement.CHART = CanvasElement.PANE_UUID(CHART_UUID);
 CanvasElement.Y_AXIS = CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID);
 export { CanvasElement };
 export const DEFAULT_BOUNDS = { x: 0, y: 0, pageX: 0, pageY: 0, width: 0, height: 0 };
-const DEFAULT_MIN_PANE_HEIGHT = 20;
+export const DEFAULT_MIN_PANE_HEIGHT = 20;
 const N_MAP_H = 35;
 const N_MAP_BUTTON_W = 15;
 const KNOTS_W_MOBILE_MULTIPLIER = 1.5;
@@ -72,6 +72,7 @@ export class CanvasBoundsContainer {
         // holds ordered "top to bottom" array of panes UUID's (studies in past)
         this.panesOrder = [];
         this.panesOrderChangedSubject = new Subject();
+        this.paneVisibilityChangedSubject = new Subject();
         // both will be calculated based on font/content size
         this.xAxisHeight = undefined;
         this.yAxisWidths = {
@@ -120,8 +121,7 @@ export class CanvasBoundsContainer {
      * @param {Record<string, number>} heightRatios - An object containing the height ratios to be set.
      * @returns {void}
      * @throws {Error} If the sum of the height ratios is not equal to 1.
-     
-    */
+     */
     overrideChartHeightRatios(heightRatios) {
         const resultRatio = Object.assign(Object.assign({}, this.graphsHeightRatio), heightRatios);
         const ratioSum = Object.values(resultRatio).reduce((sum, ratio) => sum + ratio, 0);
@@ -174,12 +174,33 @@ export class CanvasBoundsContainer {
         this.recalculateBounds();
         this.panesOrderChangedSubject.next(this.panesOrder);
     }
+    hidePaneBounds(uuid) {
+        this.graphsHeightRatio[uuid] = 0;
+        this.recalculatePanesHeightRatios();
+        this.paneVisibilityChangedSubject.next();
+    }
+    showPaneBounds(uuid) {
+        if (uuid === CHART_UUID) {
+            const [defaultChartHeightRatio] = getHeightRatios(this.panesOrder.length - 1);
+            this.graphsHeightRatio[uuid] = defaultChartHeightRatio;
+        }
+        else {
+            // when pane is hidden it has ratio of 0
+            // when we want pane to be visible again we want `recalculatePanesHeightRatios` function
+            // to treat it as a new pane
+            // to do so we need to delete its ratio (which is 0 because it is hidden) from graphsHeightRatio
+            // NOTE: CHART_UUID pane is exception, it is treated differently and should always have some ratio
+            delete this.graphsHeightRatio[uuid];
+        }
+        this.recalculatePanesHeightRatios();
+        this.paneVisibilityChangedSubject.next();
+    }
     /**
      * Removes the bounds of a pane with the given uuid from the canvas element.
      * @param {string} uuid - The uuid of the pane to remove.
      * @returns {void}
      */
-    removedPaneBounds(uuid) {
+    removePaneBounds(uuid) {
         arrayRemove2(this.panesOrder, uuid);
         delete this.graphsHeightRatio[uuid];
         delete this.bounds[CanvasElement.PANE_UUID(uuid)];
@@ -223,13 +244,14 @@ export class CanvasBoundsContainer {
         const chartWidth = canvas.width - totalYAxisWidthLeft - totalYAxisWidthRight;
         let nextY = initialY;
         // panes
+        const firstVisiblePaneIdx = this.panesOrder.findIndex(uuid => this.graphsHeightRatio[uuid] > 0);
         this.panesOrder.forEach((uuid, index) => {
             var _a;
             const paneHeightRatio = this.graphsHeightRatio[this.panesOrder[index]];
-            // hide resizer for first pane with index === 0
-            const resizerVisible = this.config.components.paneResizer.visible && index !== 0;
+            // hide resizer for the first visible pane
             const resizerUUID = CanvasElement.PANE_UUID_RESIZER(uuid);
             const paneUUID = CanvasElement.PANE_UUID(uuid);
+            const resizerVisible = this.config.components.paneResizer.visible && index > firstVisiblePaneIdx && paneHeightRatio > 0;
             if (resizerVisible) {
                 upsertBounds(this.bounds, resizerUUID, 0, nextY, canvas.width, paneResizerHeight, this.canvasOnPageLocation);
             }
@@ -237,7 +259,7 @@ export class CanvasBoundsContainer {
                 upsertBounds(this.bounds, resizerUUID, 0, 0, 0, 0, this.canvasOnPageLocation);
             }
             const paneYStart = nextY + (resizerVisible ? paneResizerHeight : 0);
-            const paneBounds = upsertBounds(this.bounds, paneUUID, paneXStart, paneYStart, chartWidth, chartHeight * paneHeightRatio - (resizerVisible ? this.config.components.paneResizer.height : 0), this.canvasOnPageLocation);
+            const paneBounds = upsertBounds(this.bounds, paneUUID, paneXStart, paneYStart, chartWidth, chartHeight * paneHeightRatio - (resizerVisible ? paneResizerHeight : 0), this.canvasOnPageLocation);
             // y axis
             if (this.config.components.yAxis.visible) {
                 const extents = this.yAxisBoundsContainer.extentsOrder.get(uuid);
@@ -425,34 +447,46 @@ export class CanvasBoundsContainer {
         // NOTE: pec stands for panesExceptMainChart
         const pec = [];
         pec.push(...this.panesOrder.filter(p => p !== CHART_UUID));
-        this.panesOrder.forEach(pane => {
-            if (this.graphsHeightRatio[pane] === 0) {
-                delete this.graphsHeightRatio[pane];
-            }
-        });
-        const pecRatios = pec.map(graph => this.graphsHeightRatio[graph] === undefined ? undefined : this.graphsHeightRatio[graph]);
-        const oldPecNumber = pecRatios.filter(ratio => ratio !== undefined).length;
+        const pecRatios = pec.map(uuid => this.graphsHeightRatio[uuid] === undefined ? undefined : this.graphsHeightRatio[uuid]);
+        // we should count only visible panes, to escape wheight distribution for hidden panes
+        const visiblePecRatios = pecRatios.filter(ratio => ratio !== 0);
+        const visiblePecNumber = visiblePecRatios.length;
+        // we don't count as an old PEC panes that are not visible, because they don't whey in the final result
+        const oldPecNumber = visiblePecRatios.filter(ratio => ratio !== undefined).length;
+        // if ratio in undefined for a given pane it means that it's a new pane
         const newPecNumber = pecRatios.filter(ratio => ratio === undefined).length;
         let freeRatioForPec = 0;
         let freeRatio = 0;
         let ratioForOldPec = 1;
         let ratioForNewPec = 0;
         if (newPecNumber > 0) {
-            [ratioForOldPec, ratioForNewPec] = getHeightRatios(pec.length);
+            [ratioForOldPec, ratioForNewPec] = getHeightRatios(visiblePecNumber);
             chartRatio *= ratioForOldPec;
         }
+        // this means we should keep in mind only new panes
         if (oldPecNumber === 0) {
             chartRatio = 1 - ratioForNewPec * newPecNumber;
         }
         freeRatio = 1 - chartRatio - ratioForNewPec * newPecNumber;
-        pecRatios.forEach(ratio => {
+        visiblePecRatios.forEach(ratio => {
             if (ratio) {
                 freeRatio -= ratio * ratioForOldPec;
             }
         });
-        freeRatioForPec = freeRatio / (pec.length + 1);
-        const proportions = pecRatios.map(ratio => ratio ? ratio * ratioForOldPec + freeRatioForPec : ratioForNewPec + freeRatioForPec);
-        chartRatio += freeRatioForPec;
+        // || 1 to escape division by zero
+        // because there's might be no visible panes except CHART
+        freeRatioForPec = freeRatio / (visiblePecNumber || 1);
+        // distribute left free ratio between new and old panes
+        const proportions = pecRatios.map(ratio => {
+            // if ratio === 0 it means, that it's hidden
+            if (ratio === 0) {
+                return ratio;
+            }
+            if (!ratio) {
+                return ratioForNewPec + freeRatioForPec;
+            }
+            return ratio * ratioForOldPec + freeRatioForPec;
+        });
         this._graphsHeightRatio = {};
         this.graphsHeightRatio[CHART_UUID] = chartRatio;
         proportions.forEach((ratio, index) => {
@@ -478,88 +512,89 @@ export class CanvasBoundsContainer {
      */
     recalculateNavigationMapElementBounds() {
         var _a, _b, _c, _d;
-        if (this.config.components.navigationMap.visible) {
-            const nMap = this.getBounds(CanvasElement.N_MAP);
-            const { height, width } = this.config.components.navigationMap.knots;
-            const knotHeightFromConfig = height !== null && height !== void 0 ? height : 0;
-            const knotWidthFromConfig = isMobile() ? width * KNOTS_W_MOBILE_MULTIPLIER : width !== null && width !== void 0 ? width : 0;
-            const knotY = !knotHeightFromConfig ? nMap.y : nMap.y + (nMap.height - knotHeightFromConfig) / 2;
-            // time labels
-            const timeLabelsVisible = (_b = (_a = this.config.components.navigationMap) === null || _a === void 0 ? void 0 : _a.timeLabels) === null || _b === void 0 ? void 0 : _b.visible;
-            const calcLabelBounds = (timestamp) => {
-                return calcTimeLabelBounds(this.canvasModel.ctx, timestamp, this.formatterFactory, this.config)[0];
-            };
-            const candleSource = flat((_d = (_c = this.mainCandleSeries) === null || _c === void 0 ? void 0 : _c.getSeriesInViewport()) !== null && _d !== void 0 ? _d : []);
-            const leftTimeLabelWidth = timeLabelsVisible && candleSource.length ? calcLabelBounds(candleSource[0].candle.timestamp) : 0;
-            const rightTimeLabelWidth = timeLabelsVisible && candleSource.length
-                ? calcLabelBounds(candleSource[candleSource.length - 1].candle.timestamp)
-                : 0;
-            const timeLabelWidth = Math.max(leftTimeLabelWidth, rightTimeLabelWidth);
-            if (timeLabelsVisible) {
-                const nMapLabelL = this.getBounds(CanvasElement.N_MAP_LABEL_L);
-                nMapLabelL.x = nMap.x;
-                nMapLabelL.y = nMap.y;
-                nMapLabelL.width = timeLabelWidth;
-                nMapLabelL.height = nMap.height;
-                const nMapLabelR = this.getBounds(CanvasElement.N_MAP_LABEL_R);
-                nMapLabelR.x = nMap.x + nMap.width - timeLabelWidth;
-                nMapLabelR.y = nMap.y;
-                nMapLabelR.width = timeLabelWidth;
-                nMapLabelR.height = nMap.height;
-            }
-            // buttons left and right
-            const nMapBtnL = this.getBounds(CanvasElement.N_MAP_BTN_L);
-            nMapBtnL.x = nMap.x + timeLabelWidth;
-            nMapBtnL.y = nMap.y;
-            nMapBtnL.width = N_MAP_BUTTON_W;
-            nMapBtnL.height = nMap.height;
-            const nMapBtnR = this.getBounds(CanvasElement.N_MAP_BTN_R);
-            nMapBtnR.x = nMap.x + nMap.width - N_MAP_BUTTON_W - timeLabelWidth;
-            nMapBtnR.y = nMap.y;
-            nMapBtnR.width = N_MAP_BUTTON_W;
-            nMapBtnR.height = nMap.height;
-            // knots
-            const navMapChartStart = nMapBtnL.x + nMapBtnL.width;
-            const navMapChartWidth = nMapBtnR.x - navMapChartStart;
-            const navMapChartEnd = navMapChartStart + navMapChartWidth;
-            const minSliderW = this.config.components.navigationMap.minSliderWindowWidth;
-            const knotW = knotWidthFromConfig !== null && knotWidthFromConfig !== void 0 ? knotWidthFromConfig : N_MAP_KNOT_W;
-            const knotH = knotHeightFromConfig !== null && knotHeightFromConfig !== void 0 ? knotHeightFromConfig : nMap.height;
-            const minDistanceBetweenKnotsX = knotW + minSliderW;
-            // Left drag button
-            const knotL = this.getBounds(CanvasElement.N_MAP_KNOT_L);
-            knotL.x = navMapChartStart + navMapChartWidth * this.leftRatio;
-            // limit left knot to min distance from right border
-            knotL.x = Math.min(knotL.x, navMapChartEnd - minDistanceBetweenKnotsX);
-            knotL.y = knotY;
-            knotL.width = knotW;
-            knotL.height = knotH;
-            // Right drag button
-            const knotR = this.getBounds(CanvasElement.N_MAP_KNOT_R);
-            knotR.x = navMapChartStart + navMapChartWidth * this.rightRatio - N_MAP_KNOT_W;
-            // limit right knot to min distance from left border
-            knotR.x = Math.max(knotR.x, navMapChartStart + minDistanceBetweenKnotsX);
-            knotR.y = knotY;
-            knotR.width = knotW;
-            knotR.height = knotH;
-            const distanceDiff = minDistanceBetweenKnotsX - (knotR.x - knotL.x);
-            // if distance between knots is less than min distance - move left knot start
-            if (distanceDiff > 0) {
-                knotL.x -= distanceDiff;
-            }
-            // slider
-            const slider = this.getBounds(CanvasElement.N_MAP_SLIDER_WINDOW);
-            slider.x = knotL.x + knotL.width;
-            slider.y = nMap.y;
-            slider.width = knotR.x - slider.x;
-            slider.height = nMap.height;
-            // chart
-            const nMapChart = this.getBounds(CanvasElement.N_MAP_CHART);
-            nMapChart.x = navMapChartStart;
-            nMapChart.y = nMap.y;
-            nMapChart.width = navMapChartWidth;
-            nMapChart.height = nMap.height;
+        if (!this.config.components.navigationMap.visible) {
+            return;
+        }
+        const nMap = this.getBounds(CanvasElement.N_MAP);
+        const { height, width } = this.config.components.navigationMap.knots;
+        const knotHeightFromConfig = height !== null && height !== void 0 ? height : 0;
+        const knotWidthFromConfig = isMobile() ? width * KNOTS_W_MOBILE_MULTIPLIER : width !== null && width !== void 0 ? width : 0;
+        const knotY = !knotHeightFromConfig ? nMap.y : nMap.y + (nMap.height - knotHeightFromConfig) / 2;
+        // time labels
+        const timeLabelsVisible = (_b = (_a = this.config.components.navigationMap) === null || _a === void 0 ? void 0 : _a.timeLabels) === null || _b === void 0 ? void 0 : _b.visible;
+        const calcLabelBounds = (timestamp) => {
+            return calcTimeLabelBounds(this.canvasModel.ctx, timestamp, this.formatterFactory, this.config)[0];
+        };
+        const candleSource = flat((_d = (_c = this.mainCandleSeries) === null || _c === void 0 ? void 0 : _c.getSeriesInViewport()) !== null && _d !== void 0 ? _d : []);
+        const leftTimeLabelWidth = timeLabelsVisible && candleSource.length ? calcLabelBounds(candleSource[0].candle.timestamp) : 0;
+        const rightTimeLabelWidth = timeLabelsVisible && candleSource.length
+            ? calcLabelBounds(candleSource[candleSource.length - 1].candle.timestamp)
+            : 0;
+        const timeLabelWidth = Math.max(leftTimeLabelWidth, rightTimeLabelWidth);
+        if (timeLabelsVisible) {
+            const nMapLabelL = this.getBounds(CanvasElement.N_MAP_LABEL_L);
+            nMapLabelL.x = nMap.x;
+            nMapLabelL.y = nMap.y;
+            nMapLabelL.width = timeLabelWidth;
+            nMapLabelL.height = nMap.height;
+            const nMapLabelR = this.getBounds(CanvasElement.N_MAP_LABEL_R);
+            nMapLabelR.x = nMap.x + nMap.width - timeLabelWidth;
+            nMapLabelR.y = nMap.y;
+            nMapLabelR.width = timeLabelWidth;
+            nMapLabelR.height = nMap.height;
+        }
+        // buttons left and right
+        const nMapBtnL = this.getBounds(CanvasElement.N_MAP_BTN_L);
+        nMapBtnL.x = nMap.x + timeLabelWidth;
+        nMapBtnL.y = nMap.y;
+        nMapBtnL.width = N_MAP_BUTTON_W;
+        nMapBtnL.height = nMap.height;
+        const nMapBtnR = this.getBounds(CanvasElement.N_MAP_BTN_R);
+        nMapBtnR.x = nMap.x + nMap.width - N_MAP_BUTTON_W - timeLabelWidth;
+        nMapBtnR.y = nMap.y;
+        nMapBtnR.width = N_MAP_BUTTON_W;
+        nMapBtnR.height = nMap.height;
+        // knots
+        const navMapChartStart = nMapBtnL.x + nMapBtnL.width;
+        const navMapChartWidth = nMapBtnR.x - navMapChartStart;
+        const navMapChartEnd = navMapChartStart + navMapChartWidth;
+        const minSliderW = this.config.components.navigationMap.minSliderWindowWidth;
+        const knotW = knotWidthFromConfig !== null && knotWidthFromConfig !== void 0 ? knotWidthFromConfig : N_MAP_KNOT_W;
+        const knotH = knotHeightFromConfig !== null && knotHeightFromConfig !== void 0 ? knotHeightFromConfig : nMap.height;
+        const minDistanceBetweenKnotsX = knotW + minSliderW;
+        // Left drag button
+        const knotL = this.getBounds(CanvasElement.N_MAP_KNOT_L);
+        knotL.x = navMapChartStart + navMapChartWidth * this.leftRatio;
+        // limit left knot to min distance from right border
+        knotL.x = Math.min(knotL.x, navMapChartEnd - minDistanceBetweenKnotsX);
+        knotL.y = knotY;
+        knotL.width = knotW;
+        knotL.height = knotH;
+        // Right drag button
+        const knotR = this.getBounds(CanvasElement.N_MAP_KNOT_R);
+        knotR.x = navMapChartStart + navMapChartWidth * this.rightRatio - N_MAP_KNOT_W;
+        // limit right knot to min distance from left border
+        knotR.x = Math.max(knotR.x, navMapChartStart + minDistanceBetweenKnotsX);
+        knotR.y = knotY;
+        knotR.width = knotW;
+        knotR.height = knotH;
+        const distanceDiff = minDistanceBetweenKnotsX - (knotR.x - knotL.x);
+        // if distance between knots is less than min distance - move left knot start
+        if (distanceDiff > 0) {
+            knotL.x -= distanceDiff;
         }
+        // slider
+        const slider = this.getBounds(CanvasElement.N_MAP_SLIDER_WINDOW);
+        slider.x = knotL.x + knotL.width;
+        slider.y = nMap.y;
+        slider.width = knotR.x - slider.x;
+        slider.height = nMap.height;
+        // chart
+        const nMapChart = this.getBounds(CanvasElement.N_MAP_CHART);
+        nMapChart.x = navMapChartStart;
+        nMapChart.y = nMap.y;
+        nMapChart.width = navMapChartWidth;
+        nMapChart.height = nMap.height;
     }
     /**
      * Checks if the volumes are set to be visible and if they should be shown in a separate pane
@@ -683,11 +718,20 @@ export class CanvasBoundsContainer {
      * @returns {void}
      */
     doResizePaneVertically(idx, yDeltaPixels) {
-        const prevPaneIdx = idx - 1;
+        // get prev visible pane index
+        let prevVisiblePaneIdx = idx - 1;
+        const prevPaneUUID = this.panesOrder[prevVisiblePaneIdx];
+        if (this._graphsHeightRatio[prevPaneUUID] <= 0) {
+            for (let i = 0; i < idx; i++) {
+                if (this._graphsHeightRatio[this.panesOrder[i]] > 0) {
+                    prevVisiblePaneIdx = i;
+                }
+            }
+        }
         const allPanesHeight = this.getBounds(CanvasElement.ALL_PANES).height;
-        const minAllowedPaneHeight = this.config.components.paneResizer.height + DEFAULT_MIN_PANE_HEIGHT;
+        const minAllowedPaneHeight = DEFAULT_MIN_PANE_HEIGHT;
         const resultPaneHeight = allPanesHeight * this.graphsHeightRatio[this.panesOrder[idx]];
-        const dependResultPaneHeight = allPanesHeight * this.graphsHeightRatio[this.panesOrder[prevPaneIdx]];
+        const dependResultPaneHeight = allPanesHeight * this.graphsHeightRatio[this.panesOrder[prevVisiblePaneIdx]];
         // check if changes fit allowed minimal pane height
         const fitPane = resultPaneHeight + yDeltaPixels > minAllowedPaneHeight;
         const fitDependPane = dependResultPaneHeight - yDeltaPixels > minAllowedPaneHeight;
@@ -695,7 +739,7 @@ export class CanvasBoundsContainer {
             // convert pixels to percent
             const yDeltaPercent = yDeltaPixels / allPanesHeight;
             this.graphsHeightRatio[this.panesOrder[idx]] += yDeltaPercent;
-            this.graphsHeightRatio[this.panesOrder[prevPaneIdx]] -= yDeltaPercent;
+            this.graphsHeightRatio[this.panesOrder[prevVisiblePaneIdx]] -= yDeltaPercent;
             this.recalculateBounds();
         }
     }
@@ -791,7 +835,7 @@ const DEFAULT_RATIOS = {
     5: 0.2,
 };
 // NOTE: pec stands for panes except main chart
-const getHeightRatios = (pecLength) => {
+export const getHeightRatios = (pecLength) => {
     var _a;
     const chartHeightRatio = (_a = DEFAULT_RATIOS[pecLength]) !== null && _a !== void 0 ? _a : 0.4;
     const singlePecHeightRatio = (1 - chartHeightRatio) / pecLength;

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

@@ -50,6 +50,10 @@ export class YAxisBoundsContainer {
         this.yAxisWidthContributors.forEach(c => {
             var _a, _b, _c;
             const state = c.getYAxisState();
+            // if YAxis is not visible, do not add it to contributors width
+            if (!state.visible) {
+                return;
+            }
             const margin = state.labelBoxMargin.start + state.labelBoxMargin.end;
             const width = this.getTextWidth(c.getLargestLabel()) + margin;
             const idx = c.getYAxisIndex();

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

@@ -237,18 +237,12 @@ export interface ChartScale {
         /**
          * 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
+         * This value is also related to touchpad.
+         * Touchpad sensitivity is dynamic, and based on delta distance event:
+         * - if distance is small, zoom sencitivity is minimal, which allows you to zoom in/out on the chart and view each candle in details
+         * - if distance is big, zoom sencitivity is becomes close to the config value below, which allows you to zoom in/out on the chart and quickly change zoom with big sensitivity
          */
         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

@@ -43,8 +43,6 @@ export const getDefaultConfig = () => ({
         inverse: false,
         zoomSensitivity: {
             wheel: 0.25,
-            pinch: 0.05,
-            glide: 0.05,
         },
         defaultViewportItems: 100,
         disableAnimations: false,
@@ -211,20 +209,20 @@ export const getDefaultConfig = () => ({
                 {
                     format: 'dd.MM.YYYY',
                     showWhen: {
-                        periodMoreThen: 84600000,
+                        periodMoreThen: 24 * 60 * 60 * 1000,
                     },
                 },
                 {
                     format: 'dd.MM.YYYY HH:mm',
                     showWhen: {
-                        periodLessThen: 84600000,
-                        periodMoreThen: 6000,
+                        periodLessThen: 24 * 60 * 60 * 1000,
+                        periodMoreThen: 6 * 1000,
                     },
                 },
                 {
                     format: 'dd.MM.YYYY HH:mm:ss',
                     showWhen: {
-                        periodLessThen: 6000,
+                        periodLessThen: 6 * 1000,
                     },
                 },
             ],

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

@@ -17,10 +17,13 @@ export interface ChartWheelEvent {
     readonly originalEvent: WheelEvent;
     readonly candleIdx: number;
 }
+interface ChartPanningOptions {
+    horizontal: boolean;
+    vertical: boolean;
+}
 /**
  * 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.
@@ -30,7 +33,6 @@ export interface ChartWheelEvent {
  * @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.
@@ -41,18 +43,17 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
     private bus;
     private config;
     private scale;
-    private mainCanvasParent;
     private canvasInputListener;
     private canvasBoundsContainer;
     private canvasAnimation;
     private chartPanComponent;
     private hitTestCanvasModel;
-    private readonly touchHandler;
     private currentPoint;
     xDraggedCandlesDelta: number;
     lastXStart: number;
-    wheelTrottleTime: number;
-    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
+    wheelThrottleTime: number;
+    chartPanningOptions: ChartPanningOptions;
+    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
     /**
      * 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.
@@ -70,6 +71,7 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * @returns {void}
      */
     protected doActivate(): void;
+    private calculateDynamicSesitivity;
     /**
      * Registers a handler for panning the chart along the Y-axis.
      * @param {ScaleModel} scaleModel - The scale model of the extent.
@@ -89,3 +91,4 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
  * @doc-tags chart-core,auto-scale,y-axis
  */
 export declare const shouldDisableAutoScale: (point: Point, config: Required<AutoScaleDisableOnDrag>) => boolean;
+export {};