From fb683cb086f9397e875dd2ee91d8dbe45aa4e53f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 30 Jun 2020 17:35:10 +0300 Subject: [PATCH 01/17] [SSE] Change chart settings: for Bug 43763 --- .../app/template/ChartSettingsDlg.template | 44 +++- .../main/app/view/ChartSettingsDlg.js | 235 +++++++++++++++++- 2 files changed, 262 insertions(+), 17 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index afad9d9856..780d9ec956 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -9,23 +9,57 @@ -
+ +
+ + + + + + + + + + + + + + + + + +
- +
-
+
+
+ +
+
+ + + +
+
+
+
+
+
- -
+ +
+
+
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 4729d53c3e..f981fa73e4 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -40,12 +40,34 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template', 'common/main/lib/view/AdvancedSettingsWindow', + 'common/main/lib/component/ListView', 'common/main/lib/component/CheckBox', 'common/main/lib/component/InputField', 'spreadsheeteditor/main/app/view/CellRangeDialog' ], function (contentTemplate) { 'use strict'; + var _CustomItem = Common.UI.DataViewItem.extend({ + initialize : function(options) { + Common.UI.BaseView.prototype.initialize.call(this, options); + + var me = this; + + me.template = me.options.template || me.template; + + me.listenTo(me.model, 'change:sort', function() { + me.render(); + me.trigger('change', me, me.model); + }); + me.listenTo(me.model, 'change:selected', function() { + var el = me.$el || $(me.el); + el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected')); + me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected')); + }); + me.listenTo(me.model, 'remove', me.remove); + } + }); + SSE.Views.ChartSettingsDlg = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 322, @@ -58,7 +80,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' _.extend(this.options, { title: this.textTitle, items: [ - {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData}, + {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textType}, + {panelId: 'id-chart-settings-dlg-data', panelCaption: this.textData}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis}, @@ -728,8 +751,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } }, this)); - this.btnsCategory[2].on('click', _.bind(this.onVCategoryClick, this)); - this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, this)); + this.btnsCategory[3].on('click', _.bind(this.onVCategoryClick, this)); + this.btnsCategory[4].on('click', _.bind(this.onHCategoryClick, this)); // Sparklines this.btnSparkType = new Common.UI.Button({ @@ -970,6 +993,111 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' me.isAltDescChanged = true; }); + // Chart data + this.seriesList = new Common.UI.ListView({ + el: $('#chart-dlg-series-list', this.$window), + store: new Common.UI.DataViewStore(), + emptyText: '', + scrollAlwaysVisible: true, + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '', + '
', + '
<%= Common.Utils.String.htmlEncode(value) %>
', + '
', + '
' + ].join('')) + }); + this.seriesList.createNewItem = function(record) { + return new _CustomItem({ + template: this.itemTemplate, + model: record + }); + }; + this.seriesList.on({ + 'item:change': this.onItemChanged.bind(this), + 'item:add': this.onItemChanged.bind(this), + 'item:select': this.onCellCheck.bind(this) + }); + this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); + this.seriesList.createNewItem = function(record) { + return new _CustomItem({ + template: this.itemTemplate, + model: record + }); + }; + this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); + + this.btnAdd = new Common.UI.Button({ + el: $('#chart-dlg-btn-add') + }); + // this.btnAdd.on('click', _.bind(this.onAddSeries, this, false)); + + this.btnDelete = new Common.UI.Button({ + el: $('#chart-dlg-btn-delete') + }); + // this.btnDelete.on('click', _.bind(this.onDeleteSeries, this)); + + this.btnEdit = new Common.UI.Button({ + el: $('#chart-dlg-btn-edit') + }); + // this.btnEdit.on('click', _.bind(this.onEditSeries, this, false)); + + this.btnUp = new Common.UI.Button({ + parentEl: $('#chart-dlg-btn-up'), + cls: 'btn-toolbar', + iconCls: 'caret-up', + hint: this.textUp + }); + // this.btnUp.on('click', _.bind(this.onMoveClick, this, true)); + + this.btnDown = new Common.UI.Button({ + parentEl: $('#chart-dlg-btn-down'), + cls: 'btn-toolbar', + iconCls: 'caret-down', + hint: this.textDown + }); + // this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); + + this.btnSwitch = new Common.UI.Button({ + el: $('#chart-dlg-btn-switch') + }); + // this.btnSwitch.on('click', _.bind(this.onSwitch, this)); + + this.categoryList = new Common.UI.ListView({ + el: $('#chart-dlg-category-list', this.$window), + store: new Common.UI.DataViewStore(), + emptyText: '', + scrollAlwaysVisible: true, + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '', + '
', + '
<%= Common.Utils.String.htmlEncode(value) %>
', + '
', + '
' + ].join('')) + }); + this.categoryList.on({ + 'item:change': this.onItemChanged.bind(this), + 'item:add': this.onItemChanged.bind(this), + 'item:select': this.onCellCheck.bind(this) + }); + this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category'); + + this.btnEditCategory = new Common.UI.Button({ + el: $('#chart-dlg-btn-category-edit') + }); + // this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false)); + this.afterRender(); }, @@ -979,23 +1107,24 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.setTitle((this.isChart) ? this.textTitle : this.textTitleSparkline); if (this.isChart) { - this.btnsCategory[4].setVisible(false); this.btnsCategory[5].setVisible(false); + this.btnsCategory[6].setVisible(false); } else { this.btnsCategory[0].setVisible(false); this.btnsCategory[1].setVisible(false); this.btnsCategory[2].setVisible(false); this.btnsCategory[3].setVisible(false); - this.btnsCategory[6].setVisible(false); + this.btnsCategory[4].setVisible(false); this.btnsCategory[7].setVisible(false); + this.btnsCategory[8].setVisible(false); } if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); this.setActiveCategory((value!==null) ? parseInt(value) : 0); value = this.getActiveCategory(); - if (value==2) this.onVCategoryClick(); - else if (value==3) this.onHCategoryClick(); + if (value==3) this.onVCategoryClick(); + else if (value==4) this.onHCategoryClick(); } }, @@ -1038,8 +1167,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } value = (type == Asc.c_oAscChartTypeSettings.pie || type == Asc.c_oAscChartTypeSettings.doughnut || type == Asc.c_oAscChartTypeSettings.pie3d); - this.btnsCategory[2].setDisabled(value); this.btnsCategory[3].setDisabled(value); + this.btnsCategory[4].setDisabled(value); this.cmbHorShow.setDisabled(value); this.cmbVertShow.setDisabled(value); this.cmbHorTitle.setDisabled(value); @@ -1061,8 +1190,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' value = (type == Asc.c_oAscChartTypeSettings.hBarNormal || type == Asc.c_oAscChartTypeSettings.hBarStacked || type == Asc.c_oAscChartTypeSettings.hBarStackedPer || type == Asc.c_oAscChartTypeSettings.hBarNormal3d || type == Asc.c_oAscChartTypeSettings.hBarStacked3d || type == Asc.c_oAscChartTypeSettings.hBarStackedPer3d); - this.btnsCategory[2].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert'; - this.btnsCategory[3].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor'; + this.btnsCategory[3].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert'; + this.btnsCategory[4].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor'; }, updateDataLabels: function(chartType, labelPos) { @@ -1610,7 +1739,80 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } }, - show: function() { + onItemChanged: function (view, record) { + var state = record.model.get('check'); + if ( state == 'indeterminate' ) + $('input[type=checkbox]', record.$el).prop('indeterminate', true); + else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false}); + }, + + onCellCheck: function (listView, itemView, record) { + if (this.checkCellTrigerBlock) + return; + + var target = '', isLabel = false, bound = null; + + var event = window.event ? window.event : window._event; + if (event) { + target = $(event.currentTarget).find('.list-item'); + + if (target.length) { + bound = target.get(0).getBoundingClientRect(); + var _clientX = event.clientX*Common.Utils.zoom(), + _clientY = event.clientY*Common.Utils.zoom(); + if (bound.left < _clientX && _clientX < bound.right && + bound.top < _clientY && _clientY < bound.bottom) { + isLabel = true; + } + } + + if (isLabel || event.target.className.match('checkbox')) { + this.updateCellCheck(listView, record); + + _.delay(function () { + listView.$el.find('.listview').focus(); + }, 100, this); + } + } + }, + + onListKeyDown: function (type, e, data) { + var record = null, listView = (type=='series') ? this.seriesList : this.categoryList; + + if (listView.disabled) return; + if (_.isUndefined(undefined)) data = e; + + if (data.keyCode == Common.UI.Keys.SPACE) { + data.preventDefault(); + data.stopPropagation(); + + this.updateCellCheck(listView, listView.getSelectedRec()); + } else if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { + // this.onDeleteSeries(); + } else { + Common.UI.DataView.prototype.onKeyDown.call(listView, e, data); + } + }, + + updateCellCheck: function (listView, record) { + if (record && listView) { + record.set('check', !record.get('check')); + // listView.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true}); + } + }, + + onSelectSeries: function(lisvView, itemView, record) { + this.updateMoveButtons(); + }, + + updateMoveButtons: function() { + var rec = this.seriesList.getSelectedRec(), + index = rec ? this.seriesList.store.indexOf(rec) : -1; + this.btnUp.setDisabled(index<1); + this.btnDown.setDisabled(index<0 || index==this.seriesList.store.length-1); + }, + + show: function() { Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); var me = this; @@ -1750,7 +1952,16 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' textSnap: 'Cell Snapping', textAbsolute: 'Don\'t move or size with cells', textOneCell: 'Move but don\'t size with cells', - textTwoCell: 'Move and size with cells' + textTwoCell: 'Move and size with cells', + textSeries: 'Legend Entries (Series)', + textAdd: 'Add', + textEdit: 'Edit', + textDelete: 'Remove', + textSwitch: 'Switch Row/Column', + textCategory: 'Horizontal (Category) Axis Labels', + textUp: 'Up', + textDown: 'Down', + textData: 'Data' }, SSE.Views.ChartSettingsDlg || {})); }); From 29bb768132547282d01e559dc9a94c070d51e7f0 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 2 Jul 2020 18:10:27 +0300 Subject: [PATCH 02/17] [SSE] Chart settings: add dialog for changing series and labels data --- .../main/app/view/ChartDataRangeDialog.js | 222 ++++++++++++++++++ .../main/app/view/ChartSettingsDlg.js | 53 ++++- 2 files changed, 271 insertions(+), 4 deletions(-) create mode 100644 apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js new file mode 100644 index 0000000000..8d83f7075e --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -0,0 +1,222 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ +/** + * ChartDataRangeDialog.js + * + * Created by Julia Radzhabova on 02.07.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + + +if (Common === undefined) + var Common = {}; + +define([ + 'common/main/lib/component/InputField', + 'common/main/lib/component/Window' +], function () { 'use strict'; + + SSE.Views.ChartDataRangeDialog = Common.UI.Window.extend(_.extend({ + options: { + type: 0, // 0 - category, 1 - series + width : 350, + cls : 'modal-dlg', + buttons: ['ok', 'cancel'] + }, + + initialize : function(options) { + this.type = options.type || 0; + + _.extend(this.options, { + title: this.type==1 ? this.txtTitleSeries : this.txtTitleCategory + }, options); + + this.template = [ + '
', + '', + '', + '', + '', + '', + '', + '', + '', + '<% if (type==1) { %>', + '', + '', + '', + '', + '', + '', + '', + '<% } %>', + '
', + '', + '
', + '
', + '		', + '', + '
', + '', + '
', + '
', + '		', + '', + '
', + '
' + ].join(''); + + this.options.tpl = _.template(this.template)(this.options); + + Common.UI.Window.prototype.initialize.call(this, this.options); + }, + + render: function() { + Common.UI.Window.prototype.render.call(this); + + var $window = this.getChild(), + me = this; + + me.inputRange1 = new Common.UI.InputFieldBtn({ + el: $('#id-dlg-chart-range-range1'), + style: '100%', + textSelectData: 'Select data', + validateOnChange: true, + validateOnBlur: false + }).on('changed:after', function(input, newValue, oldValue, e) { + }).on('changing', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + // me.onInputChanging(input, newValue, oldValue); + }).on('button:click', _.bind(this.onSelectData, this)); + this.lblRange1 = $window.find('#id-dlg-chart-range-lbl1'); + + me.inputRange2 = new Common.UI.InputFieldBtn({ + el: $('#id-dlg-chart-range-range2'), + style: '100%', + textSelectData: 'Select data', + validateOnChange: true, + validateOnBlur: false + }).on('changed:after', function(input, newValue, oldValue, e) { + }).on('changing', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + // me.onInputChanging(input, newValue, oldValue); + }).on('button:click', _.bind(this.onSelectData, this)); + this.lblRange2 = $window.find('#id-dlg-chart-range-lbl2'); + + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); + + _.defer(function(){ + me.inputRange1.cmpEl.find('input').focus(); + }, 10); + }, + + onPrimary: function() { + this._handleInput('ok'); + return false; + }, + + setSettings: function(settings) { + var me = this; + this.api = settings.api; + }, + + getSettings: function () { + return {name: this.inputRange1.getValue(), value: this.inputRange2.getValue()}; + }, + + onSelectData: function(input) { + var me = this; + if (me.api) { + var changedValue = input.getValue(); + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + changedValue = dlg.getSettings(); + } + }; + + var win = new SSE.Views.CellRangeDialog({ + allowBlank: true, + handler: handlerDlg + }).on('close', function() { + input.setValue(changedValue); + // me.onInputChanging(input); + me.show(); + _.delay(function(){ + me._noApply = true; + input.cmpEl.find('input').focus(); + me._noApply = false; + },1); + }); + + var xy = me.$window.offset(); + me.hide(); + win.show(xy.left + 65, xy.top + 77); + win.setSettings({ + api : me.api, + range : !_.isEmpty(input.getValue()) ? input.getValue() : '', + type : Asc.c_oAscSelectionDialogType.Chart + }); + } + }, + + onBtnClick: function(event) { + this._handleInput(event.currentTarget.attributes['result'].value); + }, + + _handleInput: function(state) { + if (this.options.handler) { + if (state == 'ok') { + if (this.inputRange1.checkValidate() !== true) + return; + if (type==1 && this.inputRange2.checkValidate() !== true) + return; + } + if (this.options.handler.call(this, this, state)) + return; + } + + this.close(); + }, + + txtTitleSeries: 'Edit Series', + txtTitleCategory: 'Axis Labels', + txtSeriesName: 'Series name', + txtValues: 'Values', + txtAxisLabel: 'Axis label range', + txtChoose: 'Choose range', + textSelectData: 'Select data', + txtEmpty : 'This field is required', + txtInvalidRange: 'ERROR! Invalid cells range' + }, SSE.Views.ChartDataRangeDialog || {})) +}); diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index f981fa73e4..4c65ee5319 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -43,7 +43,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' 'common/main/lib/component/ListView', 'common/main/lib/component/CheckBox', 'common/main/lib/component/InputField', - 'spreadsheeteditor/main/app/view/CellRangeDialog' + 'spreadsheeteditor/main/app/view/CellRangeDialog', + 'spreadsheeteditor/main/app/view/ChartDataRangeDialog' ], function (contentTemplate) { 'use strict'; @@ -1035,7 +1036,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnAdd = new Common.UI.Button({ el: $('#chart-dlg-btn-add') }); - // this.btnAdd.on('click', _.bind(this.onAddSeries, this, false)); + this.btnAdd.on('click', _.bind(this.onAddSeries, this, false)); this.btnDelete = new Common.UI.Button({ el: $('#chart-dlg-btn-delete') @@ -1045,7 +1046,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnEdit = new Common.UI.Button({ el: $('#chart-dlg-btn-edit') }); - // this.btnEdit.on('click', _.bind(this.onEditSeries, this, false)); + this.btnEdit.on('click', _.bind(this.onEditSeries, this, false)); this.btnUp = new Common.UI.Button({ parentEl: $('#chart-dlg-btn-up'), @@ -1096,7 +1097,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnEditCategory = new Common.UI.Button({ el: $('#chart-dlg-btn-category-edit') }); - // this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false)); + this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false)); this.afterRender(); }, @@ -1812,6 +1813,50 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnDown.setDisabled(index<0 || index==this.seriesList.store.length-1); }, + onAddSeries: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(1, true, handlerDlg); + }, + + onEditSeries: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(1, false, handlerDlg); + }, + + onEditCategory: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(0, false, handlerDlg); + }, + + changeDataRange: function(type, add, handlerDlg) { + var me = this; + var win = new SSE.Views.ChartDataRangeDialog({ + type: type, //series + handler: handlerDlg + }).on('close', function() { + me.show(); + }); + + var xy = me.$window.offset(); + me.hide(); + win.show(xy.left + 160, xy.top + 125); + win.setSettings({ + api : me.api + }); + }, + show: function() { Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); From 9f51fc7761865c839c4029b52e3cc439066d1f7b Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Mon, 6 Jul 2020 20:01:11 +0300 Subject: [PATCH 03/17] Revert rev. fb683cb086f9397e875dd2ee91d8dbe45aa4e53f [fb683cb] [SSE] Change chart settings: for Bug 43763 --- .../app/template/ChartSettingsDlg.template | 44 +-- .../main/app/view/ChartSettingsDlg.js | 279 +----------------- 2 files changed, 17 insertions(+), 306 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index 780d9ec956..afad9d9856 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -9,57 +9,23 @@
-
-
+
- - - - - - - - - - - - - - - - - -
- +
-
-
- -
-
- - - -
-
-
-
-
- +
- -
-
- + +
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 4c65ee5319..11c552409d 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -40,7 +40,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template', 'common/main/lib/view/AdvancedSettingsWindow', - 'common/main/lib/component/ListView', 'common/main/lib/component/CheckBox', 'common/main/lib/component/InputField', 'spreadsheeteditor/main/app/view/CellRangeDialog', @@ -48,27 +47,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' ], function (contentTemplate) { 'use strict'; - var _CustomItem = Common.UI.DataViewItem.extend({ - initialize : function(options) { - Common.UI.BaseView.prototype.initialize.call(this, options); - - var me = this; - - me.template = me.options.template || me.template; - - me.listenTo(me.model, 'change:sort', function() { - me.render(); - me.trigger('change', me, me.model); - }); - me.listenTo(me.model, 'change:selected', function() { - var el = me.$el || $(me.el); - el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected')); - me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected')); - }); - me.listenTo(me.model, 'remove', me.remove); - } - }); - SSE.Views.ChartSettingsDlg = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 322, @@ -81,8 +59,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' _.extend(this.options, { title: this.textTitle, items: [ - {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textType}, - {panelId: 'id-chart-settings-dlg-data', panelCaption: this.textData}, + {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis}, @@ -752,8 +729,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } }, this)); - this.btnsCategory[3].on('click', _.bind(this.onVCategoryClick, this)); - this.btnsCategory[4].on('click', _.bind(this.onHCategoryClick, this)); + this.btnsCategory[2].on('click', _.bind(this.onVCategoryClick, this)); + this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, this)); // Sparklines this.btnSparkType = new Common.UI.Button({ @@ -994,111 +971,6 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' me.isAltDescChanged = true; }); - // Chart data - this.seriesList = new Common.UI.ListView({ - el: $('#chart-dlg-series-list', this.$window), - store: new Common.UI.DataViewStore(), - emptyText: '', - scrollAlwaysVisible: true, - template: _.template(['
'].join('')), - itemTemplate: _.template([ - '
', - '', - '
', - '
<%= Common.Utils.String.htmlEncode(value) %>
', - '
', - '
' - ].join('')) - }); - this.seriesList.createNewItem = function(record) { - return new _CustomItem({ - template: this.itemTemplate, - model: record - }); - }; - this.seriesList.on({ - 'item:change': this.onItemChanged.bind(this), - 'item:add': this.onItemChanged.bind(this), - 'item:select': this.onCellCheck.bind(this) - }); - this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); - this.seriesList.createNewItem = function(record) { - return new _CustomItem({ - template: this.itemTemplate, - model: record - }); - }; - this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); - - this.btnAdd = new Common.UI.Button({ - el: $('#chart-dlg-btn-add') - }); - this.btnAdd.on('click', _.bind(this.onAddSeries, this, false)); - - this.btnDelete = new Common.UI.Button({ - el: $('#chart-dlg-btn-delete') - }); - // this.btnDelete.on('click', _.bind(this.onDeleteSeries, this)); - - this.btnEdit = new Common.UI.Button({ - el: $('#chart-dlg-btn-edit') - }); - this.btnEdit.on('click', _.bind(this.onEditSeries, this, false)); - - this.btnUp = new Common.UI.Button({ - parentEl: $('#chart-dlg-btn-up'), - cls: 'btn-toolbar', - iconCls: 'caret-up', - hint: this.textUp - }); - // this.btnUp.on('click', _.bind(this.onMoveClick, this, true)); - - this.btnDown = new Common.UI.Button({ - parentEl: $('#chart-dlg-btn-down'), - cls: 'btn-toolbar', - iconCls: 'caret-down', - hint: this.textDown - }); - // this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); - - this.btnSwitch = new Common.UI.Button({ - el: $('#chart-dlg-btn-switch') - }); - // this.btnSwitch.on('click', _.bind(this.onSwitch, this)); - - this.categoryList = new Common.UI.ListView({ - el: $('#chart-dlg-category-list', this.$window), - store: new Common.UI.DataViewStore(), - emptyText: '', - scrollAlwaysVisible: true, - template: _.template(['
'].join('')), - itemTemplate: _.template([ - '
', - '', - '
', - '
<%= Common.Utils.String.htmlEncode(value) %>
', - '
', - '
' - ].join('')) - }); - this.categoryList.on({ - 'item:change': this.onItemChanged.bind(this), - 'item:add': this.onItemChanged.bind(this), - 'item:select': this.onCellCheck.bind(this) - }); - this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category'); - - this.btnEditCategory = new Common.UI.Button({ - el: $('#chart-dlg-btn-category-edit') - }); - this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false)); - this.afterRender(); }, @@ -1108,24 +980,23 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.setTitle((this.isChart) ? this.textTitle : this.textTitleSparkline); if (this.isChart) { + this.btnsCategory[4].setVisible(false); this.btnsCategory[5].setVisible(false); - this.btnsCategory[6].setVisible(false); } else { this.btnsCategory[0].setVisible(false); this.btnsCategory[1].setVisible(false); this.btnsCategory[2].setVisible(false); this.btnsCategory[3].setVisible(false); - this.btnsCategory[4].setVisible(false); + this.btnsCategory[6].setVisible(false); this.btnsCategory[7].setVisible(false); - this.btnsCategory[8].setVisible(false); } if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); this.setActiveCategory((value!==null) ? parseInt(value) : 0); value = this.getActiveCategory(); - if (value==3) this.onVCategoryClick(); - else if (value==4) this.onHCategoryClick(); + if (value==2) this.onVCategoryClick(); + else if (value==3) this.onHCategoryClick(); } }, @@ -1168,8 +1039,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } value = (type == Asc.c_oAscChartTypeSettings.pie || type == Asc.c_oAscChartTypeSettings.doughnut || type == Asc.c_oAscChartTypeSettings.pie3d); + this.btnsCategory[2].setDisabled(value); this.btnsCategory[3].setDisabled(value); - this.btnsCategory[4].setDisabled(value); this.cmbHorShow.setDisabled(value); this.cmbVertShow.setDisabled(value); this.cmbHorTitle.setDisabled(value); @@ -1191,8 +1062,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' value = (type == Asc.c_oAscChartTypeSettings.hBarNormal || type == Asc.c_oAscChartTypeSettings.hBarStacked || type == Asc.c_oAscChartTypeSettings.hBarStackedPer || type == Asc.c_oAscChartTypeSettings.hBarNormal3d || type == Asc.c_oAscChartTypeSettings.hBarStacked3d || type == Asc.c_oAscChartTypeSettings.hBarStackedPer3d); - this.btnsCategory[3].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert'; - this.btnsCategory[4].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor'; + this.btnsCategory[2].options.contentTarget = (value) ? 'id-chart-settings-dlg-hor' : 'id-chart-settings-dlg-vert'; + this.btnsCategory[3].options.contentTarget = (value || type == Asc.c_oAscChartTypeSettings.scatter) ? 'id-chart-settings-dlg-vert' : 'id-chart-settings-dlg-hor'; }, updateDataLabels: function(chartType, labelPos) { @@ -1740,124 +1611,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } }, - onItemChanged: function (view, record) { - var state = record.model.get('check'); - if ( state == 'indeterminate' ) - $('input[type=checkbox]', record.$el).prop('indeterminate', true); - else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false}); - }, - - onCellCheck: function (listView, itemView, record) { - if (this.checkCellTrigerBlock) - return; - - var target = '', isLabel = false, bound = null; - - var event = window.event ? window.event : window._event; - if (event) { - target = $(event.currentTarget).find('.list-item'); - - if (target.length) { - bound = target.get(0).getBoundingClientRect(); - var _clientX = event.clientX*Common.Utils.zoom(), - _clientY = event.clientY*Common.Utils.zoom(); - if (bound.left < _clientX && _clientX < bound.right && - bound.top < _clientY && _clientY < bound.bottom) { - isLabel = true; - } - } - - if (isLabel || event.target.className.match('checkbox')) { - this.updateCellCheck(listView, record); - - _.delay(function () { - listView.$el.find('.listview').focus(); - }, 100, this); - } - } - }, - - onListKeyDown: function (type, e, data) { - var record = null, listView = (type=='series') ? this.seriesList : this.categoryList; - - if (listView.disabled) return; - if (_.isUndefined(undefined)) data = e; - - if (data.keyCode == Common.UI.Keys.SPACE) { - data.preventDefault(); - data.stopPropagation(); - - this.updateCellCheck(listView, listView.getSelectedRec()); - } else if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { - // this.onDeleteSeries(); - } else { - Common.UI.DataView.prototype.onKeyDown.call(listView, e, data); - } - }, - - updateCellCheck: function (listView, record) { - if (record && listView) { - record.set('check', !record.get('check')); - // listView.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true}); - } - }, - - onSelectSeries: function(lisvView, itemView, record) { - this.updateMoveButtons(); - }, - - updateMoveButtons: function() { - var rec = this.seriesList.getSelectedRec(), - index = rec ? this.seriesList.store.indexOf(rec) : -1; - this.btnUp.setDisabled(index<1); - this.btnDown.setDisabled(index<0 || index==this.seriesList.store.length-1); - }, - - onAddSeries: function() { - var handlerDlg = function(dlg, result) { - if (result == 'ok') { - var changedValue = dlg.getSettings(); - } - }; - this.changeDataRange(1, true, handlerDlg); - }, - - onEditSeries: function() { - var handlerDlg = function(dlg, result) { - if (result == 'ok') { - var changedValue = dlg.getSettings(); - } - }; - this.changeDataRange(1, false, handlerDlg); - }, - - onEditCategory: function() { - var handlerDlg = function(dlg, result) { - if (result == 'ok') { - var changedValue = dlg.getSettings(); - } - }; - this.changeDataRange(0, false, handlerDlg); - }, - - changeDataRange: function(type, add, handlerDlg) { - var me = this; - var win = new SSE.Views.ChartDataRangeDialog({ - type: type, //series - handler: handlerDlg - }).on('close', function() { - me.show(); - }); - - var xy = me.$window.offset(); - me.hide(); - win.show(xy.left + 160, xy.top + 125); - win.setSettings({ - api : me.api - }); - }, - - show: function() { + show: function() { Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); var me = this; @@ -1997,16 +1751,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' textSnap: 'Cell Snapping', textAbsolute: 'Don\'t move or size with cells', textOneCell: 'Move but don\'t size with cells', - textTwoCell: 'Move and size with cells', - textSeries: 'Legend Entries (Series)', - textAdd: 'Add', - textEdit: 'Edit', - textDelete: 'Remove', - textSwitch: 'Switch Row/Column', - textCategory: 'Horizontal (Category) Axis Labels', - textUp: 'Up', - textDown: 'Down', - textData: 'Data' + textTwoCell: 'Move and size with cells' }, SSE.Views.ChartSettingsDlg || {})); }); From 2e6b31da93ce23472b8f3daa54750a98798b5f5f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Jul 2020 11:45:45 +0300 Subject: [PATCH 04/17] [SSE] Add dialog for selecting chart data --- .../main/app/view/ChartDataDialog.js | 585 ++++++++++++++++++ .../main/app/view/ChartSettings.js | 29 +- 2 files changed, 611 insertions(+), 3 deletions(-) create mode 100644 apps/spreadsheeteditor/main/app/view/ChartDataDialog.js diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js new file mode 100644 index 0000000000..b1af4167aa --- /dev/null +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -0,0 +1,585 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * ChartDataDialog.js + * + * Created by Julia Radzhabova on 06.07.2020 + * Copyright (c) 2020 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'common/main/lib/util/utils', + 'common/main/lib/component/MetricSpinner', + 'common/main/lib/component/ComboBox', + 'common/main/lib/component/ListView', + 'common/main/lib/view/AdvancedSettingsWindow' +], function () { 'use strict'; + + var _CustomItem = Common.UI.DataViewItem.extend({ + initialize : function(options) { + Common.UI.BaseView.prototype.initialize.call(this, options); + + var me = this; + + me.template = me.options.template || me.template; + + me.listenTo(me.model, 'change:sort', function() { + me.render(); + me.trigger('change', me, me.model); + }); + me.listenTo(me.model, 'change:selected', function() { + var el = me.$el || $(me.el); + el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected')); + me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected')); + }); + me.listenTo(me.model, 'remove', me.remove); + } + }); + + SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ + options: { + contentWidth: 370, + height: 490, + buttons: null + }, + + initialize : function(options) { + var me = this; + + _.extend(this.options, { + title: this.textTitle, + template: [ + '
', + '
', + '
', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + '
', + '', + '
', + '
', + '
', + '', + '
', + '
', + '', + '', + '', + '
', + '
', + '
', + '
', + '
', + '', + '
', + '', + '
', + '
', + '', + '
', + '
', + '
', + '
', + '
', + '
', + '', + '
' + ].join('') + }, options); + + this.handler = options.handler; + + Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); + + this._noApply = true; + this._changedProps = null; + + this.api = this.options.api; + this.chartSettings = this.options.chartSettings; + this.dataRangeValid = ''; + this.dataDirect = 0; + this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal; + }, + + render: function() { + Common.Views.AdvancedSettingsWindow.prototype.render.call(this); + var me = this; + + this.txtDataRange = new Common.UI.InputFieldBtn({ + el : $('#chart-dlg-txt-range'), + name : 'range', + style : 'width: 100%;', + btnHint : this.textSelectData, + allowBlank : true, + validateOnChange: true + }); + this.txtDataRange.on('button:click', _.bind(this.onSelectData_simple, this)); + this.txtDataRange.on('changed:after', function(input, newValue, oldValue, e) { + if (newValue !==me.dataRangeValid) { + if (me.isRangeValid()) { + me.dataRangeValid = newValue; + me.txtDataRange.checkValidate(); + me.chartSettings.putRange(me.dataRangeValid); + me.api.asc_editChartDrawingObject(me.chartSettings); + } else { + me.txtDataRange.setValue(me.dataRangeValid); + me.txtDataRange.checkValidate(); + } + } + }); + + // Chart data + this.seriesList = new Common.UI.ListView({ + el: $('#chart-dlg-series-list', this.$window), + store: new Common.UI.DataViewStore(), + emptyText: '', + scrollAlwaysVisible: true, + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '', + '
', + '
<%= Common.Utils.String.htmlEncode(value) %>
', + '
', + '
' + ].join('')) + }); + this.seriesList.createNewItem = function(record) { + return new _CustomItem({ + template: this.itemTemplate, + model: record + }); + }; + this.seriesList.on({ + 'item:change': this.onItemChanged.bind(this), + 'item:add': this.onItemChanged.bind(this), + 'item:select': this.onCellCheck.bind(this) + }); + this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); + this.seriesList.createNewItem = function(record) { + return new _CustomItem({ + template: this.itemTemplate, + model: record + }); + }; + this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); + + this.btnAdd = new Common.UI.Button({ + el: $('#chart-dlg-btn-add') + }); + this.btnAdd.on('click', _.bind(this.onAddSeries, this, false)); + + this.btnDelete = new Common.UI.Button({ + el: $('#chart-dlg-btn-delete') + }); + // this.btnDelete.on('click', _.bind(this.onDeleteSeries, this)); + + this.btnEdit = new Common.UI.Button({ + el: $('#chart-dlg-btn-edit') + }); + this.btnEdit.on('click', _.bind(this.onEditSeries, this, false)); + + this.btnUp = new Common.UI.Button({ + parentEl: $('#chart-dlg-btn-up'), + cls: 'btn-toolbar', + iconCls: 'caret-up', + hint: this.textUp + }); + // this.btnUp.on('click', _.bind(this.onMoveClick, this, true)); + + this.btnDown = new Common.UI.Button({ + parentEl: $('#chart-dlg-btn-down'), + cls: 'btn-toolbar', + iconCls: 'caret-down', + hint: this.textDown + }); + // this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); + + this.btnSwitch = new Common.UI.Button({ + el: $('#chart-dlg-btn-switch') + }); + // this.btnSwitch.on('click', _.bind(this.onSwitch, this)); + + this.categoryList = new Common.UI.ListView({ + el: $('#chart-dlg-category-list', this.$window), + store: new Common.UI.DataViewStore(), + emptyText: '', + scrollAlwaysVisible: true, + template: _.template(['
'].join('')), + itemTemplate: _.template([ + '
', + '', + '
', + '
<%= Common.Utils.String.htmlEncode(value) %>
', + '
', + '
' + ].join('')) + }); + this.categoryList.on({ + 'item:change': this.onItemChanged.bind(this), + 'item:add': this.onItemChanged.bind(this), + 'item:select': this.onCellCheck.bind(this) + }); + this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category'); + + this.btnEditCategory = new Common.UI.Button({ + el: $('#chart-dlg-btn-category-edit') + }); + this.btnEditCategory.on('click', _.bind(this.onEditCategory, this, false)); + + this.afterRender(); + }, + + afterRender: function() { + this._setDefaults(this.chartSettings); + }, + + show: function() { + Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); + + var me = this; + _.delay(function(){ + me.txtDataRange.cmpEl.find('input').focus(); + },50); + }, + + close: function () { + this.api.asc_onCloseChartFrame(); + Common.Views.AdvancedSettingsWindow.prototype.close.apply(this, arguments); + }, + + _setDefaults: function (props) { + var me = this; + if (props ){ + this.chartSettings = props; + + this.currentChartType = props.getType(); + + var value = props.getRange(); + this.txtDataRange.setValue((value) ? value : ''); + this.dataRangeValid = value; + + this.txtDataRange.validation = function(value) { + if (_.isEmpty(value)) { + return true; + } + + var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); + return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; + }; + + this.dataDirect = props.getInColumns() ? 1 : 0; + } + }, + + getSettings: function () { + this.chartSettings.putRange(this.txtDataRange.getValue()); + return { chartSettings: this.chartSettings}; + }, + + onDlgBtnClick: function(event) { + var me = this; + var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; + if (state == 'ok') { + this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined); + } + + this.close(); + }, + + onPrimary: function() { + this.onDlgBtnClick('ok'); + return false; + }, + + isRangeValid: function() { + var isvalid; + if (!_.isEmpty(this.txtDataRange.getValue())) { + isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.dataDirect===0, this.currentChartType); + if (isvalid == Asc.c_oAscError.ID.No) + return true; + } else + return true; + + if (isvalid == Asc.c_oAscError.ID.StockChartError) { + Common.UI.warning({msg: this.errorStockChart}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + Common.UI.warning({msg: this.errorMaxRows}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) + Common.UI.warning({msg: this.errorMaxPoints}); + else + this.txtDataRange.cmpEl.find('input').focus(); + return false; + }, + + onSelectData_simple: function() { + var me = this; + if (me.api) { + var props = me.chartSettings; + var handlerDlg = function(dlg, result) { + if (result == 'ok' && me.isRangeValid()) { + me.dataRangeValid = dlg.getSettings(); + me.txtDataRange.setValue(me.dataRangeValid); + me.txtDataRange.checkValidate(); + props.putRange(me.dataRangeValid); + me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None); + me.api.asc_editChartDrawingObject(props); + } + }; + + var win = new SSE.Views.CellRangeDialog({ + handler: handlerDlg + }).on('close', function() { + me.show(); + }); + + var xy = me.$window.offset(); + me.hide(); + win.show(xy.left + 160, xy.top + 125); + win.setSettings({ + api : me.api, + range : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid, + type : Asc.c_oAscSelectionDialogType.Chart + }); + } + }, + + onSelectData: function() { + var me = this; + if (me.api) { + var props = me.chartSettings, + handlerDlg = function(dlg, result) { + if (result == 'ok' && me.isRangeValid()) { + props.putRange(dlg.getSettings()); + me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None); + me.api.asc_editChartDrawingObject(props); + } + }, + validation = function(value) { + var isvalid; + if (!_.isEmpty(value)) { + isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, !props.getInColumns(), me.currentChartType); + if (isvalid == Asc.c_oAscError.ID.No) + return true; + } else return ''; + + if (isvalid == Asc.c_oAscError.ID.StockChartError) { + return this.errorStockChart; + } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + return this.errorMaxRows; + } + return this.txtInvalidRange; + }; + + var win = new SSE.Views.CellRangeDialog({ + handler: handlerDlg + }).on('close', function() { + me.show(); + // me.api.asc_onCloseChartFrame(); + }); + + var xy = me.$window.offset(); + me.hide(); + win.show(xy.left + 160, xy.top + 125); + win.setSettings({ + api : me.api, + range : props.getRange(), + validation: validation, + type : Asc.c_oAscSelectionDialogType.Chart + }); + } + }, + + onItemChanged: function (view, record) { + var state = record.model.get('check'); + if ( state == 'indeterminate' ) + $('input[type=checkbox]', record.$el).prop('indeterminate', true); + else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false}); + }, + + onCellCheck: function (listView, itemView, record) { + if (this.checkCellTrigerBlock) + return; + + var target = '', isLabel = false, bound = null; + + var event = window.event ? window.event : window._event; + if (event) { + target = $(event.currentTarget).find('.list-item'); + + if (target.length) { + bound = target.get(0).getBoundingClientRect(); + var _clientX = event.clientX*Common.Utils.zoom(), + _clientY = event.clientY*Common.Utils.zoom(); + if (bound.left < _clientX && _clientX < bound.right && + bound.top < _clientY && _clientY < bound.bottom) { + isLabel = true; + } + } + + if (isLabel || event.target.className.match('checkbox')) { + this.updateCellCheck(listView, record); + + _.delay(function () { + listView.$el.find('.listview').focus(); + }, 100, this); + } + } + }, + + onListKeyDown: function (type, e, data) { + var record = null, listView = (type=='series') ? this.seriesList : this.categoryList; + + if (listView.disabled) return; + if (_.isUndefined(undefined)) data = e; + + if (data.keyCode == Common.UI.Keys.SPACE) { + data.preventDefault(); + data.stopPropagation(); + + this.updateCellCheck(listView, listView.getSelectedRec()); + } else if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { + // this.onDeleteSeries(); + } else { + Common.UI.DataView.prototype.onKeyDown.call(listView, e, data); + } + }, + + updateCellCheck: function (listView, record) { + if (record && listView) { + record.set('check', !record.get('check')); + // listView.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true}); + } + }, + + onSelectSeries: function(lisvView, itemView, record) { + this.updateMoveButtons(); + }, + + updateMoveButtons: function() { + var rec = this.seriesList.getSelectedRec(), + index = rec ? this.seriesList.store.indexOf(rec) : -1; + this.btnUp.setDisabled(index<1); + this.btnDown.setDisabled(index<0 || index==this.seriesList.store.length-1); + }, + + onAddSeries: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(1, true, handlerDlg); + }, + + onEditSeries: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(1, false, handlerDlg); + }, + + onEditCategory: function() { + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(0, false, handlerDlg); + }, + + changeDataRange: function(type, add, handlerDlg) { + var me = this; + var win = new SSE.Views.ChartDataRangeDialog({ + type: type, //series + handler: handlerDlg + }).on('close', function() { + me.show(); + }); + + var xy = me.$window.offset(); + me.hide(); + win.show(xy.left + 160, xy.top + 125); + win.setSettings({ + api : me.api + }); + }, + + textTitle: 'Chart Data', + txtEmpty: 'This field is required', + textInvalidRange: 'ERROR! Invalid cells range', + textSelectData: 'Select data', + errorMaxRows: 'ERROR! The maximum number of data series per chart is 255.', + errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', + errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.', + textSeries: 'Legend Entries (Series)', + textAdd: 'Add', + textEdit: 'Edit', + textDelete: 'Remove', + textSwitch: 'Switch Row/Column', + textCategory: 'Horizontal (Category) Axis Labels', + textUp: 'Up', + textDown: 'Down', + textData: 'Data' + }, SSE.Views.ChartDataDialog || {})) +}); diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 831622d309..0afbfdec4c 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -46,7 +46,8 @@ define([ 'common/main/lib/component/Button', 'common/main/lib/component/MetricSpinner', 'common/main/lib/component/ComboDataView', - 'spreadsheeteditor/main/app/view/ChartSettingsDlg' + 'spreadsheeteditor/main/app/view/ChartSettingsDlg', + 'spreadsheeteditor/main/app/view/ChartDataDialog' ], function (menuTemplate, $, _, Backbone) { 'use strict'; @@ -851,7 +852,7 @@ define([ } }, - onSelectData: function() { + onSelectData_simple: function() { var me = this; if (me.api) { var props = me.api.asc_getChartObject(), @@ -895,7 +896,29 @@ define([ }); } }, - + + onSelectData: function() { + var me = this; + var win, props; + if (me.api){ + props = me.api.asc_getChartObject(); + if (props) { + (new SSE.Views.ChartDataDialog( + { + chartSettings: props, + api: me.api, + handler: function(result, value) { + if (result == 'ok') { + if (me.api) { + } + } + Common.NotificationCenter.trigger('edit:complete', me); + } + })).show(); + } + } + }, + onSelectType: function(btn, picker, itemView, record) { if (this._noApply) return; From 6dc0054f77f11c77822dcdc360589802aa62fd49 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Jul 2020 12:32:59 +0300 Subject: [PATCH 05/17] [SSE] Refactoring chart data dialog --- .../main/app/view/ChartDataDialog.js | 122 +----------------- 1 file changed, 3 insertions(+), 119 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index b1af4167aa..5868d023f9 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -47,27 +47,6 @@ define([ 'common/main/lib/view/AdvancedSettingsWindow' ], function () { 'use strict'; - var _CustomItem = Common.UI.DataViewItem.extend({ - initialize : function(options) { - Common.UI.BaseView.prototype.initialize.call(this, options); - - var me = this; - - me.template = me.options.template || me.template; - - me.listenTo(me.model, 'change:sort', function() { - me.render(); - me.trigger('change', me, me.model); - }); - me.listenTo(me.model, 'change:selected', function() { - var el = me.$el || $(me.el); - el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected')); - me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected')); - }); - me.listenTo(me.model, 'remove', me.remove); - } - }); - SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 370, @@ -185,38 +164,9 @@ define([ el: $('#chart-dlg-series-list', this.$window), store: new Common.UI.DataViewStore(), emptyText: '', - scrollAlwaysVisible: true, - template: _.template(['
'].join('')), - itemTemplate: _.template([ - '
', - '', - '
', - '
<%= Common.Utils.String.htmlEncode(value) %>
', - '
', - '
' - ].join('')) - }); - this.seriesList.createNewItem = function(record) { - return new _CustomItem({ - template: this.itemTemplate, - model: record - }); - }; - this.seriesList.on({ - 'item:change': this.onItemChanged.bind(this), - 'item:add': this.onItemChanged.bind(this), - 'item:select': this.onCellCheck.bind(this) + scrollAlwaysVisible: true }); this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); - this.seriesList.createNewItem = function(record) { - return new _CustomItem({ - template: this.itemTemplate, - model: record - }); - }; this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); this.btnAdd = new Common.UI.Button({ @@ -259,24 +209,7 @@ define([ el: $('#chart-dlg-category-list', this.$window), store: new Common.UI.DataViewStore(), emptyText: '', - scrollAlwaysVisible: true, - template: _.template(['
'].join('')), - itemTemplate: _.template([ - '
', - '', - '
', - '
<%= Common.Utils.String.htmlEncode(value) %>
', - '
', - '
' - ].join('')) - }); - this.categoryList.on({ - 'item:change': this.onItemChanged.bind(this), - 'item:add': this.onItemChanged.bind(this), - 'item:select': this.onCellCheck.bind(this) + scrollAlwaysVisible: true }); this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category'); @@ -448,68 +381,19 @@ define([ } }, - onItemChanged: function (view, record) { - var state = record.model.get('check'); - if ( state == 'indeterminate' ) - $('input[type=checkbox]', record.$el).prop('indeterminate', true); - else $('input[type=checkbox]', record.$el).prop({checked: state, indeterminate: false}); - }, - - onCellCheck: function (listView, itemView, record) { - if (this.checkCellTrigerBlock) - return; - - var target = '', isLabel = false, bound = null; - - var event = window.event ? window.event : window._event; - if (event) { - target = $(event.currentTarget).find('.list-item'); - - if (target.length) { - bound = target.get(0).getBoundingClientRect(); - var _clientX = event.clientX*Common.Utils.zoom(), - _clientY = event.clientY*Common.Utils.zoom(); - if (bound.left < _clientX && _clientX < bound.right && - bound.top < _clientY && _clientY < bound.bottom) { - isLabel = true; - } - } - - if (isLabel || event.target.className.match('checkbox')) { - this.updateCellCheck(listView, record); - - _.delay(function () { - listView.$el.find('.listview').focus(); - }, 100, this); - } - } - }, - onListKeyDown: function (type, e, data) { var record = null, listView = (type=='series') ? this.seriesList : this.categoryList; if (listView.disabled) return; if (_.isUndefined(undefined)) data = e; - if (data.keyCode == Common.UI.Keys.SPACE) { - data.preventDefault(); - data.stopPropagation(); - - this.updateCellCheck(listView, listView.getSelectedRec()); - } else if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { + if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { // this.onDeleteSeries(); } else { Common.UI.DataView.prototype.onKeyDown.call(listView, e, data); } }, - updateCellCheck: function (listView, record) { - if (record && listView) { - record.set('check', !record.get('check')); - // listView.scroller.update({minScrollbarLength : 40, alwaysVisibleY: true, suppressScrollX: true}); - } - }, - onSelectSeries: function(lisvView, itemView, record) { this.updateMoveButtons(); }, From 0e492b61344f4b8ad7fd7a71425fed2896578fed Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Jul 2020 15:07:15 +0300 Subject: [PATCH 06/17] [SSE] Show chart data settings --- .../main/app/view/ChartDataDialog.js | 125 ++++++++++++++++-- .../main/app/view/ChartDataRangeDialog.js | 49 ++++++- 2 files changed, 160 insertions(+), 14 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 5868d023f9..63af5abd37 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -86,7 +86,7 @@ define([ '', '', '
', - '
', + '
', '
', '
', '', @@ -168,6 +168,9 @@ define([ }); this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); + this.seriesList.store.comparator = function(rec) { + return rec.get("order"); + }; this.btnAdd = new Common.UI.Button({ el: $('#chart-dlg-btn-add') @@ -177,7 +180,7 @@ define([ this.btnDelete = new Common.UI.Button({ el: $('#chart-dlg-btn-delete') }); - // this.btnDelete.on('click', _.bind(this.onDeleteSeries, this)); + this.btnDelete.on('click', _.bind(this.onDeleteSeries, this)); this.btnEdit = new Common.UI.Button({ el: $('#chart-dlg-btn-edit') @@ -190,7 +193,7 @@ define([ iconCls: 'caret-up', hint: this.textUp }); - // this.btnUp.on('click', _.bind(this.onMoveClick, this, true)); + this.btnUp.on('click', _.bind(this.onMoveClick, this, true)); this.btnDown = new Common.UI.Button({ parentEl: $('#chart-dlg-btn-down'), @@ -198,7 +201,7 @@ define([ iconCls: 'caret-down', hint: this.textDown }); - // this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); + this.btnDown.on('click', _.bind(this.onMoveClick, this, false)); this.btnSwitch = new Common.UI.Button({ el: $('#chart-dlg-btn-switch') @@ -260,7 +263,25 @@ define([ }; this.dataDirect = props.getInColumns() ? 1 : 0; + + this.updateSeriesList(props.getSeries(), 0); + + var categories = props.getCatValues(), + arr = []; + var store = this.categoryList.store; + for (var i = 0, len = categories.length; i < len; i++) + { + var item = categories[i], + rec = new Common.UI.DataViewModel(); + rec.set({ + value: item + }); + arr.push(rec); + } + store.reset(arr); + (len>0) && this.categoryList.selectByIndex(0); } + this.updateButtons(); }, getSettings: function () { @@ -398,6 +419,17 @@ define([ this.updateMoveButtons(); }, + updateButtons: function() { + // this.btnAdd.setDisabled(this.seriesList.store.length>63); + this.btnEdit.setDisabled(this.seriesList.store.length<1); + this.btnDelete.setDisabled(this.seriesList.store.length<1); + this.updateMoveButtons(); + }, + + updateCatButtons: function() { + this.btnEditCategory.setDisabled(this.categoryList.store.length<1); + }, + updateMoveButtons: function() { var rec = this.seriesList.getSelectedRec(), index = rec ? this.seriesList.store.indexOf(rec) : -1; @@ -406,21 +438,47 @@ define([ }, onAddSeries: function() { + var rec = (this.seriesList.store.length>0) ? this.seriesList.store.at(this.seriesList.store.length-1) : null, + isScatter = false; + rec && (isScatter = rec.get('series').asc_IsScatter()); var handlerDlg = function(dlg, result) { if (result == 'ok') { var changedValue = dlg.getSettings(); + if (isScatter) { + this.chartSettings.addScatterSeries(changedValue.name, changedValue.valuesX, changedValue.valuesY); + } else { + this.chartSettings.addSeries(changedValue.name, changedValue.values); + } + this.updateSeriesList(this.chartSettings.getSeries(), this.seriesList.store.length-1); + this.updateButtons(); } }; - this.changeDataRange(1, true, handlerDlg); + this.changeDataRange(1, {isScatter: isScatter}, true, handlerDlg); + }, + + onDeleteSeries: function() { + var rec = this.seriesList.getSelectedRec(); + if (rec) { + var order = rec.get('order'); + // this.chartSettings.deleteSeries(rec.get('index')); + this.updateSeriesList(this.chartSettings.getSeries(), order); + } + this.updateButtons(); }, onEditSeries: function() { - var handlerDlg = function(dlg, result) { - if (result == 'ok') { - var changedValue = dlg.getSettings(); - } - }; - this.changeDataRange(1, false, handlerDlg); + var rec = this.seriesList.getSelectedRec(); + if (rec) { + var series = rec.get('series'), + isScatter = series.asc_IsScatter(); + var handlerDlg = function(dlg, result) { + if (result == 'ok') { + var changedValue = dlg.getSettings(); + } + }; + this.changeDataRange(1, {series: series, name: series.asc_getName(), isScatter: isScatter, values: isScatter ? null : series.asc_getValues(), + valuesX: !isScatter ? null : series.asc_getXValues(), valuesY: !isScatter ? null : series.asc_getYValues() }, false, handlerDlg); + } }, onEditCategory: function() { @@ -432,10 +490,11 @@ define([ this.changeDataRange(0, false, handlerDlg); }, - changeDataRange: function(type, add, handlerDlg) { + changeDataRange: function(type, props, add, handlerDlg) { var me = this; var win = new SSE.Views.ChartDataRangeDialog({ type: type, //series + isScatter: !!props.isScatter, handler: handlerDlg }).on('close', function() { me.show(); @@ -445,10 +504,50 @@ define([ me.hide(); win.show(xy.left + 160, xy.top + 125); win.setSettings({ - api : me.api + api : me.api, + props : props }); }, + onMoveClick: function(up) { + var store = this.seriesList.store, + length = store.length, + rec = this.seriesList.getSelectedRec(); + if (rec) { + var index = store.indexOf(rec), + order = rec.get('order'), + newindex = up ? Math.max(0, index-1) : Math.min(length-1, index+1), + newrec = store.at(newindex), + neworder = newrec.get('order'); + store.add(store.remove(rec), {at: newindex}); + rec.set('order', neworder); + newrec.set('order', order); + // this.chartSettings.changeSeriesOrder(rec.get('index'), neworder, newrec.get('index'), order); + this.seriesList.selectRecord(rec); + this.seriesList.scrollToRecord(rec); + } + this.updateMoveButtons(); + }, + + updateSeriesList: function(series, index) { + var arr = []; + var store = this.seriesList.store; + for (var i = 0, len = series.length; i < len; i++) + { + var item = series[i], + rec = new Common.UI.DataViewModel(); + rec.set({ + value: item.getSeriesName(), + index: item.asc_getIdx(), + order: item.asc_getOrder(), + series: item + }); + arr.push(rec); + } + store.reset(arr); + (len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1)); + }, + textTitle: 'Chart Data', txtEmpty: 'This field is required', textInvalidRange: 'ERROR! Invalid cells range', diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index 8d83f7075e..d492e42dfe 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -57,6 +57,7 @@ define([ initialize : function(options) { this.type = options.type || 0; + this.isScatter = options.isScatter; _.extend(this.options, { title: this.type==1 ? this.txtTitleSeries : this.txtTitleCategory @@ -81,7 +82,7 @@ define([ '<% if (type==1) { %>', '', '', - '', + '', '', '', '', @@ -92,6 +93,21 @@ define([ '', '', '', + '<% if (isScatter) { %>', + '', + '', + '', + '', + '', + '', + '', + '
', + '', + '', + '', + '', + '', + '<% } %>', '<% } %>', '', '
' @@ -134,6 +150,19 @@ define([ }).on('button:click', _.bind(this.onSelectData, this)); this.lblRange2 = $window.find('#id-dlg-chart-range-lbl2'); + me.inputRange3 = new Common.UI.InputFieldBtn({ + el: $('#id-dlg-chart-range-range3'), + style: '100%', + textSelectData: 'Select data', + validateOnChange: true, + validateOnBlur: false + }).on('changed:after', function(input, newValue, oldValue, e) { + }).on('changing', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + // me.onInputChanging(input, newValue, oldValue); + }).on('button:click', _.bind(this.onSelectData, this)); + this.lblRange3 = $window.find('#id-dlg-chart-range-lbl3'); + $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); _.defer(function(){ @@ -149,6 +178,22 @@ define([ setSettings: function(settings) { var me = this; this.api = settings.api; + this.props = settings.props; + + if (this.props.series) { + var series = this.props.series; + this.inputRange1.setValue(series.asc_getName()); + (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); + if (this.props.isScatter) { + this.inputRange2.setValue(series.asc_getXValues()); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join(';')); + this.inputRange3.setValue(series.asc_getYValues()); + (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join(';')); + } else { + this.inputRange2.setValue(series.asc_getValues()); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join(';')); + } + } }, getSettings: function () { @@ -213,6 +258,8 @@ define([ txtTitleCategory: 'Axis Labels', txtSeriesName: 'Series name', txtValues: 'Values', + txtXValues: 'X Values', + txtYValues: 'Y Values', txtAxisLabel: 'Axis label range', txtChoose: 'Choose range', textSelectData: 'Select data', From 2ae33bdfb2857daecbfe4f77a9add1ad0a630f03 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Jul 2020 15:10:48 +0300 Subject: [PATCH 07/17] [SSE] Refactoring --- apps/spreadsheeteditor/main/app/view/ChartDataDialog.js | 8 ++------ .../main/app/view/ChartDataRangeDialog.js | 6 +++--- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 63af5abd37..8a0ef6fd4b 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -50,8 +50,7 @@ define([ SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 370, - height: 490, - buttons: null + height: 490 }, initialize : function(options) { @@ -111,10 +110,7 @@ define([ '
', '', '', - '
', - '
', - '', - '
' + '
' ].join('') }, options); diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index d492e42dfe..4ac3e2cf8a 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -186,12 +186,12 @@ define([ (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); if (this.props.isScatter) { this.inputRange2.setValue(series.asc_getXValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join(';')); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); this.inputRange3.setValue(series.asc_getYValues()); - (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join(';')); + (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); } else { this.inputRange2.setValue(series.asc_getValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join(';')); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); } } }, From 3bfd4182fcb3e8e3dc6285668d60285649d68768 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 7 Jul 2020 16:19:30 +0300 Subject: [PATCH 08/17] [SSE] Fix category settings --- .../main/app/view/ChartDataDialog.js | 12 +++++++++--- .../main/app/view/ChartDataRangeDialog.js | 8 +++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 8a0ef6fd4b..419d85ce67 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -278,6 +278,7 @@ define([ (len>0) && this.categoryList.selectByIndex(0); } this.updateButtons(); + this.updateCatButtons(); }, getSettings: function () { @@ -412,6 +413,7 @@ define([ }, onSelectSeries: function(lisvView, itemView, record) { + this.updateCatButtons(record.get('series').asc_IsScatter()); this.updateMoveButtons(); }, @@ -422,8 +424,12 @@ define([ this.updateMoveButtons(); }, - updateCatButtons: function() { - this.btnEditCategory.setDisabled(this.categoryList.store.length<1); + updateCatButtons: function(isScatter) { + if (isScatter===undefined) { + var rec = this.seriesList.getSelectedRec(); + rec && (isScatter = rec.get('series').asc_IsScatter()); + } + this.btnEditCategory.setDisabled(this.categoryList.store.length<1 || !!isScatter); }, updateMoveButtons: function() { @@ -483,7 +489,7 @@ define([ var changedValue = dlg.getSettings(); } }; - this.changeDataRange(0, false, handlerDlg); + this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, false, handlerDlg); }, changeDataRange: function(type, props, add, handlerDlg) { diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index 4ac3e2cf8a..301608e360 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -193,6 +193,10 @@ define([ this.inputRange2.setValue(series.asc_getValues()); (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); } + } else { + this.inputRange1.setValue(this.props.category || ''); + // if (this.inputRange1.getValue()!=='') + this.props.values && this.lblRange1.html('= ' + this.props.values.join('; ')); } }, @@ -244,7 +248,9 @@ define([ if (state == 'ok') { if (this.inputRange1.checkValidate() !== true) return; - if (type==1 && this.inputRange2.checkValidate() !== true) + if (this.type==1 && this.inputRange2.checkValidate() !== true) + return; + if (this.type==1 && this.isScatter && this.inputRange3.checkValidate() !== true) return; } if (this.options.handler.call(this, this, state)) From f5dc20d8d0a75a0633b10b0e3949507872250622 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 8 Jul 2020 10:41:18 +0300 Subject: [PATCH 09/17] [SSE] Refactoring chart range settings --- .../main/app/view/ChartDataDialog.js | 194 +++++++----------- .../main/app/view/ChartDataRangeDialog.js | 110 +++++++--- 2 files changed, 160 insertions(+), 144 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 419d85ce67..ae545fea84 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -124,7 +124,6 @@ define([ this.api = this.options.api; this.chartSettings = this.options.chartSettings; this.dataRangeValid = ''; - this.dataDirect = 0; this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal; }, @@ -140,19 +139,10 @@ define([ allowBlank : true, validateOnChange: true }); - this.txtDataRange.on('button:click', _.bind(this.onSelectData_simple, this)); + this.txtDataRange.on('button:click', _.bind(this.onSelectData, this)); this.txtDataRange.on('changed:after', function(input, newValue, oldValue, e) { - if (newValue !==me.dataRangeValid) { - if (me.isRangeValid()) { - me.dataRangeValid = newValue; - me.txtDataRange.checkValidate(); - me.chartSettings.putRange(me.dataRangeValid); - me.api.asc_editChartDrawingObject(me.chartSettings); - } else { - me.txtDataRange.setValue(me.dataRangeValid); - me.txtDataRange.checkValidate(); - } - } + if (newValue == oldValue) return; + me.changeChartRange(newValue); }); // Chart data @@ -210,7 +200,6 @@ define([ emptyText: '', scrollAlwaysVisible: true }); - this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category'); this.btnEditCategory = new Common.UI.Button({ el: $('#chart-dlg-btn-category-edit') @@ -258,31 +247,13 @@ define([ return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; }; - this.dataDirect = props.getInColumns() ? 1 : 0; - this.updateSeriesList(props.getSeries(), 0); - - var categories = props.getCatValues(), - arr = []; - var store = this.categoryList.store; - for (var i = 0, len = categories.length; i < len; i++) - { - var item = categories[i], - rec = new Common.UI.DataViewModel(); - rec.set({ - value: item - }); - arr.push(rec); - } - store.reset(arr); - (len>0) && this.categoryList.selectByIndex(0); + this.updateCategoryList(props.getCatValues()); } this.updateButtons(); - this.updateCatButtons(); }, getSettings: function () { - this.chartSettings.putRange(this.txtDataRange.getValue()); return { chartSettings: this.chartSettings}; }, @@ -290,6 +261,7 @@ define([ var me = this; var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; if (state == 'ok') { + if (!this.isRangeValid()) return; this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined); } @@ -304,6 +276,7 @@ define([ isRangeValid: function() { var isvalid; if (!_.isEmpty(this.txtDataRange.getValue())) { + //change validation!! isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.dataDirect===0, this.currentChartType); if (isvalid == Asc.c_oAscError.ID.No) return true; @@ -321,18 +294,26 @@ define([ return false; }, - onSelectData_simple: function() { + changeChartRange: function(settings) { + var me = this; + if (me.isRangeValid(settings)) { + me.dataRangeValid = settings; + me.txtDataRange.checkValidate(); + me.chartSettings.putRange(me.dataRangeValid); + + me.updateSeriesList(me.chartSettings.getSeries(), 0); + me.updateCategoryList(me.chartSettings.getCatValues()); + me.updateButtons(); + } + }, + + onSelectData: function(input) { var me = this; if (me.api) { - var props = me.chartSettings; var handlerDlg = function(dlg, result) { - if (result == 'ok' && me.isRangeValid()) { - me.dataRangeValid = dlg.getSettings(); - me.txtDataRange.setValue(me.dataRangeValid); - me.txtDataRange.checkValidate(); - props.putRange(me.dataRangeValid); - me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None); - me.api.asc_editChartDrawingObject(props); + if (result == 'ok') { + input.setValue(dlg.getSettings()); + me.changeChartRange(dlg.getSettings()); } }; @@ -353,59 +334,13 @@ define([ } }, - onSelectData: function() { - var me = this; - if (me.api) { - var props = me.chartSettings, - handlerDlg = function(dlg, result) { - if (result == 'ok' && me.isRangeValid()) { - props.putRange(dlg.getSettings()); - me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None); - me.api.asc_editChartDrawingObject(props); - } - }, - validation = function(value) { - var isvalid; - if (!_.isEmpty(value)) { - isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, !props.getInColumns(), me.currentChartType); - if (isvalid == Asc.c_oAscError.ID.No) - return true; - } else return ''; - - if (isvalid == Asc.c_oAscError.ID.StockChartError) { - return this.errorStockChart; - } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - return this.errorMaxRows; - } - return this.txtInvalidRange; - }; - - var win = new SSE.Views.CellRangeDialog({ - handler: handlerDlg - }).on('close', function() { - me.show(); - // me.api.asc_onCloseChartFrame(); - }); - - var xy = me.$window.offset(); - me.hide(); - win.show(xy.left + 160, xy.top + 125); - win.setSettings({ - api : me.api, - range : props.getRange(), - validation: validation, - type : Asc.c_oAscSelectionDialogType.Chart - }); - } - }, - onListKeyDown: function (type, e, data) { - var record = null, listView = (type=='series') ? this.seriesList : this.categoryList; + var record = null, listView = this.seriesList; if (listView.disabled) return; if (_.isUndefined(undefined)) data = e; - if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { + if (data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) { // this.onDeleteSeries(); } else { Common.UI.DataView.prototype.onKeyDown.call(listView, e, data); @@ -413,25 +348,15 @@ define([ }, onSelectSeries: function(lisvView, itemView, record) { - this.updateCatButtons(record.get('series').asc_IsScatter()); this.updateMoveButtons(); }, updateButtons: function() { - // this.btnAdd.setDisabled(this.seriesList.store.length>63); this.btnEdit.setDisabled(this.seriesList.store.length<1); this.btnDelete.setDisabled(this.seriesList.store.length<1); this.updateMoveButtons(); }, - updateCatButtons: function(isScatter) { - if (isScatter===undefined) { - var rec = this.seriesList.getSelectedRec(); - rec && (isScatter = rec.get('series').asc_IsScatter()); - } - this.btnEditCategory.setDisabled(this.categoryList.store.length<1 || !!isScatter); - }, - updateMoveButtons: function() { var rec = this.seriesList.getSelectedRec(), index = rec ? this.seriesList.store.indexOf(rec) : -1; @@ -441,21 +366,23 @@ define([ onAddSeries: function() { var rec = (this.seriesList.store.length>0) ? this.seriesList.store.at(this.seriesList.store.length-1) : null, - isScatter = false; + isScatter = false, + me = this; rec && (isScatter = rec.get('series').asc_IsScatter()); + // me.setStartPointHistory(); + var series; + if (isScatter) { + series = me.chartSettings.addScatterSeries(); + } else { + series = me.chartSettings.addSeries(); + } var handlerDlg = function(dlg, result) { if (result == 'ok') { - var changedValue = dlg.getSettings(); - if (isScatter) { - this.chartSettings.addScatterSeries(changedValue.name, changedValue.valuesX, changedValue.valuesY); - } else { - this.chartSettings.addSeries(changedValue.name, changedValue.values); - } - this.updateSeriesList(this.chartSettings.getSeries(), this.seriesList.store.length-1); - this.updateButtons(); + me.updateSeriesList(me.chartSettings.getSeries(), me.seriesList.store.length-1); + me.updateButtons(); } }; - this.changeDataRange(1, {isScatter: isScatter}, true, handlerDlg); + this.changeDataRange(1, {series: series, isScatter: isScatter}, handlerDlg); }, onDeleteSeries: function() { @@ -472,27 +399,38 @@ define([ var rec = this.seriesList.getSelectedRec(); if (rec) { var series = rec.get('series'), - isScatter = series.asc_IsScatter(); + isScatter = series.asc_IsScatter(), + me = this; var handlerDlg = function(dlg, result) { if (result == 'ok') { - var changedValue = dlg.getSettings(); + // var changedValue = dlg.getSettings(); + // series.asc_setName(changedValue.name); + // if (isScatter) { + // series.asc_setXValues(changedValue.valuesX); + // series.asc_setYValues(changedValue.valuesY); + // } else { + // series.asc_setValues(changedValue.valuesX); + // } } }; - this.changeDataRange(1, {series: series, name: series.asc_getName(), isScatter: isScatter, values: isScatter ? null : series.asc_getValues(), - valuesX: !isScatter ? null : series.asc_getXValues(), valuesY: !isScatter ? null : series.asc_getYValues() }, false, handlerDlg); + // me.setStartPointHistory(); + this.changeDataRange(1, {series: series, isScatter: isScatter }, handlerDlg); } }, onEditCategory: function() { + var me = this; var handlerDlg = function(dlg, result) { if (result == 'ok') { - var changedValue = dlg.getSettings(); + // var changedValue = dlg.getSettings(); + // me.chartSettings.setCatFormula(changedValue.name); } }; - this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, false, handlerDlg); + // me.setStartPointHistory(); + this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, handlerDlg); }, - changeDataRange: function(type, props, add, handlerDlg) { + changeDataRange: function(type, props, handlerDlg) { var me = this; var win = new SSE.Views.ChartDataRangeDialog({ type: type, //series @@ -500,6 +438,7 @@ define([ handler: handlerDlg }).on('close', function() { me.show(); + // me.setEndPointHistory(); when cancel }); var xy = me.$window.offset(); @@ -507,7 +446,8 @@ define([ win.show(xy.left + 160, xy.top + 125); win.setSettings({ api : me.api, - props : props + props : props, + chartSettings: me.chartSettings }); }, @@ -532,6 +472,8 @@ define([ }, updateSeriesList: function(series, index) { + this.btnEditCategory.setDisabled(series && series.length>0 ? series[0].asc_IsScatter() : false); + var arr = []; var store = this.seriesList.store; for (var i = 0, len = series.length; i < len; i++) @@ -550,6 +492,22 @@ define([ (len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1)); }, + updateCategoryList: function(categories) { + var arr = []; + var store = this.categoryList.store; + for (var i = 0, len = categories.length; i < len; i++) + { + var item = categories[i], + rec = new Common.UI.DataViewModel(); + rec.set({ + value: item + }); + arr.push(rec); + } + store.reset(arr); + (len>0) && this.categoryList.selectByIndex(0); + }, + textTitle: 'Chart Data', txtEmpty: 'This field is required', textInvalidRange: 'ERROR! Invalid cells range', diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index 301608e360..cfb89a09f1 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -131,10 +131,12 @@ define([ validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + me.updateRangeData(1, newValue); }).on('changing', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; // me.onInputChanging(input, newValue, oldValue); - }).on('button:click', _.bind(this.onSelectData, this)); + }).on('button:click', _.bind(this.onSelectData, this, 1)); this.lblRange1 = $window.find('#id-dlg-chart-range-lbl1'); me.inputRange2 = new Common.UI.InputFieldBtn({ @@ -144,10 +146,12 @@ define([ validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + me.updateRangeData(2, newValue); }).on('changing', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; // me.onInputChanging(input, newValue, oldValue); - }).on('button:click', _.bind(this.onSelectData, this)); + }).on('button:click', _.bind(this.onSelectData, this, 2)); this.lblRange2 = $window.find('#id-dlg-chart-range-lbl2'); me.inputRange3 = new Common.UI.InputFieldBtn({ @@ -157,10 +161,12 @@ define([ validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { + if (newValue == oldValue) return; + me.updateRangeData(3, newValue); }).on('changing', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; // me.onInputChanging(input, newValue, oldValue); - }).on('button:click', _.bind(this.onSelectData, this)); + }).on('button:click', _.bind(this.onSelectData, this, 3)); this.lblRange3 = $window.find('#id-dlg-chart-range-lbl3'); $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this)); @@ -179,19 +185,24 @@ define([ var me = this; this.api = settings.api; this.props = settings.props; + this.chartSettings = settings.chartSettings; + + if (this.type==1) { + if (this.props.series) { + var series = this.props.series; + this.inputRange1.setValue(series.asc_getName()); + (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); + if (this.props.isScatter) { + this.inputRange2.setValue(series.asc_getXValues()); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); + this.inputRange3.setValue(series.asc_getYValues()); + (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); + } else { + this.inputRange2.setValue(series.asc_getValues()); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); + } + } else { // add series - if (this.props.series) { - var series = this.props.series; - this.inputRange1.setValue(series.asc_getName()); - (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); - if (this.props.isScatter) { - this.inputRange2.setValue(series.asc_getXValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); - this.inputRange3.setValue(series.asc_getYValues()); - (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); - } else { - this.inputRange2.setValue(series.asc_getValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); } } else { this.inputRange1.setValue(this.props.category || ''); @@ -201,16 +212,16 @@ define([ }, getSettings: function () { - return {name: this.inputRange1.getValue(), value: this.inputRange2.getValue()}; + return {name: this.inputRange1.getValue(), valuesX: this.inputRange2.getValue(), valuesY: this.inputRange3.getValue()}; }, - onSelectData: function(input) { + onSelectData: function(type, input) { var me = this; if (me.api) { - var changedValue = input.getValue(); var handlerDlg = function(dlg, result) { if (result == 'ok') { - changedValue = dlg.getSettings(); + input.setValue(dlg.getSettings()); + me.updateRangeData(type, dlg.getSettings()); } }; @@ -218,7 +229,6 @@ define([ allowBlank: true, handler: handlerDlg }).on('close', function() { - input.setValue(changedValue); // me.onInputChanging(input); me.show(); _.delay(function(){ @@ -239,6 +249,57 @@ define([ } }, + isRangeValid: function(type, value) { + var isvalid; + if (!_.isEmpty(value)) { + //change validation!! + isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, false, this.chartSettings.getType()); + if (isvalid == Asc.c_oAscError.ID.No) + return true; + } else + return true; + + if (isvalid == Asc.c_oAscError.ID.StockChartError) { + Common.UI.warning({msg: this.errorStockChart}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + Common.UI.warning({msg: this.errorMaxRows}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) + Common.UI.warning({msg: this.errorMaxPoints}); + return false; + }, + + updateRangeData: function(type, value) { + if (!this.isRangeValid(type, value)) return; + + if (this.props.series) { + var series = this.props.series; + switch (type) { + case 1: + series.asc_setName(value); + (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); + break; + case 2: + if (this.isScatter) { + series.asc_setXValues(value); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); + } else { + series.asc_setValues(value); + (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); + } + break; + case 3: + series.asc_setYValues(value); + (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); + break; + } + } else { + // this.chartSettings.setCatFormula(value); + var values = this.chartSettings.getCatValues(); + // if (this.inputRange1.getValue()!=='') + values && this.lblRange1.html('= ' + values.join('; ')); + } + }, + onBtnClick: function(event) { this._handleInput(event.currentTarget.attributes['result'].value); }, @@ -246,12 +307,9 @@ define([ _handleInput: function(state) { if (this.options.handler) { if (state == 'ok') { - if (this.inputRange1.checkValidate() !== true) - return; - if (this.type==1 && this.inputRange2.checkValidate() !== true) - return; - if (this.type==1 && this.isScatter && this.inputRange3.checkValidate() !== true) - return; + if (!this.isRangeValid(1, this.inputRange1.getValue())) return; + if (this.type==1 && !this.isRangeValid(2, this.inputRange1.getValue())) return; + if (this.type==1 && this.isScatter && !this.isRangeValid(3, this.inputRange1.getValue())) return; } if (this.options.handler.call(this, this, state)) return; From 5fa4da93b475137901128829e06dc26c0d76104c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 8 Jul 2020 12:51:57 +0300 Subject: [PATCH 10/17] [SSE] Refactoring chart range settings --- .../main/app/view/ChartDataDialog.js | 27 ++++++----- .../main/app/view/ChartDataRangeDialog.js | 46 ++++++++++--------- 2 files changed, 38 insertions(+), 35 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index ae545fea84..67353743bf 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -136,8 +136,8 @@ define([ name : 'range', style : 'width: 100%;', btnHint : this.textSelectData, - allowBlank : true, - validateOnChange: true + allowBlank : true + // validateOnChange: true }); this.txtDataRange.on('button:click', _.bind(this.onSelectData, this)); this.txtDataRange.on('changed:after', function(input, newValue, oldValue, e) { @@ -192,7 +192,7 @@ define([ this.btnSwitch = new Common.UI.Button({ el: $('#chart-dlg-btn-switch') }); - // this.btnSwitch.on('click', _.bind(this.onSwitch, this)); + this.btnSwitch.on('click', _.bind(this.onSwitch, this)); this.categoryList = new Common.UI.ListView({ el: $('#chart-dlg-category-list', this.$window), @@ -403,14 +403,7 @@ define([ me = this; var handlerDlg = function(dlg, result) { if (result == 'ok') { - // var changedValue = dlg.getSettings(); - // series.asc_setName(changedValue.name); - // if (isScatter) { - // series.asc_setXValues(changedValue.valuesX); - // series.asc_setYValues(changedValue.valuesY); - // } else { - // series.asc_setValues(changedValue.valuesX); - // } + rec.set('value', series.asc_getSeriesName()); } }; // me.setStartPointHistory(); @@ -422,8 +415,7 @@ define([ var me = this; var handlerDlg = function(dlg, result) { if (result == 'ok') { - // var changedValue = dlg.getSettings(); - // me.chartSettings.setCatFormula(changedValue.name); + me.updateCategoryList(me.chartSettings.getCatValues()); } }; // me.setStartPointHistory(); @@ -481,7 +473,7 @@ define([ var item = series[i], rec = new Common.UI.DataViewModel(); rec.set({ - value: item.getSeriesName(), + value: item.asc_getSeriesName(), index: item.asc_getIdx(), order: item.asc_getOrder(), series: item @@ -508,6 +500,13 @@ define([ (len>0) && this.categoryList.selectByIndex(0); }, + onSwitch: function() { + this.chartSettings.switchRowCol(); + this.updateSeriesList(this.chartSettings.getSeries(), 0); + this.updateCategoryList(this.chartSettings.getCatValues()); + this.updateButtons(); + }, + textTitle: 'Chart Data', txtEmpty: 'This field is required', textInvalidRange: 'ERROR! Invalid cells range', diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index cfb89a09f1..2df1ce630f 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -128,7 +128,7 @@ define([ el: $('#id-dlg-chart-range-range1'), style: '100%', textSelectData: 'Select data', - validateOnChange: true, + // validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; @@ -143,7 +143,7 @@ define([ el: $('#id-dlg-chart-range-range2'), style: '100%', textSelectData: 'Select data', - validateOnChange: true, + // validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; @@ -158,7 +158,7 @@ define([ el: $('#id-dlg-chart-range-range3'), style: '100%', textSelectData: 'Select data', - validateOnChange: true, + // validateOnChange: true, validateOnBlur: false }).on('changed:after', function(input, newValue, oldValue, e) { if (newValue == oldValue) return; @@ -191,23 +191,25 @@ define([ if (this.props.series) { var series = this.props.series; this.inputRange1.setValue(series.asc_getName()); - (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); + this.lblRange1.html((this.inputRange1.getValue()!=='') ? ('= ' + (series.asc_getNameVal() || '')) : this.txtChoose); if (this.props.isScatter) { + var arr = series.asc_getXValuesArr(); this.inputRange2.setValue(series.asc_getXValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); - this.inputRange3.setValue(series.asc_getYValues()); - (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); - } else { - this.inputRange2.setValue(series.asc_getValues()); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); - } - } else { // add series + this.lblRange2.html((this.inputRange2.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); + this.inputRange3.setValue(series.asc_getYValues()); + arr = series.asc_getYValuesArr(); + this.lblRange3.html((this.inputRange3.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); + } else { + var arr = series.asc_getValuesArr(); + this.inputRange2.setValue(series.asc_getValues()); + this.lblRange2.html((this.inputRange2.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); + } } } else { + var arr = this.props.values; this.inputRange1.setValue(this.props.category || ''); - // if (this.inputRange1.getValue()!=='') - this.props.values && this.lblRange1.html('= ' + this.props.values.join('; ')); + this.lblRange1.html((this.inputRange1.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); } }, @@ -276,27 +278,29 @@ define([ switch (type) { case 1: series.asc_setName(value); - (this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName()); + this.lblRange1.html((this.inputRange1.getValue()!=='') ? ('= ' + (series.asc_getNameVal() || '')) : this.txtChoose); break; case 2: if (this.isScatter) { + var arr = series.asc_getXValuesArr(); series.asc_setXValues(value); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; ')); + this.lblRange2.html((this.inputRange2.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); } else { + var arr = series.asc_getValuesArr(); series.asc_setValues(value); - (this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; ')); + this.lblRange2.html((this.inputRange2.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); } break; case 3: + var arr = series.asc_getYValuesArr(); series.asc_setYValues(value); - (this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; ')); + this.lblRange3.html((this.inputRange3.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); break; } } else { // this.chartSettings.setCatFormula(value); - var values = this.chartSettings.getCatValues(); - // if (this.inputRange1.getValue()!=='') - values && this.lblRange1.html('= ' + values.join('; ')); + var arr = this.chartSettings.getCatValues(); + this.lblRange1.html((this.inputRange1.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); } }, From 05c520015bed0d80e5af2405d9d0e888d9bd9d18 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 8 Jul 2020 15:04:19 +0300 Subject: [PATCH 11/17] [SSE] Disable switch button for empty range. Fix error messages --- .../main/app/view/ChartDataDialog.js | 15 +++++++++------ .../main/app/view/ChartDataRangeDialog.js | 9 ++++++++- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 67353743bf..e2576eacdf 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -244,7 +244,7 @@ define([ } var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); - return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; + return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? (me.textError + ' ' + me.textInvalidRange) : true; }; this.updateSeriesList(props.getSeries(), 0); @@ -289,8 +289,9 @@ define([ Common.UI.warning({msg: this.errorMaxRows}); } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) Common.UI.warning({msg: this.errorMaxPoints}); - else - this.txtDataRange.cmpEl.find('input').focus(); + else { + Common.UI.warning({msg: this.textInvalidRange}); + } return false; }, @@ -354,6 +355,7 @@ define([ updateButtons: function() { this.btnEdit.setDisabled(this.seriesList.store.length<1); this.btnDelete.setDisabled(this.seriesList.store.length<1); + this.btnSwitch.setDisabled(this.seriesList.store.length<1 || !this.chartSettings.getRange()); this.updateMoveButtons(); }, @@ -509,11 +511,12 @@ define([ textTitle: 'Chart Data', txtEmpty: 'This field is required', - textInvalidRange: 'ERROR! Invalid cells range', + textInvalidRange: 'Invalid cells range', + textError: 'ERROR!', textSelectData: 'Select data', - errorMaxRows: 'ERROR! The maximum number of data series per chart is 255.', + errorMaxRows: 'The maximum number of data series per chart is 255.', errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', - errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.', + errorMaxPoints: 'The maximum number of points in series per chart is 4096.', textSeries: 'Legend Entries (Series)', textAdd: 'Add', textEdit: 'Edit', diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index 2df1ce630f..be783d2f3c 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -267,6 +267,8 @@ define([ Common.UI.warning({msg: this.errorMaxRows}); } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) Common.UI.warning({msg: this.errorMaxPoints}); + else + Common.UI.warning({msg: this.textInvalidRange}); return false; }, @@ -332,6 +334,11 @@ define([ txtChoose: 'Choose range', textSelectData: 'Select data', txtEmpty : 'This field is required', - txtInvalidRange: 'ERROR! Invalid cells range' + textInvalidRange: 'Invalid cells range', + textError: 'ERROR!', + errorMaxRows: 'The maximum number of data series per chart is 255.', + errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', + errorMaxPoints: 'The maximum number of points in series per chart is 4096.' + }, SSE.Views.ChartDataRangeDialog || {})) }); From 96704a1f1fe0097d47c863e4846f94066d500431 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 8 Jul 2020 16:07:57 +0300 Subject: [PATCH 12/17] [SSE] Remove data settings from chart settings dialog (use chart data dialog instead) --- .../app/template/ChartSettingsDlg.template | 42 ++-- .../main/app/view/ChartSettingsDlg.js | 203 +++++++++--------- 2 files changed, 123 insertions(+), 122 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index afad9d9856..f73333cf48 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -9,27 +9,27 @@ -
-
- - - - - - - - - - -
- -
-
-
- -
-
-
+ + + + + + + + + + + + + + + + + + + + +
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 11c552409d..d2b2bc4190 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -59,7 +59,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' _.extend(this.options, { title: this.textTitle, items: [ - {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData}, + {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textType}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis}, @@ -138,26 +138,26 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnChartType.render($('#chart-dlg-button-type')); this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); - this.cmbDataDirect = new Common.UI.ComboBox({ - el : $('#chart-dlg-combo-range'), - menuStyle : 'min-width: 120px;', - editable : false, - cls : 'input-group-nr', - data : [ - { value: 0, displayValue: this.textDataRows }, - { value: 1, displayValue: this.textDataColumns } - ] - }); - - this.txtDataRange = new Common.UI.InputFieldBtn({ - el : $('#chart-dlg-txt-range'), - name : 'range', - style : 'width: 100%;', - btnHint : this.textSelectData, - allowBlank : true, - validateOnChange: true - }); - this.txtDataRange.on('button:click', _.bind(this.onSelectData, this)); + // this.cmbDataDirect = new Common.UI.ComboBox({ + // el : $('#chart-dlg-combo-range'), + // menuStyle : 'min-width: 120px;', + // editable : false, + // cls : 'input-group-nr', + // data : [ + // { value: 0, displayValue: this.textDataRows }, + // { value: 1, displayValue: this.textDataColumns } + // ] + // }); + // + // this.txtDataRange = new Common.UI.InputFieldBtn({ + // el : $('#chart-dlg-txt-range'), + // name : 'range', + // style : 'width: 100%;', + // btnHint : this.textSelectData, + // allowBlank : true, + // validateOnChange: true + // }); + // this.txtDataRange.on('button:click', _.bind(this.onSelectData, this)); this.cmbChartTitle = new Common.UI.ComboBox({ el : $('#chart-dlg-combo-chart-title'), @@ -1293,24 +1293,24 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this._noApply = false; - var value = props.getRange(); - this.txtDataRange.setValue((value) ? value : ''); - this.dataRangeValid = value; - - this.txtDataRange.validation = function(value) { - if (_.isEmpty(value)) { - if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true); - return true; - } - - if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); - - var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); - return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; - }; - - this.cmbDataDirect.setDisabled(value===null); - this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); + // var value = props.getRange(); + // this.txtDataRange.setValue((value) ? value : ''); + // this.dataRangeValid = value; + // + // this.txtDataRange.validation = function(value) { + // if (_.isEmpty(value)) { + // if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true); + // return true; + // } + // + // if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); + // + // var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); + // return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; + // }; + // + // this.cmbDataDirect.setDisabled(value===null); + // this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); this.cmbChartTitle.setValue(props.getTitle()); this.cmbLegendPos.setValue(props.getLegendPos()); @@ -1321,7 +1321,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); this.chValue.setValue(this.chartSettings.getShowVal(), true); - value = props.getSeparator(); + var value = props.getSeparator(); this.txtSeparator.setValue((value) ? value : ''); // Vertical Axis @@ -1423,8 +1423,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.chartSettings.putType(type); - this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); - this.chartSettings.putRange(this.txtDataRange.getValue()); + // this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); + // this.chartSettings.putRange(this.txtDataRange.getValue()); this.chartSettings.putTitle(this.cmbChartTitle.getValue()); this.chartSettings.putLegendPos(this.cmbLegendPos.getValue()); @@ -1484,63 +1484,64 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' }, isRangeValid: function() { - if (this.isChart) { - var isvalid; - if (!_.isEmpty(this.txtDataRange.getValue())) { - var rec = this.mnuChartTypePicker.getSelectedRec(), - type = (rec) ? rec.get('type') : this.currentChartType; - - isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, type); - if (isvalid == Asc.c_oAscError.ID.No) - return true; - } else - return true; - - this.setActiveCategory(0); - if (isvalid == Asc.c_oAscError.ID.StockChartError) { - Common.UI.warning({msg: this.errorStockChart}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - Common.UI.warning({msg: this.errorMaxRows}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) - Common.UI.warning({msg: this.errorMaxPoints}); - else - this.txtDataRange.cmpEl.find('input').focus(); - return false; - } else - return true; + return true; + // if (this.isChart) { + // var isvalid; + // if (!_.isEmpty(this.txtDataRange.getValue())) { + // var rec = this.mnuChartTypePicker.getSelectedRec(), + // type = (rec) ? rec.get('type') : this.currentChartType; + // + // isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, type); + // if (isvalid == Asc.c_oAscError.ID.No) + // return true; + // } else + // return true; + // + // this.setActiveCategory(0); + // if (isvalid == Asc.c_oAscError.ID.StockChartError) { + // Common.UI.warning({msg: this.errorStockChart}); + // } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + // Common.UI.warning({msg: this.errorMaxRows}); + // } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) + // Common.UI.warning({msg: this.errorMaxPoints}); + // else + // this.txtDataRange.cmpEl.find('input').focus(); + // return false; + // } else + // return true; }, - onSelectData: function() { - var me = this; - if (me.api) { - me.btnChartType.menu.options.additionalAlign = me.menuAddAlign; - me.btnSparkType.menu.options.additionalAlign = me.menuAddAlign; - - var handlerDlg = function(dlg, result) { - if (result == 'ok') { - me.dataRangeValid = dlg.getSettings(); - me.txtDataRange.setValue(me.dataRangeValid); - me.txtDataRange.checkValidate(); - } - }; - - var win = new SSE.Views.CellRangeDialog({ - handler: handlerDlg - }).on('close', function() { - me.show(); - }); - - var xy = me.$window.offset(); - me.hide(); - win.show(xy.left + 160, xy.top + 125); - win.setSettings({ - api : me.api, - isRows : (me.cmbDataDirect.getValue()==0), - range : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid, - type : Asc.c_oAscSelectionDialogType.Chart - }); - } - }, + // onSelectData: function() { + // var me = this; + // if (me.api) { + // me.btnChartType.menu.options.additionalAlign = me.menuAddAlign; + // me.btnSparkType.menu.options.additionalAlign = me.menuAddAlign; + // + // var handlerDlg = function(dlg, result) { + // if (result == 'ok') { + // me.dataRangeValid = dlg.getSettings(); + // me.txtDataRange.setValue(me.dataRangeValid); + // me.txtDataRange.checkValidate(); + // } + // }; + // + // var win = new SSE.Views.CellRangeDialog({ + // handler: handlerDlg + // }).on('close', function() { + // me.show(); + // }); + // + // var xy = me.$window.offset(); + // me.hide(); + // win.show(xy.left + 160, xy.top + 125); + // win.setSettings({ + // api : me.api, + // isRows : (me.cmbDataDirect.getValue()==0), + // range : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid, + // type : Asc.c_oAscSelectionDialogType.Chart + // }); + // } + // }, onSelectDataLabels: function(obj, rec, e) { var disable = rec.value == Asc.c_oAscChartDataLabelsPos.none; @@ -1614,10 +1615,10 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' show: function() { Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments); - var me = this; - _.delay(function(){ - me.txtDataRange.cmpEl.find('input').focus(); - },50); + // var me = this; + // _.delay(function(){ + // me.txtDataRange.cmpEl.find('input').focus(); + // },50); }, close: function () { From 15dd23ba04a759b5626a7c3282bdb6ac1255006c Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 10 Jul 2020 19:11:55 +0300 Subject: [PATCH 13/17] [SSE] Check chard data --- .../main/app/view/ChartDataDialog.js | 44 ++++++++++++------- .../main/app/view/ChartDataRangeDialog.js | 32 +++++++++++--- .../main/app/view/ChartSettings.js | 29 +++++++----- 3 files changed, 72 insertions(+), 33 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index e2576eacdf..9ef52f845b 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -150,7 +150,8 @@ define([ el: $('#chart-dlg-series-list', this.$window), store: new Common.UI.DataViewStore(), emptyText: '', - scrollAlwaysVisible: true + scrollAlwaysVisible: true, + itemTemplate: _.template('
<%= value %>
') }); this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series'); this.seriesList.on('item:select', _.bind(this.onSelectSeries, this)); @@ -198,7 +199,8 @@ define([ el: $('#chart-dlg-category-list', this.$window), store: new Common.UI.DataViewStore(), emptyText: '', - scrollAlwaysVisible: true + scrollAlwaysVisible: true, + itemTemplate: _.template('
<%= value %>
') }); this.btnEditCategory = new Common.UI.Button({ @@ -239,6 +241,7 @@ define([ this.dataRangeValid = value; this.txtDataRange.validation = function(value) { + return true; if (_.isEmpty(value)) { return true; } @@ -276,9 +279,8 @@ define([ isRangeValid: function() { var isvalid; if (!_.isEmpty(this.txtDataRange.getValue())) { - //change validation!! - isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.dataDirect===0, this.currentChartType); - if (isvalid == Asc.c_oAscError.ID.No) + isvalid = this.chartSettings.isValidRange(this.txtDataRange.getValue()); + if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) return true; } else return true; @@ -300,7 +302,7 @@ define([ if (me.isRangeValid(settings)) { me.dataRangeValid = settings; me.txtDataRange.checkValidate(); - me.chartSettings.putRange(me.dataRangeValid); + me.chartSettings.setRange(me.dataRangeValid); me.updateSeriesList(me.chartSettings.getSeries(), 0); me.updateCategoryList(me.chartSettings.getCatValues()); @@ -314,7 +316,9 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { input.setValue(dlg.getSettings()); - me.changeChartRange(dlg.getSettings()); + _.delay(function(){ + me.changeChartRange(dlg.getSettings()); + },10); } }; @@ -330,7 +334,8 @@ define([ win.setSettings({ api : me.api, range : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid, - type : Asc.c_oAscSelectionDialogType.Chart + type : Asc.c_oAscSelectionDialogType.Chart, + validation: function() {return true;} }); } }, @@ -371,7 +376,7 @@ define([ isScatter = false, me = this; rec && (isScatter = rec.get('series').asc_IsScatter()); - // me.setStartPointHistory(); + me.chartSettings.startEditData(); var series; if (isScatter) { series = me.chartSettings.addScatterSeries(); @@ -382,6 +387,8 @@ define([ if (result == 'ok') { me.updateSeriesList(me.chartSettings.getSeries(), me.seriesList.store.length-1); me.updateButtons(); + me.chartSettings.endEditData(); + me._isEditRanges = false; } }; this.changeDataRange(1, {series: series, isScatter: isScatter}, handlerDlg); @@ -391,7 +398,8 @@ define([ var rec = this.seriesList.getSelectedRec(); if (rec) { var order = rec.get('order'); - // this.chartSettings.deleteSeries(rec.get('index')); + rec.get('series').asc_Remove(); + this.txtDataRange.setValue(this.chartSettings.getRange() || ''); this.updateSeriesList(this.chartSettings.getSeries(), order); } this.updateButtons(); @@ -406,9 +414,11 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { rec.set('value', series.asc_getSeriesName()); + me.chartSettings.endEditData(); + me._isEditRanges = false; } }; - // me.setStartPointHistory(); + me.chartSettings.startEditData(); this.changeDataRange(1, {series: series, isScatter: isScatter }, handlerDlg); } }, @@ -418,10 +428,12 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { me.updateCategoryList(me.chartSettings.getCatValues()); + me.chartSettings.endEditData(); + me._isEditRanges = false; } }; - // me.setStartPointHistory(); - this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, handlerDlg); + me.chartSettings.startEditData(); + this.changeDataRange(0, {category: this.chartSettings.getCatFormula(), values: this.chartSettings.getCatValues()}, handlerDlg); }, changeDataRange: function(type, props, handlerDlg) { @@ -431,10 +443,12 @@ define([ isScatter: !!props.isScatter, handler: handlerDlg }).on('close', function() { + me._isEditRanges && me.chartSettings.cancelEditData(); + me._isEditRanges = false; me.show(); - // me.setEndPointHistory(); when cancel }); + me._isEditRanges = true; var xy = me.$window.offset(); me.hide(); win.show(xy.left + 160, xy.top + 125); @@ -458,7 +472,7 @@ define([ store.add(store.remove(rec), {at: newindex}); rec.set('order', neworder); newrec.set('order', order); - // this.chartSettings.changeSeriesOrder(rec.get('index'), neworder, newrec.get('index'), order); + up ? rec.get('series').asc_MoveUp() : rec.get('series').asc_MoveDown(); this.seriesList.selectRecord(rec); this.seriesList.scrollToRecord(rec); } diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index be783d2f3c..f808df9b86 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -223,7 +223,9 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { input.setValue(dlg.getSettings()); - me.updateRangeData(type, dlg.getSettings()); + _.delay(function(){ + me.updateRangeData(type, dlg.getSettings()); + },10); } }; @@ -246,7 +248,8 @@ define([ win.setSettings({ api : me.api, range : !_.isEmpty(input.getValue()) ? input.getValue() : '', - type : Asc.c_oAscSelectionDialogType.Chart + type : Asc.c_oAscSelectionDialogType.Chart, + validation: function() {return true;} }); } }, @@ -254,9 +257,26 @@ define([ isRangeValid: function(type, value) { var isvalid; if (!_.isEmpty(value)) { - //change validation!! - isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, false, this.chartSettings.getType()); - if (isvalid == Asc.c_oAscError.ID.No) + switch (type) { + case 1: + if (this.props.series) { + isvalid = this.props.series.asc_IsValidName(value); + } else { + isvalid = this.chartSettings.isValidCatFormula(value); + } + break; + case 2: + if (this.props.isScatter) { + isvalid = this.props.series.asc_IsValidXValues(value); + } else { + isvalid = this.props.series.asc_IsValidValues(value); + } + break; + case 3: + isvalid = this.props.series.asc_IsValidYValues(value); + break; + } + if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) return true; } else return true; @@ -300,7 +320,7 @@ define([ break; } } else { - // this.chartSettings.setCatFormula(value); + this.chartSettings.setCatFormula(value); var arr = this.chartSettings.getCatValues(); this.lblRange1.html((this.inputRange1.getValue()!=='') ? ('= ' + (arr ? arr.join('; ') : '')) : this.txtChoose); } diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 0afbfdec4c..e205fb0de7 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -899,22 +899,27 @@ define([ onSelectData: function() { var me = this; - var win, props; + var props; if (me.api){ props = me.api.asc_getChartObject(); if (props) { - (new SSE.Views.ChartDataDialog( - { - chartSettings: props, - api: me.api, - handler: function(result, value) { - if (result == 'ok') { - if (me.api) { - } - } - Common.NotificationCenter.trigger('edit:complete', me); + me._isEditRanges = true; + props.startEdit(); + var win = new SSE.Views.ChartDataDialog({ + chartSettings: props, + api: me.api, + handler: function(result, value) { + if (result == 'ok') { + props.endEdit(); + me._isEditRanges = false; } - })).show(); + Common.NotificationCenter.trigger('edit:complete', me); + } + }).on('close', function() { + me._isEditRanges && props.cancelEdit(); + me._isEditRanges = false; + }); + win.show(); } } }, From ad9cce3946e040f1ea08656af335074fdcd2b31a Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 15 Jul 2020 13:01:05 +0300 Subject: [PATCH 14/17] [SSE] Check chart data --- .../main/app/view/ChartDataDialog.js | 79 ++++++++++------- .../main/app/view/ChartDataRangeDialog.js | 86 +++++++++++-------- 2 files changed, 101 insertions(+), 64 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 9ef52f845b..85fe9ed970 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -123,7 +123,6 @@ define([ this.api = this.options.api; this.chartSettings = this.options.chartSettings; - this.dataRangeValid = ''; this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal; }, @@ -238,16 +237,9 @@ define([ var value = props.getRange(); this.txtDataRange.setValue((value) ? value : ''); - this.dataRangeValid = value; this.txtDataRange.validation = function(value) { return true; - if (_.isEmpty(value)) { - return true; - } - - var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); - return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? (me.textError + ' ' + me.textInvalidRange) : true; }; this.updateSeriesList(props.getSeries(), 0); @@ -261,7 +253,6 @@ define([ }, onDlgBtnClick: function(event) { - var me = this; var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event; if (state == 'ok') { if (!this.isRangeValid()) return; @@ -278,31 +269,43 @@ define([ isRangeValid: function() { var isvalid; - if (!_.isEmpty(this.txtDataRange.getValue())) { - isvalid = this.chartSettings.isValidRange(this.txtDataRange.getValue()); - if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) - return true; - } else + isvalid = this.chartSettings.isValidRange(this.txtDataRange.getValue()); + if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) return true; - if (isvalid == Asc.c_oAscError.ID.StockChartError) { - Common.UI.warning({msg: this.errorStockChart}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - Common.UI.warning({msg: this.errorMaxRows}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) - Common.UI.warning({msg: this.errorMaxPoints}); - else { - Common.UI.warning({msg: this.textInvalidRange}); + var error = this.textInvalidRange; + switch (isvalid) { + case Asc.c_oAscError.ID.StockChartError: + error = this.errorStockChart; + break; + case Asc.c_oAscError.ID.MaxDataSeriesError: + error = this.errorMaxRows; + break; + case Asc.c_oAscError.ID.MaxDataPointsError: + error = this.errorMaxPoints; + break; + case Asc.c_oAscError.ID.ErrorInFormula: + error = this.errorInFormula; + break; + case Asc.c_oAscError.ID.InvalidReference: + error = this.errorInvalidReference; + break; + case Asc.c_oAscError.ID.NoSingleRowCol: + error = this.errorNoSingleRowCol; + break; + case Asc.c_oAscError.ID.NoValues: + error = this.errorNoValues; + break; } + Common.UI.warning({msg: error, maxwidth: 600}); return false; }, changeChartRange: function(settings) { var me = this; if (me.isRangeValid(settings)) { - me.dataRangeValid = settings; me.txtDataRange.checkValidate(); - me.chartSettings.setRange(me.dataRangeValid); + me.chartSettings.setRange(settings); me.updateSeriesList(me.chartSettings.getSeries(), 0); me.updateCategoryList(me.chartSettings.getCatValues()); @@ -333,7 +336,7 @@ define([ win.show(xy.left + 160, xy.top + 125); win.setSettings({ api : me.api, - range : (!_.isEmpty(me.txtDataRange.getValue()) && (me.txtDataRange.checkValidate()==true)) ? me.txtDataRange.getValue() : me.dataRangeValid, + range : me.txtDataRange.getValue(), type : Asc.c_oAscSelectionDialogType.Chart, validation: function() {return true;} }); @@ -357,6 +360,10 @@ define([ this.updateMoveButtons(); }, + updateRange: function() { + this.txtDataRange.setValue(this.chartSettings.getRange() || ''); + }, + updateButtons: function() { this.btnEdit.setDisabled(this.seriesList.store.length<1); this.btnDelete.setDisabled(this.seriesList.store.length<1); @@ -385,6 +392,7 @@ define([ } var handlerDlg = function(dlg, result) { if (result == 'ok') { + me.updateRange(); me.updateSeriesList(me.chartSettings.getSeries(), me.seriesList.store.length-1); me.updateButtons(); me.chartSettings.endEditData(); @@ -399,10 +407,10 @@ define([ if (rec) { var order = rec.get('order'); rec.get('series').asc_Remove(); - this.txtDataRange.setValue(this.chartSettings.getRange() || ''); + this.updateRange(); this.updateSeriesList(this.chartSettings.getSeries(), order); + this.updateButtons(); } - this.updateButtons(); }, onEditSeries: function() { @@ -414,6 +422,8 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { rec.set('value', series.asc_getSeriesName()); + me.updateRange(); + me.updateButtons(); me.chartSettings.endEditData(); me._isEditRanges = false; } @@ -428,6 +438,8 @@ define([ var handlerDlg = function(dlg, result) { if (result == 'ok') { me.updateCategoryList(me.chartSettings.getCatValues()); + me.updateRange(); + me.updateButtons(); me.chartSettings.endEditData(); me._isEditRanges = false; } @@ -475,8 +487,9 @@ define([ up ? rec.get('series').asc_MoveUp() : rec.get('series').asc_MoveDown(); this.seriesList.selectRecord(rec); this.seriesList.scrollToRecord(rec); + this.updateRange(); + this.updateButtons(); } - this.updateMoveButtons(); }, updateSeriesList: function(series, index) { @@ -520,6 +533,7 @@ define([ this.chartSettings.switchRowCol(); this.updateSeriesList(this.chartSettings.getSeries(), 0); this.updateCategoryList(this.chartSettings.getCatValues()); + this.updateRange(); this.updateButtons(); }, @@ -539,6 +553,11 @@ define([ textCategory: 'Horizontal (Category) Axis Labels', textUp: 'Up', textDown: 'Down', - textData: 'Data' - }, SSE.Views.ChartDataDialog || {})) + textData: 'Data', + errorInFormula: "There's an error in formula you entered.", + errorInvalidReference: 'The reference is not valid. Reference must be to an open worksheet.', + errorNoSingleRowCol: 'The reference is not valid. References for titles, values, sizes, or data labels must be a single cell, row, or column.', + errorNoValues: 'To create a chart, the series must contain at least one value.' + +}, SSE.Views.ChartDataDialog || {})) }); diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index f808df9b86..709ee1eb61 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -256,39 +256,53 @@ define([ isRangeValid: function(type, value) { var isvalid; - if (!_.isEmpty(value)) { - switch (type) { - case 1: - if (this.props.series) { - isvalid = this.props.series.asc_IsValidName(value); - } else { - isvalid = this.chartSettings.isValidCatFormula(value); - } - break; - case 2: - if (this.props.isScatter) { - isvalid = this.props.series.asc_IsValidXValues(value); - } else { - isvalid = this.props.series.asc_IsValidValues(value); - } - break; - case 3: - isvalid = this.props.series.asc_IsValidYValues(value); - break; - } - if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) - return true; - } else + switch (type) { + case 1: + if (this.props.series) { + isvalid = this.props.series.asc_IsValidName(value); + } else { + isvalid = this.chartSettings.isValidCatFormula(value); + } + break; + case 2: + if (this.props.isScatter) { + isvalid = this.props.series.asc_IsValidXValues(value); + } else { + isvalid = this.props.series.asc_IsValidValues(value); + } + break; + case 3: + isvalid = this.props.series.asc_IsValidYValues(value); + break; + } + if (isvalid === true || isvalid == Asc.c_oAscError.ID.No) return true; - if (isvalid == Asc.c_oAscError.ID.StockChartError) { - Common.UI.warning({msg: this.errorStockChart}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - Common.UI.warning({msg: this.errorMaxRows}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) - Common.UI.warning({msg: this.errorMaxPoints}); - else - Common.UI.warning({msg: this.textInvalidRange}); + var error = this.textInvalidRange; + switch (isvalid) { + case Asc.c_oAscError.ID.StockChartError: + error = this.errorStockChart; + break; + case Asc.c_oAscError.ID.MaxDataSeriesError: + error = this.errorMaxRows; + break; + case Asc.c_oAscError.ID.MaxDataPointsError: + error = this.errorMaxPoints; + break; + case Asc.c_oAscError.ID.ErrorInFormula: + error = this.errorInFormula; + break; + case Asc.c_oAscError.ID.InvalidReference: + error = this.errorInvalidReference; + break; + case Asc.c_oAscError.ID.NoSingleRowCol: + error = this.errorNoSingleRowCol; + break; + case Asc.c_oAscError.ID.NoValues: + error = this.errorNoValues; + break; + } + Common.UI.warning({msg: error, maxwidth: 600}); return false; }, @@ -334,8 +348,8 @@ define([ if (this.options.handler) { if (state == 'ok') { if (!this.isRangeValid(1, this.inputRange1.getValue())) return; - if (this.type==1 && !this.isRangeValid(2, this.inputRange1.getValue())) return; - if (this.type==1 && this.isScatter && !this.isRangeValid(3, this.inputRange1.getValue())) return; + if (this.type==1 && !this.isRangeValid(2, this.inputRange2.getValue())) return; + if (this.type==1 && this.isScatter && !this.isRangeValid(3, this.inputRange3.getValue())) return; } if (this.options.handler.call(this, this, state)) return; @@ -358,7 +372,11 @@ define([ textError: 'ERROR!', errorMaxRows: 'The maximum number of data series per chart is 255.', errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', - errorMaxPoints: 'The maximum number of points in series per chart is 4096.' + errorMaxPoints: 'The maximum number of points in series per chart is 4096.', + errorInFormula: "There's an error in formula you entered.", + errorInvalidReference: 'The reference is not valid. Reference must be to an open worksheet.', + errorNoSingleRowCol: 'The reference is not valid. References for titles, values, sizes, or data labels must be a single cell, row, or column.', + errorNoValues: 'To create a chart, the series must contain at least one value.' }, SSE.Views.ChartDataRangeDialog || {})) }); From 57c038ff0c4a3db96d1c3779010bd86f07f36398 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 15 Jul 2020 13:21:32 +0300 Subject: [PATCH 15/17] [SSE] Check chart type --- .../main/app/view/ChartSettingsDlg.js | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index d2b2bc4190..cbd4b42a7e 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -1484,31 +1484,29 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' }, isRangeValid: function() { - return true; - // if (this.isChart) { - // var isvalid; - // if (!_.isEmpty(this.txtDataRange.getValue())) { - // var rec = this.mnuChartTypePicker.getSelectedRec(), - // type = (rec) ? rec.get('type') : this.currentChartType; - // - // isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, type); - // if (isvalid == Asc.c_oAscError.ID.No) - // return true; - // } else - // return true; - // - // this.setActiveCategory(0); - // if (isvalid == Asc.c_oAscError.ID.StockChartError) { - // Common.UI.warning({msg: this.errorStockChart}); - // } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - // Common.UI.warning({msg: this.errorMaxRows}); - // } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) - // Common.UI.warning({msg: this.errorMaxPoints}); - // else - // this.txtDataRange.cmpEl.find('input').focus(); - // return false; - // } else - // return true; + if (this.isChart) { + var isvalid, + range = this.chartSettings.getRange(); + if (!_.isEmpty(range)) { + var rec = this.mnuChartTypePicker.getSelectedRec(), + type = (rec) ? rec.get('type') : this.currentChartType; + + isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, range, true, !this.chartSettings.getInColumns(), type); + if (isvalid == Asc.c_oAscError.ID.No) + return true; + } else + return true; + + this.setActiveCategory(0); + if (isvalid == Asc.c_oAscError.ID.StockChartError) { + Common.UI.warning({msg: this.errorStockChart}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + Common.UI.warning({msg: this.errorMaxRows}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError) + Common.UI.warning({msg: this.errorMaxPoints}); + return false; + } else + return true; }, // onSelectData: function() { From f11ee3f5a24623e78ac14788b3f25c5ce54b3e35 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 15 Jul 2020 13:48:58 +0300 Subject: [PATCH 16/17] [SSE] Add translation --- .../main/app/view/ChartDataDialog.js | 6 ++-- .../main/app/view/ChartDataRangeDialog.js | 2 -- apps/spreadsheeteditor/main/locale/en.json | 36 +++++++++++++++++++ 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 85fe9ed970..0cc7000a71 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -65,7 +65,7 @@ define([ '', '', '', '', '', @@ -538,9 +538,7 @@ define([ }, textTitle: 'Chart Data', - txtEmpty: 'This field is required', textInvalidRange: 'Invalid cells range', - textError: 'ERROR!', textSelectData: 'Select data', errorMaxRows: 'The maximum number of data series per chart is 255.', errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', @@ -553,7 +551,7 @@ define([ textCategory: 'Horizontal (Category) Axis Labels', textUp: 'Up', textDown: 'Down', - textData: 'Data', + textData: 'Chart data range', errorInFormula: "There's an error in formula you entered.", errorInvalidReference: 'The reference is not valid. Reference must be to an open worksheet.', errorNoSingleRowCol: 'The reference is not valid. References for titles, values, sizes, or data labels must be a single cell, row, or column.', diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js index 709ee1eb61..8fe5b5db25 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js @@ -367,9 +367,7 @@ define([ txtAxisLabel: 'Axis label range', txtChoose: 'Choose range', textSelectData: 'Select data', - txtEmpty : 'This field is required', textInvalidRange: 'Invalid cells range', - textError: 'ERROR!', errorMaxRows: 'The maximum number of data series per chart is 255.', errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', errorMaxPoints: 'The maximum number of points in series per chart is 4096.', diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 5c18b0aedf..b19f9fbe36 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -1272,6 +1272,42 @@ "SSE.Views.CellSettings.textControl": "Text Control", "SSE.Views.CellSettings.strWrap": "Wrap text", "SSE.Views.CellSettings.strShrink": "Shrink to fit", + "SSE.Views.ChartDataDialog.textTitle": "Chart Data", + "SSE.Views.ChartDataDialog.textInvalidRange": "Invalid cells range", + "SSE.Views.ChartDataDialog.textSelectData": "Select data", + "SSE.Views.ChartDataDialog.errorMaxRows": "The maximum number of data series per chart is 255.", + "SSE.Views.ChartDataDialog.errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.", + "SSE.Views.ChartDataDialog.errorMaxPoints": "The maximum number of points in series per chart is 4096.", + "SSE.Views.ChartDataDialog.textSeries": "Legend Entries (Series)", + "SSE.Views.ChartDataDialog.textAdd": "Add", + "SSE.Views.ChartDataDialog.textEdit": "Edit", + "SSE.Views.ChartDataDialog.textDelete": "Remove", + "SSE.Views.ChartDataDialog.textSwitch": "Switch Row/Column", + "SSE.Views.ChartDataDialog.textCategory": "Horizontal (Category) Axis Labels", + "SSE.Views.ChartDataDialog.textUp": "Up", + "SSE.Views.ChartDataDialog.textDown": "Down", + "SSE.Views.ChartDataDialog.textData": "Chart data range", + "SSE.Views.ChartDataDialog.errorInFormula": "There's an error in formula you entered.", + "SSE.Views.ChartDataDialog.errorInvalidReference": "The reference is not valid. Reference must be to an open worksheet.", + "SSE.Views.ChartDataDialog.errorNoSingleRowCol": "The reference is not valid. References for titles, values, sizes, or data labels must be a single cell, row, or column.", + "SSE.Views.ChartDataDialog.errorNoValues": "To create a chart, the series must contain at least one value.", + "SSE.Views.ChartDataRangeDialog.txtTitleSeries": "Edit Series", + "SSE.Views.ChartDataRangeDialog.txtTitleCategory": "Axis Labels", + "SSE.Views.ChartDataRangeDialog.txtSeriesName": "Series name", + "SSE.Views.ChartDataRangeDialog.txtValues": "Values", + "SSE.Views.ChartDataRangeDialog.txtXValues": "X Values", + "SSE.Views.ChartDataRangeDialog.txtYValues": "Y Values", + "SSE.Views.ChartDataRangeDialog.txtAxisLabel": "Axis label range", + "SSE.Views.ChartDataRangeDialog.txtChoose": "Choose range", + "SSE.Views.ChartDataRangeDialog.textInvalidRange": "Invalid cells range", + "SSE.Views.ChartDataRangeDialog.textSelectData": "Select data", + "SSE.Views.ChartDataRangeDialog.errorMaxRows": "The maximum number of data series per chart is 255.", + "SSE.Views.ChartDataRangeDialog.errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.", + "SSE.Views.ChartDataRangeDialog.errorMaxPoints": "The maximum number of points in series per chart is 4096.", + "SSE.Views.ChartDataRangeDialog.errorInFormula": "There's an error in formula you entered.", + "SSE.Views.ChartDataRangeDialog.errorInvalidReference": "The reference is not valid. Reference must be to an open worksheet.", + "SSE.Views.ChartDataRangeDialog.errorNoSingleRowCol": "The reference is not valid. References for titles, values, sizes, or data labels must be a single cell, row, or column.", + "SSE.Views.ChartDataRangeDialog.errorNoValues": "To create a chart, the series must contain at least one value.", "SSE.Views.ChartSettings.strLineWeight": "Line Weight", "SSE.Views.ChartSettings.strSparkColor": "Color", "SSE.Views.ChartSettings.strTemplate": "Template", From 36e04823c442b15e5c6cf2c573f451a0f1841a88 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 17 Jul 2020 13:51:13 +0300 Subject: [PATCH 17/17] [SSE Update categories list when change series --- apps/spreadsheeteditor/main/app/view/ChartDataDialog.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js index 0cc7000a71..496d0007c0 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js @@ -394,6 +394,7 @@ define([ if (result == 'ok') { me.updateRange(); me.updateSeriesList(me.chartSettings.getSeries(), me.seriesList.store.length-1); + me.updateCategoryList(me.chartSettings.getCatValues()); me.updateButtons(); me.chartSettings.endEditData(); me._isEditRanges = false; @@ -409,6 +410,7 @@ define([ rec.get('series').asc_Remove(); this.updateRange(); this.updateSeriesList(this.chartSettings.getSeries(), order); + this.updateCategoryList(this.chartSettings.getCatValues()); this.updateButtons(); } }, @@ -423,6 +425,7 @@ define([ if (result == 'ok') { rec.set('value', series.asc_getSeriesName()); me.updateRange(); + me.updateCategoryList(me.chartSettings.getCatValues()); me.updateButtons(); me.chartSettings.endEditData(); me._isEditRanges = false; @@ -488,6 +491,7 @@ define([ this.seriesList.selectRecord(rec); this.seriesList.scrollToRecord(rec); this.updateRange(); + this.updateCategoryList(this.chartSettings.getCatValues()); this.updateButtons(); } },
', - '', + '', '