@devexperts/dxcharts-lite 2.7.29 → 2.7.31

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

@@ -38,6 +38,7 @@ export class HoverProducerComponent extends ChartBaseElement {
          * When true, mobile long-touch (e.g. 200ms) does not activate crosshair / disable pan.
          */
         this.longTouchCrosshairSuppressed = false;
+        this.hoverOverLastCandle = false;
         this.xFormatter = () => '';
         const candleHoverProducerPart = new CandleHoverProducerPart(this.chartModel);
         const compareSeriesHoverProducerPart = new CompareSeriesHoverProducerPart(this.chartModel);
@@ -68,16 +69,14 @@ export class HoverProducerComponent extends ChartBaseElement {
             lastCandle && this.createAndFireHoverFromCandle(lastCandle);
         }));
         this.addRxSubscription(this.chartModel.candlesUpdatedSubject.subscribe(() => {
-            // update hover if its timestamp is equal or greater than last candle's one
             const lastCandle = this.chartModel.getLastVisualCandle();
-            if (this.hover !== null && lastCandle !== undefined) {
-                if (lastCandle.candle.timestamp <= this.hover.timestamp) {
-                    this.updateHover(lastCandle);
-                }
+            if (this.hover !== null && lastCandle !== undefined && this.hoverOverLastCandle) {
+                this.updateHover(lastCandle);
             }
         }));
         this.addRxSubscription(this.crossEventProducer.crossSubject.subscribe((cross) => {
             if (cross === null) {
+                this.hoverOverLastCandle = false;
                 this.hoverSubject.next(null);
             }
             else {
@@ -134,7 +133,7 @@ export class HoverProducerComponent extends ChartBaseElement {
             this.paneManager.chartPanComponent.setChartPanningOptions(false, false);
         }));
         this.addRxSubscription(this.canvasInputListener.observeTouchEndDocument().subscribe(event => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const { clientX, clientY } = event.changedTouches[0];
             const { fixed, temp } = this.crossEventProducer.crossToolTouchInfo;
             const x = clientX - this.canvasBoundsContainer.canvasOnPageLocation.x;
@@ -142,28 +141,32 @@ export class HoverProducerComponent extends ChartBaseElement {
             // common tap without moving, hide crosstool
             if (this.crossEventProducer.crossToolTouchInfo.isCommonTap &&
                 !checkChartIsMoving(x, temp.x, y, temp.y)) {
-                this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
-                this.longTouchActivatedSubject.next(false);
-                this.crossEventProducer.fireCrossClose();
-                this.crossEventProducer.crossToolHover = null;
-                this.crossEventProducer.crossToolTouchInfo.isSet = false;
+                this.resetCrossTool();
                 return;
             }
             if (!this.crossEventProducer.crossToolTouchInfo.isSet) {
                 this.crossEventProducer.crossToolTouchInfo.isSet = true;
-                // previous fixed goes to temporary to prevent crosstool jumps outside the candle on candle update tick
+                const crossToolHover = this.crossEventProducer.crossToolHover;
+                const anchorX = (_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : x;
+                const anchorY = (_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : y;
                 this.crossEventProducer.crossToolTouchInfo.temp = {
-                    x: this.crossEventProducer.crossToolTouchInfo.fixed.x,
-                    y: this.crossEventProducer.crossToolTouchInfo.fixed.y,
+                    x: anchorX,
+                    y: anchorY,
                 };
                 this.crossEventProducer.crossToolTouchInfo.fixed = {
-                    x,
-                    y,
+                    x: anchorX,
+                    y: anchorY,
                 };
-                this.crossEventProducer.crossToolTouchInfo.isSet = true;
+                const paneId = (_e = (_c = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.paneId) !== null && _c !== void 0 ? _c : (_d = this.paneManager.getPaneIfHit({ x: anchorX, y: anchorY })) === null || _d === void 0 ? void 0 : _d.uuid) !== null && _e !== void 0 ? _e : '';
+                const hover = crossToolHover !== null && crossToolHover !== void 0 ? crossToolHover : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: anchorX, y: anchorY, paneId });
+                this.crossEventProducer.crossSubject.next([anchorX, anchorY, paneId]);
             }
             else {
-                const pane = (_b = (_a = this.crossEventProducer.crossToolHover) === null || _a === void 0 ? void 0 : _a.paneId) !== null && _b !== void 0 ? _b : 'CHART';
+                const pane = (_g = (_f = this.crossEventProducer.crossToolHover) === null || _f === void 0 ? void 0 : _f.paneId) !== null && _g !== void 0 ? _g : 'CHART';
                 const paneBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(pane));
                 const paneYStart = paneBounds.y + 5;
                 const paneYEnd = paneBounds.y + paneBounds.height - 5;
@@ -172,6 +175,13 @@ export class HoverProducerComponent extends ChartBaseElement {
                 const newX = fixed.x < 0 ? 0 : fixed.x > paneBounds.width ? paneBounds.width : (fixed.x += xDiff);
                 const newY = fixed.y < paneYStart ? paneYStart : fixed.y > paneYEnd ? paneYEnd : (fixed.y += yDiff);
                 this.crossEventProducer.crossToolTouchInfo.fixed = { x: newX, y: newY };
+                this.crossEventProducer.crossToolTouchInfo.temp = { x: newX, y: newY };
+                const hover = (_h = this.crossEventProducer.crossToolHover) !== null && _h !== void 0 ? _h : this.hover;
+                if (!hover) {
+                    return;
+                }
+                this.crossEventProducer.crossToolHover = Object.assign(Object.assign({}, hover), { x: newX, y: newY, paneId: pane });
+                this.crossEventProducer.crossSubject.next([newX, newY, pane]);
             }
         }));
         //#endregion
@@ -232,16 +242,53 @@ export class HoverProducerComponent extends ChartBaseElement {
         this.fireHover(hover);
     }
     /**
-     * Update current hover using a VisualCandle and fires it.
-     * @param {VisualCandle} candle - The VisualCandle object to create the hover from.
+     * Refreshes hover data (candles, studies, etc.) for the current pointer position.
+     * Used when the last candle updates while the legend must stay aligned to crosshair X — not to the last candle center.
      */
     updateHover(candle) {
+        var _a, _b;
+        if (!this.hover) {
+            return;
+        }
+        const shouldKeepSetTouchCrosshair = isMobile() &&
+            this.longTouchActivatedSubject.getValue() &&
+            this.crossEventProducer.crossSubject.getValue() !== null;
+        const crossToolHover = this.crossEventProducer.crossToolHover;
+        const hoverX = shouldKeepSetTouchCrosshair ? ((_a = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.x) !== null && _a !== void 0 ? _a : this.hover.x) : this.hover.x;
+        const hoverY = shouldKeepSetTouchCrosshair ? ((_b = crossToolHover === null || crossToolHover === void 0 ? void 0 : crossToolHover.y) !== null && _b !== void 0 ? _b : this.hover.y) : this.hover.y;
+        const hoveredCandle = this.chartModel.candleFromX(hoverX, true);
+        const lastIdx = candle.candle.idx;
+        const hoveredIdx = hoveredCandle.idx;
+        if (lastIdx !== undefined &&
+            hoveredIdx !== undefined &&
+            hoveredIdx < lastIdx &&
+            hoverX < candle.xStart(this.scale)) {
+            return;
+        }
         const updatedHover = this.createHoverFromCandle(candle);
-        if (this.hover && updatedHover) {
-            const hover = Object.assign(Object.assign({}, updatedHover), { x: this.hover.x, y: this.hover.y });
+        if (updatedHover) {
+            const hover = Object.assign(Object.assign({}, updatedHover), { x: hoverX, y: hoverY });
             this.fireHover(hover);
         }
     }
+    updateHoverLastCandle(hover) {
+        const lastCandle = this.chartModel.getLastVisualCandle();
+        if (!lastCandle) {
+            this.hoverOverLastCandle = false;
+            return;
+        }
+        const hoveredCandle = this.chartModel.candleFromX(hover.x, true);
+        const lastIdx = lastCandle.candle.idx;
+        const hoveredIdx = hoveredCandle.idx;
+        const isHistoricalCandleHover = lastIdx !== undefined &&
+            hoveredIdx !== undefined &&
+            hoveredIdx < lastIdx &&
+            hover.x < lastCandle.xStart(this.scale);
+        this.hoverOverLastCandle =
+            !isHistoricalCandleHover &&
+                (lastCandle.candle.timestamp <= hover.timestamp ||
+                    (lastIdx !== undefined && hoveredIdx !== undefined && hoveredIdx === lastIdx));
+    }
     /**
      * Creates a hover element at the specified coordinates and fires it with the option to show the cross tool
      * @param {CrossEvent} [x,y] - The coordinates where the hover element will be created
@@ -274,9 +321,11 @@ export class HoverProducerComponent extends ChartBaseElement {
                     : (_b = hover.candleHover) === null || _b === void 0 ? void 0 : _b.visualCandle.candle;
                 candle && this.chartModel.mainCandleSeries.setActiveCandle(candle);
             }
+            this.updateHoverLastCandle(hover);
             this.hoverSubject.next(hover);
         }
         else {
+            this.hoverOverLastCandle = false;
             this.crossEventProducer.fireCrossClose();
         }
     }
@@ -293,6 +342,21 @@ export class HoverProducerComponent extends ChartBaseElement {
     setLongTouchCrosshairSuppressed(value) {
         this.longTouchCrosshairSuppressed = value;
     }
+    /**
+     * Resets the current crosshair/touch state back to the default mobile idle state.
+     */
+    resetCrossTool(clearMobile = false) {
+        this.paneManager.chartPanComponent.setChartPanningOptions(true, true);
+        this.longTouchActivatedSubject.next(false);
+        this.crossEventProducer.fireCrossClose();
+        this.crossEventProducer.crossToolHover = null;
+        this.crossEventProducer.crossToolTouchInfo.isSet = false;
+        if (clearMobile) {
+            this.crossEventProducer.crossToolTouchInfo.isCommonTap = false;
+            this.crossEventProducer.crossToolTouchInfo.fixed = { x: 0, y: 0 };
+            this.crossEventProducer.crossToolTouchInfo.temp = { x: 0, y: 0 };
+        }
+    }
     /**
      * Registers a hover producer part with the given id.
      *

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

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { ChartConfigComponentsOffsets, ChartScale, FullChartConfig } from '../chart.config';
 import { CanvasAnimation } from '../animation/canvas-animation';
 import { AutoScaleViewportSubModel } from './scaling/auto-scale.model';
-import { Price, Unit, ViewportModel, ViewportModelState, Zoom } from './scaling/viewport.model';
+import { Price, Unit, ViewportModel, ViewportModelState, XScale, YScale, Zoom } from './scaling/viewport.model';
 import { BoundsProvider } from './bounds.model';
 import VisualCandle from './visual-candle';
 export interface HighLowWithIndex {
@@ -16,11 +16,7 @@ export interface HighLowWithIndex {
     highIdx: number;
     lowIdx: number;
 }
-export interface ScaleHistoryItem {
-    xStart: Unit;
-    xEnd: Unit;
-    yStart: Unit;
-    yEnd: Unit;
+export interface ScaleHistoryItem extends XScale, YScale {
 }
 export declare const getDefaultHighLowWithIndex: () => HighLowWithIndex;
 export type ViewportPercent = number;

package/dist/chart/model/scaling/viewport.model.d.ts

@@ -57,6 +57,8 @@ export interface ViewportModelState {
     zoomY: Zoom;
     inverseY: boolean;
 }
+export type XScale = Pick<ViewportModelState, 'xStart' | 'xEnd'>;
+export type YScale = Pick<ViewportModelState, 'yStart' | 'yEnd'>;
 /**
  * Abstract viewport model.
  * Viewport has 4 coordinates: xStart, xEnd, yStart and yEnd - all stored in {@link Unit}.

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.d.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+export {};

package/dist/chart/utils/__tests__/canvas-lower-hover-strip.utils.test.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 - 2026 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 { isCanvasPointInLowerHoverStrip } from '../canvas-lower-hover-strip.utils';
+const baseBounds = () => ({
+    x: 0,
+    y: 0,
+    pageX: 0,
+    pageY: 0,
+    width: 1000,
+    height: 1000,
+});
+describe('canvas-lower-hover-strip.utils', () => {
+    it('returns true for a point in the lower strip (bottom offset 0)', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 900 }, b, 0)).toBe(true);
+    });
+    it('returns false for a point in the upper area', () => {
+        const b = baseBounds();
+        expect(isCanvasPointInLowerHoverStrip({ x: 500, y: 100 }, b, 0)).toBe(false);
+    });
+    it('shifts the strip when bottomOffsetPx is non-zero', () => {
+        const b = baseBounds();
+        const yAtStripStartNoOffset = b.height * 0.85 + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset - 1 }, b, 0)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartNoOffset }, b, 0)).toBe(true);
+        const bottomOffset = 50;
+        const yAtStripStartWithOffset = b.height * 0.85 - bottomOffset + 10;
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset - 1 }, b, bottomOffset)).toBe(false);
+        expect(isCanvasPointInLowerHoverStrip({ x: 1, y: yAtStripStartWithOffset }, b, bottomOffset)).toBe(true);
+    });
+});

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

@@ -3,6 +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 { CandleTimestampAnchor } from '../chart.config';
 import { Candle } from '../model/candle.model';
 import { DataSeriesPoint } from '../model/data-series.model';
 import { BinarySearchResult } from './array.utils';
@@ -10,7 +11,10 @@ export declare const getDaysOnlyTimestampFn: (isDaysPeriod: boolean) => (timesta
 export declare const searchCandleIndex: (rawTimestamp: number, options: {
     extrapolate?: boolean;
     isDaysPeriod?: boolean;
+    candleTimestampAnchor?: CandleTimestampAnchor;
 } | undefined, candles: DataSeriesPoint[], periodMs?: number) => BinarySearchResult;
+export declare const getCandleStart: (candles: DataSeriesPoint[], index: number, periodMs: number, anchor: CandleTimestampAnchor) => number;
+export declare const getCandleEnd: (candle: DataSeriesPoint, periodMs: number, anchor: CandleTimestampAnchor) => number;
 /**
  * checks if the first or the last candle or both have implied volatility data provided
  * @param candles

package/dist/chart/utils/candles.utils.js

@@ -11,7 +11,7 @@ export const getDaysOnlyTimestampFn = (isDaysPeriod) => (timestamp) => {
     }
     return timestamp;
 };
-export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+const searchOpenTimeCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
     var _a, _b, _c, _d;
     const { extrapolate, isDaysPeriod } = options;
     const shouldExtrapolate = Boolean(extrapolate);
@@ -55,6 +55,85 @@ export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs
         return binarySearch(candles, timestamp, candle => getDaysOnlyTimestamp(candle.timestamp));
     }
 };
+const searchCloseTimeCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { extrapolate, isDaysPeriod } = options;
+    const shouldExtrapolate = Boolean(extrapolate);
+    const getDaysOnlyTimestamp = getDaysOnlyTimestampFn(Boolean(isDaysPeriod));
+    const timestamp = getDaysOnlyTimestamp(rawTimestamp);
+    if (!candles.length) {
+        return {
+            index: -1,
+            exact: true,
+        };
+    }
+    const firstTimestamp = getDaysOnlyTimestamp((_b = (_a = firstOf(candles)) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : 0);
+    const lastTimestamp = getDaysOnlyTimestamp((_d = (_c = lastOf(candles)) === null || _c === void 0 ? void 0 : _c.timestamp) !== null && _d !== void 0 ? _d : 0);
+    if (timestamp > lastTimestamp) {
+        if (shouldExtrapolate) {
+            return {
+                index: candles.length - 1 + Math.ceil((timestamp - lastTimestamp) / periodMs),
+                exact: true,
+            };
+        }
+        return {
+            index: candles.length - 1,
+            exact: true,
+        };
+    }
+    if (timestamp <= firstTimestamp) {
+        const previousClose = getDaysOnlyTimestamp((_f = (_e = candles[0]) === null || _e === void 0 ? void 0 : _e.timestamp) !== null && _f !== void 0 ? _f : firstTimestamp);
+        const firstCandleStart = previousClose - periodMs;
+        if (timestamp <= firstCandleStart) {
+            if (shouldExtrapolate) {
+                return {
+                    index: floor((timestamp - firstTimestamp) / periodMs),
+                    exact: true,
+                };
+            }
+            return {
+                index: -1,
+                exact: true,
+            };
+        }
+        return {
+            index: 0,
+            exact: timestamp === firstTimestamp,
+        };
+    }
+    let lo = 0;
+    let hi = candles.length;
+    while (lo < hi) {
+        const mid = floor((lo + hi) / 2);
+        if (getDaysOnlyTimestamp(candles[mid].timestamp) < timestamp) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    const index = lo;
+    return {
+        index: index >= candles.length ? candles.length - 1 : index,
+        exact: index < candles.length && getDaysOnlyTimestamp(candles[index].timestamp) === timestamp,
+    };
+};
+export const searchCandleIndex = (rawTimestamp, options = {}, candles, periodMs = 1000) => {
+    var _a;
+    const anchor = (_a = options.candleTimestampAnchor) !== null && _a !== void 0 ? _a : 'open';
+    if (anchor === 'close') {
+        return searchCloseTimeCandleIndex(rawTimestamp, options, candles, periodMs);
+    }
+    return searchOpenTimeCandleIndex(rawTimestamp, options, candles, periodMs);
+};
+export const getCandleStart = (candles, index, periodMs, anchor) => {
+    var _a, _b;
+    if (anchor === 'close') {
+        return (_b = (_a = candles[index - 1]) === null || _a === void 0 ? void 0 : _a.timestamp) !== null && _b !== void 0 ? _b : candles[index].timestamp - periodMs;
+    }
+    return candles[index].timestamp;
+};
+export const getCandleEnd = (candle, periodMs, anchor) => anchor === 'close' ? candle.timestamp : candle.timestamp + periodMs;
 /**
  * checks if the first or the last candle or both have implied volatility data provided
  * @param candles

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.d.ts

@@ -46,7 +46,7 @@ export declare function drawPriceLabel(ctx: CanvasRenderingContext2D, x0: number
  *
  * @returns {void}
  */
-export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>): void;
+export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>, lineCap?: CanvasLineCap): void;
 /**
  * Try to avoid anti-aliasing
  */

package/dist/chart/utils/canvas/canvas-drawing-functions.utils.js

@@ -109,10 +109,13 @@ export function drawPriceLabel(ctx, x0, y0, x1, y1, x2, y2, _width, rounded, ali
  *
  * @returns {void}
  */
-export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = []) {
+export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = [], lineCap) {
     ctx.save();
     ctx.setLineDash(lineDash);
     ctx.lineWidth = thickness;
+    if (lineCap !== undefined) {
+        ctx.lineCap = lineCap;
+    }
     ctx.beginPath();
     ctx.moveTo(x0, y0);
     ctx.lineTo(x1, y1);

package/dist/chart/utils/canvas-lower-hover-strip.utils.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (C) 2019 - 2026 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 { Bounds } from '../model/bounds.model';
+export interface CanvasPointerPoint {
+    readonly x: number;
+    readonly y: number;
+}
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export declare function isCanvasPointInLowerHoverStrip(point: CanvasPointerPoint, canvasBounds: Bounds, bottomOffsetPx: number): boolean;

package/dist/chart/utils/canvas-lower-hover-strip.utils.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2019 - 2026 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/.
+ */
+/**
+ * Canvas-space hit test for the lower band (time scale / volume strip).
+ * Reusable for any UI that should react when the pointer is near the bottom of the chart.
+ *
+ * Rectangle matches the Figma hover region (full width, lower ~15% of canvas height plus offsets).
+ */
+export function isCanvasPointInLowerHoverStrip(point, canvasBounds, bottomOffsetPx) {
+    const rectX = 0;
+    const rectY = canvasBounds.height * 0.85 - bottomOffsetPx + 10;
+    const rectWidth = canvasBounds.width;
+    const rectHeight = canvasBounds.height * 0.15 + bottomOffsetPx + 10;
+    const dx = point.x - rectX;
+    const dy = point.y - rectY;
+    return dx >= 0 && dx < rectWidth && dy >= 0 && dy < rectHeight;
+}