ru.coon 2.8.21 → 2.8.23

package/CHANGELOG.md

@@ -1,12 +1,36 @@
+# Version 2.8.23, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/c36774795559da6d9f0d5780d591a33e16b1c99f)
+* ## Features
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([24fca5], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/24fca5f0d13c24b0e4d76c489d082589647d05de))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([055785], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/05578581ee41bb993ed48efbc9072d0fd11b69b5))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([dd953a], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/dd953a4782945ddfb6516fe8866bc9d6ee9d3370))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([81da35], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/81da35474745b812fcf89c4b569870ed72a4c66e))
+
+* upd ([571495], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/571495ffbd6b23c76edd9eac741b87163fc59cdc))
+* add loadFakeData to ReportPanel ([671b7f], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/671b7f27f3538291a56ba8c1b45016910b42e17d))
+* update: CHANGELOG.md ([c73ba4], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/c73ba4e040a66da70edbeb990b8e7d42a690cc1b))
+
+# Version 2.8.22, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/abdcd052a504db9e3ef0d640c05c861dab6fc771)
+* ## Features
+* <span style='color:green'>feat: HT-10212: fix layout bug</span> ([cec2b3], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/cec2b36d2917ca56537c119f1ce1ead71c8ca009))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([6ddef7], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/6ddef7e1775c40563be1d0959a6270a929fa7509))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([57ffb8], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/57ffb80671975236cd3cfc78583ac9e13779392b))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([239bb2], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/239bb2d06eeb59e3dee05507fed41f41a8d64498))
+* <span style='color:green'>feat: HT-10463: fix add in context menu button</span> ([4588f7], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/4588f75ee55b80327192cb7df28770d41d4707c6))
+
+* update: CHANGELOG.md ([866504], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/86650477e9606983c72620ed063150bb23fc3e4e))
+
 # Version 2.8.21, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/dcc7c4b24a73690b18533027979c7ed0e3c88a78)
 * ## Features
 * <span style='color:green'>feat: BFL-16584: fix create plugin method</span> ([0b4aaf], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/0b4aafb76151f2a689fed079857e972fb9c34ebd))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([9eff33], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/9eff333c0a480672aea7d594bd44688fe3e89653))
 
 * update: CHANGELOG.md ([5cbccf], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/5cbccffafebcc1252fae28c0ca74fa09e43b2180))
 
 # Version 2.8.20, [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/c7acd5384ee23afce8f37cc9b5821c3837f5cf98)
 * ## Features
 * <span style='color:green'>feat: BFL-16584: fix create plugin method</span> ([36b867], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/36b8678a1bb336a50930d379219dc61ac5a06a97))
+* <span style='color:green'>feat: Add itemId property with pluginId value on each toolbar item to auto generate testId. Related to HT-8881.</span> ([32f736], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/32f7362b2a2a090842dd56feadc5586a5188b037))
+* <span style='color:green'>feat: HT-10270 CoonChart new chartType and refactoring</span> ([fee620], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/fee62060cb96b665b4353b1c962b897de1c09046))
 
 * update: CHANGELOG.md ([7dcff7], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/7dcff78843efc4b137d3796aee2273bf65db0e53))
 
@@ -174,6 +198,8 @@ feat: HT-10458: Check then summery row has values</span> ([b87004], [link](http:
 * <span style='color:green'>feat: TR-67905 loginForm and TextFieldFormatter plugin</span> ([aafbfc], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/aafbfc81b05aa91a172905b47bf7c620f720be11))
 * <span style='color:green'>feat: HT-10115: chain plugin return result, log unified buttons call handlers result</span> ([408dab], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/408dab15c6afc49e47bd80729bf55e1a541522cc))
 * <span style='color:green'>feat: [ReportTree][CharacteristicGridCopyPlugin] Added testId generation. Related to HT-8881.</span> ([2bc5e8], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/2bc5e899f6a5d390844fcc25fc4511b5d195fbb8))
+* <span style='color:green'>feat: [ReportTree] Added generating of testId's on tree nodes. Related to HT-8881.</span> ([648ff1], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/648ff18a85a4cdb3ca1a9953e08808b4c3a822ad))
+* <span style='color:green'>feat: [CharacteristicGridCopyPlugin] Added property to enable generating of testId's on column widgets. Related to HT-8881.</span> ([aa03d7], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/aa03d72ab1592b7134d1d980f442a9901852424b))
 
 * ## Fixes
 * <span style='color:red'> TR-68748: set aceEditor value on render editor</span> ([0ec858], [link](http://gitlab-dbr.sigma-it.local/dbr/ru.coon/-/commit/0ec858f3daaa04b6ae03ad6980b98e68795538f9))

package/package.json

@@ -4,7 +4,7 @@
     "name": "ru.coon"
   },
   "description": "",
-  "version": "2.8.21",
+  "version": "2.8.23",
   "repository": {
     "type": "git",
     "url": "git+http://gitlab-dbr.sigma-it.local/dbr/ru.coon"

package/src/chart/BaseChart.js

@@ -63,6 +63,9 @@ Ext.define('Coon.chart.BaseChart', {
     },
 
     clearChart() {
+        if (!this.chart) {
+            return;
+        }
         this.chart.clear();
         this.ownerCt.setFilterDefaults({});
     },
@@ -71,7 +74,7 @@ Ext.define('Coon.chart.BaseChart', {
         rows = rows || cfg.rows;
         cfg.series = cfg.serieFields.map((field) => {
             return Object.assign({}, cfg.serieConfig, {data: rows.map((row) => {
-                return cfg.serieConfig.type === 'bar' ? row[field] : {name: row[cfg.axisField], value: row[field]};
+                return {name: row[cfg.legend], value: row[field]};
             })});
         });
         Coon.log.debug('loadChart', {cfg, rows});

package/src/chart/CoonChart.js

@@ -180,43 +180,45 @@ Ext.define('Coon.chart.CoonChart', {
     },
 
     getChartConfig(type) {
+        const typeConfig = type === 'pie' ? type : 'default';
+        const defaultConfig = {
+            rows: [],
+            tooltip: {
+                trigger: 'item',
+            },
+            legend: {},
+        };
         const config = {
-            bar: {
-                rows: [],
+            default: {
                 categoryAxis: {
                     type: 'category',
-                    data: [],
                 },
                 valueAxis: {
                     type: 'value',
+                    name: '',
+                },
+                legend: {
+                    data: [],
                 },
-                serieFields: [],
                 serieConfig: {
                     name: '',
-                    type: 'bar',
+                    type: type,
                 },
+                categoryLineY: false,
             },
             pie: {
-                rows: [],
-                tooltip: {
-                    trigger: 'item',
-                },
                 legend: {
                     orient: 'vertical',
                     left: 'left',
                 },
                 serieConfig: {
                     name: '',
-                    type: 'pie',
+                    type: type,
                     radius: '50%',
                 },
-                serieFields: [],
             },
         };
-        const result = config[type];
-        if (result) {
-            return result;
-        }
+        return Ext.apply(defaultConfig, config[typeConfig]);
     },
 
     getCoonChartData(coonChartId) {
@@ -224,7 +226,7 @@ Ext.define('Coon.chart.CoonChart', {
         loadUiElementCommand.on('complete', function(response) {
             const propertyData = response.propertyData && JSON.parse(response.propertyData);
             this.coonChartData = Object.assign(this.getChartConfig(propertyData.chartType), response, propertyData);
-            this.coonChartData.axisName = this.coonChartData.chartType === 'bar' && this.coonChartData.fieldset[this.coonChartData.axisField];
+            // this.coonChartData.axisName = this.coonChartData.chartType === 'bar' && this.coonChartData.fieldset[this.coonChartData.categoryField];
             this.loadDataFromSource();
         }, this);
         loadUiElementCommand.execute(coonChartId);
@@ -237,16 +239,20 @@ Ext.define('Coon.chart.CoonChart', {
         }
         const doFilter = (this.filterDefaults ? this.filterDefaults.doFilter : undefined);
         if (this.autoFilter || doFilter) {
-            me.mask();
+            me.loadMask = new Ext.LoadMask({
+                target: me,
+                msg: 'Идет построение графика...',
+            });
+            me.loadMask.show();
             this.getDataSourceData(this.coonChartData).then(function(data) {
                 if (data && Array.isArray(data.list) && data.list.length > 0) {
                     me.coonChartData.rows = data.list;
                     me.setChartData(me.coonChartData);
                 }
-                me.unmask();
             }).catch((error) => {
-                me.unmask();
                 Coon.log.error('getDataSourceData', error);
+            }).finally(() => {
+                me.loadMask && me.loadMask.destroy();
             });
         }
     },
@@ -301,51 +307,72 @@ Ext.define('Coon.chart.CoonChart', {
 
     setChartData(config, fieldAlerts) {
         const alerts = [];
-        const isSettingAxisData = config.serieConfig.type === 'bar';
+        const isSettingAxisData = config.chartType === 'bar' || config.chartType === 'line';
+        const defaultConfig = this.getChartConfig(config.chartType);
         const isNumber = (v) => Ext.Number.isFinite(parseFloat(v));
-        const normalizeSerieValue = (row, field) => {
-            const value = row[field] && row[field].trim();
-            if (typeof value !== 'number' && !value && isNumber(config.fieldDefaults)) {
-                return config.fieldDefaults;
+        const normalizeValue = (row, fieldConfig, type) => {
+            let value;
+            const field = fieldConfig.reportField;
+            if (type === 'serie') {
+                value = isNumber(row[field]) && row[field] ||
+                    isNumber(fieldConfig.defaultValue) && fieldConfig.defaultValue;
             }
-            if (!isNumber(value)) {
+            if (type === 'axis') {
+                value = row[field] || fieldConfig.defaultValue;
+            }
+            if (!value) {
                 alerts.push({type: 'serie', val: field});
+                return;
             }
             return value;
         };
 
-        config.categoryAxis = config.categoryAxis || {};
-        const normalizeAxisField = (field) => {
-            const result = field || config.fieldDefaults[config.axisField];
-            if (!result) {
-                alerts.push({type: 'axis', val: config.axisField});
-            }
-            return result;
-        };
-        const series = config.serieFields.reduce((acc, field) => {
-            acc[field] = Object.assign({}, config.serieConfig, {data: []});
-            return acc;
-        }, {});
-        config.rows.forEach((row) => {
-            const axisValue = normalizeAxisField(row[config.axisField]);
-            isSettingAxisData && config.categoryAxis.data.push(axisValue);
-            config.serieFields.map((field) => {
-                series[field].data.push({
-                    name: axisValue,
-                    value: normalizeSerieValue(row, field),
-                });
+        const categoryAxis = config.categoryConfig.map((fieldConfig) => {
+            const configObj = Object.assign({}, fieldConfig.additionalConfig, fieldConfig, defaultConfig.categoryAxis);
+            delete configObj.additionalConfig;
+            return configObj;
+        });
+        const valueAxis = config.valueConfig.map((fieldConfig) => {
+            const configObj = Object.assign({}, fieldConfig.additionalConfig, fieldConfig, defaultConfig.valueAxis);
+            delete configObj.additionalConfig;
+            return configObj;
+        });
+        const legend = config.legendConfig.map((fieldConfig) => {
+            const configObj = Object.assign({}, fieldConfig.additionalConfig, fieldConfig, defaultConfig.legend);
+            delete configObj.additionalConfig;
+            return configObj;
+        });
+        const series = config.serieConfig.map((fieldConfig) => {
+            const configObj = Object.assign({}, fieldConfig.additionalConfig, fieldConfig, defaultConfig.serieConfig);
+            delete configObj.additionalConfig;
+            return configObj;
+        });
+        config.rows.map((row) => {
+            categoryAxis.forEach((categoryEl) => {
+                categoryEl.data = categoryEl.data || [];
+                categoryEl.data.push(normalizeValue(row, categoryEl, 'axis'));
+            });
+            series.forEach((serieEl) => {
+                serieEl.data = serieEl.data || [];
+                serieEl.data.push(normalizeValue(row, serieEl, 'serie'));
+            });
+            legend.forEach((legendEl) => {
+                legendEl.data = legendEl.data || [];
+                legendEl.data.push(normalizeValue(row, legendEl, 'axis'));
             });
         });
-
-        if (config.axisName === 'x') {
+        config.categoryAxis = isSettingAxisData && categoryAxis;
+        config.valueAxis = isSettingAxisData && valueAxis;
+        config.legend = legend;
+        if (isSettingAxisData && !config.categoryLineY) {
             config.xAxis = config.categoryAxis;
             config.yAxis = config.valueAxis;
         }
-        if (config.axisName === 'y') {
+        if (isSettingAxisData && config.categoryLineY) {
             config.yAxis = config.categoryAxis;
             config.xAxis = config.valueAxis;
         }
-        config.series = Object.values(series);
+        config.series = series;
         this.showErrorMessage(alerts, fieldAlerts);
         this.down('BaseChart').clearChart();
         this.loadChart(config);

package/src/chart/editor/CoonChartEditor.js

@@ -34,13 +34,10 @@ Ext.define('Coon.chart.editor.CoonChartEditor', {
                 type: 'vbox',
                 align: 'stretch',
             },
-            // defaults: {
-            //     flex: 1,
-            // },
             items: [
                 {
                     xtype: 'panel',
-                    title: 'Параметры',
+                    title: 'Параметры диаграммы',
                     layout: {
                         type: 'vbox',
                         align: 'stretch',
@@ -74,61 +71,98 @@ Ext.define('Coon.chart.editor.CoonChartEditor', {
                                 reference: 'description',
                                 xtype: 'textfield',
                                 bind: '{coonChart.description}',
+                            },
+                            {
+                                xtype: 'combo',
+                                fieldLabel: 'Тип диаграммы',
+                                reference: 'chartType',
+                                editable: false,
+                                bind: {
+                                    value: '{coonChart.chartType}',
+                                },
+                                store: ['bar', 'pie', 'line'],
                             }
                         ],
                     },
                     {
-                        xtype: 'combo',
-                        fieldLabel: 'тип диаграммы',
-                        reference: 'chartType',
-                        editable: false,
-                        bind: {
-                            value: '{coonChart.chartType}',
+                        xtype: 'panel',
+                        layout: {
+                            type: 'hbox',
+                            align: 'stretch',
                         },
-                        store: ['bar', 'pie'],
-                    },
-                    {
-                        xtype: 'radiogroup',
-                        reference: 'sourceType',
                         items: [
-                            {boxLabel: 'репорт', name: 'sourceType', inputValue: 'report'},
-                            {boxLabel: 'команда', name: 'sourceType', inputValue: 'command'}
-                        ],
-                    },
-                    {
-                        xtype: 'AbstractComponentComboBox',
-                        fieldLabel: 'команда',
-                        reference: 'command',
-                        displayField: 'name',
-                        valueField: 'value',
-                        getData() {
-                            return [];
-                        },
-                        bind: {
-                            value: '{coonChart.commandSourceId}',
-                            hidden: '{coonChart.sourceType === "report"}',
-                        },
-                    },
+                            {
+                                xtype: 'combo',
+                                reference: 'sourceType',
+                                displayField: 'descr',
+                                valueField: 'val',
+                                name: 'sourceType',
+                                flex: 1,
+                                store: [
+                                    {descr: 'репорт', val: 'report'},
+                                    {descr: 'команда', val: 'command'}
+                                ],
+                                bind: {
+                                    value: '{coonChart.sourceType}',
+                                },
+                            },
+                            {
+                                xtype: 'AbstractComponentComboBox',
+                                fieldLabel: 'команда',
+                                reference: 'command',
+                                displayField: 'name',
+                                valueField: 'value',
+                                flex: 2,
+                                getData() {
+                                    return [];
+                                },
+                                bind: {
+                                    value: '{coonChart.commandSourceId}',
+                                    hidden: '{coonChart.sourceType === "report"}',
+                                },
+                            },
+                            {
+                                xtype: 'ReportLookupCombo',
+                                reportId: 'REPORTS',
+                                valueField: 'CM_REPORT_CD',
+                                displayField: 'CM_REPORT_CD',
+                                reference: 'reportSourceField',
+                                flex: 2,
+                                bind: {
+                                    value: '{coonChart.reportSourceId}',
+                                    hidden: '{coonChart.sourceType === "command"}',
+                                },
+                            }
+                        ]},
                     {
                         xtype: 'textfield',
-                        fieldLabel: 'reportId',
-                        reference: 'reportSourceField',
+                        fieldLabel: 'Параметры в фомате {"parameter1Name":"value","parameter2Name":"value"}',
+                        reference: 'parametersField',
                         bind: {
-                            value: '{coonChart.reportSourceId}',
-                            hidden: '{coonChart.sourceType === "command"}',
+                            value: '{coonChart.parameters}',
                         },
                     },
                     {
-                        xtype: 'textfield',
-                        fieldLabel: 'parameters',
-                        reference: 'parametersField',
+                        xtype: 'checkbox',
+                        boxLabel: 'Отобразить категорию по оси y',
+                        boxLabelAlign: 'after',
                         bind: {
-                            value: '{coonChart.parameters}',
+                            value: '{coonChart.categoryLineY}',
                         },
                     }
                     ],
                     buttons: [
-                        {text: 'загрузить данные', itemId: 'configDataSourceBindBtn'}
+                        {
+                            text: 'Загрузить данные',
+                            itemId: 'configDataSourceBindBtn',
+                            handler: 'configDataSourceBinds',
+                        },
+                        {
+                            text: 'Отобразить диаграмму',
+                            tooltip: 'Чтобы отобразить диаграмму нужно загрузить данные',
+                            itemId: 'loadDataBtn',
+                            handler: 'showCoonChartHandler',
+                        }
                     ],
                 },
                 {
@@ -140,23 +174,6 @@ Ext.define('Coon.chart.editor.CoonChartEditor', {
                         align: 'stretch',
                     },
                     items: [
-                        // {
-                        //     xtype: 'panel',
-                        //     title: 'конфигурация',
-                        //     layout: {
-                        //         type: 'vbox',
-                        //         align: 'stretch',
-                        //     },
-                        //     flex: 1,
-                        //     items: [
-                        //         {
-                        //             xtype: 'UiAceEditor',
-                        //             reference: 'UiAceEditor',
-                        //             flex: 1,
-                        //             margin: 10,
-                        //         }
-                        //     ],
-                        // },
                         {
                             xtype: 'DataSourceChartBindForm',
                             flex: 1,
@@ -183,7 +200,11 @@ Ext.define('Coon.chart.editor.CoonChartEditor', {
         {text: 'отменить', itemId: 'cancel', handler(btn) {
             btn.up('CoonChartEditor').close();
         }},
-        {text: 'подтвердить', itemId: 'submit'}
+        {
+            text: 'подтвердить',
+            itemId: 'submit',
+            handler: 'onSubmitCoonChart',
+        }
     ],
 
 });

package/src/chart/editor/CoonChartEditorController.js

@@ -3,172 +3,159 @@ Ext.define('Coon.chart.editor.CoonChartEditorController', {
 
     alias: 'controller.CoonChartEditorController',
 
-    control: {
-        'button#submit': {
-            click: 'onSubmitCoonChart',
-        },
-        'radiogroup': {
-            change: 'onChangeSourceType',
-        },
-        'button#configDataSourceBindBtn': {
-            click: 'configDataSourceBinds',
-        },
-        'button#loadDataBtn': {
-            click: 'onChangeDataSourceConfig',
-        },
-    },
-
     init() {
-        const vm = this.getViewModel();
-        vm.bind('{coonChart.chartType}', function(chartType) {
-            this.lookup('chartType').setValue(chartType);
-            this.clearFieldset();
-            this.setComboStore(chartType);
-            vm.set('coonChart.config', this.lookup('SampleChart').getChartConfig(chartType));
+        this.vm = this.getViewModel();
+        this.dataSourceChartBindForm = this.getView().down('DataSourceChartBindForm');
+        this.vm.bind('{coonChart.chartType}', function(chartType) {
+            this.vm.set('coonChart.config', this.lookup('SampleChart').getChartConfig(chartType));
         }, this);
-        this.lookup('command').store.loadData(this.getCommandsList());
-        vm.bind('{coonChart.sourceType}', function(sourceType) {
-            // Coon.log.debug('vm:coonChart.sourceType', sourceType);
-            this.lookup('sourceType').setValue({sourceType}, true);
+        this.vm.bind('{coonChart.sourceType}', function(sourceType) {
+            if (sourceType === 'command' && !this.lookup('command').getStore().getRange().length) {
+                this.lookup('command').store.loadData(this.getCommandsList());
+            }
         }, this);
-        vm.bind({
-            bindTo: '{coonChart.fieldset}',
-            deep: true,
-        }, this.setDisabledLoadButton, this);
-        vm.bind('{coonChart.reportSourceId}', function(reportSourceId) {
-            this.lookup('reportSourceField').setValue(reportSourceId);
-            this.clearFieldset();
+        this.vm.bind('{fieldAlerts}', function(fieldAlerts) {
+            Object.entries(fieldAlerts).map(([field, textAlert]) => {
+                this.dataSourceChartBindForm.links.form.getStore().getRange().forEach((record) => {
+                    fieldAlerts[record.get('reportField')] && record.set('alert', fieldAlerts[record.get('reportField')]);
+                });
+            });
         }, this);
+        this.vm.bind('{coonChart.reportSourceId}', this.loadReportConfig, this);
     },
 
-
     doInit(coonChartId, mode) {
-        const vm = this.getViewModel();
-        this.coonChartId = coonChartId || vm.get('coonChart.id');
-        vm.set('editorMode', mode || this.coonChartId ? 'edit' : 'add');
-        if (this.coonChartId) {
-            vm.set('isInit', true);
+        this.vm.set('editorMode', mode || coonChartId ? 'edit' : 'add');
+        if (coonChartId) {
+            this.vm.set('coonChart.id', coonChartId);
+            this.vm.set('isInit', true);
             const loadUiElementCommand = Ext.create('Coon.uielement.command.GetUIElementCommand');
             loadUiElementCommand.on('complete', this.loadCoonChartHandler, this);
-            loadUiElementCommand.execute(this.coonChartId);
+            loadUiElementCommand.execute(coonChartId);
         }
     },
 
     loadCoonChartHandler(coonChartBean) {
-        const vm = this.getViewModel();
         const coonChart = coonChartBean.propertyData && Object.assign(coonChartBean, JSON.parse(coonChartBean.propertyData));
-        vm.set('coonChart', coonChart);
-        // this.lookup('reportSourceField').setValue(coonChart.reportSourceId);
-        // this.setComboStore(coonChart.chartType);
-        this.configDataSourceBinds();
+        this.vm.set('coonChart', coonChart);
+        const dataToChartGrid = [...coonChart.valueConfig, ...coonChart.categoryConfig, ...coonChart.legendConfig, ...coonChart.serieConfig];
+        dataToChartGrid.length && dataToChartGrid.forEach((configObj) => {
+            configObj.additionalConfig = JSON.stringify(configObj.additionalConfig);
+        });
+        this.dataSourceChartBindForm.links.form.getStore().loadData(dataToChartGrid);
+        this.vm.set('dataToChartGrid', dataToChartGrid);
     },
 
-    setComboStore(type) {
-        const vm = this.getViewModel();
-        const storeDataBar = [
-            {name: 'ось X', value: 'x', isUnique: true},
-            {name: 'ось Y', value: 'y', isUnique: true},
-            {name: 'серия значений(данные графика)', value: 'serie'}
-        ];
-        const storeDataPie = [
-            {name: 'legend', value: 'legend', isUnique: true},
-            {name: 'серия значений(данные графика)', value: 'serie', isUnique: true}
-        ];
+    loadReportConfig() {
+        const form = this.dataSourceChartBindForm;
+        const coonChart = this.vm.get('coonChart');
+        form.mask();
+        this.clearBindForm();
+        coonChart.reportSourceId && this.getReportFieldsData(coonChart.reportSourceId).then((response) => {
+            if (!response || !response.fields) {
+                return;
+            }
+            this.vm.set('reportFieldStore', response.fields);
+            form.links.grid.reconfigure(null, response.fields.map((key) =>
+                ({dataIndex: `${key.reportFieldCd}`, text: `${key.description}`, flex: 1})
+            ));
+        }).catch((error) => {
+            Coon.log.error('getReportFieldsData', error);
+        }).finally(() => {
+            form.unmask();
+        });
+    },
 
-        const comboStore = {
-            fields: ['name', 'value', 'isUnique'],
-            data: type === 'bar' ? storeDataBar : 'pie' ? storeDataPie : '',
-        };
-        vm.set('comboStore', comboStore);
+    configDataSourceBinds() {
+        const form = this.dataSourceChartBindForm;
+        const coonChart = this.vm.get('coonChart');
+        form.mask();
+        this.lookup('SampleChart').getDataSourceData(coonChart, coonChart.parameters).then((data) => {
+            if (data && Array.isArray(data.list) && data.list.length > 0) {
+                this.vm.set('rows', data.list);
+                form.links.grid.getStore().loadData(data.list);
+            } else {
+                form.links.grid.getStore().removeAll();
+            }
+        }).catch((error) => {
+            Coon.log.error('getDataSourceData', error);
+        }).finally(() => {
+            form.unmask();
+        });
     },
 
-    clearFieldset() {
-        const vm = this.getViewModel();
-        if (!vm.get('isInit')) {
-            vm.set('coonChart.fieldset', {});
-            vm.set('coonChart.fieldDefaults', {});
-            this.getView().down('BaseChart').clearChart();
-        }
+    rendererComboValues(value, metaData, record) {
+        const editor = metaData.column && metaData.column.getEditor && metaData.column.getEditor();
+        editor.setValue(value);
+        return value && editor.getVisibleValue() || record.get('name');
     },
 
-    onChangeDataSourceConfig() {
-        const vm = this.getViewModel();
-        const fieldset = vm.get('coonChart.fieldset');
-        const entries = Object.entries(fieldset).reduce((acc, [field, val]) => {
-            if (val === 'serie') {
-                acc[val] = acc[val] || [];
-                acc[val].push(field);
-            }
-            if (val === 'x' || val === 'y' || val === 'legend') {
-                acc[val] = field;
-            }
-            return acc;
-        }, {});
-        const config = this.setChartConfig(entries);
-        const fieldAlerts = {};
-        if (config) {
-            this.lookup('SampleChart').setChartData(config, fieldAlerts);
-            vm.set('fieldAlerts', fieldAlerts);
-            vm.set('isInit', false);
+    clearBindForm() {
+        if (!this.vm.get('isInit')) {
+            this.vm.set('coonChart.config', this.lookup('SampleChart').getChartConfig(this.vm.get('coonChart.chartType')));
+            this.dataSourceChartBindForm.links.form.getStore().removeAll();
+            this.getView().down('BaseChart').clearChart();
         }
-        Coon.log.debug('onChangeDataSourceConfig.config', config);
     },
 
-    setChartConfig(entries) {
-        const vm = this.getViewModel();
-        const coonChart = vm.get('coonChart');
-        const axisField = entries.x || entries.y || entries.legend;
-        const config = Ext.apply(this.lookup('SampleChart').getChartConfig(coonChart.chartType), {
-            fieldDefaults: coonChart.fieldDefaults,
-            rows: vm.get('rows').map((item) => (Object.assign({}, item))),
-            serieFields: entries.serie,
-            // serieConfig: {
-            //     name: '',
-            //     type: coonChart.chartType,
-            // },
-            axisField: axisField,
-            axisName: coonChart.chartType === 'bar' && vm.get(`coonChart.fieldset.${axisField}`),
-            // isSettingAxisData: coonChart.chartType === 'bar',
+    addHandler() {
+        this.dataSourceChartBindForm.links.form.getStore().add({});
+    },
 
-        });
-        if (!(config.axisField && config.serieFields && config.serieFields.length)) {
+    deleteHandler() {
+        const record = this.dataSourceChartBindForm.links.form.getSelection()[0];
+        if (!record) {
             return;
         }
-        vm.set('coonChart.config', config);
-        return config;
+        this.dataSourceChartBindForm.links.form.getStore().remove(record);
     },
 
-    onChangeSourceType(_, value) {
-        if (!value) {
+    showCoonChartHandler() {
+        if (!this.vm.get('rows')) {
+            Ext.Msg.alert('Сообщение системы', 'Для отображения предпросмотра диаграммы необходимо сначала загрузить данные');
             return;
         }
-        const vm = this.getViewModel();
-        vm.set('coonChart.sourceType', value.sourceType);
-    },
-
-    configDataSourceBinds() {
-        const vm = this.getViewModel();
-        const form = this.getView().down('DataSourceChartBindForm');
-        const coonChart = vm.get('coonChart');
-        form.mask();
-        this.getView().down('BaseChart').clearChart();
-        coonChart.reportSourceId && this.getReportFieldsData(coonChart.reportSourceId).then((response) => {
-            response ? form.loadReportFields(response.fields) : form.links.form.removeAll();
-        }).catch((error) => {
-            Coon.log.error('getReportFieldsData', error);
-        });
-        this.lookup('SampleChart').getDataSourceData(coonChart, coonChart.parameters).then((data) => {
-            if (data && Array.isArray(data.list) && data.list.length > 0) {
-                vm.set('rows', data.list);
-                form.loadData(data.list);
-            } else {
-                form.links.grid.getStore().removeAll();
+        const me = this;
+        const store = this.dataSourceChartBindForm.links.form.getStore();
+        const coonChart = this.vm.get('coonChart');
+        const valueConfig = [];
+        const categoryConfig = [];
+        const legendConfig = [];
+        const serieConfig = [];
+
+        store.queryBy((record) => {
+            const reportFieldStoreRecord = me.vm.get('reportFieldStore').find((el) => el.reportFieldCd === record.get('reportField'));
+            const config = record.get('additionalConfig') && JSON5.parse(record.get('additionalConfig')) || {};
+            const type = record.get('axisType');
+            let arrayForPush = type === 'valueField' && valueConfig ||
+                type === 'categoryField' && categoryConfig ||
+                type === 'legend' && legendConfig;
+            if (type === 'serie') {
+                arrayForPush = serieConfig;
             }
-            form.unmask();
-        }).catch((error) => {
-            form.unmask();
-            Coon.log.error('getDataSourceData', error);
+            arrayForPush && arrayForPush.push({
+                axisType: type,
+                reportField: record.get('reportField'),
+                name: reportFieldStoreRecord && reportFieldStoreRecord.description || record.get('reportField'),
+                defaultValue: record.get('defaultValue'),
+                additionalConfig: config,
+            });
         });
+        const config = {
+            rows: this.vm.get('rows').map((item) => (Object.assign({}, item))),
+            chartType: coonChart.chartType,
+            valueConfig: valueConfig,
+            categoryConfig: categoryConfig,
+            legendConfig: legendConfig,
+            serieConfig: serieConfig,
+            categoryLineY: this.vm.get('coonChart.categoryLineY'),
+        };
+        this.vm.set('coonChart.config', config);
+        const fieldAlerts = {};
+        this.lookup('SampleChart').setChartData(config, fieldAlerts);
+        this.vm.set('fieldAlerts', fieldAlerts);
+        this.vm.set('isInit', false);
+        Coon.log.debug('showCoonChartHandler.config', config);
     },
 
     getReportFieldsData(reportId) {
@@ -194,72 +181,43 @@ Ext.define('Coon.chart.editor.CoonChartEditorController', {
         return [...commandSet.values()].sort().map((el) => ({name: el, value: el}));
     },
 
-    setDisabledLoadButton(fieldset) {
-        if (!fieldset) {
-            return;
-        }
-        const fieldsetProps = Object.values(fieldset);
-        const enableLoadDataBtn = fieldsetProps.find((val) => val === 'x' || val === 'y' || val === 'legend') &&
-                                fieldsetProps.find((val) => val === 'serie');
-        this.getViewModel().set('disableLoadDataBtn', !enableLoadDataBtn);
-    },
-
-    checkDuplicateAxis(combo, newValue) {
-        const vm = this.getViewModel();
-        const newValueData = combo.getStore().findRecord('value', newValue);
-        if (!newValue || newValueData && !newValueData.get('isUnique')) {
-            return;
-        }
-        const fieldset = vm.get('coonChart.fieldset');
-        fieldset && Object.entries(fieldset).forEach((arr) => {
-            if (arr[1] === newValue && combo.itemId !== arr[0]) {
-                this.lookup(arr[0]) && this.lookup(arr[0]).reset();
-            }
-        });
-    },
-
-    setParams() {
-        const vm = this.getViewModel();
-        const coonChart = vm.get('coonChart');
-        coonChart.propertyData = {
+    createUiElement() {
+        const coonChart = this.vm.get('coonChart');
+        const coonChartConfig = coonChart.config;
+        const propertyData = {
             reportSourceId: coonChart.reportSourceId,
             commandSourceId: coonChart.commandSourceId,
             sourceType: coonChart.sourceType,
             chartType: coonChart.chartType,
-            fieldDefaults: coonChart.fieldDefaults,
-            fieldset: coonChart.fieldset,
-            axisField: coonChart.config.axisField,
-            serieFields: coonChart.config.serieFields,
-            serieConfig: coonChart.config.serieConfig,
-            legend: coonChart.config.legend,
+            categoryConfig: coonChartConfig && coonChartConfig.categoryConfig,
+            valueConfig: coonChartConfig && coonChartConfig.valueConfig,
+            legendConfig: coonChartConfig && coonChartConfig.legendConfig,
+            serieConfig: coonChartConfig && coonChartConfig.serieConfig,
+            categoryLineY: coonChart.categoryLineY,
         };
         return {
             id: coonChart.id,
             description: coonChart.description,
             xtype: 'CoonChart',
-            propertyData: JSON.stringify(coonChart.propertyData),
+            propertyData: JSON.stringify(propertyData),
         };
     },
 
     async onSubmitCoonChart() {
-        const vm = this.getViewModel();
-        // vm.set('coonChart.propertyData', JSON.stringify(coonChart.propertyData));
         const validation = await this.validate();
-        if (validation.state) {
-            // const commandName = vm.get('mode') === 'EDIT' ? 'SaveUIElementCommand' : 'AddUIElementCommand';
+        if (validation && validation.state) {
             const command = Ext.create('command.SaveUIElementCommand', {activeComponent: this.getView()});
             command.on('complete', function(coonChartBean) {
-                vm.set('editorMode', 'edit');
+                this.vm.set('editorMode', 'edit');
             }, this);
-            command.execute(this.setParams());
+            command.execute(this.createUiElement());
         } else {
             Ext.Msg.alert('Сообщение системы', validation.context);
         }
     },
 
     async validate() {
-        const vm = this.getViewModel();
-        const coonChart = vm.get('coonChart');
+        const coonChart = this.vm.get('coonChart');
         const state = coonChart && coonChart.id && coonChart.description;
         try {
             const validSource = await this.lookup('SampleChart').getDataSourceData(coonChart, coonChart.parameters);

package/src/chart/editor/DataSourceChartBindForm.js

@@ -9,30 +9,111 @@ Ext.define('Coon.chart.editor.DataSourceChartBindForm', {
 
     items: [
         {
-            xtype: 'panel',
-            title: 'привязка данных к диаграмме',
+            xtype: 'grid',
+            title: 'Привязка данных к диаграмме',
             itemId: 'form',
-            layout: {
-                type: 'vbox',
-                align: 'stretch',
-            },
-            scrollable: 'y',
+            reference: 'linksForm',
             collapsible: true,
-            buttons: [
+            height: 200,
+            resizable: {
+                handles: 's',
+                pinned: true,
+            },
+            plugins: [
+                {ptype: 'cellediting', clicksToEdit: 1}
+            ],
+            store: {
+                type: 'json',
+                data: [],
+            },
+            tbar: {
+                items: [
+                    {
+                        text: 'Добавить',
+                        handler: 'addHandler',
+                    },
+                    {
+                        text: 'Удалить',
+                        handler: 'deleteHandler',
+                        bind: {
+                            disabled: '{!linksForm.selection}',
+                        },
+                    }
+                ],
+            },
+            columns: [
                 {
-                    text: 'Применить',
-                    itemId: 'loadDataBtn',
-                    disabled: true,
-                    bind: {
-                        disabled: '{disableLoadDataBtn}',
+                    header: 'Тип данных',
+                    dataIndex: 'axisType',
+                    flex: 1,
+                    renderer: 'rendererComboValues',
+                    editor: {
+                        xtype: 'BaseComboBox',
+                        queryMode: 'local',
+                        allowBlank: false,
+                        displayField: 'name',
+                        valueField: 'value',
+                        store: {
+                            fields: ['name', 'value'],
+                            data: [
+                                {name: 'ось категорий', value: 'categoryField'},
+                                {name: 'ось значений', value: 'valueField'},
+                                {name: 'серия значений', value: 'serie'},
+                                {name: 'legend', value: 'legend'}
+                            ],
+                        },
+                    },
+                },
+                {
+                    header: 'Поле репорта',
+                    dataIndex: 'reportField',
+                    flex: 1,
+                    renderer: 'rendererComboValues',
+                    editor: {
+                        xtype: 'BaseComboBox',
+                        loadOnRender: false,
+                        allowBlank: false,
+                        forceSelection: true,
+                        displayField: 'description',
+                        valueField: 'reportFieldCd',
+                        disableOnEmptyStore: true,
+                        bind: {
+                            store: '{reportFieldStore}',
+                        },
                     },
+                },
+                {
+                    text: 'Значение по умолчанию<br>(если получили пустое)',
+                    dataIndex: 'defaultValue',
+                    flex: 1,
+                    xtype: 'hintColumn',
+                    editor: {
+                        xtype: 'textfield',
+                    },
+                },
+                {
+                    text: 'Доп.конфиг в формате:<br>{св-во1:"значение1",св-во2:"значение2"}',
+                    dataIndex: 'additionalConfig',
+                    flex: 2,
+                    xtype: 'hintColumn',
+                    editor: {
+                        xtype: 'textfield',
+                    },
+                },
+                {
+                    text: 'Уведомление о некорректных<br>данных',
+                    dataIndex: 'alert',
+                    flex: 1,
+                    xtype: 'hintColumn',
                 }
             ],
         },
         {
             xtype: 'grid',
-            title: 'показаны первые 100 строк',
+            title: 'Показаны первые 100 строк',
             layout: 'fit',
+            itemId: 'reportData',
+            flex: 1,
             store: [],
             columns: [],
             scrollable: true,
@@ -42,112 +123,9 @@ Ext.define('Coon.chart.editor.DataSourceChartBindForm', {
     initComponent(...args) {
         this.callParent(...args);
         this.links = {
-            grid: this.down('grid'),
-            form: this.down('panel#form'),
+            grid: this.down('grid#reportData'),
+            form: this.down('grid#form'),
         };
     },
 
-    loadReportFields(data) {
-        // const fields = data.map((r) => r.description);
-        this.links.form.removeAll();
-        data.forEach((field) => {
-            this.links.form.add({
-                xtype: 'panel',
-                margin: 4,
-                flex: 1,
-                layout: {
-                    type: 'hbox',
-                    align: 'bottom',
-                    pack: 'center',
-                },
-                items: [
-                    {xtype: 'displayfield', value: field.description, width: 130, fieldStyle: 'text-align: right'},
-                    {
-                        xtype: 'combo',
-                        itemId: field.reportFieldCd,
-                        maxWidth: 350,
-                        reference: field.reportFieldCd,
-                        flex: 1,
-                        displayField: 'name',
-                        valueField: 'value',
-                        labelAlign: 'top',
-                        // store: {
-                        //     fields: ['name', 'value'],
-                        //     data: [
-                        //         {name: 'ось X', value: 'x'},
-                        //         {name: 'ось Y', value: 'y'},
-                        //         {name: 'серия значений(данные графика)', value: 'serie'}
-                        //     ],
-                        // },
-                        bind: {
-                            value: `{coonChart.fieldset.${field.reportFieldCd}}`,
-                            store: '{comboStore}',
-                        },
-                        listeners: {
-                            change: 'checkDuplicateAxis',
-                        },
-                        triggers: {
-                            reset: {
-                                cls: 'x-fa fa-times',
-                                handler(combo) {
-                                    combo.reset();
-                                },
-                            },
-                        },
-                    },
-                    // {
-                    //     xtype: 'textfield',
-                    //     itemId: `${field}_radius`,
-                    //     fieldLabel: 'radius',
-                    //     tooltip: 'Радиус',
-                    //     width: 100,
-                    //     hidden: true,
-                    //     bind: {
-                    //         value: `{radius.${field}}`,
-                    //         hidden: `{coonChart.fieldset.${field} !== "serie" && chartType !== "pie"}`,
-                    //     },
-                    //     listeners: {
-                    //         disable: function(field) {
-                    //             field.reset();
-                    //         },
-                    //     },
-                    // },
-                    {
-                        xtype: 'textfield',
-                        itemId: `${field.reportFieldCd}_defval`,
-                        fieldLabel: 'default',
-                        tooltip: 'значение по умолчанию(если получили пустое)',
-                        width: 100,
-                        disabled: true,
-                        bind: {
-                            value: `{coonChart.fieldDefaults.${field.reportFieldCd}}`,
-                            disabled: `{!coonChart.fieldset.${field.reportFieldCd}}`,
-                        },
-                        listeners: {
-                            disable: function(field) {
-                                field.reset();
-                            },
-                        },
-                    },
-                    {
-                        xtype: 'displayfield',
-                        itemId: `${field.reportFieldCd}_alertMsg`,
-                        fieldStyle: {
-                            color: 'red',
-                        },
-                        tooltip: 'уведомление о некорректных данных',
-                        flex: 1,
-                        bind: {
-                            value: `{fieldAlerts.${field.reportFieldCd}}`,
-                        },
-                    }
-                ],
-            });
-        });
-        this.links.grid.reconfigure(null, data.map((key) => ({dataIndex: `${key.reportFieldCd}`, text: `${key.description}`, flex: 1})));
-    },
-
-    loadData(rows) {
-        this.links.grid.getStore().loadData(rows);
-    },
 });

package/src/report/component/ReportPanel.js

@@ -302,6 +302,32 @@ Ext.define('Coon.report.component.ReportPanel', {
         return undefined;
     },
 
+    loadFakeData(len = 1000) {
+        if (!this.isConfigured) {
+            return;
+        }
+        const getValue = (type) => {
+            const strGen = Ext.create('Ext.data.identifier.Uuid');
+            if (type === 'number') {
+                return Math.random() * 99999;
+            }
+            if (type === 'boolean') {
+                return Math.random() > 0.5;
+            }
+            if (type === 'date') {
+                return new Date(Math.ceil(Math.random() * 2e12));
+            }
+            return strGen.generate();
+        };
+        const columns = this.grid.getColumns().filter((column) => !column.hidden && !column.ignoreExport);
+        const getRow = () => columns.reduce((acc, {dataIndex, type}) => {
+            acc[dataIndex] = getValue(type);
+            return acc;
+        }, {id: Ext.id(false, 'fakeid-')});
+        const data = [...Array(len)].map(getRow);
+        this.grid.getStore().loadData(data);
+    },
+
     initComponent: function() {
         this.gridProperties = this.gridProperties || {};
         this.centerProperties = this.centerProperties || {};
@@ -557,6 +583,7 @@ Ext.define('Coon.report.component.ReportPanel', {
         command.on('complete', function(response) {
             response.plugins = this.preprocessPlugins(response.plugins);
             this.build(response);
+            this.isConfigured = true;
             this.fireEvent('configured', response, this);
             this.grid.fireEvent('configured', response, this);
         }, this);

package/src/report/plugin/grid/FilterFormEditingPlugin.js

@@ -8,7 +8,7 @@ Ext.define('Coon.report.plugin.grid.FilterFormEditingPlugin', {
     /* description: 'Отключает возможность выделения строк',
     tags: ['Фильтры'],*/
     init: function(filterPanel) {
-        filterPanel.on('render', this.onRenderFilterPanel, this);
+        filterPanel.on('added', this.onRenderFilterPanel, this);
         this.filterPanel = filterPanel;
         filterPanel.removeAll();
         filterPanel.add({

package/src/report/plugin/grid/ToolbarButtonPlugin.js

@@ -13,7 +13,7 @@ Ext.define('Coon.report.plugin.grid.ToolbarButtonPlugin', {
      * добавить кнопку на панель или не стоит:)
      */
     addButtonOnToolbar: true,
-
+    addToContextMenu: false,
     addToColumnMenu: false,
     /**
      * text on button.If undefined button shows without text
@@ -53,7 +53,6 @@ Ext.define('Coon.report.plugin.grid.ToolbarButtonPlugin', {
         this.separateAction = new Ext.Button(Ext.apply({
             isPlgBtn: true,
             text: this.buttonText,
-            tooltip: this.tooltip,
             disabled: this.isCreatedButtonDisabled(),
             iconCls: this.buttonIconCls,
             handler: Ext.bind(this.handler, this),
@@ -72,9 +71,26 @@ Ext.define('Coon.report.plugin.grid.ToolbarButtonPlugin', {
         if (this.addToColumnMenu) {
             this.component.getStore().on('load', this.addColumnMenuItem, this, {single: true});
         }
+        if (this.addToContextMenu && this.component.contextMenu) {
+            this.component.getStore().on('load', this.addToContextMenuHandler, this, {single: true});
+        }
         this.setActionColumn();
     },
 
+    addToContextMenuHandler: function(config) {
+        const menu = this.component.contextMenu;
+        if (this.buttonUI && !config['ui']) {
+            config['ui'] = this.buttonUI;
+        }
+        menu && menu.add(new Ext.menu.Item({
+            text: this.buttonText,
+            iconCls: this.buttonIconCls,
+            ui: this.buttonUI,
+            handler: Ext.Function.createSequence(Ext.bind(this.handler, this), function() {
+                menu.hide();
+            }),
+        }));
+    },
     setActionColumn: function() {
         if (this.columnExists || !(this.addActionColumn || this.addActionColumnNew)) {
             return;

package/src/report/plugin/grid/ToolbarItemPlugin.js

@@ -104,6 +104,7 @@ Ext.define('Coon.report.plugin.grid.ToolbarItemPlugin', {
                 position: this.position,
                 sortSequence: this.sortSequence,
                 pType: this.pluginConfig ? this.pluginConfig.ptype : '',
+                itemId: this.pluginId,
             };
             if (!this.position || isNaN(Number(this.position)) || Number(this.position) <= 0) {
                 cfg.position = this.sortSequence;

package/src/version.js

@@ -1,4 +1,4 @@
 Ext.define('Coon.version', {
     singleton: true,
-    number: '2.8.21',
+    number: '2.8.23',
 });