Merge pull request #619 from ONLYOFFICE/feature/sse-multichart
Feature/sse multichart
This commit is contained in:
commit
f9fb61d2f0
|
@ -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)) {
|
||||
|
|
|
@ -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'},
|
||||
|
|
|
@ -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>
|
||||
|
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
|
@ -73,4 +73,9 @@
|
|||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid @input-border;
|
||||
.border-radius(@border-radius-small);
|
||||
}
|
||||
}
|
|
@ -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 || {}))
|
||||
});
|
|
@ -2050,11 +2050,12 @@ define([
|
|||
}
|
||||
|
||||
if (chart) {
|
||||
var props = new Asc.asc_CImgProperty();
|
||||
chart.changeType(type);
|
||||
props.put_ChartProperties(chart);
|
||||
this.api.ImgApply(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.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)
|
||||
|
|
|
@ -386,14 +386,17 @@ define([
|
|||
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.put_ChartProperties(this.chartProps);
|
||||
this.api.ImgApply(props);
|
||||
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;
|
||||
this.chartProps.changeType(rawData.type);
|
||||
}
|
||||
}
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
|
|
@ -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...",
|
||||
|
|
|
@ -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 || {}))
|
||||
});
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
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);
|
||||
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;
|
||||
this._originalProps.changeType(rawData.type);
|
||||
}
|
||||
}
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
|
|
@ -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...",
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 || {}));
|
||||
});
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
|
@ -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);
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
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 || {}));
|
||||
});
|
File diff suppressed because it is too large
Load diff
449
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
Normal file
449
apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
Normal 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 || {}))
|
||||
});
|
|
@ -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 || {}))
|
||||
});
|
|
@ -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 || {}));
|
||||
});
|
|
@ -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",
|
||||
|
|
Loading…
Reference in a new issue