@devexperts/dxcharts-lite 2.7.14 → 2.7.16

package/dist/chart/bootstrap.js

@@ -181,7 +181,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 verticalGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => [], undefined, () => config.components.grid.visible);
+        const verticalGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => [], undefined, undefined, () => config.components.grid.visible);
         this.chartComponents.push(verticalGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, chartPanComponent.mainCanvasTouchHandler, formatterFactory);
         this.chartComponents.push(this.hoverProducer);

package/dist/chart/components/chart/chart.model.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 { Subject, merge } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { CHART_UUID, CanvasElement, areBoundsChanged, } from '../../canvas/canvas-bounds-container';
 import { getDefaultConfig } from '../../chart.config';
 import { CandleSeriesModel } from '../../model/candle-series.model';
@@ -25,6 +25,7 @@ import { ChartInstrument } from './chart.component';
 import { fakeCandle } from './fake-candles';
 import { SecondaryChartColorsPool } from './secondary-chart-colors-pool';
 import { uuid } from '../../utils/uuid.utils';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 export class ChartModel extends ChartBaseElement {
     get mainCandleSeries() {
         return this.candleSeries[0];
@@ -101,6 +102,9 @@ export class ChartModel extends ChartBaseElement {
             .subscribe(bounds => {
             this.handleChartResize(bounds);
         }));
+        this.addRxSubscription(this.scale.changed
+            .pipe(debounceTime(ONE_FRAME_MS))
+            .subscribe(() => this.paneManager.yExtents.forEach(e => e.yAxis.updateOrderedLabels(true))));
     }
     /**
      * This method keeps the same candle width on chart canvas resize, so chart candles aren't squeezed when canvas becomes smaller

package/dist/chart/components/chart/price-formatters/__tests__/treasury-price.formatter.test.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 {};

package/dist/chart/components/chart/price-formatters/__tests__/treasury-price.formatter.test.js

@@ -0,0 +1,94 @@
+/*
+ * 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/.
+ */
+import { treasuryPriceFormatter, parseTreasuryPrice, isTreasuryPriceFormat, TREASURY_32ND } from '../treasury-price.formatter';
+describe('Treasury Price Formatter', () => {
+    describe('treasuryPriceFormatter', () => {
+        it('should format decimal prices to treasury format', () => {
+            expect(treasuryPriceFormatter(132.0)).toBe("132'00");
+            expect(treasuryPriceFormatter(132.0625)).toBe("132'02");
+            expect(treasuryPriceFormatter(132.3125)).toBe("132'10");
+            expect(treasuryPriceFormatter(132.5)).toBe("132'16");
+            expect(treasuryPriceFormatter(132.96875)).toBe("132'31");
+        });
+        it('should handle edge cases', () => {
+            expect(treasuryPriceFormatter(0)).toBe("0'00");
+            expect(treasuryPriceFormatter(0.03125)).toBe("0'01");
+            expect(treasuryPriceFormatter(1.0)).toBe("1'00");
+        });
+    });
+    describe('parseTreasuryPrice', () => {
+        it('should parse treasury format back to decimal', () => {
+            expect(parseTreasuryPrice("132'00")).toBe(132.0);
+            expect(parseTreasuryPrice("132'02")).toBe(132.0625);
+            expect(parseTreasuryPrice("132'10")).toBe(132.3125);
+            expect(parseTreasuryPrice("132'16")).toBe(132.5);
+            expect(parseTreasuryPrice("132'31")).toBe(132.96875);
+        });
+        it('should handle edge cases', () => {
+            expect(parseTreasuryPrice("0'00")).toBe(0);
+            expect(parseTreasuryPrice("0'01")).toBe(0.03125);
+            expect(parseTreasuryPrice("1'00")).toBe(1.0);
+        });
+        it('should return NaN for invalid formats', () => {
+            expect(parseTreasuryPrice("invalid")).toBe(NaN);
+            expect(parseTreasuryPrice("132'")).toBe(NaN);
+            expect(parseTreasuryPrice("'10")).toBe(NaN);
+            expect(parseTreasuryPrice("132'1")).toBe(NaN);
+            expect(parseTreasuryPrice("132'100")).toBe(NaN);
+            expect(parseTreasuryPrice("abc123")).toBe(NaN);
+        });
+    });
+    describe('isTreasuryPriceFormat', () => {
+        it('should identify valid treasury format strings', () => {
+            expect(isTreasuryPriceFormat("132'00")).toBe(true);
+            expect(isTreasuryPriceFormat("132'10")).toBe(true);
+            expect(isTreasuryPriceFormat("0'00")).toBe(true);
+            expect(isTreasuryPriceFormat("1'31")).toBe(true);
+        });
+        it('should reject invalid formats', () => {
+            expect(isTreasuryPriceFormat("invalid")).toBe(false);
+            expect(isTreasuryPriceFormat("132")).toBe(false);
+            expect(isTreasuryPriceFormat("132'")).toBe(false);
+            expect(isTreasuryPriceFormat("'10")).toBe(false);
+            expect(isTreasuryPriceFormat("132'1")).toBe(false);
+            expect(isTreasuryPriceFormat("132'100")).toBe(false);
+        });
+    });
+    describe('TREASURY_32ND constant', () => {
+        it('should equal 1/32', () => {
+            expect(TREASURY_32ND).toBe(1 / 32);
+            expect(TREASURY_32ND).toBe(0.03125);
+        });
+    });
+    describe('Round trip conversion', () => {
+        it('should maintain precision through format and parse cycle', () => {
+            const originalPrice = 234.3125;
+            const formatted = treasuryPriceFormatter(originalPrice);
+            const parsed = parseTreasuryPrice(formatted);
+            expect(parsed).toBe(originalPrice);
+        });
+        it('should work with various precision levels', () => {
+            const testCases = [
+                132.0, // 132'00
+                132.03125, // 132'01
+                132.0625, // 132'02
+                132.09375, // 132'03
+                132.125, // 132'04
+                132.15625, // 132'05
+                132.1875, // 132'06
+                132.21875, // 132'07
+                132.25, // 132'08
+                132.28125, // 132'09
+                132.3125, // 132'10
+            ];
+            testCases.forEach(price => {
+                const formatted = treasuryPriceFormatter(price);
+                const parsed = parseTreasuryPrice(formatted);
+                expect(parsed).toBe(price);
+            });
+        });
+    });
+});

package/dist/chart/components/chart/price-formatters/treasury-price.formatter.d.ts

@@ -15,3 +15,12 @@
 export declare const TREASURY_32ND: number;
 export declare const treasuryPriceFormatter: (value: number) => string;
 export declare const isTreasuryPriceFormat: (value: string) => boolean;
+/**
+ * Parses treasury price format back to decimal number
+ *
+ * Examples:
+ * 132'00 => 132.0
+ * 132'02 => 132.0625
+ * 132'10 => 132.3125
+ */
+export declare const parseTreasuryPrice: (value: string) => number;

package/dist/chart/components/chart/price-formatters/treasury-price.formatter.js

@@ -24,4 +24,25 @@ export const treasuryPriceFormatter = (value) => {
     const thirtySecondsFormatted = thirtySeconds.toString().padStart(2, '0');
     return `${integerValue}'${thirtySecondsFormatted}`;
 };
-export const isTreasuryPriceFormat = (value) => Boolean(value.match(/^\-?0*(\d+)'(\d{2})$/));
+const getTreasuryPriceMatch = (value) => value.match(/^\-?0*(\d+)'(\d{2})$/);
+export const isTreasuryPriceFormat = (value) => Boolean(getTreasuryPriceMatch(value));
+/**
+ * Parses treasury price format back to decimal number
+ *
+ * Examples:
+ * 132'00 => 132.0
+ * 132'02 => 132.0625
+ * 132'10 => 132.3125
+ */
+export const parseTreasuryPrice = (value) => {
+    const match = getTreasuryPriceMatch(value);
+    if (match) {
+        const integerPart = parseInt(match[1], 10);
+        const thirtySeconds = parseInt(match[2], 10);
+        // Convert 32nds to decimal
+        const decimalPart = (thirtySeconds * TREASURY_32ND);
+        return integerPart + decimalPart;
+    }
+    // Return Number(value) for non-treasury formats (this will be NaN for invalid strings)
+    return Number(value);
+};

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

@@ -15,7 +15,7 @@ export declare class GridComponent extends ChartBaseElement {
     private drawerName;
     private drawingManager;
     private readonly drawer;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], getBaseline?: () => Unit, drawPredicate?: () => boolean);
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], extentIdx?: number, getBaseline?: () => Unit, drawPredicate?: () => boolean);
     /**
      * This method is used to deactivate the drawer and remove it from the drawing manager.
      * @protected

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

@@ -6,11 +6,11 @@
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { GridDrawer } from './grid.drawer';
 export class GridComponent extends ChartBaseElement {
-    constructor(canvasModel, viewportModel, config, yAxisState, drawerName, drawingManager, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, getBaseline, drawPredicate) {
+    constructor(canvasModel, viewportModel, config, yAxisState, drawerName, drawingManager, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, extentIdx, getBaseline, drawPredicate) {
         super();
         this.drawerName = drawerName;
         this.drawingManager = drawingManager;
-        this.drawer = new GridDrawer(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate, getBaseline);
+        this.drawer = new GridDrawer(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate, extentIdx, getBaseline);
     }
     /**
      * This method is used to deactivate the drawer and remove it from the drawing manager.

package/dist/chart/components/grid/grid.drawer.d.ts

@@ -26,8 +26,9 @@ export declare class GridDrawer implements Drawer {
     private xLabelsProvider;
     private yLabelsProvider;
     private drawPredicate;
+    private extentIdx?;
     private getBaseline?;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, getBaseline?: (() => Unit) | undefined);
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, extentIdx?: number | undefined, getBaseline?: (() => Unit) | undefined);
     /**
      * Draws the chart on the canvas if the drawPredicate is true.
      * @returns {void}

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

@@ -11,7 +11,7 @@ import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
  * Draws grid lines on chart.
  */
 export class GridDrawer {
-    constructor(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate = () => true, getBaseline) {
+    constructor(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate = () => true, extentIdx, getBaseline) {
         this.canvasModel = canvasModel;
         this.viewportModel = viewportModel;
         this.config = config;
@@ -21,6 +21,7 @@ export class GridDrawer {
         this.xLabelsProvider = xLabelsProvider;
         this.yLabelsProvider = yLabelsProvider;
         this.drawPredicate = drawPredicate;
+        this.extentIdx = extentIdx;
         this.getBaseline = getBaseline;
     }
     /**
@@ -41,7 +42,8 @@ export class GridDrawer {
      */
     drawZeroLine(ctx) {
         const yAxisLabels = this.yLabelsProvider();
-        if (this.getBaseline &&
+        if (this.extentIdx === 0 &&
+            this.getBaseline &&
             this.yAxisState.type === 'percent' &&
             this.yAxisState.zeroPercentLine &&
             yAxisLabels.length) {

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

@@ -94,9 +94,9 @@ export class PaneComponent extends ChartBaseElement {
      * @param {() => Unit} yAxisBaselineGetter
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
-    createGridComponent(uuid, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
+    createGridComponent(uuid, extentIdx, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
         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), () => [], yAxisLabelsGetter, yAxisBaselineGetter, () => this.config.components.grid.visible);
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_${extentIdx}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], yAxisLabelsGetter, extentIdx, yAxisBaselineGetter, () => this.config.components.grid.visible);
         return gridComponent;
     }
     /**
@@ -132,7 +132,7 @@ export class PaneComponent extends ChartBaseElement {
         const [unsub, dragNDrop] = this.createYPanHandler(this.uuid, scaleModel);
         // creating partially resolved constructor except formatter & dataSeriesProvider - bcs it's not possible to provide formatter
         // before y-extent is created
-        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel, this.chartResizeHandler, initialYAxisState);
+        const createYAxisComponent = (formatter, dataSeriesProvider) => new YAxisComponent(this.eventBus, this.config, this.mainCanvasModel, this.yAxisLabelsCanvasModel, scaleModel, this.canvasInputListener, this.canvasBoundsContainer, this.chartPanComponent, this.cursorHandler, formatter, dataSeriesProvider, this.uuid, extentIdx, this.hitTestCanvasModel, this.chartResizeHandler, initialYAxisState);
         const yExtentComponent = new YExtentComponent(this.config.components.yAxis, this.uuid, extentIdx, this, this.chartBaseModel, this.canvasBoundsContainer, this.hitTestController, this.dynamicObjectsCanvasModel, scaleModel, createYAxisComponent, dragNDrop);
         yExtentComponent.addSubscription(unsub);
         yExtentComponent.addSubscription(this.addCursors(extentIdx, yExtentComponent.yAxis));
@@ -143,7 +143,7 @@ export class PaneComponent extends ChartBaseElement {
         if (useDefaultHighLow) {
             scaleModel.autoScaleModel.setHighLowProvider('default', createCandlesOffsetProvider(() => ({ top: 10, bottom: 10, left: 0, right: 0, visible: true }), createDefaultYExtentHighLowProvider(yExtentComponent)));
         }
-        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.state, () => yExtentComponent.yAxis.model.baseLabelsModel.labels, () => yExtentComponent.toY(yExtentComponent.getBaseline()));
+        const gridComponent = this.createGridComponent(this.uuid, yExtentComponent.idx, scaleModel, yExtentComponent.yAxis.state, () => yExtentComponent.yAxis.model.baseLabelsModel.labels, () => yExtentComponent.toY(yExtentComponent.getBaseline()));
         yExtentComponent.addChildEntity(gridComponent);
         yExtentComponent.activate();
         this.yExtentComponents.push(yExtentComponent);

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

@@ -55,7 +55,9 @@ export class YAxisBaseLabelsModel extends ChartBaseElement {
      * Then, it calls the updateYAxisWidth method to update the width of the y-axis.
      */
     updateLabels() {
-        this.labels = this.labelsGenerator.generateNumericLabels();
-        animationFrameThrottledPrior(this.animFrameId, () => this.canvasBoundsContainer.updateYAxisWidths());
+        animationFrameThrottledPrior(this.animFrameId, () => {
+            this.labels = this.labelsGenerator.generateNumericLabels();
+            this.canvasBoundsContainer.updateYAxisWidths();
+        });
     }
 }

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

@@ -30,6 +30,7 @@ export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChar
 export declare class YAxisComponent extends ChartBaseElement {
     private eventBus;
     private config;
+    private mainCanvasModel;
     private canvasModel;
     scale: ScaleModel;
     private canvasInputListeners;
@@ -47,7 +48,7 @@ export declare class YAxisComponent extends ChartBaseElement {
     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);
+    constructor(eventBus: EventBus, config: FullChartConfig, mainCanvasModel: CanvasModel, 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;
     /**
      * Registers default label color resolvers for different chart types.

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

@@ -17,10 +17,11 @@ import { cloneUnsafe } from '../../utils/object.utils';
  * Y axis component. Contains all Y axis related logic.
  */
 export class YAxisComponent extends ChartBaseElement {
-    constructor(eventBus, config, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, chartResizeHandler, initialState) {
+    constructor(eventBus, config, mainCanvasModel, canvasModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent, cursors, valueFormatter, dataSeriesProvider, paneUUID, extentIdx, hitTestCanvasModel, chartResizeHandler, initialState) {
         super();
         this.eventBus = eventBus;
         this.config = config;
+        this.mainCanvasModel = mainCanvasModel;
         this.canvasModel = canvasModel;
         this.scale = scale;
         this.canvasInputListeners = canvasInputListeners;
@@ -197,6 +198,7 @@ export class YAxisComponent extends ChartBaseElement {
             this.scale.autoScale(true);
             this.model.fancyLabelsModel.updateLabels(true);
             this.updateCursor();
+            this.mainCanvasModel.fireDraw();
         }
     }
     /**