npm - @devexperts/dxcharts-lite - Versions diffs - 2.0.1 → 2.1.0 - Mend

@devexperts/dxcharts-lite 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/README.md CHANGED Viewed

@@ -23,7 +23,7 @@
     <img src="https://img.shields.io/static/v1?label=PRs&message=Welcome&color=blue" alt="PRs: Welcome" />
   </a>&nbsp;
   <a href="https://devexperts.com/dxcharts-demo/?lang=en">
-    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=1.0.0&color=blue" alt="Version" />
+    <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.1.0&color=blue" alt="Version" />
   </a>
 </p>
@@ -97,16 +97,11 @@ Now you should have empty chart on screen.
 Let's pass in some data i.e. `Candles`. You can use bundled function to generate some mock data.
 Import `generateCandlesData` and call it to generate candles.
-Also, you would need `Instrument` object - it is required to show instrument description on chart and show correct price precisions on Y axis.
 ```js
 export const generateMockData = () => {
-	const mockCandles = generateCandlesData();
-	const mockInstrument = {
-		symbol: 'AAPL',
-		priceIncrements: [0.01],
-	};
-	chart.setData({ candles: mockCandles, instrument: mockInstrument });
+	const candles = generateCandlesData();
+	chart.setData({ candles });
 };
 ```
@@ -120,28 +115,32 @@ Now you should see chart just like image below:
 Here is full quick-start code example:
-```markup
+```html
 <html>
-    <head>
-        <script src="https://www.unpkg.com/@devexperts/dxcharts-lite@1.0.1/dist/dxchart.min.js"></script>
-    </head>
-    <body>
-        <div id="chart_container"></div>
-    </body>
-    <script type="module">
-        import generateCandlesData from 'https://www.unpkg.com/@devexperts/dxcharts-lite@1.0.1/dist/chart/utils/candles-generator.utils.js';
-        // create chart instance, pass parent container as 1st argument
-        const container = document.getElementById("chart_container");
-        const chartInstance = DXChart.createChart(container);
-        // create and set candles data
-        const mockCandles = generateCandlesData();
-        const mockInstrument = {
-            symbol: 'AAPL',
-            priceIncrements: [0.01],
-        };
-        chart.setData({ candles: mockCandles, instrument: mockInstrument });
-  </script>
+	<head>
+		<script src="https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js"></script>
+		<script type="importmap">
+			{
+				"imports": {
+					"@devexperts/dxcharts-lite/": "https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/"
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<div id="chart_container"></div>
+	</body>
+	<script type="module">
+		import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';
+		// create chart instance, pass parent container as 1st argument
+		const container = document.getElementById('chart_container');
+		const chart = DXChart.createChart(container);
+		// create and set candles data
+		const candles = generateCandlesData();
+		chart.setData({ candles });
+	</script>
+</html>
 ```
 ## Configuration

package/dist/chart/__tests__/chart.test.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/*
+ * 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 './env';

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

@@ -0,0 +1,51 @@
+/*
+ * 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/.
+ */
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import './env';
+import { createChart } from '../../index';
+import { generateCandlesDataTS } from '../utils/candles-generator-ts.utils';
+describe('chart', () => {
+    const candles = generateCandlesDataTS({ quantity: 50 });
+    it.each([
+        ['zero -> non-zero candles', [[], candles]],
+        ['prepend candles', [candles.slice(10), candles.slice(0, 10)]],
+        ['prepend with a gap', [candles.slice(0, 10), candles.slice(20, 30)]],
+        ['prepend with overlap', [candles.slice(10), candles.slice(0, 20)]],
+        ['prepend with full overlap', [candles.slice(10), candles]],
+        ['only update existing candles', [candles, candles.slice(10, 20)]],
+        ['update all candles', [candles, candles]],
+        ['append candles', [candles.slice(0, 10), candles.slice(10)]],
+        ['append candles with a gap', [candles.slice(0, 10), candles.slice(20)]],
+        ['append candles with overlap', [candles.slice(0, 20), candles.slice(10)]],
+        ['append candles with full overlap', [candles.slice(0, 20), candles]],
+        ['prepend and append', [candles.slice(10, 20), candles.slice(0, 30)]],
+        [
+            "fill in the gap (won't work but should not error)",
+            [candles.slice(0, 10), candles.slice(11, 20), candles.slice(10, 11)],
+        ],
+    ])('should update candles in various scenarios: %s', (scenario, updates) => __awaiter(void 0, void 0, void 0, function* () {
+        const div = document.createElement('div');
+        const chart = createChart(div);
+        updates.forEach((update, i) => {
+            if (i === 0) {
+                chart.setData({ candles: update });
+            }
+            else {
+                chart.updateData({ candles: update });
+            }
+        });
+        // wait for async tasks to complete successfully
+        yield new Promise(done => setTimeout(done, 100));
+    }));
+});

package/dist/chart/{chart-container.js → __tests__/env.d.ts} RENAMED Viewed

@@ -3,4 +3,3 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-export {};

package/dist/chart/__tests__/env.js ADDED Viewed

@@ -0,0 +1,28 @@
+/*
+ * 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/.
+ */
+"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,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    value: jest.fn().mockImplementation(() => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+    })),
+});

package/dist/chart/bootstrap.d.ts CHANGED Viewed

@@ -7,7 +7,6 @@ import { CanvasAnimation } from './animation/canvas-animation';
 import { CanvasBoundsContainer } from './canvas/canvas-bounds-container';
 import { ValidatedChartElements } from './canvas/chart-elements';
 import { CursorHandler } from './canvas/cursor.handler';
-import ChartContainer from './chart-container';
 import { ChartColors, ChartConfigComponentsOffsets, FullChartConfig, GridComponentConfig, PartialChartConfig } from './chart.config';
 import { ChartBaseModel } from './components/chart/chart-base.model';
 import { ChartComponent } from './components/chart/chart.component';
@@ -43,7 +42,7 @@ export type FitType = 'studies' | 'orders' | 'positions';
 /**
  * @deprecated use {Chart} instead
  */
-export default class ChartBootstrap implements ChartContainer {
+export default class ChartBootstrap {
     id: string;
     bus: EventBus;
     config: FullChartConfig;
@@ -89,6 +88,9 @@ export default class ChartBootstrap implements ChartContainer {
     mainCanvasModel: CanvasModel;
     dynamicObjectsCanvasModel: CanvasModel;
     hitTestCanvasModel: HitTestCanvasModel;
+    /**
+     * @deprecated use {bounds} instead
+     */
     canvasBoundsContainer: CanvasBoundsContainer;
     canvasInputListener: CanvasInputListenerComponent;
     /**
@@ -117,6 +119,9 @@ export default class ChartBootstrap implements ChartContainer {
      */
     chartPanComponent: ChartPanComponent;
     paneManager: PaneManager;
+    /**
+     * @deprecated use {hover} instead
+     */
     hoverProducer: HoverProducerComponent;
     canvasModels: CanvasModel[];
     chartResizeHandler: ChartResizeHandler;

package/dist/chart/bootstrap.js CHANGED Viewed

@@ -179,7 +179,7 @@ export default class ChartBootstrap {
         this.chartComponents.push(mainChartGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
-        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer);
+        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer, this.backgroundCanvasModel);
         this.chartComponents.push(this.crossToolComponent);
         // Snapshot component
         const snapshotCanvasModel = createCanvasModel(eventBus, elements.snapshotCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);
@@ -203,7 +203,7 @@ export default class ChartBootstrap {
         this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
         const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisDrawer);
-        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config.colors.yAxis, this.paneManager);
+        const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(yAxisLabelsCanvasModel, this.backgroundCanvasModel, this.canvasBoundsContainer, this.config, this.paneManager);
         yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
     }
     // TODO remove chartModel dependency, put period to global config somewhere

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

@@ -106,7 +106,6 @@ export interface FullChartColors {
     };
     yAxis: {
         backgroundColor: string;
-        backgroundHoverColor: string;
         zeroPercentLine: string;
         labelTextColor: string;
         labelInvertedTextColor: string;
@@ -246,6 +245,10 @@ export interface ChartScale {
      * Adjust x viewport when y-axis width is changed, so x zoom remains the same
      */
     keepZoomXOnYAxisChange: boolean;
+    /**
+     * Disable all scale process animations
+     */
+    disableAnimations: boolean;
 }
 export interface AutoScaleDisableOnDrag {
     enabled: boolean;

package/dist/chart/chart.config.js CHANGED Viewed

@@ -43,6 +43,7 @@ export const getDefaultConfig = () => ({
         inverse: false,
         zoomSensitivity: 0.25,
         defaultViewportItems: 100,
+        disableAnimations: false
     },
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
     components: {
@@ -455,7 +456,6 @@ export const getDefaultConfig = () => ({
         ],
         yAxis: {
             backgroundColor: 'transparent',
-            backgroundHoverColor: 'rgba(20,20,19,1)',
             labelBoxColor: 'rgba(20,20,19,1)',
             labelTextColor: 'rgba(128,128,128,1)',
             labelInvertedTextColor: 'rgba(20,20,19,1)',

package/dist/chart/chart.d.ts CHANGED Viewed

@@ -24,6 +24,8 @@ export declare class Chart extends ChartBootstrap {
     data: import("./components/chart/chart.component").ChartComponent;
     scale: import("./model/scale.model").ScaleModel;
     panning: import("./components/pan/chart-pan.component").ChartPanComponent;
+    bounds: import("./canvas/canvas-bounds-container").CanvasBoundsContainer;
+    hover: import("./inputhandlers/hover-producer.component").HoverProducerComponent;
     constructor(element: HTMLElement, config?: PartialChartConfig);
     /**
      * Registers number formatters for pane

package/dist/chart/chart.js CHANGED Viewed

@@ -23,6 +23,8 @@ export class Chart extends ChartBootstrap {
         this.data = this.chartComponent;
         this.scale = this.scaleModel;
         this.panning = this.chartPanComponent;
+        this.bounds = this.canvasBoundsContainer;
+        this.hover = this.hoverProducer;
     }
     /**
      * Registers number formatters for pane
@@ -53,7 +55,7 @@ export class Chart extends ChartBootstrap {
     showSeparateVolumes(separate = false) {
         if (this.volumes) {
             this.volumes.setShowVolumesSeparatly(separate);
-            this.canvasBoundsContainer.updateYAxisWidths();
+            this.bounds.updateYAxisWidths();
         }
     }
     setData(data) {

package/dist/chart/components/chart/candle-transformer.functions.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ import { Candle } from '../../model/candle.model';
 export declare const defaultCandleTransformer: VisualCandleCalculator;
 export declare const hollowCandleTransformer: VisualCandleCalculator;
 export declare const trendCandleTransformer: VisualCandleCalculator;
+export declare const lineCandleTransformer: VisualCandleCalculator;
 export declare const getCandleIsActive: (candle: Candle, activeCandle?: Candle) => boolean;

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

@@ -14,6 +14,7 @@ export const trendCandleTransformer = (candle, { x, width, activeCandle, prevCan
     var _a;
     return new VisualCandle(x, width, candle.open, candle.close, candle.hi, candle.lo, nameDirection((_a = prevCandle === null || prevCandle === void 0 ? void 0 : prevCandle.close) !== null && _a !== void 0 ? _a : candle.close, candle.close), candle, true, getCandleIsActive(candle, activeCandle), candle.close > candle.open);
 };
+export const lineCandleTransformer = trendCandleTransformer;
 export const getCandleIsActive = (candle, activeCandle) => {
     const isActive = activeCandle && activeCandle.idx === candle.idx;
     return isActive !== null && isActive !== void 0 ? isActive : false;

package/dist/chart/components/chart/chart-base.model.d.ts CHANGED Viewed

@@ -13,7 +13,7 @@ type DataPoint<T extends BaseType> = T extends 'candle' ? Candle : DataSeriesPoi
 type VisualPoint<T extends BaseType> = T extends 'candle' ? VisualCandle : VisualSeriesPoint;
 export interface PrependedCandlesData {
     prependedCandlesWidth: number;
-    preparedCandles: Candle[];
+    prependedCandles: Candle[];
 }
 /**
  * This model is an abstraction which describes manipulations tied to the main data series.
@@ -40,7 +40,7 @@ export declare class ChartBaseModel<T extends BaseType = 'point'> {
      * For given timestamp finds the closest candle in dataset.
      * @param timestamp
      */
-    dataFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean): VisualPoint<T>;
+    dataFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean, selectedDataPoints?: DataPoint<T>[]): VisualPoint<T>;
     /**
      * Recalculates the period of the main candle series based on the data points.
      * If a period is detected, it is set as the new period.

package/dist/chart/components/chart/chart-base.model.js CHANGED Viewed

@@ -34,8 +34,8 @@ export class ChartBaseModel {
      * @param timestamp
      */
     // TODO think how to make this function like candleFromX
-    dataFromTimestamp(timestamp, shouldExtrapolate = true) {
-        const result = searchCandleIndex(timestamp, shouldExtrapolate, this.mainDataPoints, this.period);
+    dataFromTimestamp(timestamp, shouldExtrapolate = true, selectedDataPoints = this.mainDataPoints) {
+        const result = searchCandleIndex(timestamp, shouldExtrapolate, selectedDataPoints, this.period);
         return this.dataFromIdx(result.index);
     }
     /**

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

@@ -190,6 +190,12 @@ export declare class ChartComponent extends ChartBaseElement {
      * @param instrument - name of the instrument to update
      */
     addLastCandle(candle: Candle, instrumentSymbol?: string): void;
+    /**
+     * Remove candle by idx and recaculate indexes
+     * @param idx - candle index
+     * @param instrument - name of the instrument to update
+     */
+    removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
     /**
      * Updates last candle value
      * @param candle - updated candle

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

@@ -27,7 +27,7 @@ import { HTDataSeriesDrawer } from '../../drawers/ht-data-series.drawer';
 import { BaselineModel } from '../../model/baseline.model';
 import { keys } from '../../utils/object.utils';
 import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
-import { defaultCandleTransformer, hollowCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
+import { defaultCandleTransformer, hollowCandleTransformer, lineCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
 import { deleteCandlesIndex } from './candle.functions';
 import { TrendHistogramDrawer } from '../../drawers/data-series-drawers/trend-histogram.drawer';
 /**
@@ -87,12 +87,22 @@ export class ChartComponent extends ChartBaseElement {
     doActivate() {
         super.doActivate();
         // TODO hack, main data series is created before doActivate, so we need to add it manually
-        this.dynamicObjects.model.addObject({ model: this.chartModel.mainCandleSeries, drawer: this.dataSeriesDrawer }, this.chartModel.mainCandleSeries.extentComponent.paneUUID);
+        this.dynamicObjects.model.addObject({
+            id: this.chartModel.mainCandleSeries.id,
+            paneId: this.chartModel.mainCandleSeries.extentComponent.paneUUID,
+            model: this.chartModel.mainCandleSeries,
+            drawer: this.dataSeriesDrawer,
+        });
         this.addRxSubscription(this.paneManager.dataSeriesAddedSubject.subscribe(series => {
-            this.dynamicObjects.model.addObject({ model: series, drawer: this.dataSeriesDrawer }, series.extentComponent.paneUUID);
+            this.dynamicObjects.model.addObject({
+                id: series.id,
+                paneId: series.extentComponent.paneUUID,
+                model: series,
+                drawer: this.dataSeriesDrawer,
+            });
         }));
         this.addRxSubscription(this.paneManager.dataSeriesRemovedSubject.subscribe(series => {
-            this.dynamicObjects.model.removeObject(series, series.extentComponent.paneUUID);
+            this.dynamicObjects.model.removeObject(series.id);
         }));
     }
     /**
@@ -105,6 +115,7 @@ export class ChartComponent extends ChartBaseElement {
         this.registerCandlesTransformer('candle', defaultCandleTransformer);
         this.registerCandlesTransformer('trend', trendCandleTransformer);
         this.registerCandlesTransformer('hollow', hollowCandleTransformer);
+        this.registerCandlesTransformer('line', lineCandleTransformer);
     }
     get barTypeValues() {
         // @ts-ignore
@@ -319,6 +330,14 @@ export class ChartComponent extends ChartBaseElement {
     addLastCandle(candle, instrumentSymbol) {
         this.chartModel.addLastCandle(candle, instrumentSymbol);
     }
+    /**
+     * Remove candle by idx and recaculate indexes
+     * @param idx - candle index
+     * @param instrument - name of the instrument to update
+     */
+    removeCandleByIdx(idx, instrumentSymbol) {
+        this.chartModel.removeCandleByIdx(idx, instrumentSymbol);
+    }
     /**
      * Updates last candle value
      * @param candle - updated candle

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

@@ -250,7 +250,7 @@ export declare class ChartModel extends ChartBaseElement {
      * For given timestamp finds the closest candle in dataset.
      * @param timestamp
      */
-    candleFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean): VisualCandle;
+    candleFromTimestamp(timestamp: Timestamp, extrapolate?: boolean, selectedCandleSeries?: CandleSeriesModel): VisualCandle;
     /**
      * For given index returns the closest visual candle, or fake candle with correct X coordinate.
      * @param idx - index of candle
@@ -432,10 +432,16 @@ export declare class ChartModel extends ChartBaseElement {
      * @param instrument - 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
+     */
+    removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
 }
 export interface UpdateCandlesResult {
-    prepended: number;
-    appended?: number;
+    prepended: Candle[];
+    appended?: Candle[];
     candles: Candle[];
 }
 export type TimeFrameRange = [number, number];

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

@@ -24,6 +24,7 @@ import { deleteCandlesIndex, prepareCandle, reindexCandles } from './candle.func
 import { ChartInstrument } from './chart.component';
 import { fakeCandle } from './fake-candles';
 import { SecondaryChartColorsPool } from './secondary-chart-colors-pool';
+import { uuid } from '../../utils/uuid.utils';
 export class ChartModel extends ChartBaseElement {
     get mainCandleSeries() {
         return this.candleSeries[0];
@@ -62,7 +63,7 @@ export class ChartModel extends ChartBaseElement {
         };
         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, this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, new ChartInstrument(), this.candlesTransformersByChartType, this.candleWidthByChartType, Object.assign({}, this.config.colors));
+        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()));
@@ -183,7 +184,7 @@ export class ChartModel extends ChartBaseElement {
             // now the visual candles
             candleSeriesModel.recalculateVisualPoints();
             this.candlesSetSubject.next();
-            this.bus.fireDraw([this.canvasModel.canvasId]);
+            this.canvasModel.fireDraw();
         }
         return candleSeriesModel;
     }
@@ -220,7 +221,7 @@ export class ChartModel extends ChartBaseElement {
         this.autoScaleOnCandles();
         this.scale.doAutoScale();
         this.candlesSetSubject.next();
-        this.bus.fireDraw([this.canvasModel.canvasId]);
+        this.canvasModel.fireDraw();
     }
     /**
      * This function checks if the autoScaleOnCandles state is true. If it is, it calls the doBasicScale() function and then calls the autoScale() function with a true parameter.
@@ -302,12 +303,12 @@ export class ChartModel extends ChartBaseElement {
         });
         // caclulate offset width for prepanded candles
         const prependedCandlesWidth = this.chartBaseModel.mainVisualPoints
-            .slice(0, updateResult.prepended)
+            .slice(0, updateResult.prepended.length)
             .reduce((acc, cur) => acc + cur.width, 0);
         this.scale.moveXStart(this.scale.xStart + prependedCandlesWidth);
         this.candlesPrependSubject.next({
             prependedCandlesWidth,
-            preparedCandles,
+            prependedCandles: updateResult.prepended,
         });
         this.chartBaseModel.recalculatePeriod();
         this.candlesUpdatedSubject.next();
@@ -346,7 +347,7 @@ export class ChartModel extends ChartBaseElement {
      * @returns {CandleSeriesModel} - The newly created CandleSeriesModel object.
      */
     createCandleSeriesModel(instrument, colors) {
-        const candleSeries = new CandleSeriesModel(this.paneManager.panes[CHART_UUID].mainExtent, this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, instrument, this.candlesTransformersByChartType, this.candleWidthByChartType, colors);
+        const candleSeries = new CandleSeriesModel(this.paneManager.panes[CHART_UUID].mainExtent, uuid(), this.paneManager.hitTestController.getNewDataSeriesHitTestId(), this.bus, this.scale, instrument, this.candlesTransformersByChartType, this.candleWidthByChartType, colors);
         candleSeries.config.type = 'line';
         this.candleSeries.push(candleSeries);
         return candleSeries;
@@ -410,7 +411,6 @@ export class ChartModel extends ChartBaseElement {
         if (seriesToUpdate) {
             seriesToUpdate.config.type = chartType;
             seriesToUpdate.updateCandleSeriesColors(candleSeriesConfig);
-            this.bus.fireDraw([this.canvasModel.canvasId]);
         }
         this.bus.fireDraw([this.canvasModel.canvasId]);
     }
@@ -549,8 +549,9 @@ export class ChartModel extends ChartBaseElement {
      * For given timestamp finds the closest candle in dataset.
      * @param timestamp
      */
-    candleFromTimestamp(timestamp, shouldExtrapolate = true) {
-        return this.chartBaseModel.dataFromTimestamp(timestamp, shouldExtrapolate);
+    candleFromTimestamp(timestamp, extrapolate = true, selectedCandleSeries = this.mainCandleSeries) {
+        const dataPointsSource = selectedCandleSeries.dataPoints;
+        return this.chartBaseModel.dataFromTimestamp(timestamp, extrapolate, dataPointsSource);
     }
     /**
      * For given index returns the closest visual candle, or fake candle with correct X coordinate.
@@ -798,12 +799,13 @@ export class ChartModel extends ChartBaseElement {
             });
             if (lastCandle) {
                 series.updateCurrentPrice(lastCandle.close);
+                this.paneManager.yExtents.forEach(ext => ext.yAxis.updateOrderedLabels(true));
             }
             if (isInView && lastCandle && candles.length === 1) {
                 // can apply some optimization
                 // series.recalculateOnlyLastVisualCandle();
                 // TODO apply optimization
-                this.bus.fireDraw([this.canvasModel.canvasId]);
+                this.canvasModel.fireDraw();
             }
             else {
                 series.recalculateVisualPoints();
@@ -890,7 +892,7 @@ export class ChartModel extends ChartBaseElement {
             }
         });
         return {
-            prepended: prepend.length,
+            prepended: prepend,
             candles: [...prepend, ...targetCopy],
         };
     }
@@ -910,6 +912,26 @@ export class ChartModel extends ChartBaseElement {
     updateLastCandle(candle, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
         this.updateCandles([candle], instrumentSymbol);
     }
+    /**
+     * Remove candle by idx and recaculate indexes
+     * @param candle - new candle
+     * @param instrument - name of the instrument to update
+     */
+    removeCandleByIdx(idx, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
+        const seriesList = this.findSeriesBySymbol(instrumentSymbol);
+        if (seriesList.length === 0) {
+            console.warn("removeCandle by id failed. Can't find series", instrumentSymbol);
+            return;
+        }
+        seriesList.forEach(series => {
+            series.dataPoints = series.dataPoints.slice(0, idx).concat(series.dataPoints.slice(idx + 1));
+            reindexCandles(series.dataPoints);
+            series.recalculateVisualPoints();
+        });
+        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 findFirstNotEmptyCandle = (candles, startIdx, iterateStep) => {
@@ -952,8 +974,8 @@ const updateCandles = (target, update) => {
         }
     });
     return {
-        prepended: prepend.length,
-        appended: append.length,
+        prepended: prepend,
+        appended: append,
         candles: [...prepend, ...targetCopy, ...append],
     };
 };

package/dist/chart/components/cross_tool/cross-tool.component.d.ts CHANGED Viewed

@@ -23,9 +23,10 @@ export declare class CrossToolComponent extends ChartBaseElement {
     private canvasBoundsContainer;
     private drawingManager;
     private paneManager;
+    private backgroundCanvasModel;
     readonly model: CrossToolModel;
     private readonly crossToolTypeDrawers;
-    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent);
+    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, backgroundCanvasModel: CanvasModel);
     /**
      * Registers default drawer types for the chart.
      * @private

package/dist/chart/components/cross_tool/cross-tool.component.js CHANGED Viewed

@@ -14,13 +14,14 @@ import { NoneDrawerType } from './types/none.drawer';
  * Default bundled chart cross tool.
  */
 export class CrossToolComponent extends ChartBaseElement {
-    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer) {
+    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer, backgroundCanvasModel) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.drawingManager = drawingManager;
         this.paneManager = paneManager;
+        this.backgroundCanvasModel = backgroundCanvasModel;
         this.crossToolTypeDrawers = {};
         this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, crossEventProducer, hoverProducer);
         this.addChildEntity(this.model);
@@ -41,8 +42,8 @@ export class CrossToolComponent extends ChartBaseElement {
      * @returns {void}
      */
     registerDefaultDrawerTypes() {
-        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true));
-        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, () => true, true));
+        this.registerCrossToolTypeDrawer('cross-and-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true));
+        this.registerCrossToolTypeDrawer('just-labels', new CrossAndLabelsDrawerType(this.config, this.canvasBoundsContainer, this.paneManager, this.backgroundCanvasModel, () => true, true));
         this.registerCrossToolTypeDrawer('none', new NoneDrawerType());
     }
     //#region public methods

package/dist/chart/components/cross_tool/cross-tool.model.js CHANGED Viewed

@@ -107,6 +107,7 @@ export class CrossToolModel extends ChartBaseElement {
         else {
             this.currentHover.y = hover.y;
         }
+        this.currentHover.paneId = CHART_UUID;
         this.currentHoverSubject.next(this.currentHover);
     }
 }