@devexperts/dxcharts-lite 1.0.2 → 2.0.0

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

@@ -3,4 +3,100 @@
  * 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 AutoScaleViewportSubModel{constructor(o,e){this.delegate=o,this.auto=!0,this.highLowPostPorcessor={},this.highLowProviders=e!=null?e:{}}setHighLowProvider(o,e){this.highLowProviders[o]=e}deleteHighLowProvider(o){delete this.highLowProviders[o]}setHighLowPostProcessor(o,e){this.highLowPostPorcessor[o]=e}setAutoAndRecalculateState(o,e){this.auto=e,e&&autoScaleYViewportTransformer(this.delegate,o,Object.values(this.highLowProviders),Object.values(this.highLowPostPorcessor))}}export const autoScaleYViewportTransformer=(i,o,e,t)=>{const h=e.filter(r=>r.isHighLowActive()).map(r=>r.calculateHighLow(o)),l=mergeHighLow(h),s=t.reduce((r,c)=>c(r),l);o.yStart=s.low,o.yEnd=s.high,o.zoomY=i.calculateZoomY(o.yStart,o.yEnd)};export function mergeHighLow(i){if(i.length===0)return getDefaultHighLow();let o=i[0].high,e=i[0].low;return i.forEach(t=>{isFinite(t.high)&&t.high>=o&&(o=t.high),isFinite(t.low)&&t.low<=e&&(e=t.low)}),{low:e,high:o}}export const getDefaultHighLow=()=>({high:Number.MIN_SAFE_INTEGER,low:Number.MAX_SAFE_INTEGER});
+/**
+ * Auxiliary sub-model to apply X,Y auto-scaling feature.
+ * Transforms the original ViewportModel.
+ * @doc-tags auto-scale,viewport,scaling
+ */
+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.highLowProviders = highLowProviders !== null && highLowProviders !== void 0 ? highLowProviders : {};
+    }
+    /**
+     * Sets a HighLowProvider for a given name.
+     * @param {string} name - The name of the HighLowProvider.
+     * @param {HighLowProvider} provider - The HighLowProvider to be set.
+     */
+    setHighLowProvider(name, provider) {
+        this.highLowProviders[name] = provider;
+    }
+    /**
+     * Deletes a high-low provider from the list of high-low providers.
+     * @param {string} name - The name of the high-low provider to be deleted.
+     */
+    deleteHighLowProvider(name) {
+        delete this.highLowProviders[name];
+    }
+    /**
+     * Sets a HighLowPostProcessor for a given name.
+     *
+     * @param {string} name - The name of the HighLowPostProcessor.
+     * @param {HighLowPostProcessor} processor - The HighLowPostProcessor to be set.
+     * @returns {void}
+     */
+    setHighLowPostProcessor(name, processor) {
+        this.highLowPostPorcessor[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));
+        }
+    }
+}
+/**
+ * Y auto-scale viewport transformer. Calculates highLow for all chart visuals and recalculates the Y scale.
+ * @param vm
+ * @param state
+ * @param highLowProviders
+ * @param highLowPostProcessors
+ */
+export const autoScaleYViewportTransformer = (vm, state, highLowProviders, highLowPostProcessors) => {
+    const highLowList = highLowProviders
+        .filter(provider => provider.isHighLowActive())
+        .map(provider => provider.calculateHighLow(state));
+    const highLow = mergeHighLow(highLowList);
+    const postProcessedHighLow = highLowPostProcessors.reduce((prevResult, postProcessor) => postProcessor(prevResult), highLow);
+    state.yStart = postProcessedHighLow.low;
+    state.yEnd = postProcessedHighLow.high;
+    state.zoomY = vm.calculateZoomY(state.yStart, state.yEnd);
+};
+/**
+ * Merges an array of HighLow objects into a single HighLow object.
+ * @param {HighLow[]} input - The array of HighLow objects to be merged.
+ * @returns {HighLow} - The merged HighLow object.
+ 
+*/
+export function mergeHighLow(input) {
+    if (input.length === 0) {
+        return getDefaultHighLow();
+    }
+    let max = input[0].high;
+    let min = input[0].low;
+    input.forEach(highLow => {
+        if (isFinite(highLow.high) && highLow.high >= max) {
+            max = highLow.high;
+        }
+        if (isFinite(highLow.low) && highLow.low <= min) {
+            min = highLow.low;
+        }
+    });
+    return { low: min, high: max };
+}
+export const getDefaultHighLow = () => {
+    return {
+        high: Number.MIN_SAFE_INTEGER,
+        low: Number.MAX_SAFE_INTEGER,
+    };
+};

package/dist/chart/model/scaling/constrait.functions.js

@@ -3,4 +3,64 @@
  * 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{at as S}from"../../utils/array.utils";import{calculateZoom as E,pixelsToUnits as w}from"./viewport.model";export const candleEdgesConstrait=(d,s,r,l)=>{var t,o,i,a;const n=Object.assign({},d),e=(o=(t=s[r])===null||t===void 0?void 0:t.startUnit)!==null&&o!==void 0?o:0,c=(a=(i=S(-r,s))===null||i===void 0?void 0:i.startUnit)!==null&&a!==void 0?a:0;let m=d.xStart,x=d.xEnd;return n.xStart>=c&&(m=c,x=x-(n.xStart-c)),n.xEnd<e&&(m=e-w(l.width,n.zoomX),x=e),n.xStart=m,n.xEnd=x,n},zoomConstraint=(d,s,r,l)=>{const t=Object.assign({},s),o=l(),i=t.xEnd-t.xStart,a=i<r.minCandles,n=o.width/r.minWidth,e=i>n;if(o.width>0){if(e)return t.xStart=t.xEnd-n,t.zoomX=E(t.xEnd-t.xStart,o.width),t;if(a)return t.xEnd=d.xEnd,t.xStart=t.xEnd-r.minCandles,t.zoomX=E(t.xEnd-t.xStart,o.width),t}return t};
+import { at } from '../../utils/array.utils';
+import { calculateZoom, pixelsToUnits } from './viewport.model';
+/**
+ * Return constraited state that handled zooming and moving chart near first/last candles
+ * this and other constraits that works with state should mutate and return state
+ * @param initialState
+ * @param state
+ * @param visualCandlesCoordinates
+ * @param candleLimit
+ * @param bounds
+ * @returns
+ * @doc-tags viewport,zoom,scaling
+ */
+export const candleEdgesConstrait = (state, visualCandlesCoordinates, candleLimit, bounds) => {
+    var _a, _b, _c, _d;
+    const newState = Object.assign({}, state);
+    const leftConstraitCoordinate = (_b = (_a = visualCandlesCoordinates[candleLimit]) === null || _a === void 0 ? void 0 : _a.startUnit) !== null && _b !== void 0 ? _b : 0;
+    const rightConstraintCoordinate = (_d = (_c = at(-candleLimit, visualCandlesCoordinates)) === null || _c === void 0 ? void 0 : _c.startUnit) !== null && _d !== void 0 ? _d : 0;
+    let normalizedXStart = state.xStart;
+    let normalizedXEnd = state.xEnd;
+    if (newState.xStart >= rightConstraintCoordinate) {
+        normalizedXStart = rightConstraintCoordinate;
+        normalizedXEnd = normalizedXEnd - (newState.xStart - rightConstraintCoordinate);
+    }
+    if (newState.xEnd < leftConstraitCoordinate) {
+        normalizedXStart = leftConstraitCoordinate - pixelsToUnits(bounds.width, newState.zoomX);
+        normalizedXEnd = leftConstraitCoordinate;
+    }
+    newState.xStart = normalizedXStart;
+    newState.xEnd = normalizedXEnd;
+    return newState;
+};
+/**
+ * This function limits minimum and maximum chart viewport dependening on visible x-units
+ * @returns
+ * @doc-tags viewport,zoom,scaling
+ */
+export const zoomConstraint = (initialState, state, chartConfig, boundsProvider) => {
+    const newState = Object.assign({}, state);
+    const bounds = boundsProvider();
+    // 1 - is an average candle width: newXEnd - newXStart = avg candles amount in the viewport
+    const avgCandlesInViewport = newState.xEnd - newState.xStart;
+    const minViewportReached = avgCandlesInViewport < chartConfig.minCandles;
+    const maxCandlesInViewport = bounds.width / chartConfig.minWidth;
+    const maxViewportReached = avgCandlesInViewport > maxCandlesInViewport;
+    // rules work only if chart is shown
+    if (bounds.width > 0) {
+        if (maxViewportReached) {
+            newState.xStart = newState.xEnd - maxCandlesInViewport;
+            newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
+            return newState;
+        }
+        if (minViewportReached) {
+            newState.xEnd = initialState.xEnd;
+            newState.xStart = newState.xEnd - chartConfig.minCandles;
+            newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
+            return newState;
+        }
+    }
+    return newState;
+};

package/dist/chart/model/scaling/lock-ratio.model.js

@@ -3,4 +3,20 @@
  * 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 ratioFromZoomXY=(o,n)=>o/n,zoomXToZoomY=(o,n)=>o/n,zoomYToZoomX=(o,n)=>o*n,lockedYEndViewportCalculator=(o,n)=>{const Y=o.zoomY;o.zoomY=zoomXToZoomY(o.zoomX,n);const c=o.zoomY/Y,m=o.yEnd-o.yStart,r=m*c-m;o.yEnd=o.yEnd+r};
+export const ratioFromZoomXY = (zoomX, zoomY) => zoomX / zoomY;
+export const zoomXToZoomY = (zoomX, ratio) => zoomX / ratio;
+export const zoomYToZoomX = (zoomY, ratio) => zoomY * ratio;
+/**
+ * Locks the zoomY with zoomX and moves yEnd according to ratio changes.
+ * @param state
+ * @param zoomXYRatio
+ */
+export const lockedYEndViewportCalculator = (state, zoomXYRatio) => {
+    const prevZoomY = state.zoomY;
+    state.zoomY = zoomXToZoomY(state.zoomX, zoomXYRatio);
+    const zoomYMult = state.zoomY / prevZoomY;
+    const lastYHeight = state.yEnd - state.yStart;
+    const newYHeight = lastYHeight * zoomYMult;
+    const delta = newYHeight - lastYHeight;
+    state.yEnd = state.yEnd + delta;
+};

package/dist/chart/model/scaling/move-chart.functions.js

@@ -3,4 +3,25 @@
  * 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 moveXStart=(n,o)=>{const r=n.xStart;n.xStart=o,n.xEnd=n.xEnd+(o-r)},moveYStart=(n,o)=>{const r=n.yStart;n.yStart=o,n.yEnd=n.yEnd+(o-r)};
+/**
+ * Moves both xStart and xEnd without changing the viewport width (zoomX).
+ * @param state
+ * @param xStart - left starting point in units
+ * @doc-tags scaling,viewport
+ */
+export const moveXStart = (state, xStart) => {
+    const prev = state.xStart;
+    state.xStart = xStart;
+    state.xEnd = state.xEnd + (xStart - prev);
+};
+/**
+ * Moves both yStart and yEnd without changing the viewport height (zoomY).
+ * @param state
+ * @param yStart - starting point in units
+ * @doc-tags scaling,viewport
+ */
+export const moveYStart = (state, yStart) => {
+    const prev = state.yStart;
+    state.yStart = yStart;
+    state.yEnd = state.yEnd + (yStart - prev);
+};

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -19,8 +19,8 @@ export type Timestamp = Unit;
 export type Percent = Unit;
 export type LogValue = Unit;
 export type YUnit = Price | Percent | LogValue;
-export declare const unitToPercent: (value: Unit, baseLine: Unit) => Percent;
-export declare const percentToUnit: (percent: Percent, baseLine: Unit) => Unit;
+export declare const unitToPercent: (value: Unit, baseline: Unit) => Percent;
+export declare const percentToUnit: (percent: Percent, baseline: Unit) => Unit;
 export declare const calcLogValue: (value: Price) => LogValue;
 export declare const logValueToUnit: (logValue: LogValue) => number;
 /**

package/dist/chart/model/scaling/viewport.model.js

@@ -3,4 +3,282 @@
  * 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{Subject as n}from"rxjs";import{distinctUntilChanged as o,map as r,share as h}from"rxjs/operators";import{ChartBaseElement as a}from"../chart-base-element";import{keys as d}from"../../utils/object.utils";export const calculateZoom=(e,t)=>e/t,unitToPixels=(e,t)=>e/t,pixelsToUnits=(e,t)=>e*t,unitToPercent=(e,t)=>(e-t)*100/t,percentToUnit=(e,t)=>e*t/100+t,calcLogValue=e=>Math.log2(e),logValueToUnit=e=>Math.pow(2,e);export class ViewportModel extends a{constructor(){super(...arguments),this._xStart=0,this._xEnd=0,this._yStart=0,this._yEnd=0,this._zoomX=1,this._zoomY=1,this._inverseY=!1,this.changed=new n,this.xChanged=this.changed.pipe(r(()=>({start:this.xStart,end:this.xEnd})),o((t,s)=>t.start===s.start&&t.end===s.end),h()),this.yChanged=this.changed.pipe(r(()=>({start:this.yStart,end:this.yEnd})),o((t,s)=>t.start===s.start&&t.end===s.end),h())}toX(t){return this.getBounds().x+unitToPixels(t-this.xStart,this.zoomX)}xPixels(t){return unitToPixels(t,this.zoomX)}toY(t){return this.inverseY?this.getBounds().y+unitToPixels(t-this.yStart,this.zoomY):this.getBounds().y+this.getBounds().height-unitToPixels(t-this.yStart,this.zoomY)}yPixels(t){return unitToPixels(t,this.zoomY)}fromX(t){const s=t-this.getBounds().x;return pixelsToUnits(s+unitToPixels(this.xStart,this.zoomX),this.zoomX)}fromY(t){const s=t-this.getBounds().y;return this.inverseY?pixelsToUnits(s+unitToPixels(this.yStart,this.zoomY),this.zoomY):pixelsToUnits(this.getBounds().height-s+unitToPixels(this.yStart,this.zoomY),this.zoomY)}recalculateZoomX(){this.zoomX=this.calculateZoomX(this.xStart,this.xEnd)}recalculateZoomY(){this.zoomY=this.calculateZoomY(this.yStart,this.yEnd)}calculateZoomX(t,s){return calculateZoom(s-t,this.getBounds().width)}calculateZoomY(t,s){return calculateZoom(s-t,this.getBounds().height)}recalculateZoom(t=!0){this.recalculateZoomX(),this.recalculateZoomY(),t&&this.fireChanged()}setXScale(t,s,i=!0){this.xStart=t,this.xEnd=s,this.recalculateZoomX(),i&&this.fireChanged()}setYScale(t,s,i=!0){this.yStart=t,this.yEnd=s,this.recalculateZoomY(),i&&this.fireChanged()}export(){return{xStart:this.xStart,xEnd:this.xEnd,yStart:this.yStart,yEnd:this.yEnd,zoomX:this.zoomX,zoomY:this.zoomY,inverseY:this.inverseY}}apply(t){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.inverseY=t.inverseY,this.fireChanged()}fireChanged(){this.changed.next()}get xStart(){return this._xStart}set xStart(t){this._xStart=t}get xEnd(){return this._xEnd}set xEnd(t){this._xEnd=t}get yStart(){return this._yStart}set yStart(t){this._yStart=t}get yEnd(){return this._yEnd}set yEnd(t){this._yEnd=t}get zoomX(){return this._zoomX}set zoomX(t){this._zoomX=t}get zoomY(){return this._zoomY}set zoomY(t){this._zoomY=t}get inverseY(){return this._inverseY}set inverseY(t){this._inverseY=t}isViewportValid(){return this.xStart!==this.xEnd&&this.yStart!==this.yEnd&&isFinite(this.yStart)&&isFinite(this.yEnd)}}export const compareStates=(e,t)=>!d(e).some(s=>e[s]!==t[s]);
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, map, share } from 'rxjs/operators';
+import { ChartBaseElement } from '../chart-base-element';
+import { keys } from '../../utils/object.utils';
+export const calculateZoom = (viewportUnits, viewportPixels) => viewportUnits / viewportPixels;
+export const unitToPixels = (units, zoom) => units / zoom;
+export const pixelsToUnits = (px, zoom) => px * zoom;
+export const unitToPercent = (value, baseline) => ((value - baseline) * 100) / baseline;
+export const percentToUnit = (percent, baseline) => (percent * baseline) / 100 + baseline;
+// log calculations
+export const calcLogValue = (value) => Math.log2(value);
+export const logValueToUnit = (logValue) => Math.pow(2, logValue);
+/**
+ * Abstract viewport model.
+ * Viewport has 4 coordinates: xStart, xEnd, yStart and yEnd - all stored in {@link Unit}.
+ * Main methods:
+ * - {@link toX} - converts xUnits to xPixels
+ * - {@link toY} - converts yUnits to yPixels
+ * - {@link fromX} - converts xPixels to xUnits
+ * - {@link fromY} - converts yPixels to yUnits
+ *
+ * To convert unit-pixels and vice versa uses {@link getBounds} method.
+ * zoomX and zoomY are proportions between units and pixels.
+ */
+export class ViewportModel extends ChartBaseElement {
+    constructor() {
+        super(...arguments);
+        //region base viewport model props
+        this._xStart = 0;
+        this._xEnd = 0;
+        this._yStart = 0;
+        this._yEnd = 0;
+        this._zoomX = 1;
+        this._zoomY = 1;
+        //endregion
+        // toggle Y inverse mode
+        this._inverseY = false;
+        //region subjects
+        this.changed = new Subject();
+        this.xChanged = this.changed.pipe(map(() => ({
+            start: this.xStart,
+            end: this.xEnd,
+        })), distinctUntilChanged((p, c) => p.start === c.start && p.end === c.end), share());
+        this.yChanged = this.changed.pipe(map(() => ({
+            start: this.yStart,
+            end: this.yEnd,
+        })), distinctUntilChanged((p, c) => p.start === c.start && p.end === c.end), share());
+    }
+    //endregion
+    //region conversion methods
+    /**
+     * Converts a unit value to pixels based on the current zoom level and xStart value.
+     * @param {Unit} unit - The unit value to be converted to pixels.
+     * @returns {Pixel} - The converted pixel value.
+     */
+    toX(unit) {
+        return this.getBounds().x + unitToPixels(unit - this.xStart, this.zoomX);
+    }
+    /**
+     * Converts a unit value to pixels based on the current zoom level in the x-axis.
+     * @param {Unit} unit - The unit value to be converted to pixels.
+     * @returns {Pixel} - The converted value in pixels.
+     */
+    xPixels(unit) {
+        return unitToPixels(unit, this.zoomX);
+    }
+    /**
+     * Converts a given unit value to pixel value in the Y-axis.
+     * @param {Unit} unit - The unit value to be converted to pixel value.
+     * @returns {Pixel} - The pixel value of the given unit value in the Y-axis.
+     */
+    toY(unit) {
+        if (this.inverseY) {
+            return this.getBounds().y + unitToPixels(unit - this.yStart, this.zoomY);
+        }
+        else {
+            // inverse by default because canvas calculation [0,0] point starts from top-left corner
+            return this.getBounds().y + this.getBounds().height - unitToPixels(unit - this.yStart, this.zoomY);
+        }
+    }
+    /**
+     * Converts a unit value to pixels based on the current zoom level in the Y axis.
+     * @param {Unit} unit - The unit value to be converted to pixels.
+     * @returns {Pixel} - The converted value in pixels.
+     */
+    yPixels(unit) {
+        return unitToPixels(unit, this.zoomY);
+    }
+    /**
+     * Converts a pixel value to a unit value based on the current zoom level and xStart value.
+     * @param {Pixel} px - The pixel value to convert to unit value.
+     * @returns {Unit} - The converted unit value.
+     */
+    fromX(px) {
+        const normalizedPx = px - this.getBounds().x;
+        return pixelsToUnits(normalizedPx + unitToPixels(this.xStart, this.zoomX), this.zoomX);
+    }
+    /**
+     * Converts a pixel value to a unit value along the y-axis.
+     * @param {Pixel} px - The pixel value to be converted.
+     * @returns {void}
+     */
+    fromY(px) {
+        const normalizedPx = px - this.getBounds().y;
+        if (this.inverseY) {
+            return pixelsToUnits(normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
+        }
+        else {
+            // inverse by default because canvas calculation [0,0] point starts from top-left corner
+            return pixelsToUnits(this.getBounds().height - normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
+        }
+    }
+    //endregion
+    /**
+     * Recalculates the zoom factor for the x-axis based on the start and end values of the x-axis.
+     * @function
+     * @name recalculateZoomX
+     * @memberof ClassName
+     * @instance
+     * @returns {void}
+     */
+    recalculateZoomX() {
+        this.zoomX = this.calculateZoomX(this.xStart, this.xEnd);
+    }
+    /**
+     * Recalculates the zoomY property of the object.
+     * The zoomY property is calculated using the yStart and yEnd properties of the object.
+     * @function
+     * @name recalculateZoomY
+     * @memberof Object
+     * @instance
+     * @returns {void}
+     */
+    recalculateZoomY() {
+        this.zoomY = this.calculateZoomY(this.yStart, this.yEnd);
+    }
+    /**
+     * Calculates the zoom factor for the x-axis based on the start and end units.
+     * @param {Unit} start - The start unit.
+     * @param {Unit} end - The end unit.
+     * @returns {Zoom} The zoom factor for the x-axis.
+     */
+    calculateZoomX(start, end) {
+        return calculateZoom(end - start, this.getBounds().width);
+    }
+    /**
+     * Calculates the zoom factor for the Y axis based on the start and end units.
+     * @param {Unit} start - The start unit.
+     * @param {Unit} end - The end unit.
+     * @returns {Zoom} The zoom factor for the Y axis.
+     */
+    calculateZoomY(start, end) {
+        return calculateZoom(end - start, this.getBounds().height);
+    }
+    /**
+     * Should be called when x/y start/end changes.
+     */
+    recalculateZoom(fireChanged = true) {
+        this.recalculateZoomX();
+        this.recalculateZoomY();
+        fireChanged && this.fireChanged();
+    }
+    /**
+     * Moves the viewport to exactly xStart..xEnd place.
+     * (you need to fire DRAW event after this)
+     * @param xStart - viewport start in units
+     * @param xEnd - viewport end in units
+     * @param fireChanged - fire changed event
+     */
+    setXScale(xStart, xEnd, fireChanged = true) {
+        this.xStart = xStart;
+        this.xEnd = xEnd;
+        this.recalculateZoomX();
+        fireChanged && this.fireChanged();
+    }
+    /**
+     * Moves the viewport to exactly yStart..yEnd place.
+     * (you need to fire DRAW event after this)
+     * @param yStart - viewport start in units
+     * @param yEnd - viewport end in units
+     * @param fireChanged - fire changed event
+     */
+    setYScale(yStart, yEnd, fireChanged = true) {
+        this.yStart = yStart;
+        this.yEnd = yEnd;
+        this.recalculateZoomY();
+        fireChanged && this.fireChanged();
+    }
+    /**
+     * Exports current state of VM.
+     */
+    export() {
+        return {
+            xStart: this.xStart,
+            xEnd: this.xEnd,
+            yStart: this.yStart,
+            yEnd: this.yEnd,
+            zoomX: this.zoomX,
+            zoomY: this.zoomY,
+            inverseY: this.inverseY,
+        };
+    }
+    /**
+     * Applies the state to current VM.
+     * @param state
+     */
+    apply(state) {
+        this.xStart = state.xStart;
+        this.xEnd = state.xEnd;
+        this.yStart = state.yStart;
+        this.yEnd = state.yEnd;
+        this.zoomX = state.zoomX;
+        this.zoomY = state.zoomY;
+        this.inverseY = state.inverseY;
+        this.fireChanged();
+    }
+    /**
+     * Emits a notification that the object has changed.
+     * @function
+     * @name fireChanged
+     * @memberof ClassName
+     * @instance
+     * @returns {void}
+     */
+    fireChanged() {
+        this.changed.next();
+    }
+    get xStart() {
+        return this._xStart;
+    }
+    set xStart(value) {
+        this._xStart = value;
+    }
+    get xEnd() {
+        return this._xEnd;
+    }
+    set xEnd(value) {
+        this._xEnd = value;
+    }
+    get yStart() {
+        return this._yStart;
+    }
+    set yStart(value) {
+        this._yStart = value;
+    }
+    get yEnd() {
+        return this._yEnd;
+    }
+    set yEnd(value) {
+        this._yEnd = value;
+    }
+    get zoomX() {
+        return this._zoomX;
+    }
+    set zoomX(value) {
+        this._zoomX = value;
+    }
+    get zoomY() {
+        return this._zoomY;
+    }
+    set zoomY(value) {
+        this._zoomY = value;
+    }
+    get inverseY() {
+        return this._inverseY;
+    }
+    set inverseY(value) {
+        this._inverseY = value;
+    }
+    /**
+     * Checks if the viewport is valid.
+     *
+     * @returns {boolean} - Returns true if the viewport is valid, false otherwise.
+     */
+    isViewportValid() {
+        return this.xStart !== this.xEnd && this.yStart !== this.yEnd && isFinite(this.yStart) && isFinite(this.yEnd);
+    }
+}
+export const compareStates = (a, b) => !keys(a).some(k => a[k] !== b[k]);

package/dist/chart/model/scaling/x-zooming.functions.js

@@ -3,4 +3,38 @@
  * 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 zoomXToPercentViewportCalculator=(n,o,r,x,E)=>{const d=(o.xEnd-o.xStart)*x,l=d*r,c=d*(1-r);return E?(o.xStart=o.xStart+l,o.xEnd=o.xEnd-c):(o.xStart=o.xStart-l,o.xEnd=o.xEnd+c),o.zoomX=n.calculateZoomX(o.xStart,o.xEnd),o},zoomXToEndViewportCalculator=(n,o,r,x)=>zoomXToPercentViewportCalculator(n,o,1,r,x);
+/**
+ * Zooms to percentage of viewport proportionally.
+ * @param vm
+ * @param state
+ * @param viewportPercent
+ * @param zoomStrength - 0..1 number, 1=max strength
+ * @param zoomIn
+ * @doc-tags viewport,zoom,scaling
+ */
+export const zoomXToPercentViewportCalculator = (vm, state, viewportPercent, zoomStrength, zoomIn) => {
+    const deltaWidth = (state.xEnd - state.xStart) * zoomStrength;
+    const deltaStart = deltaWidth * viewportPercent;
+    const deltaEnd = deltaWidth * (1 - viewportPercent);
+    if (zoomIn) {
+        state.xStart = state.xStart + deltaStart;
+        state.xEnd = state.xEnd - deltaEnd;
+    }
+    else {
+        state.xStart = state.xStart - deltaStart;
+        state.xEnd = state.xEnd + deltaEnd;
+    }
+    state.zoomX = vm.calculateZoomX(state.xStart, state.xEnd);
+    return state;
+};
+/**
+ * Zooms to viewports end.
+ * @param vm
+ * @param state
+ * @param zoomStrength - 0..1 number, 1=max strength
+ * @param zoomIn
+ * @doc-tags viewport,zoom,scaling
+ */
+export const zoomXToEndViewportCalculator = (vm, state, zoomStrength, zoomIn) => {
+    return zoomXToPercentViewportCalculator(vm, state, 1, zoomStrength, zoomIn);
+};

package/dist/chart/model/time-zone.model.js

@@ -3,4 +3,112 @@
  * 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{getTimezoneOffset as n}from"date-fns-tz";import{ReplaySubject as s}from"rxjs";import{memoize as f}from"../utils/perfomance/memoize.utils";import{dateTimeFormatterFactory as c}from"./date-time.formatter";export const memoizedTZOffset=f(n),getTimezoneOffset=(r,e)=>new Date(e).getTimezoneOffset()*60*1e3+memoizedTZOffset(r,e);export class TimeZoneModel{constructor(e){this.config=e,this.timeZoneChangedSubject=new s,this.currentTzOffset=t=>this.getOffset(this.config.timezone,t),this.formatterCache={},this.getOffset=(t,i)=>getTimezoneOffset(t,i),this.dateTimeFormatterFactory=this.initFormatterFactory(this.config.dateFormatter)}setTimeZone(e){this.config.timezone=e,this.formatterCache={},this.timeZoneChangedSubject.next(e)}observeTimeZoneChanged(){return this.timeZoneChangedSubject.asObservable()}initFormatterFactory(e){let t;if(e&&typeof e=="function")t=e;else if(e&&e.createFormatterFunction&&typeof e.createFormatterFunction=="function"){const i=e.createFormatterFunction;t=o=>i(o).bind(e)}else t=c(this.config,this.tzOffset);return t}getFormatterFactory(){return this.dateTimeFormatterFactory}getDateTimeFormatter(e){return this.formatterCache[e]===void 0&&(this.formatterCache[e]=this.dateTimeFormatterFactory(e)),this.formatterCache[e]}tzOffset(e){const t=o=>-new Date(o).getTimezoneOffset()*a;let i;return e?i=o=>memoizedTZOffset(e,o):i=t,o=>new Date(+o+i(o)-t(o))}}const a=60*1e3;
+import { getTimezoneOffset as getTimezoneOffsetDateFnsTz } from 'date-fns-tz';
+import { ReplaySubject } from 'rxjs';
+import { memoize } from '../utils/performance/memoize.utils';
+import { dateTimeFormatterFactory } from './date-time.formatter';
+export const memoizedTZOffset = memoize(getTimezoneOffsetDateFnsTz);
+export const getTimezoneOffset = (timezone, time) => {
+    // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
+    const localOffset = new Date(time).getTimezoneOffset() * 60 * 1000;
+    return localOffset + memoizedTZOffset(timezone, time);
+};
+export class TimeZoneModel {
+    constructor(config) {
+        this.config = config;
+        this.timeZoneChangedSubject = new ReplaySubject();
+        this.currentTzOffset = (time) => this.getOffset(this.config.timezone, time);
+        this.formatterCache = {};
+        /**
+         * Calculates the offset of a given timezone from the local timezone.
+         * @private
+         * @param {string} timezone - The timezone to calculate the offset for.
+         */
+        this.getOffset = (timezone, time) => getTimezoneOffset(timezone, time);
+        this.dateTimeFormatterFactory = this.initFormatterFactory(this.config.dateFormatter);
+    }
+    /**
+     * Sets the timezone for the configuration and updates the current timezone offset.
+     * @param {string} timeZone - The timezone to set.
+     * @returns {void}
+     */
+    setTimeZone(timeZone) {
+        this.config.timezone = timeZone;
+        this.formatterCache = {};
+        this.timeZoneChangedSubject.next(timeZone);
+    }
+    /**
+     * Returns an Observable that emits a string value when the time zone is changed.
+     * The Observable is created from the timeZoneChangedSubject Subject.
+     * @returns {Observable<string>} An Observable that emits a string value when the time zone is changed.
+     */
+    observeTimeZoneChanged() {
+        return this.timeZoneChangedSubject.asObservable();
+    }
+    /**
+     * Initializes a DateTimeFormatterFactory object.
+     * @param {DateFormatter} [dateFormatter] - Optional DateFormatter object.
+     * @returns {DateTimeFormatterFactory} - Returns a DateTimeFormatterFactory object.
+     * If a plain function is provided as the dateFormatter parameter, it will be used as a date formatter without applying UTC datetime override for candles more than 1d period.
+     * If a custom date formatter exists, it will be used for datetime formatting applying optionally UTC datetime override for candles more than 1d period.
+     * If no dateFormatter is provided, a default DateTimeFormatterFactory object will be returned.
+     */
+    initFormatterFactory(dateFormatter) {
+        let result;
+        if (dateFormatter && typeof dateFormatter === 'function') {
+            // backward compatibility - if date formatter is a plain function then there is no need to use UTC datetime
+            // override for candles more than 1d period
+            result = dateFormatter;
+        }
+        else if (dateFormatter &&
+            dateFormatter.createFormatterFunction &&
+            typeof dateFormatter.createFormatterFunction === 'function') {
+            // if custom date formatter exists we use it for datetime formatting applying optionally
+            // UTC datetime override for candles more than 1d period
+            const createFormatter = dateFormatter.createFormatterFunction;
+            result = (pattern) => createFormatter(pattern).bind(dateFormatter);
+        }
+        else {
+            result = dateTimeFormatterFactory(this.config, this.tzOffset);
+        }
+        return result;
+    }
+    /**
+     * Returns the DateTimeFormatterFactory instance used by this class.
+     *
+     * @returns {DateTimeFormatterFactory} The DateTimeFormatterFactory instance used by this class.
+     */
+    getFormatterFactory() {
+        return this.dateTimeFormatterFactory;
+    }
+    getDateTimeFormatter(format) {
+        if (this.formatterCache[format] === undefined) {
+            this.formatterCache[format] = this.dateTimeFormatterFactory(format);
+        }
+        return this.formatterCache[format];
+    }
+    /**
+     * Gets the timezone offset value in milliseconds
+     * @param {string} timezone name
+     * @returns {function(time:Number):Date}
+     */
+    tzOffset(timezone) {
+        // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
+        const localOffset = (time) => -new Date(time).getTimezoneOffset() * timeMultiplier;
+        let offset;
+        if (!timezone) {
+            offset = localOffset;
+        }
+        else {
+            // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
+            offset = (time) => memoizedTZOffset(timezone, time);
+        }
+        // In JS Date object is created with local tz offset,
+        // so we have to subtract localOffset from current time
+        return time => {
+            return new Date(+time + offset(time) - localOffset(time));
+        };
+    }
+}
+// 1 hour in milliseconds
+const timeMultiplier = 60 * 1000;