Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Add settings for chart type

Browse source
This commit is contained in:
Julia Radzhabova 2020-12-04 11:27:27 +03:00
parent 51b0b8896c
commit 251dea4412
5 changed files with 441 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/common/main/lib/component/DataView.js
View file

@ -200,11 +200,12 @@ define([
allowScrollbar: true,
scrollAlwaysVisible: false,
showLast: true,
useBSKeydown: false
useBSKeydown: false,
cls: ''
},
template: _.template([
'<div class="dataview inner" style="<%= style %>">',
'<div class="dataview inner <%= cls %>" style="<%= style %>">',
'<% _.each(groups, function(group) { %>',
'<% if (group.headername !== undefined) { %>',
'<div class="header-name"><%= group.headername %></div>',
@ -238,6 +239,7 @@ define([
me.useBSKeydown = me.options.useBSKeydown; // only with enableKeyEvents && parentMenu
me.showLast = me.options.showLast;
me.style = me.options.style || '';
me.cls = me.options.cls || '';
me.emptyText = me.options.emptyText || '';
me.listenStoreEvents= (me.options.listenStoreEvents!==undefined) ? me.options.listenStoreEvents : true;
me.allowScrollbar = (me.options.allowScrollbar!==undefined) ? me.options.allowScrollbar : true;
@ -267,7 +269,8 @@ define([
this.setElement(parentEl, false);
this.cmpEl = $(this.template({
groups: me.groups ? me.groups.toJSON() : null,
style: me.style
style: me.style,
cls: me.cls
}));
parentEl.html(this.cmpEl);
@ -275,7 +278,8 @@ define([
this.cmpEl = me.$el || $(this.el);
this.cmpEl.html(this.template({
groups: me.groups ? me.groups.toJSON() : null,
style: me.style
style: me.style,
cls: me.cls
}));
}
@ -454,7 +458,8 @@ define([
$(this.el).html(this.template({
groups: this.groups ? this.groups.toJSON() : null,
style: this.style
style: this.style,
cls: this.cls
}));
if (!_.isUndefined(this.scroller)) {

5
apps/common/main/resources/less/dataview.less
View file

@ -73,4 +73,9 @@
font-weight: bold;
cursor: default;
}
&.bordered {
border: 1px solid @input-border;
.border-radius(@border-radius-small);
}
}

26
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file

@ -24,27 +24,31 @@
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="header"><%= scope.textType %></label>
<div id="chart-button-type" style=""></div>
</td>
</tr>
<tr>
<td class="padding-small">
<!--<tr>-->
<!--<td class="padding-small">-->
<!--<label class="header"><%= scope.textType %></label>-->
<!--<div id="chart-button-type" style=""></div>-->
<!--</td>-->
<!--</tr>-->
<tr class="not-combined">
<td class="padding-large">
<label class="header" style=""><%= scope.textStyle %></label>
<div class="" id="chart-combo-style" style="width: 100%;"></div>
</td>
</tr>
<!--<tr>-->
<!--<td class="padding-small">-->
<!--<div class="separator horizontal"></div>-->
<!--</td>-->
<!--</tr>-->
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>
<div id="chart-btn-change-type" style="width:100%;"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<label class="header"><%= scope.textRanges %></label>
<button type="button" class="btn btn-text-default" id="chart-btn-select-data" style="min-width: 100px; width: auto; display: block;"><%= scope.textSelectData %></button>
<div id="chart-btn-select-data" style="width:100%;"></div>
</td>
</tr>
</table>

175
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -47,7 +47,8 @@ define([
'common/main/lib/component/MetricSpinner',
'common/main/lib/component/ComboDataView',
'spreadsheeteditor/main/app/view/ChartSettingsDlg',
'spreadsheeteditor/main/app/view/ChartDataDialog'
'spreadsheeteditor/main/app/view/ChartDataDialog',
'spreadsheeteditor/main/app/view/ChartTypeDialog'
], function (menuTemplate, $, _, Backbone) {
'use strict';
@ -112,6 +113,7 @@ define([
this.ChartTypesContainer = $('#chart-panel-types');
this.SparkTypesContainer = $('#spark-panel-types');
this.SparkPointsContainer = $('#spark-panel-points');
this.NotCombinedSettings = $('.not-combined');
},
render: function () {
@ -151,21 +153,11 @@ define([
}
value = props.asc_getSeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = this.chartProps.getType();
if (this._state.ChartType !== type) {
var record = this.mnuChartTypePicker.store.findWhere({type: type});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('svgicon');
this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
var type = (this._state.SeveralCharts && value) ? null : this.chartProps.getType();
if (this._state.ChartType !== type) {
this.ShowCombinedProps(type);
(type !== null) && this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
value = props.asc_getSeveralChartStyles();
@ -600,30 +592,30 @@ define([
var me = this;
// charts
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 364px; padding-top: 12px;',
items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
this.btnChartType.on('render:after', function(btn) {
me.mnuChartTypePicker = new Common.UI.DataView({
el: $('#id-chart-menu-type'),
parentMenu: btn.menu,
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-button-type'));
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
this.lockedControls.push(this.btnChartType);
// this.btnChartType = new Common.UI.Button({
// cls : 'btn-large-dataview',
// iconCls : 'svgicon chart-bar-normal',
// menu : new Common.UI.Menu({
// style: 'width: 364px; padding-top: 12px;',
// items: [
// { template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
// ]
// })
// });
//
// this.btnChartType.on('render:after', function(btn) {
// me.mnuChartTypePicker = new Common.UI.DataView({
// el: $('#id-chart-menu-type'),
// parentMenu: btn.menu,
// restoreHeight: 421,
// groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
// store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
// itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
// });
// });
// this.btnChartType.render($('#chart-button-type'));
// this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
// this.lockedControls.push(this.btnChartType);
this.spnWidth = new Common.UI.MetricSpinner({
el: $('#chart-spin-width'),
@ -756,8 +748,22 @@ define([
this.chLastPoint.on('change', _.bind(this.onCheckPointChange, this, 4));
this.chMarkersPoint.on('change', _.bind(this.onCheckPointChange, this, 5));
this.btnChangeType = new Common.UI.Button({
parentEl: $('#chart-btn-change-type'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-menu-chart',
caption : this.textChangeType,
style : 'width: 100%;text-align: left;'
});
this.btnChangeType.on('click', _.bind(this.onChangeType, this));
this.lockedControls.push(this.btnChangeType);
this.btnSelectData = new Common.UI.Button({
el: $('#chart-btn-select-data')
parentEl: $('#chart-btn-select-data'),
cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-select-range',
caption : this.textSelectData,
style : 'width: 100%;text-align: left;'
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.lockedControls.push(this.btnSelectData);
@ -780,6 +786,10 @@ define([
this.SparkPointsContainer.toggleClass('settings-hidden', isChart);
},
ShowCombinedProps: function(type) {
this.NotCombinedSettings.toggleClass('settings-hidden', type==Asc.c_oAscChartTypeSettings.combo);
},
onWidthChange: function(field, newValue, oldValue, eOpts){
var w = field.getNumberValue();
var h = this.spnHeight.getNumberValue();
@ -924,35 +934,65 @@ define([
}
},
onSelectType: function(btn, picker, itemView, record) {
if (this._noApply) return;
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
onChangeType: function() {
var me = this;
var props;
if (me.api){
props = me.api.asc_getChartObject();
if (props) {
me._isEditType = true;
// props.startEdit();
var win = new SSE.Views.ChartTypeDialog({
chartSettings: props,
api: me.api,
handler: function(result, value) {
if (result == 'ok') {
// props.endEdit();
if (me.api) {
me.api.asc_editChartDrawingObject(value.chartSettings);
}
me._isEditType = false;
}
Common.NotificationCenter.trigger('edit:complete', me);
}
}).on('close', function() {
// me._isEditType && props.cancelEdit();
me._isEditType = false;
});
win.show();
}
} else {
rawData = record;
}
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply && this.chartProps) {
var props = new Asc.asc_CImgProperty();
this.chartProps.changeType(rawData.type);
props.asc_putChartProperties(this.chartProps);
this.api.asc_setGraphicObjectProps(props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
// onSelectType: function(btn, picker, itemView, record) {
// if (this._noApply) return;
//
// var rawData = {},
// isPickerSelect = _.isFunction(record.toJSON);
//
// if (isPickerSelect){
// if (record.get('selected')) {
// rawData = record.toJSON();
// } else {
// // record deselected
// return;
// }
// } else {
// rawData = record;
// }
//
// // this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
// this._state.ChartType = -1;
//
// if (this.api && !this._noApply && this.chartProps) {
// var props = new Asc.asc_CImgProperty();
// this.chartProps.changeType(rawData.type);
// props.asc_putChartProperties(this.chartProps);
// this.api.asc_setGraphicObjectProps(props);
// }
// Common.NotificationCenter.trigger('edit:complete', this);
// },
onSelectStyle: function(combo, record) {
if (this._noApply) return;
@ -1259,7 +1299,8 @@ define([
textType: 'Type',
textSelectData: 'Select Data',
textRanges: 'Data Range',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.'
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
textChangeType: 'Change type'
}, SSE.Views.ChartSettings || {}));
});

303
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js Normal file
View file

@ -0,0 +1,303 @@
/*
*
* (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
*
*/
/**
* ChartTypeDialog.js
*
* Created by Julia Radzhabova on 03.12.2020
* Copyright (c) 2020 Ascensio System SIA. All rights reserved.
*
*/
define([
'common/main/lib/util/utils',
'common/main/lib/component/ComboBox',
'common/main/lib/component/ListView',
'common/main/lib/view/AdvancedSettingsWindow'
], function () { 'use strict';
SSE.Views.ChartTypeDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 312,
height: 490
},
initialize : function(options) {
var me = this;
_.extend(this.options, {
title: this.textTitle,
template: [
'<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
'<div class="content-panel" style="padding: 0 10px;"><div class="inner-content">',
'<div class="settings-panel active">',
'<table cols="1" style="width: 100%;">',
'<tr>',
'<td class="padding-small">',
'<label class="header">', me.textType, '</label>',
'<div id="chart-type-dlg-button-type" style=""></div>',
'</td>',
'</tr>',
'<tr class="simple-chart">',
'<td class="padding-small">',
'<label class="header">', me.textStyle, '</label>',
'<div id="chart-type-dlg-styles-list" class="" style="width:100%; height: 176px;"></div>',
'</td>',
'</tr>',
'<tr class="combined-chart">',
'<td>',
'<label id="chart-type-dlg-label-column" class="header" style="width: 100px;">', me.textSeries, '</label>',
'<label id="chart-type-dlg-label-sort" class="header" style="width: 130px;">', me.textType, '</label>',
'<label class="header" style="">', me.textSecondary, '</label>',
'</td>',
'</tr>',
'<tr class="combined-chart">',
'<td class="padding-small">',
'<div id="chart-type-dlg-series-list" class="" style="width:100%; height: 150px;"></div>',
'</td>',
'</tr>',
'</table>',
'</div></div>',
'</div>',
'</div>'
].join('')
}, options);
this.handler = options.handler;
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._changedProps = null;
this.api = this.options.api;
this.chartSettings = this.options.chartSettings;
this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal;
},
render: function() {
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
var me = this;
this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview',
iconCls : 'svgicon chart-bar-normal',
menu : new Common.UI.Menu({
style: 'width: 364px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="chart-type-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
this.btnChartType.on('render:after', function(btn) {
me.mnuChartTypePicker = new Common.UI.DataView({
el: $('#chart-type-dlg-menu-type', me.$window),
parentMenu: btn.menu,
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
});
this.btnChartType.render($('#chart-type-dlg-button-type'), this.$window);
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this));
this.stylesList = new Common.UI.DataView({
el: $('#chart-type-dlg-styles-list', this.$window),
store: new Common.UI.DataViewStore(),
cls: 'bordered',
enableKeyEvents: this.options.enableKeyEvents,
itemTemplate : _.template([
'<div class="style" id="<%= id %>">',
'<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>',
'<% if (typeof title !== "undefined") {%>',
'<span class="title"><%= title %></span>',
'<% } %>',
'</div>'
].join(''))
});
this.stylesList.on('item:select', _.bind(this.onSelectStyles, this));
this.NotCombinedSettings = $('.simple-chart', this.$window);
this.CombinedSettings = $('.combined-chart', this.$window);
this.afterRender();
},
afterRender: function() {
this._setDefaults(this.chartSettings);
},
show: function() {
Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
},
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 record = this.mnuChartTypePicker.store.findWhere({type: this.currentChartType});
this.mnuChartTypePicker.selectRecord(record, true);
if (record) {
this.btnChartType.setIconCls('svgicon ' + 'chart-' + record.get('iconCls'));
} else
this.btnChartType.setIconCls('svgicon');
this.ShowHideSettings(this.currentChartType);
if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) {
} else
this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType));
}
},
getSettings: function () {
return { chartSettings: this.chartSettings};
},
onDlgBtnClick: function(event) {
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);
}
this.close();
},
onPrimary: function() {
this.onDlgBtnClick('ok');
return false;
},
onSelectType: function(picker, itemView, record) {
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
}
} else {
rawData = record;
}
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this.currentChartType = rawData.type;
this.chartSettings.changeType(this.currentChartType);
this.ShowHideSettings(this.currentChartType);
if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) {
} else
this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType));
},
onSelectStyle: function(combo, record) {
},
updateChartStyles: function(styles) {
var me = this;
if (styles && styles.length>0){
var stylesStore = this.stylesList.store;
if (stylesStore) {
var count = stylesStore.length;
if (count>0 && count==styles.length) {
var data = stylesStore.models;
_.each(styles, function(style, index){
data[index].set('imageUrl', style.asc_getImage());
});
} else {
var stylearray = [],
selectedIdx = -1;
_.each(styles, function(item, index){
stylearray.push({
imageUrl: item.asc_getImage(),
data : item.asc_getName(),
tip : me.textStyle + ' ' + item.asc_getName()
});
});
stylesStore.reset(stylearray, {silent: false});
}
}
} else {
this.stylesList.store.reset();
}
this.stylesList.setDisabled(!styles || styles.length<1);
},
onSelectStyles: function(dataView, itemView, record) {
this.chartSettings.putStyle(record.get('data'));
},
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++)
{
var item = series[i],
rec = new Common.UI.DataViewModel();
rec.set({
value: item.asc_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));
},
ShowHideSettings: function(type) {
this.NotCombinedSettings.toggleClass('hidden', type==Asc.c_oAscChartTypeSettings.combo);
this.CombinedSettings.toggleClass('hidden', type!==Asc.c_oAscChartTypeSettings.combo);
},
textTitle: 'Chart Type',
textType: 'Type',
textStyle: 'Style',
textSeries: 'Series',
textSecondary: 'Secondary Axis'
}, SSE.Views.ChartTypeDialog || {}))
});