diff --git a/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js b/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js
new file mode 100644
index 0000000000..71d52ae5ad
--- /dev/null
+++ b/apps/spreadsheeteditor/main/app/view/ChartRecommendedDialog.js
@@ -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) { %>',
+ '
',
+ '
',
+ '
',
+ '<% _.each(group.charts, function(chart) { %>',
+ '
',
+ '<% }); %>',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ '',
+ '| ',
+ '',
+ ' | ',
+ '
',
+ '',
+ '| ',
+ '',
+ ' | ',
+ '
',
+ '',
+ '| ',
+ '',
+ ' | ',
+ '
',
+ '
',
+ '
',
+ '
',
+ '<% }); %>',
+ ].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 || {}));
+});
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 64aa091b24..4949dae084 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -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 || {}));
});
\ No newline at end of file