@devexperts/dxcharts-lite 2.7.18 → 2.7.20

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

@@ -512,6 +512,7 @@ export interface ChartConfigComponentsHighLow {
         high: string;
         low: string;
     };
+    lineDash: Array<number>;
 }
 export interface ChartConfigComponentsCrossTool {
     /**
@@ -763,6 +764,7 @@ export interface YAxisLabelColorConfig {
     boxColor: string;
     textColor?: string;
     descriptionText?: string;
+    descriptionTextColor?: string;
 }
 export interface YAxisLastPriceLabelColorConfig {
     boxSelected: string;

package/dist/chart/chart.config.js

@@ -204,7 +204,7 @@ export const getDefaultConfig = () => ({
             logoWidth: 20,
             logoHeight: 20,
         },
-        highLow: { visible: false, font: '12px sans-serif', prefix: { high: 'H: ', low: 'L: ' } },
+        highLow: { visible: false, font: '12px sans-serif', prefix: { high: 'H: ', low: 'L: ' }, lineDash: [2, 4] },
         highlights: {
             visible: false,
             fontFamily: 'Open Sans',

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

@@ -4,7 +4,9 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { unitToPercent } from '../../../model/scaling/viewport.model';
+import { replaceMinusSign } from '../../../utils/math.utils';
 import { PriceIncrementsUtils } from '../../../utils/price-increments.utils';
+import { MINUS_SIGN } from '../../../utils/symbol-constants';
 import { treasuryPriceFormatter } from './treasury-price.formatter';
 export const createRegularPriceFormatter = (extent, config) => (value) => {
     let checkedValue;
@@ -36,8 +38,8 @@ export const createPercentFormatter = (extent) => (value, dataSeries) => {
         valueUnit = unitToPercent(value, series.getBaseline());
     }
     // always apply default precision for percent
-    const formatted = valueUnit.toFixed(PriceIncrementsUtils.DEFAULT_PRECISION).replace('-', '−') + ' %';
-    return formatted === '−0.00 %' ? '0.00 %' : formatted;
+    const formatted = replaceMinusSign(valueUnit.toFixed(PriceIncrementsUtils.DEFAULT_PRECISION)) + ' %';
+    return formatted === `${MINUS_SIGN}0.00 %` ? '0.00 %' : formatted;
 };
 export const createYExtentFormatters = (extent, config) => ({
     percent: createPercentFormatter(extent),

package/dist/chart/components/labels_generator/numeric-axis-labels.generator.js

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { logValueToUnit, percentToUnit, calcLogValue } from '../../model/scaling/viewport.model';
 import { AnimationFrameCache } from '../../utils/performance/animation-frame-cache.utils';
 import { identity } from '../../utils/function.utils';
-import { MathUtils } from '../../utils/math.utils';
+import { replaceMinusSign, MathUtils } from '../../utils/math.utils';
 import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
 import { TREASURY_32ND } from '../chart/price-formatters/treasury-price.formatter';
 const PIXEL_OFFSET = 0;
@@ -49,7 +49,7 @@ export class NumericAxisLabelsGenerator {
         while (value < max) {
             // Adjust value to increment
             const adjustedValue = MathUtils.roundToNearest(value, singleLabelHeightValue);
-            const labelText = this.valueFormatter(adjustedValue);
+            const labelText = replaceMinusSign(this.valueFormatter(adjustedValue));
             newLabels.push({
                 value: adjustedValue,
                 text: labelText,
@@ -66,7 +66,7 @@ export class NumericAxisLabelsGenerator {
             // Adjust value to increment
             const adjustedValue = MathUtils.roundToNearest(value, singleLabelHeightValue);
             const valueUnit = percentToUnit(adjustedValue, baseLine);
-            const labelText = this.valueFormatter(valueUnit);
+            const labelText = replaceMinusSign(this.valueFormatter(valueUnit));
             newLabels.push({
                 value: adjustedValue,
                 text: labelText,

package/dist/chart/components/y_axis/price_labels/price-label.drawer.js

@@ -8,7 +8,7 @@ import { getFontFromConfig, } from '../../../chart.config';
 import { redrawBackgroundArea } from '../../../drawers/chart-background.drawer';
 import { avoidAntialiasing, drawLine } from '../../../utils/canvas/canvas-drawing-functions.utils';
 import { calculateSymbolHeight, calculateTextWidth } from '../../../utils/canvas/canvas-font-measure-tool.utils';
-import { floor } from '../../../utils/math.utils';
+import { floor, replaceMinusSign } from '../../../utils/math.utils';
 import { drawBadgeLabel, drawPlainLabel, drawRectLabel, checkLabelInBoundaries } from '../y-axis-labels.drawer';
 export const DEFAULT_LABEL_APPEARANCE_TYPE = 'badge';
 const DEFAULT_PADDING = 4;
@@ -65,8 +65,9 @@ export function drawLabel(ctx, yAxisDescriptionsCtx, backgroundCtx, bounds, pane
         lineXEnd = chartBounds.x + chartBounds.width;
     }
     const lineY = (_e = visualLabel.lineY) !== null && _e !== void 0 ? _e : visualLabel.y;
-    const _drawLine = () => showLine && avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1));
-    const _drawLabel = () => drawLabel(ctx, bounds, text, centralY, visualLabel, config, colors.yAxis, false);
+    const _drawLine = () => showLine &&
+        avoidAntialiasing(ctx, () => drawLine(ctx, lineXStart, lineY, lineXEnd, lineY, 1, visualLabel.lineDash));
+    const _drawLabel = () => drawLabel(ctx, bounds, replaceMinusSign(text), centralY, visualLabel, config, colors.yAxis, false);
     const drawLineLabel = () => {
         _drawLine();
         _drawDescription();

package/dist/chart/components/y_axis/y-axis-labels.drawer.d.ts

@@ -25,6 +25,7 @@ export interface YAxisLabelDrawConfig {
     paddingEnd?: number;
     paddingStart?: number;
     rounded?: boolean;
+    lineDash?: Array<number>;
 }
 export declare const DEFAULT_PRICE_LABEL_PADDING = 4;
 /**

package/dist/chart/inputlisteners/canvas-input-listener.component.js

@@ -4,11 +4,12 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import { MouseButton, leftMouseButtonListener, subscribeListener } from '../utils/dom.utils';
-import { merge, Subject } from 'rxjs';
+import { asyncScheduler, fromEvent, merge, Subject } from 'rxjs';
 import { ChartBaseElement } from '../model/chart-base-element';
-import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, tap, throttleTime } from 'rxjs/operators';
 import { EVENT_RESIZED } from '../events/events';
 import { deviceDetector } from '../utils/device/device-detector.utils';
+import { ONE_FRAME_MS } from '../utils/numeric-constants.utils';
 /**
  * Gathers user input on canvas element:
  * Chart update order should be following:
@@ -373,6 +374,9 @@ export class CanvasInputListenerComponent extends ChartBaseElement {
             this.canvasBounds.width = bcr.width;
             this.canvasBounds.height = bcr.height;
         }));
+        this.addRxSubscription(fromEvent(document, 'scroll', { capture: true, passive: true })
+            .pipe(throttleTime(ONE_FRAME_MS, asyncScheduler, { trailing: true }))
+            .subscribe(() => this.invalidateRectCache()));
         const mouseLeaveListener = () => {
             this.mouseLeavesCanvasSubject.next(true);
         };

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

@@ -284,15 +284,10 @@ export class ScaleModel extends ViewportModel {
         moveXStart(state, xStart);
         // there we need only candles constraint
         const constrainedState = this.scalePostProcessor(initialStateCopy, state);
-        if (isSafari) {
-            startViewportModelAnimationSafari(this.canvasAnimation, this, constrainedState, this.state.auto ? this.autoScaleModel : undefined);
-        }
-        else {
-            if (this.state.auto) {
-                this.autoScaleModel.doAutoYScale(constrainedState);
-            }
-            this.apply(constrainedState);
+        if (this.state.auto) {
+            this.autoScaleModel.doAutoYScale(constrainedState);
         }
+        this.apply(constrainedState);
     }
     /**
      * Moves both yStart and yEnd without changing the viewport height (zoom).

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): void;
+export declare function drawLine(ctx: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number, thickness?: number, lineDash?: Array<number>): void;
 /**
  * Try to avoid anti-aliasing
  */

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

@@ -109,8 +109,9 @@ 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) {
+export function drawLine(ctx, x0, y0, x1, y1, thickness = 1, lineDash = []) {
     ctx.save();
+    ctx.setLineDash(lineDash);
     ctx.lineWidth = thickness;
     ctx.beginPath();
     ctx.moveTo(x0, y0);

package/dist/chart/utils/device/browser.utils.js

@@ -3,13 +3,19 @@
  * 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/.
  */
-let isMobileCache = undefined;
+let isMobileCache;
+let userAgentCache;
 /**
  * @doc-tags utility,mobile
  */
 export const isMobile = () => {
-    if (!isMobileCache) {
-        isMobileCache = !!navigator.userAgent.match(/Android|iPhone|Opera Mini/) || false;
+    if (typeof navigator === 'undefined') {
+        return false;
+    }
+    const currentUserAgent = navigator.userAgent;
+    if (userAgentCache !== currentUserAgent || isMobileCache === undefined) {
+        userAgentCache = currentUserAgent;
+        isMobileCache = !!currentUserAgent.match(/Android|iPhone|Opera Mini/);
     }
     return isMobileCache;
 };

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

@@ -39,3 +39,4 @@ export declare const ceil: (value: number) => number;
 export declare const round: (value: number) => number;
 export declare const shiftRight: (value: number, shift: number) => number;
 export declare function countDecimalPlaces(number: number): number;
+export declare const replaceMinusSign: (stringValue: string) => string;

package/dist/chart/utils/math.utils.js

@@ -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 { MINUS_SIGN, TRUE_MINUS_SIGN } from './symbol-constants';
 const MAX_DECIMAL_DIGITS = 14;
 // Array of powers of 10. Used in roundDecimal to walk through mantissa.
 const POW10 = [];
@@ -152,3 +153,6 @@ export function countDecimalPlaces(number) {
         return 0; // No decimal places
     }
 }
+export const replaceMinusSign = (stringValue) => {
+    return stringValue.replace(TRUE_MINUS_SIGN, MINUS_SIGN);
+};

package/dist/chart/utils/symbol-constants.d.ts

@@ -0,0 +1,7 @@
+/*
+ * 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/.
+ */
+export declare const MINUS_SIGN = "\u2212";
+export declare const TRUE_MINUS_SIGN = "-";

package/dist/chart/utils/symbol-constants.js

@@ -0,0 +1,7 @@
+/*
+ * 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/.
+ */
+export const MINUS_SIGN = '−';
+export const TRUE_MINUS_SIGN = '-';