@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/README.md

@@ -106,7 +106,7 @@ export const generateMockData = () => {
 		symbol: 'AAPL',
 		priceIncrements: [0.01],
 	};
-	chartInstance.chartComponent.setMainSeries({ candles: mockCandles, instrument: mockInstrument });
+	chart.setData({ candles: mockCandles, instrument: mockInstrument });
 };
 ```
 
@@ -140,7 +140,7 @@ Here is full quick-start code example:
             symbol: 'AAPL',
             priceIncrements: [0.01],
         };
-        chartInstance.chartComponent.setMainSeries({ candles: mockCandles, instrument: mockInstrument });
+        chart.setData({ candles: mockCandles, instrument: mockInstrument });
   </script>
 ```
 

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

@@ -3,4 +3,137 @@
  * 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{ColorAlphaAnimation as r}from"./types/color-alpha-animation";import{ColorTransitionAnimation as s}from"./types/color-transition-animation";import{ViewportMovementAnimation as m}from"./types/viewport-movement-animation";const e=10;export const VIEWPORT_ANIMATION_ID="VIEWPORT_ANIMATION";export class CanvasAnimation{constructor(t){this.eventBus=t,this.animations={}}startViewportMovementAnimation(t,n,i=VIEWPORT_ANIMATION_ID,o){const a=new m(t,n,o);return this.animations[i]=a,this.ensureIntervalStarted(),a}startColorAlphaAnimation(t,n,i,o){const a=new r(Object.assign(Object.assign({},o),{duration:o&&o.duration||e}),n,i);return this.animations[t]=a,this.ensureIntervalStarted(),a}startColorTransitionAnimation(t,n,i=e,o){const a=new s({duration:i},n,o);return this.animations[t]=a,this.ensureIntervalStarted(),a}getAnimation(t){return this.animations[t]}getColorAlphaAnimation(t){return this.getAnimation(t)}getColorTransitionAnimation(t){return this.getAnimation(t)}forceStopAnimation(t){const n=this.animations[t];n&&(n.animationTimeLeft=-1,n.animationInProgress=!1)}ensureIntervalStarted(){this.animationIntervalId||(this.animationIntervalId=window.setInterval(()=>this.tick(),20))}tick(){let t=!0;for(const n of Object.keys(this.animations)){const i=this.animations[n];i.tick(),i.animationInProgress&&(t=!1)}t?this.stopInterval():this.eventBus.fireDraw()}stopInterval(){clearInterval(this.animationIntervalId),this.animationIntervalId=void 0}}
+import { ColorAlphaAnimation } from './types/color-alpha-animation';
+import { ColorTransitionAnimation } from './types/color-transition-animation';
+import { ViewportMovementAnimation } from './types/viewport-movement-animation';
+const DEFAULT_ANIMATION_TIME = 10;
+export const VIEWPORT_ANIMATION_ID = 'VIEWPORT_ANIMATION';
+/**
+ * Singleton animation container for all chart animations.
+ * Does the following things:
+ *  - registers animations and updates their state
+ *  - fires only 1 DRAW event for all animations at once
+ *
+ * Add specific animation here as well with typed API.
+ * Like "color" animation which auto-updates color alpha channel.
+ *
+ * @doc-tags chart-core,animation
+ */
+export class CanvasAnimation {
+    constructor(eventBus) {
+        this.eventBus = eventBus;
+        this.animations = {};
+    }
+    /**
+     * Starts a viewport movement animation with the given configuration and adds it to the list of animations.
+     * @param {ViewportModel} viewportModel - The viewport model to animate.
+     * @param {ViewportMovementAnimationConfig} config - The configuration for the animation.
+     * @param {string} [uniqueAnimationId=VIEWPORT_ANIMATION_ID] - The unique ID for the animation.
+     * @param {Function} [onTickFunction] - The function to be called on each tick of the animation.
+     * @returns {ViewportMovementAnimation} The container for the created animation.
+     */
+    startViewportMovementAnimation(viewportModel, config, uniqueAnimationId = VIEWPORT_ANIMATION_ID, onTickFunction) {
+        const animation = new ViewportMovementAnimation(viewportModel, config, onTickFunction);
+        this.animations[uniqueAnimationId] = animation;
+        this.ensureIntervalStarted();
+        return animation;
+    }
+    /**
+     * Starts a color alpha animation with the given configuration and adds it to the list of animations.
+     * @param {string} uniqueAnimationId - A unique identifier for the animation.
+     * @param {Array<ColorAlphaAnimationConfig>} colorConfigs - An array of color alpha animation configurations.
+     * @param {() => void} [onTickFunction] - A function to be called on each animation tick.
+     * @param {Partial<ACAnimationConfig>} [animationConfig] - An optional configuration for the animation.
+     * @returns {ColorAlphaAnimation} - The created animation container.
+     */
+    startColorAlphaAnimation(uniqueAnimationId, colorConfigs, onTickFunction, animationConfig) {
+        const animation = new ColorAlphaAnimation(Object.assign(Object.assign({}, animationConfig), { duration: (animationConfig && animationConfig.duration) || DEFAULT_ANIMATION_TIME }), colorConfigs, onTickFunction);
+        this.animations[uniqueAnimationId] = animation;
+        this.ensureIntervalStarted();
+        return animation;
+    }
+    /**
+     * Starts a color transition animation with the given configurations and duration.
+     * @param {string} uniqueAnimationId - A unique identifier for the animation.
+     * @param {Array<ColorTransitionAnimationConfig>} colorConfigs - An array of color transition configurations.
+     * @param {number} [duration=DEFAULT_ANIMATION_TIME] - The duration of the animation in milliseconds.
+     * @param {Function} [onTickFunction] - A function to be called on each tick of the animation.
+     * @returns {ColorTransitionAnimation} - The created animation container.
+     */
+    startColorTransitionAnimation(uniqueAnimationId, colorConfigs, duration = DEFAULT_ANIMATION_TIME, onTickFunction) {
+        const animation = new ColorTransitionAnimation({ duration }, colorConfigs, onTickFunction);
+        this.animations[uniqueAnimationId] = animation;
+        this.ensureIntervalStarted();
+        return animation;
+    }
+    /**
+     * This function takes an id as a string and returns an animation container object of type T. It retrieves the animation container object from the animations object using the provided id. The @ts-ignore comment is used to ignore any TypeScript errors that may occur due to the dynamic nature of the function.
+     */
+    getAnimation(id) {
+        // @ts-ignore
+        return this.animations[id];
+    }
+    /**
+     * Returns a ColorAlphaAnimation object for the given animation ID.
+     *
+     * @param {string} id - The ID of the animation to retrieve.
+     * @returns {ColorAlphaAnimation} - The ColorAlphaAnimation object for the given ID.
+     */
+    getColorAlphaAnimation(id) {
+        return this.getAnimation(id);
+    }
+    /**
+     * Returns a ColorTransitionAnimation object for the given id.
+     * @param {string} id - The id of the animation to retrieve.
+     * @returns {ColorTransitionAnimation} - The ColorTransitionAnimation object for the given id.
+     */
+    getColorTransitionAnimation(id) {
+        return this.getAnimation(id);
+    }
+    /**
+     * Stops the animation with the given ID.
+     * @param {string} id - The ID of the animation to be stopped.
+     * @returns {void}
+     */
+    forceStopAnimation(id) {
+        const animation = this.animations[id];
+        if (animation) {
+            animation.animationTimeLeft = -1;
+            animation.animationInProgress = false;
+        }
+    }
+    /**
+     * This method ensures that the animation interval is started. If the animation interval ID is not set, it sets it to a new interval ID using `window.setInterval()` with a callback function of `this.tick()` and a delay of 20 milliseconds.
+     */
+    ensureIntervalStarted() {
+        if (!this.animationIntervalId) {
+            this.animationIntervalId = window.setInterval(() => this.tick(), 20);
+        }
+    }
+    /**
+     * This is a private method that iterates through all the animations in the container and calls their tick method. If any animation is still in progress, it sets the allCompleted flag to false. If all animations are completed, it stops the interval. If not, it fires the draw event.
+     */
+    tick() {
+        let allCompleted = true;
+        for (const i of Object.keys(this.animations)) {
+            const animation = this.animations[i];
+            animation.tick();
+            if (animation.animationInProgress) {
+                allCompleted = false;
+            }
+        }
+        if (!allCompleted) {
+            this.eventBus.fireDraw();
+        }
+        else {
+            this.stopInterval();
+        }
+    }
+    /**
+     * Stops the interval for the animation.
+     */
+    stopInterval() {
+        clearInterval(this.animationIntervalId);
+        this.animationIntervalId = undefined;
+    }
+}

package/dist/chart/animation/types/animation.js

@@ -3,4 +3,46 @@
  * 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 Animation{constructor(i,t){this.onTickFunction=t,this.animationTimeLeft=0,this.animationInProgress=!1,this.animationTime=i.duration,this.animationTimeLeft=i.timeLeft===void 0?i.duration:i.timeLeft,this.animationInProgress=!0}tick(){this.animationTimeLeft<=0?this.animationInProgress=!1:this.animationTimeLeft--,this.onTickFunction&&this.onTickFunction()}getProgress(){return 1-this.animationTimeLeft/this.animationTime}finishAnimation(){this.animationInProgress=!1,this.animationTimeLeft=0}}
+/**
+ * Basic animation. Holds current state: inProgress, timeLeft.
+ * Additional params are useful to pass data which helps animating.
+ */
+export class Animation {
+    constructor(animationConfig, onTickFunction) {
+        this.onTickFunction = onTickFunction;
+        this.animationTimeLeft = 0;
+        this.animationInProgress = false;
+        this.animationTime = animationConfig.duration;
+        this.animationTimeLeft =
+            animationConfig.timeLeft === undefined ? animationConfig.duration : animationConfig.timeLeft;
+        this.animationInProgress = true;
+    }
+    /**
+     * Decrements the animation time left and executes the onTickFunction if it exists.
+     * If the animation time left reaches zero, sets the animationInProgress flag to false.
+     */
+    tick() {
+        if (this.animationTimeLeft <= 0) {
+            this.animationInProgress = false;
+        }
+        else {
+            this.animationTimeLeft--;
+        }
+        this.onTickFunction && this.onTickFunction();
+    }
+    // normalized time [0..1]
+    /**
+     * Calculates the normalized progress of an animation.
+     * @returns {number} A value between 0 and 1 representing the progress of the animation.
+     */
+    getProgress() {
+        return 1 - this.animationTimeLeft / this.animationTime;
+    }
+    /**
+     * Sets the animationInProgress flag to false and resets the animationTimeLeft to 0.
+     */
+    finishAnimation() {
+        this.animationInProgress = false;
+        this.animationTimeLeft = 0;
+    }
+}

package/dist/chart/animation/types/color-alpha-animation.d.ts

@@ -5,7 +5,7 @@
  */
 import { AnimationConfig } from '../canvas-animation';
 import { Animation } from './animation';
-import * as Color from 'color';
+import Color from 'color';
 interface CustomColor extends Color {
     readonly valpha?: number;
 }

package/dist/chart/animation/types/color-alpha-animation.js

@@ -3,4 +3,63 @@
  * 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{Animation as o}from"./animation";import*as e from"color";export class ColorAlphaAnimation extends o{constructor(i,t,a=()=>{}){super(i,a),this.colorConfigs=t,t.forEach(r=>{r.rgbColor=e.rgb(r.color),r.initialAlpha=r.rgbColor.valpha,r.currentAnimationColor=r.rgbColor})}tick(){super.tick(),this.animationInProgress&&this.colorConfigs.forEach(i=>{i.initialAlpha===void 0||i.rgbColor===void 0||(i.type==="fading"?i.currentAnimationColor=i.rgbColor.alpha(i.initialAlpha*this.animationTimeLeft/this.animationTime):i.type==="appearing"&&(i.currentAnimationColor=i.rgbColor.alpha(i.initialAlpha*(1-this.animationTimeLeft/this.animationTime))))})}getColor(i){var t,a;return(a=(t=this.colorConfigs[i].currentAnimationColor)===null||t===void 0?void 0:t.toString())!==null&&a!==void 0?a:"#FFFFFF"}revert(){this.animationTimeLeft=Math.max(this.animationTime-this.animationTimeLeft,1),this.colorConfigs.forEach(i=>{i.type==="fading"?i.type="appearing":i.type="fading"})}}
+import { Animation } from './animation';
+import Color from 'color';
+/**
+ * Color animation automatically updates alpha channel of provided colors on each tick.
+ * Can be in 'appearing' and 'fading' state.
+ */
+export class ColorAlphaAnimation extends Animation {
+    constructor(animationConfig, colorConfigs, onTickFunction = () => { }) {
+        super(animationConfig, onTickFunction);
+        this.colorConfigs = colorConfigs;
+        colorConfigs.forEach(config => {
+            config.rgbColor = Color.rgb(config.color);
+            config.initialAlpha = config.rgbColor.valpha;
+            config.currentAnimationColor = config.rgbColor;
+        });
+    }
+    /**
+     * Updates the current animation color of each color configuration based on the animation type and time left. If an animation is in progress, it iterates over each color configuration and updates its current animation color. If the configuration has an initial alpha and RGB color, it calculates the new alpha value based on the animation time left and updates the current animation color accordingly. The animation type can be either 'fading' or 'appearing'.
+     */
+    tick() {
+        super.tick();
+        if (this.animationInProgress) {
+            this.colorConfigs.forEach(config => {
+                if (config.initialAlpha === undefined || config.rgbColor === undefined) {
+                    return;
+                }
+                if (config.type === 'fading') {
+                    config.currentAnimationColor = config.rgbColor.alpha((config.initialAlpha * this.animationTimeLeft) / this.animationTime);
+                }
+                else if (config.type === 'appearing') {
+                    config.currentAnimationColor = config.rgbColor.alpha(config.initialAlpha * (1 - this.animationTimeLeft / this.animationTime));
+                }
+            });
+        }
+    }
+    /**
+     * Returns the color of the current animation for a given index.
+     * @param {number} index - The index of the color configuration to retrieve.
+     * @returns {string} - The color of the current animation for the given index, or white if not found.
+     */
+    getColor(index) {
+        var _a, _b;
+        return (_b = (_a = this.colorConfigs[index].currentAnimationColor) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '#FFFFFF';
+    }
+    /**
+     * This function reverts the animation by changing the type of color configurations from 'fading' to 'appearing' and vice versa. It also ensures that the animationTimeLeft is not zero to avoid getting stuck in the middle of the animation.
+     */
+    revert() {
+        // if animationTimeLeft becomes zero it halts the animation and we'll stuck in the middle of animation
+        this.animationTimeLeft = Math.max(this.animationTime - this.animationTimeLeft, 1);
+        this.colorConfigs.forEach(config => {
+            if (config.type === 'fading') {
+                config.type = 'appearing';
+            }
+            else {
+                config.type = 'fading';
+            }
+        });
+    }
+}

package/dist/chart/animation/types/color-transition-animation.d.ts

@@ -5,7 +5,7 @@
  */
 import { AnimationConfig } from '../canvas-animation';
 import { Animation } from './animation';
-import * as Color from 'color';
+import Color from 'color';
 export interface ColorTransitionAnimationConfig {
     startColor: string;
     endColor: string;

package/dist/chart/animation/types/color-transition-animation.js

@@ -3,4 +3,89 @@
  * 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{Animation as l}from"./animation";import*as e from"color";export class ColorTransitionAnimation extends l{constructor(r,t,o=()=>{}){super(r,o),this.colorConfigs=t,t.forEach(i=>{i.rgbStartColor=e.rgb(i.startColor),i.rgbEndColor=e.rgb(i.endColor),i.currentAnimationColor=i.type==="appearing"?i.rgbStartColor:i.rgbEndColor})}tick(){super.tick(),this.animationInProgress&&this.colorConfigs.forEach(r=>{const t=1-this.animationTimeLeft/this.animationTime;!r.rgbStartColor||!r.rgbEndColor||(r.type==="fading"?r.currentAnimationColor=this.calculateTransitionColor(r.rgbEndColor,r.rgbStartColor,t):r.type==="appearing"&&(r.currentAnimationColor=this.calculateTransitionColor(r.rgbStartColor,r.rgbEndColor,t)))})}getColor(r){var t,o;return(o=(t=this.colorConfigs[r].currentAnimationColor)===null||t===void 0?void 0:t.toString())!==null&&o!==void 0?o:"#FFFFFF"}revert(){this.animationTimeLeft=Math.max(this.animationTime-this.animationTimeLeft,1),this.colorConfigs.forEach(r=>{r.type==="fading"?r.type="appearing":r.type="fading"})}moveToLastTick(){this.animationTimeLeft=1}calculateTransitionColor(r,t,o){const i=r.red()-(r.red()-t.red())*o,a=r.green()-(r.green()-t.green())*o,n=r.blue()-(r.blue()-t.blue())*o;return e.rgb(i,a,n)}}
+import { Animation } from './animation';
+import Color from 'color';
+/**
+ * Color transition calculates color between start..end color for each tick.
+ * Can be in 'appearing' and 'fading' state; 'fading' is just reverting the colors order.
+ */
+export class ColorTransitionAnimation extends Animation {
+    constructor(animationConfig, colorConfigs, onTickFunction = () => { }) {
+        super(animationConfig, onTickFunction);
+        this.colorConfigs = colorConfigs;
+        colorConfigs.forEach(config => {
+            config.rgbStartColor = Color.rgb(config.startColor);
+            config.rgbEndColor = Color.rgb(config.endColor);
+            config.currentAnimationColor = config.type === 'appearing' ? config.rgbStartColor : config.rgbEndColor;
+        });
+    }
+    /**
+     * Updates the current animation color for each color configuration based on the progress of the animation.
+     * If an animation is in progress, it calculates the transition color for each configuration based on the start and end colors and the current progress of the animation.
+     * If the configuration type is "fading", it transitions from the end color to the start color, and if the type is "appearing", it transitions from the start color to the end color.
+     * @function
+     * @returns {void}
+     */
+    tick() {
+        super.tick();
+        if (this.animationInProgress) {
+            this.colorConfigs.forEach(config => {
+                const progress = 1 - this.animationTimeLeft / this.animationTime;
+                if (!config.rgbStartColor || !config.rgbEndColor) {
+                    return;
+                }
+                if (config.type === 'fading') {
+                    config.currentAnimationColor = this.calculateTransitionColor(config.rgbEndColor, config.rgbStartColor, progress);
+                }
+                else if (config.type === 'appearing') {
+                    config.currentAnimationColor = this.calculateTransitionColor(config.rgbStartColor, config.rgbEndColor, progress);
+                }
+            });
+        }
+    }
+    /**
+     * Returns the color of the current animation for a given index.
+     * @param {number} index - The index of the color configuration to retrieve.
+     * @returns {string} - The color of the current animation for the given index, or white if not found.
+     */
+    getColor(index) {
+        var _a, _b;
+        return (_b = (_a = this.colorConfigs[index].currentAnimationColor) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '#FFFFFF';
+    }
+    /**
+     * Reverts the animation by changing the type of color configurations from 'fading' to 'appearing' and vice versa.
+     * It also ensures that the animation does not halt in the middle by setting the animationTimeLeft to the maximum of (animationTime - animationTimeLeft) and 1.
+     * @function
+     * @returns {void}
+     */
+    revert() {
+        // if animationTimeLeft becomes zero it halts the animation and we'll stuck in the middle of animation
+        this.animationTimeLeft = Math.max(this.animationTime - this.animationTimeLeft, 1);
+        this.colorConfigs.forEach(config => {
+            if (config.type === 'fading') {
+                config.type = 'appearing';
+            }
+            else {
+                config.type = 'fading';
+            }
+        });
+    }
+    /**
+     * Moves animation state to one last tick - instant-finishing animation as result.
+     */
+    moveToLastTick() {
+        this.animationTimeLeft = 1;
+    }
+    /**
+     * Calculates new color in between of 2 colors.
+     * @param startColor - from color
+     * @param endColor - to color
+     * @param progress - number between 0..1
+     */
+    calculateTransitionColor(startColor, endColor, progress) {
+        const r = startColor.red() - (startColor.red() - endColor.red()) * progress;
+        const g = startColor.green() - (startColor.green() - endColor.green()) * progress;
+        const b = startColor.blue() - (startColor.blue() - endColor.blue()) * progress;
+        return Color.rgb(r, g, b);
+    }
+}

package/dist/chart/animation/types/viewport-movement-animation.js

@@ -3,4 +3,66 @@
  * 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{Animation as e}from"./animation";import{easeExpOut as h}from"../../utils/math.utils";import{uuid as m}from"../../utils/uuid.utils";export class ViewportMovementAnimation extends e{constructor(t,i,o){var n;super(i,o),this.viewportModel=t,this.animationConfig=i,this.id=m(),this.xStart=t.xStart,this.xEnd=t.xEnd,this.yStart=t.yStart,this.yEnd=t.yEnd,this.zoomX=t.zoomX,this.zoomY=t.zoomY,this.easingFn=(n=i.easingFn)!==null&&n!==void 0?n:h}tick(){if(super.tick(),this.animationInProgress){const t=this.easingFn(this.getProgress()),i=this.xStart+(this.animationConfig.targetXStart-this.xStart)*t,o=this.xEnd+(this.animationConfig.targetXEnd-this.xEnd)*t,n=this.yStart+(this.animationConfig.targetYStart-this.yStart)*t,s=this.yEnd+(this.animationConfig.targetYEnd-this.yEnd)*t,a=this.zoomX+(this.animationConfig.targetZoomX-this.zoomX)*t,r=this.zoomY+(this.animationConfig.targetZoomY-this.zoomY)*t;this.viewportModel.apply({xStart:i,xEnd:o,yStart:n,yEnd:s,zoomX:a,zoomY:r,inverseY:this.viewportModel.inverseY})}}finishAnimation(){super.finishAnimation(),this.viewportModel.apply({xStart:this.animationConfig.targetXStart,xEnd:this.animationConfig.targetXEnd,yStart:this.animationConfig.targetYStart,yEnd:this.animationConfig.targetYEnd,zoomX:this.animationConfig.targetZoomX,zoomY:this.animationConfig.targetZoomY,inverseY:this.viewportModel.inverseY})}}
+import { Animation } from './animation';
+import { easeExpOut } from '../../utils/math.utils';
+import { uuid } from '../../utils/uuid.utils';
+/**
+ * Animates the viewport X movement. Uses d3-ease library for easing functions.
+ * https://www.npmjs.com/package/d3-ease
+ * @doc-tags animation,scaling
+ */
+export class ViewportMovementAnimation extends Animation {
+    constructor(viewportModel, animationConfig, onTickFunction) {
+        var _a;
+        super(animationConfig, onTickFunction);
+        this.viewportModel = viewportModel;
+        this.animationConfig = animationConfig;
+        this.id = uuid();
+        this.xStart = viewportModel.xStart;
+        this.xEnd = viewportModel.xEnd;
+        this.yStart = viewportModel.yStart;
+        this.yEnd = viewportModel.yEnd;
+        this.zoomX = viewportModel.zoomX;
+        this.zoomY = viewportModel.zoomY;
+        this.easingFn = (_a = animationConfig.easingFn) !== null && _a !== void 0 ? _a : easeExpOut;
+    }
+    /**
+     * Updates the viewport model's properties based on the animation configuration and easing function. If an animation is in progress, the properties are updated based on the current progress of the animation. The updated properties include the start and end coordinates for the x and y axes, as well as the zoom level for both axes. The updated properties are then applied to the viewport model.
+     */
+    tick() {
+        super.tick();
+        if (this.animationInProgress) {
+            const easedProgress = this.easingFn(this.getProgress());
+            const newXStart = this.xStart + (this.animationConfig.targetXStart - this.xStart) * easedProgress;
+            const newXEnd = this.xEnd + (this.animationConfig.targetXEnd - this.xEnd) * easedProgress;
+            const newYStart = this.yStart + (this.animationConfig.targetYStart - this.yStart) * easedProgress;
+            const newYEnd = this.yEnd + (this.animationConfig.targetYEnd - this.yEnd) * easedProgress;
+            const newZoomX = this.zoomX + (this.animationConfig.targetZoomX - this.zoomX) * easedProgress;
+            const newZoomY = this.zoomY + (this.animationConfig.targetZoomY - this.zoomY) * easedProgress;
+            this.viewportModel.apply({
+                xStart: newXStart,
+                xEnd: newXEnd,
+                yStart: newYStart,
+                yEnd: newYEnd,
+                zoomX: newZoomX,
+                zoomY: newZoomY,
+                inverseY: this.viewportModel.inverseY,
+            });
+        }
+    }
+    /**
+     * This method finishes the animation and applies the target viewport model configuration. It calls the `finishAnimation()` method of the parent class and then applies the target configuration to the `viewportModel` object. The target configuration includes the `xStart`, `xEnd`, `yStart`, `yEnd`, `zoomX`, `zoomY`, and `inverseY` properties.
+     */
+    finishAnimation() {
+        super.finishAnimation();
+        this.viewportModel.apply({
+            xStart: this.animationConfig.targetXStart,
+            xEnd: this.animationConfig.targetXEnd,
+            yStart: this.animationConfig.targetYStart,
+            yEnd: this.animationConfig.targetYEnd,
+            zoomX: this.animationConfig.targetZoomX,
+            zoomY: this.animationConfig.targetZoomY,
+            inverseY: this.viewportModel.inverseY,
+        });
+    }
+}

package/dist/chart/animation/viewport-model-animation.js

@@ -3,4 +3,23 @@
  * 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/.
  */
-const a=30;export const startViewportModelAnimation=(n,o,t)=>{const r=n.startViewportMovementAnimation(o,{duration:30,targetXStart:t.xStart,targetXEnd:t.xEnd,targetYStart:t.yStart,targetYEnd:t.yEnd,targetZoomX:t.zoomX,targetZoomY:t.zoomY});o.currentAnimation=r};
+const VIEWPORT_ANIMATION_DURATION = 30;
+/**
+ * Starts the animation for chart viewport movement.
+ * @param canvasAnimation
+ * @param viewportModel
+ * @param state
+ * @doc-tags animation,viewport
+ */
+export const startViewportModelAnimation = (canvasAnimation, viewportModel, state) => {
+    const animation = canvasAnimation.startViewportMovementAnimation(viewportModel, {
+        duration: VIEWPORT_ANIMATION_DURATION,
+        targetXStart: state.xStart,
+        targetXEnd: state.xEnd,
+        targetYStart: state.yStart,
+        targetYEnd: state.yEnd,
+        targetZoomX: state.zoomX,
+        targetZoomY: state.zoomY,
+    });
+    viewportModel.currentAnimation = animation;
+};