diff --git a/apps/common/main/lib/util/define.js b/apps/common/main/lib/util/define.js index bb448a41c..023b7f9d7 100644 --- a/apps/common/main/lib/util/define.js +++ b/apps/common/main/lib/util/define.js @@ -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'}, diff --git a/apps/common/main/resources/img/toolbar/charttypes.svg b/apps/common/main/resources/img/toolbar/charttypes.svg index 3f3289bb2..52fbd319c 100644 --- a/apps/common/main/resources/img/toolbar/charttypes.svg +++ b/apps/common/main/resources/img/toolbar/charttypes.svg @@ -109,6 +109,9 @@ + + + diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 39fbcaeab..813b79595 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -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(); diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js index a09974821..f4b8916de 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js +++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js @@ -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([ '', '', '', - '', - '', + '', + '', '', '', '', @@ -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('
\">
') }); }); @@ -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(['
'].join('')), + itemTemplate: _.template([ + '
', + '
', + '
<%= value %>
', + '
', + '
', + '
' + ].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([ + '', + '', + '', + '' + ].join('')) + }); + var combomenu = new Common.UI.Menu({ + cls: 'menu-absolute', + style: 'width: 318px; padding-top: 12px;', + additionalAlign: this.menuAddAlign, + items: [ + { template: _.template('') } + ] + }); + 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('
\">
') + }); + 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',