@devexperts/dxcharts-lite 2.4.6 → 2.5.0

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

@@ -19,6 +19,7 @@ export declare const BASELINE_RESIZER_UUID = "BASELINE_RESIZER";
  */
 export declare class BaselineModel extends ChartBaseElement {
     private chartModel;
+    private chartPanComponent;
     private canvasModel;
     private canvasInputListener;
     private config;
@@ -29,6 +30,8 @@ export declare class BaselineModel extends ChartBaseElement {
     ht: HitBoundsTest;
     constructor(chartModel: ChartModel, chartPanComponent: ChartPanComponent, canvasModel: CanvasModel, canvasInputListener: CanvasInputListenerComponent, config: FullChartConfig, canvasBoundContainer: CanvasBoundsContainer, cursorHandler: CursorHandler);
     protected doActivate(): void;
+    private dragStartCb;
+    private dragEndCb;
     private dragTickCb;
     /**
      * Recalculates the bounds of the baseline resizer based on the current chart and y-axis bounds.

package/dist/chart/model/baseline.model.js

@@ -15,6 +15,7 @@ export class BaselineModel extends ChartBaseElement {
     constructor(chartModel, chartPanComponent, canvasModel, canvasInputListener, config, canvasBoundContainer, cursorHandler) {
         super();
         this.chartModel = chartModel;
+        this.chartPanComponent = chartPanComponent;
         this.canvasModel = canvasModel;
         this.canvasInputListener = canvasInputListener;
         this.config = config;
@@ -26,6 +27,8 @@ export class BaselineModel extends ChartBaseElement {
         this.ht = CanvasBoundsContainer.hitTestOf(this.resizerBounds, {
             extensionY: this.config.components.paneResizer.dragZone,
         });
+        this.dragStartCb = () => this.chartPanComponent.deactivatePanHandlers();
+        this.dragEndCb = () => this.chartPanComponent.activateChartPanHandlers();
         this.dragTickCb = (dragInfo) => {
             const { delta: yDelta } = dragInfo;
             const chart = this.canvasBoundContainer.getBounds(CanvasElement.CHART);
@@ -37,6 +40,8 @@ export class BaselineModel extends ChartBaseElement {
         };
         const dndHelper = new DragNDropYComponent(this.ht, {
             onDragTick: this.dragTickCb,
+            onDragStart: this.dragStartCb,
+            onDragEnd: this.dragEndCb,
         }, canvasInputListener, chartPanComponent);
         this.addChildEntity(dndHelper);
     }

package/dist/chart/model/chart-base-element.d.ts

@@ -46,12 +46,14 @@ export declare abstract class ChartBaseElement implements ChartEntity {
      * Enables the functionality of an object.
      * If the object is not currently active, it sets the state to 'deactivated' and activates it.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.activate()` instead
      */
     enable(): void;
     /**
      * Disables the current object if it is not already disabled.
      * If the object is not disabled, it will be deactivated and its state will be set to 'disabled'.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.deactivate()` instead
      */
     disable(): void;
     /**

package/dist/chart/model/chart-base-element.js

@@ -34,6 +34,7 @@ export class ChartBaseElement {
      * Enables the functionality of an object.
      * If the object is not currently active, it sets the state to 'deactivated' and activates it.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.activate()` instead
      */
     enable() {
         if (this._state !== 'active') {
@@ -45,6 +46,7 @@ export class ChartBaseElement {
      * Disables the current object if it is not already disabled.
      * If the object is not disabled, it will be deactivated and its state will be set to 'disabled'.
      * @returns {void}
+     * @deprecated use `ChartBaseElement.deactivate()` instead
      */
     disable() {
         if (this._state !== 'disabled') {

package/dist/chart/model/date-time.formatter.d.ts

@@ -9,10 +9,10 @@ export interface TimeFormatterConfig {
     shortMonths?: string[];
 }
 export interface DateTimeFormatter {
-    (date: Date | number): string;
+    (date: number): string;
 }
 export type DateTimeFormatterFactory = (format: string) => DateTimeFormatter;
-export declare const defaultDateTimeFormatter: () => (date: Date | number) => string;
+export declare const defaultDateTimeFormatter: () => (date: number) => string;
 /**
  * Default chart-core time formatter.
  * @param config
@@ -20,4 +20,21 @@ export declare const defaultDateTimeFormatter: () => (date: Date | number) => st
  * @doc-tags chart-core,default-config,date-formatter
  */
 export declare const dateTimeFormatterFactory: (config: FullChartConfig, offsetFunction: (timezone: string) => (time: number) => Date) => DateTimeFormatterFactory;
-export declare const recalculateXFormatter: (xAxisLabelFormat: string | Array<DateTimeFormatConfig>, period: number, formatterFactory: (format: string) => (timestamp: number | Date) => string) => DateTimeFormatter;
+/**
+ * Returns an array of short day names based on the provided configuration object.
+ * If the configuration object does not contain shortDays property, it returns an array of default short day names.
+ *
+ * @param {TimeFormatterConfig} config - The configuration object containing shortDays property.
+ * @returns {string[]} - An array of short day names.
+ */
+export declare function getShortDays(config: TimeFormatterConfig): string[];
+/**
+ * Returns an array of short month names based on the provided configuration object.
+ * If the configuration object does not have a 'shortMonths' property, it returns the default array of short month names.
+ *
+ * @param {TimeFormatterConfig} config - The configuration object that contains the shortMonths property.
+ * @returns {string[]} - An array of short month names.
+ */
+export declare function getShortMonths(config: TimeFormatterConfig): string[];
+export declare const recalculateXFormatter: (xAxisLabelFormat: string | Array<DateTimeFormatConfig>, period: number, formatterFactory: (format: string) => (timestamp: number) => string) => DateTimeFormatter;
+export declare const formatDate: (date: Date, patternStr: string, daysOfWeek: string[], months: string[]) => string;

package/dist/chart/model/date-time.formatter.js

@@ -31,7 +31,6 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
     ['s', 'm', 'H', 'd', 'M'].forEach(function (k) {
         patterns[k + k] = 'this.' + 'addZero' + '(' + patterns[k] + ')';
     });
-    const re = new RegExp(Object.keys(patterns).sort().reverse().join('|'), 'g');
     /**
      * Returns a string that concatenates the result of the function getPrefix with the input string fn and the string '()'.
      * @param {string} fn - The input string to concatenate.
@@ -58,14 +57,6 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
     function upperCase(fn) {
         return fn + '.toUpperCase()';
     }
-    /**
-     * Returns a string that concatenates a pattern from an object with a string
-     * @param {string} pattern - The key of the pattern to be concatenated
-     * @returns {string} - A string that concatenates a pattern from an object with a string
-     */
-    function applyPattern(pattern) {
-        return "' + (" + patterns[pattern] + ") + '";
-    }
     return function (pattern) {
         var _a;
         const context = {
@@ -89,11 +80,10 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
             },
             tzDate: offsetFunction((_a = config.timezone) !== null && _a !== void 0 ? _a : '') ||
                 function (date) {
-                    return date instanceof Date ? date : new Date(+date);
+                    return new Date(+date);
                 },
         };
-        // eslint-disable-next-line no-new-func
-        return new Function('date', 'date=this.' + 'tzDate' + "(date); return '" + pattern.replace(re, applyPattern) + "'").bind(context);
+        return (date) => formatDate(context.tzDate(date), pattern, context.shortDays, context.shortMonths);
     };
 };
 /**
@@ -103,7 +93,7 @@ export const dateTimeFormatterFactory = (config, offsetFunction) => {
  * @param {TimeFormatterConfig} config - The configuration object containing shortDays property.
  * @returns {string[]} - An array of short day names.
  */
-function getShortDays(config) {
+export function getShortDays(config) {
     var _a;
     return (_a = config.shortDays) !== null && _a !== void 0 ? _a : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 }
@@ -114,7 +104,7 @@ function getShortDays(config) {
  * @param {TimeFormatterConfig} config - The configuration object that contains the shortMonths property.
  * @returns {string[]} - An array of short month names.
  */
-function getShortMonths(config) {
+export function getShortMonths(config) {
     var _a;
     return (_a = config.shortMonths) !== null && _a !== void 0 ? _a : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 }
@@ -154,3 +144,61 @@ export const recalculateXFormatter = (xAxisLabelFormat, period, formatterFactory
     }
     return defaultDateTimeFormatter();
 };
+//#region Custom date pattern parser, transforms Date object to string by given pattern
+// examples: dd.MM => 15.12, YYYY => 2024, HH:mm => 15:56
+export const formatDate = (date, patternStr, daysOfWeek, months) => {
+    if (!patternStr) {
+        patternStr = 'M/d/yyyy';
+    }
+    const day = date.getDate();
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const second = date.getSeconds();
+    const miliseconds = date.getMilliseconds();
+    const h = hour % 12;
+    const hh = twoDigitPad(h);
+    const HH = twoDigitPad(hour);
+    const mm = twoDigitPad(minute);
+    const ss = twoDigitPad(second);
+    const aaa = hour < 12 ? 'AM' : 'PM';
+    const EEEE = daysOfWeek[date.getDay()];
+    const EEE = EEEE.substring(0, 3);
+    const dd = twoDigitPad(day);
+    const M = month + 1;
+    const MM = twoDigitPad(M);
+    const MMMM = months[month];
+    const MMM = MMMM.substring(0, 3);
+    const yyyy = year + '';
+    const yy = yyyy.substring(2, 4);
+    // checks to see if month name will be used
+    patternStr = patternStr
+        .replace('hh', hh + '')
+        .replace('h', h + '')
+        .replace('HH', HH + '')
+        .replace('H', hour + '')
+        .replace('mm', mm + '')
+        .replace('m', minute + '')
+        .replace('ss', ss + '')
+        .replace('s', second + '')
+        .replace('S', miliseconds + '')
+        .replace('dd', dd + '')
+        .replace('d', day + '')
+        .replace('EEEE', EEEE)
+        .replace('EEE', EEE)
+        .replace('YYYY', yyyy)
+        .replace('yyyy', yyyy)
+        .replace('YY', yy)
+        .replace('yy', yy)
+        .replace('aaa', aaa);
+    if (patternStr.indexOf('MMM') > -1) {
+        patternStr = patternStr.replace('MMMM', MMMM).replace('MMM', MMM);
+    }
+    else {
+        patternStr = patternStr.replace('MM', MM + '').replace('M', M + '');
+    }
+    return patternStr;
+};
+const twoDigitPad = (num) => (typeof num === 'number' && num < 10 ? '0' + num : num);
+//#endregion

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

@@ -46,6 +46,10 @@ export declare class ScaleModel extends ViewportModel {
     zoomXYRatio: ZoomXToZoomYRatio;
     offsets: ChartConfigComponentsOffsets;
     xConstraints: Constraints[];
+    maxZoomReached: {
+        zoomIn: boolean;
+        zoomOut: boolean;
+    };
     readonly state: ChartScale;
     constructor(config: FullChartConfig, getBounds: BoundsProvider, canvasAnimation: CanvasAnimation);
     protected doActivate(): void;
@@ -82,6 +86,7 @@ export declare class ScaleModel extends ViewportModel {
     zoomXToEnd(zoomIn: boolean, zoomSensitivity: number): void;
     haltAnimation(): void;
     private zoomXTo;
+    isMaxZoomXReached(zoomIn: boolean): boolean;
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * (you need to fire DRAW event after this)

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

@@ -41,6 +41,7 @@ export class ScaleModel extends ViewportModel {
         this.history = [];
         this.zoomXYRatio = 0;
         this.xConstraints = [];
+        this.maxZoomReached = { zoomIn: false, zoomOut: false };
         this.scalePostProcessor = (initialState, state) => {
             // for now <s>reduceRight<s/> reduce bcs ChartModel#getZoomConstrait should be invoked first
             // if we will need more complex order handling -> add some managing
@@ -49,7 +50,11 @@ export class ScaleModel extends ViewportModel {
         this.state = cloneUnsafe(config.scale);
         this.autoScaleModel = new AutoScaleViewportSubModel(this);
         this.offsets = this.config.components.offsets;
-        this.addXConstraint((initialState, state) => zoomConstraint(initialState, state, this.config.components.chart, this.getBounds));
+        this.addXConstraint((initialState, state) => {
+            const { maxZoomReached, newState } = zoomConstraint(initialState, state, this.config.components.chart, this.getBounds);
+            this.maxZoomReached = maxZoomReached;
+            return newState;
+        });
     }
     doActivate() {
         super.doActivate();
@@ -141,6 +146,9 @@ export class ScaleModel extends ViewportModel {
             startViewportModelAnimation(this.canvasAnimation, this, constrainedState);
         }
     }
+    isMaxZoomXReached(zoomIn) {
+        return (this.maxZoomReached.zoomIn && zoomIn) || (this.maxZoomReached.zoomOut && !zoomIn);
+    }
     /**
      * Moves the viewport to exactly xStart..xEnd place.
      * (you need to fire DRAW event after this)

package/dist/chart/model/scaling/constrait.functions.d.ts

@@ -33,11 +33,9 @@ export declare const candleEdgesConstrait: (state: ViewportModelState, visualCan
  * @doc-tags viewport,zoom,scaling
  */
 export declare const zoomConstraint: (_: ViewportModelState, state: ViewportModelState, chartConfig: ChartConfigComponentsChart, boundsProvider: BoundsProvider) => {
-    xStart: number;
-    xEnd: number;
-    yStart: number;
-    yEnd: number;
-    zoomX: number;
-    zoomY: number;
-    inverseY: boolean;
+    newState: ViewportModelState;
+    maxZoomReached: {
+        zoomIn: boolean;
+        zoomOut: boolean;
+    };
 };

package/dist/chart/model/scaling/constrait.functions.js

@@ -53,13 +53,13 @@ export const zoomConstraint = (_, state, chartConfig, boundsProvider) => {
         if (maxViewportReached) {
             newState.xStart = newState.xEnd - maxCandlesInViewport;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return newState;
+            return { newState, maxZoomReached: { zoomOut: true, zoomIn: false } };
         }
         if (minViewportReached) {
             newState.xStart = newState.xEnd - chartConfig.minCandles;
             newState.zoomX = calculateZoom(newState.xEnd - newState.xStart, bounds.width);
-            return newState;
+            return { newState, maxZoomReached: { zoomOut: false, zoomIn: true } };
         }
     }
-    return newState;
+    return { newState, maxZoomReached: { zoomOut: false, zoomIn: false } };
 };

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

@@ -87,7 +87,9 @@ export class TimeZoneModel {
             // 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);
+                return new Date(time +
+                    getTimezoneOffset(timezone, time) +
+                    new Date(time).getTimezoneOffset() * timeMultiplier);
             };
         }
     }