@devexperts/dxcharts-lite 2.3.0 → 2.4.1

package/dist/chart/components/x_axis/x-axis.component.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 { distinctUntilChanged, map, throttleTime, filter } from 'rxjs/operators';
 import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
@@ -29,7 +29,7 @@ export class XAxisComponent extends ChartBaseElement {
         this.scale = scale;
         this.chartResizeHandler = chartResizeHandler;
         this.timeZoneModel = timeZoneModel;
-        const xAxisLabelsGenerator = new XAxisTimeLabelsGenerator(eventBus, config, chartComponent.chartModel, scale, timeZoneModel, this.canvasModel);
+        const xAxisLabelsGenerator = new XAxisTimeLabelsGenerator(eventBus, config, chartComponent.chartModel, scale, timeZoneModel, this.canvasModel, canvasBoundsContainer);
         this.xAxisLabelsGenerator = xAxisLabelsGenerator;
         this.xAxisLabelsModel = new XAxisLabelsModel(eventBus, []);
         const xAxisCompositeDrawer = new CompositeDrawer();
@@ -56,26 +56,22 @@ export class XAxisComponent extends ChartBaseElement {
             this.xAxisLabelsGenerator.generateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesPrependSubject
-            .pipe(filter(({ prependedCandles }) => prependedCandles.length !== 0), map(({ prependedCandles }) => {
-            return this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, prependedCandles.length);
-        }))
+            .pipe(filter(({ prependedCandles }) => prependedCandles.length !== 0), map(({ prependedCandles }) => this.chartComponent.chartModel.mainCandleSeries.visualPoints.slice(0, prependedCandles.length)))
             .subscribe(newCandles => {
+            var _a, _b;
             //@ts-ignore
             if (availableBarTypes.includes(this.config.components.chart.type)) {
-                this.xAxisLabelsGenerator.updateHistoryLabels &&
-                    this.xAxisLabelsGenerator.updateHistoryLabels(newCandles);
+                (_b = (_a = this.xAxisLabelsGenerator).updateHistoryLabels) === null || _b === void 0 ? void 0 : _b.call(_a, newCandles);
             }
         }));
         this.addRxSubscription(merge(this.scale.xChanged, this.chartResizeHandler.canvasResized)
-            .pipe(throttleTime(50, undefined, { trailing: true, leading: true }))
+            .pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true }))
             .subscribe(() => {
             this.xAxisLabelsGenerator.recalculateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
             .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.timestamp) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.timestamp); }), filter(notEmpty))
-            .subscribe(x => {
-            this.xAxisLabelsGenerator.updateLastLabel && this.xAxisLabelsGenerator.updateLastLabel(x);
-        }));
+            .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
     }
     /**
      * Returns the xAxisDrawer object.

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.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 { getPlainLabelTextColor, getPrimaryLabelTextColor } from '../label-color.functions';
+import { getPrimaryLabelTextColor } from '../label-color.functions';
 import { lastOf } from '../../../utils/array.utils';
 import { getLabelTextColorByBackgroundColor } from '../../../utils/canvas/canvas-text-functions.utils';
 export class LastCandleLabelsProvider {
@@ -87,7 +87,7 @@ export class LastCandleLabelsProvider {
         const appearanceType = this.yAxisConfig.labels.settings.lastPrice.type;
         const colors = series.colors.labels;
         const { rectLabelTextColor = 'white', rectLabelInvertedTextColor = 'black' } = this.chartConfig.colors.yAxis;
-        const getLabelBoxColor = this.resolveLabelColorFn(series.config.type);
+        const getLabelColorBySeries = this.resolveLabelColorFn(series.config.type);
         if (!colors) {
             return {
                 bgColor: '#FFFFFF',
@@ -95,14 +95,14 @@ export class LastCandleLabelsProvider {
                 rounded: true,
             };
         }
-        const boxColor = getLabelBoxColor(series.lastPriceMovement, series.colors);
+        const boxColor = getLabelColorBySeries(series.lastPriceMovement, series.colors);
         // if the label is for the main candle series
         if (primary) {
             const textColor = getPrimaryLabelTextColor(series.lastPriceMovement, colors);
             return {
                 bgColor: boxColor,
                 textColor: appearanceType === 'plain'
-                    ? getPlainLabelTextColor(this.chartConfig.colors, textColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                    ? getLabelColorBySeries(series.lastPriceMovement, series.colors)
                     : getLabelTextColorByBackgroundColor(boxColor, textColor, rectLabelInvertedTextColor),
                 rounded: true,
             };
@@ -111,7 +111,7 @@ export class LastCandleLabelsProvider {
         return {
             bgColor: boxColor,
             textColor: appearanceType === 'plain'
-                ? getPlainLabelTextColor(this.chartConfig.colors, rectLabelTextColor, rectLabelInvertedTextColor, this.yAxisConfig)
+                ? getLabelColorBySeries(series.lastPriceMovement, series.colors)
                 : getLabelTextColorByBackgroundColor(boxColor, rectLabelTextColor, rectLabelInvertedTextColor),
             rounded: true,
         };

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -9,7 +9,7 @@ import { redrawBackgroundArea } from '../../../drawers/chart-background.drawer';
 import { avoidAntialiasing, drawLine } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../../utils/canvas/canvas-font-measure-tool.utils';
 import { floor } from '../../../utils/math.utils';
-import { drawBadgeLabel, drawPlainLabel, drawRectLabel } from '../y-axis-labels.drawer';
+import { drawBadgeLabel, drawPlainLabel, drawRectLabel, checkLabelInBoundaries } from '../y-axis-labels.drawer';
 export const DEFAULT_LABEL_APPEARANCE_TYPE = 'badge';
 const DEFAULT_PADDING = 4;
 export const priceLabelDrawersMap = {
@@ -66,22 +66,26 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
     const _drawLine = () => showLine && avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1));
     const _drawLabel = () => drawLabel(ctx, bounds, text, centralY, visualLabel, config, colors, false, backgroundCtx);
-    switch (mode) {
-        case 'line':
-            _drawLine();
-            _drawDescription();
-            break;
-        case 'line-label':
-            _drawLine();
-            _drawDescription();
-            _drawLabel();
-            break;
-        case 'label':
-            _drawDescription();
-            _drawLabel();
-            break;
-        case 'none':
-            break;
+    const drawLineLabel = () => {
+        _drawLine();
+        _drawDescription();
+    };
+    const drawLineLabelLabel = () => {
+        _drawLine();
+        _drawLabel();
+        _drawDescription();
+    };
+    const drawLabelLabel = () => {
+        _drawDescription();
+        _drawLabel();
+    };
+    const labelDrawerByMode = {
+        'line': drawLineLabel,
+        'line-label': drawLineLabelLabel,
+        'label': drawLabelLabel,
+    };
+    if (mode !== 'none' && checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
+        labelDrawerByMode[mode]();
     }
     ctx.restore();
 }
@@ -101,11 +105,6 @@ function drawDescription(backgroundCtx, ctx, labelBounds, paneBounds, visualLabe
     const labelBoxY = centralY - fontHeight / 2 - paddingTop;
     const labelBoxBottom = centralY + fontHeight / 2 + paddingBottom;
     const labelBoxHeight = labelBoxBottom - labelBoxY;
-    // do not draw, if description is out of bounds
-    if (centralY < labelBounds.y + labelBoxHeight / 2 ||
-        centralY > labelBounds.y + labelBounds.height - labelBoxHeight / 2) {
-        return;
-    }
     ctx.save();
     // overlay rect
     const width = descriptionWidth + 5;

package/dist/chart/components/y_axis/y-axis-labels.drawer.d.ts

@@ -34,10 +34,11 @@ export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
+export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters.
  * @param ctx - canvas 2D context to draw on
@@ -45,10 +46,11 @@ export declare function drawBadgeLabel(ctx: CanvasRenderingContext2D, bounds: Bo
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean): void;
+export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean): void;
 /**
  * Draws rectangle label on Y axis with provided parameters but with transparent background.
  * @param ctx - canvas 2D context to draw on
@@ -56,10 +58,12 @@ export declare function drawRectLabel(ctx: CanvasRenderingContext2D, bounds: Bou
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
+ * @param backgroundCtx
  */
-export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], drawOutside?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
+export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bounds, text: string, centralY: number, config: YAxisLabelDrawConfig, yAxisState: YAxisConfig, yAxisColors: FullChartColors['yAxis'], checkBoundaries?: boolean, backgroundCtx?: CanvasRenderingContext2D): void;
 /**
  * Offset from the center of label to the top/bottom.
  *
@@ -68,3 +72,11 @@ export declare function drawPlainLabel(ctx: CanvasRenderingContext2D, bounds: Bo
  * @param paddingTop - extra padding from top
  */
 export declare function getLabelYOffset(font: string, ctx: CanvasRenderingContext2D, paddingTop?: number): number;
+/**
+ * Checks if label fits in chart scale boundaries
+ * @param centralY
+ * @param bounds
+ * @param labelBoxHeight
+ * returns true if label fits
+ */
+export declare function checkLabelInBoundaries(centralY: number, bounds: Bounds, labelBoxHeight: number): boolean;

package/dist/chart/components/y_axis/y-axis-labels.drawer.js

@@ -17,10 +17,11 @@ export const DEFAULT_PRICE_LABEL_PADDING = 4;
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -34,8 +35,7 @@ export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState,
     const labelBoxBottomY = centralY + halfFontHeight + paddingBottom;
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -64,10 +64,11 @@ export function drawBadgeLabel(ctx, bounds, text, centralY, config, yAxisState,
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
  */
-export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false) {
+export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -84,8 +85,7 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     const rounded = (_k = config.rounded) !== null && _k !== void 0 ? _k : (_l = yAxisState.typeConfig.rectangle) === null || _l === void 0 ? void 0 : _l.rounded;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -115,10 +115,12 @@ export function drawRectLabel(ctx, bounds, text, centralY, config, yAxisState, y
  * @param text - text to draw
  * @param centralY - y
  * @param config - label styles config
- * @param align
  * @param yAxisState
+ * @param yAxisColors
+ * @param checkBoundaries
+ * @param backgroundCtx
  */
-export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, drawOutside = false, backgroundCtx) {
+export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState, yAxisColors, checkBoundaries = true, backgroundCtx) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const align = yAxisState.align;
     const textFont = (_a = config.textFont) !== null && _a !== void 0 ? _a : getFontFromConfig(yAxisState);
@@ -134,8 +136,7 @@ export function drawPlainLabel(ctx, bounds, text, centralY, config, yAxisState,
     const labelBoxBottomY = centralY + fontHeight / 2 + paddingBottom;
     const labelBoxHeight = labelBoxBottomY - labelBoxTopY;
     // do not draw, if label is out of bounds
-    if ((centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2) &&
-        !drawOutside) {
+    if (checkBoundaries && !checkLabelInBoundaries(centralY, bounds, labelBoxHeight)) {
         return;
     }
     ctx.save();
@@ -164,3 +165,13 @@ export function getLabelYOffset(font, ctx, paddingTop = DEFAULT_PRICE_LABEL_PADD
     const fontHeight = calculateSymbolHeight(font, ctx);
     return fontHeight / 2 + paddingTop;
 }
+/**
+ * Checks if label fits in chart scale boundaries
+ * @param centralY
+ * @param bounds
+ * @param labelBoxHeight
+ * returns true if label fits
+ */
+export function checkLabelInBoundaries(centralY, bounds, labelBoxHeight) {
+    return !(centralY < bounds.y + labelBoxHeight / 2 || centralY > bounds.y + bounds.height - labelBoxHeight / 2);
+}

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

@@ -18,8 +18,11 @@ import { ScaleModel } from '../../model/scale.model';
  */
 export declare class YAxisScaleHandler extends ChartBaseElement {
     private bus;
+    private config;
     private scale;
+    private canvasInputListener;
     private bounds;
+    private hitTest;
     private autoScaleCallback;
     yAxisDragEndSubject: Subject<void>;
     lastYStart: Unit;
@@ -27,6 +30,7 @@ export declare class YAxisScaleHandler extends ChartBaseElement {
     lastYHeight: Unit;
     lastYPxHeight: Pixel;
     constructor(bus: EventBus, config: YAxisConfig, panning: ChartPanComponent, scale: ScaleModel, canvasInputListener: CanvasInputListenerComponent, bounds: CanvasBoundsContainer, hitTest: HitBoundsTest, autoScaleCallback: (auto: boolean) => void);
+    protected doActivate(): void;
     private onYDragStart;
     private onYDragTick;
     private onYDragEnd;

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

@@ -17,8 +17,11 @@ export class YAxisScaleHandler extends ChartBaseElement {
     constructor(bus, config, panning, scale, canvasInputListener, bounds, hitTest, autoScaleCallback) {
         super();
         this.bus = bus;
+        this.config = config;
         this.scale = scale;
+        this.canvasInputListener = canvasInputListener;
         this.bounds = bounds;
+        this.hitTest = hitTest;
         this.autoScaleCallback = autoScaleCallback;
         this.yAxisDragEndSubject = new Subject();
         this.lastYStart = 0;
@@ -26,6 +29,8 @@ export class YAxisScaleHandler extends ChartBaseElement {
         this.lastYHeight = 0;
         this.lastYPxHeight = 0;
         this.onYDragStart = () => {
+            // halt previous scale animation if drag is started
+            this.scale.haltAnimation();
             this.lastYStart = this.scale.yStart;
             this.lastYEnd = this.scale.yEnd;
             this.lastYHeight = this.scale.yEnd - this.scale.yStart;
@@ -65,12 +70,14 @@ export class YAxisScaleHandler extends ChartBaseElement {
                 disableChartPanning: false,
             });
             this.addChildEntity(dragNDropYComponent);
-            if (config.customScaleDblClick) {
-                canvasInputListener.observeDbClick(hitTest).subscribe(() => {
-                    autoScaleCallback(true);
-                    this.bus.fireDraw();
-                });
-            }
+        }
+    }
+    doActivate() {
+        if (this.config.customScaleDblClick) {
+            this.addRxSubscription(this.canvasInputListener.observeDbClick(this.hitTest).subscribe(() => {
+                this.autoScaleCallback(true);
+                this.bus.fireDraw();
+            }));
         }
     }
 }

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

@@ -4,7 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { getFontFromConfig } from '../../chart.config';
-import { clipToBounds } from '../../drawers/data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
 /**
  * Draws the Y_AXIS rectangle + it's base labels.

package/dist/chart/drawers/chart-background.drawer.d.ts

@@ -9,10 +9,9 @@ import { FullChartConfig } from '../chart.config';
 export declare class BackgroundDrawer implements Drawer {
     private canvasModel;
     private config;
-    constructor(canvasModel: CanvasModel, config: FullChartConfig);
+    private backgroundDrawPredicate;
+    constructor(canvasModel: CanvasModel, config: FullChartConfig, backgroundDrawPredicate?: () => boolean);
     private prevState;
-    private prevWidth;
-    private prevHeight;
     draw(): void;
     getCanvasIds(): Array<string>;
 }

package/dist/chart/drawers/chart-background.drawer.js

@@ -4,39 +4,33 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { getDPR } from '../utils/device/device-pixel-ratio.utils';
-import { deepEqual } from '../utils/object.utils';
 import { floor } from '../utils/math.utils';
+import { deepEqual } from '../utils/object.utils';
 export class BackgroundDrawer {
-    constructor(canvasModel, config) {
+    constructor(canvasModel, config, backgroundDrawPredicate = () => true) {
         this.canvasModel = canvasModel;
         this.config = config;
+        this.backgroundDrawPredicate = backgroundDrawPredicate;
         // we need to save previous state to avoid unnecessary redraws
         this.prevState = {};
-        this.prevWidth = 0;
-        this.prevHeight = 0;
     }
     draw() {
-        if (deepEqual(this.config.colors.chartAreaTheme, this.prevState) &&
-            this.prevHeight === this.canvasModel.height &&
-            this.prevWidth === this.canvasModel.width) {
-            return;
-        }
-        this.canvasModel.clear();
-        const ctx = this.canvasModel.ctx;
-        if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
-            const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
-            grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
-            grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
-            ctx.fillStyle = grd;
-        }
-        else {
-            ctx.fillStyle = this.config.colors.chartAreaTheme.backgroundColor;
+        if (this.backgroundDrawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
+            this.canvasModel.clear();
+            const ctx = this.canvasModel.ctx;
+            if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {
+                const grd = ctx.createLinearGradient(0, 0, this.canvasModel.width, this.canvasModel.height);
+                grd.addColorStop(0, this.config.colors.chartAreaTheme.backgroundGradientTopColor);
+                grd.addColorStop(1, this.config.colors.chartAreaTheme.backgroundGradientBottomColor);
+                ctx.fillStyle = grd;
+            }
+            else {
+                ctx.fillStyle = this.config.colors.chartAreaTheme.backgroundColor;
+            }
+            ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
         }
-        ctx.fillRect(0, 0, this.canvasModel.width, this.canvasModel.height);
         // save prev state
         this.prevState = Object.assign({}, this.config.colors.chartAreaTheme);
-        this.prevWidth = this.canvasModel.width;
-        this.prevHeight = this.canvasModel.height;
     }
     getCanvasIds() {
         return [this.canvasModel.canvasId];

package/dist/chart/drawers/data-series-drawers/candle-series-wrapper.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 '../data-series.drawer';
+import { clipToBounds } from '../../utils/canvas/canvas-drawing-functions.utils';
 export const candleTypesList = [
     'candle',
     'bar',

package/dist/chart/drawers/data-series.drawer.d.ts

@@ -5,7 +5,6 @@
  */
 import { DynamicModelDrawer } from '../components/dynamic-objects/dynamic-objects.drawer';
 import { PaneManager } from '../components/pane/pane-manager.component';
-import { Bounds } from '../model/bounds.model';
 import { CanvasModel } from '../model/canvas.model';
 import { DataSeriesModel, VisualSeriesPoint } from '../model/data-series.model';
 export interface ChartDrawerConfig {
@@ -33,5 +32,4 @@ export declare class DataSeriesDrawer implements DynamicModelDrawer<DataSeriesMo
     draw(canvasModel: CanvasModel, model: DataSeriesModel, paneUUID?: string): void;
     drawSeries(ctx: CanvasRenderingContext2D, series: DataSeriesModel): void;
 }
-export declare const clipToBounds: (ctx: CanvasRenderingContext2D, bounds: Bounds) => void;
 export declare const setLineWidth: (ctx: CanvasRenderingContext2D, lineWidth: number, dataSeries: DataSeriesModel, drawerConfig: ChartDrawerConfig, seriesSelectedWidth?: number) => void;

package/dist/chart/drawers/data-series.drawer.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 { clipToBounds } from '../utils/canvas/canvas-drawing-functions.utils';
 export const transformToTwoDimension = (points) => (Array.isArray(points[0]) ? points : [points]);
 /**
  * Basic data series drawer.
@@ -42,12 +43,6 @@ export class DataSeriesDrawer {
         }
     }
 }
-export const clipToBounds = (ctx, bounds) => {
-    ctx.beginPath();
-    ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
-    ctx.clip();
-    ctx.closePath();
-};
 export const setLineWidth = (ctx, lineWidth, dataSeries, drawerConfig, seriesSelectedWidth = lineWidth) => {
     if (drawerConfig.forceBold) {
         ctx.lineWidth = drawerConfig.forceBold;

package/dist/chart/drawers/ht-data-series.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 './data-series.drawer';
+import { clipToBounds } from '../utils/canvas/canvas-drawing-functions.utils';
 /***
  * HitTest Chart drawer. It's used to draw hit test for chart types on the hit-test canvas.
  */

package/dist/chart/inputhandlers/hover-producer.component.d.ts

@@ -32,7 +32,7 @@ export interface HoverParts {
 export interface Hover extends BaseHover, HoverParts {
 }
 export interface HoverProducerPart<T = unknown> {
-    getData(hover: BaseHover): T;
+    getData(hover: BaseHover): T | undefined;
 }
 export interface HoverProducerParts {
     candleHover: CandleHoverProducerPart;

package/dist/chart/model/compare-series-hover.d.ts

@@ -19,5 +19,5 @@ export declare class CompareSeriesHoverProducerPart implements HoverProducerPart
      * @param {BaseHover} hover - The hover object containing the x-coordinate.
      * @returns {CompareSeriesHover[]} An array of objects containing the instrument symbol, price and id of each series of candles.
      */
-    getData(hover: BaseHover): CompareSeriesHover[];
+    getData(hover: BaseHover): CompareSeriesHover[] | undefined;
 }

package/dist/chart/model/compare-series-hover.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 { MainCandleSeriesModel } from './main-candle-series.model';
 export class CompareSeriesHoverProducerPart {
     constructor(chartModel) {
         this.chartModel = chartModel;
@@ -13,6 +14,10 @@ export class CompareSeriesHoverProducerPart {
      * @returns {CompareSeriesHover[]} An array of objects containing the instrument symbol, price and id of each series of candles.
      */
     getData(hover) {
+        if (this.chartModel.candleSeries.length === 1 &&
+            this.chartModel.candleSeries[0] instanceof MainCandleSeriesModel) {
+            return;
+        }
         const { x } = hover;
         const candle = this.chartModel.candleFromX(x);
         const idx = candle.idx || 0;

package/dist/chart/model/data-series.model.js

@@ -138,7 +138,7 @@ export class DataSeriesModel extends ChartBaseElement {
     }
     doActivate() {
         this.addRxSubscription(this.scale.xChanged.subscribe(() => this.recalculateDataViewportIndexes()));
-        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => this.recalculateVisualPoints()));
+        this.addRxSubscription(this.scale.scaleInversedSubject.subscribe(() => { this.recalculateVisualPoints(); }));
     }
     /**
      * Sets the data points and recalculates internal state

package/dist/chart/model/hit-test-canvas.model.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, Subject } from 'rxjs';
+import { merge, Subject, animationFrameScheduler } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 import { CanvasElement } from '../canvas/canvas-bounds-container';
 import { CanvasModel, initCanvasWithConfig } from './canvas.model';
@@ -50,7 +50,7 @@ export class HitTestCanvasModel extends CanvasModel {
             const bounds = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
             const hoverSub = this.canvasInputListener
                 .observeMouseMove()
-                .pipe(throttleTime(100, undefined, { trailing: true }))
+                .pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
                 .subscribe(point => this.eventHandler(point, 'hover'));
             const touchStartSub = this.canvasInputListener
                 .observeTouchStart()

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

@@ -48,6 +48,8 @@ export declare class ScaleModel extends ViewportModel {
     xConstraints: Constraints[];
     readonly state: ChartScale;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
+    protected doActivate(): void;
+    protected doDeactivate(): void;
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
      * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
@@ -88,7 +90,7 @@ export declare class ScaleModel extends ViewportModel {
      * @param fireChanged
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
-    setXScale(xStart: Unit, xEnd: Unit): void;
+    setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     setYScale(yStart: Unit, yEnd: Unit, fire?: boolean): void;
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).

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

@@ -51,6 +51,19 @@ export class ScaleModel extends ViewportModel {
         this.offsets = this.config.components.offsets;
         this.addXConstraint((initialState, state) => zoomConstraint(initialState, state, this.config.components.chart, this.getBounds));
     }
+    doActivate() {
+        super.doActivate();
+        this.scaleInversedSubject = new Subject();
+        this.beforeStartAnimationSubject = new Subject();
+        this.addRxSubscription(this.scaleInversedSubject.subscribe(() => {
+            this.fireChanged();
+        }));
+    }
+    doDeactivate() {
+        super.doDeactivate();
+        this.scaleInversedSubject.complete();
+        this.beforeStartAnimationSubject.complete();
+    }
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
      * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
@@ -136,10 +149,10 @@ export class ScaleModel extends ViewportModel {
      * @param fireChanged
      * @param forceNoAutoScale - force NOT apply auto-scaling (for lazy loading)
      */
-    setXScale(xStart, xEnd) {
+    setXScale(xStart, xEnd, forceNoAnimation = true) {
         const initialState = this.export();
-        super.setXScale(xStart, xEnd, false);
-        const state = this.export();
+        const zoomX = this.calculateZoomX(xStart, xEnd);
+        const state = Object.assign(Object.assign({}, initialState), { zoomX, xStart, xEnd });
         const constrainedState = this.scalePostProcessor(initialState, state);
         if (this.state.lockPriceToBarRatio) {
             changeYToKeepRatio(constrainedState, this.zoomXYRatio);
@@ -147,7 +160,13 @@ export class ScaleModel extends ViewportModel {
         if (this.state.auto) {
             this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        this.apply(constrainedState);
+        if (forceNoAnimation || this.config.scale.disableAnimations) {
+            this.haltAnimation();
+            this.apply(constrainedState);
+        }
+        else {
+            startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
+        }
     }
     setYScale(yStart, yEnd, fire = false) {
         const initialState = this.export();