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

Merge pull request #619 from ONLYOFFICE/feature/sse-multichart

Browse source 
Feature/sse multichart
This commit is contained in:
Julia Radzhabova 2020-12-10 14:53:11 +03:00 committed by GitHub
parent 89823a58c9 f1c2be13ce
commit f9fb61d2f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1752 additions and 966 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)) {

83
apps/common/main/lib/util/define.js
View file

@ -430,6 +430,32 @@ define(function(){ 'use strict';
textLineSpark: 'Line',
textColumnSpark: 'Column',
textWinLossSpark: 'Win/Loss',
textCombo: 'Combo',
textBarNormal: 'Clustered column',
textBarStacked: 'Stacked column',
textBarStackedPer: '100% Stacked column',
textBarNormal3d: '3-D Clustered column',
textBarStacked3d: '3-D Stacked column',
textBarStackedPer3d: '3-D 100% Stacked column',
textBarNormal3dPerspective: '3-D column',
textLineStacked: 'Stacked line',
textLineStackedPer: '100% Stacked line',
textLine3d: '3-D line',
textDoughnut: 'Doughnut',
textPie3d: '3-D pie',
textHBarNormal: 'Clustered bar',
textHBarStacked: 'Stacked bar',
textHBarStackedPer: '100% Stacked bar',
textHBarNormal3d: '3-D Clustered bar',
textHBarStacked3d: '3-D Stacked bar',
textHBarStackedPer3d: '3-D 100% Stacked bar',
textAreaStacked: 'Stacked area',
textAreaStackedPer: '100% Stacked area',
textScatter: 'Scatter',
textComboBarLine: 'Clustered column - line',
textComboBarLineSecondary: 'Clustered column - line on secondary axis',
textComboAreaBar: 'Stacked area - clustered column',
textComboCustom: 'Custom combination',
getChartGroupData: function(headername) {
return [
@ -439,38 +465,43 @@ define(function(){ 'use strict';
{id: 'menu-chart-group-hbar', caption: this.textBar},
{id: 'menu-chart-group-area', caption: this.textArea, inline: true},
{id: 'menu-chart-group-scatter', caption: this.textPoint, inline: true},
{id: 'menu-chart-group-stock', caption: this.textStock, inline: true}
{id: 'menu-chart-group-stock', caption: this.textStock, inline: true},
{id: 'menu-chart-group-combo', caption: this.textCombo}
// {id: 'menu-chart-group-surface', caption: this.textSurface}
];
},
getChartData: function() {
return [
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'},
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'},
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'}
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', tip: this.textBarNormal},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack', tip: this.textBarStacked},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack', tip: this.textBarStackedPer},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal', tip: this.textBarNormal3d, is3d: true},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack', tip: this.textBarStacked3d, is3d: true},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack', tip: this.textBarStackedPer3d, is3d: true},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per', tip: this.textBarNormal3dPerspective, is3d: true},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal', tip: this.textLine},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack', tip: this.textLineStacked},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack', tip: this.textLineStackedPer},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d', tip: this.textLine3d, is3d: true},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal', tip: this.textPie},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut', tip: this.textDoughnut},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal', tip: this.textPie3d, is3d: true},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal', tip: this.textHBarNormal},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack', tip: this.textHBarStacked},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack', tip: this.textHBarStackedPer},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal', tip: this.textHBarNormal3d, is3d: true},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack', tip: this.textHBarStacked3d, is3d: true},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack', tip: this.textHBarStackedPer3d, is3d: true},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal', tip: this.textArea},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack', tip: this.textAreaStacked},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack', tip: this.textAreaStackedPer},
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal', tip: this.textScatter},
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal', tip: this.textStock},
{ group: 'menu-chart-group-combo', type: Asc.c_oAscChartTypeSettings.comboBarLine, iconCls: 'combo-normal', tip: this.textComboBarLine},
{ group: 'menu-chart-group-combo', type: Asc.c_oAscChartTypeSettings.comboBarLineSecondary, iconCls: 'combo-normal', tip: this.textComboBarLineSecondary},
{ group: 'menu-chart-group-combo', type: Asc.c_oAscChartTypeSettings.comboAreaBar, iconCls: 'combo-normal', tip: this.textComboAreaBar},
{ group: 'menu-chart-group-combo', type: Asc.c_oAscChartTypeSettings.comboCustom, iconCls: 'combo-normal', tip: this.textComboCustom}
// { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceNormal, iconCls: 'surface-normal'},
// { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.surfaceWireframe, iconCls: 'surface-wireframe'},
// { group: 'menu-chart-group-surface', type: Asc.c_oAscChartTypeSettings.contourNormal, iconCls: 'contour-normal'},

3
apps/common/main/resources/img/toolbar/charttypes.svg
View file

@ -109,6 +109,9 @@
<symbol id="chart-stock-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H7V20.5V34H34V33H8V7ZM23 12H22V16H20V20H22V24H23V20H25V16H23V12ZM13 27H11V20H13V16H14V20H16V27H14V31H13V27ZM31 11H29V18H31V22H32V18H34V11H32V7H31V11Z" fill="#444444"/>
</symbol>
<symbol id="chart-combo-normal" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 6H27V34H33V6ZM20 14H26V34H20V14ZM19 20H13V34H19V20ZM12 26H6V34H12V26Z" fill="#444444"/>
</symbol>
<symbol id="chart-spark-line" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.86358 21.8725L15.7636 27.7725L20.7636 16.7725L25.682 21.691L31.6394 5.65181L33.5143 6.34819L26.4717 25.309L21.3901 20.2275L16.3901 31.2275L10.2901 25.1275L5.44232 33.5008L3.71148 32.4987L9.86358 21.8725Z" fill="#444444"/>
</symbol>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

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);
}
}

9
apps/documenteditor/main/app/controller/Main.js
View file

@ -204,6 +204,8 @@ define([
Common.NotificationCenter.on('goback', _.bind(this.goBack, this));
Common.NotificationCenter.on('download:advanced', _.bind(this.onAdvancedOptions, this));
Common.NotificationCenter.on('showmessage', _.bind(this.onExternalMessage, this));
Common.NotificationCenter.on('showerror', _.bind(this.onError, this));
this.isShowOpenDialog = false;
@ -1601,6 +1603,10 @@ define([
config.msg = this.errorCompare;
break;
case Asc.c_oAscError.ID.ComboSeriesError:
config.msg = this.errorComboSeries;
break;
default:
config.msg = (typeof id == 'string') ? id : this.errorDefaultMessage.replace('%1', id);
break;
@ -2712,7 +2718,8 @@ define([
textRemember: 'Remember my choice',
warnLicenseLimitedRenewed: 'License needs to be renewed.<br>You have a limited access to document editing functionality.<br>Please contact your administrator to get full access',
warnLicenseLimitedNoAccess: 'License expired.<br>You have no access to document editing functionality.<br>Please contact your administrator.',
saveErrorTextDesktop: 'This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.'
saveErrorTextDesktop: 'This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.',
errorComboSeries: 'To create a combination chart, select at least two series of data.'
}
})(), DE.Controllers.Main || {}))
});

9
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2050,11 +2050,12 @@ define([
}
if (chart) {
var props = new Asc.asc_CImgProperty();
var isCombo = (type==Asc.c_oAscChartTypeSettings.comboBarLine || type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar || type==Asc.c_oAscChartTypeSettings.comboCustom);
if (isCombo && chart.getSeries().length<2) {
Common.NotificationCenter.trigger('showerror', Asc.c_oAscError.ID.ComboSeriesError, Asc.c_oAscError.Level.NoCritical);
} else
chart.changeType(type);
props.put_ChartProperties(chart);
this.api.ImgApply(props);
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
} else {
if (!this.diagramEditor)

13
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -386,14 +386,17 @@ define([
rawData = record;
}
if (this.api && !this._noApply && this.chartProps) {
var isCombo = (rawData.type==Asc.c_oAscChartTypeSettings.comboBarLine || rawData.type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
rawData.type==Asc.c_oAscChartTypeSettings.comboAreaBar || rawData.type==Asc.c_oAscChartTypeSettings.comboCustom);
if (isCombo && this.chartProps.getSeries().length<2) {
Common.NotificationCenter.trigger('showerror', Asc.c_oAscError.ID.ComboSeriesError, Asc.c_oAscError.Level.NoCritical);
this.mnuChartTypePicker.selectRecord(this.mnuChartTypePicker.store.findWhere({type: this.chartProps.getType()}), true);
} else {
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.put_ChartProperties(this.chartProps);
this.api.ImgApply(props);
}
}
this.fireEvent('editcomplete', this);
},

1
apps/documenteditor/main/locale/en.json
View file

@ -490,6 +490,7 @@
"DE.Controllers.Main.requestEditFailedTitleText": "Access denied",
"DE.Controllers.Main.saveErrorText": "An error has occurred while saving the file.",
"DE.Controllers.Main.saveErrorTextDesktop": "This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.",
"DE.Controllers.Main.errorComboSeries": "To create a combination chart, select at least two series of data.",
"DE.Controllers.Main.savePreparingText": "Preparing to save",
"DE.Controllers.Main.savePreparingTitle": "Preparing to save. Please wait...",
"DE.Controllers.Main.saveTextText": "Saving document...",

8
apps/presentationeditor/main/app/controller/Main.js
View file

@ -184,6 +184,7 @@ define([
Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
Common.NotificationCenter.on('goback', _.bind(this.goBack, this));
Common.NotificationCenter.on('showmessage', _.bind(this.onExternalMessage, this));
Common.NotificationCenter.on('showerror', _.bind(this.onError, this));
this.isShowOpenDialog = false;
@ -1273,6 +1274,10 @@ define([
config.maxwidth = 600;
break;
case Asc.c_oAscError.ID.ComboSeriesError:
config.msg = this.errorComboSeries;
break;
default:
config.msg = (typeof id == 'string') ? id : this.errorDefaultMessage.replace('%1', id);
break;
@ -2355,7 +2360,8 @@ define([
textRemember: 'Remember my choice',
warnLicenseLimitedRenewed: 'License needs to be renewed.<br>You have a limited access to document editing functionality.<br>Please contact your administrator to get full access',
warnLicenseLimitedNoAccess: 'License expired.<br>You have no access to document editing functionality.<br>Please contact your administrator.',
saveErrorTextDesktop: 'This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.'
saveErrorTextDesktop: 'This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.',
errorComboSeries: 'To create a combination chart, select at least two series of data.'
}
})(), PE.Controllers.Main || {}))
});

12
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -1687,17 +1687,19 @@ define([
if (selectedElements && _.isArray(selectedElements)) {
for (var i = 0; i< selectedElements.length; i++) {
if (Asc.c_oAscTypeSelectElement.Chart == selectedElements[i].get_ObjectType()) {
chart = true;
chart = selectedElements[i].get_ObjectValue();
break;
}
}
}
if (chart) {
var props = new Asc.CAscChartProp();
props.changeType(type);
this.api.ChartApply(props);
var isCombo = (type==Asc.c_oAscChartTypeSettings.comboBarLine || type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar || type==Asc.c_oAscChartTypeSettings.comboCustom);
if (isCombo && chart.get_ChartProperties() && chart.get_ChartProperties().getSeries().length<2) {
Common.NotificationCenter.trigger('showerror', Asc.c_oAscError.ID.ComboSeriesError, Asc.c_oAscError.Level.NoCritical);
} else
chart.changeType(type);
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
} else {
if (!this.diagramEditor)

18
apps/presentationeditor/main/app/view/ChartSettings.js
View file

@ -108,8 +108,9 @@ define([
this.disableControls(this._locked);
if (props){
this._originalProps = new Asc.CAscChartProp(props);
this._originalProps = props;
this._noApply = true;
this.chartProps = props.get_ChartProperties();
var value = props.get_SeveralCharts() || this._locked;
if (this._state.SeveralCharts!==value) {
@ -320,13 +321,18 @@ define([
rawData = record;
}
if (this.api && !this._noApply) {
var isCombo = (rawData.type==Asc.c_oAscChartTypeSettings.comboBarLine || rawData.type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
rawData.type==Asc.c_oAscChartTypeSettings.comboAreaBar || rawData.type==Asc.c_oAscChartTypeSettings.comboCustom);
if (isCombo && this.chartProps.getSeries().length<2) {
Common.NotificationCenter.trigger('showerror', Asc.c_oAscError.ID.ComboSeriesError, Asc.c_oAscError.Level.NoCritical);
this.mnuChartTypePicker.selectRecord(this.mnuChartTypePicker.store.findWhere({type: this._originalProps.getType()}), true);
} else {
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this._state.ChartType = -1;
if (this.api && !this._noApply) {
var props = new Asc.CAscChartProp();
props.changeType(rawData.type);
this.api.ChartApply(props);
this._originalProps.changeType(rawData.type);
}
}
this.fireEvent('editcomplete', this);
},

1
apps/presentationeditor/main/locale/en.json
View file

@ -365,6 +365,7 @@
"PE.Controllers.Main.requestEditFailedTitleText": "Access denied",
"PE.Controllers.Main.saveErrorText": "An error has occurred while saving the file.",
"PE.Controllers.Main.saveErrorTextDesktop": "This file cannot be saved or created.<br>Possible reasons are: <br>1. The file is read-only. <br>2. The file is being edited by other users. <br>3. The disk is full or corrupted.",
"PE.Controllers.Main.errorComboSeries": "To create a combination chart, select at least two series of data.",
"PE.Controllers.Main.savePreparingText": "Preparing to save",
"PE.Controllers.Main.savePreparingTitle": "Preparing to save. Please wait...",
"PE.Controllers.Main.saveTextText": "Saving presentation...",

1
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -385,6 +385,7 @@ define([
reg = (this.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.editorConfig.lang)) : 0x0409;
this.api.asc_setLocale(reg, decimal, group);
}
Common.Utils.InternalSettings.set("sse-config-lang", this.editorConfig.lang);
var value = Common.localStorage.getBool("sse-settings-r1c1");
Common.Utils.InternalSettings.set("sse-settings-r1c1", value);

53
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -275,6 +275,7 @@ define([
toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
toolbar.btnEditChart.on('click', _.bind(this.onEditChart, this));
toolbar.btnEditChartData.on('click', _.bind(this.onEditChartData, this));
toolbar.btnEditChartType.on('click', _.bind(this.onEditChartType, this));
} else
if ( me.appConfig.isEditMailMerge ) {
toolbar.btnUndo.on('click', _.bind(this.onUndo, this));
@ -951,7 +952,7 @@ define([
{
chartSettings: props,
imageSettings: imageSettings,
isDiagramMode: me.toolbar.mode.isEditDiagram,
// isDiagramMode: me.toolbar.mode.isEditDiagram,
isChart: true,
api: me.api,
handler: function(result, value) {
@ -999,6 +1000,35 @@ define([
}
},
onEditChartType: function(btn) {
if (!this.editMode) return;
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();
me._isEditType = false;
}
Common.NotificationCenter.trigger('edit:complete', me);
}
}).on('close', function() {
me._isEditType && props.cancelEdit();
me._isEditType = false;
});
win.show();
}
}
},
onSelectChart: function(group, type) {
if (!this.editMode) return;
var me = this,
@ -1028,8 +1058,20 @@ define([
if (isvalid == Asc.c_oAscError.ID.No) {
(ischartedit) ? me.api.asc_editChartDrawingObject(props) : me.api.asc_addChartDrawingObject(props);
} else {
var msg = me.txtInvalidRange;
switch (isvalid) {
case isvalid == Asc.c_oAscError.ID.StockChartError:
msg = me.errorStockChart;
break;
case isvalid == Asc.c_oAscError.ID.MaxDataSeriesError:
msg = me.errorMaxRows;
break;
case isvalid == Asc.c_oAscError.ID.ComboSeriesError:
msg = me.errorComboSeries;
break;
}
Common.UI.warning({
msg: (isvalid == Asc.c_oAscError.ID.StockChartError) ? me.errorStockChart : ((isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) ? me.errorMaxRows : me.txtInvalidRange),
msg: msg,
callback: function() {
_.defer(function(btn) {
Common.NotificationCenter.trigger('edit:complete', me.toolbar);
@ -1848,7 +1890,7 @@ define([
var toolbar = this.toolbar;
if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge) {
is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat, toolbar.btnEditChartData]});
toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat, toolbar.btnEditChartData, toolbar.btnEditChartType]});
} else
if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
toolbar.lockToolbar(SSE.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {
@ -2589,7 +2631,7 @@ define([
var need_disable = (selectionType === Asc.c_oAscSelectionType.RangeCells || selectionType === Asc.c_oAscSelectionType.RangeCol ||
selectionType === Asc.c_oAscSelectionType.RangeRow || selectionType === Asc.c_oAscSelectionType.RangeMax);
this.toolbar.lockToolbar( SSE.enumLock.selRange, need_disable, {array:[this.toolbar.btnEditChartData]} );
this.toolbar.lockToolbar( SSE.enumLock.selRange, need_disable, {array:[this.toolbar.btnEditChartData, this.toolbar.btnEditChartType]} );
if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText)
return;
@ -4012,7 +4054,8 @@ define([
txtTable_TableStyleLight: 'Table Style Light',
textInsert: 'Insert',
txtInsertCells: 'Insert Cells',
txtDeleteCells: 'Delete Cells'
txtDeleteCells: 'Delete Cells',
errorComboSeries: 'To create a combination chart, select at least two series of data.'
}, SSE.Controllers.Toolbar || {}));
});

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

@ -24,27 +24,20 @@
<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 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>
<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>

422
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -9,27 +9,6 @@
</tr>
</table>
</div>
<!--<div class="separator horizontal padding-large"></div>-->
<!--<div class="inner-content">-->
<!--<table cols="1" style="width: 100%;">-->
<!--<tr>-->
<!--<td>-->
<!--<label class="header"><%= scope.textDataRange %></label>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td class="padding-small" width="200">-->
<!--<div id="chart-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td class="padding-small">-->
<!--<label class="input-label"><%= scope.textDataSeries %></label>-->
<!--<div id="chart-dlg-combo-range" class="input-group-nr" style="width:120px;"></div>-->
<!--</td>-->
<!--</tr>-->
<!--</table>-->
<!--</div>-->
</div>
<div id="id-chart-settings-dlg-layout" class="settings-panel">
<div class="inner-content">
@ -70,66 +49,38 @@
<div id="chart-dlg-check-markers" style="margin: 0 0 12px 7px;"></div>
</td>
</tr>
<tr>
<td colspan="2">
<label class="header padding-small" style="padding-top: 8px;"><%= scope.textAxisSettings %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textHorAxis %></label>
<div id="chart-dlg-combo-hor-show" class="input-group-nr" style="margin-right: 7px;"></div>
</td>
<td class="padding-small" width="50%">
<label class="input-label" style="margin-left: 7px;"><%= scope.textVertAxis %></label>
<div id="chart-dlg-combo-vert-show" class="input-group-nr" style="margin-left: 7px;"></div>
</td>
</tr>
<tr>
<td class="padding-large" width="50%">
<label class="input-label"><%= scope.textHorTitle %></label>
<div id="chart-dlg-combo-hor-title" class="input-group-nr" style="margin-right: 7px;"></div>
</td>
<td class="padding-large" width="50%">
<label class="input-label" style="margin-left: 7px;"><%= scope.textVertTitle %></label>
<div id="chart-dlg-combo-vert-title" class="input-group-nr" style="margin-left: 7px;"></div>
</td>
</tr>
<tr>
<td colspan="2">
<label class="header padding-small"><%= scope.textGridLines %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="50%">
<label class="input-label"><%= scope.textHorGrid %></label>
<div id="chart-dlg-combo-hor-grid" class="input-group-nr" style="margin-right: 7px;"></div>
</td>
<td class="padding-small" width="50%">
<label class="input-label" style="margin-left: 7px;"><%= scope.textVertGrid %></label>
<div id="chart-dlg-combo-vert-grid" class="input-group-nr" style="margin-left: 7px;"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-chart-settings-dlg-vert" class="settings-panel">
<div class="inner-content">
<table cols="3" style="width: 100%">
<table cols="2" style="width: 100%">
<tr>
<td colspan="3">
<label class="header padding-small"><%= scope.textAxisOptions %></label>
<td colspan="2" class="padding-large">
<div id="chart-dlg-chk-vert-hide-0" class="input-group-nr"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textAxisTitle %></label>
<div id="chart-dlg-combo-vert-title-0" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
<div id="chart-dlg-combo-vert-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
</table>
<table cols="3" style="width: 100%">
<tr>
<td class="padding-small" width="100">
<label class="input-label"><%= scope.textMinValue %></label>
</td>
<td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-mintype"></div>
<div id="chart-dlg-combo-mintype-0"></div>
</td>
<td class="padding-small" width="90">
<div id="chart-dlg-input-min-value"></div>
<div id="chart-dlg-input-min-value-0"></div>
</td>
</tr>
<tr>
@ -137,10 +88,10 @@
<label class="input-label"><%= scope.textMaxValue %></label>
</td>
<td class="padding-large" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-maxtype"></div>
<div id="chart-dlg-combo-maxtype-0"></div>
</td>
<td class="padding-large" width="90">
<div id="chart-dlg-input-max-value"></div>
<div id="chart-dlg-input-max-value-0"></div>
</td>
</tr>
<tr>
@ -148,10 +99,10 @@
<label class="input-label"><%= scope.textAxisCrosses %></label>
</td>
<td class="padding-large" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-v-crosstype"></div>
<div id="chart-dlg-combo-v-crosstype-0"></div>
</td>
<td class="padding-large" width="90">
<div id="chart-dlg-input-v-axis-crosses"></div>
<div id="chart-dlg-input-v-axis-crosses-0"></div>
</td>
</tr>
</table>
@ -160,18 +111,17 @@
<table cols="1" style="width: 100%;">
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textUnits %></label>
<div id="chart-dlg-combo-units" class="input-group-nr" style="width:140px;"></div>
<div id="chart-dlg-check-v-reverse-0"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<div id="chart-dlg-check-v-reverse"></div>
<label class="input-label"><%= scope.textUnits %></label>
<div id="chart-dlg-combo-units-0" class="input-group-nr" style="width:140px;"></div>
</td>
</tr>
</table>
</div>
<div class="separator horizontal padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
@ -182,27 +132,141 @@
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textMajorType %></label>
<div id="chart-dlg-combo-v-major-type" class="input-group-nr"></div>
<div id="chart-dlg-combo-v-major-type-0" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
<div id="chart-dlg-combo-v-minor-type" class="input-group-nr" style="margin-left: 15px;"></div>
<div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
</table>
</div>
<div class="separator horizontal padding-large"></div>
<div class="inner-content">
<table cols="1" style="width: 100%;">
<tr>
<td class="padding-small">
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textLabelOptions %></label>
</td>
</tr>
<tr>
<td>
<label class="input-label"><%= scope.textLabelPos %></label>
<div id="chart-dlg-combo-v-label-pos" class="input-group-nr" style="width:140px;"></div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div id="chart-dlg-combo-v-label-pos-0" class="input-group-nr"></div>
</td>
<td>
<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-0" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
</td>
</tr>
</table>
</div>
</div>
<div id="id-chart-settings-dlg-vert-sec" class="settings-panel">
<div class="inner-content">
<table cols="2" style="width: 100%">
<tr>
<td colspan="2" class="padding-large">
<div id="chart-dlg-chk-vert-hide-1" class="input-group-nr"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textAxisTitle %></label>
<div id="chart-dlg-combo-vert-title-1" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
<div id="chart-dlg-combo-vert-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
</table>
<table cols="3" style="width: 100%">
<tr>
<td class="padding-small" width="100">
<label class="input-label"><%= scope.textMinValue %></label>
</td>
<td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-mintype-1"></div>
</td>
<td class="padding-small" width="90">
<div id="chart-dlg-input-min-value-1"></div>
</td>
</tr>
<tr>
<td class="padding-large" width="100">
<label class="input-label"><%= scope.textMaxValue %></label>
</td>
<td class="padding-large" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-maxtype-1"></div>
</td>
<td class="padding-large" width="90">
<div id="chart-dlg-input-max-value-1"></div>
</td>
</tr>
<tr>
<td class="padding-large" width="100">
<label class="input-label"><%= scope.textAxisCrosses %></label>
</td>
<td class="padding-large" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-v-crosstype-1"></div>
</td>
<td class="padding-large" width="90">
<div id="chart-dlg-input-v-axis-crosses-1"></div>
</td>
</tr>
</table>
</div>
<div class="inner-content">
<table cols="1" style="width: 100%;">
<tr>
<td class="padding-large">
<div id="chart-dlg-check-v-reverse-1"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textUnits %></label>
<div id="chart-dlg-combo-units-1" class="input-group-nr" style="width:140px;"></div>
</td>
</tr>
</table>
</div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textTickOptions %></label>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textMajorType %></label>
<div id="chart-dlg-combo-v-major-type-1" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
<div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textLabelOptions %></label>
</td>
</tr>
<tr>
<td>
<label class="input-label"><%= scope.textLabelPos %></label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div id="chart-dlg-combo-v-label-pos-1" class="input-group-nr" ></div>
</td>
<td>
<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-1" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
</td>
</tr>
</table>
@ -210,41 +274,50 @@
</div>
<div id="id-chart-settings-dlg-hor" class="settings-panel">
<div class="inner-content">
<table cols="3" style="width: 100%">
<table cols="2" style="width: 100%">
<tr>
<td colspan="3">
<label class="header padding-small"><%= scope.textAxisOptions %></label>
<td colspan="2" class="padding-large">
<div id="chart-dlg-chk-hor-hide-0" class="input-group-nr"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textAxisTitle %></label>
<div id="chart-dlg-combo-hor-title-0" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
<div id="chart-dlg-combo-hor-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
</table>
<table cols="3" style="width: 100%">
<tr>
<td class="padding-small" width="100">
<label class="input-label"><%= scope.textAxisCrosses %></label>
</td>
<td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-h-crosstype"></div>
<div id="chart-dlg-combo-h-crosstype-0"></div>
</td>
<td class="padding-small" width="90">
<div id="chart-dlg-input-h-axis-crosses"></div>
<div id="chart-dlg-input-h-axis-crosses-0"></div>
</td>
</tr>
</table>
</div>
<div class="inner-content">
<table cols="1" style="width: 100%;">
<tr>
<td class="padding-large" width="140">
<td class="padding-large" width="100">
<label class="input-label"><%= scope.textAxisPos %></label>
<div id="chart-dlg-combo-axis-pos" class="input-group-nr" style="width:140px;"></div>
</td>
<td colspan=2 class="padding-large">
<div id="chart-dlg-combo-axis-pos-0" class="input-group-nr" style="width:140px;"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<div id="chart-dlg-check-h-reverse"></div>
<td colspan=3 class="padding-large">
<div id="chart-dlg-check-h-reverse-0"></div>
</td>
</tr>
</table>
</div>
<div class="separator horizontal padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
@ -255,11 +328,11 @@
<tr>
<td class="padding-small" width="140">
<label class="input-label"><%= scope.textMajorType %></label>
<div id="chart-dlg-combo-h-major-type" class="input-group-nr"></div>
<div id="chart-dlg-combo-h-major-type-0" class="input-group-nr"></div>
</td>
<td class="padding-small">
<label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
<div id="chart-dlg-combo-h-minor-type" class="input-group-nr" style="margin-left: 15px;"></div>
<div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
<tr>
@ -269,14 +342,13 @@
</tr>
<tr>
<td class="padding-large" width="140">
<div id="chart-dlg-input-marks-interval"></div>
<div id="chart-dlg-input-marks-interval-0"></div>
</td>
<td class="padding-large">
</td>
</tr>
</table>
</div>
<div class="separator horizontal padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
@ -287,11 +359,11 @@
<tr>
<td class="padding-small" width="140">
<label class="input-label"><%= scope.textLabelPos %></label>
<div id="chart-dlg-combo-h-label-pos" class="input-group-nr"></div>
<div id="chart-dlg-combo-h-label-pos-0" class="input-group-nr"></div>
</td>
<td class="padding-small">
<label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
<div id="chart-dlg-input-label-dist" style="margin-left: 15px;"></div>
<div id="chart-dlg-input-label-dist-0" style="margin-left: 15px;"></div>
</td>
</tr>
<tr>
@ -300,11 +372,119 @@
</td>
</tr>
<tr>
<td width="140">
<div id="chart-dlg-combo-label-int" class="input-group-nr"></div>
<td width="100%" colspan="2">
<div id="chart-dlg-combo-label-int-0" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
<div id="chart-dlg-input-label-int-0" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
</td>
<td style="vertical-align: bottom;">
<div id="chart-dlg-input-label-int" style="margin-left: 15px;"></div>
</tr>
</table>
</div>
</div>
<div id="id-chart-settings-dlg-hor-sec" class="settings-panel">
<div class="inner-content">
<table cols="2" style="width: 100%">
<tr>
<td colspan="2" class="padding-large">
<div id="chart-dlg-chk-hor-hide-1" class="input-group-nr"></div>
</td>
</tr>
<tr>
<td class="padding-large">
<label class="input-label"><%= scope.textAxisTitle %></label>
<div id="chart-dlg-combo-hor-title-1" class="input-group-nr"></div>
</td>
<td class="padding-large">
<label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
<div id="chart-dlg-combo-hor-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
</table>
<table cols="3" style="width: 100%">
<tr>
<td class="padding-small" width="100">
<label class="input-label"><%= scope.textAxisCrosses %></label>
</td>
<td class="padding-small" width="115" style="padding-right: 10px;">
<div id="chart-dlg-combo-h-crosstype-1"></div>
</td>
<td class="padding-small" width="90">
<div id="chart-dlg-input-h-axis-crosses-1"></div>
</td>
</tr>
<tr>
<td class="padding-large" width="100">
<label class="input-label"><%= scope.textAxisPos %></label>
</td>
<td colspan=2 class="padding-large">
<div id="chart-dlg-combo-axis-pos-1" class="input-group-nr" style="width:140px;"></div>
</td>
</tr>
<tr>
<td colspan=3 class="padding-large">
<div id="chart-dlg-check-h-reverse-1"></div>
</td>
</tr>
</table>
</div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textTickOptions %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="140">
<label class="input-label"><%= scope.textMajorType %></label>
<div id="chart-dlg-combo-h-major-type-1" class="input-group-nr"></div>
</td>
<td class="padding-small">
<label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
<div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<label class="input-label"><%= scope.textMarksInterval %></label>
</td>
</tr>
<tr>
<td class="padding-large" width="140">
<div id="chart-dlg-input-marks-interval-1"></div>
</td>
<td class="padding-large">
</td>
</tr>
</table>
</div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textLabelOptions %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="140">
<label class="input-label"><%= scope.textLabelPos %></label>
<div id="chart-dlg-combo-h-label-pos-1" class="input-group-nr"></div>
</td>
<td class="padding-small">
<label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
<div id="chart-dlg-input-label-dist-1" style="margin-left: 15px;"></div>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<label class="input-label"><%= scope.textLabelInterval %></label>
</td>
</tr>
<tr>
<td width="100%" colspan="2">
<div id="chart-dlg-combo-label-int-1" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
<div id="chart-dlg-input-label-int-1" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
</td>
</tr>
</table>
@ -326,35 +506,7 @@
</table>
</div>
<div class="inner-content">
<!--<div class="padding-large" >-->
<!--<label class="header padding-small" style="display: block;"><%= scope.textSparkRanges %></label>-->
<!--<div id="spark-dlg-radio-group" class="padding-small" style="display: block;"></div>-->
<!--<div id="spark-dlg-radio-single" style="display: block;"></div>-->
<!--</div>-->
<table cols="2" style="width: 100%;">
<!--<tr>-->
<!--<td colspan=2 >-->
<!--<label class="header"><%= scope.textDataRange %></label>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan=2 class="padding-small" width="200">-->
<!--<div id="spark-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan=2 >-->
<!--<label class="header"><%= scope.textLocationRange %></label>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td class="padding-large" colspan=2 width="200">-->
<!--<div id="spark-dlg-txt-location" class="input-row" style="margin-right: 10px;"></div>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan=2 class="padding-large"></td>-->
<!--</tr>-->
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textEmptyCells %></label>

1
apps/spreadsheeteditor/main/app/template/ToolbarAnother.template
View file

@ -31,6 +31,7 @@
<div class="elset">
<span class="btn-slot border" id="slot-btn-chart" style="width: auto;"></span>
<span class="btn-slot border" id="slot-btn-chart-data" style="width: auto;margin-left: 12px;"></span>
<span class="btn-slot border" id="slot-btn-chart-type" style="width: auto;margin-left: 12px;"></span>
</div>
</div>
<div class="group" style="width: 100%;"></div>

119
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,22 +153,12 @@ define([
}
value = props.asc_getSeveralChartTypes();
if (this._state.SeveralCharts && value) {
this.btnChartType.setIconCls('svgicon');
this._state.ChartType = null;
} else {
var type = this.chartProps.getType();
var type = (this._state.SeveralCharts && value) ? null : 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.ShowCombinedProps(type);
(type !== null) && this.updateChartStyles(this.api.asc_getChartPreviews(type));
this._state.ChartType = type;
}
}
value = props.asc_getSeveralChartStyles();
if (this._state.SeveralCharts && value) {
@ -599,32 +591,6 @@ define([
createDelayedControls: function() {
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.spnWidth = new Common.UI.MetricSpinner({
el: $('#chart-spin-width'),
step: .1,
@ -756,8 +722,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 +760,11 @@ define([
this.SparkPointsContainer.toggleClass('settings-hidden', isChart);
},
ShowCombinedProps: function(type) {
this.NotCombinedSettings.toggleClass('settings-hidden', type===null || type==Asc.c_oAscChartTypeSettings.comboBarLine || type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar || type==Asc.c_oAscChartTypeSettings.comboCustom);
},
onWidthChange: function(field, newValue, oldValue, eOpts){
var w = field.getNumberValue();
var h = this.spnHeight.getNumberValue();
@ -924,33 +909,34 @@ 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);
}
} else {
rawData = record;
me._isEditType = false;
}
Common.NotificationCenter.trigger('edit:complete', me);
}
}).on('close', function() {
me._isEditType && props.cancelEdit();
me._isEditType = false;
});
win.show();
}
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) {
@ -1259,7 +1245,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 || {}));
});

1279
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

File diff suppressed because it is too large Load diff

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

@ -0,0 +1,449 @@
/*
*
* (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';
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.ChartTypeDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 370,
height: 385
},
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-large">',
'<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: 115px;">', me.textSeries, '</label>',
'<label id="chart-type-dlg-label-sort" class="header" style="width: 100px;">', me.textType, '</label>',
'<label class="header" style="width: 134px;text-align: center;">', 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: 180px;"></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;
var arr = Common.define.chartData.getChartGroupData();
this._arrSeriesGroups = [];
arr.forEach(function(item) {
(item.id !== 'menu-chart-group-combo') && (item.id !== 'menu-chart-group-stock') && me._arrSeriesGroups.push(item);
});
arr = Common.define.chartData.getChartData();
this._arrSeriesType = [];
arr.forEach(function(item) {
!item.is3d && item.type!==Asc.c_oAscChartTypeSettings.stock &&
item.type!==Asc.c_oAscChartTypeSettings.comboBarLine && item.type!==Asc.c_oAscChartTypeSettings.comboBarLineSecondary &&
item.type!==Asc.c_oAscChartTypeSettings.comboAreaBar && item.type!==Asc.c_oAscChartTypeSettings.comboCustom && me._arrSeriesType.push(item);
});
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(arr),
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="50" height="50"/>',
'<% if (typeof title !== "undefined") {%>',
'<span class="title"><%= title %></span>',
'<% } %>',
'</div>'
].join(''))
});
this.stylesList.on('item:select', _.bind(this.onSelectStyles, this));
this.seriesList = new Common.UI.ListView({
el: $('#chart-type-dlg-series-list', this.$window),
store: new Common.UI.DataViewStore(),
emptyText: '',
enableKeyEvents: false,
scrollAlwaysVisible: true,
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
itemTemplate: _.template([
'<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
'<div style="width:8px;height:12px;display: inline-block;vertical-align: middle;" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
'<div style="width:95px;padding-left: 5px;display: inline-block;vertical-align: middle;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"><%= value %></div>',
'<div style="width: 110px;padding-left: 5px;display: inline-block;vertical-align: middle;color: initial;"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
'<div style="padding-left: 55px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
'</div>'
].join(''))
});
this.seriesList.createNewItem = function(record) {
return new _CustomItem({
template: this.itemTemplate,
model: record
});
};
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.seriesList.on('item:add', _.bind(this.addControls, this));
this.seriesList.on('item:change', _.bind(this.addControls, this));
this.ShowHideSettings(this.currentChartType);
if (this.currentChartType==Asc.c_oAscChartTypeSettings.comboBarLine || this.currentChartType==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
this.currentChartType==Asc.c_oAscChartTypeSettings.comboAreaBar || this.currentChartType==Asc.c_oAscChartTypeSettings.comboCustom) {
this.updateSeriesList(this.chartSettings.getSeries());
} 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;
}
var isCombo = rawData.type==Asc.c_oAscChartTypeSettings.comboBarLine || rawData.type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
rawData.type==Asc.c_oAscChartTypeSettings.comboAreaBar || rawData.type==Asc.c_oAscChartTypeSettings.comboCustom;
if (isCombo && this.chartSettings.getSeries().length<2) {
Common.UI.warning({msg: this.errorComboSeries, maxwidth: 600});
return;
}
this.btnChartType.setIconCls('svgicon ' + 'chart-' + rawData.iconCls);
this.currentChartType = rawData.type;
this.chartSettings.changeType(this.currentChartType);
this.ShowHideSettings(this.currentChartType);
if (isCombo)
this.updateSeriesList(this.chartSettings.getSeries());
else
this.updateChartStyles(this.api.asc_getChartPreviews(this.currentChartType));
},
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) {
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(),
type: item.asc_getChartType(),
isSecondary: item.asc_getIsSecondaryAxis(),
canChangeSecondary: item.asc_canChangeAxisType(),
seriesIndex: i,
series: item
});
arr.push(rec);
}
store.reset(arr);
(arr.length>0) && (index!==undefined) && (index < arr.length) && this.seriesList.selectByIndex(index);
},
addControls: function(listView, itemView, item) {
if (!item) return;
var me = this,
i = item.get('seriesIndex'),
cmpEl = this.seriesList.cmpEl.find('#chart-type-dlg-item-' + i),
series = item.get('series');
series.asc_drawPreviewRect('chart-type-dlg-series-preview-' + i);
var combo = this.initSeriesType('#chart-type-dlg-cmb-series-' + i, i, item);
var check = new Common.UI.CheckBox({
el: cmpEl.find('#chart-type-dlg-chk-series-' + i),
value: item.get('isSecondary'),
disabled: !item.get('canChangeSecondary')
});
check.on('change', function(field, newValue, oldValue, eOpts) {
var res = series.asc_TryChangeAxisType(field.getValue()=='checked');
if (res !== Asc.c_oAscError.ID.No) {
field.setValue(field.getValue()!='checked', true);
} else
me.updateSeriesList(me.chartSettings.getSeries(), i);
});
cmpEl.on('mousedown', '.combobox', function(){
me.seriesList.selectRecord(item);
});
},
initSeriesType: function(id, index, item) {
var me = this,
series = item.get('series'),
store = new Common.UI.DataViewStore(me._arrSeriesType),
currentTypeRec = store.findWhere({type: item.get('type')}),
tip = currentTypeRec ? currentTypeRec.get('tip') : '',
el = $(id);
var combo = new Common.UI.ComboBox({
el: el,
template: _.template([
'<span class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle no-highlighted" tabindex="0" data-toggle="dropdown">',
'<input type="text" class="form-control" spellcheck="false">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-target="' + id + '"><span class="caret img-commonctrl"></span></button>',
'</span>'
].join(''))
});
var combomenu = new Common.UI.Menu({
cls: 'menu-absolute',
style: 'width: 318px; padding-top: 12px;',
additionalAlign: this.menuAddAlign,
items: [
{ template: _.template('<div id="chart-type-dlg-series-menu-' + index + '" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
});
combomenu.render(el);
combo.setValue(tip);
var onShowBefore = function(menu) {
var picker = new Common.UI.DataView({
el: $('#chart-type-dlg-series-menu-' + index),
parentMenu: menu,
restoreHeight: 421,
groups: new Common.UI.DataViewGroupStore(me._arrSeriesGroups),
store: store,
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist"><svg width="40" height="40" class=\"icon\"><use xlink:href=\"#chart-<%= iconCls %>\"></use></svg></div>')
});
picker.selectRecord(currentTypeRec, true);
picker.on('item:click', function(picker, view, record){
var oldtype = item.get('type');
var res = series.asc_TryChangeChartType(record.get('type'));
if (res == Asc.c_oAscError.ID.No) {
combo.setValue(record.get('tip'));
me.updateSeriesList(me.chartSettings.getSeries(), index);
} else {
var oldrecord = picker.store.findWhere({type: oldtype});
picker.selectRecord(oldrecord, true);
if (res==Asc.c_oAscError.ID.SecondaryAxis)
Common.UI.warning({msg: me.errorSecondaryAxis, maxwidth: 500}); }
});
menu.off('show:before', onShowBefore);
};
combomenu.on('show:before', onShowBefore);
return combo;
},
ShowHideSettings: function(type) {
var isCombo = type==Asc.c_oAscChartTypeSettings.comboBarLine || type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar || type==Asc.c_oAscChartTypeSettings.comboCustom;
this.NotCombinedSettings.toggleClass('hidden', isCombo);
this.CombinedSettings.toggleClass('hidden', !isCombo);
},
textTitle: 'Chart Type',
textType: 'Type',
textStyle: 'Style',
textSeries: 'Series',
textSecondary: 'Secondary Axis',
errorSecondaryAxis: 'The selected chart type requires the secondary axis that an existing chart is using. Select another chart type.',
errorComboSeries: 'To create a combination chart, select at least two series of data.'
}, SSE.Views.ChartTypeDialog || {}))
});

56
apps/spreadsheeteditor/main/app/view/FormatSettingsDialog.js
View file

@ -84,10 +84,17 @@ define([
me.CurrencySymbolsData = null;
me.langId = 0x0409;
this.api = options.api;
this.handler = options.handler;
this.props = options.props;
this.linked = options.linked || false;
var height = this.linked ? 360 : 340;
_.extend(this.options, {
title: this.textTitle,
height: height,
template: [
'<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
'<div class="box" style="height:' + (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%;">',
@ -99,8 +106,8 @@ define([
'</tr>',
'<tr>',
'<td class="padding-large" style="white-space: nowrap;">',
'<label style="vertical-align: middle; margin-right: 4px;">' + me.txtSample + '</label>',
'<label id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;">100</label>',
'<label class="format-sample" style="vertical-align: middle; margin-right: 4px;">' + me.txtSample + '</label>',
'<label class="format-sample" id="format-settings-label-example" style="vertical-align: middle; max-width: 220px; overflow: hidden; text-overflow: ellipsis;">100</label>',
'</td>',
'</tr>',
'<tr class="format-no-code">',
@ -143,6 +150,11 @@ define([
'<div id="format-settings-list-code" style="width:264px; height: 116px;"></div>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="1">',
'<div id="format-settings-chk-linked"></div>',
'</td>',
'</tr>',
'</table>',
'</div></div>',
'</div>',
@ -151,13 +163,9 @@ define([
].join('')
}, options);
this.api = options.api;
this.handler = options.handler;
this.props = options.props;
this._state = {hasDecimal: false, hasNegative: false, hasSeparator: false, hasType: false, hasSymbols: false, hasCode: false};
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._state = {hasDecimal: false, hasNegative: false, hasSeparator: false, hasType: false, hasSymbols: false, hasCode: false};
this.FormatType = Asc.c_oAscNumFormatType.General;
this.Format = "General";
this.CustomFormat = null;
@ -247,8 +255,23 @@ define([
me.codesList.deselectAll();
me.Format = me.api.asc_convertNumFormatLocal2NumFormat(value);
me.lblExample.text(me.api.asc_getLocaleExample(me.Format));
me.chLinked.setValue(false, true);
});
this.chLinked = new Common.UI.CheckBox({
el: $('#format-settings-chk-linked'),
labelText: this.textLinked
}).on ('change', function (field, newValue, oldValue, eOpts) {
me.props.linked = (field.getValue()=='checked');
if (me.props.linked) {
me.props.chartFormat.putSourceLinked(true);
me.props.format = me.props.chartFormat.getFormatCode();
me.props.formatInfo = me.props.chartFormat.getFormatCellsInfo();
me._setDefaults(me.props);
}
});
this.chLinked.setVisible(this.linked);
this._decimalPanel = this.$window.find('.format-decimal');
this._negativePanel = this.$window.find('.format-negative');
this._separatorPanel = this.$window.find('.format-separator');
@ -256,6 +279,7 @@ define([
this._symbolsPanel = this.$window.find('.format-symbols');
this._codePanel = this.$window.find('.format-code');
this._nocodePanel = this.$window.find('.format-no-code');
this.$window.find('.format-sample').toggleClass('hidden', this.linked);
this.lblExample = this.$window.find('#format-settings-label-example');
@ -320,10 +344,13 @@ define([
// for date/time - if props.format not in cmbType - setValue(this.api.asc_getLocaleExample(props.format, 38822))
// for cmbNegative - if props.format not in cmbNegative - setValue(this.api.asc_getLocaleExample(props.format))
}
if (props && props.chartFormat) {
this.chLinked.setValue(!!props.chartFormat.getSourceLinked(), true);
}
},
getSettings: function () {
return {format: this.Format};
return {format: this.Format, linked: this.chLinked.getValue()==='checked'};
},
onDlgBtnClick: function(event) {
@ -344,6 +371,7 @@ define([
onNegativeSelect: function(combo, record) {
this.Format = record.value;
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.chLinked.setValue(false, true);
},
onSymbolsSelect: function(combo, record) {
@ -365,6 +393,7 @@ define([
this.Format = format[0];
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.chLinked.setValue(false, true);
},
onDecimalChange: function(field, newValue, oldValue, eOpts){
@ -390,6 +419,7 @@ define([
}
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.chLinked.setValue(false, true);
},
onSeparatorChange: function(field, newValue, oldValue, eOpts){
@ -410,11 +440,13 @@ define([
this.Format = format[0];
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.chLinked.setValue(false, true);
},
onTypeSelect: function(combo, record){
this.Format = record.value;
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.chLinked.setValue(false, true);
},
onCodeSelect: function(listView, itemView, record){
@ -423,6 +455,7 @@ define([
this.Format = record.get('format');
this.lblExample.text(this.api.asc_getLocaleExample(this.Format));
this.inputCustomFormat.setValue(record.get('value'));
this.chLinked.setValue(false, true);
},
onFormatSelect: function(combo, record, e, initFormatInfo) {
@ -536,6 +569,8 @@ define([
this._codePanel.toggleClass('hidden', !hasCode);
this._nocodePanel.toggleClass('hidden', hasCode);
this._state = { hasDecimal: hasDecimal, hasNegative: hasNegative, hasSeparator: hasSeparator, hasType: hasType, hasSymbols: hasSymbols, hasCode: hasCode};
!initFormatInfo && this.chLinked.setValue(false, true);
},
textTitle: 'Number Format',
@ -565,7 +600,8 @@ define([
txtAs10: 'As tenths (5/10)',
txtAs100: 'As hundredths (50/100)',
txtSample: 'Sample:',
txtNone: 'None'
txtNone: 'None',
textLinked: 'Linked to source'
}, SSE.Views.FormatSettingsDialog || {}))
});

14
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -285,6 +285,14 @@ define([
lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect],
style : 'width: 120px;'
});
me.btnEditChartType = new Common.UI.Button({
id : 'id-toolbar-rtn-edit-chart-type',
cls : 'btn-toolbar btn-text-value',
caption : me.tipEditChartType,
lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect],
style : 'width: 120px;'
});
} else
if ( config.isEditMailMerge ) {
me.$layout = $(_.template(simple)(config));
@ -1639,6 +1647,7 @@ define([
_injectComponent('#slot-field-styles', this.listStyles);
_injectComponent('#slot-btn-chart', this.btnEditChart);
_injectComponent('#slot-btn-chart-data', this.btnEditChartData);
_injectComponent('#slot-btn-chart-type', this.btnEditChartType);
_injectComponent('#slot-btn-pageorient', this.btnPageOrient);
_injectComponent('#slot-btn-pagemargins', this.btnPageMargins);
_injectComponent('#slot-btn-pagesize', this.btnPageSize);
@ -1983,7 +1992,7 @@ define([
if (mode.isDisconnected) {
this.lockToolbar( SSE.enumLock.lostConnect, true );
this.lockToolbar( SSE.enumLock.lostConnect, true,
{array:[this.btnEditChart, this.btnEditChartData, this.btnUndo,this.btnRedo]} );
{array:[this.btnEditChart, this.btnEditChartData, this.btnEditChartType, this.btnUndo,this.btnRedo]} );
if (!mode.enableDownload)
this.lockToolbar(SSE.enumLock.cantPrint, true, {array: [this.btnPrint]});
} else {
@ -2447,6 +2456,7 @@ define([
tipInsertSlicer: 'Insert slicer',
textVertical: 'Vertical Text',
textTabView: 'View',
tipEditChartData: 'Select Data'
tipEditChartData: 'Select Data',
tipEditChartType: 'Change Chart Type'
}, SSE.Views.Toolbar || {}));
});

34
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1231,6 +1231,7 @@
"SSE.Controllers.Toolbar.txtTable_TableStyleMedium": "Table Style Medium",
"SSE.Controllers.Toolbar.warnLongOperation": "The operation you are about to perform might take rather much time to complete.<br>Are you sure you want to continue?",
"SSE.Controllers.Toolbar.warnMergeLostData": "Only the data from the upper-left cell will remain in the merged cell. <br>Are you sure you want to continue?",
"SSE.Controllers.Toolbar.errorComboSeries": "To create a combination chart, select at least two series of data.",
"SSE.Controllers.Viewport.textFreezePanes": "Freeze Panes",
"SSE.Controllers.Viewport.textFreezePanesShadow:": "Show Frozen Panes Shadow",
"SSE.Controllers.Viewport.textHideFBar": "Hide Formula Bar",
@ -1382,6 +1383,7 @@
"SSE.Views.ChartSettings.textStyle": "Style",
"SSE.Views.ChartSettings.textType": "Type",
"SSE.Views.ChartSettings.textWidth": "Width",
"SSE.Views.ChartSettings.textChangeType": "Change type",
"SSE.Views.ChartSettingsDlg.errorMaxPoints": "ERROR! The maximum number of points in series per chart is 4096.",
"SSE.Views.ChartSettingsDlg.errorMaxRows": "ERROR! The maximum number of data series per chart is 255",
"SSE.Views.ChartSettingsDlg.errorStockChart": "Incorrect row order. To build a stock chart place the data on the sheet in the following order:<br> opening price, max price, min price, closing price.",
@ -1407,9 +1409,9 @@
"SSE.Views.ChartSettingsDlg.textCustom": "Custom",
"SSE.Views.ChartSettingsDlg.textDataColumns": "in columns",
"SSE.Views.ChartSettingsDlg.textDataLabels": "Data Labels",
"SSE.Views.ChartSettingsDlg.textDataRange": "Data Range",
"del_SSE.Views.ChartSettingsDlg.textDataRange": "Data Range",
"SSE.Views.ChartSettingsDlg.textDataRows": "in rows",
"SSE.Views.ChartSettingsDlg.textDataSeries": "Data series",
"del_SSE.Views.ChartSettingsDlg.textDataSeries": "Data series",
"SSE.Views.ChartSettingsDlg.textDisplayLegend": "Display Legend",
"SSE.Views.ChartSettingsDlg.textEmptyCells": "Hidden and Empty cells",
"SSE.Views.ChartSettingsDlg.textEmptyLine": "Connect data points with line",
@ -1421,9 +1423,9 @@
"SSE.Views.ChartSettingsDlg.textHide": "Hide",
"SSE.Views.ChartSettingsDlg.textHigh": "High",
"SSE.Views.ChartSettingsDlg.textHorAxis": "Horizontal Axis",
"SSE.Views.ChartSettingsDlg.textHorGrid": "Horizontal Gridlines",
"del_SSE.Views.ChartSettingsDlg.textHorGrid": "Horizontal Gridlines",
"SSE.Views.ChartSettingsDlg.textHorizontal": "Horizontal",
"SSE.Views.ChartSettingsDlg.textHorTitle": "Horizontal Axis Title",
"del_SSE.Views.ChartSettingsDlg.textHorTitle": "Horizontal Axis Title",
"SSE.Views.ChartSettingsDlg.textHundredMil": "100 000 000",
"SSE.Views.ChartSettingsDlg.textHundreds": "Hundreds",
"SSE.Views.ChartSettingsDlg.textHundredThousands": "100 000",
@ -1475,11 +1477,11 @@
"SSE.Views.ChartSettingsDlg.textSeparator": "Data Labels Separator",
"SSE.Views.ChartSettingsDlg.textSeriesName": "Series Name",
"SSE.Views.ChartSettingsDlg.textShow": "Show",
"SSE.Views.ChartSettingsDlg.textShowAxis": "Display Axis",
"del_SSE.Views.ChartSettingsDlg.textShowAxis": "Display Axis",
"SSE.Views.ChartSettingsDlg.textShowBorders": "Display chart borders",
"SSE.Views.ChartSettingsDlg.textShowData": "Show data in hidden rows and columns",
"SSE.Views.ChartSettingsDlg.textShowEmptyCells": "Show empty cells as",
"SSE.Views.ChartSettingsDlg.textShowGrid": "Grid Lines",
"del_SSE.Views.ChartSettingsDlg.textShowGrid": "Grid Lines",
"SSE.Views.ChartSettingsDlg.textShowSparkAxis": "Show Axis",
"SSE.Views.ChartSettingsDlg.textShowValues": "Display chart values",
"SSE.Views.ChartSettingsDlg.textSingle": "Single Sparkline",
@ -1499,16 +1501,28 @@
"SSE.Views.ChartSettingsDlg.textTwoCell": "Move and size with cells",
"SSE.Views.ChartSettingsDlg.textType": "Type",
"SSE.Views.ChartSettingsDlg.textTypeData": "Type & Data",
"SSE.Views.ChartSettingsDlg.textTypeStyle": "Chart Type, Style &<br/>Data Range",
"del_SSE.Views.ChartSettingsDlg.textTypeStyle": "Chart Type, Style &<br/>Data Range",
"SSE.Views.ChartSettingsDlg.textUnits": "Display Units",
"SSE.Views.ChartSettingsDlg.textValue": "Value",
"SSE.Views.ChartSettingsDlg.textVertAxis": "Vertical Axis",
"SSE.Views.ChartSettingsDlg.textVertGrid": "Vertical Gridlines",
"SSE.Views.ChartSettingsDlg.textVertTitle": "Vertical Axis Title",
"del_SSE.Views.ChartSettingsDlg.textVertGrid": "Vertical Gridlines",
"del_SSE.Views.ChartSettingsDlg.textVertTitle": "Vertical Axis Title",
"SSE.Views.ChartSettingsDlg.textXAxisTitle": "X Axis Title",
"SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
"SSE.Views.ChartSettingsDlg.textZero": "Zero",
"SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required",
"SSE.Views.ChartSettingsDlg.textVertAxisSec": "Secondary Vertical Axis",
"SSE.Views.ChartSettingsDlg.textHorAxisSec": "Secondary Horizontal Axis",
"SSE.Views.ChartSettingsDlg.textAxisTitle": "Title",
"SSE.Views.ChartSettingsDlg.textHideAxis": "Hide axis",
"SSE.Views.ChartSettingsDlg.textFormat": "Label format",
"SSE.Views.ChartTypeDialog.textTitle": "Chart Type",
"SSE.Views.ChartTypeDialog.textType": "Type",
"SSE.Views.ChartTypeDialog.textStyle": "Style",
"SSE.Views.ChartTypeDialog.textSeries": "Series",
"SSE.Views.ChartTypeDialog.textSecondary": "Secondary Axis",
"SSE.Views.ChartTypeDialog.errorSecondaryAxis": "The selected chart type requires the secondary axis that an existing chart is using. Select another chart type.",
"SSE.Views.ChartTypeDialog.errorComboSeries": "To create a combination chart, select at least two series of data.",
"SSE.Views.CreatePivotDialog.textDataRange": "Source data range",
"SSE.Views.CreatePivotDialog.textDestination": "Choose where to place the table",
"SSE.Views.CreatePivotDialog.textExist": "Existing worksheet",
@ -1919,6 +1933,7 @@
"SSE.Views.FormatSettingsDialog.txtUpto1": "Up to one digit (1/3)",
"SSE.Views.FormatSettingsDialog.txtUpto2": "Up to two digits (12/25)",
"SSE.Views.FormatSettingsDialog.txtUpto3": "Up to three digits (131/135)",
"SSE.Views.FormatSettingsDialog.textLinked": "Linked to source",
"SSE.Views.FormulaDialog.sDescription": "Description",
"SSE.Views.FormulaDialog.textGroupDescription": "Select Function Group",
"SSE.Views.FormulaDialog.textListDescription": "Select Function",
@ -2861,6 +2876,7 @@
"SSE.Views.Toolbar.tipDigStylePercent": "Percent style",
"SSE.Views.Toolbar.tipEditChart": "Edit Chart",
"SSE.Views.Toolbar.tipEditChartData": "Select Data",
"SSE.Views.Toolbar.tipEditChartType": "Change Chart Type",
"SSE.Views.Toolbar.tipEditHeader": "Edit header or footer",
"SSE.Views.Toolbar.tipFontColor": "Font color",
"SSE.Views.Toolbar.tipFontName": "Font",