@devexperts/dxcharts-lite 2.5.8 → 2.6.0

package/dist/chart/__tests__/chart.test.js

@@ -1,8 +1,3 @@
-/*
- * Copyright (C) 2019 - 2024 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/.
- */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,6 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/*
+ * Copyright (C) 2019 - 2024 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 './env';
 import { createChart } from '../../index';
 import { generateCandlesDataTS } from '../utils/candles-generator-ts.utils';

package/dist/chart/__tests__/env.js

@@ -1,9 +1,9 @@
+"use strict";
 /*
  * Copyright (C) 2019 - 2024 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/.
  */
-"use strict";
 /* @see https://jestjs.io/docs/29.4/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom */
 Object.defineProperty(window, 'matchMedia', {
     writable: true,

package/dist/chart/canvas/canvas-bounds-container.js

@@ -455,14 +455,33 @@ export class CanvasBoundsContainer {
         const oldPecNumber = visiblePecRatios.filter(ratio => ratio !== undefined).length;
         // if ratio in undefined for a given pane it means that it's a new pane
         const newPecNumber = pecRatios.filter(ratio => ratio === undefined).length;
+        const paneIsAdded = newPecNumber > 0;
         let freeRatioForPec = 0;
         let freeRatio = 0;
         let ratioForOldPec = 1;
         let ratioForNewPec = 0;
-        if (newPecNumber > 0) {
+        if (paneIsAdded) {
             [ratioForOldPec, ratioForNewPec] = getHeightRatios(visiblePecNumber);
-            chartRatio *= ratioForOldPec;
         }
+        //#region chart height ratio logic
+        if (this.graphsHeightRatio[CHART_UUID] === 0) {
+            chartRatio = 0;
+        }
+        if (this.graphsHeightRatio[CHART_UUID] !== 0) {
+            if (paneIsAdded) {
+                chartRatio = 1 * ratioForOldPec;
+            }
+            else {
+                // pec ratio values before recalculating and new chart ratio
+                const currentHeightRatioValues = Object.values(this.graphsHeightRatio).reduce((prev, curr) => (curr += prev));
+                // chart is hidden and one of the pec is removed
+                // since the chart height ratio is new, the currentHeightRatioValues could be > 1, it happens if make chart visible again
+                if (currentHeightRatioValues < 1 && this.graphsHeightRatio[CHART_UUID] !== 0) {
+                    chartRatio += 1 - currentHeightRatioValues;
+                }
+            }
+        }
+        //#endregion
         // this means we should keep in mind only new panes
         if (oldPecNumber === 0) {
             chartRatio = 1 - ratioForNewPec * newPecNumber;
@@ -856,13 +875,15 @@ export class CanvasBoundsContainer {
     }
 }
 // paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4
+// ratios requirements table: https://confluence.in.devexperts.com/display/UI/Chart+Navigation#ChartNavigation-2Graphsadjustablesizes
 const DEFAULT_RATIOS = {
     0: 1,
     1: 0.8,
     2: 0.6,
     3: 0.5,
     4: 0.4,
-    5: 0.2,
+    5: 0.4,
+    6: 0.4,
 };
 // NOTE: pec stands for panes except main chart
 export const getHeightRatios = (pecLength) => {

package/dist/chart/chart.config.d.ts

@@ -14,6 +14,7 @@ import { DrawerType } from './drawers/drawing-manager';
 import { DateTimeFormatter, TimeFormatterConfig } from './model/date-time.formatter';
 import { MergeOptions } from './utils/merge.utils';
 import { DeepPartial } from './utils/object.utils';
+import { Candle } from './model/candle.model';
 export declare const MAIN_FONT = "Open Sans Semibold, sans-serif";
 export interface DateTimeFormatConfig {
     format: string;
@@ -321,6 +322,7 @@ export interface ChartConfigComponentsChart {
     selectedWidth: number;
     minCandlesOffset: number;
     histogram: ChartConfigComponentsHistogram;
+    sortCandles?: (candles: Candle[]) => Candle[];
 }
 export interface ChartConfigComponentsEvents {
     /**

package/dist/chart/chart.config.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 { DEFAULT_MERGE_OPTIONS, merge } from './utils/merge.utils';
+import { defaultSortCandles } from './model/candle.model';
 export const MAIN_FONT = 'Open Sans Semibold, sans-serif';
 export const LastBarRedrawableBarTypes = ['candle', 'bar', 'scatterPlot', 'trend', 'hollow', 'histogram'];
 export const availableBarTypes = [
@@ -70,6 +71,7 @@ export const getDefaultConfig = () => ({
             histogram: {
                 barCapSize: 1,
             },
+            sortCandles: defaultSortCandles,
         },
         yAxis: {
             type: 'regular',
@@ -537,7 +539,6 @@ export const getDefaultConfig = () => ({
         'GRID',
         'X_AXIS',
         'Y_AXIS',
-        'UNDERLAY_VOLUMES_AREA',
         'DYNAMIC_OBJECTS',
         'WATERMARK',
         'N_MAP_CHART',

package/dist/chart/components/chart/candle-transformer.functions.js

@@ -16,6 +16,6 @@ export const trendCandleTransformer = (candle, { x, width, activeCandle, prevCan
 };
 export const lineCandleTransformer = trendCandleTransformer;
 export const getCandleIsActive = (candle, activeCandle) => {
-    const isActive = activeCandle && activeCandle.idx === candle.idx;
+    const isActive = activeCandle && activeCandle.id === candle.id;
     return isActive !== null && isActive !== void 0 ? isActive : false;
 };

package/dist/chart/components/chart/candle.functions.d.ts

@@ -15,6 +15,6 @@ export declare const prepareCandle: (candle: PartialCandle) => Candle | undefine
  * Adds index to candles according to their array index.
  * @param candles
  */
-export declare const reindexCandles: (candles: Array<Candle>) => void;
+export declare const reindexCandles: (candles: Array<Candle>, startIdx?: number) => void;
 export declare const deleteCandlesIndex: (candles: Array<Candle>) => void;
 export declare const isCandle: (value: Candle | undefined) => value is Candle;

package/dist/chart/components/chart/candle.functions.js

@@ -23,6 +23,7 @@ export const prepareCandle = (candle) => {
         const preparedCandleOpen = finite(candle.open, candle.lo, settlementPrice);
         const preparedCandleClose = finite(candle.close, candle.hi, settlementPrice);
         return {
+            id: candle.id,
             hi: preparedCandleHi,
             lo: preparedCandleLo,
             open: preparedCandleOpen,
@@ -43,8 +44,8 @@ export const prepareCandle = (candle) => {
  * Adds index to candles according to their array index.
  * @param candles
  */
-export const reindexCandles = (candles) => {
-    for (let i = 0; i < candles.length; ++i) {
+export const reindexCandles = (candles, startIdx = 0) => {
+    for (let i = startIdx; i < candles.length; ++i) {
         candles[i].idx = i;
     }
 };

package/dist/chart/components/chart/chart.component.d.ts

@@ -25,6 +25,7 @@ import { CandleWidthCalculator, ChartModel, LastCandleLabelHandler, VisualCandle
 import { PrependedCandlesData } from './chart-base.model';
 import { DynamicObjectsComponent } from '../dynamic-objects/dynamic-objects.component';
 import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler';
+import { PartialExcept } from '../../utils/types.utils';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -41,10 +42,7 @@ export declare class ChartInstrument {
      */
     priceIncrements?: Array<number>;
 }
-export type PartialCandle = Partial<Candle> & {
-    timestamp: Timestamp;
-    close: number;
-};
+export type PartialCandle = PartialExcept<Candle, 'id' | 'timestamp' | 'close'>;
 export interface CandleSeries {
     candles: PartialCandle[];
     instrument?: ChartInstrument;
@@ -190,19 +188,42 @@ export declare class ChartComponent 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: Candle, instrumentSymbol?: string): void;
     /**
-     * Remove candle by idx and recaculate indexes
+     * Remove candle by idx and recalculate indexes
      * @param idx - candle index
-     * @param instrument - name of the instrument to update
+     * @param instrumentSymbol - name of the instrument to update
      */
     removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
+    /**
+     * 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: Candle['id'][], selectedCandleSeries?: CandleSeriesModel): void;
+    /**
+     * Remove candles by ids and recalculate indexes
+     *
+     * @param ids - candles ids to remove
+     * @param selectedCandleSeries - candle series to remove candles from
+     */
+    removeCandlesByIds(ids: Candle['id'][], selectedCandleSeries?: CandleSeriesModel): void;
+    /**
+     * 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: Candle[], startId: string, selectedCandleSeries?: CandleSeriesModel): void;
     /**
      * 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: Candle, instrumentSymbol?: string): void;
     /**

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

@@ -337,23 +337,52 @@ export class ChartComponent 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.chartModel.addLastCandle(candle, instrumentSymbol);
     }
     /**
-     * Remove candle by idx and recaculate indexes
+     * Remove candle by idx and recalculate indexes
      * @param idx - candle index
-     * @param instrument - name of the instrument to update
+     * @param instrumentSymbol - name of the instrument to update
      */
     removeCandleByIdx(idx, instrumentSymbol) {
         this.chartModel.removeCandleByIdx(idx, instrumentSymbol);
     }
+    /**
+     * 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 = this.chartModel.mainCandleSeries) {
+        this.chartModel.removeCandlesByIdsSequence(ids, selectedCandleSeries);
+    }
+    /**
+     * Remove candles by ids and recalculate indexes
+     *
+     * @param ids - candles ids to remove
+     * @param selectedCandleSeries - candle series to remove candles from
+     */
+    removeCandlesByIds(ids, selectedCandleSeries = this.chartModel.mainCandleSeries) {
+        this.chartModel.removeCandlesByIds(ids, 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 = this.chartModel.mainCandleSeries) {
+        this.chartModel.addCandlesById(candles, startId, selectedCandleSeries);
+    }
     /**
      * 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.chartModel.updateLastCandle(candle, instrumentSymbol);

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

@@ -228,6 +228,19 @@ export declare class ChartModel extends ChartBaseElement {
      * @param timestamp
      */
     candleFromTimestamp(timestamp: Timestamp, extrapolate?: boolean, selectedCandleSeries?: CandleSeriesModel): VisualCandle;
+    /**
+     * For given id finds the target candle
+     * @param id
+     * @param selectedCandleSeries
+     */
+    candleFromId(id: Candle['id'], selectedCandleSeries?: CandleSeriesModel): VisualCandle | undefined;
+    /**
+     * For given id finds the target candle index
+     * @param id
+     * @param selectedCandleSeries
+     * @returns candle index, -1 if not found
+     */
+    candleIdxFromId(id: Candle['id'], selectedCandleSeries?: CandleSeriesModel): number;
     /**
      * For given index returns the closest visual candle, or fake candle with correct X coordinate.
      * @param idx - index of candle
@@ -358,7 +371,7 @@ export declare 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
      */
     updateCandles(candles: Array<Candle>, instrumentSymbol?: string): void;
     /**
@@ -400,21 +413,45 @@ export declare 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: Candle, instrumentSymbol?: string): void;
     /**
      * 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: Candle, instrumentSymbol?: string): void;
     /**
      * 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: number, instrumentSymbol?: string): void;
+    /**
+     * 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: Candle['id'][], selectedCandleSeries: CandleSeriesModel): void;
+    /**
+     * Remove candles by ids and recalculate indexes
+     * @param ids - candles ids to remove
+     * @param selectedCandleSeries - candle series to remove candles from
+     */
+    removeCandlesByIds(ids: Candle['id'][], selectedCandleSeries: CandleSeriesModel): void;
+    /**
+     * 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: Candle[], startId: string, selectedCandleSeries: CandleSeriesModel): void;
+    private candlesChangedRedraw;
+    private prepareCandles;
 }
 export interface UpdateCandlesResult {
     prepended: Candle[];

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

@@ -59,6 +59,11 @@ 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));
@@ -164,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
@@ -200,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;
@@ -286,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);
@@ -294,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);
         });
@@ -329,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.
@@ -377,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
@@ -525,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
@@ -726,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) {
@@ -858,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 {
@@ -873,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);
@@ -881,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);
@@ -889,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);
@@ -902,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/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.