@devexperts/dxcharts-lite 2.7.2 → 2.7.3

package/dist/chart/bootstrap.js

@@ -88,6 +88,7 @@ export default class ChartBootstrap {
         const dataSeriesCanvasClearDrawer = new ClearCanvasDrawer(this.dynamicObjectsCanvasModel);
         drawingManager.addDrawer(dataSeriesCanvasClearDrawer, 'SERIES_CLEAR');
         const yAxisLabelsCanvasModel = createCanvasModel(eventBus, elements.yAxisLabelsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
+        const yAxisDescriptionsCanvasModel = createCanvasModel(eventBus, elements.yAxisDescriptionsCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
         const canvasBoundsContainer = new CanvasBoundsContainer(config, eventBus, mainCanvasModel, formatterFactory, chartResizeHandler);
         this.canvasBoundsContainer = canvasBoundsContainer;
         //#region  main canvas user input listeners
@@ -172,7 +173,7 @@ export default class ChartBootstrap {
         // high low component
         const highLowComponent = new HighLowComponent(config, this.dynamicObjectsCanvasModel, chartModel, canvasBoundsContainer, drawingManager);
         this.chartComponents.push(highLowComponent);
-        this.initYAxisDrawer(yAxisLabelsCanvasModel);
+        this.initYAxisDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel);
         this.yAxisComponent = mainPane.mainExtent.yAxis;
         // default labels provider
         const lastCandleLabelsProvider = new LastCandleLabelsProvider(this.chartModel, this.config, mainPane.mainExtent.yAxis.state, this.chartModel.lastCandleLabelsByChartType, this.yAxisComponent.getLabelsColorResolver.bind(this.yAxisComponent));
@@ -201,15 +202,17 @@ export default class ChartBootstrap {
         drawingManager.reorderDrawers(config.drawingOrder);
         this.clearer = clearerSafe(this.components);
     }
-    initYAxisDrawer(yAxisLabelsCanvasModel) {
+    initYAxisDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel) {
         const yAxisCompositeDrawer = new CompositeDrawer();
         const clearYAxis = new ClearCanvasDrawer(yAxisLabelsCanvasModel);
+        const clearYAxisDescriptions = new ClearCanvasDrawer(yAxisDescriptionsCanvasModel);
         yAxisCompositeDrawer.addDrawer(clearYAxis, 'YAXIS_CLEAR');
+        yAxisCompositeDrawer.addDrawer(clearYAxisDescriptions, 'Y_AXIS_DESCRIPTIONS_CLEAR');
         this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
         const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisDrawer);
-        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
-        yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
+        const yAxisPriceLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
+        this.drawingManager.addDrawer(yAxisPriceLabelsDrawer, 'Y_AXIS_PRICE_LABELS');
     }
     // TODO remove chartModel dependency, put period to global config somewhere
     /**

package/dist/chart/canvas/canvas-chart-html.js

@@ -11,6 +11,7 @@ export default (devexpertsPromoLink) => '<div data-element="chartResizer" style=
     '\t\t\t<canvas data-element="mainCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="dynamicObjectsCanvas"></canvas>\n' +
+    '\t\t\t<canvas data-element="yAxisDescriptionsCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="crossToolCanvas"></canvas>\n' +
     '\t\t\t<canvas data-element="hitTestCanvas"></canvas>\n' +
     `${devexpertsPromoLink

package/dist/chart/canvas/chart-elements.d.ts

@@ -10,6 +10,7 @@ export interface ChartElements {
     mainCanvas?: HTMLCanvasElement;
     dynamicObjectsCanvas?: HTMLCanvasElement;
     yAxisLabelsCanvas?: HTMLCanvasElement;
+    yAxisDescriptionsCanvas?: HTMLCanvasElement;
     crossToolCanvas?: HTMLCanvasElement;
     hitTestCanvas?: HTMLCanvasElement;
     chartResizer?: HTMLElement;

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

@@ -117,6 +117,7 @@ export declare class ChartComponent extends ChartBaseElement {
      * Sets the timestamp range of the chart by setting the x-axis scale.
      * @param {Timestamp} start - The start timestamp of the range.
      * @param {Timestamp} end - The end timestamp of the range.
+     * @param {boolean} forceNoAnimation - true by default
      * @returns {void}
      */
     setTimestampRange(start: Timestamp, end: Timestamp, forceNoAnimation?: boolean): void;
@@ -124,6 +125,7 @@ export declare class ChartComponent extends ChartBaseElement {
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
+     * @param {boolean} forceNoAnimation - true by default
      */
     setXScale(xStart: Unit, xEnd: Unit, forceNoAnimation?: boolean): void;
     /**
@@ -182,12 +184,12 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Removes all data points from the main candle series that are newer than the given timestamp.
      * Can be useful for data replay.
-     * @param startTimestamp
+     * @param {Timestamp } timestamp
      */
     removeDataFrom(timestamp: Timestamp): void;
     /**
      * Removes chart candles series.
-     * @param instrument
+     * @param {CandleSeriesModel} series
      */
     removeSecondarySeries(series: CandleSeriesModel): void;
     /**
@@ -234,13 +236,13 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Updates last candle value
      * @param candle - updated candle
-     * @param instrumentSymbol - name of the instrument to update
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateLastCandle(candle: Candle, instrumentSymbol?: string): void;
     /**
      * Updates candle series for instrument. By default takes main instrument.
-     * @param candles
-     * @param instrument
+     * @param {Array<Candle>} candles
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateCandles(candles: Array<Candle>, instrumentSymbol?: string): void;
     /**
@@ -257,7 +259,7 @@ export declare class ChartComponent extends ChartBaseElement {
     /**
      * Registers a new chart type drawer or overrides default drawer if drawerType is {BarType}.
      * @param drawerType {string} - a unique name for the drawer, could be {BarType} - in this case will override default drawer for the type
-     * @param drawer {ChartTypeDrawer} - an implementation of the drawer
+     * @param drawer {SeriesDrawer} - an implementation of the drawer
      */
     registerDataSeriesTypeDrawer(drawerType: DataSeriesType, drawer: SeriesDrawer): void;
     /**

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

@@ -27,10 +27,12 @@ import { HIT_TEST_PREFIX } from '../../drawers/drawing-manager';
 import { HTDataSeriesDrawer } from '../../drawers/ht-data-series.drawer';
 import { BaselineModel } from '../../model/baseline.model';
 import { keys } from '../../utils/object.utils';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
 import { defaultCandleTransformer, hollowCandleTransformer, lineCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
 import { deleteCandlesIndex } from './candle.functions';
 import { TrendHistogramDrawer } from '../../drawers/data-series-drawers/trend-histogram.drawer';
+import { debounce } from '../../utils/performance/debounce.utils';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -109,9 +111,13 @@ export class ChartComponent extends ChartBaseElement {
             this.dynamicObjects.model.removeObject(series.id);
         }));
         // redraw background only when chart is resized
-        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(() => {
+        this.addRxSubscription(this.canvasBoundsContainer.observeAnyBoundsChanged().subscribe(debounce(() => {
+            // there is multiple calls on this bounds change on lots of sources,
+            // and sometimes this calls mixes with this.chartResizeHandler.canvasResized
+            // and this leads to change of background in situations when it's not needed,
+            // so on multiple calls in one frame we debounced it to avoid that collisions and steam races
             this.backgroundDrawerPredicateSubject.next(false);
-        }));
+        }, ONE_FRAME_MS)));
         this.addRxSubscription(this.chartResizeHandler.canvasResized.subscribe(() => {
             this.backgroundDrawerPredicateSubject.next(true);
         }));
@@ -206,6 +212,7 @@ export class ChartComponent extends ChartBaseElement {
      * Sets the timestamp range of the chart by setting the x-axis scale.
      * @param {Timestamp} start - The start timestamp of the range.
      * @param {Timestamp} end - The end timestamp of the range.
+     * @param {boolean} forceNoAnimation - true by default
      * @returns {void}
      */
     setTimestampRange(start, end, forceNoAnimation = true) {
@@ -215,6 +222,7 @@ export class ChartComponent extends ChartBaseElement {
      * Moves the viewport to exactly xStart..xEnd place.
      * @param xStart - viewport start in units
      * @param xEnd - viewport end in units
+     * @param {boolean} forceNoAnimation - true by default
      */
     setXScale(xStart, xEnd, forceNoAnimation = true) {
         return this.scale.setXScale(xStart, xEnd, forceNoAnimation);
@@ -325,14 +333,14 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Removes all data points from the main candle series that are newer than the given timestamp.
      * Can be useful for data replay.
-     * @param startTimestamp
+     * @param {Timestamp } timestamp
      */
     removeDataFrom(timestamp) {
         this.chartModel.removeDataFrom(timestamp);
     }
     /**
      * Removes chart candles series.
-     * @param instrument
+     * @param {CandleSeriesModel} series
      */
     removeSecondarySeries(series) {
         this.chartModel.removeSecondaryCandleSeries(series);
@@ -393,15 +401,15 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Updates last candle value
      * @param candle - updated candle
-     * @param instrumentSymbol - name of the instrument to update
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateLastCandle(candle, instrumentSymbol) {
         this.chartModel.updateLastCandle(candle, instrumentSymbol);
     }
     /**
      * Updates candle series for instrument. By default takes main instrument.
-     * @param candles
-     * @param instrument
+     * @param {Array<Candle>} candles
+     * @param {string} instrumentSymbol - name of the instrument to update
      */
     updateCandles(candles, instrumentSymbol) {
         this.chartModel.updateCandles(candles, instrumentSymbol);
@@ -424,7 +432,7 @@ export class ChartComponent extends ChartBaseElement {
     /**
      * Registers a new chart type drawer or overrides default drawer if drawerType is {BarType}.
      * @param drawerType {string} - a unique name for the drawer, could be {BarType} - in this case will override default drawer for the type
-     * @param drawer {ChartTypeDrawer} - an implementation of the drawer
+     * @param drawer {SeriesDrawer} - an implementation of the drawer
      */
     registerDataSeriesTypeDrawer(drawerType, drawer) {
         this._dataSeriesDrawers[drawerType] = drawer;

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

@@ -19,5 +19,5 @@ export declare const priceLabelDrawersMap: Record<YAxisVisualLabelType, LabelDra
  * @param canvasBoundsContainer
  * @param config
  */
-export declare function drawLabel(ctx: CanvasRenderingContext2D, backgroundCtx: CanvasRenderingContext2D, bounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, canvasBoundsContainer: CanvasBoundsContainer, config: YAxisConfig, colors: FullChartColors): void;
+export declare function drawLabel(ctx: CanvasRenderingContext2D, yAxisDescriptionsCtx: CanvasRenderingContext2D, backgroundCtx: CanvasRenderingContext2D, bounds: Bounds, paneBounds: Bounds, visualLabel: VisualYAxisLabel, canvasBoundsContainer: CanvasBoundsContainer, config: YAxisConfig, colors: FullChartColors): void;
 export {};

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

@@ -25,7 +25,7 @@ export const priceLabelDrawersMap = {
  * @param canvasBoundsContainer
  * @param config
  */
-export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, canvasBoundsContainer, config, colors) {
+export function drawLabel(ctx, yAxisDescriptionsCtx, backgroundCtx, bounds, paneBounds, visualLabel, canvasBoundsContainer, config, colors) {
     var _a, _b, _c, _d, _e;
     const centralY = visualLabel.y;
     const text = visualLabel.labelText;
@@ -48,7 +48,8 @@ export function drawLabel(ctx, backgroundCtx, bounds, paneBounds, visualLabel, c
     const drawLabel = priceLabelDrawersMap[appearanceType];
     const showDescription = config.labels.descriptions;
     const showLine = isLineVisible(bounds, labelY, labelBoxHeight);
-    const _drawDescription = () => showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config);
+    const _drawDescription = () => showDescription &&
+        drawDescription(backgroundCtx, yAxisDescriptionsCtx, bounds, paneBounds, visualLabel, config);
     let lineXStart;
     let lineXEnd;
     // line should touch the label

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

@@ -11,11 +11,12 @@ import { PaneManager } from '../../pane/pane-manager.component';
 import { LabelGroup } from './y-axis-labels.model';
 export declare class YAxisPriceLabelsDrawer implements Drawer {
     private yAxisLabelsCanvasModel;
+    private yAxisDescriptionsCanvasModel;
     private backgroundCanvasModel;
     private canvasBoundsContainer;
     private fullConfig;
     private paneManager;
-    constructor(yAxisLabelsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, fullConfig: FullChartConfig, paneManager: PaneManager);
+    constructor(yAxisLabelsCanvasModel: CanvasModel, yAxisDescriptionsCanvasModel: CanvasModel, backgroundCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, fullConfig: FullChartConfig, paneManager: PaneManager);
     draw(): void;
     drawHighlightedBackgroundBetweenLabels(orderedLabels: LabelGroup[]): void;
     getCanvasIds(): Array<string>;

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

@@ -7,8 +7,9 @@ import { CanvasElement, CHART_UUID, limitYToBounds, } from '../../../canvas/canv
 import { fillRect } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { drawLabel } from './price-label.drawer';
 export class YAxisPriceLabelsDrawer {
-    constructor(yAxisLabelsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, fullConfig, paneManager) {
+    constructor(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel, backgroundCanvasModel, canvasBoundsContainer, fullConfig, paneManager) {
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
+        this.yAxisDescriptionsCanvasModel = yAxisDescriptionsCanvasModel;
         this.backgroundCanvasModel = backgroundCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.fullConfig = fullConfig;
@@ -17,6 +18,7 @@ export class YAxisPriceLabelsDrawer {
     draw() {
         const ctx = this.yAxisLabelsCanvasModel.ctx;
         const backgroundCtx = this.backgroundCanvasModel.ctx;
+        const descriptionsCtx = this.yAxisDescriptionsCanvasModel.ctx;
         this.paneManager.yExtents.forEach(extent => {
             if (extent.yAxis.state.visible) {
                 const yAxisBounds = extent.getYAxisBounds();
@@ -26,10 +28,10 @@ export class YAxisPriceLabelsDrawer {
                 orderedLabels.forEach(l => {
                     var _a;
                     const bounds = (_a = l.bounds) !== null && _a !== void 0 ? _a : yAxisBounds;
-                    l.labels.forEach(vl => drawLabel(ctx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
+                    l.labels.forEach(vl => drawLabel(ctx, descriptionsCtx, backgroundCtx, bounds, paneBounds, vl, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
                 });
                 // TODO I added this as a simple mechanism to add custom labels, we need to review it
-                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
+                Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l => drawLabel(ctx, descriptionsCtx, backgroundCtx, yAxisBounds, paneBounds, l, this.canvasBoundsContainer, extent.yAxis.state, this.fullConfig.colors));
             }
         });
     }

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

@@ -25,6 +25,11 @@ export declare class YAxisBaseLabelsModel extends ChartBaseElement {
      * If the height of the canvas bounds changes by more than 1.5 times the previous height, the labels cache is invalidated and the previous y-axis height is updated.
      */
     protected doActivate(): void;
+    /**
+     * Generates new labels with labelsGenerator
+     * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
+     */
+    recalculateLabels(): void;
     /**
      * Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
      * Then, it calls the updateYAxisWidth method to update the width of the y-axis.

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

@@ -41,6 +41,15 @@ export class YAxisBaseLabelsModel extends ChartBaseElement {
             this.prevYAxisHeight = height;
         }))).subscribe(() => this.updateLabels()));
     }
+    /**
+     * Generates new labels with labelsGenerator
+     * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
+     */
+    recalculateLabels() {
+        const labels = this.labelsGenerator.doGenerateLabels();
+        this.labels = labels;
+        animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
+    }
     /**
      * Updates the labels of the chart's y-axis by generating new numeric labels using the yAxisLabelsGenerator object.
      * Then, it calls the updateYAxisWidth method to update the width of the y-axis.

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

@@ -45,6 +45,7 @@ export declare class YAxisComponent extends ChartBaseElement {
     model: YAxisModel;
     axisTypeSetSubject: Subject<PriceAxisType>;
     axisAlignSetSubject: Subject<YAxisAlign>;
+    axisAlignMovedSubject: Subject<YAxisAlign>;
     readonly state: YAxisConfig;
     constructor(eventBus: EventBus, config: FullChartConfig, canvasModel: CanvasModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent, cursors: CursorHandler, valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, paneUUID: string, extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, chartResizeHandler: ChartResizeHandler, initialState?: YAxisConfig);
     setExtentIdx(extentIdx: number): void;

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

@@ -34,6 +34,7 @@ export class YAxisComponent extends ChartBaseElement {
         this.labelsColorByChartTypeMap = {};
         this.axisTypeSetSubject = new Subject();
         this.axisAlignSetSubject = new Subject();
+        this.axisAlignMovedSubject = new Subject();
         /* This function assigns a callback to be executed when a double-click event is detected.
          * It accepts one parameter `cb`, which is a callback function.
          * When a double-click event occurs, the specified callback function `cb` will be invoked.
@@ -246,7 +247,9 @@ export class YAxisComponent extends ChartBaseElement {
     togglePriceScaleInverse(inverse) {
         this.scale.state.inverse = inverse;
         this.scale.inverseY = inverse;
+        this.model.fancyLabelsModel.updateLabels();
         this.scale.scaleInversedSubject.next(inverse);
+        this.canvasModel.fireDraw();
     }
     /**
      * Changes the visibility of the labels' descriptions.

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

@@ -12,6 +12,7 @@ export declare class BackgroundDrawer implements Drawer {
     private drawPredicate;
     constructor(canvasModel: CanvasModel, config: FullChartConfig, drawPredicate?: () => boolean);
     private prevState;
+    isColorsChanged: () => boolean;
     draw(): void;
     getCanvasIds(): Array<string>;
 }

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

@@ -13,9 +13,10 @@ export class BackgroundDrawer {
         this.drawPredicate = drawPredicate;
         // we need to save previous state to avoid unnecessary redraws
         this.prevState = {};
+        this.isColorsChanged = () => !deepEqual(this.config.colors.chartAreaTheme, this.prevState);
     }
     draw() {
-        if (this.drawPredicate() || !deepEqual(this.config.colors.chartAreaTheme, this.prevState)) {
+        if (this.drawPredicate() || this.isColorsChanged()) {
             this.canvasModel.clear();
             const ctx = this.canvasModel.ctx;
             if (this.config.colors.chartAreaTheme.backgroundMode === 'gradient') {

package/dist/chart/utils/numeric-constants.utils.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2025 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/.
+ */
+export declare const ONE_FRAME_MS = 16;

package/dist/chart/utils/numeric-constants.utils.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2025 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/.
+ */
+export const ONE_FRAME_MS = 16; // 60 frames per second is ~16ms