@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/model/canvas.model.js

@@ -1,6 +1,233 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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 MIN_SUPPORTED_CANVAS_SIZE={width:20,height:20};export class CanvasModel{constructor(t,e,i,n,r,a={}){var s;this.eventBus=t,this.canvas=e,this.drawingManager=i,this.resizer=r,this.width=0,this.height=0,this.prevHeight=0,this.prevWidth=0,this.type=l,n.push(this),this.parent=p(e);const d=e.getContext("2d",a);if(d===null)throw new Error("Couldn't get 2d context????");this.context=d,this._canvasId=(s=e.getAttribute("data-element"))!==null&&s!==void 0?s:"",this.updateCanvasWidthHeight(e,this.getChartResizerElement().getBoundingClientRect())}updateDPR(t){const{width:e,height:i}=t,n=window.devicePixelRatio;this.canvas.style.height=i+"px",this.canvas.style.width=e+"px",this.canvas.width=e*n,this.canvas.height=i*n,this.width=e,this.height=i,this.ctx.scale(n,n)}get canvasId(){return this._canvasId}get ctx(){return this.context}clear(){this.context.clearRect(0,0,this.width,this.height)}isLinked(){var t,e;return(e=(t=this.type)===null||t===void 0?void 0:t.linked)!==null&&e!==void 0?e:!1}fireDraw(){this.eventBus.fireDraw([this.canvasId])}updateCanvasWidthHeight(t,e=this.getChartResizerElement().getBoundingClientRect()){t.clientWidth!==this.width&&(t.width=t.clientWidth,this.width=t.clientWidth);const i=e.height;i!==this.height&&(t.style.height=i+"px",this.height=i,t.height=i,this.prevHeight=i)}getChartResizerElement(){var t;return(t=this.resizer)!==null&&t!==void 0?t:this.parent}isReady(){return this.width>MIN_SUPPORTED_CANVAS_SIZE.width&&this.height>MIN_SUPPORTED_CANVAS_SIZE.height}}const l={name:"candle"},o={name:"candle"},c={name:"line",linked:!0},g={name:"area",linked:!0},u={candle:l,bar:o,line:c,area:g};export function createMainCanvasModel(h,t,e,i,n,r,a){var s;const d=createCanvasModel(h,t,n,r,a,e);return d.type=(s=u[i])!==null&&s!==void 0?s:l,d}export function createCanvasModel(h,t,e,i,n,r,a){const s=new CanvasModel(h,t,i,n,r,a);return initCanvasWithConfig(s,e),s}export function initCanvasWithConfig(h,t){const e=h.canvas;t.fixedSize&&(e.width=t.fixedSize.width,e.height=t.fixedSize.height,e.style.width=t.fixedSize.width+"px",e.style.height=t.fixedSize.height+"px",h.width=t.fixedSize.width,h.height=t.fixedSize.height),e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.direction="ltr"}function p(h){let t=h;for(;t;){if(t.nodeType===1&&t.hasAttribute("data-chart-container"))return t;if(t.parentElement!==null)t=t.parentElement;else break}return t}
+/**
+ * The minimum supported canvas size in chart-core (in pixels).
+ * Any size of <canvas> element below these dimensions will not be rendered (is NOT INTENDED to be rendered).
+ * @doc-tags chart-core,canvas
+ */
+export const MIN_SUPPORTED_CANVAS_SIZE = {
+    width: 20,
+    height: 20,
+};
+export class CanvasModel {
+    constructor(eventBus, canvas, drawingManager, canvasModels, resizer, options = {}) {
+        var _a;
+        this.eventBus = eventBus;
+        this.canvas = canvas;
+        this.drawingManager = drawingManager;
+        this.resizer = resizer;
+        this.width = 0;
+        this.height = 0;
+        this.prevHeight = 0;
+        this.prevWidth = 0;
+        this.type = CANDLE_TYPE;
+        canvasModels.push(this);
+        this.parent = findHeightParent(canvas);
+        const ctx = canvas.getContext('2d', options);
+        if (ctx === null) {
+            throw new Error("Couldn't get 2d context????");
+        }
+        this.context = ctx;
+        this._canvasId = (_a = canvas.getAttribute('data-element')) !== null && _a !== void 0 ? _a : '';
+        this.updateCanvasWidthHeight(canvas, this.getChartResizerElement().getBoundingClientRect());
+    }
+    /**
+     * About rendering for non-integer dpi
+     * https://stackoverflow.com/questions/17553557/draw-crisp-lines-on-html5-canvas-with-browser-zoom
+     * @param bcr
+     */
+    updateDPR(bcr) {
+        const { width, height } = bcr;
+        const dpi = window.devicePixelRatio;
+        this.canvas.style.height = height + 'px';
+        this.canvas.style.width = width + 'px';
+        this.canvas.width = width * dpi;
+        this.canvas.height = height * dpi;
+        this.width = width;
+        this.height = height;
+        this.ctx.scale(dpi, dpi);
+    }
+    get canvasId() {
+        return this._canvasId;
+    }
+    get ctx() {
+        return this.context;
+    }
+    /**
+     * Clears the canvas by using the clearRect method of the canvas context.
+     * @function
+     * @name clear
+     * @memberof Canvas
+     * @returns {void}
+     */
+    clear() {
+        this.context.clearRect(0, 0, this.width, this.height);
+    }
+    /**
+     * Checks if the type is linked.
+     *
+     * @returns {boolean} Returns true if the type is linked, false otherwise.
+     */
+    isLinked() {
+        var _a, _b;
+        return (_b = (_a = this.type) === null || _a === void 0 ? void 0 : _a.linked) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Triggers the 'fireDraw' event on the event bus with the canvas ID as the parameter.
+     */
+    fireDraw() {
+        this.eventBus.fireDraw([this.canvasId]);
+    }
+    /**
+     * Updates the width and height of the canvas element based on the client width and height of the canvas element and the height of the chart resizer element.
+     * @param {HTMLCanvasElement} canvas - The canvas element to update.
+     * @param {ClientRect | DOMRect} [bcr=this.getChartResizerElement().getBoundingClientRect()] - The bounding client rectangle of the chart resizer element.
+     * @returns {void}
+     */
+    updateCanvasWidthHeight(canvas, bcr = this.getChartResizerElement().getBoundingClientRect()) {
+        if (canvas.clientWidth !== this.width) {
+            canvas.width = canvas.clientWidth;
+            this.width = canvas.clientWidth;
+        }
+        const height = bcr.height;
+        if (height !== this.height) {
+            canvas.style.height = height + 'px';
+            this.height = height;
+            canvas.height = height;
+            this.prevHeight = height;
+        }
+    }
+    /**
+     * Returns the chart resizer element. If the resizer is not defined, it returns the parent element.
+     *
+     * @returns {HTMLElement} The chart resizer element.
+     */
+    getChartResizerElement() {
+        var _a;
+        return (_a = this.resizer) !== null && _a !== void 0 ? _a : this.parent;
+    }
+    /**
+     * Checks if the canvas is ready to be used by verifying if its width and height are greater than the minimum supported canvas size.
+     *
+     * @returns {boolean} - Returns true if the canvas is ready to be used, false otherwise.
+     */
+    isReady() {
+        return this.width > MIN_SUPPORTED_CANVAS_SIZE.width && this.height > MIN_SUPPORTED_CANVAS_SIZE.height;
+    }
+}
+const CANDLE_TYPE = {
+    name: 'candle',
+};
+const BAR_TYPE = {
+    name: 'candle',
+};
+const LINE_TYPE = {
+    name: 'line',
+    linked: true,
+};
+const AREA_TYPE = {
+    name: 'area',
+    linked: true,
+};
+const TYPES = {
+    candle: CANDLE_TYPE,
+    bar: BAR_TYPE,
+    line: LINE_TYPE,
+    area: AREA_TYPE,
+};
+/**
+ * Creates a new canvas model for the main chart canvas.
+ *
+ * @param {EventBus} eventBus - The event bus used to communicate between components.
+ * @param {HTMLCanvasElement} canvas - The canvas element to create the model for.
+ * @param {HTMLElement} resizer - The element used to resize the canvas.
+ * @param {BarType} barType - The type of bar to use for the chart.
+ * @param {FullChartConfig} config - The configuration object for the chart.
+ * @param {DrawingManager} drawingManager - The drawing manager used to draw on the canvas.
+ * @param {CanvasModel[]} canvasModels - An array of canvas models to add the new model to.
+ *
+ * @returns {CanvasModel} The newly created canvas model.
+ 
+export function createMainCanvasModel(
+    eventBus,
+    canvas,
+    resizer,
+    barType,
+    config,
+    drawingManager,
+    canvasModels,
+) {
+    const canvasModel = createCanvasModel(eventBus, canvas, config, drawingManager, canvasModels, resizer);
+    // @ts-ignore
+    canvasModel.type = TYPES[barType] ?? CANDLE_TYPE;
+    return canvasModel;
+}*/
+export function createMainCanvasModel(eventBus, canvas, resizer, barType, config, drawingManager, canvasModels) {
+    var _a;
+    const canvasModel = createCanvasModel(eventBus, canvas, config, drawingManager, canvasModels, resizer);
+    // @ts-ignore
+    canvasModel.type = (_a = TYPES[barType]) !== null && _a !== void 0 ? _a : CANDLE_TYPE;
+    return canvasModel;
+}
+/**
+ * Creates a new CanvasModel instance.
+ *
+ * @param {EventBus} eventBus - The event bus to use.
+ * @param {HTMLCanvasElement} canvas - The canvas element to use.
+ * @param {FullChartConfig} config - The configuration object for the chart.
+ * @param {DrawingManager} drawingManager - The drawing manager to use.
+ * @param {CanvasModel[]} canvasModels - An array of existing canvas models.
+ * @param {HTMLElement} [resizer] - The element to use for resizing the canvas.
+ *
+ * @returns {CanvasModel} A new instance of the CanvasModel class.
+ */
+export function createCanvasModel(eventBus, canvas, config, drawingManager, canvasModels, resizer, options) {
+    const canvasModel = new CanvasModel(eventBus, canvas, drawingManager, canvasModels, resizer, options);
+    initCanvasWithConfig(canvasModel, config);
+    return canvasModel;
+}
+/**
+ * Initializes a canvas with a given configuration.
+ * @param {CanvasModel} canvasModel - The canvas model to be initialized.
+ * @param {FullChartConfig} config - The configuration object for the canvas.
+ * @returns {void}
+ 
+*/
+export function initCanvasWithConfig(canvasModel, config) {
+    const canvas = canvasModel.canvas;
+    if (config.fixedSize) {
+        canvas.width = config.fixedSize.width;
+        canvas.height = config.fixedSize.height;
+        canvas.style.width = config.fixedSize.width + 'px';
+        canvas.style.height = config.fixedSize.height + 'px';
+        canvasModel.width = config.fixedSize.width;
+        canvasModel.height = config.fixedSize.height;
+    }
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+    canvas.style.direction = 'ltr';
+}
+/**
+ * Gets the first parent with "data-chart-container" attribute to compute height
+ */
+function findHeightParent(initial) {
+    let el = initial;
+    while (el) {
+        if (el.nodeType === 1 && el.hasAttribute('data-chart-container')) {
+            return el;
+        }
+        else {
+            if (el.parentElement !== null) {
+                el = el.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return el;
+}

package/dist/chart/model/chart-base-element.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

package/dist/chart/model/chart-base-element.js

@@ -1,6 +1,134 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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 class ChartBaseElement{constructor(){this.subscriptions=[],this._state="initial",this.entities=[]}doActivate(){}doDeactivate(){this.subscriptions.forEach(t=>t()),this.subscriptions=[]}enable(){this._state!=="active"&&(this._state="deactivated",this.activate())}disable(){this._state!=="disabled"&&(this.deactivate(),this._state="disabled")}activate(){this._state!=="disabled"&&(this._state!=="active"&&(this.doActivate(),this._state="active"),this.entities.forEach(t=>t.activate()))}deactivate(){this._state!=="disabled"&&(this._state!=="deactivated"&&(this.doDeactivate(),this._state="deactivated"),this.entities.forEach(t=>t.deactivate()))}getState(){return this._state}addSubscription(t){this.subscriptions.push(t)}addRxSubscription(t){t&&this.subscriptions.push(t.unsubscribe.bind(t))}addChildEntity(t){this.entities.push(t),this._state==="active"&&t.activate()}removeChildEntity(t){this.entities=this.entities.filter(i=>i!==t)}}
+/**
+ * Base class for chart elements. Contains lifecycle support, utility methods.
+ *
+ * Chart entity state transition: INITIAL -> ACTIVE <-> DEACTIVATED -> DISPOSED
+ */
+export class ChartBaseElement {
+    constructor() {
+        this.subscriptions = [];
+        this._state = 'initial';
+        // substitute entities which cascade activate/deactivate
+        this.entities = [];
+    }
+    /**
+     * This method is used to activate a protected feature.
+     * It does not take any arguments and does not return anything.
+     */
+    doActivate() { }
+    /**
+     * This method is used to unsubscribe from all events.
+     * It clears the subscriptions array.
+     * @returns {void}
+     */
+    doDeactivate() {
+        // Unsubscribe from all events
+        this.subscriptions.forEach(unsub => unsub());
+        this.subscriptions = [];
+    }
+    /**
+     * Enables the functionality of an object.
+     * If the object is not currently active, it sets the state to 'deactivated' and activates it.
+     * @returns {void}
+     */
+    enable() {
+        if (this._state !== 'active') {
+            this._state = 'deactivated';
+            this.activate();
+        }
+    }
+    /**
+     * Disables the current object if it is not already disabled.
+     * If the object is not disabled, it will be deactivated and its state will be set to 'disabled'.
+     * @returns {void}
+     */
+    disable() {
+        if (this._state !== 'disabled') {
+            this.deactivate();
+            this._state = 'disabled';
+        }
+    }
+    /**
+     * Activates the entity and all its child entities.
+     * If the entity is already active, it does nothing.
+     * If the entity is disabled, it does nothing.
+     * @returns {void}
+     */
+    activate() {
+        if (this._state === 'disabled') {
+            return;
+        }
+        if (this._state !== 'active') {
+            this.doActivate();
+            this._state = 'active';
+        }
+        this.entities.forEach(comp => comp.activate());
+    }
+    /**
+     * Deactivates the entity and all its child entities.
+     * If the entity is already disabled, it does nothing.
+     * If the entity is not yet deactivated, it calls the doDeactivate method and sets the state to 'deactivated'.
+     * Finally, it deactivates all child entities.
+     * @returns {void}
+     */
+    deactivate() {
+        if (this._state === 'disabled') {
+            return;
+        }
+        if (this._state !== 'deactivated') {
+            this.doDeactivate();
+            this._state = 'deactivated';
+        }
+        this.entities.forEach(comp => comp.deactivate());
+    }
+    /**
+     * Returns the current state of the ChartEnitity instance.
+     * @returns {ChartEntityState} The current state of the ChartEnitity instance.
+     */
+    getState() {
+        return this._state;
+    }
+    /**
+     * Adds default subscription
+     * @param fn - an unsubscriber function
+     * @protected
+     */
+    addSubscription(fn) {
+        this.subscriptions.push(fn);
+    }
+    /**
+     * Adds rxjs subscription
+     * @param subscription
+     * @protected
+     */
+    addRxSubscription(subscription) {
+        if (subscription) {
+            this.subscriptions.push(subscription.unsubscribe.bind(subscription));
+        }
+    }
+    /**
+     * Adds a new entity to the entities array and activates it if the parent entity is active.
+     *
+     * @param {Entity} entity - The entity to be added to the entities array.
+     * @returns {void}
+     */
+    addChildEntity(entity) {
+        this.entities.push(entity);
+        if (this._state === 'active') {
+            entity.activate();
+        }
+    }
+    /**
+     * Removes a entity from the entities array.
+     *
+     * @param {ChartEntity} entity - The entity to be removed.
+     * @returns {void}
+     */
+    removeChildEntity(entity) {
+        this.entities = this.entities.filter(c => c !== entity);
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

package/dist/chart/model/compare-series-hover.js

@@ -1,6 +1,30 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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 class CompareSeriesHoverProducerPart{constructor(e){this.chartModel=e}getData(e){const{x:t}=e,c=this.chartModel.candleFromX(t).idx||0;return this.chartModel.candleSeries.map(r=>{const o=r.dataPoints[c],a=this.chartModel.pane.regularFormatter(o==null?void 0:o.close);return{instrument:r.instrument.symbol,price:a,id:r.id}})}}
+export class CompareSeriesHoverProducerPart {
+    constructor(chartModel) {
+        this.chartModel = chartModel;
+    }
+    /**
+     * Returns an array of objects containing information about the series of candles at a specific x-coordinate.
+     * @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) {
+        const { x } = hover;
+        const candle = this.chartModel.candleFromX(x);
+        const idx = candle.idx || 0;
+        const compareSeriesHover = this.chartModel.candleSeries.map(series => {
+            const candleSecondary = series.dataPoints[idx];
+            const priceToShow = this.chartModel.pane.regularFormatter(candleSecondary === null || candleSecondary === void 0 ? void 0 : candleSecondary.close);
+            return {
+                instrument: series.instrument.symbol,
+                price: priceToShow,
+                id: series.id,
+            };
+        });
+        return compareSeriesHover;
+    }
+}

package/dist/chart/model/data-series-view.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -14,11 +14,11 @@ import { Index, Pixel, Price, Unit, Viewable } from './scaling/viewport.model';
  */
 export declare class DataSeriesView implements Viewable {
     private dataSeries;
-    private scaleModel;
+    private scale;
     private getAxisType;
-    private getBaseLine;
+    private getBaseline;
     private percentAnimationHandler;
-    constructor(dataSeries: DataSeriesModel, scaleModel: ScaleModel, getAxisType: () => PriceAxisType, getBaseLine: (idx?: Index) => Unit);
+    constructor(dataSeries: DataSeriesModel, scale: ScaleModel, getAxisType: () => PriceAxisType, getBaseline: (idx?: Index) => Unit);
     /**
      * Convert the input value to its corresponding y-pixel coordinate based on the selected price type and scale model.
      * @param value - The value to be converted to y-pixel coordinate.
@@ -28,10 +28,10 @@ export declare class DataSeriesView implements Viewable {
     /**
      * Convert the input value to the corresponding unit based on the current axis type.
      * @param value - The value to be converted to unit.
-     * @param getBaseLine - A function that returns the baseline for percent.
+     * @param getBaseline - A function that returns the baseline for percent.
      * @returns - The converted value in the corresponding unit.
      */
-    toAxisUnits(value: Price, getBaseLine?: (idx?: number | undefined) => number): Unit;
+    toAxisUnits(value: Price, getBaseline?: (idx?: number | undefined) => number): Unit;
     /**
      * Convert the input unit to its corresponding x-pixel coordinate based on the scale model.
      * @param unit - The unit to be converted to x-pixel coordinate.

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

@@ -1,6 +1,116 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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{binarySearch as a}from"../utils/array.utils";import{calcLogValue as o,logValueToUnit as l,percentToUnit as c,unitToPercent as h}from"./scaling/viewport.model";class d{constructor(e,i){this.scaleModel=e,this.dataSeries=i,this.prevAnimationId=""}getBaselineForPercent(e){const i=this.scaleModel.currentAnimation;let s;if(i!=null&&i.animationInProgress){i.id!==this.prevAnimationId&&(this.initialBaseline=void 0,this.targetBaseline=void 0,this.prevAnimationId=i.id);const n=i.easingFn(i.getProgress());this.initialBaseline===void 0&&(this.initialBaseline=e(a(this.dataSeries.visualPoints,i.xStart,t=>t.centerUnit).index)),this.targetBaseline===void 0&&(this.targetBaseline=e(a(this.dataSeries.visualPoints,i.animationConfig.targetXStart,t=>t.centerUnit).index)),s=this.initialBaseline+(this.targetBaseline-this.initialBaseline)*n}else s=e();return s}}export class DataSeriesView{constructor(e,i,s,n){this.dataSeries=e,this.scaleModel=i,this.getAxisType=s,this.getBaseLine=n,this.toY=t=>this.scaleModel.toY(this.toAxisUnits(t)),this.toX=t=>this.scaleModel.toX(t),this.xPixels=t=>this.scaleModel.xPixels(t),this.yPixels=t=>this.scaleModel.yPixels(t),this.percentAnimationHandler=new d(this.scaleModel,this.dataSeries)}toAxisUnits(e,i=this.getBaseLine){switch(this.getAxisType()){case"percent":const s=this.percentAnimationHandler.getBaselineForPercent(i);return h(e,s);case"logarithmic":return o(e);case"regular":return e}}priceFromY(e){const i=this.scaleModel.fromY(e);return this.fromAxisUnits(i)}fromAxisUnits(e){switch(this.getAxisType()){case"percent":return c(e,this.getBaseLine());case"logarithmic":return l(e);case"regular":return e}}}
+import { binarySearch } from '../utils/array.utils';
+import { calcLogValue, logValueToUnit, percentToUnit, unitToPercent, } from './scaling/viewport.model';
+class PercentScaleAnimationHandler {
+    constructor(scale, dataSeries) {
+        this.scale = scale;
+        this.dataSeries = dataSeries;
+        this.prevAnimationId = '';
+    }
+    /**
+     * This logic calculates correct baseline helping avoid shaking during zoom animation
+     * @param getBaseline
+     * @returns
+     */
+    getBaselineForPercent(getBaseline) {
+        const animation = this.scale.currentAnimation;
+        let baseline;
+        if (animation === null || animation === void 0 ? void 0 : animation.animationInProgress) {
+            if (animation.id !== this.prevAnimationId) {
+                this.initialBaseline = undefined;
+                this.targetBaseline = undefined;
+                this.prevAnimationId = animation.id;
+            }
+            const easedProgress = animation.easingFn(animation.getProgress());
+            if (this.initialBaseline === undefined) {
+                this.initialBaseline = getBaseline(binarySearch(this.dataSeries.visualPoints, animation.xStart, i => i.centerUnit).index);
+            }
+            if (this.targetBaseline === undefined) {
+                this.targetBaseline = getBaseline(binarySearch(this.dataSeries.visualPoints, animation.animationConfig.targetXStart, i => i.centerUnit).index);
+            }
+            baseline = this.initialBaseline + (this.targetBaseline - this.initialBaseline) * easedProgress;
+        }
+        else {
+            baseline = getBaseline();
+        }
+        return baseline;
+    }
+}
+/**
+ * A class representing a view for a data series chart.
+ * It contains methods to convert between price values and pixel coordinates using the selected scale model,
+ * as well as between price values and units based on the selected price type and axis type.
+ */
+export class DataSeriesView {
+    constructor(dataSeries, scale, getAxisType, getBaseline) {
+        this.dataSeries = dataSeries;
+        this.scale = scale;
+        this.getAxisType = getAxisType;
+        this.getBaseline = getBaseline;
+        /**
+         * Convert the input value to its corresponding y-pixel coordinate based on the selected price type and scale model.
+         * @param value - The value to be converted to y-pixel coordinate.
+         * @returns - The converted value in y-pixel coordinate.
+         */
+        this.toY = (value) => {
+            return this.scale.toY(this.toAxisUnits(value));
+        };
+        /**
+         * Convert the input unit to its corresponding x-pixel coordinate based on the scale model.
+         * @param unit - The unit to be converted to x-pixel coordinate.
+         * @returns - The converted value in x-pixel coordinate.
+         */
+        this.toX = (unit) => this.scale.toX(unit);
+        this.xPixels = (unit) => this.scale.xPixels(unit);
+        /**
+         * Pay attention! This method doesn't convert price to pixels, it converts only current axis UNITs!
+         * @param unit
+         */
+        this.yPixels = (unit) => this.scale.yPixels(unit);
+        this.percentAnimationHandler = new PercentScaleAnimationHandler(this.scale, this.dataSeries);
+    }
+    /**
+     * Convert the input value to the corresponding unit based on the current axis type.
+     * @param value - The value to be converted to unit.
+     * @param getBaseline - A function that returns the baseline for percent.
+     * @returns - The converted value in the corresponding unit.
+     */
+    toAxisUnits(value, getBaseline = this.getBaseline) {
+        switch (this.getAxisType()) {
+            case 'percent':
+                const baseline = this.percentAnimationHandler.getBaselineForPercent(getBaseline);
+                return unitToPercent(value, baseline);
+            case 'logarithmic':
+                return calcLogValue(value);
+            case 'regular':
+                return value;
+        }
+    }
+    /**
+     * Converts "y" in pixels to price
+     * @param y - source value in pixels
+     */
+    priceFromY(y) {
+        const unit = this.scale.fromY(y);
+        return this.fromAxisUnits(unit);
+    }
+    /**
+     * Convert the input unit to its corresponding price value based on the selected axis type.
+     * @param {number} unit - The unit to be converted to price value.
+     * @returns {number} - The converted value in price.
+     */
+    fromAxisUnits(unit) {
+        switch (this.getAxisType()) {
+            case 'percent':
+                return percentToUnit(unit, this.getBaseline());
+            case 'logarithmic':
+                return logValueToUnit(unit);
+            case 'regular':
+                return unit;
+        }
+    }
+}

package/dist/chart/model/data-series.config.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */

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

@@ -1,6 +1,19 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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 DEFAULT_DATA_SERIES_PAINT_CONFIG={color:"#FF00FF",lineWidth:1,hoveredLineWidth:2},DEFAULT_DATA_SERIES_CONFIG={paintConfig:[DEFAULT_DATA_SERIES_PAINT_CONFIG],type:"LINEAR",highLowActive:!0,visible:!0,labelLastValue:"viewport",labelMode:"label",labelAppearanceType:"badge"};
+export const DEFAULT_DATA_SERIES_PAINT_CONFIG = {
+    color: '#FF00FF',
+    lineWidth: 1,
+    hoveredLineWidth: 2,
+};
+export const DEFAULT_DATA_SERIES_CONFIG = {
+    paintConfig: [DEFAULT_DATA_SERIES_PAINT_CONFIG],
+    type: 'LINEAR',
+    highLowActive: true,
+    visible: true,
+    labelLastValue: 'viewport',
+    labelMode: 'label',
+    labelAppearanceType: 'badge',
+};

package/dist/chart/model/data-series.model.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 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/.
  */
@@ -50,7 +50,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
     hovered: boolean;
     yAxisLabelProvider: DataSeriesYAxisLabelsProvider;
     readonly config: DataSeriesConfig;
-    scaleModel: ScaleModel;
+    scale: ScaleModel;
     view: DataSeriesView;
     protected _dataPoints: D[][];
     pricePrecisions: number[];
@@ -112,8 +112,8 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
      * Recalculates the indexes of the start and end points of the data viewport,
      * based on the current xStart and xEnd values of the scale model, or on the given xStart and xEnd parameters.
      *
-     * @param {number} [xStart=this.scaleModel.xStart] - The start value of the viewport on the x-axis. Defaults to the current xStart value of the scale model.
-     * @param {number} [xEnd=this.scaleModel.xEnd] - The end value of the viewport on the x-axis. Defaults to the current xEnd value of the scale model.
+     * @param {number} [xStart=this.scale.xStart] - The start value of the viewport on the x-axis. Defaults to the current xStart value of the scale model.
+     * @param {number} [xEnd=this.scale.xEnd] - The end value of the viewport on the x-axis. Defaults to the current xEnd value of the scale model.
      */
     recalculateDataViewportIndexes(xStart?: number, xEnd?: number): void;
     /**
@@ -139,7 +139,7 @@ export declare class DataSeriesModel<D extends DataSeriesPoint = DataSeriesPoint
      * @param {number} [idx=this.dataIdxStart] - The index of the visual point to retrieve the close value for.
      * @returns {Unit} The close value of the visual point at the given index, or 1 if the visual point is not defined.
      */
-    getBaseLine: (idx?: number) => Unit;
+    getBaseline: (idx?: number) => Unit;
     /**
      * Returns the string representation of the close value of the given visual point.
      *