[SSE] Change chart type
This commit is contained in:
Julia Radzhabova
parent
251dea4412
commit
27663a1691
|
|
@ -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 |
|
|
@ -941,13 +941,13 @@ define([
|
|||
props = me.api.asc_getChartObject();
|
||||
if (props) {
|
||||
me._isEditType = true;
|
||||
// props.startEdit();
|
||||
props.startEdit();
|
||||
var win = new SSE.Views.ChartTypeDialog({
|
||||
chartSettings: props,
|
||||
api: me.api,
|
||||
handler: function(result, value) {
|
||||
if (result == 'ok') {
|
||||
// props.endEdit();
|
||||
props.endEdit();
|
||||
if (me.api) {
|
||||
me.api.asc_editChartDrawingObject(value.chartSettings);
|
||||
}
|
||||
|
|
@ -956,7 +956,7 @@ define([
|
|||
Common.NotificationCenter.trigger('edit:complete', me);
|
||||
}
|
||||
}).on('close', function() {
|
||||
// me._isEditType && props.cancelEdit();
|
||||
me._isEditType && props.cancelEdit();
|
||||
me._isEditType = false;
|
||||
});
|
||||
win.show();
|
||||
|
|
|
|||
|
|
@ -46,10 +46,31 @@ define([
|
|||
'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: 312,
|
||||
height: 490
|
||||
contentWidth: 370,
|
||||
height: 400
|
||||
},
|
||||
|
||||
initialize : function(options) {
|
||||
|
|
@ -76,8 +97,8 @@ define([
|
|||
'</tr>',
|
||||
'<tr class="combined-chart">',
|
||||
'<td>',
|
||||
'<label id="chart-type-dlg-label-column" class="header" style="width: 100px;">', me.textSeries, '</label>',
|
||||
'<label id="chart-type-dlg-label-sort" class="header" style="width: 130px;">', me.textType, '</label>',
|
||||
'<label 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="">', me.textSecondary, '</label>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
|
|
@ -108,6 +129,18 @@ define([
|
|||
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') && me._arrSeriesGroups.push(item);
|
||||
});
|
||||
arr = Common.define.chartData.getChartData();
|
||||
this._arrSeriesType = [];
|
||||
arr.forEach(function(item) {
|
||||
!item.is3d && 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',
|
||||
|
|
@ -125,7 +158,7 @@ define([
|
|||
parentMenu: btn.menu,
|
||||
restoreHeight: 421,
|
||||
groups: new Common.UI.DataViewGroupStore(Common.define.chartData.getChartGroupData()),
|
||||
store: new Common.UI.DataViewStore(Common.define.chartData.getChartData()),
|
||||
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>')
|
||||
});
|
||||
});
|
||||
|
|
@ -148,6 +181,30 @@ define([
|
|||
});
|
||||
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,
|
||||
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: 100px;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: 64px;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.seriesList.on('item:select', _.bind(this.onSelectLevel, this))
|
||||
// .on('item:keydown', _.bind(this.onKeyDown, this));
|
||||
|
||||
this.NotCombinedSettings = $('.simple-chart', this.$window);
|
||||
this.CombinedSettings = $('.combined-chart', this.$window);
|
||||
|
||||
|
|
@ -178,9 +235,12 @@ define([
|
|||
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.combo) {
|
||||
|
||||
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));
|
||||
}
|
||||
|
|
@ -224,8 +284,9 @@ define([
|
|||
this.currentChartType = rawData.type;
|
||||
this.chartSettings.changeType(this.currentChartType);
|
||||
this.ShowHideSettings(this.currentChartType);
|
||||
if (this.currentChartType==Asc.c_oAscChartTypeSettings.combo) {
|
||||
|
||||
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));
|
||||
},
|
||||
|
|
@ -268,8 +329,6 @@ define([
|
|||
},
|
||||
|
||||
updateSeriesList: function(series, index) {
|
||||
this.btnEditCategory.setDisabled(series && series.length>0 ? series[0].asc_IsScatter() : false);
|
||||
|
||||
var arr = [];
|
||||
var store = this.seriesList.store;
|
||||
for (var i = 0, len = series.length; i < len; i++)
|
||||
|
|
@ -278,19 +337,98 @@ define([
|
|||
rec = new Common.UI.DataViewModel();
|
||||
rec.set({
|
||||
value: item.asc_getSeriesName(),
|
||||
index: item.asc_getIdx(),
|
||||
order: item.asc_getOrder(),
|
||||
type: item.asc_getChartType(),
|
||||
isSecondary: item.asc_getIsSecondaryAxis(),
|
||||
canChangeSecondary: item.asc_canChangeAxisType(),
|
||||
seriesIndex: i,
|
||||
series: item
|
||||
});
|
||||
arr.push(rec);
|
||||
}
|
||||
store.reset(arr);
|
||||
(len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1));
|
||||
},
|
||||
|
||||
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(cmpEl.find('#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);
|
||||
}
|
||||
});
|
||||
cmpEl.on('mousedown', '.combobox', function(){
|
||||
me.seriesList.selectRecord(item);
|
||||
});
|
||||
},
|
||||
|
||||
initSeriesType: function(el, 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') : '';
|
||||
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"><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'));
|
||||
} else {
|
||||
var oldrecord = picker.store.findWhere({type: oldtype});
|
||||
picker.selectRecord(oldrecord, true);
|
||||
}
|
||||
});
|
||||
menu.off('show:before', onShowBefore);
|
||||
};
|
||||
combomenu.on('show:before', onShowBefore);
|
||||
return combo;
|
||||
},
|
||||
|
||||
ShowHideSettings: function(type) {
|
||||
this.NotCombinedSettings.toggleClass('hidden', type==Asc.c_oAscChartTypeSettings.combo);
|
||||
this.CombinedSettings.toggleClass('hidden', type!==Asc.c_oAscChartTypeSettings.combo);
|
||||
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',
|
||||
|
|
|
|||
Loading…
Reference in a new issue