@devexperts/dxcharts-lite 2.4.6 → 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/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.js

@@ -209,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

@@ -24,7 +24,6 @@ interface ChartPanningOptions {
 /**
  * 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.
@@ -34,7 +33,6 @@ interface ChartPanningOptions {
  * @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.
@@ -45,19 +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;
     wheelThrottleTime: number;
     chartPanningOptions: ChartPanningOptions;
-    constructor(bus: EventBus, config: FullChartConfig, scale: ScaleModel, mainCanvasParent: Element, canvasInputListener: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, canvasAnimation: CanvasAnimation, chartPanComponent: ChartPanComponent, hitTestCanvasModel: HitTestCanvasModel);
+    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.

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

@@ -7,7 +7,6 @@ import { animationFrameScheduler } from 'rxjs';
 import { throttleTime, filter } 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';
@@ -17,7 +16,6 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
 /**
  * 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.
@@ -27,7 +25,6 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  * @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.
@@ -35,12 +32,11 @@ import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.compone
  
 */
 export class ChartAreaPanHandler extends ChartBaseElement {
-    constructor(bus, config, scale, mainCanvasParent, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
+    constructor(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
         super();
         this.bus = bus;
         this.config = config;
         this.scale = scale;
-        this.mainCanvasParent = mainCanvasParent;
         this.canvasInputListener = canvasInputListener;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.canvasAnimation = canvasAnimation;
@@ -97,7 +93,6 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
-        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, {
@@ -153,8 +148,6 @@ export class ChartAreaPanHandler extends ChartBaseElement {
             .subscribe(({ prependedCandlesWidth }) => {
             this.lastXStart += prependedCandlesWidth;
         }));
-        this.touchHandler.activate();
-        this.addSubscription(this.touchHandler.deactivate.bind(this.touchHandler));
     }
     calculateDynamicSesitivity(e, maxSensitivity) {
         // max delta distance that touchpad can provide

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

@@ -18,10 +18,4 @@ export declare class DragNDropXComponent extends DragNDropComponent {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is used to deactivate the current object and perform any necessary cleanup operations.
-     * @protected
-     */
-    protected doDeactivate(): void;
 }

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

@@ -22,12 +22,4 @@ export class DragNDropXComponent extends DragNDropComponent {
         this.addRxSubscription(this.canvasInputListener.observeXDrag().subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeXDragEnd().subscribe(this.onDragEnd));
     }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls it using the super keyword.
-     * It is used to deactivate the current object and perform any necessary cleanup operations.
-     * @protected
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }

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

@@ -15,9 +15,4 @@ export declare class DragNDropYComponent extends DragNDropComponent {
      * @returns {void}
      */
     protected doActivate(): void;
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    protected doDeactivate(): void;
 }

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

@@ -19,11 +19,4 @@ export class DragNDropYComponent extends DragNDropComponent {
         this.addRxSubscription(this.canvasInputListener.observeYDrag().subscribe(this.onDragTick));
         this.addRxSubscription(this.canvasInputListener.observeYDragEnd().subscribe(this.onDragEnd));
     }
-    /**
-     * This method overrides the doDeactivate method of the parent class and calls the parent method before executing its own code.
-     * It is a protected method, which means it can only be accessed within the class and its subclasses.
-     */
-    doDeactivate() {
-        super.doDeactivate();
-    }
 }