pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 15:06:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

[SSE] Bug 63223: add recommended charts

Browse Source
This commit is contained in:
Julia Radzhabova
2023-11-03 21:51:33 +03:00
parent 12b9bd3be8
commit 245fffc6aa
5 changed files with 301 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/common/main/resources/less/buttons.less
View File

@ -950,6 +950,38 @@
}
}
&.svg-chartlist {
width: 40px;
height: 40px;
.icon {
width: 40px;
height: 40px;
}
&:hover:not(.disabled) {
svg.icon {
opacity: 1;
}
}
&:active,
&.active {
&:not(.disabled) {
svg.icon {
fill: @icon-normal-pressed-ie;
fill: @icon-normal-pressed;
opacity: 1;
}
}
}
svg.icon {
fill: @icon-normal-ie;
fill: @icon-normal;
opacity: 1;
}
}
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control;
.border-radius(@border-radius-small);

64
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View File

@ -63,7 +63,8 @@ define([
'spreadsheeteditor/main/app/view/FormatRulesManagerDlg',
'spreadsheeteditor/main/app/view/SlicerAddDialog',
'spreadsheeteditor/main/app/view/AdvancedSeparatorDialog',
'spreadsheeteditor/main/app/view/CreateSparklineDialog'
'spreadsheeteditor/main/app/view/CreateSparklineDialog',
'spreadsheeteditor/main/app/view/ChartRecommendedDialog'
], function () { 'use strict';
SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({
@ -487,7 +488,8 @@ define([
if (toolbar.btnCondFormat.rendered) {
toolbar.btnCondFormat.menu.on('show:before', _.bind(this.onShowBeforeCondFormat, this, this.toolbar, 'toolbar'));
}
Common.Gateway.on('insertimage', _.bind(this.insertImage, this));
toolbar.btnInsertChartRecommend.on('click', _.bind(this.onChartRecommendedClick, this));
Common.Gateway.on('insertimage', _.bind(this.insertImage, this));
this.onSetupCopyStyleButton();
}
@ -4343,7 +4345,7 @@ define([
});
toolbar.lockToolbar(Common.enumLock.coAuthText, is_objLocked);
toolbar.lockToolbar(Common.enumLock.coAuthText, is_objLocked && (seltype==Asc.c_oAscSelectionType.RangeChart || seltype==Asc.c_oAscSelectionType.RangeChartText), { array: [toolbar.btnInsertChart] } );
toolbar.lockToolbar(Common.enumLock.coAuthText, is_objLocked && (seltype==Asc.c_oAscSelectionType.RangeChart || seltype==Asc.c_oAscSelectionType.RangeChartText), { array: [toolbar.btnInsertChart, toolbar.btnInsertChartRecommend] } );
toolbar.lockToolbar(Common.enumLock.inSmartartInternal, is_smartart_internal);
}
@ -5151,6 +5153,62 @@ define([
this.toolbar._isEyedropperStart = false;
},
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({
api: me.api,
props: props,
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);
})
}
});
}
}
}
}
}
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
}
})).show();
},
textEmptyImgUrl : 'You need to specify image URL.',
warnMergeLostData : 'Operation can destroy data in the selected cells.<br>Continue?',
textWarning : 'Warning',

6
apps/spreadsheeteditor/main/app/template/Toolbar.template
View File

@ -139,9 +139,13 @@
<span class="btn-slot text x-huge" id="slot-btn-insshape"></span>
<span class="btn-slot text x-huge" id="slot-btn-instext"></span>
<span class="btn-slot text x-huge" id="slot-btn-instextart"></span>
<span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-insrecommend"></span>
<span class="btn-slot text x-huge" id="slot-btn-inschart"></span>
<span class="btn-slot text x-huge" id="slot-btn-inssparkline"></span>
<span class="btn-slot text x-huge" id="slot-btn-inssmartart"></span>
</div>
<div class="separator long"></div>
<div class="group">

186
apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js Normal file
View File

@ -0,0 +1,186 @@
/*
* (c) Copyright Ascensio System SIA 2010-2023
*
* 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-6 Ernesta Birznieka-Upish
* 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
*
*/
/**
* ChartRecommendedDialog.js
*
* Created by Julia Radzhabova on 02/11/23
* Copyright (c) 2023 Ascensio System SIA. All rights reserved.
*
*/
define(['common/main/lib/view/AdvancedSettingsWindow',
'common/main/lib/component/Button',
'common/main/lib/component/DataView'
], function () {
'use strict';
SSE.Views.ChartRecommendedDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 350,
contentHeight: 330,
toggleGroup: 'chart-recommend-group',
storageName: 'sse-chart-recommend-category'
},
initialize : function(options) {
var groups = [{panelId: 'id-chart-recommended', panelCaption: this.textRecommended, groupId: '', charts: []}],
chartData = Common.define.chartData.getChartData();
Common.define.chartData.getChartGroupData().forEach(function(group) {
var charts = [];
if (group.id!=='') {
chartData.forEach(function(item){
(group.id===item.group) && charts.push(item);
});
}
groups.push({panelId: 'id-chart-recommended' + group.id, panelCaption: group.caption, groupId: group.id, charts: charts});
});
var template = [
'<% _.each(groups, function(group) { %>',
'<div id="<%= group.panelId %>" class="settings-panel">',
'<div class="inner-content">',
'<div>',
'<% _.each(group.charts, function(chart) { %>',
'<div id="id-chart-recommended-type-btn-<%= chart.type %>" class="margin-right-5" style="display: inline-block;margin-bottom:8px;"></div>',
'<% }); %>',
'</div>',
'</div>',
'<div class="separator horizontal padding-small"></div>',
'<div class="inner-content">',
'<table cols="1" style="width: 100%;">',
'<tr>',
'<td class="padding-small">',
'<label class="header" id="id-chart-recommended-lbl-<%= group.groupId %>"></label>',
'</td>',
'</tr>',
'<tr class="preview-list hidden">',
'<td class="padding-small">',
'<div id="id-chart-recommended-list-preview-<%= group.groupId %>" class="preview-canvas-container" style="width:100%; height: 176px;"></div>',
'</td>',
'</tr>',
'<tr class="preview-one">',
'<td class="padding-small">',
'<div id="id-chart-recommended-preview-<%= group.groupId %>" class="preview-canvas-container" style="width:100%; height: 176px;"></div>',
'</td>',
'</tr>',
'</table>',
'</div>',
'</div>',
'<% }); %>',
].join('');
_.extend(this.options, {
title: this.textTitle,
items: groups,
contentTemplate: _.template(template)({
groups: groups,
scope: this
})
}, options);
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._originalProps = this.options.props;
this._changedProps = null;
this._currentChartType = null;
},
render: function() {
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
var me = this,
$window = this.getChild();
this.chartButtons = [];
this.options.items.forEach(function(item) {
item.chartButtons = [];
if (item.groupId!=='') {
item.charts.forEach(function(chart, index){
var btn = new Common.UI.Button({
parentEl: $window.find('#id-chart-recommended-type-btn-' + chart.type),
cls: 'btn-options huge-1 svg-chartlist',
iconCls: 'svgicon ' + 'chart-' + chart.iconCls,
chart: chart,
hint: chart.tip,
enableToggle: true,
allowDepress: false,
toggleGroup : 'toggle-' + item.groupId
});
btn.on('toggle', function() {
$window.find('#id-chart-recommended-lbl-' + item.groupId).text(chart.tip);
me._currentChartType = chart.type;
});
item.chartButtons.push(btn);
me.chartButtons.push(btn);
});
}
});
this.afterRender();
},
getFocusedComponents: function() {
return this.btnsCategory.concat(this.chartButtons).concat(this.getFooterButtons());
},
onCategoryClick: function(btn, index) {
Common.Views.AdvancedSettingsWindow.prototype.onCategoryClick.call(this, btn, index);
var buttons = this.options.items[index].chartButtons;
if (buttons.length>0) {
buttons[0].toggle(true);
this._currentChartType = buttons[0].options.chart.type;
setTimeout(function(){
buttons[0].focus();
}, 10);
}
},
afterRender: function() {
this._setDefaults(this._originalProps);
// if (this.storageName) { // always open tab Recommended
// var value = Common.localStorage.getItem(this.storageName);
// this.setActiveCategory((value!==null) ? parseInt(value) : 0);
// }
},
_setDefaults: function(props) {
if (props){
}
},
getSettings: function() {
return { type: this._currentChartType} ;
},
textTitle: 'Insert Chart',
textRecommended: 'Recommended'
}, SSE.Views.ChartRecommendedDialog || {}));
});

19
apps/spreadsheeteditor/main/app/view/Toolbar.js
View File

@ -1248,6 +1248,17 @@ define([
dataHintOffset: 'small'
});
me.btnInsertChartRecommend = new Common.UI.Button({
id : 'tlbtn-insertchartrecommend',
cls : 'btn-toolbar x-huge icon-top',
iconCls : 'toolbar__icon btn-insertchart',
lock : [_set.editCell, _set.lostConnect, _set.coAuth, _set.coAuthText, _set['Objects']],
caption : me.capInsertChartRecommend,
dataHint : '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnInsertSparkline = new Common.UI.Button({
id : 'tlbtn-insertsparkline',
cls : 'btn-toolbar x-huge icon-top',
@ -2168,7 +2179,7 @@ define([
me.btnInsertText, me.btnInsertTextArt, me.btnSortUp, me.btnSortDown, me.btnSetAutofilter, me.btnClearAutofilter,
me.btnTableTemplate, me.btnCellStyle, me.btnPercentStyle, me.btnCurrencyStyle, me.btnDecDecimal, me.btnAddCell, me.btnDeleteCell, me.btnCondFormat,
me.cmbNumberFormat, me.btnBorders, me.btnInsertImage, me.btnInsertHyperlink,
me.btnInsertChart, me.btnColorSchemas, me.btnInsertSparkline,
me.btnInsertChart, me.btnInsertChartRecommend, me.btnColorSchemas, me.btnInsertSparkline,
me.btnCopy, me.btnPaste, me.btnCut, me.btnSelectAll, me.listStyles, me.btnPrint,
/*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle,
me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPageBreak, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale,
@ -2355,6 +2366,7 @@ define([
_injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
_injectComponent('#slot-btn-search', this.btnSearch);
_injectComponent('#slot-btn-inschart', this.btnInsertChart);
_injectComponent('#slot-btn-insrecommend', this.btnInsertChartRecommend);
_injectComponent('#slot-btn-inssparkline', this.btnInsertSparkline);
_injectComponent('#slot-btn-inssmartart', this.btnInsertSmartArt);
_injectComponent('#slot-field-styles', this.listStyles);
@ -2430,6 +2442,7 @@ define([
_updateHint(this.btnInsertTable, this.tipInsertTable);
_updateHint(this.btnInsertImage, this.tipInsertImage);
_updateHint(this.btnInsertChart, this.tipInsertChartSpark);
_updateHint(this.btnInsertChartRecommend, this.tipInsertChartRecommend);
_updateHint(this.btnInsertSparkline, this.tipInsertSpark);
_updateHint(this.btnInsertSmartArt, this.tipInsertSmartArt);
_updateHint(this.btnInsertText, [this.tipInsertHorizontalText ,this.tipInsertText]);
@ -3688,7 +3701,9 @@ define([
tipPageBreak: 'Add a break where you want the next page to begin in the printed copy',
textInsPageBreak: 'Insert page break',
textDelPageBreak: 'Remove page break',
textResetPageBreak: 'Reset all page breaks'
textResetPageBreak: 'Reset all page breaks',
capInsertChartRecommend: 'Recommended Chart',
tipInsertChartRecommend: 'Insert recommended chart'
}, SSE.Views.Toolbar || {}));
});