@devexperts/dxcharts-lite 2.3.0 → 2.4.0

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

@@ -92,6 +92,8 @@ export declare abstract class ViewportModel extends ChartBaseElement implements
         start: number;
         end: number;
     }>;
+    protected doActivate(): void;
+    protected doDeactivate(): void;
     /**
      * Converts a unit value to pixels based on the current zoom level and xStart value.
      * @param {Unit} unit - The unit value to be converted to pixels.

package/dist/chart/model/scaling/viewport.model.js

@@ -52,6 +52,13 @@ export class ViewportModel extends ChartBaseElement {
         })), distinctUntilChanged((p, c) => p.start === c.start && p.end === c.end), share());
     }
     //endregion
+    doActivate() {
+        super.doActivate();
+    }
+    doDeactivate() {
+        super.doDeactivate();
+        this.changed.complete();
+    }
     //region conversion methods
     /**
      * Converts a unit value to pixels based on the current zoom level and xStart value.
@@ -75,12 +82,13 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {Pixel} - The pixel value of the given unit value in the Y-axis.
      */
     toY(unit) {
+        const bounds = this.getBounds();
         if (this.inverseY) {
-            return this.getBounds().y + unitToPixels(unit - this.yStart, this.zoomY);
+            return bounds.y + unitToPixels(unit - this.yStart, this.zoomY);
         }
         else {
             // inverse by default because canvas calculation [0,0] point starts from top-left corner
-            return this.getBounds().y + this.getBounds().height - unitToPixels(unit - this.yStart, this.zoomY);
+            return bounds.y + bounds.height - unitToPixels(unit - this.yStart, this.zoomY);
         }
     }
     /**
@@ -106,13 +114,14 @@ export class ViewportModel extends ChartBaseElement {
      * @returns {void}
      */
     fromY(px) {
-        const normalizedPx = px - this.getBounds().y;
+        const bounds = this.getBounds();
+        const normalizedPx = px - bounds.y;
         if (this.inverseY) {
             return pixelsToUnits(normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
         }
         else {
             // inverse by default because canvas calculation [0,0] point starts from top-left corner
-            return pixelsToUnits(this.getBounds().height - normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
+            return pixelsToUnits(bounds.height - normalizedPx + unitToPixels(this.yStart, this.zoomY), this.zoomY);
         }
     }
     //endregion

package/dist/chart/model/time-zone.model.d.ts

@@ -3,7 +3,6 @@
  * 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 { getTimezoneOffset as getTimezoneOffsetDateFnsTz } from 'date-fns-tz';
 import { Observable } from 'rxjs';
 import { DateFormatter, FullChartConfig } from '../chart.config';
 import { DateTimeFormatter, DateTimeFormatterFactory } from './date-time.formatter';
@@ -13,8 +12,6 @@ export interface TimeZone {
     readonly name: string;
     readonly utcOffset: string;
 }
-export declare const memoizedTZOffset: typeof getTimezoneOffsetDateFnsTz;
-export declare const getTimezoneOffset: (timezone: string, time: Timestamp) => number;
 export declare class TimeZoneModel {
     private config;
     private timeZoneChangedSubject;
@@ -50,16 +47,5 @@ export declare class TimeZoneModel {
     getFormatterFactory(): DateTimeFormatterFactory;
     private formatterCache;
     getDateTimeFormatter(format: string): DateTimeFormatter;
-    /**
-     * Calculates the offset of a given timezone from the local timezone.
-     * @private
-     * @param {string} timezone - The timezone to calculate the offset for.
-     */
-    private getOffset;
-    /**
-     * Gets the timezone offset value in milliseconds
-     * @param {string} timezone name
-     * @returns {function(time:Number):Date}
-     */
     tzOffset(timezone: string): (time: number) => Date;
 }

package/dist/chart/model/time-zone.model.js

@@ -3,28 +3,20 @@
  * 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 { getTimezoneOffset as getTimezoneOffsetDateFnsTz } from 'date-fns-tz';
 import { ReplaySubject } from 'rxjs';
-import { memoize } from '../utils/performance/memoize.utils';
 import { dateTimeFormatterFactory } from './date-time.formatter';
-export const memoizedTZOffset = memoize(getTimezoneOffsetDateFnsTz);
-export const getTimezoneOffset = (timezone, time) => {
-    // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
-    const localOffset = new Date(time).getTimezoneOffset() * 60 * 1000;
-    return localOffset + memoizedTZOffset(timezone, time);
-};
+import { getTimezoneOffset } from '../utils/timezone.utils';
+// 1 hour in milliseconds
+const timeMultiplier = 60 * 1000;
 export class TimeZoneModel {
     constructor(config) {
         this.config = config;
         this.timeZoneChangedSubject = new ReplaySubject();
-        this.currentTzOffset = (time) => this.getOffset(this.config.timezone, time);
+        this.currentTzOffset = (time) => {
+            // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
+            return getTimezoneOffset(this.config.timezone, time) + new Date(time).getTimezoneOffset() * timeMultiplier;
+        };
         this.formatterCache = {};
-        /**
-         * Calculates the offset of a given timezone from the local timezone.
-         * @private
-         * @param {string} timezone - The timezone to calculate the offset for.
-         */
-        this.getOffset = (timezone, time) => getTimezoneOffset(timezone, time);
         this.dateTimeFormatterFactory = this.initFormatterFactory(this.config.dateFormatter);
     }
     /**
@@ -87,28 +79,16 @@ export class TimeZoneModel {
         }
         return this.formatterCache[format];
     }
-    /**
-     * Gets the timezone offset value in milliseconds
-     * @param {string} timezone name
-     * @returns {function(time:Number):Date}
-     */
     tzOffset(timezone) {
-        // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
-        const localOffset = (time) => -new Date(time).getTimezoneOffset() * timeMultiplier;
-        let offset;
         if (!timezone) {
-            offset = localOffset;
+            return time => new Date(time);
         }
         else {
-            // we must pass time here, because we can have daylight saving time, otherwise we will get wrong offset
-            offset = (time) => memoizedTZOffset(timezone, time);
+            // In JS Date object is created with local tz offset,
+            // so we have to subtract localOffset from current time
+            return time => {
+                return new Date(time + getTimezoneOffset(timezone, time) + new Date(time).getTimezoneOffset() * timeMultiplier);
+            };
         }
-        // In JS Date object is created with local tz offset,
-        // so we have to subtract localOffset from current time
-        return time => {
-            return new Date(+time + offset(time) - localOffset(time));
-        };
     }
 }
-// 1 hour in milliseconds
-const timeMultiplier = 60 * 1000;

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

@@ -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 { YAxisAlign } from '../../chart.config';
+import { Bounds } from '../../model/bounds.model';
 /**
  * Draws a rounded rectangle on a canvas context
  * @param {CanvasRenderingContext2D} ctx - The canvas context to draw on
@@ -57,7 +58,7 @@ export declare function avoidAntialiasing(ctx: CanvasRenderingContext2D, draw: (
  * @param {{x: number, y: number}} a - The first point of the rectangle.
  * @param {{x: number, y: number}} b - The second point of the rectangle.
  * @returns {void}
- 
+
 */
 export declare function fillRect(ctx: CanvasRenderingContext2D, a: {
     x: number;
@@ -66,3 +67,13 @@ export declare function fillRect(ctx: CanvasRenderingContext2D, a: {
     x: number;
     y: number;
 }): void;
+/**
+ * Sets clipping region for a Canvas 2D context according to the provided bounds.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas 2D context which will get the new clip region.
+ * @param {object} bounds - The bounds of the clipping region. Object containing x, y, width and height properties.
+ *
+ * @example
+ * clipToBounds(ctx, {x: 50, y: 50, width: 100, height: 100});
+ */
+export declare const clipToBounds: (ctx: CanvasRenderingContext2D, bounds: Bounds) => void;

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

@@ -138,7 +138,7 @@ export function avoidAntialiasing(ctx, draw) {
  * @param {{x: number, y: number}} a - The first point of the rectangle.
  * @param {{x: number, y: number}} b - The second point of the rectangle.
  * @returns {void}
- 
+
 */
 export function fillRect(ctx, a, b) {
     const x = Math.min(a.x, b.x) + 0.5;
@@ -147,3 +147,18 @@ export function fillRect(ctx, a, b) {
     const h = Math.abs(a.y - b.y);
     ctx.fillRect(x, y, w, h);
 }
+/**
+ * Sets clipping region for a Canvas 2D context according to the provided bounds.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas 2D context which will get the new clip region.
+ * @param {object} bounds - The bounds of the clipping region. Object containing x, y, width and height properties.
+ *
+ * @example
+ * clipToBounds(ctx, {x: 50, y: 50, width: 100, height: 100});
+ */
+export const clipToBounds = (ctx, bounds) => {
+    ctx.beginPath();
+    ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+    ctx.clip();
+    ctx.closePath();
+};

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

@@ -30,9 +30,10 @@ export declare function prepareTextForFill(ctx: CanvasRenderingContext2D, proper
 /**
  * Calculates the line height of a text based on the font size of the provided CanvasRenderingContext2D.
  * @param {CanvasRenderingContext2D} ctx - The CanvasRenderingContext2D object used to draw the text.
+ * @param includeBaseLine
  * @returns {number} The calculated line height of the text.
  */
-export declare function getTextLineHeight(ctx: CanvasRenderingContext2D): number;
+export declare function getTextLineHeight(ctx: CanvasRenderingContext2D, includeBaseLine?: boolean): number;
 /**
  * Calculates text bounds [textWidth, textHeight, lineHeight]
  * @param ctx
@@ -53,7 +54,7 @@ export declare function getTextLines(text: string): string[];
  * @param {number} y - The y-coordinate of the starting position of the text.
  * @param {CanvasTextProperties} properties - An object containing properties for the text, such as font size, style, and alignment.
  * @returns {void}
- 
+
 */
 export declare function drawText(ctx: CanvasRenderingContext2D, lines: string[], x: number, y: number, properties: CanvasTextProperties): void;
 /**

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

@@ -4,6 +4,10 @@
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 import Color from 'color';
+/**
+ * Baseline Height in Project
+ */
+const BASELINE = 1.33;
 /**
  * Sets the font, fill style and text alignment of a canvas context based on the provided properties.
  * @param {CanvasRenderingContext2D} ctx - The canvas context to modify.
@@ -32,9 +36,10 @@ export function prepareTextForFill(ctx, properties) {
 /**
  * Calculates the line height of a text based on the font size of the provided CanvasRenderingContext2D.
  * @param {CanvasRenderingContext2D} ctx - The CanvasRenderingContext2D object used to draw the text.
+ * @param includeBaseLine
  * @returns {number} The calculated line height of the text.
  */
-export function getTextLineHeight(ctx) {
+export function getTextLineHeight(ctx, includeBaseLine = true) {
     const textSizeMatch = ctx.font.match(/(\d+.)?\d+(px|pt)/gi);
     let textSize = '10px';
     if (textSizeMatch && textSizeMatch.length) {
@@ -46,7 +51,7 @@ export function getTextLineHeight(ctx) {
             textSize = textSizeMatch[0];
         }
     }
-    return parseInt(textSize, 10) * 1.33; // Base Line Height in Project
+    return includeBaseLine ? parseInt(textSize, 10) * BASELINE : parseInt(textSize, 10);
 }
 /**
  * Calculates text bounds [textWidth, textHeight, lineHeight]
@@ -80,7 +85,7 @@ export function getTextLines(text) {
  * @param {number} y - The y-coordinate of the starting position of the text.
  * @param {CanvasTextProperties} properties - An object containing properties for the text, such as font size, style, and alignment.
  * @returns {void}
- 
+
 */
 export function drawText(ctx, lines, x, y, properties) {
     ctx.save();

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

@@ -12,6 +12,7 @@ export declare class MathUtils {
     static compare(a: number, b: number, eps: number): number;
     static isZero(a: number): boolean;
     static cutNumber(value: number, amountToCut: NumberFormatLabels, zeros?: number): string;
+    static isExponential(a: number): boolean;
 }
 /**
  * Checks if first and second number are differs by specified times

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

@@ -75,6 +75,9 @@ export class MathUtils {
         };
         return cutMap[amountToCut](value).toFixed(zeros) + amountToCut;
     }
+    static isExponential(a) {
+        return /\de(\-|\+)\d/.test(a.toString());
+    }
 }
 /**
  * Checks if first and second number are differs by specified times

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

@@ -0,0 +1,13 @@
+/*
+ * Copyright (C) 2019 - 2023 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 function getDateTimeFormat(timeZone: string): Intl.DateTimeFormat;
+/**
+ * Calulates provided timezone offset.
+ * @param timeZone - timezone as IANA string ('Asia/Amman', 'Europe/Amsterdam')
+ * @param timestamp - timestamp as number (1701251319717)
+ * Returns offset from UTC
+ */
+export declare const getTimezoneOffset: (timeZone: string, timestamp?: number) => number;

package/dist/chart/utils/timezone.utils.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2019 - 2023 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/.
+ */
+/**
+ * Get a cached Intl.DateTimeFormat instance for the IANA `timeZone`. This can be used
+ * to get deterministic local date/time output according to the `en-US` locale which
+ * can be used to extract local time parts as necessary.
+ * Returns the [year, month, day, hour, minute] tokens of the provided timezone
+ */
+const dateTimeFormatCache = {};
+export function getDateTimeFormat(timeZone) {
+    if (!dateTimeFormatCache[timeZone]) {
+        // New browsers use `hourCycle`, IE and Chrome <73 does not support it and uses `hour12`
+        dateTimeFormatCache[timeZone] = new Intl.DateTimeFormat('en-US', {
+            hourCycle: 'h23',
+            timeZone,
+            year: 'numeric',
+            month: 'numeric',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+    }
+    return dateTimeFormatCache[timeZone];
+}
+/**
+ * Calulates provided timezone offset.
+ * @param timeZone - timezone as IANA string ('Asia/Amman', 'Europe/Amsterdam')
+ * @param timestamp - timestamp as number (1701251319717)
+ * Returns offset from UTC
+ */
+export const getTimezoneOffset = (timeZone, timestamp = Date.now()) => {
+    const formatter = getDateTimeFormat(timeZone);
+    const dateString = formatter.format(timestamp);
+    // exec() returns  [, fMonth, fDay, fYear, fHour, fMinute]
+    const tokens = /(\d+)\/(\d+)\/(\d+),? (\d+):(\d+)/.exec(dateString);
+    if (tokens) {
+        const asUTC = Date.UTC(+tokens[3], +tokens[1] - 1, +tokens[2], +tokens[4] % 24, +tokens[5], 0);
+        let asTimezone = timestamp;
+        const over = asTimezone % 1000;
+        asTimezone -= over >= 0 ? over : 1000 + over;
+        return asUTC - asTimezone;
+    }
+    return 0;
+};