@devexperts/dxcharts-lite 2.3.0 → 2.4.1

package/dist/chart/bootstrap.js

@@ -106,8 +106,9 @@ export default class ChartBootstrap {
         // canvas animation container
         const canvasAnimation = new CanvasAnimation(eventBus);
         this.canvasAnimation = canvasAnimation;
+        const chartPaneId = CanvasElement.PANE_UUID(CHART_UUID);
         //#region ScaleModel init
-        const scaleModel = new ScaleModel(config, () => canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), canvasAnimation);
+        const scaleModel = new ScaleModel(config, () => canvasBoundsContainer.getBounds(chartPaneId), canvasAnimation);
         this.scaleModel = scaleModel;
         //#endregion
         const backgroundCanvasModel = createCanvasModel(eventBus, elements.backgroundCanvas, config, drawingManager, this.canvasModels, elements.chartResizer, {
@@ -135,7 +136,7 @@ export default class ChartBootstrap {
         this.chartComponents.push(this.dynamicObjects);
         this.chartModel = new ChartModel(chartBaseModel, paneManager, eventBus, this.dynamicObjectsCanvasModel, config, scaleModel, formatterFactory, mainCanvasParent, canvasBoundsContainer, chartResizeHandler);
         //#region main chart component init
-        const chartComponent = new ChartComponent(this.chartModel, this.dynamicObjectsCanvasModel, config, scaleModel, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, this.cursorHandler, this.dynamicObjects);
+        const chartComponent = new ChartComponent(this.chartModel, this.dynamicObjectsCanvasModel, config, scaleModel, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, this.cursorHandler, this.dynamicObjects, this.chartResizeHandler);
         this.chartComponents.push(chartComponent);
         this.chartComponent = chartComponent;
         const chartModel = this.chartComponent.chartModel;
@@ -175,7 +176,7 @@ export default class ChartBootstrap {
         this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
         this.chartComponents.push(this.volumesComponent);
         // grid component
-        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
+        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
         this.chartComponents.push(mainChartGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);

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

@@ -565,10 +565,12 @@ export class CanvasBoundsContainer {
      * @return {Bounds} bounds of element
      */
     getBounds(el) {
-        if (this.bounds[el] === undefined) {
-            this.bounds[el] = this.copyOf(DEFAULT_BOUNDS);
+        let bounds = this.bounds[el];
+        if (bounds === undefined) {
+            bounds = this.copyOf(DEFAULT_BOUNDS);
+            this.bounds[el] = bounds;
         }
-        return this.bounds[el];
+        return bounds;
     }
     /**
      * Returns the position of CANVAS on whole page.

package/dist/chart/canvas/cursor.handler.js

@@ -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 { Subject } from 'rxjs';
+import { Subject, animationFrameScheduler } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import { ChartBaseElement } from '../model/chart-base-element';
 import { CanvasBoundsContainer } from './canvas-bounds-container';
@@ -29,7 +29,7 @@ export class CursorHandler extends ChartBaseElement {
         super.doActivate();
         this.canvasInputListener
             .observeMouseMoveNoDrag()
-            .pipe(throttleTime(100, undefined, { trailing: true }))
+            .pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
             .subscribe(point => {
             const cursorFromHT = this.hitTestCanvasModel.resolveCursor(point);
             if (cursorFromHT !== undefined) {

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

@@ -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 { merge } from 'rxjs';
+import { merge, animationFrameScheduler } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
@@ -112,7 +112,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
         //#endregion
         this.addRxSubscription(merge(this.canvasInputListener.observeWheel(allPanesHitTest), this.canvasInputListener.observePinch(allPanesHitTest))
-            .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe(e => {
             const isTouchpad = touchpadDetector(e);
             const zoomSensitivity = isTouchpad
@@ -122,7 +122,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         }));
         this.addRxSubscription(this.canvasInputListener
             .observeScrollGesture()
-            .pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+            .pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe((e) => {
             let direction = -1;
             const device = deviceDetector();

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

@@ -24,6 +24,7 @@ import { PaneManager } from '../pane/pane-manager.component';
 import { CandleWidthCalculator, ChartModel, LastCandleLabelHandler, VisualCandleCalculator } from './chart.model';
 import { PrependedCandlesData } from './chart-base.model';
 import { DynamicObjectsComponent } from '../dynamic-objects/dynamic-objects.component';
+import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -59,11 +60,13 @@ export declare class ChartComponent extends ChartBaseElement {
     private canvasInputListener;
     private paneManager;
     private dynamicObjects;
+    private chartResizeHandler;
     readonly baselineModel: BaselineModel;
     private readonly backgroundDrawer;
     private readonly _dataSeriesDrawers;
     private readonly dataSeriesDrawer;
-    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent);
+    private backgroundDrawPredicateSubj;
+    constructor(chartModel: ChartModel, canvasModel: CanvasModel, config: FullChartConfig, scale: ScaleModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, hitTestCanvasModel: HitTestCanvasModel, canvasInputListener: CanvasInputListenerComponent, backgroundCanvasModel: CanvasModel, chartPanComponent: ChartPanComponent, paneManager: PaneManager, cursorHandler: CursorHandler, dynamicObjects: DynamicObjectsComponent, chartResizeHandler: ChartResizeHandler);
     /**
      * This method overrides the doActivate method of the parent class and calls it.
      * It does not take any parameters and does not return anything.
@@ -118,13 +121,13 @@ export declare class ChartComponent extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start: Timestamp, end: Timestamp): void;
+    setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
      */
-    setXScale(xStart: Unit, xEnd: Unit): void;
+    setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     /**
      * Sets the visibility of the wicks in the chart.
      * @param {boolean} isShow - A boolean value indicating whether to show or hide the wicks.

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

@@ -3,6 +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 { BehaviorSubject } from 'rxjs';
 import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { BackgroundDrawer } from '../../drawers/chart-background.drawer';
@@ -48,7 +49,7 @@ export class ChartInstrument {
     }
 }
 export class ChartComponent extends ChartBaseElement {
-    constructor(chartModel, canvasModel, config, scale, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, cursorHandler, dynamicObjects) {
+    constructor(chartModel, canvasModel, config, scale, canvasBoundsContainer, drawingManager, hitTestCanvasModel, canvasInputListener, backgroundCanvasModel, chartPanComponent, paneManager, cursorHandler, dynamicObjects, chartResizeHandler) {
         super();
         this.chartModel = chartModel;
         this.canvasModel = canvasModel;
@@ -60,7 +61,9 @@ export class ChartComponent extends ChartBaseElement {
         this.canvasInputListener = canvasInputListener;
         this.paneManager = paneManager;
         this.dynamicObjects = dynamicObjects;
+        this.chartResizeHandler = chartResizeHandler;
         this._dataSeriesDrawers = {};
+        this.backgroundDrawPredicateSubj = new BehaviorSubject(true);
         this.strToBarType = (str) => { var _a; return (_a = this.barTypeValues.find(t => t === str)) !== null && _a !== void 0 ? _a : 'candle'; };
         this.addChildEntity(this.chartModel);
         this.registerDefaultCandlesTransformers();
@@ -73,7 +76,7 @@ export class ChartComponent extends ChartBaseElement {
         //#region data series drawers
         this.registerDefaultDataSeriesDrawers();
         //#endregion
-        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config);
+        this.backgroundDrawer = new BackgroundDrawer(backgroundCanvasModel, this.config, () => this.backgroundDrawPredicateSubj.getValue());
         drawingManager.addDrawer(this.backgroundDrawer, 'MAIN_BACKGROUND');
         cursorHandler.setCursorForCanvasEl(CanvasElement.PANE_UUID(CHART_UUID), config.components.chart.cursor);
         this.dataSeriesDrawer = new DataSeriesDrawer(paneManager, this.dataSeriesDrawers);
@@ -104,6 +107,13 @@ export class ChartComponent extends ChartBaseElement {
         this.addRxSubscription(this.paneManager.dataSeriesRemovedSubject.subscribe(series => {
             this.dynamicObjects.model.removeObject(series.id);
         }));
+        // redraw background only when chart is resized
+        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(() => {
+            this.backgroundDrawPredicateSubj.next(false);
+        }));
+        this.addRxSubscription(this.chartResizeHandler.canvasResized.subscribe(() => {
+            this.backgroundDrawPredicateSubj.next(true);
+        }));
     }
     /**
      * Registers default candle transformers.
@@ -162,7 +172,8 @@ export class ChartComponent extends ChartBaseElement {
         this.registerDataSeriesTypeDrawer('area', new AreaDrawer(this.config.components.chart));
         this.registerDataSeriesTypeDrawer('baseline', new BaselineDrawer(this.baselineModel, this.canvasBoundsContainer));
         this.registerDataSeriesTypeDrawer('histogram', new MainChartHistogramDrawer(this.config.components.chart.histogram));
-        const mainChartBoundsProvider = () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+        const chartPaneId = CanvasElement.PANE_UUID(CHART_UUID);
+        const mainChartBoundsProvider = () => this.canvasBoundsContainer.getBounds(chartPaneId);
         this.registerDataSeriesTypeDrawer('LINEAR', new LinearDrawer());
         this.registerDataSeriesTypeDrawer('HISTOGRAM', new HistogramDrawer());
         this.registerDataSeriesTypeDrawer('TREND_HISTOGRAM', new TrendHistogramDrawer());
@@ -196,16 +207,16 @@ export class ChartComponent extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start, end) {
-        return this.chartModel.setTimestampRange(start, end);
+    setTimestampRange(start, end, forceNoAnimation = true) {
+        return this.chartModel.setTimestampRange(start, end, forceNoAnimation);
     }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
      */
-    setXScale(xStart, xEnd) {
-        return this.scale.setXScale(xStart, xEnd);
+    setXScale(xStart, xEnd, forceNoAnimation = true) {
+        return this.scale.setXScale(xStart, xEnd, forceNoAnimation);
     }
     /**
      * Sets the visibility of the wicks in the chart.

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

@@ -49,7 +49,6 @@ export declare class ChartModel extends ChartBaseElement {
     readonly nextCandleTimeStampSubject: Subject<void>;
     readonly chartTypeChanged: Subject<BarType>;
     readonly mainInstrumentChangedSubject: Subject<ChartInstrument>;
-    readonly scaleInversedSubject: Subject<void>;
     readonly offsetsChanged: Subject<void>;
     private candlesTransformersByChartType;
     lastCandleLabelsByChartType: Partial<Record<BarType, LastCandleLabelHandler>>;
@@ -319,7 +318,7 @@ export declare class ChartModel extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start: Timestamp, end: Timestamp): void;
+    setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
     /**
      * Returns the last candle of the main candle series.
      * @returns {Candle | undefined} The last candle of the main candle series or undefined if the series is empty.

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

@@ -50,7 +50,6 @@ export class ChartModel extends ChartBaseElement {
         this.nextCandleTimeStampSubject = new Subject();
         this.chartTypeChanged = new Subject();
         this.mainInstrumentChangedSubject = new Subject();
-        this.scaleInversedSubject = new Subject();
         this.offsetsChanged = new Subject();
         this.candlesTransformersByChartType = {};
         this.lastCandleLabelsByChartType = {};
@@ -656,11 +655,11 @@ export class ChartModel extends ChartBaseElement {
      * @param {Timestamp} end - The end timestamp of the range.
      * @returns {void}
      */
-    setTimestampRange(start, end) {
+    setTimestampRange(start, end, forceNoAnimation = true) {
         const startUnit = this.candleFromTimestamp(start).startUnit;
         const endCandle = this.candleFromTimestamp(end);
         const endUnit = endCandle.startUnit + endCandle.width;
-        return this.scale.setXScale(startUnit, endUnit);
+        return this.scale.setXScale(startUnit, endUnit, forceNoAnimation);
     }
     /**
      * Returns the last candle of the main candle series.

package/dist/chart/components/cross_tool/types/cross-and-labels.drawer.js

@@ -122,6 +122,7 @@ export class CrossAndLabelsDrawerType {
         if (this.config.components.yAxis.visible) {
             const pane = this.paneManager.panes[point.paneId];
             const y = point.y;
+            const type = this.config.components.crossTool.yLabel.type;
             if (!pane) {
                 return;
             }
@@ -129,9 +130,10 @@ export class CrossAndLabelsDrawerType {
                 const price = extent.regularValueFromY(y);
                 const label = extent.valueFormatter(price);
                 const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(pane.uuid, extent.idx));
-                const drawYLabel = priceLabelDrawersMap[this.config.components.crossTool.yLabel.type];
+                const drawYLabel = priceLabelDrawersMap[type];
+                const textColor = type === 'plain' ? crossToolColors.lineColor : crossToolColors.labelTextColor;
                 drawYLabel(ctx, bounds, label, y, {
-                    textColor: crossToolColors.labelTextColor,
+                    textColor,
                     bgColor: crossToolColors.labelBoxColor,
                     paddingBottom: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.bottom,
                     paddingEnd: yLabelPadding === null || yLabelPadding === void 0 ? void 0 : yLabelPadding.end,

package/dist/chart/components/high_low/high-low.drawer.js

@@ -5,6 +5,7 @@
  */
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { getTextLineHeight } from '../../utils/canvas/canvas-text-functions.utils';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 export class HighLowDrawer {
     constructor(canvasModel, chartModel, config, canvasBoundsContainer) {
         this.canvasModel = canvasModel;
@@ -34,7 +35,10 @@ export class HighLowDrawer {
             ctx.font = this.config.components.highLow.font;
             this.drawMarkerLabel(ctx, finalHighIdx, high, 'high');
             this.drawMarkerLabel(ctx, finalLowIdx, low, 'low');
+            const chartBounds = this.canvasBoundsContainer.getBounds('PANE_CHART');
             ctx.restore();
+            // We need clip here so lowLabel won't overlap other panes
+            clipToBounds(ctx, chartBounds);
         }
     }
     /**
@@ -47,7 +51,10 @@ export class HighLowDrawer {
      */
     drawMarkerLabel(ctx, candleIdx, yValue, type) {
         const y = this.getMarkerY(ctx, yValue, type === 'low');
-        if (!this.checkMarkerInBounds(y)) {
+        const fontSize = getTextLineHeight(ctx, false);
+        // we need to measure fit into the bounds for low label by its top point
+        const yForBoundsTrack = type === 'low' ? y - fontSize : y;
+        if (!this.checkMarkerInBounds(yForBoundsTrack)) {
             return;
         }
         const text = this.getMarkerText(yValue, type);
@@ -79,7 +86,7 @@ export class HighLowDrawer {
     getMarkerY(ctx, yValue, offset = false) {
         const y = this.chartModel.toY(yValue);
         if (offset) {
-            const fontSize = getTextLineHeight(ctx);
+            const fontSize = getTextLineHeight(ctx, false);
             return y + fontSize;
         }
         return y;

package/dist/chart/components/highlights/highlights.drawer.js

@@ -7,7 +7,7 @@ import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.
 import { HIGHLIGHTS_TYPES } from './highlights.model';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { unitToPixels } from '../../model/scaling/viewport.model';
-import { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 const LABEL_PADDINGS = [20, 10];
 export class HighlightsDrawer {
     constructor(highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config) {

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

@@ -85,7 +85,8 @@ export class PaneComponent extends ChartBaseElement {
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
     createGridComponent(uuid, scale, yAxisLabelsGenerator, yAxisState) {
-        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(uuid)), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
+        const chartPaneId = CanvasElement.PANE_UUID(uuid);
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
         return gridComponent;
     }
     /**
@@ -96,7 +97,8 @@ export class PaneComponent extends ChartBaseElement {
      * @returns {Unsubscriber}
      */
     createYPanHandler(uuid, scale) {
-        const dragNDropComponent = this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(scale, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.PANE_UUID(uuid)));
+        const chartPaneId = CanvasElement.PANE_UUID(uuid);
+        const dragNDropComponent = this.chartPanComponent.chartAreaPanHandler.registerChartYPanHandler(scale, this.canvasBoundsContainer.getBoundsHitTest(chartPaneId));
         return [
             () => {
                 this.chartPanComponent.chartAreaPanHandler.removeChildEntity(dragNDropComponent);
@@ -113,7 +115,8 @@ export class PaneComponent extends ChartBaseElement {
     createExtentComponent(options) {
         var _a, _b;
         const extentIdx = this.yExtentComponents.length;
-        const getBounds = () => this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(this.uuid));
+        const chartPaneId = CanvasElement.PANE_UUID(this.uuid);
+        const getBounds = () => this.canvasBoundsContainer.getBounds(chartPaneId);
         const scaleModel = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : new SyncedByXScaleModel(this.mainScale, this.config, getBounds, this.canvasAnimation);
         const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
         // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter

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

@@ -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 { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { flat } from '../../utils/array.utils';
 import { ceilToDPR, floorToDPR } from '../../utils/device/device-pixel-ratio.utils';

package/dist/chart/components/x_axis/time/parser/time-formats-matchers.functions.js

@@ -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 { eachDayOfInterval, isSameDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, startOfMonth, endOfMonth, } from 'date-fns/esm';
+import { eachDayOfInterval, isSameDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, startOfMonth, endOfMonth, } from 'date-fns';
 /**
  * Factory that return a {@link TimeFormatMatcher} function for a given {@link ParsedTimeFormats}
  * @see

package/dist/chart/components/x_axis/time/parser/time-formats.model.d.ts

@@ -27,7 +27,7 @@ export interface ParsedNCTimeFormat {
 }
 export type ParsedTimeFormat = ParsedCTimeFormat | ParsedWeekFormat | ParsedNCTimeFormat;
 export type SpecialSymbol = '!' | '$';
-export declare const timeFormatConfirugableGuard: (key: string) => key is "second" | "minute" | "hour" | "day" | "month" | "year";
+export declare const timeFormatConfirugableGuard: (key: string) => key is "year" | "month" | "day" | "hour" | "minute" | "second";
 export declare const weekWeekdayGuard: (key: string) => key is "week-weekday";
 export declare const timeFormatNoNConfirugableGuard: (key: string) => key is "lessThanSecond";
 export {};

package/dist/chart/components/x_axis/time/x-axis-weights.functions.js

@@ -51,7 +51,7 @@ export const getWeightFromTimeFormat = (format) => {
  */
 export const groupLabelsByWeight = (weightedLabels) => {
     const labelsGroupedByWeight = {};
-    weightedLabels.forEach(weightedLabel => {
+    for (const weightedLabel of weightedLabels) {
         const labelsByWeight = labelsGroupedByWeight[weightedLabel.weight];
         if (labelsByWeight === undefined) {
             labelsGroupedByWeight[weightedLabel.weight] = [weightedLabel];
@@ -59,7 +59,7 @@ export const groupLabelsByWeight = (weightedLabels) => {
         else {
             labelsByWeight.push(weightedLabel);
         }
-    });
+    }
     return labelsGroupedByWeight;
 };
 /**

package/dist/chart/components/x_axis/time/x-axis-weights.generator.js

@@ -18,12 +18,10 @@ import { getWeightFromTimeFormat } from './x-axis-weights.functions';
  * @see
  * returns `null` if date doesn't match any condition
  */
-const getWeightByDate = (currentDate, previousDate, sortedWeights, tzOffset) => {
+const getWeightByDate = (currentDate, previousDate, sortedWeights) => {
     var _a, _b;
-    const offsetCurrentDate = tzOffset(currentDate.getTime());
-    const offsetPrevDate = tzOffset(previousDate.getTime());
     for (const [weight, timeMatcher] of sortedWeights) {
-        if (timeMatcher(offsetCurrentDate, offsetPrevDate)) {
+        if (timeMatcher(currentDate, previousDate)) {
             return weight;
         }
     }
@@ -36,12 +34,13 @@ const getWeightByDate = (currentDate, previousDate, sortedWeights, tzOffset) =>
 export function mapCandlesToWeightedPoints(visualCandles, sortedWeights, tzOffset) {
     const result = new Array(visualCandles.length);
     // assume that candles` timestamp before the first visual candle is unreachable
-    let prevDate = new Date(0);
+    let prevDate = tzOffset(0);
     for (let i = 0; i < visualCandles.length; i++) {
         const currentCandle = visualCandles[i];
-        const currentDate = new Date(currentCandle.candle.timestamp);
+        // calculate timstamp to Date in acordance with provided timezone and time
+        const currentDate = tzOffset(currentCandle.candle.timestamp);
         const currentWeightedPoint = {
-            weight: getWeightByDate(currentDate, prevDate, sortedWeights, tzOffset),
+            weight: getWeightByDate(currentDate, prevDate, sortedWeights),
         };
         result[i] = currentWeightedPoint;
         prevDate = currentDate;

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

@@ -3,6 +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 { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { FullChartConfig } from '../../chart.config';
 import EventBus from '../../events/event-bus';
 import { CanvasModel } from '../../model/canvas.model';
@@ -48,6 +49,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private scale;
     private timeZoneModel;
     private canvasModel;
+    private canvasBoundsContainer;
     private labelsGroupedByWeight;
     private weightedCache?;
     private levelsCache;
@@ -56,7 +58,8 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private weightToTimeFormatMatcherArray;
     private weightToTimeFormatsDict;
     private extendedLabelsFilterConfig;
-    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scale: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scale: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer);
+    private filterLabelsInViewport;
     private getLabelsFromChartType;
     /**
      * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels
@@ -110,11 +113,16 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
      * @returns {void}
      */
     recalculateLabels(): void;
+    /**
+     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Cover up level is based on maximum label width, which is based on the font size and the maximum format length.
+     * Used to group labels.
+     */
+    private calculateCoverUpLevel;
     /**
      * Recalculates cached labels based on the current configuration and zoom level.
      * If there are no grouped labels, the cache is not set.
-     * Calculates the maximum label width based on the font size and the maximum format length.
-     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Recalculating depends on cover up level.
      * If the cover up level is negative, the cache is not updated.
      * If the cover up level has not changed, the cached labels are returned.
      * Otherwise, the labels are filtered by extended rules and grouped by cover up level.

package/dist/chart/components/x_axis/x-axis-labels.generator.js

@@ -3,6 +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 { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { unitToPixels } from '../../model/scaling/viewport.model';
 import { cloneUnsafe, typedEntries_UNSAFE } from '../../utils/object.utils';
 import { fakeVisualCandle } from '../chart/fake-candles';
@@ -11,15 +12,16 @@ import { filterMapGroupedLabelsByCoverUpLevel, getWeightFromTimeFormat, groupLab
 import { generateWeightsMapForConfig, mapCandlesToWeightedPoints, } from './time/x-axis-weights.generator';
 export class XAxisTimeLabelsGenerator {
     get labels() {
-        return this.getLabelsFromChartType();
+        return this.filterLabelsInViewport(this.getLabelsFromChartType());
     }
-    constructor(eventBus, config, chartModel, scale, timeZoneModel, canvasModel) {
+    constructor(eventBus, config, chartModel, scale, timeZoneModel, canvasModel, canvasBoundsContainer) {
         this.eventBus = eventBus;
         this.config = config;
         this.chartModel = chartModel;
         this.scale = scale;
         this.timeZoneModel = timeZoneModel;
         this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
         this.labelsGroupedByWeight = {};
         this.levelsCache = {};
         this.weightToTimeFormatMatcherArray = [];
@@ -27,6 +29,29 @@ export class XAxisTimeLabelsGenerator {
         this.extendedLabelsFilterConfig = {
             minute_1: (coverUpLevel) => coverUpLevel >= 2,
         };
+        /**
+         * Calculates the cover up level based on the maximum label width and the mean candle width.
+         * Cover up level is based on maximum label width, which is based on the font size and the maximum format length.
+         * Used to group labels.
+         */
+        this.calculateCoverUpLevel = () => {
+            const animation = this.scale.currentAnimation;
+            const meanCandleWidthInUnits = this.chartModel.mainCandleSeries.meanCandleWidth;
+            if (Object.getOwnPropertyNames(this.labelsGroupedByWeight).length === 0) {
+                return -1;
+            }
+            // calculate coverUpLevel for target zoomX to prevent extra labels calculations on every animation tick
+            const meanCandleWidthInPixels = (animation === null || animation === void 0 ? void 0 : animation.animationInProgress)
+                ? unitToPixels(meanCandleWidthInUnits, animation.animationConfig.targetZoomX)
+                : unitToPixels(meanCandleWidthInUnits, this.scale.zoomX);
+            if (!isFinite(meanCandleWidthInPixels)) {
+                return -1;
+            }
+            const fontSize = this.config.components.xAxis.fontSize;
+            const maxFormatLength = Object.values(this.formatsByWeightMap).reduce((max, item) => Math.max(item.length, max), 1);
+            const maxLabelWidth = fontSize * maxFormatLength;
+            return Math.round(maxLabelWidth / meanCandleWidthInPixels);
+        };
         this.formatsByWeightMap = config.components.xAxis.formatsForLabelsConfig;
         const { weightToTimeFormatsDict, weightToTimeFormatMatcherDict } = generateWeightsMapForConfig(this.formatsByWeightMap);
         this.weightToTimeFormatMatcherArray = Object.entries(weightToTimeFormatMatcherDict)
@@ -34,6 +59,19 @@ export class XAxisTimeLabelsGenerator {
             .sort(([a], [b]) => b - a);
         this.weightToTimeFormatsDict = weightToTimeFormatsDict;
     }
+    filterLabelsInViewport(labels) {
+        const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+        const filteredLabels = [];
+        for (const label of labels) {
+            const x = this.scale.toX(label.value);
+            // skip labels outside viewport
+            if (x < 0 || x > bounds.width) {
+                continue;
+            }
+            filteredLabels.push(label);
+        }
+        return filteredLabels;
+    }
     getLabelsFromChartType() {
         var _a, _b;
         const labels = (_b = (_a = this.weightedCache) === null || _a === void 0 ? void 0 : _a.labels) !== null && _b !== void 0 ? _b : [];
@@ -64,9 +102,10 @@ export class XAxisTimeLabelsGenerator {
      * @returns {XAxisLabelWeighted[]} An array of XAxisLabelWeighted objects.
      */
     mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake) {
+        var _a;
         const arr = new Array(weightedPoints.length);
-        weightedPoints.forEach((point, index) => {
-            var _a;
+        for (let index = 0; index < weightedPoints.length; ++index) {
+            const point = weightedPoints[index];
             const visualCandle = allCandlesWithFake[index];
             const labelFormat = this.weightToTimeFormatsDict[point.weight];
             const formattedLabel = this.timeZoneModel.getDateTimeFormatter(labelFormat)(visualCandle.candle.timestamp);
@@ -77,7 +116,7 @@ export class XAxisTimeLabelsGenerator {
                 time: visualCandle.candle.timestamp,
                 text: formattedLabel,
             };
-        });
+        }
         return arr;
     }
     /**
@@ -227,27 +266,16 @@ export class XAxisTimeLabelsGenerator {
     /**
      * Recalculates cached labels based on the current configuration and zoom level.
      * If there are no grouped labels, the cache is not set.
-     * Calculates the maximum label width based on the font size and the maximum format length.
-     * Calculates the cover up level based on the maximum label width and the mean candle width.
+     * Recalculating depends on cover up level.
      * If the cover up level is negative, the cache is not updated.
      * If the cover up level has not changed, the cached labels are returned.
      * Otherwise, the labels are filtered by extended rules and grouped by cover up level.
      * The filtered labels are then cached and returned.
      */
     recalculateCachedLabels() {
-        // skip cache setting if we don't have grouped labels
-        if (Object.getOwnPropertyNames(this.labelsGroupedByWeight).length === 0) {
-            return;
-        }
-        const fontSize = this.config.components.xAxis.fontSize;
-        const maxFormatLength = Object.values(this.formatsByWeightMap).reduce((max, item) => {
-            return Math.max(item.length, max);
-        }, 1);
-        const maxLabelWidth = fontSize * maxFormatLength;
-        const meanCandleWidthPx = unitToPixels(this.chartModel.mainCandleSeries.meanCandleWidth, this.scale.zoomX);
-        const coverUpLevel = Math.round(maxLabelWidth / meanCandleWidthPx);
+        const coverUpLevel = this.calculateCoverUpLevel();
         // for some reason sometimes `this.scale.zoomX` is negative so we dont want to update labels
-        if (coverUpLevel < 0 && !isFinite(meanCandleWidthPx)) {
+        if (coverUpLevel < 0) {
             return;
         }
         if (this.weightedCache === undefined || coverUpLevel !== this.weightedCache.coverUpLevel) {

package/dist/chart/components/x_axis/x-axis-time-labels.drawer.js

@@ -58,10 +58,6 @@ export class XAxisTimeLabelsDrawer {
         ctx.fillStyle = color;
         for (const label of labels) {
             const x = this.viewportModel.toX(label.value) - calculateTextWidth(label.text, ctx, font) / 2;
-            // skip labels outside viewport
-            if (x < 0 || x > bounds.width) {
-                continue;
-            }
             const y = bounds.y + fontHeight - 1 + offsetTop; // -1 for font drawing inconsistency
             const labelText = label.text;
             ctx.font = font;