@devexperts/dxcharts-lite 1.0.1 → 2.0.0

package/dist/chart/components/watermark/water-mark.component.js

@@ -1,6 +1,108 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */
-import{CHART_UUID as w,CanvasElement as f}from"../../canvas/canvas-bounds-container";import{ChartBaseElement as d}from"../../model/chart-base-element";import{merge as n}from"../../utils/merge.utils";import{WaterMarkDrawer as k}from"./water-mark.drawer";export class WaterMarkComponent extends d{constructor(t,e,c,h,a,i,o){super(),this.paneManager=t,this.chartModel=e,this.eventBus=c,this.config=h,this.canvasModel=i,this.waterMarkConfig=this.config.components.waterMark,this.waterMarkData=this.getWaterMarkData(),this.waterMarkDrawer=new k(this.config,a,i,()=>this.waterMarkConfig,()=>this.waterMarkData),this.addRxSubscription(n(a.observeBoundsChanged(f.PANE_UUID(w)),this.paneManager.panesChangedSubject).subscribe(r=>{this.waterMarkConfig=this.recalculateTextSize(r.width,r.height)})),this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(()=>{this.waterMarkData=this.getWaterMarkData()})),o.addDrawerAfter(this.waterMarkDrawer,"WATERMARK","DRAWINGS")}setWaterMarkVisible(t){this.config.components&&this.config.components.waterMark&&(this.config.components.waterMark.visible=t,this.canvasModel.fireDraw())}setWaterMarkData(t){this.waterMarkData=t,this.canvasModel.fireDraw()}getWaterMarkData(){return this.waterMarkData||{}}setWaterMarkConfig(t){if(!(!t||!this.config.components)){if(!this.config.components.waterMark)this.config.components.waterMark=JSON.parse(JSON.stringify(t));else{const e={};n(e,t),n(e,this.config.components.waterMark),this.config.components.waterMark=e}this.canvasModel.fireDraw()}}setLogoImage(t){this.waterMarkDrawer.setLogoImage(t)}recalculateTextSize(t,e){const a=g=>.15*Math.log(g)/Math.log(1.5)+1,i=a(t/1920),o=a(e/1080),r=Math.min(i,o),s=r>=0?r:0,M={firstRowFontSize:Math.round(this.config.components.waterMark.firstRowFontSize*s),secondRowFontSize:Math.round(this.config.components.waterMark.secondRowFontSize*s),thirdRowFontSize:Math.round(this.config.components.waterMark.thirdRowFontSize*s)};return Object.assign(Object.assign({},this.config.components.waterMark),M)}}
+import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
+import { ChartBaseElement } from '../../model/chart-base-element';
+import { merge } from '../../utils/merge.utils';
+import { WaterMarkDrawer } from './water-mark.drawer';
+export class WaterMarkComponent extends ChartBaseElement {
+    constructor(paneManager, chartModel, eventBus, config, canvasBoundsContainer, canvasModel, drawingManager) {
+        super();
+        this.paneManager = paneManager;
+        this.chartModel = chartModel;
+        this.eventBus = eventBus;
+        this.config = config;
+        this.canvasModel = canvasModel;
+        this.waterMarkConfig = this.config.components.waterMark;
+        this.waterMarkData = this.getWaterMarkData();
+        this.waterMarkDrawer = new WaterMarkDrawer(this.config, canvasBoundsContainer, canvasModel, () => this.waterMarkConfig, () => this.waterMarkData);
+        this.addRxSubscription(merge(canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(CHART_UUID)), this.paneManager.panesChangedSubject).subscribe((bounds) => {
+            this.waterMarkConfig = this.recalculateTextSize(bounds.width, bounds.height);
+        }));
+        this.addRxSubscription(this.chartModel.candlesSetSubject.subscribe(() => {
+            this.waterMarkData = this.getWaterMarkData();
+        }));
+        drawingManager.addDrawerAfter(this.waterMarkDrawer, 'WATERMARK', 'DYNAMIC_OBJECTS');
+    }
+    /**
+     * Sets the visibility of the watermark component.
+     *
+     * @param {boolean} visible - A boolean indicating whether the watermark should be visible or not.
+     * @returns {void}
+     */
+    setWaterMarkVisible(visible) {
+        if (this.config.components && this.config.components.waterMark) {
+            this.config.components.waterMark.visible = visible;
+            this.canvasModel.fireDraw();
+        }
+    }
+    /**
+     * Sets the watermark data to be used in the canvas.
+     * @param {WaterMarkData} watermarkData - The data to be used as watermark.
+     * @returns {void}
+     */
+    setWaterMarkData(watermarkData) {
+        this.waterMarkData = watermarkData;
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Returns the water mark data object if it exists, otherwise returns an empty object.
+     * @returns {WaterMarkData} The water mark data object.
+     */
+    getWaterMarkData() {
+        return this.waterMarkData || {};
+    }
+    /**
+     * Sets the watermark configuration for the chart.
+     * @param {WaterMarkConfig} watermarkConfig - The configuration object for the watermark.
+     * @returns {void}
+     
+    */
+    setWaterMarkConfig(watermarkConfig) {
+        if (!watermarkConfig || !this.config.components) {
+            return;
+        }
+        if (!this.config.components.waterMark) {
+            this.config.components.waterMark = JSON.parse(JSON.stringify(watermarkConfig));
+        }
+        else {
+            const newWatermark = {};
+            merge(newWatermark, watermarkConfig);
+            merge(newWatermark, this.config.components.waterMark);
+            // eslint-disable-next-line no-restricted-syntax
+            this.config.components.waterMark = newWatermark;
+        }
+        this.canvasModel.fireDraw();
+    }
+    /**
+     * Sets the logo image to be used as a watermark.
+     * @param {CanvasImageSource} img - The image to be used as a watermark.
+     */
+    setLogoImage(img) {
+        this.waterMarkDrawer.setLogoImage(img);
+    }
+    /**
+     * Recalculates the watermark text size based on the chart's width and height.
+     * @param {number} chartWidth - The width of the chart.
+     * @param {number} chartHeight - The height of the chart.
+     * @returns {Object} - An object containing the updated watermark font sizes.
+     */
+    recalculateTextSize(chartWidth, chartHeight) {
+        const defaultScreenWidth = 1920;
+        const defaultScreenHeight = 1080;
+        // this function is used to make logarithmic dependency between screen size and watermark size
+        const fun = (x) => (0.15 * Math.log(x)) / Math.log(1.5) + 1;
+        const textSizeRatioHorizontal = fun(chartWidth / defaultScreenWidth);
+        const textSizeRatioVertical = fun(chartHeight / defaultScreenHeight);
+        const textSizeRatio = Math.min(textSizeRatioHorizontal, textSizeRatioVertical);
+        const textRatio = textSizeRatio >= 0 ? textSizeRatio : 0;
+        const updatedProps = {
+            firstRowFontSize: Math.round(this.config.components.waterMark.firstRowFontSize * textRatio),
+            secondRowFontSize: Math.round(this.config.components.waterMark.secondRowFontSize * textRatio),
+            thirdRowFontSize: Math.round(this.config.components.waterMark.thirdRowFontSize * textRatio),
+        };
+        return Object.assign(Object.assign({}, this.config.components.waterMark), updatedProps);
+    }
+}

package/dist/chart/components/watermark/water-mark.drawer.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */

package/dist/chart/components/watermark/water-mark.drawer.js

@@ -1,6 +1,192 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */
-import{CHART_UUID as k,CanvasElement as B}from"../../canvas/canvas-bounds-container";export class WaterMarkDrawer{constructor(e,n,s,w,h){this.config=e,this.canvasBoundsContainer=n,this.canvasModel=s,this.waterMarkConfigProvider=w,this.watermarkDataProvider=h,this.getConfig=(d=0,r,l,g,R,t)=>{const i=this.canvasModel.ctx,o=this.canvasBoundsContainer.getBounds(B.PANE_UUID(k)),{position:u,offsetY:m,offsetX:x}=this.config.components.waterMark;let a;switch(t?a=t:(i.font=setFont(this.config,l),a=i.measureText(r).width,o.width-10<a&&(i.font=reCountingSize(this.config,this.canvasBoundsContainer,l,a),a=i.measureText(r).width)),u){case"left-top":return{x:x+o.x,y:m+d+o.y,font:i.font,text:r,color:g};case"left-bottom":return{x:x+o.x,y:o.height-R-m+d+o.y,font:i.font,text:r,color:g};case"center":return{x:o.width/2-a/2+o.x,y:(o.height-R)/2+d+o.y,font:i.font,text:r,color:g}}}}draw(){var e,n,s,w,h,d,r;if(!((e=this.config.components.waterMark)===null||e===void 0)&&e.visible&&this.config.colors){const{firstRow:l,secondRow:g,thirdRow:R}=this.watermarkDataProvider(),t=this.waterMarkConfigProvider(),i=this.config.colors.waterMarkTheme,o=this.canvasModel.ctx;let u=0,m=0,x=0,a=0,v=0;if(o.save(),t.firstRowFontSize&&l){o.font=setFont(this.config,t.firstRowFontSize);const c=o.measureText(l);u=c.actualBoundingBoxAscent+c.actualBoundingBoxDescent}if(t.secondRowFontSize&&g){o.font=setFont(this.config,t.secondRowFontSize);const c=o.measureText(g);m=c.actualBoundingBoxAscent+c.actualBoundingBoxDescent,x=(n=t.firstRowBottomPadding)!==null&&n!==void 0?n:0}if(t.thirdRowFontSize&&R){o.font=setFont(this.config,t.thirdRowFontSize);const c=o.measureText(R);a=c.actualBoundingBoxAscent+c.actualBoundingBoxDescent,v=(s=t.secondRowBottomPadding)!==null&&s!==void 0?s:0}const p=(w=t.thirdRowBottomPadding)!==null&&w!==void 0?w:0,C=(h=t.logoHeight)!==null&&h!==void 0?h:0,M=u+m+x+a+v+p+C;if(l&&this.drawWaterMark(this.getConfig(u,l,t.firstRowFontSize,i.firstRowColor,M)),g&&this.drawWaterMark(this.getConfig(u+x+m,g,t.secondRowFontSize,i.secondRowColor,M)),R&&this.drawWaterMark(this.getConfig(u+x+m+v+a,R,t.thirdRowFontSize,i.thirdRowColor,M)),this.logoImage){const c=this.getConfig(u+x+m+v+a+p,"",t.thirdRowFontSize,i.thirdRowColor,M,t.logoWidth);this.canvasModel.ctx.drawImage(this.logoImage,c.x,c.y,(d=t.logoWidth)!==null&&d!==void 0?d:0,(r=t.logoHeight)!==null&&r!==void 0?r:0)}o.restore()}}getCanvasIds(){return[this.canvasModel.canvasId]}setLogoImage(e){this.logoImage=e}drawWaterMark(e){const n=e.text;if(!n||!n.length)return;const s=this.canvasModel.ctx;s.font=e.font,s.fillStyle=e.color;const w=e.x,h=e.y;s.fillText(n,w,h)}reset(){}}export const reCountingSize=(f,e,n,s)=>{const h=((r,l)=>e.getBounds(B.CHART).width/l*r)(n,s);let d;return f.components&&f.components.waterMark&&(d=f.components.waterMark.fontFamily),h+"px "+d},setFont=(f,e)=>{let n;return f.components&&f.components.waterMark&&(n=f.components.waterMark.fontFamily),e+"px "+n};
+import { CHART_UUID, CanvasElement } from '../../canvas/canvas-bounds-container';
+export class WaterMarkDrawer {
+    constructor(config, canvasBoundsContainer, canvasModel, waterMarkConfigProvider, watermarkDataProvider) {
+        this.config = config;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.canvasModel = canvasModel;
+        this.waterMarkConfigProvider = waterMarkConfigProvider;
+        this.watermarkDataProvider = watermarkDataProvider;
+        this.getConfig = (offset = 0, text, fontSize, color, totalHeight, redefinedWidth) => {
+            const ctx = this.canvasModel.ctx;
+            const chartBounds = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID));
+            const { position: posType, offsetY, offsetX } = this.config.components.waterMark;
+            let width;
+            if (!redefinedWidth) {
+                ctx.font = setFont(this.config, fontSize);
+                width = ctx.measureText(text).width;
+                if (chartBounds.width - 10 < width) {
+                    ctx.font = reCountingSize(this.config, this.canvasBoundsContainer, fontSize, width);
+                    width = ctx.measureText(text).width;
+                }
+            }
+            else {
+                width = redefinedWidth;
+            }
+            switch (posType) {
+                case 'left-top':
+                    return {
+                        x: offsetX + chartBounds.x,
+                        y: offsetY + offset + chartBounds.y,
+                        font: ctx.font,
+                        text,
+                        color,
+                    };
+                case 'left-bottom':
+                    return {
+                        x: offsetX + chartBounds.x,
+                        y: chartBounds.height - totalHeight - offsetY + offset + chartBounds.y,
+                        font: ctx.font,
+                        text,
+                        color,
+                    };
+                case 'center':
+                    return {
+                        x: chartBounds.width / 2 - width / 2 + chartBounds.x,
+                        y: (chartBounds.height - totalHeight) / 2 + offset + chartBounds.y,
+                        font: ctx.font,
+                        text,
+                        color,
+                    };
+            }
+        };
+    }
+    /**
+     * Draws a watermark on the canvas if the watermark is visible and the colors are provided in the configuration.
+     * The watermark consists of three rows of text and an optional logo image.
+     * The height of each row is calculated based on the font size and the actual text height.
+     * The total height of the watermark is calculated by adding the heights of all rows and the logo image.
+     * The watermark is drawn using the drawWaterMark() method and the configuration is provided by the getConfig() method.
+     * The font size and color of each row are provided in the waterMarkConfig object.
+     * The logo image is drawn using the drawImage() method and its dimensions are provided in the waterMarkConfig object.
+     * @function
+     */
+    draw() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (((_a = this.config.components.waterMark) === null || _a === void 0 ? void 0 : _a.visible) && this.config.colors) {
+            const { firstRow, secondRow, thirdRow } = this.watermarkDataProvider();
+            const waterMarkConfig = this.waterMarkConfigProvider();
+            const waterMarkTheme = this.config.colors.waterMarkTheme;
+            const ctx = this.canvasModel.ctx;
+            let firstRowHeight = 0;
+            let secondRowHeight = 0;
+            let secondRowGap = 0;
+            let thirdRowHeight = 0;
+            let thirdRowGap = 0;
+            ctx.save();
+            // set font for first watermark Row
+            if (waterMarkConfig.firstRowFontSize && firstRow) {
+                ctx.font = setFont(this.config, waterMarkConfig.firstRowFontSize);
+                const firstRowMetrics = ctx.measureText(firstRow);
+                firstRowHeight = firstRowMetrics.actualBoundingBoxAscent + firstRowMetrics.actualBoundingBoxDescent;
+            }
+            // set font for second watermark Row
+            if (waterMarkConfig.secondRowFontSize && secondRow) {
+                ctx.font = setFont(this.config, waterMarkConfig.secondRowFontSize);
+                const secondRowMetrics = ctx.measureText(secondRow);
+                secondRowHeight = secondRowMetrics.actualBoundingBoxAscent + secondRowMetrics.actualBoundingBoxDescent;
+                secondRowGap = (_b = waterMarkConfig.firstRowBottomPadding) !== null && _b !== void 0 ? _b : 0;
+            }
+            // set font for third watermark Row
+            if (waterMarkConfig.thirdRowFontSize && thirdRow) {
+                ctx.font = setFont(this.config, waterMarkConfig.thirdRowFontSize);
+                const thirdRowMetrics = ctx.measureText(thirdRow);
+                thirdRowHeight = thirdRowMetrics.actualBoundingBoxAscent + thirdRowMetrics.actualBoundingBoxDescent;
+                thirdRowGap = (_c = waterMarkConfig.secondRowBottomPadding) !== null && _c !== void 0 ? _c : 0;
+            }
+            const imageGap = (_d = waterMarkConfig.thirdRowBottomPadding) !== null && _d !== void 0 ? _d : 0;
+            const imageHeight = (_e = waterMarkConfig.logoHeight) !== null && _e !== void 0 ? _e : 0;
+            const totalHeight = firstRowHeight + secondRowHeight + secondRowGap + thirdRowHeight + thirdRowGap + imageGap + imageHeight;
+            // draw first Row
+            if (firstRow) {
+                this.drawWaterMark(this.getConfig(firstRowHeight, firstRow, waterMarkConfig.firstRowFontSize, waterMarkTheme.firstRowColor, totalHeight));
+            }
+            // draw second Row
+            if (secondRow) {
+                this.drawWaterMark(this.getConfig(firstRowHeight + secondRowGap + secondRowHeight, secondRow, waterMarkConfig.secondRowFontSize, waterMarkTheme.secondRowColor, totalHeight));
+            }
+            // draw third Row
+            if (thirdRow) {
+                this.drawWaterMark(this.getConfig(firstRowHeight + secondRowGap + secondRowHeight + thirdRowGap + thirdRowHeight, thirdRow, waterMarkConfig.thirdRowFontSize, waterMarkTheme.thirdRowColor, totalHeight));
+            }
+            // draw image
+            if (this.logoImage) {
+                const config = this.getConfig(firstRowHeight + secondRowGap + secondRowHeight + thirdRowGap + thirdRowHeight + imageGap, '', waterMarkConfig.thirdRowFontSize, waterMarkTheme.thirdRowColor, totalHeight, waterMarkConfig.logoWidth);
+                this.canvasModel.ctx.drawImage(this.logoImage, config.x, config.y, (_f = waterMarkConfig.logoWidth) !== null && _f !== void 0 ? _f : 0, (_g = waterMarkConfig.logoHeight) !== null && _g !== void 0 ? _g : 0);
+            }
+            ctx.restore();
+        }
+    }
+    /**
+     * Returns an array of canvas ids.
+     *
+     * @returns {Array<string>} An array of canvas ids.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+    /**
+     * Sets the logo image to be displayed.
+     *
+     * @param {CanvasImageSource} img - The image to be set as the logo.
+     * @returns {void}
+     */
+    setLogoImage(img) {
+        this.logoImage = img;
+    }
+    /**
+     * Draws a watermark on the canvas.
+     *
+     * @private
+     * @param {Object} config - The configuration object for the watermark.
+     * @param {string} config.text - The text to be displayed as the watermark.
+     * @param {string} config.font - The font to be used for the watermark.
+     * @param {string} config.color - The color to be used for the watermark.
+     * @param {number} config.x - The x-coordinate of the starting point of the watermark.
+     * @param {number} config.y - The y-coordinate of the starting point of the watermark.
+     * @returns {void}
+     */
+    drawWaterMark(config) {
+        const text = config.text;
+        if (!text || !text.length) {
+            return;
+        }
+        const ctx = this.canvasModel.ctx;
+        ctx.font = config.font;
+        ctx.fillStyle = config.color;
+        const x = config.x;
+        const y = config.y;
+        ctx.fillText(text, x, y);
+    }
+    /**
+     * A method that resets the state of an object to its initial values.
+     *
+     * @function
+     * @name reset
+     * @returns {void}
+     */
+    reset() { }
+}
+export const reCountingSize = (config, canvasBoundsContainer, fontSize, fontWidth) => {
+    const getFontSize = (fontSize, fontWidth) => {
+        const chart = canvasBoundsContainer.getBounds(CanvasElement.CHART);
+        return (chart.width / fontWidth) * fontSize;
+    };
+    const size = getFontSize(fontSize, fontWidth);
+    let font = undefined;
+    if (config.components && config.components.waterMark) {
+        font = config.components.waterMark.fontFamily;
+    }
+    return size + 'px ' + font;
+};
+export const setFont = (config, fontSize) => {
+    let font = undefined;
+    if (config.components && config.components.waterMark) {
+        font = config.components.waterMark.fontFamily;
+    }
+    return fontSize + 'px ' + font;
+};

package/dist/chart/components/x_axis/numeric-x-axis-labels.generator.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */

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

@@ -1,6 +1,32 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */
-import{NumericAxisLabelsGenerator as s}from"../labels_generator/numeric-axis-labels.generator";export class NumericXAxisLabelsGenerator extends s{constructor(e,a=r=>`${r}`){super(null,()=>[e.yStart,e.yEnd],()=>e.getBounds().width,a,!1,()=>"regular",()=>0,void 0)}get labels(){return this.labelsCache.calculateOrGet()}recalculateLabels(){this.generateNumericLabels()}generateLabels(){this.labelsCache.invalidate(),this.generateNumericLabels()}}
+import { NumericAxisLabelsGenerator } from '../labels_generator/numeric-axis-labels.generator';
+/**
+ * Y axis labels generator for prices. Respects price increment from instrument.
+ */
+export class NumericXAxisLabelsGenerator extends NumericAxisLabelsGenerator {
+    constructor(viewportModel, valueFormatter = value => `${value}`) {
+        super(null, () => [viewportModel.yStart, viewportModel.yEnd], () => viewportModel.getBounds().width, valueFormatter, false, () => 'regular', () => 0, undefined);
+    }
+    get labels() {
+        return this.labelsCache.calculateOrGet();
+    }
+    /**
+     * Recalculates the labels of the chart.
+     * Calls the generateNumericLabels method to generate new numeric labels.
+     */
+    recalculateLabels() {
+        this.generateNumericLabels();
+    }
+    /**
+     * Invalidates the labels cache and generates numeric labels.
+     * @returns {void}
+     */
+    generateLabels() {
+        this.labelsCache.invalidate();
+        this.generateNumericLabels();
+    }
+}

package/dist/chart/components/x_axis/time/parser/time-formats-matchers.functions.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */

package/dist/chart/components/x_axis/time/parser/time-formats-matchers.functions.js

@@ -1,6 +1,192 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */
-import{eachDayOfInterval as k,isSameDay as h,isMonday as M,isTuesday as f,isWednesday as i,isThursday as v,isFriday as w,isSaturday as T,isSunday as g,startOfMonth as S,endOfMonth as O}from"date-fns/esm";export const timeFormatMatcherFactory=e=>{switch(e.key){case"lessThanSecond":return N(e);case"month":return W(e);case"second":case"minute":case"hour":case"day":case"year":return B(e);case"week-weekday":return C(e);default:return()=>!1}};const r=(e,s)=>{switch(s){case"lessThanSecond":return e.getMilliseconds();case"month":return e.getMonth();case"second":return e.getSeconds();case"minute":return e.getMinutes();case"hour":return e.getHours();case"day":return e.getDate();case"year":return e.getFullYear();case"week-weekday":return e.getDate()}},o=e=>(s,n)=>{const c=r(s,e),t=r(n,e);return c!==t},p=e=>(s,n)=>{const c=r(s,e),t=r(n,e);return c>=t},x={1:M,2:f,3:i,4:v,5:w,6:T,7:g},I=(e,s,n)=>{var c;const t=k({start:S(e),end:O(e)}),u=(c=x[n])!==null&&c!==void 0?c:()=>!1;if(s==="$"){for(const a of t.reverse())if(u(a))return h(e,a)}else{let a=1;for(const y of t)if(u(y)){if(a===s)return h(e,y);a++}}return!1},l=(e,s)=>s===1?e===1:e/s===1,d=(e,s)=>s===1?!0:e%s===0,N=e=>(s,n)=>p(e.key)(s,n),W=e=>(s,n)=>{const c=o(e.key)(s,n),t=e.exact?l(r(s,e.key)+1,e.value):d(r(s,e.key)+1,e.value);return c&&t},B=e=>(s,n)=>{const c=o(e.key)(s,n),t=e.exact?l(r(s,e.key),e.value):d(r(s,e.key),e.value);return c&&t},C=e=>(s,n)=>{const c=o(e.key)(s,n),t=I(s,e.week,e.weekday);return c&&t};
+import { eachDayOfInterval, isSameDay, isMonday, isTuesday, isWednesday, isThursday, isFriday, isSaturday, isSunday, startOfMonth, endOfMonth, } from 'date-fns/esm';
+/**
+ * Factory that return a {@link TimeFormatMatcher} function for a given {@link ParsedTimeFormats}
+ * @see
+ * Detailed explanation you can find here {@link TimeFormatMatcher}
+ */
+export const timeFormatMatcherFactory = (timeFormat) => {
+    switch (timeFormat.key) {
+        case 'lessThanSecond':
+            return lessThanSecondMatcherFactory(timeFormat);
+        case 'month':
+            return monthMatcherFactory(timeFormat);
+        case 'second':
+        case 'minute':
+        case 'hour':
+        case 'day':
+        case 'year':
+            return commonMatcherFactory(timeFormat);
+        case 'week-weekday':
+            return weekWeekdayMatcherFactory(timeFormat);
+        default:
+            return () => false;
+    }
+};
+/**
+ * Returns a `number` for a given {@link Date} and {@link TimeFormat}
+ * @example
+ * const date = new Date('Fri Feb 14 2023 14:50:10 GMT+0500');
+ * const timeFormat: TimeFormat = 'day';
+ * // `getTimeFromDateByTimeFormat` will return days from given date and it will be 14, because `Feb 14`
+ * const days = getTimeFromDateByTimeFormat(date, timeFormat); // 14
+ */
+const getTimeFromDateByTimeFormat = (date, timeFormat) => {
+    switch (timeFormat) {
+        case 'lessThanSecond':
+            return date.getMilliseconds();
+        case 'month':
+            return date.getMonth();
+        case 'second':
+            return date.getSeconds();
+        case 'minute':
+            return date.getMinutes();
+        case 'hour':
+            return date.getHours();
+        case 'day':
+            return date.getDate();
+        case 'year':
+            return date.getFullYear();
+        case 'week-weekday':
+            return date.getDate();
+    }
+};
+/**
+ * Checks if the given dates are not the same for a given {@link TimeFormat}
+ * @example
+ * const date1 = new Date('Fri Feb 10 2023 14:50:10 GMT+0500');
+ * const date2 = new Date('Fri Feb 09 2023 14:50:10 GMT+0500');
+ * const timeFormat: TimeFormat = 'day';
+ * // `true` because it takes days from `Feb 10` and `Feb 09`, and 10 !== 9
+ * const notTheSame = datesNOTtheSame(timeFormat)(date1, date2); // true
+ *
+ */
+const datesNOTtheSame = (key) => (currentDate, prevDate) => {
+    const currentTime = getTimeFromDateByTimeFormat(currentDate, key);
+    const prevTime = getTimeFromDateByTimeFormat(prevDate, key);
+    return currentTime !== prevTime;
+};
+/**
+ * Checks if the given dates are are bigger or equal for a given {@link TimeFormat}
+ * @example
+ * const date1 = new Date('Fri Feb 10 2023 14:50:10 GMT+0500');
+ * const date2 = new Date('Fri Feb 10 2023 14:50:10 GMT+0500');
+ * const timeFormat: TimeFormat = 'day';
+ * // `true` because it takes days from `Feb 10` and `Feb 10`, and 10 === 10
+ * const areTheSame = datesAreTheSame(timeFormat)(date1, date2); // true
+ */
+const datesBiggerOrEqual = (key) => (currentDate, prevDate) => {
+    const currentTime = getTimeFromDateByTimeFormat(currentDate, key);
+    const prevTime = getTimeFromDateByTimeFormat(prevDate, key);
+    return currentTime >= prevTime;
+};
+//#region TimeFormat matchers
+const weekdayCheckDict = {
+    1: isMonday,
+    2: isTuesday,
+    3: isWednesday,
+    4: isThursday,
+    5: isFriday,
+    6: isSaturday,
+    7: isSunday,
+};
+/**
+ * Checks if the given {@link Date} matches with `weekMatchValue` and `weekdayMatchValue`
+ * @example
+ * const date = new Date('Fri Feb 10 2023 14:50:10 GMT+0500');
+ * // '$' means last week of the month
+ * const weekMatchValue = '$';
+ * // 5 means Friday
+ * const weekdayMatchValue = 5;
+ * // to sum up '$' and 5 means `last Friday in month`
+ *
+ * // false, because `Feb 10` is 2nd Friday in Feb 2023
+ * const match = weekWeekdayMatch(date, weekMatchValue, weekdayMatchValue); // false
+ *
+ * @example
+ * const date = new Date('Tue Feb 7 2023 14:50:10 GMT+0500');
+ * // 1 means first week of the month
+ * const weekMatchValue = 1;
+ * // 2 means Tuesday
+ * const weekdayMatchValue = 2;
+ * // to sum up 1 and 2 means `first Tuesday in month`
+ *
+ * // true, but there's a tricky part:
+ * // Feb 2023 doesn't have a Tuesday on the first week, so for such cases
+ * // match function will take the next week, and search Tuesday on it.
+ * // Therefore weekMatchValue becomes 2, and 2nd weeks' Tuesday in Feb 2023 is Feb 7
+ * const match = weekWeekdayMatch(date, weekMatchValue, weekdayMatchValue); // true
+ */
+const weekWeekdayMatch = (date, weekMatchValue, weekdayMatchValue) => {
+    var _a;
+    const fullMonthInterval = eachDayOfInterval({
+        start: startOfMonth(date),
+        end: endOfMonth(date),
+    });
+    const weekdayCheckFn = (_a = weekdayCheckDict[weekdayMatchValue]) !== null && _a !== void 0 ? _a : (() => false);
+    if (weekMatchValue === '$') {
+        for (const dateOfInterval of fullMonthInterval.reverse()) {
+            if (weekdayCheckFn(dateOfInterval)) {
+                return isSameDay(date, dateOfInterval);
+            }
+        }
+    }
+    else {
+        let week = 1;
+        for (const dateOfInterval of fullMonthInterval) {
+            if (weekdayCheckFn(dateOfInterval)) {
+                if (week === weekMatchValue) {
+                    return isSameDay(date, dateOfInterval);
+                }
+                else {
+                    week++;
+                }
+            }
+        }
+    }
+    return false;
+};
+/**
+ * Checks if the given `value` and `matchValue` match exactly
+ * @example
+ * const match = exactMatch(10, 10); // true
+ * const match = exactMatch(10, 5); // false
+ **/
+const exactMatch = (value, matchValue) => {
+    return matchValue === 1 ? value === 1 : value / matchValue === 1;
+};
+/**
+ * Checks if the given `value` is divisible by `matchValue`
+ * const match = looseMatch(10, 5); // true
+ * const match = looseMatch(11, 5); // false
+ */
+const looseMatch = (value, matchValue) => {
+    return matchValue === 1 ? true : value % matchValue === 0;
+};
+//#endregion TimeFormat matchers
+//#region TimeFormat matchers factories
+const lessThanSecondMatcherFactory = (timeFormat) => (currentDate, prevDate) => datesBiggerOrEqual(timeFormat.key)(currentDate, prevDate);
+const monthMatcherFactory = (timeFormat) => (currentDate, prevDate) => {
+    const datesNotMatch = datesNOTtheSame(timeFormat.key)(currentDate, prevDate);
+    const valueMatch = timeFormat.exact
+        ? exactMatch(getTimeFromDateByTimeFormat(currentDate, timeFormat.key) + 1, timeFormat.value)
+        : looseMatch(getTimeFromDateByTimeFormat(currentDate, timeFormat.key) + 1, timeFormat.value);
+    return datesNotMatch && valueMatch;
+};
+const commonMatcherFactory = (timeFormat) => (currentDate, prevDate) => {
+    const datesNotMatch = datesNOTtheSame(timeFormat.key)(currentDate, prevDate);
+    const valueMatch = timeFormat.exact
+        ? exactMatch(getTimeFromDateByTimeFormat(currentDate, timeFormat.key), timeFormat.value)
+        : looseMatch(getTimeFromDateByTimeFormat(currentDate, timeFormat.key), timeFormat.value);
+    return datesNotMatch && valueMatch;
+};
+const weekWeekdayMatcherFactory = (timeFormat) => (currentDate, prevDate) => {
+    const datesNotMatch = datesNOTtheSame(timeFormat.key)(currentDate, prevDate);
+    const valueMatch = weekWeekdayMatch(currentDate, timeFormat.week, timeFormat.weekday);
+    return datesNotMatch && valueMatch;
+};
+//#endregion TimeFormat matchers factories

package/dist/chart/components/x_axis/time/parser/time-formats-parser.functions.d.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */

package/dist/chart/components/x_axis/time/parser/time-formats-parser.functions.js

@@ -1,6 +1,81 @@
 /*
- * Copyright (C) 2002 - 2023 Devexperts LLC
+ * 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/.
  */
-import{timeFormatConfirugableGuard as m,timeFormatNoNConfirugableGuard as p,weekWeekdayGuard as u}from"./time-formats.model";const c=r=>{const e={"!":!1,$:!1};return r.includes("!")&&(e["!"]=!0),r.includes("$")&&(e.$=!0),e},o=r=>parseInt(r,10);export const parseTimeFormatsFromKey=r=>{const[e,...n]=r.split("_");if(m(e)){const[t]=n,s=c(t),a=o(t);return{key:e,value:a,exact:s["!"]}}else if(u(e)){const[t,s]=n,a=c(t),l=o(t),i=o(s);return{key:e,week:a.$?"$":l,weekday:i}}else return p(e)?{key:e}:(console.warn(`${r} is not fit, check the documentation to see available formats https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis`),null)};
+import { timeFormatConfirugableGuard, timeFormatNoNConfirugableGuard, weekWeekdayGuard, } from './time-formats.model';
+/**
+ * Parses a parameter string and returns a Map containg
+ * `specialSymbol: boolean` pairs, which tells if the special symbol
+ * is presented in the parameter string
+ *
+ * @example
+ * const parameter = `12!`;
+ * const specialSymbolsMap = parseSpecialSymbolsFromParameter(parameter); // { '!': true, '$': false }
+ *
+ */
+const parseSpecialSymbolsFromParameter = (parameter) => {
+    const specialSymbolsMap = {
+        '!': false,
+        $: false,
+    };
+    if (parameter.includes('!')) {
+        specialSymbolsMap['!'] = true;
+    }
+    if (parameter.includes('$')) {
+        specialSymbolsMap['$'] = true;
+    }
+    return specialSymbolsMap;
+};
+const parseValueFromParameter = (parameter) => {
+    return parseInt(parameter, 10);
+};
+/**
+ * Parses the {@link TimeFormatWithDuration}
+ * and returns {@link ParsedTimeFormat} for a successfil parsing and `null`
+ * if the {@link TimeFormatWithDuration} couldn't be parsed.
+ * @example
+ * const timeFormat = 'day_14!';
+ * const parsedTimeFormat = parseTimeFormatsFromKey(timeFormat); // { key: 'day', value: 14, exact: true }
+ *
+ * @example
+ * const timeFormat = 'week-weekday_3_5';
+ * const parsedTimeFormat = parseTimeFormatsFromKey(timeFormat); // { key: 'week-weekday', week: 3, weekday: 5 }
+ *
+ * @example
+ * const timeFormat = 'bla-bla_1234';
+ * const parsedTimeFormat = parseTimeFormatsFromKey(timeFormat); // null
+ */
+export const parseTimeFormatsFromKey = (format) => {
+    const [keyType, ...parameters] = format.split('_');
+    if (timeFormatConfirugableGuard(keyType)) {
+        const [parameter] = parameters;
+        const specialSymbols = parseSpecialSymbolsFromParameter(parameter);
+        const value = parseValueFromParameter(parameter);
+        return {
+            key: keyType,
+            value,
+            exact: specialSymbols['!'],
+        };
+    }
+    else if (weekWeekdayGuard(keyType)) {
+        const [parameter1, parameter2] = parameters;
+        const specialSymbols = parseSpecialSymbolsFromParameter(parameter1);
+        const week = parseValueFromParameter(parameter1);
+        const weekday = parseValueFromParameter(parameter2);
+        return {
+            key: keyType,
+            week: specialSymbols['$'] ? '$' : week,
+            weekday,
+        };
+    }
+    else if (timeFormatNoNConfirugableGuard(keyType)) {
+        return {
+            key: keyType,
+        };
+    }
+    else {
+        console.warn(`${format} is not fit, check the documentation to see available formats https://webdev.prosp.devexperts.com:8095/docs/chart/x-axis`);
+        return null;
+    }
+};