@devexperts/dxcharts-lite 1.0.2 → 2.0.1

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

@@ -3,4 +3,190 @@
  * 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.js

@@ -3,4 +3,30 @@
  * 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.js

@@ -3,4 +3,190 @@
  * 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.js

@@ -3,4 +3,79 @@
  * 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;
+    }
+};

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

@@ -3,4 +3,82 @@
  * 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 validateParsedTimeFormat=e=>{switch(e.key){case"second":case"minute":return a(e.value);case"hour":return o(e.value);case"day":return s(e.value);case"month":return u(e.value);case"year":return d(e.value);case"week-weekday":const r=c(e.week),n=i(e.weekday);return r&&n;case"lessThanSecond":return!0;default:return!1}};const a=e=>e>0&&e<=60,o=e=>e>0&&e<=24,s=e=>e>0&&e<=31,i=e=>t(e)?e>=1&&e<=7:!1,c=e=>e==="$"?!0:t(e)?e>=1&&e<=6:!1,u=e=>e>0&&e<=12,d=e=>e>0,t=e=>!isNaN(e)&&isFinite(e);
+/**
+ * Validators are aimed to check if the `ParsedTimeFormat` is correct
+ *
+ * @example
+ * const timeFormat: ParsedTimeFormat = {
+ * 	key: 'day',
+ *  value: 13,
+ *  exact: true
+ * };
+ * // valid, because day should be between 1 and 31
+ * const valid = validateParsedTimeFormat(timeFormat); // true
+ *
+ * @example
+ * const timeFormat: ParsedTimeFormat = {
+ * 	key: 'minute',
+ *  value: 255,
+ *  exact: true
+ * };
+ * // INvalid, because minute should be between 1 and 60
+ * const valid = validateParsedTimeFormat(timeFormat); // false
+ */
+export const validateParsedTimeFormat = (parsed) => {
+    switch (parsed.key) {
+        case 'second':
+        case 'minute':
+            return secondsAndMinutesValidator(parsed.value);
+        case 'hour':
+            return hoursValidator(parsed.value);
+        case 'day':
+            return dayValidatior(parsed.value);
+        case 'month':
+            return monthValidatior(parsed.value);
+        case 'year':
+            return yearValidatior(parsed.value);
+        case 'week-weekday':
+            const weekValid = weekValidator(parsed.week);
+            const weekdayValid = weekdayValidator(parsed.weekday);
+            return weekValid && weekdayValid;
+        case 'lessThanSecond':
+            return true;
+        default:
+            return false;
+    }
+};
+//#region validators
+const secondsAndMinutesValidator = (value) => {
+    return value > 0 && value <= 60;
+};
+const hoursValidator = (value) => {
+    return value > 0 && value <= 24;
+};
+const dayValidatior = (value) => {
+    return value > 0 && value <= 31;
+};
+const weekdayValidator = (value) => {
+    if (!isValidNumber(value)) {
+        return false;
+    }
+    return value >= 1 && value <= 7;
+};
+const weekValidator = (value) => {
+    if (value === '$') {
+        return true;
+    }
+    if (!isValidNumber(value)) {
+        return false;
+    }
+    return value >= 1 && value <= 6;
+};
+const monthValidatior = (value) => {
+    return value > 0 && value <= 12;
+};
+const yearValidatior = (value) => {
+    return value > 0;
+};
+const isValidNumber = (value) => {
+    return !isNaN(value) && isFinite(value);
+};
+//#endregion validators

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

@@ -3,4 +3,17 @@
  * 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/.
  */
-const a="week-weekday",r=["second","minute","hour","day","month","year"],t=["lessThanSecond"];export const timeFormatConfirugableGuard=e=>r.some(o=>o===e),weekWeekdayGuard=e=>e==="week-weekday",timeFormatNoNConfirugableGuard=e=>t.some(o=>o===e);
+const weekWeekday = 'week-weekday';
+const timeFormatsConfirugable = ['second', 'minute', 'hour', 'day', 'month', 'year'];
+const timeFormatsNoNConfirugable = ['lessThanSecond'];
+//#region `ParsedTimeFormat` guards
+export const timeFormatConfirugableGuard = (key) => {
+    return timeFormatsConfirugable.some(type => type === key);
+};
+export const weekWeekdayGuard = (key) => {
+    return key === 'week-weekday';
+};
+export const timeFormatNoNConfirugableGuard = (key) => {
+    return timeFormatsNoNConfirugable.some(type => type === key);
+};
+//#endregion guards

package/dist/chart/components/x_axis/time/x-axis-weights.functions.d.ts

@@ -59,4 +59,4 @@ export declare const filterMapGroupedLabelsByCoverUpLevel: (labelsGroupedByWeigh
  * @param {ScaleModel} scaleModel - chart scale model
  * @returns
  */
-export declare const overlappingPredicate: (ctx: CanvasRenderingContext2D, config: FullChartConfig, label: NumericAxisLabel, nextLabel: NumericAxisLabel, scaleModel: ScaleModel, overlapingDistance: number) => boolean;
+export declare const overlappingPredicate: (ctx: CanvasRenderingContext2D, config: FullChartConfig, label: NumericAxisLabel, nextLabel: NumericAxisLabel, scale: ScaleModel, overlapingDistance: number) => boolean;