@devexperts/dxcharts-lite 2.0.0 → 2.0.1

package/dist/chart/bootstrap.js

@@ -8,7 +8,7 @@ import { CanvasAnimation } from './animation/canvas-animation';
 import { CHART_UUID, CanvasBoundsContainer, CanvasElement } from './canvas/canvas-bounds-container';
 import { CursorHandler } from './canvas/cursor.handler';
 import { createDefaultLayoutTemplate, extractElements } from './canvas/layout-creator';
-import { mergeWithDefaultConfig } from './chart.config';
+import { mergeWithDefaultConfig, } from './chart.config';
 import { ChartBaseModel } from './components/chart/chart-base.model';
 import { ChartComponent } from './components/chart/chart.component';
 import { ChartModel } from './components/chart/chart.model';
@@ -170,7 +170,7 @@ export default class ChartBootstrap {
         this.initYAxisDrawer(yAxisLabelsCanvasModel);
         this.yAxisComponent = mainPane.mainExtent.yAxis;
         // default labels provider
-        const lastCandleLabelsProvider = new LastCandleLabelsProvider(this.chartModel, this.config, this.chartModel.lastCandleLabelsByChartType, this.yAxisComponent.getLabelsColorResolver.bind(this.yAxisComponent));
+        const lastCandleLabelsProvider = new LastCandleLabelsProvider(this.chartModel, this.config, mainPane.mainExtent.yAxis.state, this.chartModel.lastCandleLabelsByChartType, this.yAxisComponent.getLabelsColorResolver.bind(this.yAxisComponent));
         this.yAxisComponent.registerYAxisLabelsProvider(lastCandleLabelsProvider, LabelsGroups.MAIN);
         this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
         this.chartComponents.push(this.volumesComponent);

package/dist/chart/components/pane/pane-hit-test.controller.d.ts

@@ -8,10 +8,10 @@ import { DataSeriesModel, DataSeriesPoint, VisualSeriesPoint } from '../../model
 import { HitTestSubscriber } from '../../model/hit-test-canvas.model';
 import { PaneComponent } from './pane.component';
 export declare class PaneHitTestController implements HitTestSubscriber<DataSeriesModel> {
-    private readonly paneComponents;
+    private readonly panes;
     private canvasModel;
     private dataSeriesIdCounter;
-    constructor(paneComponents: Record<string, PaneComponent>, canvasModel: CanvasModel);
+    constructor(panes: Record<string, PaneComponent>, canvasModel: CanvasModel);
     getNewDataSeriesHitTestId: () => number;
     /**
      * Returns an array with two numbers representing the range of IDs for data series.

package/dist/chart/components/pane/pane-hit-test.controller.js

@@ -6,8 +6,8 @@
 import { HIT_TEST_ID_RANGE } from '../../model/hit-test-canvas.model';
 import { flatMap } from '../../utils/array.utils';
 export class PaneHitTestController {
-    constructor(paneComponents, canvasModel) {
-        this.paneComponents = paneComponents;
+    constructor(panes, canvasModel) {
+        this.panes = panes;
         this.canvasModel = canvasModel;
         // used in hit test for creating series
         this.dataSeriesIdCounter = HIT_TEST_ID_RANGE.DATA_SERIES[0];
@@ -23,7 +23,7 @@ export class PaneHitTestController {
         return HIT_TEST_ID_RANGE.DATA_SERIES;
     }
     get allDataSeries() {
-        return flatMap(flatMap(Object.values(this.paneComponents), c => c.yExtentComponents), p => Array.from(p.dataSeries));
+        return flatMap(flatMap(Object.values(this.panes), c => c.yExtentComponents), p => Array.from(p.dataSeries));
     }
     /**
      * Looks up a data series by its ID.
@@ -51,10 +51,10 @@ export class PaneHitTestController {
         this.handleYExtentDragEnd();
     }
     handleYExtentDragStart(model) {
-        Object.values(this.paneComponents).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.deactivate()));
+        Object.values(this.panes).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.deactivate()));
         model.extentComponent.dragNDrop.activate();
     }
     handleYExtentDragEnd() {
-        Object.values(this.paneComponents).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.activate()));
+        Object.values(this.panes).forEach(p => p.yExtentComponents.forEach(y => y.dragNDrop.activate()));
     }
 }

package/dist/chart/components/pane/pane-manager.component.d.ts

@@ -39,7 +39,8 @@ export declare class PaneManager extends ChartBaseElement {
     private mainCanvasModel;
     private yAxisLabelsCanvasModel;
     panes: Record<string, PaneComponent>;
-    panesChangedSubject: Subject<Record<string, PaneComponent>>;
+    paneRemovedSubject: Subject<PaneComponent>;
+    paneAddedSubject: Subject<Record<string, PaneComponent>>;
     hitTestController: PaneHitTestController;
     dataSeriesAddedSubject: Subject<DataSeriesModel>;
     dataSeriesRemovedSubject: Subject<DataSeriesModel>;

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

@@ -38,7 +38,8 @@ export class PaneManager extends ChartBaseElement {
         this.mainCanvasModel = mainCanvasModel;
         this.yAxisLabelsCanvasModel = yAxisLabelsCanvasModel;
         this.panes = {};
-        this.panesChangedSubject = new Subject();
+        this.paneRemovedSubject = new Subject();
+        this.paneAddedSubject = new Subject();
         this.dataSeriesAddedSubject = new Subject();
         this.dataSeriesRemovedSubject = new Subject();
         this.hitTestController = new PaneHitTestController(this.panes, this.dynamicObjectsCanvasModel);
@@ -104,7 +105,7 @@ export class PaneManager extends ChartBaseElement {
         paneComponent.activate();
         this.recalculateState();
         paneComponent.mainExtent.scale.autoScale(true);
-        this.panesChangedSubject.next(this.panes);
+        this.paneAddedSubject.next(this.panes);
         return paneComponent;
     }
     /**
@@ -114,11 +115,11 @@ export class PaneManager extends ChartBaseElement {
     removePane(uuid) {
         const pane = this.panes[uuid];
         if (pane !== undefined) {
+            this.paneRemovedSubject.next(pane);
             pane.disable();
             pane.yExtentComponents.forEach(yExtentComponent => yExtentComponent.disable());
             delete this.panes[uuid];
             this.recalculateState();
-            this.panesChangedSubject.next(this.panes);
         }
     }
     /**

package/dist/chart/components/watermark/water-mark.component.js

@@ -18,7 +18,7 @@ export class WaterMarkComponent extends ChartBaseElement {
         this.waterMarkConfig = this.config.components.waterMark;
         this.waterMarkData = this.getWaterMarkData();
         this.waterMarkDrawer = new WaterMarkDrawer(this.config, canvasBoundsContainer, canvasModel, () => this.waterMarkConfig, () => this.waterMarkData);
-        this.addRxSubscription(merge(canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(CHART_UUID)), this.paneManager.panesChangedSubject).subscribe((bounds) => {
+        this.addRxSubscription(merge(canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(CHART_UUID)), this.paneManager.paneAddedSubject).subscribe((bounds) => {
             this.waterMarkConfig = this.recalculateTextSize(bounds.width, bounds.height);
         }));
         this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.d.ts

@@ -3,17 +3,18 @@
  * 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 { FullChartConfig } from '../../../chart.config';
+import { FullChartConfig, YAxisConfig } from '../../../chart.config';
 import { DataSeriesType } from '../../../model/data-series.config';
 import { ChartModel, LastCandleLabelHandler } from '../../chart/chart.model';
 import { LabelGroup, YAxisLabelsProvider } from './y-axis-labels.model';
 import { LabelColorResolver } from '../y-axis.component';
 export declare class LastCandleLabelsProvider implements YAxisLabelsProvider {
     private chartModel;
-    private config;
+    private fullConfig;
+    private yAxisConfig;
     private lastCandleLabelsByChartType;
     private resolveLabelColorFn;
-    constructor(chartModel: ChartModel, config: FullChartConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
+    constructor(chartModel: ChartModel, fullConfig: FullChartConfig, yAxisConfig: YAxisConfig, lastCandleLabelsByChartType: Partial<Record<DataSeriesType, LastCandleLabelHandler>>, resolveLabelColorFn: (chartType: DataSeriesType) => LabelColorResolver);
     /**
      * Returns an array of LabelGroup objects that contain the labels for the yAxis of the chart.
      * @returns {LabelGroup[]} An array of LabelGroup objects that contain the labels for the yAxis of the chart.

package/dist/chart/components/y_axis/price_labels/last-candle-labels.provider.js

@@ -7,9 +7,10 @@ import { getPrimaryLabelTextColor } from '../label-color.functions';
 import { lastOf } from '../../../utils/array.utils';
 import { getLabelTextColorByBackgroundColor } from '../../../utils/canvas/canvas-text-functions.utils';
 export class LastCandleLabelsProvider {
-    constructor(chartModel, config, lastCandleLabelsByChartType, resolveLabelColorFn) {
+    constructor(chartModel, fullConfig, yAxisConfig, lastCandleLabelsByChartType, resolveLabelColorFn) {
         this.chartModel = chartModel;
-        this.config = config;
+        this.fullConfig = fullConfig;
+        this.yAxisConfig = yAxisConfig;
         this.lastCandleLabelsByChartType = lastCandleLabelsByChartType;
         this.resolveLabelColorFn = resolveLabelColorFn;
     }
@@ -19,7 +20,7 @@ export class LastCandleLabelsProvider {
      */
     getUnorderedLabels() {
         const collectedLabels = [];
-        const visible = this.config.components.yAxis.labels.settings.lastPrice.mode !== 'none';
+        const visible = this.yAxisConfig.labels.settings.lastPrice.mode !== 'none';
         if (visible) {
             // main candle series
             const yAxisVisualLabel = this.getYAxisVisualLabel(this.chartModel.mainCandleSeries);
@@ -27,7 +28,7 @@ export class LastCandleLabelsProvider {
                 ? Object.assign(Object.assign({}, yAxisVisualLabel), this.getLabelDrawConfig(this.chartModel.mainCandleSeries, true)) : yAxisVisualLabel;
             if (mainCandleSeriesVisualLabel) {
                 const mainCandleSeriesLabels = { labels: [mainCandleSeriesVisualLabel] };
-                const handler = this.lastCandleLabelsByChartType[this.config.components.chart.type];
+                const handler = this.lastCandleLabelsByChartType[this.fullConfig.components.chart.type];
                 handler === null || handler === void 0 ? void 0 : handler(mainCandleSeriesLabels, this.chartModel.mainCandleSeries);
                 collectedLabels.push(mainCandleSeriesLabels);
             }
@@ -61,8 +62,8 @@ export class LastCandleLabelsProvider {
         if (lastCandle) {
             const y = series.view.toY(lastCandle.close);
             if (isFinite(y)) {
-                const mode = this.config.components.yAxis.labels.settings.lastPrice.mode;
-                const appearanceType = this.config.components.yAxis.labels.settings.lastPrice.type;
+                const mode = this.yAxisConfig.labels.settings.lastPrice.mode;
+                const appearanceType = this.yAxisConfig.labels.settings.lastPrice.type;
                 return {
                     y,
                     labelWeight: 0,

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

@@ -17,6 +17,7 @@ export declare class YAxisModel extends ChartBaseElement {
     private paneUUID;
     private state;
     private canvasBoundsContainer;
+    private extentIdx;
     labelsGenerator: NumericYAxisLabelsGenerator;
     baseLabelsModel: YAxisBaseLabelsModel;
     fancyLabelsModel: FancyYAxisLabelsModel;

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

@@ -13,6 +13,7 @@ export class YAxisModel extends ChartBaseElement {
         this.paneUUID = paneUUID;
         this.state = state;
         this.canvasBoundsContainer = canvasBoundsContainer;
+        this.extentIdx = extentIdx;
         this.labelsGenerator = new NumericYAxisLabelsGenerator(null, dataSeriesProvider, scale, valueFormatter, () => this.state.type, state.labelHeight);
         this.baseLabelsModel = new YAxisBaseLabelsModel(scale, this.labelsGenerator, this.canvasBoundsContainer, paneUUID, extentIdx);
         this.addChildEntity(this.baseLabelsModel);
@@ -28,7 +29,7 @@ export class YAxisModel extends ChartBaseElement {
                     .concat(this.fancyLabelsModel.orderedLabels.flatMap(l => l.labels).map(l => l.labelText))
                     .reduce((maxLengthText, label) => (label.length > maxLengthText.length ? label : maxLengthText), '');
             },
-            getYAxisIndex: () => 0,
+            getYAxisIndex: () => this.extentIdx,
             getYAxisState: () => this.state,
             getPaneUUID: () => this.paneUUID,
         };

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

@@ -50,7 +50,7 @@ export declare class ScaleModel extends ViewportModel {
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
-     * The "constrait" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
+     * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
      * @param constraint
      */
     addXConstraint(constraint: Constraints): void;

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

@@ -53,7 +53,7 @@ export class ScaleModel extends ViewportModel {
     }
     /**
      * The method adds a new "constraint" to the existing list of x-axis constraints for charting.
-     * The "constrait" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
+     * The "constraint" is expected to be an object containing information about the constraints, such as the minimum and maximum values for the x-axis.
      * @param constraint
      */
     addXConstraint(constraint) {
@@ -112,7 +112,7 @@ export class ScaleModel extends ViewportModel {
             lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
-            this.autoScaleModel.setAutoAndRecalculateState(constrainedState, true);
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
         if (forceNoAnimation) {
             this.apply(constrainedState);
@@ -133,14 +133,14 @@ export class ScaleModel extends ViewportModel {
         const initialState = this.export();
         super.setXScale(xStart, xEnd, false);
         const state = this.export();
-        const constraitedState = this.scalePostProcessor(initialState, state);
+        const constrainedState = this.scalePostProcessor(initialState, state);
         if (this.state.lockPriceToBarRatio) {
-            lockedYEndViewportCalculator(constraitedState, this.zoomXYRatio);
+            lockedYEndViewportCalculator(constrainedState, this.zoomXYRatio);
         }
         if (this.state.auto) {
-            this.autoScaleModel.setAutoAndRecalculateState(constraitedState, true);
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        this.apply(constraitedState);
+        this.apply(constrainedState);
     }
     /**
      * Moves both xStart and xEnd without changing the viewport width (zoom).
@@ -153,12 +153,12 @@ export class ScaleModel extends ViewportModel {
         // always stop the animations
         this.haltAnimation();
         moveXStart(state, xStart);
-        // there we need only candles constrait
-        const constraitedState = this.scalePostProcessor(initialStateCopy, state);
+        // there we need only candles constraint
+        const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         if (this.state.auto) {
-            this.autoScaleModel.setAutoAndRecalculateState(constraitedState, true);
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
-        this.apply(constraitedState);
+        this.apply(constrainedState);
     }
     /**
      * Moves both yStart and yEnd without changing the viewport height (zoom).
@@ -184,7 +184,7 @@ export class ScaleModel extends ViewportModel {
         // dont auto-scale if animation, otherwise - forced or config
         if ((!this.isViewportAnimationInProgress() && this.state.auto) || forceApply) {
             const state = this.export();
-            this.autoScaleModel.setAutoAndRecalculateState(state, true);
+            this.autoScaleModel.doAutoYScale(state);
             if (!compareStates(state, this.export())) {
                 this.apply(state);
             }

package/dist/chart/model/scaling/auto-scale.model.d.ts

@@ -29,9 +29,8 @@ type HighLowPostProcessor = (highLow: HighLow) => HighLow;
  */
 export declare class AutoScaleViewportSubModel {
     private delegate;
-    auto: boolean;
     highLowProviders: Record<string, HighLowProvider>;
-    highLowPostPorcessor: Record<string, HighLowPostProcessor>;
+    highLowPostProcessor: Record<string, HighLowPostProcessor>;
     constructor(delegate: ViewportModel, highLowProviders?: Record<string, HighLowProvider>);
     /**
      * Sets a HighLowProvider for a given name.
@@ -55,10 +54,9 @@ export declare class AutoScaleViewportSubModel {
     /**
      * Sets the auto and recalculates the state of the viewport model.
      * @param {ViewportModelState} state - The state of the viewport model.
-     * @param {boolean} auto - The auto value to set.
      * @returns {void}
      */
-    setAutoAndRecalculateState(state: ViewportModelState, auto: boolean): void;
+    doAutoYScale(state: ViewportModelState): void;
 }
 /**
  * Y auto-scale viewport transformer. Calculates highLow for all chart visuals and recalculates the Y scale.

package/dist/chart/model/scaling/auto-scale.model.js

@@ -11,10 +11,8 @@
 export class AutoScaleViewportSubModel {
     constructor(delegate, highLowProviders) {
         this.delegate = delegate;
-        // local state, used for pane X dragging
-        this.auto = true;
         // post processors can apply some changes to high low before applying it
-        this.highLowPostPorcessor = {};
+        this.highLowPostProcessor = {};
         this.highLowProviders = highLowProviders !== null && highLowProviders !== void 0 ? highLowProviders : {};
     }
     /**
@@ -40,19 +38,15 @@ export class AutoScaleViewportSubModel {
      * @returns {void}
      */
     setHighLowPostProcessor(name, processor) {
-        this.highLowPostPorcessor[name] = processor;
+        this.highLowPostProcessor[name] = processor;
     }
     /**
      * Sets the auto and recalculates the state of the viewport model.
      * @param {ViewportModelState} state - The state of the viewport model.
-     * @param {boolean} auto - The auto value to set.
      * @returns {void}
      */
-    setAutoAndRecalculateState(state, auto) {
-        this.auto = auto;
-        if (auto) {
-            autoScaleYViewportTransformer(this.delegate, state, Object.values(this.highLowProviders), Object.values(this.highLowPostPorcessor));
-        }
+    doAutoYScale(state) {
+        autoScaleYViewportTransformer(this.delegate, state, Object.values(this.highLowProviders), Object.values(this.highLowPostProcessor));
     }
 }
 /**