@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/dist/chart/components/highlights/highlights.component.js

@@ -3,4 +3,49 @@
  * 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{HighlightsModel as r}from"./highlights.model";import{HighlightsDrawer as l}from"./highlights.drawer";import{ChartBaseElement as o}from"../../model/chart-base-element";const d="HIGHLIGHTS_PLUGIN";export class HighlightsComponent extends o{constructor(h,i,t,s,e,g){super(),this.eventBus=h,this.config=i,this.highlightsModel=new r(t),this.addChildEntity(this.highlightsModel),this.highLightsDrawer=new l(this.highlightsModel,t,s,e,i),g.addDrawer(this.highLightsDrawer,d)}getHighlights(){return this.highlightsModel.getHighlights()}setHighlights(h){this.highlightsModel.setHighlights(h)}setHighlightsVisible(h=!0){this.config.components.highlights.visible=h,this.eventBus.fireDraw(this.highLightsDrawer.getCanvasIds())}observeHighlightsUpdated(){return this.highlightsModel.observeHighlightsUpdated()}}
+import { HighlightsModel } from './highlights.model';
+import { HighlightsDrawer } from './highlights.drawer';
+import { ChartBaseElement } from '../../model/chart-base-element';
+const HIGHLIGHTS_DRAWER_TYPE = 'HIGHLIGHTS_PLUGIN';
+export class HighlightsComponent extends ChartBaseElement {
+    constructor(eventBus, config, chartModel, canvasModel, canvasBoundsContainer, drawingManager) {
+        super();
+        this.eventBus = eventBus;
+        this.config = config;
+        this.highlightsModel = new HighlightsModel(chartModel);
+        this.addChildEntity(this.highlightsModel);
+        this.highLightsDrawer = new HighlightsDrawer(this.highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config);
+        drawingManager.addDrawer(this.highLightsDrawer, HIGHLIGHTS_DRAWER_TYPE);
+    }
+    /**
+     * Returns the highlights from the highlightsModel
+     * @returns {Array} An array of highlights
+     */
+    getHighlights() {
+        return this.highlightsModel.getHighlights();
+    }
+    /**
+     * Sets the highlights of the highlights model.
+     * @param {Highlight[]} highlights - An array of Highlight objects to be set as the highlights of the model.
+     * @returns {void}
+     */
+    setHighlights(highlights) {
+        this.highlightsModel.setHighlights(highlights);
+    }
+    /**
+     * Sets the visibility of the highlights component.
+     * @param {boolean} visible - A boolean value indicating whether the highlights should be visible or not. Default value is true.
+     * @returns {void}
+     */
+    setHighlightsVisible(visible = true) {
+        this.config.components.highlights.visible = visible;
+        this.eventBus.fireDraw(this.highLightsDrawer.getCanvasIds());
+    }
+    /**
+     * Returns an observable that emits when the highlights are updated.
+     * @returns {Observable} An observable that emits when the highlights are updated.
+     */
+    observeHighlightsUpdated() {
+        return this.highlightsModel.observeHighlightsUpdated();
+    }
+}

package/dist/chart/components/highlights/highlights.drawer.js

@@ -3,4 +3,157 @@
  * 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{calculateTextWidth as A}from"../../utils/canvas/canvas-font-measure-tool.utils";import{HIGHLIGHTS_TYPES as F}from"./highlights.model";import{CanvasElement as x}from"../../canvas/canvas-bounds-container";import{unitToPixels as X}from"../../model/scaling/viewport.model";import{clipToBounds as G}from"../../drawers/data-series.drawer";const n=[20,10];export class HighlightsDrawer{constructor(e,o,s,l,i){this.highlightsModel=e,this.chartModel=o,this.canvasModel=s,this.canvasBoundsContainer=l,this.config=i}draw(){var e,o,s,l;if(this.config.components.highlights.visible){const i=this.chartModel.getCandles(),t=this.canvasModel.ctx,d=this.highlightsModel.getVisualHighlights();if(this.highlightsModel.getHighlights().length&&i.length!==0&&this.chartModel.scaleModel.isScaleReady()){const r=this.canvasBoundsContainer.getBounds(x.ALL_PANES);t.save(),G(t,r);const w=(e=this.config.components.highlights.border.width)!==null&&e!==void 0?e:1,E=(o=this.config.components.highlights.border.dash)!==null&&o!==void 0?o:[0,0],H=(s=this.config.components.highlights.fontSize)!==null&&s!==void 0?s:11,L=(l=this.config.components.highlights.fontFamily)!==null&&l!==void 0?l:"monospace",p=`${H}px ${L}, monospace`;t.font=p,t.lineWidth=w,t.setLineDash(E),F.forEach(y=>{var f,g;const S=d[y];if(S){const a=this.config.colors.highlights[y],k=(f=a==null?void 0:a.border)!==null&&f!==void 0?f:"#ffffff",B=(g=a==null?void 0:a.background)!==null&&g!==void 0?g:"#ffffff";t.save(),t.beginPath(),t.fillStyle=B,t.strokeStyle=k,S.forEach(h=>{var v,m,b;const P=this.chartModel.candleFromTimestamp(h.from),D=X(P.width,this.chartModel.scaleModel.zoomX),c=P.xStart(this.chartModel.scaleModel),_=this.chartModel.candleFromTimestamp(h.to),C=X(_.width,this.chartModel.scaleModel.zoomX),u=_.xStart(this.chartModel.scaleModel)+C;if(h.border&&this.drawBorders(h.border,t,c+D,u-C,r),t.fillRect(c,r.y,u-c,r.y+r.height),h.label){const T=(v=h.label.text)!==null&&v!==void 0?v:"",M=this.config.colors.highlights[h.type];t.save(),t.fillStyle=(m=M==null?void 0:M.label)!==null&&m!==void 0?m:"#ffffff";const I=A(T,t,p),[W,z]=this.resolveHighlightLabelPosition((b=h.label.placement)!==null&&b!==void 0?b:"left-left",r,[c,u],I);t.fillText(T,W,z),t.restore()}}),t.closePath(),t.restore()}}),t.restore()}}}resolveHighlightLabelPosition(e,o,s,l){const[i,t]=s;switch(e){case"right-left":return[t-n[1]-l,o.y+n[0]];case"left-left":return[i-n[1]-l,o.y+n[0]];case"right-right":return[t+n[1],o.y+n[0]];case"left-right":default:return[i+n[1],o.y+n[0]]}}drawBorders(e,o,s,l,i){const t=e.left,d=e.right;t&&(o.beginPath(),o.moveTo(s,i.y),o.lineTo(s,i.y+i.height),o.stroke(),o.closePath()),d&&(o.beginPath(),o.moveTo(l,i.y),o.lineTo(l,i.y+i.height),o.stroke(),o.closePath())}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
+import { HIGHLIGHTS_TYPES } from './highlights.model';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { unitToPixels } from '../../model/scaling/viewport.model';
+import { clipToBounds } from '../../drawers/data-series.drawer';
+const LABEL_PADDINGS = [20, 10];
+export class HighlightsDrawer {
+    constructor(highlightsModel, chartModel, canvasModel, canvasBoundsContainer, config) {
+        this.highlightsModel = highlightsModel;
+        this.chartModel = chartModel;
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.config = config;
+    }
+    /**
+     * Draws highlights on the chart canvas if they are visible.
+     * @function
+     * @name draw
+     * @memberof ChartComponent.prototype
+     *
+     * @returns {void}
+     *
+     * @example
+     * chartComponent.draw();
+     */
+    draw() {
+        var _a, _b, _c, _d;
+        if (this.config.components.highlights.visible) {
+            const candles = this.chartModel.getCandles();
+            const ctx = this.canvasModel.ctx;
+            const highlights = this.highlightsModel.getVisualHighlights();
+            const highlightsExist = this.highlightsModel.getHighlights().length;
+            if (highlightsExist && candles.length !== 0 && this.chartModel.scale.isScaleReady()) {
+                const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES);
+                ctx.save();
+                //clip rect to throw away everything that doesn't fit chart bounds
+                clipToBounds(ctx, chartBounds);
+                const borderWidth = (_a = this.config.components.highlights.border.width) !== null && _a !== void 0 ? _a : 1;
+                const borderDash = (_b = this.config.components.highlights.border.dash) !== null && _b !== void 0 ? _b : [0, 0];
+                const fontSize = (_c = this.config.components.highlights.fontSize) !== null && _c !== void 0 ? _c : 11;
+                const fontFamily = (_d = this.config.components.highlights.fontFamily) !== null && _d !== void 0 ? _d : 'monospace';
+                const font = `${fontSize}px ${fontFamily}, monospace`;
+                ctx.font = font;
+                ctx.lineWidth = borderWidth;
+                ctx.setLineDash(borderDash);
+                HIGHLIGHTS_TYPES.forEach(highlightType => {
+                    var _a, _b;
+                    const items = highlights[highlightType];
+                    if (items) {
+                        const itemColors = this.config.colors.highlights[highlightType];
+                        const strokeStyle = (_a = itemColors === null || itemColors === void 0 ? void 0 : itemColors.border) !== null && _a !== void 0 ? _a : '#ffffff';
+                        const fillStyle = (_b = itemColors === null || itemColors === void 0 ? void 0 : itemColors.background) !== null && _b !== void 0 ? _b : '#ffffff';
+                        ctx.save();
+                        // start line path to draw highlights' borders
+                        // it is done once for all highlights because it is more perfomant
+                        ctx.beginPath();
+                        ctx.fillStyle = fillStyle;
+                        ctx.strokeStyle = strokeStyle;
+                        items.forEach(item => {
+                            var _a, _b, _c;
+                            const fromXCandle = this.chartModel.candleFromTimestamp(item.from);
+                            const fromXCandleWidth = unitToPixels(fromXCandle.width, this.chartModel.scale.zoomX);
+                            const fromX = fromXCandle.xStart(this.chartModel.scale);
+                            const toXCandle = this.chartModel.candleFromTimestamp(item.to);
+                            const toXCandleWidth = unitToPixels(toXCandle.width, this.chartModel.scale.zoomX);
+                            const toX = toXCandle.xStart(this.chartModel.scale) + toXCandleWidth;
+                            // draw highlight' borders
+                            if (item.border) {
+                                this.drawBorders(item.border, ctx, fromX + fromXCandleWidth, toX - toXCandleWidth, chartBounds);
+                            }
+                            // draw highlight' background
+                            ctx.fillRect(fromX, chartBounds.y, toX - fromX, chartBounds.y + chartBounds.height);
+                            // draw highlight' label
+                            if (item.label) {
+                                const label = (_a = item.label.text) !== null && _a !== void 0 ? _a : '';
+                                const itemColors = this.config.colors.highlights[item.type];
+                                ctx.save();
+                                ctx.fillStyle = (_b = itemColors === null || itemColors === void 0 ? void 0 : itemColors.label) !== null && _b !== void 0 ? _b : '#ffffff';
+                                const labelWidth = calculateTextWidth(label, ctx, font);
+                                const [labelX, labelY] = this.resolveHighlightLabelPosition((_c = item.label.placement) !== null && _c !== void 0 ? _c : 'left-left', chartBounds, [fromX, toX], labelWidth);
+                                ctx.fillText(label, labelX, labelY);
+                                ctx.restore();
+                            }
+                        });
+                        ctx.closePath();
+                        ctx.restore();
+                    }
+                });
+                ctx.restore();
+            }
+        }
+    }
+    /**
+     * Calculates the position of the highlight label based on the given parameters.
+     * @param {HighlightTextPlacement} placement - The placement of the highlight text.
+     * @param {Bounds} bounds - The bounds of the highlight.
+     * @param {[number, number]} highlightFromTo - The start and end position of the highlight.
+     * @param {number} labelWidth - The width of the label.
+     * @returns {[number, number]} - The x and y position of the highlight label.
+     */
+    resolveHighlightLabelPosition(placement, bounds, highlightFromTo, labelWidth) {
+        const [fromX, toX] = highlightFromTo;
+        switch (placement) {
+            case 'right-left': {
+                return [toX - LABEL_PADDINGS[1] - labelWidth, bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'left-left': {
+                return [fromX - LABEL_PADDINGS[1] - labelWidth, bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'right-right': {
+                return [toX + LABEL_PADDINGS[1], bounds.y + LABEL_PADDINGS[0]];
+            }
+            case 'left-right':
+            default: {
+                return [fromX + LABEL_PADDINGS[1], bounds.y + LABEL_PADDINGS[0]];
+            }
+        }
+    }
+    /**
+     * Draws borders on a canvas context for a given chart.
+     * @param {HighlightBorder} border - The border to draw.
+     * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
+     * @param {number} fromX - The starting x-coordinate of the border.
+     * @param {number} toX - The ending x-coordinate of the border.
+     * @param {Bounds} chartBounds - The bounds of the chart to draw the border on.
+     * @returns {void}
+     */
+    drawBorders(border, ctx, fromX, toX, chartBounds) {
+        const leftBorder = border.left;
+        const rightBorder = border.right;
+        if (leftBorder) {
+            ctx.beginPath();
+            ctx.moveTo(fromX, chartBounds.y);
+            ctx.lineTo(fromX, chartBounds.y + chartBounds.height);
+            ctx.stroke();
+            ctx.closePath();
+        }
+        if (rightBorder) {
+            ctx.beginPath();
+            ctx.moveTo(toX, chartBounds.y);
+            ctx.lineTo(toX, chartBounds.y + chartBounds.height);
+            ctx.stroke();
+            ctx.closePath();
+        }
+    }
+    /**
+     * Returns an array of canvas IDs.
+     *
+     * @returns {Array<string>} An array containing the canvas ID.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/components/highlights/highlights.model.js

@@ -3,4 +3,78 @@
  * 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 l}from"rxjs";import{ChartBaseElement as a}from"../../model/chart-base-element";import{getElementsInRange as r}from"../../utils/array.utils";export const HIGHLIGHTS_TYPES=["AFTER_MARKET","PRE_MARKET","NO_TRADING","REGULAR"];const o=24*60*60*1e3;export class HighlightsModel extends a{constructor(t){super(),this.chartModel=t,this.highlights=[],this.visualHighlights={},this.highlightsUpdatedSubject=new l}activate(){this.addRxSubscription(this.chartModel.scaleModel.xChanged.subscribe(()=>this.highlights.length&&this.recalculateVisualHighlights()))}getHighlights(){return this.highlights}getVisualHighlights(){return this.visualHighlights}recalculateVisualHighlights(){this.visualHighlights={};const t=this.chartModel.getFirstTimestamp(),h=this.chartModel.getLastTimestamp()+o;r(this.highlights,t,h,c).forEach(i=>{var s;this.visualHighlights[i.type]||(this.visualHighlights[i.type]=[]),(s=this.visualHighlights[i.type])===null||s===void 0||s.push(i)})}setHighlights(t){this.highlights=t,this.highlights.sort((h,e)=>h.to-e.to),this.highlightsUpdatedSubject.next(this.highlights),this.highlights.length?this.recalculateVisualHighlights():this.visualHighlights={}}observeHighlightsUpdated(){return this.highlightsUpdatedSubject.asObservable()}}const c=g=>g.to;
+import { Subject } from 'rxjs';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { getElementsInRange } from '../../utils/array.utils';
+export const HIGHLIGHTS_TYPES = ['AFTER_MARKET', 'PRE_MARKET', 'NO_TRADING', 'REGULAR'];
+const DAY_MS = 24 * 60 * 60 * 1000;
+export class HighlightsModel extends ChartBaseElement {
+    constructor(chartModel) {
+        super();
+        this.chartModel = chartModel;
+        this.highlights = [];
+        this.visualHighlights = {};
+        this.highlightsUpdatedSubject = new Subject();
+    }
+    /**
+     * Activates the chart by subscribing to the xChanged event of the scaleModel.
+     * If there are highlights, it recalculates the visual highlights.
+     */
+    activate() {
+        this.addRxSubscription(this.chartModel.scale.xChanged.subscribe(() => this.highlights.length && this.recalculateVisualHighlights()));
+    }
+    /**
+     * Returns an array of Highlight objects.
+     * @returns {Highlight[]} - An array of Highlight objects.
+     */
+    getHighlights() {
+        return this.highlights;
+    }
+    /**
+     * Returns the visual highlights object.
+     *
+     * @returns {VisualHighlights} The visual highlights object.
+     */
+    getVisualHighlights() {
+        return this.visualHighlights;
+    }
+    /**
+     * Recalculates the visual highlights based on the current chart model and highlights.
+     * @private
+     * @returns {void}
+     */
+    recalculateVisualHighlights() {
+        this.visualHighlights = {};
+        const firstTimestamp = this.chartModel.getFirstTimestamp();
+        const lastTimestamp = this.chartModel.getLastTimestamp() + DAY_MS;
+        const highlightsInRange = getElementsInRange(this.highlights, firstTimestamp, lastTimestamp, highlightTransformFunc);
+        highlightsInRange.forEach(h => {
+            var _a;
+            if (!this.visualHighlights[h.type]) {
+                this.visualHighlights[h.type] = [];
+            }
+            (_a = this.visualHighlights[h.type]) === null || _a === void 0 ? void 0 : _a.push(h);
+        });
+    }
+    /**
+     * Sets the highlights of the component and updates the visual highlights accordingly.
+     * @param {Highlight[]} highlights - An array of Highlight objects to be set as the new highlights.
+     * @returns {void}
+     */
+    setHighlights(highlights) {
+        this.highlights = highlights;
+        this.highlights.sort((a, b) => a.to - b.to);
+        this.highlightsUpdatedSubject.next(this.highlights);
+        this.highlights.length ? this.recalculateVisualHighlights() : (this.visualHighlights = {});
+    }
+    /**
+     * Returns an Observable that emits an array of Highlight objects whenever the highlightsUpdatedSubject emits a new value.
+     * @returns {Observable<Highlight[]>} An Observable that emits an array of Highlight objects.
+     */
+    observeHighlightsUpdated() {
+        return this.highlightsUpdatedSubject.asObservable();
+    }
+}
+const highlightTransformFunc = (item) => {
+    return item.to;
+};

package/dist/chart/components/labels_generator/numeric-axis-labels.generator.d.ts

@@ -5,7 +5,7 @@
  */
 import { Observable, Subject } from 'rxjs';
 import { Unit } from '../../model/scaling/viewport.model';
-import { AnimationFrameCache } from '../../utils/perfomance/animation-frame-cache.utils';
+import { AnimationFrameCache } from '../../utils/performance/animation-frame-cache.utils';
 export type PriceAxisType = 'regular' | 'percent' | 'logarithmic';
 export interface LabelsGenerator {
     readonly observeLabelsChanged: () => Observable<NumericAxisLabel[]>;

package/dist/chart/components/labels_generator/numeric-axis-labels.generator.js

@@ -3,4 +3,202 @@
  * 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 h}from"rxjs";import{logValueToUnit as u,percentToUnit as d,calcLogValue as b}from"../../model/scaling/viewport.model";import{AnimationFrameCache as g}from"../../utils/perfomance/animation-frame-cache.utils";import{identity as m}from"../../utils/function.utils";import{MathUtils as l}from"../../utils/math.utils";import{PriceIncrementsUtils as L}from"../../utils/price-increments.utils";const x=0,p=.01;export class NumericAxisLabelsGenerator{constructor(e,s,a,t,i=!1,r,n,c=m,o=23){this.increment=e,this.startEndProvider=s,this.lengthProvider=a,this.valueFormatter=t,this.withZero=i,this.axisTypeProvider=r,this.baseLineProvider=n,this.labelFilter=c,this.singleLabelHeightPixels=o,this.gridDistanceMultipliers=[2,4,5,10],this.lastSingleLabelHeightValue=0,this.distanceBetweenLabelsChangeSubject=new h,this.newGeneratedLabelsSubject=new h,this.lastStart=0,this.lastEnd=0,this.labelsCache=new g(()=>this.labelFilter(this.doGenerateLabels()))}generateRegularLabels(e,s,a){const t=[];this.withZero&&t.push({value:0,text:"0"});let i=l.roundToNearest(e,a);for(;i<s;){const r=l.roundToNearest(i,a),n=this.valueFormatter(r);t.push({value:r,text:n}),i=l.roundDecimal(i+a)}return t}generatePercentLabels(e,s,a){const t=[],i=this.baseLineProvider();let r=l.roundToNearest(e,a);for(;r<s;){const n=l.roundToNearest(r,a),c=d(n,i),o=this.valueFormatter(c);t.push({value:n,text:o}),r=l.roundDecimal(r+a)}return t}generateLogarithmLabels(e,s,a){const t=[];let i=l.roundToNearest(e,a);for(;i<s;){const r=u(i),n=this.valueFormatter(r);t.push({value:i,text:n}),i=l.roundDecimal(i+a)}return t}doGenerateLabels(){var e;const s=this.lengthProvider();if(s<=0)return[];const[a,t]=this.calculateMinMax(),i=this.getAxisStep(a,t,s);this.lastSingleLabelHeightValue||(this.lastSingleLabelHeightValue=i);let r;const n=this.axisTypeProvider();if(n==="logarithmic"?r=this.generateLogarithmLabels(a,t,i):n==="percent"?r=this.generatePercentLabels(a,t,i):r=this.generateRegularLabels(a,t,i),this.lastSingleLabelHeightValue!==i&&this.labelsCache.cache){const c=(e=this.labelsCache.getLastCachedValue())!==null&&e!==void 0?e:[];this.distanceBetweenLabelsChangeSubject.next([c,r]),this.lastSingleLabelHeightValue=i}return this.newGeneratedLabelsSubject.next(r),r}calculateMinMax(){const[e,s]=this.startEndProvider(),a=this.lengthProvider(),t=NumericAxisLabelsGenerator.getLabelBounds(e,s,a);return[t[0],t[1]]}getAxisStep(e,s,a){const t=s-e,i=a/this.singleLabelHeightPixels,r=this.calculateIncrement(t),n=t/i;return this.calculateAxisStep(n,r)}observeDistanceBetweenLabelsChanged(){return this.distanceBetweenLabelsChangeSubject.asObservable()}observeLabelsChanged(){return this.newGeneratedLabelsSubject.asObservable()}calculateIncrement(e){if(this.increment)return this.increment;if(!isNaN(e)){const s=L.autoDetectIncrementOfValueRange(e);return this.adjustIncrementOnAxisType(s)}return this.adjustIncrementOnAxisType(p)}adjustIncrementOnAxisType(e){switch(this.axisTypeProvider()){case"percent":return e;case"logarithmic":const[s]=this.calculateMinMax(),t=u(s)+e;return b(t)-s;case"regular":return e}}generateNumericLabels(){const[e,s]=this.startEndProvider();return(e!==this.lastStart||s!==this.lastEnd)&&this.labelsCache.invalidate(),this.lastStart=e,this.lastEnd=s,this.labelsCache.calculateOrGet()}static getLabelBounds(e,s,a){const t=Math.abs((s-e)*(x/a));return[e-t,s+t]}calculateAxisStep(e,s){if(s===0)return console.error("NumericAxisLabelsGenerator failed at calculateAxisStep: increment = 0"),0;let a=s,t=s,i=0;for(;a<e&&a>0;)i>=this.gridDistanceMultipliers.length&&(i=0,t*=10),a=t*this.gridDistanceMultipliers[i++];return a}}
+import { Subject } from 'rxjs';
+import { logValueToUnit, percentToUnit, calcLogValue } from '../../model/scaling/viewport.model';
+import { AnimationFrameCache } from '../../utils/performance/animation-frame-cache.utils';
+import { identity } from '../../utils/function.utils';
+import { MathUtils } from '../../utils/math.utils';
+import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
+const PIXEL_OFFSET = 0;
+const DEFAULT_REGULAR_INCREMENT = 0.01;
+/**
+ * Generator of axes labels.
+ */
+export class NumericAxisLabelsGenerator {
+    constructor(increment, startEndProvider, lengthProvider, valueFormatter, withZero = false, axisTypeProvider, baseLineProvider, labelFilter = identity, singleLabelHeightPixels = 23) {
+        this.increment = increment;
+        this.startEndProvider = startEndProvider;
+        this.lengthProvider = lengthProvider;
+        this.valueFormatter = valueFormatter;
+        this.withZero = withZero;
+        this.axisTypeProvider = axisTypeProvider;
+        this.baseLineProvider = baseLineProvider;
+        this.labelFilter = labelFilter;
+        this.singleLabelHeightPixels = singleLabelHeightPixels;
+        /**
+         *    Multipliers which are using for price increments to
+         *    calculate horizontal grid and price lines step.
+         */
+        this.gridDistanceMultipliers = [2, 4, 5, 10];
+        this.lastSingleLabelHeightValue = 0;
+        this.distanceBetweenLabelsChangeSubject = new Subject();
+        this.newGeneratedLabelsSubject = new Subject();
+        // optimization to not recalculate labels on same viewport
+        // TODO rework, generate 1-2 screens outside viewport as well
+        this.lastStart = 0;
+        this.lastEnd = 0;
+        this.labelsCache = new AnimationFrameCache(() => this.labelFilter(this.doGenerateLabels()));
+    }
+    generateRegularLabels(min, max, singleLabelHeightValue) {
+        const newLabels = [];
+        this.withZero && newLabels.push({ value: 0, text: '0' });
+        let value = MathUtils.roundToNearest(min, singleLabelHeightValue);
+        while (value < max) {
+            // Adjust value to increment
+            const adjustedValue = MathUtils.roundToNearest(value, singleLabelHeightValue);
+            const labelText = this.valueFormatter(adjustedValue);
+            newLabels.push({
+                value: adjustedValue,
+                text: labelText,
+            });
+            value = MathUtils.roundDecimal(value + singleLabelHeightValue);
+        }
+        return newLabels;
+    }
+    generatePercentLabels(min, max, singleLabelHeightValue) {
+        const newLabels = [];
+        const baseLine = this.baseLineProvider();
+        let value = MathUtils.roundToNearest(min, singleLabelHeightValue);
+        while (value < max) {
+            // Adjust value to increment
+            const adjustedValue = MathUtils.roundToNearest(value, singleLabelHeightValue);
+            const valueUnit = percentToUnit(adjustedValue, baseLine);
+            const labelText = this.valueFormatter(valueUnit);
+            newLabels.push({
+                value: adjustedValue,
+                text: labelText,
+            });
+            value = MathUtils.roundDecimal(value + singleLabelHeightValue);
+        }
+        return newLabels;
+    }
+    generateLogarithmLabels(min, max, singleLabelHeightValue) {
+        const newLabels = [];
+        let value = MathUtils.roundToNearest(min, singleLabelHeightValue);
+        while (value < max) {
+            const realValue = logValueToUnit(value);
+            const labelText = this.valueFormatter(realValue);
+            newLabels.push({
+                value,
+                text: labelText,
+            });
+            value = MathUtils.roundDecimal(value + singleLabelHeightValue);
+        }
+        return newLabels;
+    }
+    doGenerateLabels() {
+        var _a;
+        const lengthPixels = this.lengthProvider();
+        if (lengthPixels <= 0) {
+            return [];
+        }
+        const [min, max] = this.calculateMinMax();
+        const axisStep = this.getAxisStep(min, max, lengthPixels);
+        if (!this.lastSingleLabelHeightValue) {
+            this.lastSingleLabelHeightValue = axisStep;
+        }
+        let newLabels;
+        const axisType = this.axisTypeProvider();
+        if (axisType === 'logarithmic') {
+            newLabels = this.generateLogarithmLabels(min, max, axisStep);
+        }
+        else if (axisType === 'percent') {
+            newLabels = this.generatePercentLabels(min, max, axisStep);
+        }
+        else {
+            newLabels = this.generateRegularLabels(min, max, axisStep);
+        }
+        if (this.lastSingleLabelHeightValue !== axisStep && this.labelsCache.cache) {
+            const currentLabels = (_a = this.labelsCache.getLastCachedValue()) !== null && _a !== void 0 ? _a : [];
+            this.distanceBetweenLabelsChangeSubject.next([currentLabels, newLabels]);
+            this.lastSingleLabelHeightValue = axisStep;
+        }
+        this.newGeneratedLabelsSubject.next(newLabels);
+        return newLabels;
+    }
+    calculateMinMax() {
+        const [min, max] = this.startEndProvider();
+        const lengthPixels = this.lengthProvider();
+        const labelBounds = NumericAxisLabelsGenerator.getLabelBounds(min, max, lengthPixels);
+        return [labelBounds[0], labelBounds[1]];
+    }
+    getAxisStep(min, max, lengthPixels) {
+        const valueRange = max - min;
+        const labelsCount = lengthPixels / this.singleLabelHeightPixels;
+        const increment = this.calculateIncrement(valueRange);
+        const singleLabelHeightValue = valueRange / labelsCount;
+        return this.calculateAxisStep(singleLabelHeightValue, increment);
+    }
+    observeDistanceBetweenLabelsChanged() {
+        return this.distanceBetweenLabelsChangeSubject.asObservable();
+    }
+    observeLabelsChanged() {
+        return this.newGeneratedLabelsSubject.asObservable();
+    }
+    calculateIncrement(valueLength) {
+        // provided increment
+        if (this.increment) {
+            return this.increment;
+        }
+        // auto-generated increment
+        if (!isNaN(valueLength)) {
+            const calculatedIncrement = PriceIncrementsUtils.autoDetectIncrementOfValueRange(valueLength);
+            return this.adjustIncrementOnAxisType(calculatedIncrement);
+        }
+        return this.adjustIncrementOnAxisType(DEFAULT_REGULAR_INCREMENT);
+    }
+    adjustIncrementOnAxisType(increment) {
+        switch (this.axisTypeProvider()) {
+            case 'percent':
+                return increment;
+            case 'logarithmic':
+                const [logMin] = this.calculateMinMax();
+                const regularMin = logValueToUnit(logMin);
+                const regularIncrementedValue = regularMin + increment;
+                const incrementedLogValue = calcLogValue(regularIncrementedValue);
+                return incrementedLogValue - logMin;
+            case 'regular':
+                return increment;
+        }
+    }
+    // TODO rework, generator should act as model and update itself on scaleChanged
+    // TODO this should be called 1-2 times and very rarely, there should be 1-3 viewport of labels
+    generateNumericLabels() {
+        const [start, end] = this.startEndProvider();
+        if (start !== this.lastStart || end !== this.lastEnd) {
+            this.labelsCache.invalidate();
+        }
+        this.lastStart = start;
+        this.lastEnd = end;
+        return this.labelsCache.calculateOrGet();
+    }
+    static getLabelBounds(start, end, lengthPixels) {
+        const offset = Math.abs((end - start) * (PIXEL_OFFSET / lengthPixels));
+        return [start - offset, end + offset];
+    }
+    /**
+     * Calculates the distance between two axis labels as:
+     *  - Take increment (0.01 for price or 1 for natural number);
+     *  - Take step which was calculated as (chart height / max lines count provided by config (or default 10));
+     *  - Multiplying increment with gridDistanceMultipliers until it will greater then step
+     * @param step
+     * @param increment
+     */
+    calculateAxisStep(step, increment) {
+        if (increment === 0) {
+            console.error('NumericAxisLabelsGenerator failed at calculateAxisStep: increment = 0');
+            return 0;
+        }
+        let distance = increment;
+        let currentNumberOrder = increment;
+        let multipliersPointer = 0;
+        while (distance < step && distance > 0) {
+            if (multipliersPointer >= this.gridDistanceMultipliers.length) {
+                multipliersPointer = 0;
+                currentNumberOrder *= 10;
+            }
+            distance = currentNumberOrder * this.gridDistanceMultipliers[multipliersPointer++];
+        }
+        return distance;
+    }
+}

package/dist/chart/components/navigation_map/navigation-map-move.handler.d.ts

@@ -13,14 +13,14 @@ import { ChartPanComponent } from '../pan/chart-pan.component';
 export declare class NavigationMapMoveHandler extends ChartBaseElement {
     private bus;
     private chartModel;
-    private scaleModel;
+    private scale;
     private canvasInputListeners;
     private canvasBoundsContainer;
     private chartPanComponent;
     private leftKnotDragStartXRelative;
     private rightKnotDragStartXRelative;
     private lastMousePosition;
-    constructor(bus: EventBus, chartModel: ChartModel, scaleModel: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent);
+    constructor(bus: EventBus, chartModel: ChartModel, scale: ScaleModel, canvasInputListeners: CanvasInputListenerComponent, canvasBoundsContainer: CanvasBoundsContainer, chartPanComponent: ChartPanComponent);
     /**
      * Method that activates the navigation map buttons and subscribes to their click and touch events.
      * It also subscribes to the xChanged event of the scaleModel and updates the canvasBoundsContainer accordingly.

package/dist/chart/components/navigation_map/navigation-map-move.handler.js

@@ -3,4 +3,111 @@
  * 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{CanvasElement as s}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as B}from"../../model/chart-base-element";import{DragNDropXComponent as c}from"../dran-n-drop_helper/drag-n-drop-x.component";const d=4;export class NavigationMapMoveHandler extends B{constructor(o,r,n,l,u,g){super(),this.bus=o,this.chartModel=r,this.scaleModel=n,this.canvasInputListeners=l,this.canvasBoundsContainer=u,this.chartPanComponent=g,this.leftKnotDragStartXRelative=0,this.rightKnotDragStartXRelative=0,this.lastMousePosition=0,this.leftKnotDragStart=a=>{const t=this.canvasBoundsContainer.getBounds(s.N_MAP_CHART);this.leftKnotDragStartXRelative=a.x-t.x-d},this.leftKnotDragTick=a=>{const{delta:t}=a,i=this.canvasBoundsContainer.getBounds(s.N_MAP_CHART).width,e=(this.leftKnotDragStartXRelative+t)/i;this.canvasBoundsContainer.leftRatio=e,this.scaleModel.setXScale(Math.round(this.chartModel.mainCandleSeries.dataPoints.length*this.canvasBoundsContainer.leftRatio),this.scaleModel.xEnd)},this.rightKnotDragStart=a=>{const t=this.canvasBoundsContainer.getBounds(s.N_MAP_CHART);this.rightKnotDragStartXRelative=a.x-t.x+d},this.rightKnotDragTick=a=>{const{delta:t}=a,i=this.canvasBoundsContainer.getBounds(s.N_MAP_CHART).width,e=(this.rightKnotDragStartXRelative+t)/i;this.canvasBoundsContainer.rightRatio=e,this.scaleModel.setXScale(this.scaleModel.xStart,Math.round(this.chartModel.mainCandleSeries.dataPoints.length*this.canvasBoundsContainer.rightRatio))},this.sliderDragStart=()=>{this.lastMousePosition=0},this.sliderDragTick=a=>{const{delta:t}=a,h=this.canvasBoundsContainer.getBounds(s.N_MAP_CHART),i=this.chartModel.mainCandleSeries.meanCandleWidth/(h.width/this.chartModel.mainCandleSeries.dataPoints.length),e=(this.lastMousePosition-t)*i;this.scaleModel.moveXStart(this.scaleModel.xStart-e),this.lastMousePosition=t};const C=this.canvasBoundsContainer.getBoundsHitTest(s.N_MAP_KNOT_L),v=this.canvasBoundsContainer.getBoundsHitTest(s.N_MAP_KNOT_R),M=new c(C,{onDragStart:this.leftKnotDragStart,onDragTick:this.leftKnotDragTick},this.canvasInputListeners,this.chartPanComponent),S=new c(v,{onDragStart:this.rightKnotDragStart,onDragTick:this.rightKnotDragTick},this.canvasInputListeners,this.chartPanComponent);this.addChildEntity(M),this.addChildEntity(S);const p=this.canvasBoundsContainer.getBoundsHitTest(s.N_MAP_SLIDER_WINDOW),D=new c(p,{onDragStart:this.sliderDragStart,onDragTick:this.sliderDragTick},this.canvasInputListeners,this.chartPanComponent);this.addChildEntity(D)}doActivate(){super.doActivate();const o=this.canvasBoundsContainer.getBoundsHitTest(s.N_MAP_BTN_L);this.addRxSubscription(this.canvasInputListeners.observeClick(o).subscribe(()=>{this.scaleModel.moveXStart(this.scaleModel.xStart-1)})),this.addRxSubscription(this.canvasInputListeners.observeTouchStart(o).subscribe(()=>{this.scaleModel.moveXStart(this.scaleModel.xStart-1)}));const r=this.canvasBoundsContainer.getBoundsHitTest(s.N_MAP_BTN_R);this.addRxSubscription(this.canvasInputListeners.observeClick(r).subscribe(()=>{this.scaleModel.moveXStart(this.scaleModel.xStart+1)})),this.addRxSubscription(this.canvasInputListeners.observeTouchStart(r).subscribe(()=>{this.scaleModel.moveXStart(this.scaleModel.xStart+1)})),this.addRxSubscription(this.scaleModel.xChanged.subscribe(()=>{const n=this.chartModel.mainCandleSeries;this.canvasBoundsContainer.leftRatio=n.dataIdxStart/(n.dataPoints.length-1),this.canvasBoundsContainer.rightRatio=n.dataIdxEnd/(n.dataPoints.length-1),this.canvasBoundsContainer.recalculateNavigationMapElementBounds(),this.bus.fireDraw()}))}}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
+// TODO find out why do we need this correction
+const NAV_MAP_KNOT_CORRECTION = 4;
+export class NavigationMapMoveHandler extends ChartBaseElement {
+    constructor(bus, chartModel, scale, canvasInputListeners, canvasBoundsContainer, chartPanComponent) {
+        super();
+        this.bus = bus;
+        this.chartModel = chartModel;
+        this.scale = scale;
+        this.canvasInputListeners = canvasInputListeners;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.chartPanComponent = chartPanComponent;
+        this.leftKnotDragStartXRelative = 0;
+        this.rightKnotDragStartXRelative = 0;
+        this.lastMousePosition = 0;
+        this.leftKnotDragStart = (point) => {
+            const nMapChart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+            this.leftKnotDragStartXRelative = point.x - nMapChart.x - NAV_MAP_KNOT_CORRECTION;
+        };
+        this.leftKnotDragTick = (dragInfo) => {
+            const { delta: xDelta } = dragInfo;
+            const chart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+            const knotsWindowWidth = chart.width;
+            const moveLeftRatio = (this.leftKnotDragStartXRelative + xDelta) / knotsWindowWidth;
+            this.canvasBoundsContainer.leftRatio = moveLeftRatio;
+            this.scale.setXScale(Math.round(this.chartModel.mainCandleSeries.dataPoints.length * this.canvasBoundsContainer.leftRatio), this.scale.xEnd);
+        };
+        this.rightKnotDragStart = (point) => {
+            const nMapChart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+            this.rightKnotDragStartXRelative = point.x - nMapChart.x + NAV_MAP_KNOT_CORRECTION;
+        };
+        this.rightKnotDragTick = (dragInfo) => {
+            const { delta: xDelta } = dragInfo;
+            const nMapChart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+            const nMapChartWidth = nMapChart.width;
+            const moveRightRatio = (this.rightKnotDragStartXRelative + xDelta) / nMapChartWidth;
+            this.canvasBoundsContainer.rightRatio = moveRightRatio;
+            this.scale.setXScale(this.scale.xStart, Math.round(this.chartModel.mainCandleSeries.dataPoints.length * this.canvasBoundsContainer.rightRatio));
+        };
+        this.sliderDragStart = () => {
+            this.lastMousePosition = 0;
+        };
+        this.sliderDragTick = (dragInfo) => {
+            const { delta: absoluteXDelta } = dragInfo;
+            const navMap = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+            const moveMultiplier = this.chartModel.mainCandleSeries.meanCandleWidth /
+                (navMap.width / this.chartModel.mainCandleSeries.dataPoints.length);
+            const step = (this.lastMousePosition - absoluteXDelta) * moveMultiplier;
+            this.scale.moveXStart(this.scale.xStart - step);
+            this.lastMousePosition = absoluteXDelta;
+        };
+        //#region knots
+        const knotLeftHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.N_MAP_KNOT_L);
+        const knotRightHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.N_MAP_KNOT_R);
+        const leftKnotDNDComponent = new DragNDropXComponent(knotLeftHitTest, {
+            onDragStart: this.leftKnotDragStart,
+            onDragTick: this.leftKnotDragTick,
+        }, this.canvasInputListeners, this.chartPanComponent);
+        const rightKnotDNDComponent = new DragNDropXComponent(knotRightHitTest, {
+            onDragStart: this.rightKnotDragStart,
+            onDragTick: this.rightKnotDragTick,
+        }, this.canvasInputListeners, this.chartPanComponent);
+        this.addChildEntity(leftKnotDNDComponent);
+        this.addChildEntity(rightKnotDNDComponent);
+        //#endregion
+        //#region slider
+        const sliderHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.N_MAP_SLIDER_WINDOW);
+        const sliderDNDComponent = new DragNDropXComponent(sliderHitTest, {
+            onDragStart: this.sliderDragStart,
+            onDragTick: this.sliderDragTick,
+        }, this.canvasInputListeners, this.chartPanComponent);
+        this.addChildEntity(sliderDNDComponent);
+        //#endregion
+    }
+    /**
+     * Method that activates the navigation map buttons and subscribes to their click and touch events.
+     * It also subscribes to the xChanged event of the scaleModel and updates the canvasBoundsContainer accordingly.
+     * @returns {void}
+     */
+    doActivate() {
+        super.doActivate();
+        //#region btns
+        const btnLeftHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.N_MAP_BTN_L);
+        this.addRxSubscription(this.canvasInputListeners.observeClick(btnLeftHitTest).subscribe(() => {
+            this.scale.moveXStart(this.scale.xStart - 1);
+        }));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchStart(btnLeftHitTest).subscribe(() => {
+            this.scale.moveXStart(this.scale.xStart - 1);
+        }));
+        const btnRightHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.N_MAP_BTN_R);
+        this.addRxSubscription(this.canvasInputListeners.observeClick(btnRightHitTest).subscribe(() => {
+            this.scale.moveXStart(this.scale.xStart + 1);
+        }));
+        this.addRxSubscription(this.canvasInputListeners.observeTouchStart(btnRightHitTest).subscribe(() => {
+            this.scale.moveXStart(this.scale.xStart + 1);
+        }));
+        this.addRxSubscription(this.scale.xChanged.subscribe(() => {
+            const candleSeries = this.chartModel.mainCandleSeries;
+            this.canvasBoundsContainer.leftRatio = candleSeries.dataIdxStart / (candleSeries.dataPoints.length - 1);
+            this.canvasBoundsContainer.rightRatio = candleSeries.dataIdxEnd / (candleSeries.dataPoints.length - 1);
+            this.canvasBoundsContainer.recalculateNavigationMapElementBounds();
+            this.bus.fireDraw();
+        }));
+        //#endregion
+    }
+}