@devexperts/dxcharts-lite 2.5.7 → 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/bootstrap.js

@@ -180,8 +180,8 @@ export default class ChartBootstrap {
         this.volumesComponent = new VolumesComponent(this.dynamicObjectsCanvasModel, chartComponent, scaleModel, canvasBoundsContainer, drawingManager, config, paneManager, this.dynamicObjects);
         this.chartComponents.push(this.volumesComponent);
         // grid component
-        const mainChartGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => this.yAxisComponent.model.baseLabelsModel.labels, () => mainPane.mainExtent.toY(mainPane.mainExtent.getBaseline()), () => config.components.grid.visible);
-        this.chartComponents.push(mainChartGridComponent);
+        const verticalGridComponent = new GridComponent(mainCanvasModel, scaleModel, config, this.yAxisComponent.state, 'GRID', drawingManager, () => this.canvasBoundsContainer.getBounds(CanvasElement.ALL_PANES), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.xAxisComponent.xAxisLabelsGenerator.labels, () => [], undefined, () => config.components.grid.visible);
+        this.chartComponents.push(verticalGridComponent);
         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);

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/basic-scale.d.ts

@@ -7,12 +7,16 @@ import { ScaleModel } from '../../model/scale.model';
 import VisualCandle from '../../model/visual-candle';
 import { Timestamp } from '../../model/scaling/viewport.model';
 import { ChartModel } from './chart.model';
+export interface BasicScaleOptions {
+    xScale?: boolean;
+    yScale?: boolean;
+}
 /**
  * Calculates the initial viewport.
  * @param scaleModel
  * @doc-tags scaling,viewport
  */
-export declare const createBasicScaleViewportTransformer: (scale: ScaleModel) => (visualCandleSource: VisualCandle[]) => void;
+export declare const createBasicScaleViewportTransformer: (scale: ScaleModel) => (visualCandleSource: VisualCandle[], scaleOptions?: BasicScaleOptions) => void;
 /**
  * Moves the viewport between 2 timestamps.
  * @param scaleModel

package/dist/chart/components/chart/basic-scale.js

@@ -8,13 +8,17 @@
  * @param scaleModel
  * @doc-tags scaling,viewport
  */
-export const createBasicScaleViewportTransformer = (scale) => (visualCandleSource) => {
+export const createBasicScaleViewportTransformer = (scale) => (visualCandleSource, scaleOptions = { xScale: true, yScale: true }) => {
     if (visualCandleSource.length !== 0) {
-        const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - scale.state.defaultViewportItems, 0));
-        const startCandle = vCandles[0];
-        const endCandle = vCandles[vCandles.length - 1];
-        scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
-        scale.doAutoScale(true);
+        if (scaleOptions.xScale) {
+            const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - scale.state.defaultViewportItems, 0));
+            const startCandle = vCandles[0];
+            const endCandle = vCandles[vCandles.length - 1];
+            scale.setXScale(startCandle.startUnit, endCandle.startUnit + endCandle.width + scale.offsets.right);
+        }
+        if (scaleOptions.yScale) {
+            scale.doAutoScale(true);
+        }
         scale.fireChanged();
     }
 };

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

@@ -54,7 +54,7 @@ export declare class ChartModel extends ChartBaseElement {
     private candleWidthByChartType;
     secondaryChartColors: SecondaryChartColorsPool;
     lastTimeFrame: TimeFrameRange;
-    basicScaleViewportTransformer: (visualCandleSource: VisualCandle[]) => void;
+    basicScaleViewportTransformer: (visualCandleSource: VisualCandle[], scaleOptions?: import("./basic-scale").BasicScaleOptions) => void;
     timeFrameViewportTransformer: (timeframe: [number, number], zoomIn?: boolean | null) => void;
     private FAKE_CANDLES_DEFAULT;
     readonly pane: PaneComponent;
@@ -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[];