@devexperts/dxcharts-lite 2.5.7 → 2.6.0

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

@@ -59,12 +59,19 @@ export class ChartModel extends ChartBaseElement {
         this.toY = (value) => {
             return this.mainCandleSeries.view.toY(value);
         };
+        this.prepareCandles = (candles) => {
+            const prepared = candles.map(prepareCandle).filter(isCandle);
+            const { sortCandles } = this.config.components.chart;
+            return sortCandles ? sortCandles(prepared) : prepared;
+        };
         this.chartTypeChanged.next(this.config.components.chart.type);
         this.secondaryChartColors = new SecondaryChartColorsPool(this.config);
         const candleSeries = new MainCandleSeriesModel(this.chartBaseModel, this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
         candleSeries.config.type = this.config.components.chart.type;
         this.candleSeries.push(candleSeries);
-        scale.addXConstraint((_, state) => candleEdgesConstrait(state, this.mainCandleSeries.visualPoints, this.config.components.chart.minCandlesOffset, scale.getBounds()));
+        if (this.config.components.chart.minCandlesOffset > 0) {
+            scale.addXConstraint((_, state) => candleEdgesConstrait(state, this.mainCandleSeries.visualPoints, this.config.components.chart.minCandlesOffset, scale.getBounds()));
+        }
         this.basicScaleViewportTransformer = createBasicScaleViewportTransformer(scale);
         this.timeFrameViewportTransformer = createTimeFrameViewportTransformer(scale, this);
         this.pane = this.paneManager.panes[CHART_UUID];
@@ -162,7 +169,7 @@ export class ChartModel extends ChartBaseElement {
      * @returns {CandleSeriesModel | undefined} - The newly created secondary candle series model or undefined if it could not be created.
      */
     setSecondaryCandleSeries(candles, instrument = this.mainCandleSeries.instrument, recalculateAndUpdate = true) {
-        const preparedCandles = prepareCandles(candles);
+        const preparedCandles = this.prepareCandles(candles);
         // set correct indexes based on main candles timestamp
         const reindexCandles = this.reindexCandlesBasedOnSeries(this.mainCandleSeries.dataPoints, preparedCandles);
         // ensure there are no gaps in new candles
@@ -198,7 +205,7 @@ export class ChartModel extends ChartBaseElement {
             this.mainInstrumentChangedSubject.next(mainSeries.instrument);
         }
         this.rememberCurrentTimeframe();
-        const preparedCandles = prepareCandles(mainSeries.candles);
+        const preparedCandles = this.prepareCandles(mainSeries.candles);
         this.mainCandleSeries.clearData();
         reindexCandles(preparedCandles);
         this.mainCandleSeries.dataPoints = preparedCandles;
@@ -217,7 +224,9 @@ export class ChartModel extends ChartBaseElement {
         });
         this.chartBaseModel.recalculatePeriod();
         this.autoScaleOnCandles();
-        this.scale.doAutoScale();
+        if (this.config.scale.auto) {
+            this.scale.doAutoScale();
+        }
         this.candlesSetSubject.next();
         this.canvasModel.fireDraw();
     }
@@ -282,7 +291,7 @@ export class ChartModel extends ChartBaseElement {
             console.error('All series update failed. Instruments for series are different.');
             return;
         }
-        const preparedCandles = prepareCandles(mainSeries.candles);
+        const preparedCandles = this.prepareCandles(mainSeries.candles);
         const updateResult = updateCandles(this.mainCandleSeries.dataPoints, preparedCandles);
         const updatedCandles = updateResult.candles;
         reindexCandles(updatedCandles);
@@ -290,7 +299,7 @@ export class ChartModel extends ChartBaseElement {
         // re-create series
         secondarySeries.map(series => {
             var _a, _b, _c, _d;
-            const preparedCandles = prepareCandles(series.candles);
+            const preparedCandles = this.prepareCandles(series.candles);
             const updatedCandles = updateCandles((_d = (_c = this.findSecondarySeriesBySymbol((_b = (_a = series.instrument) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.dataPoints) !== null && _d !== void 0 ? _d : [], preparedCandles).candles;
             return this.setSecondaryCandleSeries(updatedCandles, series.instrument, false);
         });
@@ -325,9 +334,7 @@ export class ChartModel extends ChartBaseElement {
                 series.dataPoints = series.dataPoints.slice(0, index);
             });
         });
-        this.candlesRemovedSubject.next();
-        this.candlesUpdatedSubject.next();
-        this.canvasModel.fireDraw();
+        this.candlesChangedRedraw();
     }
     /**
      * Creates a secondary candle series model for a given instrument.
@@ -373,8 +380,8 @@ export class ChartModel extends ChartBaseElement {
     secondarySeriesAdjustments(mainSeries, secondarySeries) {
         const result = [];
         mainSeries.forEach(mainCandle => {
-            var _a;
-            const idx = (_a = mainCandle.idx) !== null && _a !== void 0 ? _a : 0;
+            const candleIdx = this.candleIdxFromId(mainCandle.id);
+            const idx = candleIdx > 0 ? candleIdx : 0;
             const compareCandle = secondarySeries[idx];
             if (!compareCandle) {
                 // take first candle to left or right
@@ -521,6 +528,23 @@ export class ChartModel extends ChartBaseElement {
         const dataPointsSource = selectedCandleSeries.dataPoints;
         return this.chartBaseModel.dataFromTimestamp(timestamp, extrapolate, dataPointsSource);
     }
+    /**
+     * For given id finds the target candle
+     * @param id
+     * @param selectedCandleSeries
+     */
+    candleFromId(id, selectedCandleSeries = this.mainCandleSeries) {
+        return selectedCandleSeries.visualPoints.find(vc => vc.candle.id === id);
+    }
+    /**
+     * For given id finds the target candle index
+     * @param id
+     * @param selectedCandleSeries
+     * @returns candle index, -1 if not found
+     */
+    candleIdxFromId(id, selectedCandleSeries = this.mainCandleSeries) {
+        return selectedCandleSeries.visualPoints.findIndex(vc => vc.candle.id === id);
+    }
     /**
      * For given index returns the closest visual candle, or fake candle with correct X coordinate.
      * @param idx - index of candle
@@ -722,7 +746,7 @@ export class ChartModel extends ChartBaseElement {
      * Updates candles in series. Default is main series.
      * Any number of candles may be provided - they would be matched by their index and updated.
      * @param candles - any list of new (updated) candles
-     * @param instrument - name of instrument to update
+     * @param instrumentSymbol - name of instrument to update
      */
     // I'd like to keep this method, for me one generic method is more convenient than 3 (updateLastCandle, addLastCandle, prepend...)
     updateCandles(candles, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
@@ -779,7 +803,9 @@ export class ChartModel extends ChartBaseElement {
                 series.recalculateVisualPoints();
             }
         });
-        this.scale.doAutoScale();
+        if (this.config.scale.auto) {
+            this.scale.doAutoScale();
+        }
         this.candlesUpdatedSubject.next();
     }
     /**
@@ -852,7 +878,7 @@ export class ChartModel extends ChartBaseElement {
             if (idx < 0) {
                 prepend.push(c);
             }
-            else if (target[idx].timestamp === c.timestamp) {
+            else if (target[idx].id === c.id) {
                 targetCopy[idx] = c;
             }
             else {
@@ -867,7 +893,7 @@ export class ChartModel extends ChartBaseElement {
     /**
      * Adds new candle to the chart
      * @param candle - new candle
-     * @param instrument - name of the instrument to update
+     * @param instrumentSymbol - name of the instrument to update
      */
     addLastCandle(candle, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
         this.updateCandles([candle], instrumentSymbol);
@@ -875,7 +901,7 @@ export class ChartModel extends ChartBaseElement {
     /**
      * Updates last candle value
      * @param candle - updated candle
-     * @param instrument - name of the instrument to update
+     * @param instrumentSymbol  - name of the instrument to update
      */
     updateLastCandle(candle, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
         this.updateCandles([candle], instrumentSymbol);
@@ -883,9 +909,12 @@ export class ChartModel extends ChartBaseElement {
     /**
      * Remove candle by idx and recaculate indexes
      * @param candle - new candle
-     * @param instrument - name of the instrument to update
+     * @param instrumentSymbol - name of the instrument to update
      */
     removeCandleByIdx(idx, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
+        if (idx < 0) {
+            return;
+        }
         const seriesList = this.findSeriesBySymbol(instrumentSymbol);
         if (seriesList.length === 0) {
             console.warn("removeCandle by id failed. Can't find series", instrumentSymbol);
@@ -896,13 +925,64 @@ export class ChartModel extends ChartBaseElement {
             reindexCandles(series.dataPoints);
             series.recalculateVisualPoints();
         });
+        this.candlesChangedRedraw();
+    }
+    /**
+     * Remove candles by ids and recalculate indexes, candles should be as a sequence, follow one by one
+     * Works faster than removeCandlesByIds
+     *
+     * @param ids - candles ids to remove
+     * @param selectedCandleSeries - candle series to remove candles from
+     */
+    removeCandlesByIdsSequence(ids, selectedCandleSeries) {
+        const firstIdx = this.candleIdxFromId(ids[0], selectedCandleSeries);
+        const lastIdx = this.candleIdxFromId(ids[ids.length - 1], selectedCandleSeries);
+        if (firstIdx < 0 || lastIdx < 0) {
+            console.warn('Candle is not found');
+            return;
+        }
+        // if array is a sequence the removal process should be faster because reindex and recalculate visual points would call only once
+        selectedCandleSeries.dataPoints = selectedCandleSeries.dataPoints
+            .slice(0, firstIdx)
+            .concat(selectedCandleSeries.dataPoints.slice(lastIdx + 1));
+        reindexCandles(selectedCandleSeries.dataPoints, lastIdx);
+        selectedCandleSeries.recalculateVisualPoints();
+        this.candlesChangedRedraw();
+    }
+    /**
+     * Remove candles by ids and recalculate indexes
+     * @param ids - candles ids to remove
+     * @param selectedCandleSeries - candle series to remove candles from
+     */
+    removeCandlesByIds(ids, selectedCandleSeries) {
+        ids.forEach(id => this.removeCandleByIdx(this.candleIdxFromId(id, selectedCandleSeries)));
+    }
+    /**
+     * Add candles by id and recalculate indexes
+     *
+     * @param candles - candles to add
+     * @param startId - target candle to start adding candles from
+     * @param selectedCandleSeries - candle series to add candles to
+     */
+    addCandlesById(candles, startId, selectedCandleSeries) {
+        const targetCandleIdx = this.candleIdxFromId(startId);
+        if (targetCandleIdx < 0) {
+            console.warn('Selected start candle is not found');
+            return;
+        }
+        const candlesBefore = selectedCandleSeries.dataPoints.slice(0, targetCandleIdx);
+        const candlesAfter = selectedCandleSeries.dataPoints.slice(targetCandleIdx);
+        selectedCandleSeries.dataPoints = candlesBefore.concat(candles).concat(candlesAfter);
+        reindexCandles(selectedCandleSeries.dataPoints);
+        selectedCandleSeries.recalculateVisualPoints();
+        this.candlesChangedRedraw();
+    }
+    candlesChangedRedraw() {
         this.candlesRemovedSubject.next();
         this.candlesUpdatedSubject.next();
         this.canvasModel.fireDraw();
     }
 }
-const sortCandles = (candles) => candles.slice().sort((a, b) => (a.timestamp === b.timestamp ? 0 : a.timestamp > b.timestamp ? 1 : -1));
-const prepareCandles = (candles) => sortCandles(candles.map(prepareCandle).filter(isCandle));
 const findFirstNotEmptyCandle = (candles, startIdx, iterateStep) => {
     if (startIdx >= candles.length) {
         return candles[candles.length - 1];

package/dist/chart/components/chart/fake-candles.js

@@ -3,12 +3,14 @@
  * 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 { generateCandleId } from '../../model/candle.model';
 import { firstOf, lastOf } from '../../utils/array.utils';
 import { round } from '../../utils/math.utils';
 export const DEFAULT_PERIOD = 60; // 1 minute
 export const fakeCandle = (candles, index, period = DEFAULT_PERIOD) => {
     const t = getTimestampOfIndex(candles, index, period);
     return {
+        id: generateCandleId(t, t),
         hi: NaN,
         lo: NaN,
         open: NaN,

package/dist/chart/components/chart/fake-visual-candle.d.ts

@@ -3,10 +3,10 @@
  * 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 { Candle } from "../../model/candle.model";
-import { DataSeriesPoint, VisualSeriesPoint } from "../../model/data-series.model";
-import { Index } from "../../model/scaling/viewport.model";
-import VisualCandle from "../../model/visual-candle";
+import { Candle } from '../../model/candle.model';
+import { DataSeriesPoint, VisualSeriesPoint } from '../../model/data-series.model';
+import { Index } from '../../model/scaling/viewport.model';
+import VisualCandle from '../../model/visual-candle';
 /**
  * Generates fake candle for left and right "out of data range" zones.
  * Requires period to calculate the fake timestamp.

package/dist/chart/components/chart/fake-visual-candle.js

@@ -3,10 +3,10 @@
  * 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 { nameDirection } from "../../model/candle.model";
-import { VisualSeriesPoint } from "../../model/data-series.model";
-import VisualCandle from "../../model/visual-candle";
-import { DEFAULT_PERIOD, fakeCandle, fakeDataPoint } from "./fake-candles";
+import { nameDirection } from '../../model/candle.model';
+import { VisualSeriesPoint } from '../../model/data-series.model';
+import VisualCandle from '../../model/visual-candle';
+import { DEFAULT_PERIOD, fakeCandle, fakeDataPoint } from './fake-candles';
 /**
  * Generates fake candle for left and right "out of data range" zones.
  * Requires period to calculate the fake timestamp.

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

@@ -88,9 +88,9 @@ export class PaneComponent extends ChartBaseElement {
      * @param {NumericYAxisLabelsGenerator} yAxisLabelsGenerator - The generator used to create the labels for the y-axis.
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
-    createGridComponent(uuid, scale, yAxisLabelsGenerator, yAxisState) {
+    createGridComponent(uuid, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
         const chartPaneId = CanvasElement.PANE_UUID(uuid);
-        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], () => yAxisLabelsGenerator.generateNumericLabels());
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], yAxisLabelsGetter, yAxisBaselineGetter, () => this.config.components.grid.visible);
         return gridComponent;
     }
     /**
@@ -135,7 +135,7 @@ export class PaneComponent extends ChartBaseElement {
         if (useDefaultHighLow) {
             scaleModel.autoScaleModel.setHighLowProvider('default', createCandlesOffsetProvider(() => ({ top: 10, bottom: 10, left: 0, right: 0, visible: true }), createDefaultYExtentHighLowProvider(yExtentComponent)));
         }
-        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.model.labelsGenerator, yExtentComponent.yAxis.state);
+        const gridComponent = this.createGridComponent(this.uuid, scaleModel, yExtentComponent.yAxis.state, () => yExtentComponent.yAxis.model.baseLabelsModel.labels, () => yExtentComponent.toY(yExtentComponent.getBaseline()));
         yExtentComponent.addChildEntity(gridComponent);
         yExtentComponent.activate();
         this.yExtentComponents.push(yExtentComponent);

package/dist/chart/components/volumes/separate-volumes.component.d.ts

@@ -4,7 +4,6 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { FullChartConfig } from '../../chart.config';
-import { DrawingManager } from '../../drawers/drawing-manager';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { Pixel, Unit } from '../../model/scaling/viewport.model';
 import { ChartComponent } from '../chart/chart.component';
@@ -13,13 +12,12 @@ import { PaneComponent } from '../pane/pane.component';
 import { VolumesModel } from './volumes.model';
 export declare class SeparateVolumesComponent extends ChartBaseElement {
     private chartComponent;
-    private drawingManager;
     config: FullChartConfig;
     private volumesModel;
     private paneManager;
     static UUID: string;
     pane: PaneComponent | undefined;
-    constructor(chartComponent: ChartComponent, drawingManager: DrawingManager, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
+    constructor(chartComponent: ChartComponent, config: FullChartConfig, volumesModel: VolumesModel, paneManager: PaneManager);
     protected doActivate(): void;
     /**
      * Activates the separate volumes feature.

package/dist/chart/components/volumes/separate-volumes.component.js

@@ -7,10 +7,9 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { createCandlesOffsetProvider } from '../chart/data-series.high-low-provider';
 import { volumeFormatter } from './volumes.formatter';
 class SeparateVolumesComponent extends ChartBaseElement {
-    constructor(chartComponent, drawingManager, config, volumesModel, paneManager) {
+    constructor(chartComponent, config, volumesModel, paneManager) {
         super();
         this.chartComponent = chartComponent;
-        this.drawingManager = drawingManager;
         this.config = config;
         this.volumesModel = volumesModel;
         this.paneManager = paneManager;
@@ -53,7 +52,6 @@ class SeparateVolumesComponent extends ChartBaseElement {
     deactiveSeparateVolumes() {
         this.paneManager.removePane(SeparateVolumesComponent.UUID);
         delete this.pane;
-        this.drawingManager.removeDrawerByName('UNDERLAY_VOLUMES_AREA');
     }
     /**
      * Converts a pixel value from the Y-axis of the scale model to the corresponding data value.

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

@@ -23,7 +23,7 @@ export class VolumesComponent extends ChartBaseElement {
         const volumesModel = new VolumesModel(chartComponent, scale);
         this.volumesModel = volumesModel;
         this.addChildEntity(volumesModel);
-        this.separateVolumes = new SeparateVolumesComponent(chartComponent, drawingManager, config, volumesModel, paneManager);
+        this.separateVolumes = new SeparateVolumesComponent(chartComponent, config, volumesModel, paneManager);
         this.volumesDrawer = new VolumesDrawer(config, this.volumesModel, chartComponent.chartModel, () => { var _a, _b; return (this.config.components.volumes.showSeparately ? (_b = (_a = this.separateVolumes.pane) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : scale : scale); }, this.volumesColorByChartTypeMap, () => true);
         config.components.volumes.visible && this.syncVolumesDynamicObject();
         this.addChildEntity(this.separateVolumes);

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

@@ -101,12 +101,12 @@ export class VolumesDrawer {
                 const width = nextX !== undefined ? nextX - x : floorToDPR(unitToPixels(vCandle.width, viewportModel.zoomX));
                 if (this.config.components.volumes.showSeparately) {
                     const y = floorToDPR(viewportModel.toY(vCandle.candle.volume));
-                    const height = floorToDPR(viewportModel.toY(0)) - y;
+                    const height = ceilToDPR(viewportModel.toY(0)) - y;
                     this.drawVolume(canvasModel, vCandle, x, y, width, height);
                 }
                 else {
                     const zoomY = volumeMax / (fullVHeight / OVERLAY_VOLUME_TOTAL_HEIGHT_DIVISOR);
-                    const height = Math.max(unitToPixels(vCandle.candle.volume, zoomY), 2);
+                    const height = Math.max(ceilToDPR(unitToPixels(vCandle.candle.volume, zoomY)), 2);
                     const y = floorToDPR(bounds.y + fullVHeight - height);
                     this.drawVolume(canvasModel, vCandle, x, y, width, height);
                 }
@@ -139,7 +139,7 @@ export class VolumesDrawer {
             ctx.stroke();
         }
         else {
-            ctx.fillRect(x, y, width, ceilToDPR(height));
+            ctx.fillRect(x, y, width, height);
         }
     }
 }

package/dist/chart/components/watermark/water-mark.component.d.ts

@@ -5,21 +5,12 @@
  */
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
-import { FullChartConfig } from '../../chart.config';
+import { ChartConfigComponentsWaterMark, FullChartConfig } from '../../chart.config';
 import { CanvasModel } from '../../model/canvas.model';
 import { DrawingManager } from '../../drawers/drawing-manager';
 import EventBus from '../../events/event-bus';
 import { ChartModel } from '../chart/chart.model';
 import { PaneManager } from '../pane/pane-manager.component';
-export interface WaterMarkConfig {
-    isVisible?: boolean;
-    fontFamily?: string;
-    firstRowFontSize?: number;
-    firstRowBottomPadding?: number;
-    secondRowFontSize?: number;
-    secondRowBottomPadding?: number;
-    thirdRowFontSize?: number;
-}
 export interface WaterMarkData {
     firstRow?: string;
     secondRow?: string;
@@ -55,11 +46,11 @@ export declare class WaterMarkComponent extends ChartBaseElement {
     private getWaterMarkData;
     /**
      * Sets the watermark configuration for the chart.
-     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @param {ChartConfigComponentsWaterMark} watermarkConfig - The configuration object for the watermark.
      * @returns {void}
      
     */
-    setWaterMarkConfig(watermarkConfig: WaterMarkConfig): void;
+    setWaterMarkConfig(watermarkConfig: ChartConfigComponentsWaterMark): void;
     /**
      * Sets the logo image to be used as a watermark.
      * @param {CanvasImageSource} img - The image to be used as a watermark.

package/dist/chart/components/watermark/water-mark.component.js

@@ -56,7 +56,7 @@ export class WaterMarkComponent extends ChartBaseElement {
     }
     /**
      * Sets the watermark configuration for the chart.
-     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @param {ChartConfigComponentsWaterMark} watermarkConfig - The configuration object for the watermark.
      * @returns {void}
      
     */

package/dist/chart/components/x_axis/time/parser/time-formats-parser.functions.js

@@ -75,7 +75,7 @@ export const parseTimeFormatsFromKey = (format) => {
         };
     }
     else {
-        console.warn(`${format} is not fit, check the documentation to see available formats https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis`);
+        console.warn(`${format} is not fit, check the documentation to see available formats in dxchart-lite documentation.`);
         return null;
     }
 };

package/dist/chart/components/x_axis/x-axis-labels.generator.d.ts

@@ -18,7 +18,7 @@ export interface XAxisLabelsGenerator {
     /**
      * Generates x-axis labels from scratch. Heavy operation.
      */
-    generateLabels(): void;
+    generateLabels(prependedCandles?: VisualCandle[]): void;
     /**
      * Updates current labels state (x-position). Lightweight operation.
      */
@@ -107,7 +107,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
      * Calls the method generateWeightedLabels to generate labels.
      * @returns {void}
      */
-    generateLabels(): void;
+    generateLabels(prependedCandles?: VisualCandle[]): void;
     /**
      * Recalculates the labels by calling the method recalculateCachedLabels.
      * @returns {void}

package/dist/chart/components/x_axis/x-axis-labels.generator.js

@@ -86,14 +86,14 @@ export class XAxisTimeLabelsGenerator {
     /**
      * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels
      */
-    getAllCandlesWithFake() {
+    getAllCandlesWithFake(prependedCandles = []) {
         const visualCandles = this.chartModel.mainCandleSeries.visualPoints;
         if (visualCandles.length === 0) {
             return [];
         }
         const fakeCandlesForSides = Array.from({ length: 750 });
         const appendFakeCandle = fakeCandlesForSides.map((_, idx) => fakeVisualCandle(this.chartModel.mainCandleSeries.dataPoints, this.chartModel.mainCandleSeries.visualPoints, this.chartModel.mainCandleSeries.meanCandleWidth, visualCandles.length + idx, this.chartModel.getPeriod()));
-        return [...visualCandles, ...appendFakeCandle];
+        return [...prependedCandles, ...visualCandles, ...appendFakeCandle];
     }
     /**
      * Maps an array of weighted points to an array of XAxisLabelWeighted objects.
@@ -139,8 +139,8 @@ export class XAxisTimeLabelsGenerator {
      * @function
      * @returns {void}
      */
-    generateWeightedLabels() {
-        const allCandlesWithFake = this.getAllCandlesWithFake();
+    generateWeightedLabels(prependedCandles = []) {
+        const allCandlesWithFake = this.getAllCandlesWithFake(prependedCandles);
         const weightedPoints = mapCandlesToWeightedPoints(allCandlesWithFake, this.weightToTimeFormatMatcherArray, this.timeZoneModel.tzOffset(this.config.timezone));
         const weightedLabels = this.mapWeightedPointsToLabels(weightedPoints, allCandlesWithFake);
         this.labelsGroupedByWeight = groupLabelsByWeight(weightedLabels);
@@ -253,8 +253,8 @@ export class XAxisTimeLabelsGenerator {
      * Calls the method generateWeightedLabels to generate labels.
      * @returns {void}
      */
-    generateLabels() {
-        this.generateWeightedLabels();
+    generateLabels(prependedCandles) {
+        this.generateWeightedLabels(prependedCandles);
     }
     /**
      * Recalculates the labels by calling the method recalculateCachedLabels.

package/dist/chart/components/x_axis/x-axis-scale.handler.js

@@ -47,8 +47,8 @@ export class XAxisScaleHandler extends ChartBaseElement {
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
-        this.setDblTapCallback = (cb) => this.dblTapCallback = cb;
-        this.setDblClickCallback = (cb) => this.dblClickCallback = cb;
+        this.setDblTapCallback = (cb) => (this.dblTapCallback = cb);
+        this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => chartModel.doBasicScale();
         this.dblTapCallback = () => chartModel.doBasicScale();
         const dragNDropXComponent = new DragNDropXComponent(hitTest, {

package/dist/chart/components/x_axis/x-axis.component.js

@@ -82,7 +82,7 @@ export class XAxisComponent extends ChartBaseElement {
             this.xAxisLabelsGenerator.recalculateLabels();
         }));
         this.addRxSubscription(this.chartComponent.chartModel.candlesUpdatedSubject
-            .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.timestamp) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.timestamp); }), filter(notEmpty))
+            .pipe(map(() => lastOf(this.chartComponent.chartModel.mainCandleSeries.visualPoints)), distinctUntilChanged((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.candle) === null || _a === void 0 ? void 0 : _a.id) === ((_b = b === null || b === void 0 ? void 0 : b.candle) === null || _b === void 0 ? void 0 : _b.id); }), filter(notEmpty))
             .subscribe(x => { var _a, _b; return (_b = (_a = this.xAxisLabelsGenerator) === null || _a === void 0 ? void 0 : _a.updateLastLabel) === null || _b === void 0 ? void 0 : _b.call(_a, x); }));
     }
     /**

package/dist/chart/components/y_axis/y-axis-scale.handler.js

@@ -4,7 +4,7 @@
  * 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 } from 'rxjs';
-import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT } from '../../canvas/canvas-bounds-container';
+import { CanvasElement, DEFAULT_MIN_PANE_HEIGHT, } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
 // if you drag full Y height from top to bottom - you will have x3 zoom, and vice-versa
@@ -73,8 +73,8 @@ export class YAxisScaleHandler extends ChartBaseElement {
             // Continue redrawing hit test
             this.hitTestCanvasModel.hitTestDrawersPredicateSubject.next(true);
         };
-        this.setDblTapCallback = (cb) => this.dblTapCallback = cb;
-        this.setDblClickCallback = (cb) => this.dblClickCallback = cb;
+        this.setDblTapCallback = (cb) => (this.dblTapCallback = cb);
+        this.setDblClickCallback = (cb) => (this.dblClickCallback = cb);
         this.dblClickCallback = () => scale.autoScale(true);
         this.dblTapCallback = () => scale.autoScale(true);
         // drag to Y-scale and double click to auto scale

package/dist/chart/drawers/drawing-manager.d.ts

@@ -6,7 +6,7 @@
 import EventBus from '../events/event-bus';
 import { ChartResizeHandler } from '../inputhandlers/chart-resize.handler';
 export declare const HIT_TEST_PREFIX = "HIT_TEST_";
-declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "UNDERLAY_VOLUMES_AREA", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
+declare const drawerTypes: readonly ["MAIN_BACKGROUND", "MAIN_CLEAR", "HIT_TEST_CLEAR", "YAXIS_CLEAR", "SERIES_CLEAR", "OVER_SERIES_CLEAR", "HIT_TEST_DRAWINGS", "GRID", "X_AXIS", "Y_AXIS", "HIGH_LOW", "DYNAMIC_OBJECTS", "N_MAP_CHART", "PL_CHART", "WATERMARK", "EMPTY_CHART", "OFFLINE_CHART", "LABELS", "EVENTS", "HIT_TEST_EVENTS", "ZERO_LINE", "PL_ZERO_LINE_BACKGROUND", "CROSS_TOOL"];
 export type DrawerType = typeof drawerTypes[number];
 /**
  * Manages the drawing process.

package/dist/chart/drawers/drawing-manager.js

@@ -18,7 +18,6 @@ const drawerTypes = [
     'OVER_SERIES_CLEAR',
     'HIT_TEST_DRAWINGS',
     'GRID',
-    'UNDERLAY_VOLUMES_AREA',
     'X_AXIS',
     'Y_AXIS',
     'HIGH_LOW',

package/dist/chart/inputhandlers/hover-producer.component.js

@@ -4,6 +4,7 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { BehaviorSubject, merge } from 'rxjs';
+import { filter, switchMap } from 'rxjs/operators';
 import { CHART_UUID, CanvasElement } from '../canvas/canvas-bounds-container';
 import { CandleHoverProducerPart } from '../model/candle-hover';
 import { ChartBaseElement } from '../model/chart-base-element';
@@ -50,8 +51,13 @@ export class HoverProducerComponent extends ChartBaseElement {
      */
     doActivate() {
         super.doActivate();
-        this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {
-            // required for initial legend initialization, do not show cross tool
+        this.addRxSubscription(
+        // required for initial legend initialization, do not show cross tool
+        this.chartModel.candlesSetSubject
+            .pipe(
+        // check the scale is valid before doing candle-based hover event
+        switchMap(() => this.scale.initialViewportValidSubject.pipe(filter(Boolean))))
+            .subscribe(() => {
             const lastCandle = this.chartModel.getLastVisualCandle();
             lastCandle && this.createAndFireHoverFromCandle(lastCandle);
         }));

package/dist/chart/inputhandlers/main-canvas-touch.handler.js

@@ -89,7 +89,7 @@ export class MainCanvasTouchHandler extends ChartBaseElement {
         const last = first +
             ((candleIndexes[0] - candleIndexes[1]) / (touchPositions[0] - touchPositions[1])) *
                 this.scale.getBounds().width;
-        if (first >= last) {
+        if (first >= last || touchPositions[0] === touchPositions[1]) {
             return;
         }
         this.scale.setXScale(first, last);

package/dist/chart/model/candle.model.d.ts

@@ -11,6 +11,7 @@ export declare const BASIC_CANDLE_WIDTH: Unit;
  * @doc-tags-name Candle
  */
 export interface Candle {
+    readonly id: string;
     readonly hi: number;
     readonly lo: number;
     readonly open: number;
@@ -22,6 +23,8 @@ export interface Candle {
     readonly impVolatility?: number;
     readonly vwap?: number;
 }
+export declare const defaultSortCandles: (candles: Candle[]) => Candle[];
+export declare const generateCandleId: (timestamp: number, hashValue: number | string) => string;
 /**
  * Provides the name of candle difference
  * @param {Number} open