@devexperts/dxcharts-lite 2.7.13 → 2.7.15

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/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.
@@ -88,10 +89,17 @@ export declare class YAxisComponent extends ChartBaseElement {
     /**
      * An easier way to manage custom y-axis labels, than y-axis labels providers.
      * However, overlapping avoidance is not supported
+     * deprecated because of naming, use updateCustomYAxisLabel instead
      * @param name
      * @param label
      */
     addSimpleYAxisLabel(name: string, label: VisualYAxisLabel): void;
+    /**
+     * Update custom y-axis label
+     * @param name
+     * @param label
+     */
+    updateCustomYAxisLabel(name: string, label: VisualYAxisLabel): void;
     /**
      * @param name
      */

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;
@@ -138,6 +139,7 @@ export class YAxisComponent extends ChartBaseElement {
     /**
      * An easier way to manage custom y-axis labels, than y-axis labels providers.
      * However, overlapping avoidance is not supported
+     * deprecated because of naming, use updateCustomYAxisLabel instead
      * @param name
      * @param label
      */
@@ -145,6 +147,15 @@ export class YAxisComponent extends ChartBaseElement {
         this.model.fancyLabelsModel.customLabels[name] = label;
         this.canvasModel.fireDraw();
     }
+    /**
+     * Update custom y-axis label
+     * @param name
+     * @param label
+     */
+    updateCustomYAxisLabel(name, label) {
+        this.model.fancyLabelsModel.customLabels[name] = label;
+        this.canvasModel.fireDraw();
+    }
     /**
      * @param name
      */
@@ -187,6 +198,7 @@ export class YAxisComponent extends ChartBaseElement {
             this.scale.autoScale(true);
             this.model.fancyLabelsModel.updateLabels(true);
             this.updateCursor();
+            this.mainCanvasModel.fireDraw();
         }
     }
     /**