@devexperts/dxcharts-lite 2.7.16 → 2.7.17

package/dist/chart/animation/canvas-animation.d.ts

@@ -9,6 +9,7 @@ import { ViewportModel } from '../model/scaling/viewport.model';
 import { ColorAlphaAnimation, ColorAlphaAnimationConfig } from './types/color-alpha-animation';
 import { ColorTransitionAnimation, ColorTransitionAnimationConfig } from './types/color-transition-animation';
 import { ViewportMovementAnimation, ViewportMovementAnimationConfig } from './types/viewport-movement-animation';
+export declare const DEFAULT_ANIMATION_TIME_MS: number;
 export declare const VIEWPORT_ANIMATION_ID = "VIEWPORT_ANIMATION";
 export interface AnimationConfig {
     duration: number;

package/dist/chart/animation/canvas-animation.js

@@ -9,7 +9,8 @@ import { uuid } from '../utils/uuid.utils';
 import { ColorAlphaAnimation } from './types/color-alpha-animation';
 import { ColorTransitionAnimation } from './types/color-transition-animation';
 import { ViewportMovementAnimation } from './types/viewport-movement-animation';
-const DEFAULT_ANIMATION_TIME_MS = 400;
+import { isSafari } from '../utils/device/touchpad.utils';
+export const DEFAULT_ANIMATION_TIME_MS = isSafari ? 150 : 400;
 export const VIEWPORT_ANIMATION_ID = 'VIEWPORT_ANIMATION';
 /**
  * Singleton animation container for all chart animations.

package/dist/chart/animation/viewport-model-animation.d.ts

@@ -5,11 +5,14 @@
  */
 import { CanvasAnimation } from './canvas-animation';
 import { ViewportModel, ViewportModelState } from '../model/scaling/viewport.model';
+import { AutoScaleViewportSubModel } from '../model/scaling/auto-scale.model';
 /**
- * Starts the animation for chart viewport movement.
+ * Starts the animation for chart viewport movement for safari.
  * @param canvasAnimation
  * @param viewportModel
  * @param state
+ * @param autoScaleModel - Optional autoScale model to apply before animation
  * @doc-tags animation,viewport
  */
+export declare const startViewportModelAnimationSafari: (canvasAnimation: CanvasAnimation, viewportModel: ViewportModel, state: ViewportModelState, autoScaleModel?: AutoScaleViewportSubModel) => void;
 export declare const startViewportModelAnimation: (canvasAnimation: CanvasAnimation, viewportModel: ViewportModel, state: ViewportModelState) => void;

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

@@ -3,15 +3,33 @@
  * 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 { VIEWPORT_ANIMATION_ID } from './canvas-animation';
-const VIEWPORT_ANIMATION_DURATION_MS = 400;
+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%+
 /**
- * Starts the animation for chart viewport movement.
+ * Starts the animation for chart viewport movement for safari.
  * @param canvasAnimation
  * @param viewportModel
  * @param state
+ * @param autoScaleModel - Optional autoScale model to apply before animation
  * @doc-tags animation,viewport
  */
+export const startViewportModelAnimationSafari = (canvasAnimation, viewportModel, state, autoScaleModel) => {
+    // Force finish stuck animations to prevent memory leaks
+    if (viewportModel.currentAnimation && viewportModel.currentAnimation.animationInProgress) {
+        const progress = viewportModel.currentAnimation.getProgress();
+        // Force finish animation if it's taking too long (prevent stuck animations)
+        if (progress > STUCK_ANIMATION_THRESHOLD) {
+            viewportModel.currentAnimation.finishAnimation();
+            viewportModel.currentAnimation = undefined;
+        }
+    }
+    // Apply autoScale BEFORE starting animation to get correct Y scale
+    if (autoScaleModel) {
+        autoScaleModel.doAutoYScale(state);
+    }
+    startViewportModelAnimation(canvasAnimation, viewportModel, state);
+};
 export const startViewportModelAnimation = (canvasAnimation, viewportModel, state) => {
     const animation = canvasAnimation.startViewportMovementAnimation(viewportModel, {
         duration: VIEWPORT_ANIMATION_DURATION_MS,

package/dist/chart/bootstrap.js

@@ -45,6 +45,8 @@ import { TimeZoneModel } from './model/time-zone.model';
 import { clearerSafe } from './utils/function.utils';
 import { merge } from './utils/merge.utils';
 import { HitTestComponent } from './components/hit-test/hit-test.component';
+import { isSafari } from './utils/device/touchpad.utils';
+import { SafariCanvasAnimation } from './utils/performance/safari/components/animations/safari-canvas-animation';
 /**
  * @deprecated use {Chart} instead
  */
@@ -100,13 +102,23 @@ export default class ChartBootstrap {
         this.canvasInputListener = canvasInputListener;
         this.chartComponents.push(this.canvasInputListener);
         //#endregion
-        const hitTestCanvasModel = new HitTestCanvasModel(eventBus, elements.hitTestCanvas, canvasInputListener, canvasBoundsContainer, drawingManager, config, this.canvasModels, elements.chartResizer);
+        const hitTestCanvasModelParams = [
+            eventBus,
+            elements.hitTestCanvas,
+            canvasInputListener,
+            canvasBoundsContainer,
+            drawingManager,
+            config,
+            this.canvasModels,
+            elements.chartResizer,
+        ];
+        const hitTestCanvasModel = new HitTestCanvasModel(...hitTestCanvasModelParams);
         this.hitTestCanvasModel = hitTestCanvasModel;
         const hitTestClearCanvas = new ClearCanvasDrawer(hitTestCanvasModel);
         drawingManager.addDrawer(hitTestClearCanvas, 'HIT_TEST_CLEAR');
         //#endregion
-        // canvas animation container
-        const canvasAnimation = new CanvasAnimation(eventBus);
+        // canvas animation container, safari has separate animation logic due to browser specifics
+        const canvasAnimation = isSafari ? new SafariCanvasAnimation(eventBus) : new CanvasAnimation(eventBus);
         this.canvasAnimation = canvasAnimation;
         const chartPaneId = CanvasElement.PANE_UUID(CHART_UUID);
         //#region ScaleModel init
@@ -181,11 +193,11 @@ 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 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, undefined, () => config.components.grid.visible);
+        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, undefined, () => config.components.grid.visible, this.mainPane.mainExtent.idx);
         this.chartComponents.push(verticalGridComponent);
         this.hoverProducer = new HoverProducerComponent(this.crossEventProducer, scaleModel, config, chartModel, canvasInputListener, this.canvasBoundsContainer, this.paneManager, timeZoneModel, chartPanComponent.mainCanvasTouchHandler, formatterFactory);
         this.chartComponents.push(this.hoverProducer);
-        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer, this.chartComponent.baselineModel);
+        this.crossToolComponent = new CrossToolComponent(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, this.crossEventProducer, this.hoverProducer, this.chartComponent.baselineModel, this.chartModel);
         this.chartComponents.push(this.crossToolComponent);
         // Snapshot component
         const snapshotCanvasModel = createCanvasModel(eventBus, elements.snapshotCanvas, config, drawingManager, this.canvasModels, elements.chartResizer);

package/dist/chart/chart.config.js

@@ -216,7 +216,7 @@ export const getDefaultConfig = () => ({
         },
         crossTool: {
             type: 'cross-and-labels',
-            discrete: false,
+            discrete: true,
             magnetTarget: 'none',
             lineDash: [4, 6],
             xAxisLabelFormat: [

package/dist/chart/components/chart/chart-area-pan.handler.d.ts

@@ -11,13 +11,14 @@ import { CanvasInputListenerComponent, Point } from '../../inputlisteners/canvas
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ScaleModel } from '../../model/scale.model';
 import { DragNDropYComponent } from '../dran-n-drop_helper/drag-n-drop-y.component';
+import { DragInfo } from '../dran-n-drop_helper/drag-n-drop.component';
 import { ChartPanComponent } from '../pan/chart-pan.component';
 import { HitTestCanvasModel } from '../../model/hit-test-canvas.model';
 export interface ChartWheelEvent {
     readonly originalEvent: WheelEvent;
     readonly candleIdx: number;
 }
-interface ChartPanningOptions {
+export interface ChartPanningOptions {
     horizontal: boolean;
     vertical: boolean;
 }
@@ -39,15 +40,15 @@ interface ChartPanningOptions {
  * @param {ChartPanComponent} chartPanComponent - An instance of the ChartPanComponent class.
  */
 export declare class ChartAreaPanHandler extends ChartBaseElement {
-    private bus;
-    private config;
-    private scale;
-    private canvasInputListener;
-    private canvasBoundsContainer;
-    private canvasAnimation;
-    private chartPanComponent;
-    private hitTestCanvasModel;
-    private currentPoint;
+    protected bus: EventBus;
+    protected config: FullChartConfig;
+    protected scale: ScaleModel;
+    protected canvasInputListener: CanvasInputListenerComponent;
+    protected canvasBoundsContainer: CanvasBoundsContainer;
+    protected canvasAnimation: CanvasAnimation;
+    protected chartPanComponent: ChartPanComponent;
+    protected hitTestCanvasModel: HitTestCanvasModel;
+    protected currentPoint: Point;
     xDraggedCandlesDelta: number;
     lastXStart: number;
     wheelThrottleTime: number;
@@ -64,14 +65,14 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * @param {number} zoomSensitivity - zoom sensitivity
      * @returns {void}
      */
-    private zoomXHandler;
+    protected zoomXHandler: (e: WheelEvent, zoomSensitivity: number) => void;
     /**
      * This method is used to activate the zoom functionality of the canvas. It extends the doActivate method of the parent class.
      * @protected
      * @returns {void}
      */
     protected doActivate(): void;
-    private calculateDynamicSesitivity;
+    protected calculateDynamicSesitivity(e: WheelEvent, maxSensitivity: number): number;
     /**
      * Registers a handler for panning the chart along the Y-axis.
      * @param {ScaleModel} scale - The scale model of the extent.
@@ -79,9 +80,9 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
      * @returns {DragNDropYComponent} - The drag and drop component for panning the chart along the Y-axis.
      */
     registerChartYPanHandler(scale: ScaleModel, hitTest: HitBoundsTest): DragNDropYComponent;
-    private onXDragStart;
-    private onXDragTick;
-    private onXDragEnd;
+    protected onXDragStart: () => void;
+    protected onXDragTick: (dragInfo: DragInfo) => void;
+    protected onXDragEnd: () => void;
 }
 /**
  * This function calculates angle between current point and point(0, 0), and compares the result with config values
@@ -91,4 +92,3 @@ export declare class ChartAreaPanHandler extends ChartBaseElement {
  * @doc-tags chart-core,auto-scale,y-axis
  */
 export declare const shouldDisableAutoScale: (point: Point, config: Required<AutoScaleDisableOnDrag>) => boolean;
-export {};

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

@@ -46,7 +46,10 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         this.xDraggedCandlesDelta = 0;
         this.lastXStart = 0;
         this.wheelThrottleTime = 15; // in ms
-        this.chartPanningOptions = { horizontal: true, vertical: true };
+        this.chartPanningOptions = {
+            horizontal: true,
+            vertical: true,
+        };
         /**
          * It observes the wheel event on all panes of the canvas and throttles it to the specified time.
          * It then calculates the zoom sensitivity based on whether the event was triggered by a touchpad or not.
@@ -117,7 +120,10 @@ export class ChartAreaPanHandler extends ChartBaseElement {
         //#endregion
         this.addRxSubscription(this.canvasInputListener
             .observeWheel(allPanesHitTest)
-            .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
+            .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), throttleTime(this.wheelThrottleTime, animationFrameScheduler, {
+            trailing: true,
+            leading: true,
+        }))
             .subscribe(e => {
             const device = deviceDetector();
             const direction = device === 'apple' || device === 'mobile' ? -1 : 1;

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

@@ -34,6 +34,7 @@ import { deleteCandlesIndex } from './candle.functions';
 import { TrendHistogramDrawer } from '../../drawers/data-series-drawers/trend-histogram.drawer';
 import { debounce } from '../../utils/performance/debounce.utils';
 import { LinearTrendDrawer } from '../../drawers/data-series-drawers/linear-trend.drawer';
+import { TrendPointsDrawer } from '../../drawers/data-series-drawers/trend-points.drawer';
 /**
  * Represents a financial instrument to be displayed on a chart
  * @class
@@ -187,6 +188,7 @@ export class ChartComponent extends ChartBaseElement {
         this.registerDataSeriesTypeDrawer('HISTOGRAM', new HistogramDrawer());
         this.registerDataSeriesTypeDrawer('TREND_HISTOGRAM', new TrendHistogramDrawer());
         this.registerDataSeriesTypeDrawer('POINTS', new PointsDrawer());
+        this.registerDataSeriesTypeDrawer('TREND_POINTS', new TrendPointsDrawer());
         this.registerDataSeriesTypeDrawer('COLOR_CANDLE', new CandleSeriesWrapper(new ColorCandleDrawer(this.chartModel), this.config, mainChartBoundsProvider));
         this.registerDataSeriesTypeDrawer('TEXT', new TextDrawer(this.config));
         this.registerDataSeriesTypeDrawer('TRIANGLE', new TriangleDrawer());

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

@@ -109,6 +109,12 @@ export declare class ChartModel extends ChartBaseElement {
      * Applies the basic scale viewport transformer to the visual points of the main candle series and fires a draw event.
      */
     doBasicScale(): void;
+    /**
+     * Applies the basic scale only on x-axis.
+     * @param forceNoAnimations - A boolean value for disabling scale animations. Defaults to false.
+     * @param withZoom - A boolean value for enabling zoom. Defaults to false.
+     */
+    doBasicXScale(): void;
     /**
      * Changes the time frame scale to the previous one and redraws the chart.
      * @param {boolean | null} zoomIn - If true, zooms in the chart, if false, zooms out the chart, if null, does not zoom.
@@ -370,6 +376,11 @@ export declare class ChartModel extends ChartBaseElement {
      * @returns {boolean} - True if the candle is within the viewport, false otherwise.
      */
     isCandleInViewport(idx: number): boolean;
+    /**
+     * Checks if the last candle is within the viewport.
+     * @returns {boolean} - True if the last candle is within the viewport, false otherwise.
+     */
+    isLastCandleInViewport(): boolean;
     /**
      * Updates candles in series. Default is main series.
      * Any number of candles may be provided - they would be matched by their index and updated.

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

@@ -254,6 +254,15 @@ export class ChartModel extends ChartBaseElement {
         this.basicScaleViewportTransformer(this.mainCandleSeries.visualPoints);
         this.bus.fireDraw();
     }
+    /**
+     * Applies the basic scale only on x-axis.
+     * @param forceNoAnimations - A boolean value for disabling scale animations. Defaults to false.
+     * @param withZoom - A boolean value for enabling zoom. Defaults to false.
+     */
+    doBasicXScale() {
+        this.scale.setXScaleWithoutYScale(this.mainCandleSeries.visualPoints);
+        this.bus.fireDraw();
+    }
     /**
      * Changes the time frame scale to the previous one and redraws the chart.
      * @param {boolean | null} zoomIn - If true, zooms in the chart, if false, zooms out the chart, if null, does not zoom.
@@ -746,6 +755,17 @@ export class ChartModel extends ChartBaseElement {
     isCandleInViewport(idx) {
         return this.getFirstIdx() <= idx && idx <= this.getLastIdx();
     }
+    /**
+     * Checks if the last candle is within the viewport.
+     * @returns {boolean} - True if the last candle is within the viewport, false otherwise.
+     */
+    isLastCandleInViewport() {
+        const lastCandle = this.getLastCandle();
+        if (lastCandle && lastCandle.idx) {
+            return this.isCandleInViewport(lastCandle.idx);
+        }
+        return false;
+    }
     /**
      * Updates candles in series. Default is main series.
      * Any number of candles may be provided - they would be matched by their index and updated.

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

@@ -11,6 +11,7 @@ import { HoverProducerComponent } from '../../inputhandlers/hover-producer.compo
 import { BaselineModel } from '../../model/baseline.model';
 import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
+import { ChartModel } from '../chart/chart.model';
 import { PaneManager } from '../pane/pane-manager.component';
 import { CrossToolTypeDrawer } from './cross-tool.drawer';
 import { CrossToolModel, CrossToolType } from './cross-tool.model';
@@ -27,9 +28,10 @@ export declare class CrossToolComponent extends ChartBaseElement {
     private crossEventProducer;
     private hoverProducer;
     private baselineModel;
+    private chartModel;
     readonly model: CrossToolModel;
     private readonly crossToolTypeDrawers;
-    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, baselineModel: BaselineModel);
+    constructor(config: FullChartConfig, crossToolCanvasModel: CanvasModel, canvasBoundsContainer: CanvasBoundsContainer, drawingManager: DrawingManager, paneManager: PaneManager, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, baselineModel: BaselineModel, chartModel: ChartModel);
     /**
      * Registers default drawer types for the chart.
      * @private

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

@@ -14,7 +14,7 @@ import { NoneDrawerType } from './types/none.drawer';
  * Default bundled chart cross tool.
  */
 export class CrossToolComponent extends ChartBaseElement {
-    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer, baselineModel) {
+    constructor(config, crossToolCanvasModel, canvasBoundsContainer, drawingManager, paneManager, crossEventProducer, hoverProducer, baselineModel, chartModel) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
@@ -24,8 +24,9 @@ export class CrossToolComponent extends ChartBaseElement {
         this.crossEventProducer = crossEventProducer;
         this.hoverProducer = hoverProducer;
         this.baselineModel = baselineModel;
+        this.chartModel = chartModel;
         this.crossToolTypeDrawers = {};
-        this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, this.crossEventProducer, this.hoverProducer, this.canvasBoundsContainer, this.baselineModel);
+        this.model = new CrossToolModel(config.components.crossTool, this.crossToolCanvasModel, this.crossEventProducer, this.hoverProducer, this.canvasBoundsContainer, this.baselineModel, this.chartModel);
         this.addChildEntity(this.model);
         const clearCanvasDrawer = new ClearCanvasDrawer(this.crossToolCanvasModel);
         this.registerDefaultDrawerTypes();

package/dist/chart/components/cross_tool/cross-tool.model.d.ts

@@ -11,6 +11,7 @@ import { CanvasModel } from '../../model/canvas.model';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container';
 import { BaselineModel } from '../../model/baseline.model';
+import { ChartModel } from '../chart/chart.model';
 export type CrossToolType = 'cross-and-labels' | 'only-labels' | 'none' | string;
 export interface CrossToolHover {
     x: number;
@@ -25,10 +26,11 @@ export declare class CrossToolModel extends ChartBaseElement {
     private hoverProducer;
     private canvasBoundsContainer;
     private baselineModel;
+    private chartModel;
     currentHoverSubject: BehaviorSubject<CrossToolHover | null>;
     get currentHover(): CrossToolHover | null;
     set currentHover(value: CrossToolHover | null);
-    constructor(config: Required<ChartConfigComponentsCrossTool>, crossToolCanvasModel: CanvasModel, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, canvasBoundsContainer: CanvasBoundsContainer, baselineModel: BaselineModel);
+    constructor(config: Required<ChartConfigComponentsCrossTool>, crossToolCanvasModel: CanvasModel, crossEventProducer: CrossEventProducerComponent, hoverProducer: HoverProducerComponent, canvasBoundsContainer: CanvasBoundsContainer, baselineModel: BaselineModel, chartModel: ChartModel);
     /**
      * Sets the type of the CrossTool object.
      *
@@ -49,7 +51,8 @@ export declare class CrossToolModel extends ChartBaseElement {
     /**
      * Updates the current hover position with the provided hover object.
      * @param {Object} hover - The hover object containing the x and y coordinates and time formatted.
-     * @param magnetTarget {MagnetTarget}
+     * @param {MagnetTarget} magnetTarget
+     * @param {boolean} discrete
      * @param {number} hover.x - The x coordinate of the hover.
      * @param {number} hover.y - The y coordinate of the hover.
      * @param {string} hover.timeFormatted - The formatted time of the hover.
@@ -61,6 +64,6 @@ export declare class CrossToolModel extends ChartBaseElement {
      * @param {number} hover.candleHover.closestOHLCY - The y coordinate of the closest OHLC price of the candle.
      * @returns {void}
      */
-    updateCrossTool(hover: Hover, magnetTarget?: import("./cross-tool.component").MagnetTarget): void;
+    updateCrossTool(hover: Hover, magnetTarget?: import("./cross-tool.component").MagnetTarget, discrete?: boolean): void;
     private updateCrossToolMobile;
 }

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

@@ -14,7 +14,7 @@ export class CrossToolModel extends ChartBaseElement {
     set currentHover(value) {
         this.currentHoverSubject.next(value);
     }
-    constructor(config, crossToolCanvasModel, crossEventProducer, hoverProducer, canvasBoundsContainer, baselineModel) {
+    constructor(config, crossToolCanvasModel, crossEventProducer, hoverProducer, canvasBoundsContainer, baselineModel, chartModel) {
         super();
         this.config = config;
         this.crossToolCanvasModel = crossToolCanvasModel;
@@ -22,6 +22,7 @@ export class CrossToolModel extends ChartBaseElement {
         this.hoverProducer = hoverProducer;
         this.canvasBoundsContainer = canvasBoundsContainer;
         this.baselineModel = baselineModel;
+        this.chartModel = chartModel;
         // the main hover object which will be presented on UI
         this.currentHoverSubject = new BehaviorSubject(null);
     }
@@ -84,7 +85,8 @@ export class CrossToolModel extends ChartBaseElement {
     /**
      * Updates the current hover position with the provided hover object.
      * @param {Object} hover - The hover object containing the x and y coordinates and time formatted.
-     * @param magnetTarget {MagnetTarget}
+     * @param {MagnetTarget} magnetTarget
+     * @param {boolean} discrete
      * @param {number} hover.x - The x coordinate of the hover.
      * @param {number} hover.y - The y coordinate of the hover.
      * @param {string} hover.timeFormatted - The formatted time of the hover.
@@ -96,12 +98,14 @@ export class CrossToolModel extends ChartBaseElement {
      * @param {number} hover.candleHover.closestOHLCY - The y coordinate of the closest OHLC price of the candle.
      * @returns {void}
      */
-    updateCrossTool(hover, magnetTarget = this.config.magnetTarget) {
+    updateCrossTool(hover, magnetTarget = this.config.magnetTarget, discrete = this.config.discrete) {
+        var _a;
+        const x = discrete ? this.chartModel.toX((_a = this.chartModel.candleFromX(hover.x, true).idx) !== null && _a !== void 0 ? _a : 0) : hover.x;
         if (this.currentHover === null) {
-            this.currentHover = { x: hover.x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
+            this.currentHover = { x, y: 0, time: hover.timeFormatted, paneId: hover.paneId };
         }
         else {
-            this.currentHover.x = hover.x;
+            this.currentHover.x = x;
             this.currentHover.time = hover.timeFormatted;
         }
         if (hover.candleHover && hover.paneId === CHART_UUID) {

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

@@ -15,7 +15,7 @@ export declare class GridComponent extends ChartBaseElement {
     private drawerName;
     private drawingManager;
     private readonly drawer;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], extentIdx?: number, getBaseline?: () => Unit, drawPredicate?: () => boolean);
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, drawerName: string, drawingManager: DrawingManager | CompositeDrawer, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], extentIdx?: number, getBaseline?: () => Unit, drawPredicate?: () => boolean, mainExtentIdx?: number);
     /**
      * This method is used to deactivate the drawer and remove it from the drawing manager.
      * @protected

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

@@ -6,11 +6,11 @@
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { GridDrawer } from './grid.drawer';
 export class GridComponent extends ChartBaseElement {
-    constructor(canvasModel, viewportModel, config, yAxisState, drawerName, drawingManager, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, extentIdx, getBaseline, drawPredicate) {
+    constructor(canvasModel, viewportModel, config, yAxisState, drawerName, drawingManager, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, extentIdx, getBaseline, drawPredicate, mainExtentIdx) {
         super();
         this.drawerName = drawerName;
         this.drawingManager = drawingManager;
-        this.drawer = new GridDrawer(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate, extentIdx, getBaseline);
+        this.drawer = new GridDrawer(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate, extentIdx, getBaseline, mainExtentIdx);
     }
     /**
      * This method is used to deactivate the drawer and remove it from the drawing manager.

package/dist/chart/components/grid/grid.drawer.d.ts

@@ -28,7 +28,8 @@ export declare class GridDrawer implements Drawer {
     private drawPredicate;
     private extentIdx?;
     private getBaseline?;
-    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, extentIdx?: number | undefined, getBaseline?: (() => Unit) | undefined);
+    private mainExtentIdx?;
+    constructor(canvasModel: CanvasModel, viewportModel: ViewportModel, config: FullChartConfig, yAxisState: YAxisConfig, xBoundsProvider: BoundsProvider, yBoundsProvider: BoundsProvider, xLabelsProvider: () => NumericAxisLabel[], yLabelsProvider: () => NumericAxisLabel[], drawPredicate?: () => boolean, extentIdx?: number | undefined, getBaseline?: (() => Unit) | undefined, mainExtentIdx?: number | undefined);
     /**
      * Draws the chart on the canvas if the drawPredicate is true.
      * @returns {void}

package/dist/chart/components/grid/grid.drawer.js

@@ -11,7 +11,7 @@ import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils';
  * Draws grid lines on chart.
  */
 export class GridDrawer {
-    constructor(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate = () => true, extentIdx, getBaseline) {
+    constructor(canvasModel, viewportModel, config, yAxisState, xBoundsProvider, yBoundsProvider, xLabelsProvider, yLabelsProvider, drawPredicate = () => true, extentIdx, getBaseline, mainExtentIdx) {
         this.canvasModel = canvasModel;
         this.viewportModel = viewportModel;
         this.config = config;
@@ -23,6 +23,7 @@ export class GridDrawer {
         this.drawPredicate = drawPredicate;
         this.extentIdx = extentIdx;
         this.getBaseline = getBaseline;
+        this.mainExtentIdx = mainExtentIdx;
     }
     /**
      * Draws the chart on the canvas if the drawPredicate is true.
@@ -87,7 +88,7 @@ export class GridDrawer {
      */
     drawHorizontal(ctx) {
         const yAxisLabels = this.yLabelsProvider();
-        if (yAxisLabels.length && this.config.components.grid.horizontal) {
+        if (yAxisLabels.length > 0 && this.config.components.grid.horizontal && this.extentIdx === this.mainExtentIdx) {
             ctx.lineWidth = this.config.components.grid.width;
             ctx.strokeStyle = this.config.colors.chartAreaTheme.gridColor;
             ctx.setLineDash(this.config.components.grid.dash || []);

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

@@ -7,6 +7,8 @@ import { CanvasElement } from '../../canvas/canvas-bounds-container';
 import { ChartBaseElement } from '../../model/chart-base-element';
 import { ChartAreaPanHandler } from '../chart/chart-area-pan.handler';
 import { MainCanvasTouchHandler } from '../../inputhandlers/main-canvas-touch.handler';
+import { isSafari } from '../../utils/device/touchpad.utils';
+import { SafariChartAreaPanHandler } from '../../utils/performance/safari/components/chart-area-pan.handler/safari-chart-area-pan.handler';
 export class ChartPanComponent extends ChartBaseElement {
     constructor(eventBus, mainScale, canvasBoundsContainer, config, canvasAnimation, canvasInputListener, mainCanvasParent, chartBaseModel, hitTestCanvasModel) {
         super();
@@ -19,7 +21,21 @@ export class ChartPanComponent extends ChartBaseElement {
         this.mainCanvasParent = mainCanvasParent;
         this.chartBaseModel = chartBaseModel;
         this.hitTestCanvasModel = hitTestCanvasModel;
-        this.chartAreaPanHandler = new ChartAreaPanHandler(this.eventBus, this.config, this.mainScale, this.canvasInputListener, this.canvasBoundsContainer, this.canvasAnimation, this, this.hitTestCanvasModel);
+        const chartAreaPanHandlerParams = [
+            this.eventBus,
+            this.config,
+            this.mainScale,
+            this.canvasInputListener,
+            this.canvasBoundsContainer,
+            this.canvasAnimation,
+            this,
+            this.hitTestCanvasModel,
+        ];
+        // Different performance logic for Safari because of browser specifics
+        const chartAreaPanHandler = isSafari
+            ? new SafariChartAreaPanHandler(...chartAreaPanHandlerParams)
+            : new ChartAreaPanHandler(...chartAreaPanHandlerParams);
+        this.chartAreaPanHandler = chartAreaPanHandler;
         this.addChildEntity(this.chartAreaPanHandler);
         this.mainCanvasTouchHandler = new MainCanvasTouchHandler(this.chartAreaPanHandler, this.mainScale, this.canvasInputListener, this.mainCanvasParent, this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES));
         this.addChildEntity(this.mainCanvasTouchHandler);

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

@@ -95,8 +95,10 @@ export class PaneComponent extends ChartBaseElement {
      * @returns {GridComponent} - The newly created GridComponent instance.
      */
     createGridComponent(uuid, extentIdx, scale, yAxisState, yAxisLabelsGetter, yAxisBaselineGetter) {
+        var _a, _b;
         const chartPaneId = CanvasElement.PANE_UUID(uuid);
-        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_${extentIdx}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], yAxisLabelsGetter, extentIdx, yAxisBaselineGetter, () => this.config.components.grid.visible);
+        const mainExtentIdx = (_b = (_a = this.mainExtent) === null || _a === void 0 ? void 0 : _a.idx) !== null && _b !== void 0 ? _b : 0;
+        const gridComponent = new GridComponent(this.mainCanvasModel, scale, this.config, yAxisState, `PANE_${uuid}_${extentIdx}_grid_drawer`, this.drawingManager, () => this.canvasBoundsContainer.getBounds(chartPaneId), () => this.canvasBoundsContainer.getBounds(chartPaneId), () => [], yAxisLabelsGetter, extentIdx, yAxisBaselineGetter, () => this.config.components.grid.visible, mainExtentIdx);
         return gridComponent;
     }
     /**

package/dist/chart/drawers/data-series-drawers/trend-points.drawer.d.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright (C) 2019 - 2025 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 { VisualSeriesPoint, DataSeriesModel } from '../../model/data-series.model';
+import { HTSeriesDrawerConfig, SeriesDrawer } from '../data-series.drawer';
+export declare class TrendPointsDrawer implements SeriesDrawer {
+    constructor();
+    draw(ctx: CanvasRenderingContext2D, allPoints: VisualSeriesPoint[][], model: DataSeriesModel, hitTestDrawerConfig: HTSeriesDrawerConfig): void;
+}
+export declare const previousValue: (arr: VisualSeriesPoint[], idx: number) => number | undefined;