@devexperts/dxcharts-lite 2.7.25 → 2.7.27

package/README.md

@@ -39,15 +39,15 @@
 
 Get started with DXCharts Lite by installing the library and configuring it to your needs.
 
--   🚀 [Quick start](#quick-start)
-    -   📦 [Installation](#installation)
-    -   🛠️ [Create Chart](#create-chart)
-    -   📈 [Set data](#set-data)
-    -   📄 [HTML markup](#html-markup)
--   ⚙️ [Configuration](#configuration)
--   🔌 [API](#api)
--   📒 [Examples](#examples)
--   🧮 [Demo](#demo)
+- 🚀 [Quick start](#quick-start)
+    - 📦 [Installation](#installation)
+    - 🛠️ [Create Chart](#create-chart)
+    - 📈 [Set data](#set-data)
+    - 📄 [HTML markup](#html-markup)
+- ⚙️ [Configuration](#configuration)
+- 🔌 [API](#api)
+- 📒 [Examples](#examples)
+- 🧮 [Demo](#demo)
 
 ## Quick-start
 
@@ -84,8 +84,8 @@ The `createChart` method creates a new chart instance using `ChartBootstrap` cla
 
 It accepts two parameters:
 
--   `element`: The HTML element where the chart will be rendered.
--   `config` (optional): An instance of [ChartConfig](/chart/chart-config/overview).
+- `element`: The HTML element where the chart will be rendered.
+- `config` (optional): An instance of [ChartConfig](/chart/chart-config/overview).
 
 > Note: Set `width: 100%` and `height: 100%` for the parent container.
 > By default, the chart auto-resizes to the parent, but you can change this by setting `fixedSize` in the config.
@@ -149,7 +149,7 @@ You can configure the chart using a `ChartConfig` object (optional).
 `ChartConfig` sets the initial properties for the chart instance.
 Below is a table of available options (see documentation for details).
 
--   [`FullChartConfig`](docs/generated/FullChartConfig.md)
+- [`FullChartConfig`](docs/generated/FullChartConfig.md)
 
 ## API
 
@@ -157,18 +157,18 @@ Each chart component has an API that allows you to change many parameters on the
 
 Main components include:
 
--   [`ChartComponent`](docs/generated/ChartComponent.md): Set data, subscribe to data changes
--   [`XAxisComponent`](docs/generated/XAxisComponent.md): Configure x-axis labels
--   [`YAxisComponent`](docs/generated/YAxisComponent.md): Configure y-axis labels and type
--   [`CrossToolComponent`](docs/generated/CrossToolComponent.md): Crosshair type, OHLC magnet
--   [`EventsComponent`](docs/generated/EventsComponent.md): Set events data
--   [`VolumesComponent`](docs/generated/VolumesComponent.md): Set volume data
--   [`WaterMarkComponent`](docs/generated/WaterMarkComponent.md): Create and manage a watermark
--   [`NavigationMapComponent`](docs/generated/NavigationMapComponent.md): Create a navigation map
--   [`SnapshotComponent`](docs/generated/SnapshotComponent.md): Create a snapshot
--   [`HighlightsComponent`](docs/generated/HighlightsComponent.md): Draw highlights on canvas objects such as labels
--   [`PaneManager`](docs/generated/PaneManager.md): Create and manage panes
--   [`PaneComponent`](docs/generated/PaneComponent.md): Create and manage pane data series
+- [`ChartComponent`](docs/generated/ChartComponent.md): Set data, subscribe to data changes
+- [`XAxisComponent`](docs/generated/XAxisComponent.md): Configure x-axis labels
+- [`YAxisComponent`](docs/generated/YAxisComponent.md): Configure y-axis labels and type
+- [`CrossToolComponent`](docs/generated/CrossToolComponent.md): Crosshair type, OHLC magnet
+- [`EventsComponent`](docs/generated/EventsComponent.md): Set events data
+- [`VolumesComponent`](docs/generated/VolumesComponent.md): Set volume data
+- [`WaterMarkComponent`](docs/generated/WaterMarkComponent.md): Create and manage a watermark
+- [`NavigationMapComponent`](docs/generated/NavigationMapComponent.md): Create a navigation map
+- [`SnapshotComponent`](docs/generated/SnapshotComponent.md): Create a snapshot
+- [`HighlightsComponent`](docs/generated/HighlightsComponent.md): Draw highlights on canvas objects such as labels
+- [`PaneManager`](docs/generated/PaneManager.md): Create and manage panes
+- [`PaneComponent`](docs/generated/PaneComponent.md): Create and manage pane data series
 
 ## Examples
 

package/dist/chart/animation/viewport-model-animation.js

@@ -5,7 +5,7 @@
  */
 import { DEFAULT_ANIMATION_TIME_MS, VIEWPORT_ANIMATION_ID } from './canvas-animation';
 const VIEWPORT_ANIMATION_DURATION_MS = DEFAULT_ANIMATION_TIME_MS;
-const STUCK_ANIMATION_THRESHOLD = 0.90; // Force finish animations stuck at 90%+
+const STUCK_ANIMATION_THRESHOLD = 0.9; // Force finish animations stuck at 90%+
 /**
  * Starts the animation for chart viewport movement for safari.
  * @param canvasAnimation

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

@@ -545,7 +545,7 @@ export class CanvasBoundsContainer {
         const nMap = this.getBounds(CanvasElement.N_MAP);
         const { height, width } = this.config.components.navigationMap.knots;
         const knotHeightFromConfig = height !== null && height !== void 0 ? height : 0;
-        const knotWidthFromConfig = isMobile() ? width * KNOTS_W_MOBILE_MULTIPLIER : width !== null && width !== void 0 ? width : 0;
+        const knotWidthFromConfig = isMobile() ? width * KNOTS_W_MOBILE_MULTIPLIER : (width !== null && width !== void 0 ? width : 0);
         const knotY = !knotHeightFromConfig ? nMap.y : nMap.y + (nMap.height - knotHeightFromConfig) / 2;
         // time labels
         const timeLabelsVisible = (_b = (_a = this.config.components.navigationMap) === null || _a === void 0 ? void 0 : _a.timeLabels) === null || _b === void 0 ? void 0 : _b.visible;

package/dist/chart/components/chart/chart-area-pan.handler.js

@@ -13,6 +13,7 @@ import { deviceDetector } from '../../utils/device/device-detector.utils';
 import { getTouchpadSensitivity } from '../../utils/device/touchpad.utils';
 import { DragNDropXComponent } from '../dran-n-drop_helper/drag-n-drop-x.component';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
+import { ONE_FRAME_MS } from '../../utils/numeric-constants.utils';
 /**
  * ChartAreaPanHandler is a class that handles the panning and zooming of the chart area.
  * It extends the ChartBaseElement class and has the following properties:
@@ -45,7 +46,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         // number of candles delta changed during X dragging: 1, 5 or -3 for ex.
         this.xDraggedCandlesDelta = 0;
         this.lastXStart = 0;
-        this.wheelThrottleTime = 15; // in ms
+        this.wheelThrottleTime = ONE_FRAME_MS;
         this.chartPanningOptions = {
             horizontal: true,
             vertical: true,

package/dist/chart/components/chart/price-formatters/__tests__/treasury-price.formatter.test.js

@@ -3,7 +3,7 @@
  * 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 { treasuryPriceFormatter, parseTreasuryPrice, isTreasuryPriceFormat, TREASURY_32ND } from '../treasury-price.formatter';
+import { treasuryPriceFormatter, parseTreasuryPrice, isTreasuryPriceFormat, TREASURY_32ND, } from '../treasury-price.formatter';
 describe('Treasury Price Formatter', () => {
     describe('treasuryPriceFormatter', () => {
         it('should format decimal prices to treasury format', () => {
@@ -33,12 +33,12 @@ describe('Treasury Price Formatter', () => {
             expect(parseTreasuryPrice("1'00")).toBe(1.0);
         });
         it('should return NaN for invalid formats', () => {
-            expect(parseTreasuryPrice("invalid")).toBe(NaN);
+            expect(parseTreasuryPrice('invalid')).toBe(NaN);
             expect(parseTreasuryPrice("132'")).toBe(NaN);
             expect(parseTreasuryPrice("'10")).toBe(NaN);
             expect(parseTreasuryPrice("132'1")).toBe(NaN);
             expect(parseTreasuryPrice("132'100")).toBe(NaN);
-            expect(parseTreasuryPrice("abc123")).toBe(NaN);
+            expect(parseTreasuryPrice('abc123')).toBe(NaN);
         });
     });
     describe('isTreasuryPriceFormat', () => {
@@ -49,8 +49,8 @@ describe('Treasury Price Formatter', () => {
             expect(isTreasuryPriceFormat("1'31")).toBe(true);
         });
         it('should reject invalid formats', () => {
-            expect(isTreasuryPriceFormat("invalid")).toBe(false);
-            expect(isTreasuryPriceFormat("132")).toBe(false);
+            expect(isTreasuryPriceFormat('invalid')).toBe(false);
+            expect(isTreasuryPriceFormat('132')).toBe(false);
             expect(isTreasuryPriceFormat("132'")).toBe(false);
             expect(isTreasuryPriceFormat("'10")).toBe(false);
             expect(isTreasuryPriceFormat("132'1")).toBe(false);

package/dist/chart/components/chart/price-formatters/price.formatter.js

@@ -31,6 +31,9 @@ export const createRegularPriceFormatter = (extent, config) => (value) => {
     return `${checkedValue}`;
 };
 export const createPercentFormatter = (extent) => (value, dataSeries) => {
+    if (value === 0) {
+        return '0.00 %';
+    }
     const [mainDataSeries] = extent.dataSeries;
     let valueUnit = value;
     const series = dataSeries !== null && dataSeries !== void 0 ? dataSeries : mainDataSeries;

package/dist/chart/components/chart/price-formatters/treasury-price.formatter.js

@@ -40,7 +40,7 @@ export const parseTreasuryPrice = (value) => {
         const integerPart = parseInt(match[1], 10);
         const thirtySeconds = parseInt(match[2], 10);
         // Convert 32nds to decimal
-        const decimalPart = (thirtySeconds * TREASURY_32ND);
+        const decimalPart = thirtySeconds * TREASURY_32ND;
         return integerPart + decimalPart;
     }
     // Return Number(value) for non-treasury formats (this will be NaN for invalid strings)

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

@@ -8,7 +8,7 @@ import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartModel } from '../chart/chart.model';
 export type HighlightTextPlacement = 'left-left' | 'left-right' | 'right-left' | 'right-right';
 export declare const HIGHLIGHTS_TYPES: readonly ["AFTER_MARKET", "PRE_MARKET", "NO_TRADING", "REGULAR"];
-export type HighlightType = typeof HIGHLIGHTS_TYPES[number];
+export type HighlightType = (typeof HIGHLIGHTS_TYPES)[number];
 export type VisualHighlights = Partial<Record<HighlightType, Highlight[]>>;
 export interface Highlight {
     type: HighlightType;

package/dist/chart/components/pane/extent/y-extent-component.js

@@ -140,9 +140,18 @@ export class YExtentComponent extends ChartBaseElement {
 export const createDefaultYExtentHighLowProvider = (extent) => ({
     isHighLowActive: () => true,
     calculateHighLow: state => {
-        const highLows = Array.from(extent.dataSeries)
-            .filter(ds => ds.highLowProvider.isHighLowActive())
-            .map(ds => ds.highLowProvider.calculateHighLow(state));
+        const allDataSeries = Array.from(extent.dataSeries);
+        const activeDataSeries = allDataSeries.filter(ds => ds.highLowProvider.isHighLowActive());
+        const seriesToUse = activeDataSeries.length > 0 ? activeDataSeries : allDataSeries;
+        if (seriesToUse.length === 0) {
+            return { low: 0, high: 100 };
+        }
+        const highLows = seriesToUse
+            .map(ds => ds.highLowProvider.calculateHighLow(state))
+            .filter(hl => hl.high >= hl.low);
+        if (highLows.length === 0) {
+            return { low: 0, high: 100 };
+        }
         return mergeHighLow(highLows);
     },
 });

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

@@ -29,7 +29,7 @@ export class VolumesComponent extends ChartBaseElement {
         this.volumesModel = volumesModel;
         this.addChildEntity(volumesModel);
         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);
+        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);
         this.registerDefaultVolumeColorResolvers();

package/dist/chart/components/x_axis/time/parser/time-formats.model.d.ts

@@ -7,8 +7,8 @@ declare const weekWeekday: "week-weekday";
 declare const timeFormatsConfirugable: readonly ["second", "minute", "hour", "day", "month", "year"];
 declare const timeFormatsNoNConfirugable: readonly ["lessThanSecond"];
 type TimeFormatWeekWeekdayType = typeof weekWeekday;
-type TimeFormatConfirugableType = typeof timeFormatsConfirugable[number];
-type TimeFormatNonConfirugableType = typeof timeFormatsNoNConfirugable[number];
+type TimeFormatConfirugableType = (typeof timeFormatsConfirugable)[number];
+type TimeFormatNonConfirugableType = (typeof timeFormatsNoNConfirugable)[number];
 export type TimeFormat = TimeFormatConfirugableType | TimeFormatNonConfirugableType | TimeFormatWeekWeekdayType;
 type TimeFormatConfirugableWithDurationType = `${TimeFormatConfirugableType}_${number}` | `${TimeFormatConfirugableType}_${number}!` | `${TimeFormatWeekWeekdayType}_${number | '$'}_${number}`;
 export type TimeFormatWithDuration = TimeFormatConfirugableWithDurationType | TimeFormatNonConfirugableType;

package/dist/chart/drawers/data-series-drawers/difference-cloud.drawer.js

@@ -35,12 +35,12 @@ export class DifferenceCloudDrawer {
                 if (isDifferenceTool(linkedSeries.config.type) &&
                     isDifferenceTool(model.config.type) &&
                     linkedShouldDrawCloud) {
-                    const differencePoints = [];
                     const mainSeries = model;
                     const allPointsMain = mainSeries.getSeriesInViewport(mainSeries.scale.xStart - 1, mainSeries.scale.xEnd + 1);
                     const allPointsLinked = linkedSeries.getSeriesInViewport(linkedSeries.scale.xStart - 1, linkedSeries.scale.xEnd + 1);
                     allPointsMain.forEach((points, idx) => {
                         var _a, _b;
+                        const differencePoints = [];
                         const to = Math.min(points.length, (_b = (_a = allPointsLinked[idx]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
                         for (let k = 0; k < to; k++) {
                             const diffPoints = [

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

@@ -7,7 +7,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", "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];
+export type DrawerType = (typeof drawerTypes)[number];
 /**
  * Manages the drawing process.
  * Can re-order drawers to make one be on top of the other.

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

@@ -27,6 +27,7 @@ export declare class CanvasModel {
     height: number;
     prevHeight: number;
     prevWidth: number;
+    private lastDPR;
     private readonly _canvasId;
     type: CanvasBarType;
     constructor(eventBus: EventBus, canvas: HTMLCanvasElement, drawingManager: DrawingManager, canvasModels: CanvasModel[], resizer?: HTMLElement | undefined, options?: CanvasRenderingContext2DSettings);

package/dist/chart/model/canvas.model.js

@@ -23,6 +23,7 @@ export class CanvasModel {
         this.height = 0;
         this.prevHeight = 0;
         this.prevWidth = 0;
+        this.lastDPR = 0;
         this.type = CANDLE_TYPE;
         canvasModels.push(this);
         this.parent = findHeightParent(canvas);
@@ -42,6 +43,10 @@ export class CanvasModel {
     updateDPR(bcr) {
         const { width, height } = bcr;
         const dpi = window.devicePixelRatio;
+        if (width === this.width && height === this.height && dpi === this.lastDPR) {
+            return;
+        }
+        this.lastDPR = dpi;
         this.canvas.style.height = height + 'px';
         this.canvas.style.width = width + 'px';
         this.canvas.width = width * dpi;

package/dist/chart/model/data-series.model.js

@@ -303,7 +303,7 @@ export const calculateDataSeriesHighLow = (visualCandles) => {
     return result;
 };
 const createDataSeriesModelHighLowProvider = (dataSeries) => ({
-    isHighLowActive: () => dataSeries.config.highLowActive,
+    isHighLowActive: () => dataSeries.config.highLowActive && dataSeries.config.visible,
     calculateHighLow: state => {
         const highLow = calculateDataSeriesHighLow(dataSeries.getSeriesInViewport(state === null || state === void 0 ? void 0 : state.xStart, state === null || state === void 0 ? void 0 : state.xEnd).flat());
         return Object.assign(Object.assign({}, highLow), { high: dataSeries.view.toAxisUnits(highLow.high), low: dataSeries.view.toAxisUnits(highLow.low) });

package/dist/chart/model/scale.model.js

@@ -128,13 +128,14 @@ export class ScaleModel extends ViewportModel {
      * @param zoomSensitivity - The sensitivity of the zoom. Default value is taken from the configuration object.
      */
     zoomXToEnd(zoomIn, zoomSensitivity) {
-        if (this.config.scale.disableAnimations) {
+        const disableAnimations = this.config.scale.disableAnimations || this.config.components.yAxis.type === 'percent';
+        if (disableAnimations) {
             this.haltAnimation();
         }
         this.beforeStartAnimationSubject.next();
         const state = this.export();
         zoomXToEndViewportCalculator(this, state, zoomSensitivity, zoomIn);
-        this.zoomXTo(state, zoomIn, this.config.scale.disableAnimations);
+        this.zoomXTo(state, zoomIn, disableAnimations);
     }
     haltAnimation() {
         var _a;
@@ -232,7 +233,7 @@ export class ScaleModel extends ViewportModel {
         const vCandles = visualCandleSource.slice(Math.max(visualCandleSource.length - this.state.defaultViewportItems, 0));
         const endCandle = vCandles[vCandles.length - 1];
         const xEnd = endCandle.startUnit + endCandle.width + this.offsets.right;
-        const xStart = xEnd - (this.getBounds().width * this.zoomX);
+        const xStart = xEnd - this.getBounds().width * this.zoomX;
         const state = Object.assign(Object.assign({}, initialStateCopy), { xStart, xEnd });
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
         if (this.state.auto) {

package/dist/chart/utils/dom.utils.d.ts

@@ -8,7 +8,7 @@ export declare const MouseButton: {
     middle: number;
     right: number;
 };
-export type MouseButtonType = typeof MouseButton[keyof typeof MouseButton];
+export type MouseButtonType = (typeof MouseButton)[keyof typeof MouseButton];
 /**
  * @param {Element} element
  * @param {function} listener