@devexperts/dxcharts-lite 1.0.1 → 2.0.0

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

@@ -1,6 +1,204 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
@@ -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

@@ -1,6 +1,113 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{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
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */

package/dist/chart/components/navigation_map/navigation-map.component.js

@@ -1,6 +1,117 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{merge as C}from"rxjs";import{filter as _,pairwise as N}from"rxjs/operators";import{ChartBaseElement as f}from"../../model/chart-base-element";import{CanvasElement as n}from"../../canvas/canvas-bounds-container";import{EVENT_RESIZED as g}from"../../events/events";import{NavigationMapDrawer as I}from"./navigation-map.drawer";import{NavigationMapMoveHandler as E}from"./navigation-map-move.handler";import{floor as A}from"../../utils/math.utils";export class NavigationMapComponent extends f{constructor(a,t,c,s,i,m,o,h,l,e){super(),this.eventBus=a,this.chartModel=t,this.canvasModel=c,this.config=s,this.canvasInputListeners=i,this.canvasBoundsContainer=m,this.chartPanComponent=l,this.visualCandles=[];const d=new I(s,t,c,m,h,()=>this.visualCandles);o.addDrawer(d,n.N_MAP_CHART),this.navigationMapMoveHandler=new E(this.eventBus,this.chartModel,this.chartModel.scaleModel,this.canvasInputListeners,this.canvasBoundsContainer,this.chartPanComponent),e.setCursorForCanvasEl(n.N_MAP_CHART,s.components.navigationMap.cursors.chart),e.setCursorForCanvasEl(n.N_MAP_BTN_L,s.components.navigationMap.cursors.buttonLeft),e.setCursorForCanvasEl(n.N_MAP_BTN_R,s.components.navigationMap.cursors.buttonRight),e.setCursorForCanvasEl(n.N_MAP_KNOT_L,s.components.navigationMap.cursors.leftResizer),e.setCursorForCanvasEl(n.N_MAP_KNOT_R,s.components.navigationMap.cursors.rightResizer),e.setCursorForCanvasEl(n.N_MAP_SLIDER_WINDOW,s.components.navigationMap.cursors.slider)}doActivate(){super.doActivate(),this.addRxSubscription(C(this.chartModel.observeCandlesChanged(),this.canvasBoundsContainer.observeBoundsChanged(n.N_MAP),this.chartModel.scaleModel.xChanged.pipe(N(),_(([a,t])=>{const s=a.start<0||a.end>0,i=t.start<0||t.end>0;return s&&!i||i}))).subscribe(()=>{this.config.components.navigationMap.visible&&(this.visualCandles=this.makeVisualCandles(),this.canvasModel.fireDraw())}))}makeVisualCandles(){var a;const t=this.chartModel.getCandles();if(!t.length)return[];const c=this.chartModel.mainCandleSeries.dataIdxStart,s=this.chartModel.mainCandleSeries.dataIdxEnd,i=Math.round(Math.max(-c,0)),m=Math.max(this.chartModel.getCandlesCountWithRightOffset(),s)+i;let o=Number.NEGATIVE_INFINITY,h=Number.POSITIVE_INFINITY;const l=this.canvasBoundsContainer.getBounds(n.N_MAP_CHART),e=l.width,d=[];let v=0,r,p;for(r=0;r<e;r++)p=A(r*m/e)-i,p in t?(d[r]=t[p].close,v=(a=d[r])!==null&&a!==void 0?a:0,o=Math.max(o,v),h=Math.min(h,v)):d[r]=0;return o-=h,d.map((u,M)=>[M+l.x,(o+h-u)*l.height/o+l.y])}setVisible(a=!0){var t;!((t=this.config.components)===null||t===void 0)&&t.navigationMap&&(this.config.components.navigationMap.visible=a,this.eventBus.fire(g),this.canvasModel.fireDraw())}}
+import { merge } from 'rxjs';
+import { filter, pairwise } from 'rxjs/operators';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { EVENT_RESIZED } from '../../events/events';
+import { NavigationMapDrawer } from './navigation-map.drawer';
+import { NavigationMapMoveHandler } from './navigation-map-move.handler';
+import { floor } from '../../utils/math.utils';
+/**
+ * Navigation map component for chart.
+ * Controls navigation map in the bottom.
+ */
+export class NavigationMapComponent extends ChartBaseElement {
+    constructor(eventBus, chartModel, canvasModel, config, canvasInputListeners, canvasBoundsContainer, drawingManager, formatterFactory, chartPanComponent, cursorHandler) {
+        super();
+        this.eventBus = eventBus;
+        this.chartModel = chartModel;
+        this.canvasModel = canvasModel;
+        this.config = config;
+        this.canvasInputListeners = canvasInputListeners;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.chartPanComponent = chartPanComponent;
+        this.visualCandles = [];
+        const navigationMapDrawer = new NavigationMapDrawer(config, chartModel, canvasModel, canvasBoundsContainer, formatterFactory, () => this.visualCandles);
+        drawingManager.addDrawer(navigationMapDrawer, CanvasElement.N_MAP_CHART);
+        this.navigationMapMoveHandler = new NavigationMapMoveHandler(this.eventBus, this.chartModel, this.chartModel.scale, this.canvasInputListeners, this.canvasBoundsContainer, this.chartPanComponent);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_CHART, config.components.navigationMap.cursors.chart);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_BTN_L, config.components.navigationMap.cursors.buttonLeft);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_BTN_R, config.components.navigationMap.cursors.buttonRight);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_KNOT_L, config.components.navigationMap.cursors.leftResizer);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_KNOT_R, config.components.navigationMap.cursors.rightResizer);
+        cursorHandler.setCursorForCanvasEl(CanvasElement.N_MAP_SLIDER_WINDOW, config.components.navigationMap.cursors.slider);
+    }
+    /**
+     * Method to activate the chart. It subscribes to the observables of the chartModel and canvasBoundsContainer.
+     * It also subscribes to the xChanged observable of the chartModel's scaleModel and filters the values to check
+     * if the previous viewport had no-candles area and current viewport contains only candles or if the current viewport
+     * has no-candles area. If the navigationMap component is visible, it makes visual candles and fires the draw event
+     * of the canvasModel.
+     */
+    doActivate() {
+        super.doActivate();
+        this.addRxSubscription(merge(this.chartModel.observeCandlesChanged(), this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.N_MAP), this.chartModel.scale.xChanged.pipe(pairwise(), filter(([prevScale, curScale]) => {
+            // TODO rework
+            const itemsCount = 0; //this.chartModel.scale.getItemsCount();
+            const prev = prevScale.start < 0 || prevScale.end > itemsCount;
+            const cur = curScale.start < 0 || curScale.end > itemsCount;
+            // trigger recalculation visual candles for nav map if previous viewport had
+            // no-candles area and current viewport contains only candles.
+            // OR if current viewport has no-candles area.
+            return (prev && !cur) || cur;
+        }))).subscribe(() => {
+            if (this.config.components.navigationMap.visible) {
+                this.visualCandles = this.makeVisualCandles();
+                this.canvasModel.fireDraw();
+            }
+        }));
+    }
+    /**
+     * This function generates an array of visual candles based on the data provided by the chartModel.
+     * It calculates the maximum and minimum values of the candles and maps them to the canvas bounds.
+     * @returns {Array<[number, number]>} An array of tuples containing the x and y coordinates of each visual candle.
+     */
+    makeVisualCandles() {
+        var _a;
+        const candles = this.chartModel.getCandles();
+        if (!candles.length) {
+            return [];
+        }
+        const firstId = this.chartModel.mainCandleSeries.dataIdxStart;
+        const lastId = this.chartModel.mainCandleSeries.dataIdxEnd;
+        const leftSideOffsetVisible = Math.round(Math.max(-firstId, 0));
+        // take into account left offset and a new rule using which we can scroll to right, so only two candles on left are visible
+        const len = Math.max(this.chartModel.getCandlesCountWithRightOffset(), lastId) + leftSideOffsetVisible;
+        let max = Number.NEGATIVE_INFINITY;
+        let min = Number.POSITIVE_INFINITY;
+        const nMapChart = this.canvasBoundsContainer.getBounds(CanvasElement.N_MAP_CHART);
+        const width = nMapChart.width;
+        const res = [];
+        let candleClose = 0;
+        let x;
+        let idx;
+        for (x = 0; x < width; x++) {
+            idx = floor((x * len) / width) - leftSideOffsetVisible;
+            if (idx in candles) {
+                res[x] = candles[idx].close;
+                candleClose = (_a = res[x]) !== null && _a !== void 0 ? _a : 0;
+                max = Math.max(max, candleClose);
+                min = Math.min(min, candleClose);
+            }
+            else {
+                res[x] = 0;
+            }
+        }
+        max -= min;
+        return res.map((y, x) => {
+            return [x + nMapChart.x, ((max + min - y) * nMapChart.height) / max + nMapChart.y];
+        });
+    }
+    /**
+     * Sets the visibility of the navigation map component.
+     * @param {boolean} visible - Whether the navigation map component should be visible or not. Default is true.
+     */
+    setVisible(visible = true) {
+        var _a;
+        if ((_a = this.config.components) === null || _a === void 0 ? void 0 : _a.navigationMap) {
+            this.config.components.navigationMap.visible = visible;
+            this.eventBus.fire(EVENT_RESIZED);
+            this.canvasModel.fireDraw();
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * Copyright (C) 2019 - 2023 Devexperts Solutions IE Limited
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */