@snabcentr/client-ui 0.17.3 → 0.18.0

package/fesm2020/snabcentr-client-ui.mjs

@@ -5,13 +5,13 @@ import { Subject, filter, map, switchMap, tap, catchError, of, finalize, startWi
 import * as i1 from '@snabcentr/client-core';
 import { ScUserMetrikaGoalsEnum, SC_URLS, SC_PATH_IMAGE_NOT_FOUND, SEARCH_TERM, SEARCH_TERM_PROVIDERS, ScCatalogService, ScCartService, ScAuthService, ScISuggestionType, ScOpfList, ScIconTypesEnum, ScUserService } from '@snabcentr/client-core';
 import * as i2 from '@angular/common';
-import { CommonModule, formatDate } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i4 from '@taiga-ui/core';
-import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelModule, TuiModeModule, TuiErrorModule, TuiLoaderModule, tuiFadeIn, tuiFormatNumber, TuiSvgModule, TuiHintModule, TuiFormatNumberPipeModule, TuiDataListModule, TuiNotificationModule, TuiFormatPhonePipeModule } from '@taiga-ui/core';
+import { TuiTextfieldControllerModule, TuiLinkModule, TuiButtonModule, TuiLabelModule, TuiModeModule, TuiErrorModule, TuiLoaderModule, tuiFadeIn, TUI_MONTHS, TuiSvgModule, TuiHintModule, TuiFormatNumberPipeModule, TuiDataListModule, TuiNotificationModule, TuiFormatPhonePipeModule } from '@taiga-ui/core';
 import * as i3 from '@angular/forms';
 import { FormGroupDirective, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule, NgControl, FormArray } from '@angular/forms';
 import * as i6 from '@taiga-ui/cdk';
-import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiPure, tuiIsPresent, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk';
+import { tuiControlValue, tuiIsFalsy, TuiLetModule, tuiCreateToken, AbstractTuiNullableControl, TUI_IS_MOBILE, tuiPure, TuiDay, TuiDayRange, TuiMonth, tuiIsPresent, TuiDestroyService, TuiRepeatTimesModule, tuiMarkControlAsTouchedAndValidate, ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk';
 import * as i4$1 from '@taiga-ui/kit';
 import { TuiInputPasswordModule, TuiInputModule, TuiFieldErrorPipeModule, TuiInputPhoneModule, TuiAccordionItemComponent, TuiAccordionModule, TuiElasticContainerModule, TuiCarouselModule, TUI_NUMBER_VALUE_TRANSFORMER, TuiInputNumberComponent, TuiIslandModule, TuiInputNumberModule, TuiHighlightModule, TuiCarouselComponent, TuiComboBoxModule, TuiDataListWrapperModule, TuiFilterByInputPipeModule, TuiStringifyContentPipeModule, TuiSelectModule, TuiTreeService, TuiTreeItemContentComponent, TUI_TREE_START, TUI_TREE_CONTENT, TUI_TREE_LOADING, TUI_TREE_LOADER, TuiTreeModule, TuiCheckboxModule, TuiCheckboxLabeledModule } from '@taiga-ui/kit';
 import * as i6$1 from '@maskito/angular';
@@ -27,14 +27,10 @@ import * as i7$1 from '@taiga-ui/addon-preview';
 import { TuiPreviewDialogService, TuiPreviewModule } from '@taiga-ui/addon-preview';
 import * as i9 from '@taiga-ui/addon-commerce';
 import { TuiCurrencyPipeModule } from '@taiga-ui/addon-commerce';
-import * as i2$2 from 'ngx-echarts';
-import { NgxEchartsModule } from 'ngx-echarts';
-import { LineChart } from 'echarts/charts';
-import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
-import * as echarts from 'echarts/core';
-import { SVGRenderer } from 'echarts/renderers';
+import * as i3$1 from '@taiga-ui/addon-charts';
+import { TuiLineDaysChartModule, TuiAxesModule } from '@taiga-ui/addon-charts';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i3$1 from '@taiga-ui/layout';
+import * as i3$2 from '@taiga-ui/layout';
 import { TuiBlockStatusModule } from '@taiga-ui/layout';
 
 /**
@@ -1755,185 +1751,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['attr.data-size']
             }] } });
 
-/**
- * Настройки отрисовки графика.
- *
- * @see [Документация](https://echarts.apache.org/en/option.html#title)
- */
-const scChartOption = {
-    grid: {
-        top: 12,
-        left: 64,
-        right: 0,
-        bottom: 24
-    },
-    tooltip: {
-        trigger: 'axis',
-        formatter: (params) => {
-            const data = Array.isArray(params) ? params[0].data : params.data;
-            const date = new Date(data.value[0]);
-            const nextDate = new Date(data.value[2]);
-            return `
-                <div class="text-center text-black">
-                    <span class="font-bold">${data.value[1]} ₽</span>
-                    </br>
-                    <span class="text-xs">${formatDate(date, 'dd.MM', 'en')} - ${formatDate(nextDate, 'dd.MM', 'en')}</span>
-                </div>
-            `;
-        },
-        axisPointer: {
-            animation: false,
-            type: 'cross'
-        },
-        textStyle: {
-            fontFamily: 'Roboto, "Helvetica Neue", sans-serif'
-        }
-    },
-    xAxis: {
-        type: 'time',
-        splitLine: {
-            show: false
-        },
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            hideOverlap: true
-        },
-        boundaryGap: ['3%', '3%']
-    },
-    yAxis: {
-        splitLine: {
-            show: false
-        },
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            formatter: (value) => tuiFormatNumber(value)
-        },
-        type: 'value',
-        boundaryGap: [0, '100%']
-    },
-    series: {
-        name: 'История цены',
-        type: 'line',
-        showSymbol: false,
-        symbolSize: 12,
-        itemStyle: {
-            color: '#ffcc40'
-        }
-    }
-};
-
 /**
  * График истории цен товара или услуги.
- * TODO: TASK[#7482] Перепроверить возможность использования TuiLineDaysChart.
  */
 class ScPriceHistoryComponent {
     /**
      * Инициализирует экземпляр класса {@link ScPriceHistoryComponent}.
      *
-     * @param cdr Объект для работы с обнаружением изменений.
+     * @param catalogService Сервис для работы с каталогом.
+     * @param months$ Перечисление месяцев.
+     * @param context Контекст диалогового окна, в котором открыт компонент.
      */
-    constructor(cdr) {
-        this.cdr = cdr;
-        /**
-         * Настройки графика.
-         */
-        this.initOption = { locale: 'RU' };
+    constructor(catalogService, months$, context) {
+        this.catalogService = catalogService;
+        this.months$ = months$;
+        this.context = context;
         /**
-         * Параметры отрисовки графика истории цены.
+         * {@link Observable} функция для преобразования значения number в строку в подсказке по оси X.
          */
-        this.chartOption = scChartOption;
+        this.xStringify$ = this.months$.pipe(map((months) => ({ month, day }) => 
+        // eslint-disable-next-line security/detect-object-injection
+        `${months[month]}, ${day}`));
         /**
-         * Данные об истории цены на товар или услугу.
+         * Функция для преобразования значения number в строку в подсказке по оси Y.
+         *
+         * @param value Значение оси Y.
          */
-        this.data = [];
+        this.yStringify = (value) => `${value.toLocaleString('ru-RU')} ₽`;
+        if (context) {
+            this.product = context.data.product;
+        }
     }
     /** @inheritDoc */
     ngOnInit() {
-        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
-            this.chartOption.series.data = [];
-        }
-        Object.keys(this.history)
-            .map((key) => {
-            // ? Можно избежать переведя даты в api в формат ECMAScript® 2023: https://tc39.es/ecma262/#sec-date-time-string-format
-            const dataString = key.split('.').reverse();
-            const data = new Date(+dataString[0], +dataString[1] - 1, +dataString[2]);
-            return { data: data, cost: this.history[String(key)].cost };
-        })
-            .sort((a, b) => +a.data - +b.data)
-            .forEach((item, index, array) => {
-            let nextDate;
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (array[index + 1]?.data) {
-                nextDate = new Date(array[index + 1]?.data);
-                nextDate.setDate(nextDate.getDate() - 1);
-            }
-            else {
-                nextDate = new Date();
-            }
-            this.pushDataItem(item.cost, item.data, nextDate);
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (this.eChartsInstance) {
-            this.setChartData();
-        }
+        this.history$ = this.catalogService.getPriceHistory$(this.product).pipe(map((history) => Object.keys(history)
+            .map((item) => [TuiDay.normalizeParse(item, 'DMY'), history[String(item)].cost])
+            .sort((a, b) => (a[0] > b[0] ? 1 : -1))), shareReplay({ bufferSize: 1, refCount: true }), filter((history) => history.length > 1));
+        this.priceInfo$ = this.history$.pipe(map((history) => history.map((item) => item[1])), map((values) => ({
+            min: Math.min(...values),
+            max: Math.max(...values),
+        })));
+        this.range$ = this.history$.pipe(map((value) => ({ from: value.at(0)?.[0], to: value.at(-1)?.[0] })), filter((range) => !!range.from && !!range.to), map((range) => {
+            return new TuiDayRange(range.from, range.to);
+        }));
     }
     /**
-     * Перехватчик жизненного цикла {@link ECharts}, который вызывается при его инициализации.
+     * Вычисляет подписи даты к оси X.
      *
-     * @param eChartsInstance Экземпляр {@link ECharts}.
-     */
-    // eslint-disable-next-line unicorn/prevent-abbreviations
-    onChartInit(eChartsInstance) {
-        this.eChartsInstance = eChartsInstance;
-        if (this.data.length > 0) {
-            this.setChartData();
-        }
-    }
-    /**
-     * Устанавливает новые данные {@link ScPriceHistoryComponent.eChartsInstance}.
+     * @param param0 {@link TuiDayRange} Временной промежуток истории цен.
+     * @param param0.from {@link TuiDay} Дата начала истории цен.
+     * @param param0.to {@link TuiDay} Дата конца истории цен.
      */
-    setChartData() {
-        if (this.chartOption.series && !Array.isArray(this.chartOption.series)) {
-            this.maxPrice = Math.max(...this.data.map((item) => item.value[1]));
-            this.minPrice = Math.min(...this.data.map((item) => item.value[1]));
-            this.chartOption.series.data = this.data;
-            this.eChartsInstance.clear();
-            this.eChartsInstance.setOption(this.chartOption, true, true);
-            this.cdr.markForCheck();
-        }
+    computeLabels$({ from, to }) {
+        return this.months$.pipe(map((months) => Array.from({ length: TuiMonth.lengthBetween(from, to) + 1 }, (_, index) => months[from.append({ month: index }).month])));
     }
     /**
-     * Добавляет значение цены товара в массив истории цен.
+     * Вычисляет данные для отображения на графике.
      *
-     * @param value Цена товара или услуги.
-     * @param date Дата установки цены.
-     * @param nextDate Следующая дата установки цены.
+     * @param param0 {@link TuiDayRange} Временной промежуток истории цен.
+     * @param param0.from {@link TuiDay} Дата начала истории цен.
+     * @param param0.to {@link TuiDay} Дата конца истории цен.
+     * @param history История цен.
      */
-    pushDataItem(value, date, nextDate) {
-        this.data.push({
-            name: date.toString(),
-            value: [date, value, nextDate],
-        });
+    computeValue({ from, to }, history) {
+        return (Array.from({ length: TuiDay.lengthBetween(from, to) + 1 })
+            .fill(0)
+            // eslint-disable-next-line unicorn/no-array-reduce
+            .reduce((array, _, index) => {
+            const data = from.append({ day: index });
+            return [
+                ...array,
+                [
+                    data,
+                    (history.find((valueHistory, indexHistory, arrayHistory) => data.daySame(valueHistory[0]) || data.dayBefore(arrayHistory[indexHistory + 1][0])) ??
+                        history[0])[1],
+                ],
+            ];
+        }, []));
     }
 }
-ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { history: "history" }, ngImport: i0, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full touch-none\"></div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "loading", "initOpts", "merge", "autoResize", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPriceHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, deps: [{ token: i1.ScCatalogService }, { token: TUI_MONTHS }, { token: POLYMORPHEUS_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ScPriceHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPriceHistoryComponent, selector: "sc-price-history", inputs: { product: "product" }, ngImport: i0, template: "<div class=\"flex flex-col items-center\">\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TuiLineDaysChartComponent, selector: "tui-line-days-chart", inputs: ["value", "y", "height", "smoothingFactor", "hintContent", "xStringify", "yStringify", "dots"] }, { kind: "component", type: i3$1.TuiAxesComponent, selector: "tui-axes", inputs: ["axisX", "axisXLabels", "axisY", "axisYInset", "axisYLabels", "axisYName", "axisYSecondaryInset", "axisYSecondaryLabels", "axisYSecondaryName", "horizontalLines", "horizontalLinesHandler", "verticalLines", "verticalLinesHandler"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    tuiPure
+], ScPriceHistoryComponent.prototype, "computeLabels$", null);
+__decorate([
+    tuiPure
+], ScPriceHistoryComponent.prototype, "computeValue", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPriceHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center\">\n    <div *ngIf=\"maxPrice && minPrice\" class=\"w-full font-bold text-end text-lg mb-1\">\u043E\u0442 {{ minPrice.toLocaleString() }} \u20BD \u0434\u043E {{ maxPrice.toLocaleString() }} \u20BD</div>\n    <div class=\"relative w-full h-56\">\n        <div class=\"h-48 bg-tui-base-02 mt-2 absolute rounded right-0 left-16\"></div>\n        <div echarts [initOpts]=\"initOption\" (chartInit)=\"onChartInit($event)\" [options]=\"chartOption\" class=\"w-full !h-full touch-none\"></div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { history: [{
+            args: [{ selector: 'sc-price-history', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col items-center\">\n    <ng-container *ngIf=\"priceInfo$ | async as priceInfo; else isNotExist\">\n        <div class=\"w-174 mb-1 text-end text-lg font-bold\">\u043E\u0442 {{ priceInfo.min.toLocaleString() }} \u20BD \u0434\u043E {{ priceInfo.max.toLocaleString() }} \u20BD</div>\n\n        <ng-container *ngIf=\"history$ | async as history\">\n            <div\n                *ngIf=\"range$ | async as range\"\n                class=\"relative h-56 w-full p-5 text-tui-primary\"\n            >\n                <tui-axes\n                    *ngIf=\"computeLabels$(range) | async as labels\"\n                    class=\"h-full\"\n                    [axisXLabels]=\"labels\"\n                    [horizontalLines]=\"4\"\n                    [verticalLines]=\"labels.length\"\n                >\n                    <tui-line-days-chart\n                        class=\"chart\"\n                        [height]=\"priceInfo.max\"\n                        [smoothingFactor]=\"10\"\n                        [y]=\"priceInfo.min - (priceInfo.min * 1) / 4\"\n                        [value]=\"computeValue(range, history)\"\n                        [xStringify]=\"xStringify$ | async\"\n                        [yStringify]=\"yStringify\"\n                        [hintContent]=\"hint\"\n                    ></tui-line-days-chart>\n                </tui-axes>\n            </div>\n        </ng-container>\n    </ng-container>\n    <ng-template #isNotExist>\n        <p class=\"text-base font-bold\">\u0426\u0435\u043D\u0430 \u043D\u0430 \u0442\u043E\u0432\u0430\u0440 \u043D\u0435 \u0438\u0437\u043C\u0435\u043D\u044F\u043B\u0430\u0441\u044C</p>\n    </ng-template>\n    <ng-template\n        #hint\n        let-data\n    >\n        <div class=\"font-bold\">{{ data[1].toLocaleString() }} \u20BD</div>\n        <div>{{ data[0] }}</div>\n    </ng-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.ScCatalogService }, { type: i10.Observable, decorators: [{
+                    type: Inject,
+                    args: [TUI_MONTHS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [POLYMORPHEUS_CONTEXT]
+                }] }]; }, propDecorators: { product: [{
                 type: Input
-            }] } });
+            }], computeLabels$: [], computeValue: [] } });
 
 /**
  * Значения пагинации списка товаров категории по умолчанию.
@@ -2061,123 +1979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-/**
- * Language: Russian.
- */
-var scLangRU = {
-    time: {
-        month: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
-        monthAbbr: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
-        dayOfWeek: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
-        dayOfWeekAbbr: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'],
-    },
-    legend: {
-        selector: {
-            all: 'Всё',
-            inverse: 'Обратить',
-        },
-    },
-    toolbox: {
-        brush: {
-            title: {
-                rect: 'Выделить область',
-                polygon: 'Инструмент «Лассо»',
-                lineX: 'Горизонтальное выделение',
-                lineY: 'Вертикальное выделение',
-                keep: 'Оставить выбранное',
-                clear: 'Очистить выбранное',
-            },
-        },
-        dataView: {
-            title: 'Данные',
-            lang: ['Данные', 'Закрыть', 'Обновить'],
-        },
-        dataZoom: {
-            title: {
-                zoom: 'Увеличить',
-                back: 'Сбросить увеличение',
-            },
-        },
-        magicType: {
-            title: {
-                line: 'Переключиться на линейный график',
-                bar: 'Переключиться на столбчатую диаграмму',
-                stack: 'Стопка',
-                tiled: 'Плитка',
-            },
-        },
-        restore: {
-            title: 'Восстановить',
-        },
-        saveAsImage: {
-            title: 'Сохранить картинку',
-            lang: ['Правый клик, чтобы сохранить картинку'],
-        },
-    },
-    series: {
-        typeNames: {
-            pie: 'Круговая диаграмма',
-            bar: 'Столбчатая диаграмма',
-            line: 'Линейный график',
-            scatter: 'Точечная диаграмма',
-            effectScatter: 'Точечная диаграмма с волнами',
-            radar: 'Лепестковая диаграмма',
-            tree: 'Дерево',
-            treemap: 'Плоское дерево',
-            boxplot: 'Ящик с усами',
-            candlestick: 'Свечной график',
-            k: 'График К-линий',
-            heatmap: 'Тепловая карта',
-            map: 'Карта',
-            parallel: 'Диаграмма параллельных координат',
-            lines: 'Линейный граф',
-            graph: 'Граф отношений',
-            sankey: 'Диаграмма Санкей',
-            funnel: 'Воронкообразная диаграмма',
-            gauge: 'Шкала',
-            pictorialBar: 'Столбец-картинка',
-            themeRiver: 'Тематическая река',
-            sunburst: 'Солнечные лучи',
-            custom: '',
-            chart: '',
-        },
-    },
-    aria: {
-        general: {
-            withTitle: 'Это график, показывающий "{title}"',
-            withoutTitle: 'Это график',
-        },
-        series: {
-            single: {
-                prefix: '',
-                withName: ' с типом {seriesType} и именем {seriesName}.',
-                withoutName: ' с типом {seriesType}.',
-            },
-            multiple: {
-                prefix: '. Он состоит из {seriesCount} серий.',
-                withName: ' Серия {seriesId} имеет тип {seriesType} и показывает {seriesName}.',
-                withoutName: ' Серия {seriesId} имеет тип {seriesType}.',
-                separator: {
-                    middle: '',
-                    end: '',
-                },
-            },
-        },
-        data: {
-            allData: 'Данные таковы: ',
-            partialData: 'Первые {displayCnt} элементов: ',
-            withName: 'значение для {name} — {value}',
-            withoutName: '{value}',
-            separator: {
-                middle: ', ',
-                end: '. ',
-            },
-        },
-    },
-};
-
-echarts.registerLocale('RU', scLangRU);
-echarts.use([TitleComponent, TooltipComponent, GridComponent, LineChart, SVGRenderer]);
 /**
  * Модуль каталога.
  */
@@ -2206,9 +2007,12 @@ ScCatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TuiFieldErrorPipeModule,
         TuiLoaderModule,
         TuiLinkModule,
-        TuiElasticContainerModule, i2$2.NgxEchartsModule, TuiLetModule,
+        TuiElasticContainerModule,
+        TuiLetModule,
         TuiRepeatTimesModule,
-        TuiHighlightModule], exports: [ScPriceListPaginationComponent,
+        TuiHighlightModule,
+        TuiLineDaysChartModule,
+        TuiAxesModule], exports: [ScPriceListPaginationComponent,
         ScCategoryCardComponent,
         ScFavoriteBtnComponent,
         ScInputQuantityComponent,
@@ -2232,10 +2036,11 @@ ScCatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         TuiLoaderModule,
         TuiLinkModule,
         TuiElasticContainerModule,
-        NgxEchartsModule.forRoot({ echarts }),
         TuiLetModule,
         TuiRepeatTimesModule,
-        TuiHighlightModule] });
+        TuiHighlightModule,
+        TuiLineDaysChartModule,
+        TuiAxesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScCatalogModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2276,10 +2081,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TuiLoaderModule,
                         TuiLinkModule,
                         TuiElasticContainerModule,
-                        NgxEchartsModule.forRoot({ echarts }),
                         TuiLetModule,
                         TuiRepeatTimesModule,
                         TuiHighlightModule,
+                        TuiLineDaysChartModule,
+                        TuiAxesModule,
                     ],
                 }]
         }] });
@@ -4391,7 +4197,7 @@ class ScPaymentStatusComponent {
     }
 }
 ScPaymentStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPaymentStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ScPaymentStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPaymentStatusComponent, selector: "sc-payment-status", inputs: { status: "status", orderId: "orderId" }, outputs: { backToOrdersClick: "backToOrdersClick", backToOrderClick: "backToOrderClick" }, ngImport: i0, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$1.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card"] }, { kind: "directive", type: i3$1.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ScPaymentStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ScPaymentStatusComponent, selector: "sc-payment-status", inputs: { status: "status", orderId: "orderId" }, outputs: { backToOrdersClick: "backToOrdersClick", backToOrderClick: "backToOrderClick" }, ngImport: i0, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.TuiLinkComponent, selector: "a[tuiLink], button[tuiLink]", inputs: ["pseudo", "icon", "iconAlign", "iconRotated", "mode"], exportAs: ["tuiLink"] }, { kind: "component", type: i4.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }, { kind: "component", type: i4.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "component", type: i3$2.TuiBlockStatusComponent, selector: "tui-block-status", inputs: ["card"] }, { kind: "directive", type: i3$2.TuiBlockStatusDirective, selector: "[tuiSlot]", inputs: ["tuiSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ScPaymentStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sc-payment-status', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"status && orderId; else failed\">\n    <ng-container [ngSwitch]=\"status\">\n        <tui-block-status *ngSwitchCase=\"'success'\">\n            <tui-svg src=\"tuiIconCheckCircleLarge\" tuiSlot=\"top\" class=\"scale-[3] !h-20 !text-green-500\"></tui-svg>\n            <h4>\u0421\u043F\u0430\u0441\u0438\u0431\u043E!</h4>\n            <br />\n            <div class=\"font-bold\">\u0412\u0430\u0448 \u0437\u0430\u043A\u0430\u0437 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u043F\u043B\u0430\u0447\u0435\u043D. \u041C\u044B \u0441\u0432\u044F\u0436\u0435\u043C\u0441\u044F \u0441 \u0432\u0430\u043C\u0438 \u0432 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043C\u044F.</div>\n            <br />\n            <div class=\"font-bold\">\n                \u041D\u043E\u043C\u0435\u0440 \u0432\u0430\u0448\u0435\u0433\u043E \u0437\u0430\u043A\u0430\u0437\u0430: <a tuiLink [pseudo]=\"true\" (click)=\"backToOrderClick.emit()\">{{orderId}}</a>\n            </div>\n\n            <button tuiButton (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n        </tui-block-status>\n        <tui-block-status *ngSwitchCase=\"'error'\">\n            <tui-svg src=\"tuiIconXCircleLarge\" class=\"scale-[3] !h-20 !text-red-500\" tuiSlot=\"top\"></tui-svg>\n            <h4>\u041E\u043F\u043B\u0430\u0442\u0430 \u043D\u0435 \u043F\u0440\u043E\u0448\u043B\u0430!</h4>\n            <br />\n            <div class=\"font-bold\">\u041F\u0440\u0438 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043F\u043B\u0430\u0442\u0435\u0436\u0430 \u043F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430.</div>\n            <button tuiButton tuiItem (click)=\"backToOrderClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0443</button>\n        </tui-block-status>\n    </ng-container>\n</ng-container>\n\n<ng-template #failed>\n    <tui-block-status>\n        <tui-svg src=\"tuiIconInfoLarge\" class=\"scale-[3] !h-20 !text-yellow-500\" tuiSlot=\"top\"></tui-svg>\n        <h4>\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A!</h4>\n        <button tuiButton tuiItem (click)=\"backToOrdersClick.emit()\">\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043A \u0437\u0430\u043A\u0430\u0437\u0430\u043C</button>\n    </tui-block-status>\n</ng-template>\n" }]