From 7bbc665a57b28d3471ef88baf57730defedc1248 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Thu, 9 Nov 2023 22:42:16 +0300 Subject: [PATCH] [SSE] Show preview for recommended charts --- .../less/advanced-settings-window.less | 20 ++++ .../main/app/controller/Toolbar.js | 66 ++++--------- ...ommendedDialog.js => ChartWizardDialog.js} | 98 ++++++++++++++----- 3 files changed, 114 insertions(+), 70 deletions(-) rename apps/spreadsheeteditor/main/app/view/{ChartRecommendedDialog.js => ChartWizardDialog.js} (65%) diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less index 771458aa04..aa9d68f79a 100644 --- a/apps/common/main/resources/less/advanced-settings-window.less +++ b/apps/common/main/resources/less/advanced-settings-window.less @@ -142,3 +142,23 @@ height: @input-height-base; } +.dataview { + &.focus-inner { + > .item { + &:hover, + &.selected { + .box-shadow(0 0 0 1px @border-preview-select-ie); + .box-shadow(0 0 0 @scaled-one-px-value @border-preview-select); + } + } + &:focus:not(.disabled) { + > .item { + &:hover, + &.selected { + .box-shadow(0 0 0 2px @border-preview-select-ie); + .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select); + } + } + } + } +} diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 7f5726ef88..0df4218694 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -64,7 +64,7 @@ define([ 'spreadsheeteditor/main/app/view/SlicerAddDialog', 'spreadsheeteditor/main/app/view/AdvancedSeparatorDialog', 'spreadsheeteditor/main/app/view/CreateSparklineDialog', - 'spreadsheeteditor/main/app/view/ChartRecommendedDialog' + 'spreadsheeteditor/main/app/view/ChartWizardDialog' ], function () { 'use strict'; SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({ @@ -5155,55 +5155,24 @@ define([ onChartRecommendedClick: function() { var me = this, - info = me.api.asc_getCellInfo(), - seltype = info.asc_getSelectionType(), - ischartedit = ( seltype == Asc.c_oAscSelectionType.RangeChart || seltype == Asc.c_oAscSelectionType.RangeChartText), - props = me.api.asc_getChartObject(true); // don't lock chart object - (new SSE.Views.ChartRecommendedDialog({ + recommended = me.api.asc_getRecommendedChartData(); + if (!recommended) { + Common.UI.warning({ + msg: me.warnNoRecommended, + maxwidth: 600, + callback: function(btn) { + Common.NotificationCenter.trigger('edit:complete', me.toolbar); + } + }); + return; + } + + (new SSE.Views.ChartWizardDialog({ api: me.api, - props: props, - charts: [Asc.c_oAscChartTypeSettings.barStackedPer3d, Asc.c_oAscChartTypeSettings.pie3d, Asc.c_oAscChartTypeSettings.barNormal], + props: {recommended: recommended, all: []}, handler: function(result, value) { if (result == 'ok') { - if (me.api) { - var type = value.type; - if (type!==null) { - if (ischartedit) - props.changeType(type); - else { - props.putType(type); - var range = props.getRange(), - isvalid = (!_.isEmpty(range)) ? me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, range, true, props.getInRows(), props.getType()) : Asc.c_oAscError.ID.No; - if (isvalid == Asc.c_oAscError.ID.No) { - me.api.asc_addChartDrawingObject(props); - } else { - var msg = me.txtInvalidRange; - switch (isvalid) { - case Asc.c_oAscError.ID.StockChartError: - msg = me.errorStockChart; - break; - case Asc.c_oAscError.ID.MaxDataSeriesError: - msg = me.errorMaxRows; - break; - case Asc.c_oAscError.ID.ComboSeriesError: - msg = me.errorComboSeries; - break; - case Asc.c_oAscError.ID.MaxDataPointsError: - msg = me.errorMaxPoints; - break; - } - Common.UI.warning({ - msg: msg, - callback: function () { - _.defer(function (btn) { - Common.NotificationCenter.trigger('edit:complete', me.toolbar); - }) - } - }); - } - } - } - } + me.api && me.api.asc_addChartSpace(value); } Common.NotificationCenter.trigger('edit:complete', me.toolbar); } @@ -5590,7 +5559,8 @@ define([ textRating: 'Ratings', txtLockSort: 'Data is found next to your selection, but you do not have sufficient permissions to change those cells.
Do you wish to continue with the current selection?', textRecentlyUsed: 'Recently Used', - errorMaxPoints: 'The maximum number of points in series per chart is 4096.' + errorMaxPoints: 'The maximum number of points in series per chart is 4096.', + warnNoRecommended: 'To create a chart, select the cells that contain the data you\'d like to use.
If you have names for the rows and columns and you\'d like use them as labels, include them in your selection.' }, SSE.Controllers.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js b/apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js similarity index 65% rename from apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js rename to apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js index f3e8f89898..acceaf855e 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartWizardDialog.js @@ -30,7 +30,7 @@ * */ /** - * ChartRecommendedDialog.js + * ChartWizardDialog.js * * Created by Julia Radzhabova on 02/11/23 * Copyright (c) 2023 Ascensio System SIA. All rights reserved. @@ -42,10 +42,10 @@ define(['common/main/lib/view/AdvancedSettingsWindow', ], function () { 'use strict'; - SSE.Views.ChartRecommendedDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ + SSE.Views.ChartWizardDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { - contentWidth: 350, - contentHeight: 330, + contentWidth: 458, + contentHeight: 400, toggleGroup: 'chart-recommend-group', storageName: 'sse-chart-recommend-category' }, @@ -55,14 +55,17 @@ define(['common/main/lib/view/AdvancedSettingsWindow', charts = [], groups = [], chartData = Common.define.chartData.getChartData(); - (options.charts || []).forEach(function(chart) { - for (var i=0; i0) && groups.push({panelId: 'id-chart-recommended-rec', panelCaption: me.textRecommended, groupId: 'rec', charts: charts}); Common.define.chartData.getChartGroupData().forEach(function(group) { var charts = []; @@ -83,21 +86,21 @@ define(['common/main/lib/view/AdvancedSettingsWindow', '', '', '
', - '
', + '
', '', '', - '', '', '', '', '', '', '', '', '
', + '', '', '
', - '
', + '
', '
', @@ -115,9 +118,10 @@ define(['common/main/lib/view/AdvancedSettingsWindow', }, options); Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); - this._originalProps = this.options.props; - this._charts = this.options.charts; this._currentChartType = null; + this._currentChartSpace = null; + this._currentPreviews = []; + this._currentTabSettings = null; }, render: function() { @@ -143,11 +147,31 @@ define(['common/main/lib/view/AdvancedSettingsWindow', if (pressed) { $window.find('#id-' + item.groupId + '-lbl').text(chart.tip); me._currentChartType = chart.type; + me.updatePreview(); } }); item.chartButtons.push(btn); me.chartButtons.push(btn); }); + item.listViewEl = $window.find('#' + item.panelId + ' .preview-list'); + item.divPreviewEl = $window.find('#' + item.panelId + ' .preview-one'); + item.divPreview = $window.find('#id-' + item.groupId + '-preview'); + item.listPreview = new Common.UI.DataView({ + el: $window.find('#id-' + item.groupId + '-list-preview'), + cls: 'focus-inner', + store: new Common.UI.DataViewStore(), + itemTemplate : _.template([ + '
', + ' style="visibility: hidden;" <% } %>/>', + '
' + ].join('')), + tabindex: 1 + }); + item.listPreview.on('item:select', function(dataView, itemView, record) { + if (record) { + me._currentChartSpace = record.get('data'); + } + }); }); this.afterRender(); @@ -162,6 +186,8 @@ define(['common/main/lib/view/AdvancedSettingsWindow', Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index); + this.fillPreviews(index); + var buttons = this.options.items[index].chartButtons; if (buttons.length>0) { buttons[0].toggle(true); @@ -171,23 +197,51 @@ define(['common/main/lib/view/AdvancedSettingsWindow', } }, + fillPreviews: function(index) { + if (index===0) + this._currentPreviews = this.options.props.recommended; + else + this._currentPreviews = this.options.props.all; + this._currentTabSettings = this.options.items[index]; + }, + + updatePreview: function() { + if (this._currentPreviews[this._currentChartType]) { + var charts = this._currentPreviews[this._currentChartType]; + this._currentTabSettings.listViewEl.toggleClass('hidden', charts.length===1); + this._currentTabSettings.divPreviewEl.toggleClass('hidden', charts.length>1); + if (charts.length===1) { + this._currentChartSpace = charts[0]; + this._currentTabSettings.divPreview.css('background-image', 'url(' + this._currentChartSpace.asc_getPreview() + ')'); + } else if (charts.length>1) { + var store = this._currentTabSettings.listPreview.store, + arr = []; + for (var i = 0; i < charts.length; i++) { + arr.push(new Common.UI.DataViewModel({ + imageUrl: charts[i].asc_getPreview(), + data: charts[i] + })); + } + store.reset(arr); + this._currentTabSettings.listPreview.selectByIndex(0); + } + } + }, + afterRender: function() { - this._setDefaults(this._originalProps); + this._setDefaults(this.options.props); this.setActiveCategory(0); }, _setDefaults: function(props) { - if (props){ - - } }, getSettings: function() { - return { type: this._currentChartType} ; + return this._currentChartSpace; }, textTitle: 'Insert Chart', textRecommended: 'Recommended' - }, SSE.Views.ChartRecommendedDialog || {})); + }, SSE.Views.ChartWizardDialog || {})); }); \ No newline at end of file