From 5924e4ff82744598930066d0d9970180af49827f Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 14 Sep 2016 16:34:08 +0300 Subject: [PATCH] Added sparkline settings. --- .../main/lib/component/ComboBorderSize.js | 19 +- .../main/lib/component/ThemeColorPalette.js | 13 +- .../main/app/controller/DocumentHolder.js | 1 + .../main/app/controller/RightMenu.js | 19 +- .../main/app/controller/Toolbar.js | 47 +- .../main/app/template/ChartSettings.template | 87 +++- .../app/template/ChartSettingsDlg.template | 109 +++++ .../main/app/view/ChartSettings.js | 458 +++++++++++++++--- .../main/app/view/ChartSettingsDlg.js | 365 ++++++++++++-- .../main/app/view/Toolbar.js | 105 +++- apps/spreadsheeteditor/main/locale/en.json | 2 +- .../main/resources/less/rightmenu.less | 12 + 12 files changed, 1099 insertions(+), 138 deletions(-) diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js index 4478f8f11..c6994b233 100644 --- a/apps/common/main/lib/component/ComboBorderSize.js +++ b/apps/common/main/lib/component/ComboBorderSize.js @@ -75,6 +75,7 @@ define([ }); Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({ + allowNoBorders: true, template: _.template([ '
', '
', @@ -94,13 +95,8 @@ define([ ].join('')), initialize : function(options) { - var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); - - Common.UI.ComboBox.prototype.initialize.call(this, _.extend({ - editable: false, - store: new Common.UI.BordersStore(), - data: [ - {displayValue: this.txtNoBorders, value: 0, pxValue: 0 }, + var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt), + data = [ {displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20}, {displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40}, @@ -108,7 +104,14 @@ define([ {displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80}, {displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 5, offsety: 100}, {displayValue: '6 ' + txtPt, value: 6, pxValue: 6, offsety: 120} - ], + ]; + if (options.allowNoBorders) + data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 }); + + Common.UI.ComboBox.prototype.initialize.call(this, _.extend({ + editable: false, + store: new Common.UI.BordersStore(), + data: data, menuStyle: 'min-width: 150px;' }, options)); }, diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index cedc96e69..ef3636b4e 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -309,7 +309,7 @@ define([ } }, - updateColors: function(effectcolors, standartcolors) { + updateColors: function(effectcolors, standartcolors, value) { if (effectcolors===undefined || standartcolors===undefined) return; var me = this, @@ -366,11 +366,14 @@ define([ } } - var selected = $(this.el).find('a.' + this.selectedCls); - if (selected.length && selected.hasClass('palette-color-effect')) { - this.value = selected[0].className.match(this.colorRe)[1].toUpperCase(); + if (value) + this.select(value, true); + else { + var selected = $(this.el).find('a.' + this.selectedCls); + if (selected.length && selected.hasClass('palette-color-effect')) { + this.value = selected[0].className.match(this.colorRe)[1].toUpperCase(); + } } - this.options.updateColorsArr = undefined; }, diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js index 88ddb8a58..c42087cd2 100644 --- a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js +++ b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js @@ -662,6 +662,7 @@ define([ (new SSE.Views.ChartSettingsDlg( { chartSettings: props, + isChart: true, api: me.api, handler: function(result, value) { if (result == 'ok') { diff --git a/apps/spreadsheeteditor/main/app/controller/RightMenu.js b/apps/spreadsheeteditor/main/app/controller/RightMenu.js index dc61d8f92..bfed20b30 100644 --- a/apps/spreadsheeteditor/main/app/controller/RightMenu.js +++ b/apps/spreadsheeteditor/main/app/controller/RightMenu.js @@ -108,21 +108,22 @@ define([ var SelectedObjects = [], selectType = info.asc_getFlags().asc_getSelectionType(), - formatTableInfo = info.asc_getFormatTableInfo(); + formatTableInfo = info.asc_getFormatTableInfo(), + sparkLineInfo = info.asc_getSparklineInfo(); if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape || selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) { SelectedObjects = this.api.asc_getGraphicObjectProps(); } - if (SelectedObjects.length<=0 && !formatTableInfo && !this.rightmenu.minimizedMode) { + if (SelectedObjects.length<=0 && !formatTableInfo && !sparkLineInfo && !this.rightmenu.minimizedMode) { this.rightmenu.clearSelection(); this._openRightMenu = true; } var need_disable = info.asc_getLocked(); - this.onFocusObject(SelectedObjects, formatTableInfo, need_disable); + this.onFocusObject(SelectedObjects, formatTableInfo, sparkLineInfo, need_disable); if (this._state.prevDisabled != need_disable) { this._state.prevDisabled = need_disable; @@ -132,7 +133,7 @@ define([ } }, - onFocusObject: function(SelectedObjects, formatTableInfo, isCellLocked) { + onFocusObject: function(SelectedObjects, formatTableInfo, sparkLineInfo, isCellLocked) { if (!this.editMode) return; @@ -176,7 +177,14 @@ define([ this._settings[settingsType].locked = isCellLocked; this._settings[settingsType].hidden = 0; } - + + if (sparkLineInfo) { + settingsType = Common.Utils.documentSettingsType.Chart; + this._settings[settingsType].props = sparkLineInfo; + this._settings[settingsType].locked = isCellLocked; + this._settings[settingsType].hidden = 0; + } + var lastactive = -1, currentactive, priorityactive = -1; for (i=0; i +
@@ -18,7 +18,7 @@
- +
+
@@ -37,13 +37,92 @@
+ - + + + + + +
+ + +
+
+ 		+
+
+ + + + + + + + + - + + + + + + + +
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index 4f801f88e..b698ee422 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -316,4 +316,113 @@
+
+
+ +
+
+ + + + + +
+ +
+ 		+ +
+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ 		+ +
+ +
+
+ 		+ +
+ +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + +
+ +
+ + +
+ 		+
+
+ + +
+ 		+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js index 6963a5723..408c5f30c 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -80,12 +80,15 @@ define([ this.spinners = []; this.lockedControls = []; this._locked = false; - + this.defColor = {color: '4f81bd', effectId: 24}; + this.isChart = true; + this._noApply = false; this._originalProps = null; this.render(); + // charts this.btnChartType = new Common.UI.Button({ cls : 'btn-large-dataview', iconCls : 'item-chartlist bar-normal', @@ -221,7 +224,123 @@ define([ } }, this)); + // sparks + this.btnSparkType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-chartlist spark-column', + menu : new Common.UI.Menu({ + style: 'width: 210px;', + items: [ + { template: _.template('') } + ] + }) + }); + this.btnSparkType.on('render:after', function(btn) { + me.mnuSparkTypePicker = new Common.UI.DataView({ + el: $('#id-spark-menu-type'), + parentMenu: btn.menu, + showLast: false, + restoreHeight: 200, + allowScrollbar: false, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-sparkcolumn', caption: me.textColumnSpark }, + { id: 'menu-chart-group-sparkline', caption: me.textLineSpark }, + { id: 'menu-chart-group-sparkwin', caption: me.textWinLossSpark } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-sparkcolumn', type: Asc.ESparklineType.Column, allowSelected: true, iconCls: 'spark-column'}, + { group: 'menu-chart-group-sparkline', type: Asc.ESparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.ESparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'} + ]), + itemTemplate: _.template('
') + }); + }); + this.btnSparkType.render($('#spark-button-type')); + this.mnuSparkTypePicker.on('item:click', _.bind(this.onSelectSparkType, this, this.btnSparkType)); + this.lockedControls.push(this.btnSparkType); + + this.btnSparkStyle = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnSparkStyle.on('render:after', function(btn) { + me.mnuSparkStylePicker = new Common.UI.DataView({ + el: $('#id-spark-menu-style'), + style: 'max-height: 411px;', + parentMenu: btn.menu, + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
') + }); + + if (me.btnSparkStyle.menu) { + me.btnSparkStyle.menu.on('show:after', function () { + me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true}); + }); + } + }); + this.btnSparkStyle.render($('#spark-button-style')); + this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle)); + this.lockedControls.push(this.btnSparkStyle); + + this.cmbBorderSize = new Common.UI.ComboBorderSize({ + el : $('#spark-combo-line-type'), + style : 'width: 90px;', + hasNoBorders: false + }).on('selected', _.bind(this.onBorderSizeSelect, this)); + this.BorderSize = this.cmbBorderSize.store.at(1).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.lockedControls.push(this.cmbBorderSize); + + this.chHighPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-high'), + labelText: this.textHighPoint + }); + this.lockedControls.push(this.chHighPoint); + this.chLowPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-low'), + labelText: this.textLowPoint + }); + this.lockedControls.push(this.chLowPoint); + this.chNegativePoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-negative'), + labelText: this.textNegativePoint + }); + this.lockedControls.push(this.chNegativePoint); + this.chFirstPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-first'), + labelText: this.textFirstPoint + }); + this.lockedControls.push(this.chFirstPoint); + this.chLastPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-last'), + labelText: this.textLastPoint + }); + this.lockedControls.push(this.chLastPoint); + this.chMarkersPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-markers'), + labelText: this.textMarkers + }); + this.lockedControls.push(this.chMarkersPoint); + + this.chHighPoint.on('change', _.bind(this.onCheckPointChange, this, 0)); + this.chLowPoint.on('change', _.bind(this.onCheckPointChange, this, 1)); + this.chNegativePoint.on('change', _.bind(this.onCheckPointChange, this, 2)); + this.chFirstPoint.on('change', _.bind(this.onCheckPointChange, this, 3)); + this.chLastPoint.on('change', _.bind(this.onCheckPointChange, this, 4)); + this.chMarkersPoint.on('change', _.bind(this.onCheckPointChange, this, 5)); + $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); + + this.ChartSizeContainer = $('#chart-panel-size'); + this.ChartTypesContainer = $('#chart-panel-types'); + this.SparkTypesContainer = $('#spark-panel-types'); + this.SparkPointsContainer = $('#spark-panel-points'); }, render: function () { @@ -247,79 +366,85 @@ define([ this._initSettings = false; } + this.ShowHideElem(!!(props && props.asc_getChartProperties && props.asc_getChartProperties())); this.disableControls(this._locked); - if (this.api && props && props.asc_getChartProperties()){ - this._originalProps = new Asc.asc_CImgProperty(props); + if (this.api && props){ + if (props.asc_getChartProperties && props.asc_getChartProperties()) { // chart + this._originalProps = new Asc.asc_CImgProperty(props); + this.isChart = true; - this._noApply = true; - this.chartProps = props.asc_getChartProperties(); + this._noApply = true; + this.chartProps = props.asc_getChartProperties(); - var value = props.asc_getSeveralCharts() || this._locked; - if (this._state.SeveralCharts!==value) { - this.linkAdvanced.toggleClass('disabled', value); - this._state.SeveralCharts=value; - } - - value = props.asc_getSeveralChartTypes(); - if (this._state.SeveralCharts && value) { - this.btnChartType.setIconCls(''); - 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('item-chartlist ' + record.get('iconCls')); - } - this.updateChartStyles(this.api.asc_getChartPreviews(type)); - this._state.ChartType = type; + var value = props.asc_getSeveralCharts() || this._locked; + if (this._state.SeveralCharts!==value) { + this.linkAdvanced.toggleClass('disabled', value); + this._state.SeveralCharts=value; } - } - value = props.asc_getSeveralChartStyles(); - if (this._state.SeveralCharts && value) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'none'); - this.mnuChartStylePicker.selectRecord(null, true); - this._state.ChartStyle = null; - } else { - value = this.chartProps.getStyle(); - if (this._state.ChartStyle!==value) { - var record = this.mnuChartStylePicker.store.findWhere({data: value}); - this.mnuChartStylePicker.selectRecord(record, true); - if (record) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); + value = props.asc_getSeveralChartTypes(); + if (this._state.SeveralCharts && value) { + this.btnChartType.setIconCls(''); + 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('item-chartlist ' + record.get('iconCls')); + } + this.updateChartStyles(this.api.asc_getChartPreviews(type)); + this._state.ChartType = type; } - this._state.ChartStyle=value; } - } - this._noApply = false; + value = props.asc_getSeveralChartStyles(); + if (this._state.SeveralCharts && value) { + var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); + btnIconEl.css('background-image', 'none'); + this.mnuChartStylePicker.selectRecord(null, true); + this._state.ChartStyle = null; + } else { + value = this.chartProps.getStyle(); + if (this._state.ChartStyle!==value) { + var record = this.mnuChartStylePicker.store.findWhere({data: value}); + this.mnuChartStylePicker.selectRecord(record, true); + if (record) { + var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); + btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); + } + this._state.ChartStyle=value; + } + } - value = props.asc_getWidth(); - if ( Math.abs(this._state.Width-value)>0.001 || - (this._state.Width===null || value===null)&&(this._state.Width!==value)) { - this.spnWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); - this._state.Width = value; - } + this._noApply = false; - value = props.asc_getHeight(); - if ( Math.abs(this._state.Height-value)>0.001 || - (this._state.Height===null || value===null)&&(this._state.Height!==value)) { - this.spnHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); - this._state.Height = value; - } + value = props.asc_getWidth(); + if ( Math.abs(this._state.Width-value)>0.001 || + (this._state.Width===null || value===null)&&(this._state.Width!==value)) { + this.spnWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); + this._state.Width = value; + } - if (props.asc_getHeight()>0) - this._nRatio = props.asc_getWidth()/props.asc_getHeight(); + value = props.asc_getHeight(); + if ( Math.abs(this._state.Height-value)>0.001 || + (this._state.Height===null || value===null)&&(this._state.Height!==value)) { + this.spnHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); + this._state.Height = value; + } - value = props.asc_getLockAspect(); - if (this._state.keepRatio!==value) { - this.btnRatio.toggle(value); - this._state.keepRatio=value; + if (props.asc_getHeight()>0) + this._nRatio = props.asc_getWidth()/props.asc_getHeight(); + + value = props.asc_getLockAspect(); + if (this._state.keepRatio!==value) { + this.btnRatio.toggle(value); + this._state.keepRatio=value; + } + } else { //sparkline + this.isChart = false; } } }, @@ -334,8 +459,147 @@ define([ } }, + UpdateThemeColors: function() { + var defValue; + if (!this.btnSparkColor) { + defValue = this.defColor; + + this.btnSparkColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnSparkColor.render( $('#spark-color-btn')); + this.btnSparkColor.setColor('000000'); + this.lockedControls.push(this.btnSparkColor); + this.colorsSpark = new Common.UI.ThemeColorPalette({ + el: $('#spark-color-menu'), + value: '000000' + }); + this.colorsSpark.on('select', _.bind(this.onColorsSparkSelect, this)); + $(this.el).on('click', '#spark-color-new', _.bind(this.addNewColor, this, this.colorsSpark, this.btnSparkColor)); + + this.btnHighColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-high-color-btn')); + this.btnHighColor.setColor(this.defColor.color); + this.lockedControls.push(this.btnHighColor); + this.colorsHigh = new Common.UI.ThemeColorPalette({ el: $('#spark-high-color-menu') }); + this.colorsHigh.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnHighColor, this.chHighPoint)); + $(this.el).on('click', '#spark-high-color-new', _.bind(this.addNewColor, this, this.colorsHigh, this.btnHighColor)); + + this.btnLowColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-low-color-btn')); + this.btnLowColor.setColor(this.defColor.color); + this.lockedControls.push(this.btnLowColor); + this.colorsLow = new Common.UI.ThemeColorPalette({ el: $('#spark-low-color-menu') }); + this.colorsLow.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnLowColor, this.chLowPoint)); + $(this.el).on('click', '#spark-low-color-new', _.bind(this.addNewColor, this, this.colorsLow, this.btnLowColor)); + + this.btnNegativeColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-negative-color-btn')); + this.btnNegativeColor.setColor(this.defColor.color); + this.lockedControls.push(this.btnNegativeColor); + this.colorsNegative = new Common.UI.ThemeColorPalette({ el: $('#spark-negative-color-menu') }); + this.colorsNegative.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnNegativeColor, this.chNegativePoint)); + $(this.el).on('click', '#spark-negative-color-new', _.bind(this.addNewColor, this, this.colorsNegative, this.btnNegativeColor)); + + this.btnFirstColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-first-color-btn')); + this.lockedControls.push(this.btnFirstColor); + this.colorsFirst = new Common.UI.ThemeColorPalette({ el: $('#spark-first-color-menu') }); + this.colorsFirst.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnFirstColor, this.chFirstPoint)); + $(this.el).on('click', '#spark-first-color-new', _.bind(this.addNewColor, this, this.colorsFirst, this.btnFirstColor)); + this.btnFirstColor.setColor(this.defColor.color); + + this.btnLastColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-last-color-btn')); + this.btnLastColor.setColor(this.defColor.color); + this.lockedControls.push(this.btnLastColor); + this.colorsLast = new Common.UI.ThemeColorPalette({ el: $('#spark-last-color-menu') }); + this.colorsLast.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnLastColor, this.chLastPoint)); + $(this.el).on('click', '#spark-last-color-new', _.bind(this.addNewColor, this, this.colorsLast, this.btnLastColor)); + + this.btnMarkersColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }).render( $('#spark-markers-color-btn')); + this.btnMarkersColor.setColor(this.defColor.color); + this.lockedControls.push(this.btnMarkersColor); + this.colorsMarkers = new Common.UI.ThemeColorPalette({ el: $('#spark-markers-color-menu') }); + this.colorsMarkers.on('select', _.bind(this.onColorsPointSelect, this, 0, this.btnMarkersColor, this.chMarkersPoint)); + $(this.el).on('click', '#spark-markers-color-new', _.bind(this.addNewColor, this, this.colorsMarkers, this.btnMarkersColor)); + + } + this.colorsSpark.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.colorsHigh.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.colorsLow.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.colorsNegative.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.colorsFirst.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.colorsLast.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.colorsMarkers.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue); + this.btnSparkColor.setColor(this.colorsSpark.getColor()); + this.btnHighColor.setColor(this.colorsHigh.getColor()); + this.btnLowColor.setColor(this.colorsLow.getColor()); + this.btnNegativeColor.setColor(this.colorsNegative.getColor()); + this.btnFirstColor.setColor(this.colorsFirst.getColor()); + this.btnLastColor.setColor(this.colorsLast.getColor()); + this.btnMarkersColor.setColor(this.colorsMarkers.getColor()); + }, + createDelayedElements: function() { this.updateMetricUnit(); + this.UpdateThemeColors(); + }, + + ShowHideElem: function(isChart) { + this.ChartSizeContainer.toggleClass('settings-hidden', !isChart); + this.ChartTypesContainer.toggleClass('settings-hidden', !isChart); + this.SparkTypesContainer.toggleClass('settings-hidden', isChart); + this.SparkPointsContainer.toggleClass('settings-hidden', isChart); }, onWidthChange: function(field, newValue, oldValue, eOpts){ @@ -393,6 +657,7 @@ define([ (new SSE.Views.ChartSettingsDlg( { chartSettings: props, + isChart: me.isChart, api: me.api, handler: function(result, value) { if (result == 'ok') { @@ -503,6 +768,60 @@ define([ } }, + onSelectSparkType: function(btn, picker, itemView, record) { + if (this._noApply) return; + }, + + onSelectSparkStyle: function(btn, picker, itemView, record) { + if (this._noApply) return; + }, + + onBorderSizeSelect: function(combo, record) { + + }, + + onColorsSparkSelect: function(picker, color) { + this.btnSparkColor.setColor(color); + this.fireEvent('editcomplete', this); + }, + + addNewColor: function(picker, btn) { + picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color); + }, + + onCheckPointChange: function(type, field, newValue, oldValue, eOpts) { + if (this.api) { + switch (type) { + case 0: +// look.put_FirstRow(field.getValue()=='checked'); + break; + case 1: +// look.put_LastRow(field.getValue()=='checked'); + break; + case 2: +// look.put_BandHor(field.getValue()=='checked'); + break; + case 3: +// look.put_FirstCol(field.getValue()=='checked'); + break; + case 4: +// look.put_LastCol(field.getValue()=='checked'); + break; + case 5: +// look.put_BandVer(field.getValue()=='checked'); + break; + } + } + this.fireEvent('editcomplete', this); + }, + + onColorsPointSelect: function(type, btn, check, picker, color) { + btn.setColor(color); + if (check.getValue() !== 'checked') + check.setValue(true, true); + this.fireEvent('editcomplete', this); + }, + setLocked: function (locked) { this._locked = locked; }, @@ -521,7 +840,7 @@ define([ textSize: 'Size', textWidth: 'Width', textHeight: 'Height', - textEditData: 'Edit Data', + textEditData: 'Edit Data and Location', textChartType: 'Change Chart Type', textLine: 'Line Chart', textColumn: 'Column Chart', @@ -531,7 +850,20 @@ define([ textPoint: 'XY (Scatter) Chart', textStock: 'Stock Chart', textStyle: 'Style', - textAdvanced: 'Show advanced settings' + textAdvanced: 'Show advanced settings', + strSparkType: 'Sparkline Type', + strSparkColor: 'Sparkline Color', + strLineWeight: 'Line Weight', + textMarkers: 'Markers', + textNewColor: 'Add New Custom Color', + textLineSpark: 'Line', + textColumnSpark: 'Column', + textWinLossSpark: 'Win/Loss', + textHighPoint: 'High Point', + textLowPoint: 'Low Point', + textNegativePoint: 'Negative Point', + textFirstPoint: 'First Point', + textLastPoint: 'Last Point' }, SSE.Views.ChartSettings || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js index 5200a82ae..6b5dbff8b 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js @@ -61,7 +61,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, - {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis} + {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis}, + {panelId: 'id-spark-settings-dlg-style', panelCaption: this.textTypeData}, + {panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions} ], contentTemplate: _.template(contentTemplate)({ scope: this @@ -86,11 +88,13 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.api = this.options.api; this.chartSettings = this.options.chartSettings; + this.isChart = this.options.isChart; this.vertAxisProps = null; this.horAxisProps = null; this.currentAxisProps = null; this.dataRangeValid = ''; this.currentChartType = this._state.ChartType; + this.storageName = (this.isChart) ? 'sse-chart-settings-adv-category' : 'sse-spark-settings-adv-category'; }, render: function() { @@ -799,6 +803,212 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.btnsCategory[2].on('click', _.bind(this.onVCategoryClick, this)); this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, this)); + + // Sparklines + this.btnSparkType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-chartlist spark-column', + menu : new Common.UI.Menu({ + style: 'width: 210px;', + additionalAlign: menuAddAlign, + items: [ + { template: _.template('') } + ] + }) + }); + this.btnSparkType.on('render:after', function(btn) { + me.mnuSparkTypePicker = new Common.UI.DataView({ + el: $('#id-spark-dlg-menu-type'), + parentMenu: btn.menu, + restoreHeight: 200, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-sparkcolumn', caption: me.textColumnSpark }, + { id: 'menu-chart-group-sparkline', caption: me.textLineSpark }, + { id: 'menu-chart-group-sparkwin', caption: me.textWinLossSpark } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-sparkcolumn', type: Asc.ESparklineType.Column, allowSelected: true, iconCls: 'spark-column', selected: true}, + { group: 'menu-chart-group-sparkline', type: Asc.ESparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.ESparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'} + ]), + itemTemplate: _.template('
') + }); + }); + this.btnSparkType.render($('#spark-dlg-button-type')); + this.mnuSparkTypePicker.on('item:click', _.bind(this.onSelectSparkType, this, this.btnSparkType)); + + this.btnSparkStyle = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap', + menu : new Common.UI.Menu({ + additionalAlign: menuAddAlign, + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnSparkStyle.on('render:after', function(btn) { + me.mnuSparkStylePicker = new Common.UI.DataView({ + el: $('#id-spark-dlg-menu-style'), + parentMenu: btn.menu, + style: 'max-height: 411px;', + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
') + }); + + if (me.btnSparkStyle.menu) { + me.btnSparkStyle.menu.on('show:after', function () { + me.mnuSparkStylePicker.scroller.update({alwaysVisibleY: true}); + }); + } + }); + this.btnSparkStyle.render($('#spark-dlg-button-style')); +// this.mnuSparkStylePicker.on('item:click', _.bind(this.onSelectSparkStyle, this, this.btnSparkStyle)); + + this.radioGroup = new Common.UI.RadioBox({ + el: $('#spark-dlg-radio-group'), + labelText: this.textGroup, + name: 'asc-radio-sparkline', + checked: true + }); + + this.radioSingle = new Common.UI.RadioBox({ + el: $('#spark-dlg-radio-single'), + labelText: this.textSingle, + name: 'asc-radio-sparkline' + }); + + this.txtSparkDataRange = new Common.UI.InputField({ + el : $('#spark-dlg-txt-range'), + name : 'range', + style : 'width: 100%;', + allowBlank : true, + blankError : this.txtEmpty, + validateOnChange: true + }); + + this.btnSelectSparkData = new Common.UI.Button({ + el: $('#spark-dlg-btn-data') + }); +// this.btnSelectSparkData.on('click', _.bind(this.onSelectData, this)); + + this.txtSparkDataLocation = new Common.UI.InputField({ + el : $('#spark-dlg-txt-location'), + name : 'range', + style : 'width: 100%;', + allowBlank : true, + blankError : this.txtEmpty, + validateOnChange: true + }); + + this.btnSelectLocationData = new Common.UI.Button({ + el: $('#spark-dlg-btn-data') + }); +// this.btnSelectLocationData.on('click', _.bind(this.onSelectData, this)); + + this.cmbEmptyCells = new Common.UI.ComboBox({ + el : $('#spark-dlg-combo-empty'), + menuStyle : 'min-width: 188px;', + editable : false, + cls : 'input-group-nr', + data : [ + { value: 0, displayValue: this.textGaps }, + { value: 1, displayValue: this.textZero }, + { value: 2, displayValue: this.textEmptyLine } + ] + }); + + this.chShowEmpty = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-show-data'), + labelText: this.textShowData + }); + + // Sparkline axis + + this.chShowAxis = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-show'), + labelText: this.textShowSparkAxis + }); + + this.chReverse = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-reverse'), + labelText: this.textReverseOrder + }); + + this.cmbSparkMinType = new Common.UI.ComboBox({ + el : $('#spark-dlg-combo-mintype'), + cls : 'input-group-nr', + menuStyle : 'min-width: 100px;', + editable : false, + data : [ + {displayValue: this.textAutoEach, value: Asc.c_oAscValAxisRule.auto}, + {displayValue: this.textSameAll, value: Asc.c_oAscValAxisRule.auto}, + {displayValue: this.textFixed, value: Asc.c_oAscValAxisRule.fixed} + ] + }).on('selected', _.bind(function(combo, record) { +// if (this.currentAxisProps) { +// this.currentAxisProps.putMinValRule(record.value); +// if (record.value==Asc.c_oAscValAxisRule.auto) { +// this.spnSparkMinValue.setValue(this._originalAxisVValues.minAuto, true); +// } +// } + }, this)); + + this.spnSparkMinValue = new Common.UI.MetricSpinner({ + el : $('#spark-dlg-input-min-value'), + maxValue : 1000000, + minValue : -1000000, + step : 0.1, + defaultUnit : "", + defaultValue : 0, + value : '' + }).on('change', _.bind(function(field, newValue, oldValue) { +// this.cmbSparkMinType.suspendEvents(); +// this.cmbSparkMinType.setValue(Asc.c_oAscValAxisRule.fixed); +// this.cmbSparkMinType.resumeEvents(); +// if (this.currentAxisProps) { +// this.currentAxisProps.putMinValRule(Asc.c_oAscValAxisRule.fixed); +// this.currentAxisProps.putMinVal(field.getNumberValue()); +// } + }, this)); + + this.cmbSparkMaxType = new Common.UI.ComboBox({ + el : $('#spark-dlg-combo-maxtype'), + cls : 'input-group-nr', + menuStyle : 'min-width: 100px;', + editable : false, + data : [ + {displayValue: this.textAutoEach, value: Asc.c_oAscValAxisRule.auto}, + {displayValue: this.textSameAll, value: Asc.c_oAscValAxisRule.auto}, + {displayValue: this.textFixed, value: Asc.c_oAscValAxisRule.fixed} + ] + }).on('selected', _.bind(function(combo, record) { +// if (this.currentAxisProps) { +// this.currentAxisProps.putMaxValRule(record.value); +// if (record.value==Asc.c_oAscValAxisRule.auto) { +// this.spnMaxValue.setValue(this._originalAxisVValues.maxAuto, true); +// } +// } + }, this)); + + this.spnSparkMaxValue = new Common.UI.MetricSpinner({ + el : $('#spark-dlg-input-max-value'), + maxValue : 1000000, + minValue : -1000000, + step : 0.1, + defaultUnit : "", + defaultValue : 0, + value : '' + }).on('change', _.bind(function(field, newValue, oldValue) { +// this.cmbSparkMaxType.suspendEvents(); +// this.cmbSparkMaxType.setValue(Asc.c_oAscValAxisRule.fixed); +// this.cmbSparkMaxType.resumeEvents(); +// if (this.currentAxisProps) { +// this.currentAxisProps.putMaxValRule(Asc.c_oAscValAxisRule.fixed); +// this.currentAxisProps.putMaxVal(field.getNumberValue()); +// } + }, this)); + this.afterRender(); }, @@ -808,6 +1018,19 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); this._setDefaults(this.chartSettings); + + this.setTitle((this.isChart) ? this.textTitle : this.textTitleSparkline); + + if (this.isChart) { + this.btnsCategory[4].setVisible(false); + this.btnsCategory[5].setVisible(false); + } else { + this.btnsCategory[0].setVisible(false); + this.btnsCategory[1].setVisible(false); + this.btnsCategory[2].setVisible(false); + this.btnsCategory[3].setVisible(false); + } + if (this.storageName) { var value = Common.localStorage.getItem(this.storageName); this.setActiveCategory((value!==null) ? parseInt(value) : 0); @@ -1074,73 +1297,99 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' } }, + onSelectSparkType: function(btn, picker, itemView, record) { + if (this._noApply) return; + + var rawData = {}, + isPickerSelect = _.isFunction(record.toJSON); + + if (isPickerSelect){ + if (record.get('selected')) { + rawData = record.toJSON(); + } else { + // record deselected + return; + } + } else { + rawData = record; + } + + this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls); +// this.updateSparkStyles(this.api.asc_getSparkPreviews(rawData.type)); +// this.chartSettings.changeType(rawData.type); +// this.updateAxisProps(rawData.type, true); + }, + _setDefaults: function(props) { var me = this; if (props ){ this.chartSettings = props; + if (this.isChart) { + this._state.ChartType = props.getType(); - this._state.ChartType = props.getType(); + this._noApply = true; - this._noApply = true; + // Layout - // Layout + var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType}); + this.mnuChartTypePicker.selectRecord(record, true); + if (record) { + this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); + } + this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); - var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType}); - this.mnuChartTypePicker.selectRecord(record, true); - if (record) { - this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); - } - this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); + this._noApply = false; - this._noApply = false; - - this._state.ChartStyle = props.getStyle(); - record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle}); - this.mnuChartStylePicker.selectRecord(record, true); - if (record) { - var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); - btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); - } - - var value = props.getRange(); - this.txtDataRange.setValue((value) ? value : ''); - this.dataRangeValid = value; - - this.txtDataRange.validation = function(value) { - if (_.isEmpty(value)) { - if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true); - return true; + this._state.ChartStyle = props.getStyle(); + record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle}); + this.mnuChartStylePicker.selectRecord(record, true); + if (record) { + var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); + btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); } - if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); + var value = props.getRange(); + this.txtDataRange.setValue((value) ? value : ''); + this.dataRangeValid = value; - var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); - return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; - }; + this.txtDataRange.validation = function(value) { + if (_.isEmpty(value)) { + if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true); + return true; + } - this.cmbDataDirect.setDisabled(value===null); - this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); + if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); - this.cmbChartTitle.setValue(props.getTitle()); - this.cmbLegendPos.setValue(props.getLegendPos()); + var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); + return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; + }; - this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos()); + this.cmbDataDirect.setDisabled(value===null); + this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); - this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true); - this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); - this.chValue.setValue(this.chartSettings.getShowVal(), true); + this.cmbChartTitle.setValue(props.getTitle()); + this.cmbLegendPos.setValue(props.getLegendPos()); - value = props.getSeparator(); - this.txtSeparator.setValue((value) ? value : ''); + this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos()); - // Vertical Axis - this.vertAxisProps = props.getVertAxisProps(); + this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true); + this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); + this.chValue.setValue(this.chartSettings.getShowVal(), true); - // Horizontal Axis - this.horAxisProps = props.getHorAxisProps(); + value = props.getSeparator(); + this.txtSeparator.setValue((value) ? value : ''); - this.updateAxisProps(this._state.ChartType); - this.currentChartType = this._state.ChartType; + // Vertical Axis + this.vertAxisProps = props.getVertAxisProps(); + + // Horizontal Axis + this.horAxisProps = props.getHorAxisProps(); + + this.updateAxisProps(this._state.ChartType); + this.currentChartType = this._state.ChartType; + } else { // sparkline + + } } }, @@ -1376,6 +1625,24 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' textRight: 'Right', textTop: 'Top', textBottom: 'Bottom', - textFit: 'Fit Width' + textFit: 'Fit Width', + textSparkRanges: 'Sparkline Ranges', + textLocationRange: 'Location Range', + textEmptyCells: 'Hidden and Empty cells', + textShowEmptyCells: 'Show empty cells as', + textShowData: 'Show data in hidden rows and columns', + textGroup: 'Group Sparkline', + textSingle: 'Single Sparkline', + textGaps: 'Gaps', + textZero: 'Zero', + textEmptyLine: 'Connect data points with line', + textLineSpark: 'Line', + textColumnSpark: 'Column', + textWinLossSpark: 'Win/Loss', + textShowSparkAxis: 'Show Axis', + textReverseOrder: 'Reverse order', + textAutoEach: 'Auto for Each', + textSameAll: 'Same for All', + textTitleSparkline: 'Sparkline - Advanced Settings' }, SSE.Views.ChartSettingsDlg || {})); }); diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js index 30307b81a..f25c01b9f 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -652,7 +652,96 @@ define([ cls : 'btn-toolbar', iconCls : 'btn-insertchart', lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth], - hint : me.tipInsertChart + hint : me.tipInsertChart, + menu : new Common.UI.Menu({ + items : [ + this.mnuInsertChart = new Common.UI.MenuItem({ + caption: this.textInsCharts, + value: 'chart', + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + style: 'width: 560px;', + items: [ + { template: _.template('') } + ] + }) + }), + this.mnuInsertSparkline = new Common.UI.MenuItem({ + caption: this.textInsSparklines, + value: 'chart', + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + style: 'width: 210px;', + items: [ + { template: _.template('') } + ] + }) + }) + ] + }) + }); + this.btnInsertChart.on('render:after', function(btn) { + me.mnuInsertChartPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-insertchart'), + parentMenu: me.mnuInsertChart.menu, + showLast: false, + restoreHeight: 411, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-bar', caption: me.textColumn }, + { id: 'menu-chart-group-line', caption: me.textLine }, + { id: 'menu-chart-group-pie', caption: me.textPie }, + { id: 'menu-chart-group-hbar', caption: me.textBar }, + { id: 'menu-chart-group-area', caption: me.textArea }, + { id: 'menu-chart-group-scatter', caption: me.textPoint }, + { id: 'menu-chart-group-stock', caption: me.textStock } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, allowSelected: true, iconCls: 'column-normal', selected: true}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, allowSelected: true, iconCls: 'column-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, allowSelected: true, iconCls: 'column-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, allowSelected: true, iconCls: 'column-3d-normal'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, allowSelected: true, iconCls: 'column-3d-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, allowSelected: true, iconCls: 'column-3d-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, allowSelected: true, iconCls: 'column-3d-normal-per'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, allowSelected: true, iconCls: 'line-normal'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, allowSelected: true, iconCls: 'line-stack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, allowSelected: true, iconCls: 'line-pstack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, allowSelected: true, iconCls: 'line-3d'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, allowSelected: true, iconCls: 'pie-normal'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, allowSelected: true, iconCls: 'pie-doughnut'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, allowSelected: true, iconCls: 'pie-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, allowSelected: true, iconCls: 'bar-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, allowSelected: true, iconCls: 'bar-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, allowSelected: true, iconCls: 'bar-pstack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, allowSelected: true, iconCls: 'bar-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, allowSelected: true, iconCls: 'bar-3d-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, allowSelected: true, iconCls: 'bar-3d-pstack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, allowSelected: true, iconCls: 'area-normal'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, allowSelected: true, iconCls: 'area-stack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, allowSelected: true, iconCls: 'area-pstack'}, + { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, allowSelected: true, iconCls: 'point-normal'}, + { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, allowSelected: true, iconCls: 'stock-normal'} + ]), + itemTemplate: _.template('
') + }); + me.mnuInsertSparkPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-insertspark'), + parentMenu: me.mnuInsertSparkline.menu, + showLast: false, + restoreHeight: 200, + allowScrollbar: false, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-sparkcolumn', caption: me.textColumnSpark }, + { id: 'menu-chart-group-sparkline', caption: me.textLineSpark }, + { id: 'menu-chart-group-sparkwin', caption: me.textWinLossSpark } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-sparkcolumn', type: Asc.ESparklineType.Column, allowSelected: true, iconCls: 'spark-column'}, + { group: 'menu-chart-group-sparkline', type: Asc.ESparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.ESparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'} + ]), + itemTemplate: _.template('
') + }) }); me.btnEditChart = new Common.UI.Button({ @@ -1965,6 +2054,18 @@ define([ txtManageRange: 'Name manager', txtPasteRange: 'Paste name', textInsText: 'Insert text box', - textInsTextArt: 'Insert Text Art' + textInsTextArt: 'Insert Text Art', + textInsCharts: 'Charts', + textLine: 'Line Chart', + textColumn: 'Column Chart', + textBar: 'Bar Chart', + textArea: 'Area Chart', + textPie: 'Pie Chart', + textPoint: 'Point Chart', + textStock: 'Stock Chart', + textInsSparklines: 'Sparklines', + textLineSpark: 'Line', + textColumnSpark: 'Column', + textWinLossSpark: 'Win/Loss' }, SSE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json index 6726eaea2..f1e6744c2 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -300,7 +300,7 @@ "SSE.Views.ChartSettings.textBar": "Bar Chart", "SSE.Views.ChartSettings.textChartType": "Change Chart Type", "SSE.Views.ChartSettings.textColumn": "Column Chart", - "SSE.Views.ChartSettings.textEditData": "Edit Data", + "SSE.Views.ChartSettings.textEditData": "Edit Data and Location", "SSE.Views.ChartSettings.textHeight": "Height", "SSE.Views.ChartSettings.textKeepRatio": "Constant Proportions", "SSE.Views.ChartSettings.textLine": "Line Chart", diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 54f59db5d..5c0dd696c 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -295,6 +295,18 @@ button:active .btn-change-shape {background-position: -56px -16px;} background-position: -200px 0; } +.spark-column{ + background-position: -200px 0; +} + +.spark-line{ + background-position: -200px 0; +} + +.spark-win{ + background-position: -200px 0; +} + #table-combo-template .combo-dataview{ .combo-template(60px); } \ No newline at end of file