diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js index 4478f8f11..422679d0a 100644 --- a/apps/common/main/lib/component/ComboBorderSize.js +++ b/apps/common/main/lib/component/ComboBorderSize.js @@ -94,13 +94,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 +103,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 !== false) + 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)); }, @@ -189,13 +191,8 @@ define([ initialize : function(options) { this.txtNoBorders = options.txtNoBorders || this.txtNoBorders; - var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); - - Common.UI.ComboBox.prototype.initialize.call(this, _.extend({ - editable: true, - 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}, @@ -203,7 +200,15 @@ 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 !== false) + data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 }); + + Common.UI.ComboBox.prototype.initialize.call(this, _.extend({ + editable: true, + 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/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index 9058c3c4f..4af0e99ba 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -251,6 +251,10 @@ .combo-textart(); } +.combo-spark-style { + .combo-textart(58px, 2px); +} + .combo-chart-style { .combo-textart(58px, 2px); diff --git a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js index 1db9fae8f..f44238bf1 100644 --- a/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js +++ b/apps/spreadsheeteditor/main/app/controller/DocumentHolder.js @@ -674,6 +674,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 eef25f2b4..f36375fe8 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, activePane = this.rightmenu.GetActivePane(); for (i=0; i +
@@ -18,7 +18,7 @@
- +
+
@@ -47,6 +47,84 @@
+ + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template index 4dbbe03c6..1ee48e164 100644 --- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template +++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template @@ -312,4 +312,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 1ff0d0eb9..a320fa70b 100644 --- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js @@ -66,6 +66,7 @@ define([ initialize: function () { this._initSettings = true; + this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); this._state = { Width: 0, @@ -74,17 +75,42 @@ define([ ChartType: -1, SeveralCharts: false, DisabledControls: false, - keepRatio: false + keepRatio: false, + SparkType: -1, + SparkStyle: 1, + LineWeight: 1, + MarkersPoint: false, + HighPoint: false, + LowPoint: false, + FirstPoint: false, + LastPoint: false, + NegativePoint: false, + SparkColor: '000000', + MarkersColor: this.defColor, + HighColor: this.defColor, + LowColor: this.defColor, + FirstColor: this.defColor, + LastColor: this.defColor, + NegativeColor: this.defColor, + SparkId: undefined }; this._nRatio = 1; this.spinners = []; + this.chPoints = []; this.lockedControls = []; this._locked = false; - + this.defColor = {color: '4f81bd', effectId: 24}; + this.isChart = true; + this._noApply = false; this._originalProps = null; this.render(); + + this.ChartSizeContainer = $('#chart-panel-size'); + this.ChartTypesContainer = $('#chart-panel-types'); + this.SparkTypesContainer = $('#spark-panel-types'); + this.SparkPointsContainer = $('#spark-panel-points'); }, render: function () { @@ -106,84 +132,375 @@ define([ if (this._initSettings) this.createDelayedElements(); + 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; - } + 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); + 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; + } + } + + value = props.asc_getSeveralChartStyles(); + if (this._state.SeveralCharts && value) { + this.cmbChartStyle.fieldPicker.deselectAll(); + this.cmbChartStyle.menuPicker.deselectAll(); + this._state.ChartStyle = null; + } else { + value = this.chartProps.getStyle(); + if (this._state.ChartStyle!==value || this._isChartStylesChanged) { + this.cmbChartStyle.suspendEvents(); + var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value}); + this.cmbChartStyle.menuPicker.selectRecord(rec); + this.cmbChartStyle.resumeEvents(); + + if (this._isChartStylesChanged) { + if (rec) + this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true); + else + this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true); + } + this._state.ChartStyle=value; + } + } + this._isChartStylesChanged = false; + + this._noApply = false; + + 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; + } + + 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; + } + + 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._originalProps = props; + this.isChart = false; + this._state.SparkId = props.asc_getId(); + + var type = props.asc_getType(), + styleChanged = false; + if (this._state.SparkType !== type) { + var record = this.mnuSparkTypePicker.store.findWhere({type: type}); + this.mnuSparkTypePicker.selectRecord(record, true); if (record) { - this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls')); + this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls')); } - this.updateChartStyles(this.api.asc_getChartPreviews(type)); - this._state.ChartType = type; + this._state.SparkType = type; + styleChanged = true; } - } - value = props.asc_getSeveralChartStyles(); - if (this._state.SeveralCharts && value) { - this.cmbChartStyle.fieldPicker.deselectAll(); - this.cmbChartStyle.menuPicker.deselectAll(); - this._state.ChartStyle = null; - } else { - value = this.chartProps.getStyle(); - if (this._state.ChartStyle!==value || this._isChartStylesChanged) { - this.cmbChartStyle.suspendEvents(); - var rec = this.cmbChartStyle.menuPicker.store.findWhere({data: value}); - this.cmbChartStyle.menuPicker.selectRecord(rec); - this.cmbChartStyle.resumeEvents(); + var w = props.asc_getLineWeight(), + check_value = (Math.abs(this._state.LineWeight-w)<0.001) && !((new RegExp(this.txtPt + '\\s*$')).test(this.cmbBorderSize.getRawValue())); + if ( Math.abs(this._state.LineWeight-w)>0.001 || check_value || + (this._state.LineWeight===null || w===null)&&(this._state.LineWeight!==w)) { + this._state.LineWeight = w; - if (this._isChartStylesChanged) { - if (rec) - this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.getSelectedRec(),true); - else - this.cmbChartStyle.fillComboView(this.cmbChartStyle.menuPicker.store.at(0), true); + var _selectedItem = (w===null) ? w : _.find(this.cmbBorderSize.store.models, function(item) { + if ( witem.attributes.value-0.01) { + return true; + } + }); + if (_selectedItem) + this.cmbBorderSize.selectRecord(_selectedItem); + else { + this.cmbBorderSize.setValue((w!==null) ? parseFloat(w.toFixed(2)) + ' ' + this.txtPt : ''); } - this._state.ChartStyle=value; + this.BorderSize = w; } - } - this._isChartStylesChanged = false; + this.cmbBorderSize.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line); - this._noApply = false; + var color = props.asc_getColorSeries(); + if (color) { + this.SparkColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); - 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; - } + var type1 = typeof(this.SparkColor), + type2 = typeof(this._state.SparkColor); + if ( (type1 !== type2) || (type1=='object' && (this.SparkColor.effectValue!==this._state.SparkColor.effectValue || this._state.SparkColor.color.indexOf(this.SparkColor.color)<0)) || + (type1!='object' && (this._state.SparkColor.indexOf(this.SparkColor)<0 || typeof(this.btnSparkColor.color)=='object'))) { - 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; - } + this.btnSparkColor.setColor(this.SparkColor); + if ( typeof(this.SparkColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.SparkColor.effectValue ) { + this.colorsSpark.select(this.SparkColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsSpark.clearSelection(); + } else + this.colorsSpark.select(this.SparkColor,true); - if (props.asc_getHeight()>0) - this._nRatio = props.asc_getWidth()/props.asc_getHeight(); + this._state.SparkColor = this.SparkColor; + } + } - value = props.asc_getLockAspect(); - if (this._state.keepRatio!==value) { - this.btnRatio.toggle(value); - this._state.keepRatio=value; + var point = props.asc_getMarkersPoint(); + color = props.asc_getColorMarkers(); + if ( this._state.MarkersPoint!==point ) { + this.chMarkersPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.MarkersPoint=point; + styleChanged = true; + } + this.chMarkersPoint.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line); + this.btnMarkersColor.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line); + + if (color) { + this.MarkersColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.MarkersColor), + type2 = typeof(this._state.MarkersColor); + if ( (type1 !== type2) || (type1=='object' && (this.MarkersColor.effectValue!==this._state.MarkersColor.effectValue || this._state.MarkersColor.color.indexOf(this.MarkersColor.color)<0)) || + (type1!='object' && (this._state.MarkersColor.indexOf(this.MarkersColor)<0 || typeof(this.btnMarkersColor.color)=='object'))) { + + this.btnMarkersColor.setColor(this.MarkersColor); + if ( typeof(this.MarkersColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.MarkersColor.effectValue ) { + this.colorsMarkers.select(this.MarkersColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsMarkers.clearSelection(); + } else + this.colorsMarkers.select(this.MarkersColor,true); + + this._state.MarkersColor = this.MarkersColor; + styleChanged = true; + } + } + + point = props.asc_getHighPoint(); + color = props.asc_getColorHigh(); + if ( this._state.HighPoint!==point ) { + this.chHighPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.HighPoint=point; + styleChanged = true; + } + if (color) { + this.HighColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.HighColor), + type2 = typeof(this._state.HighColor); + if ( (type1 !== type2) || (type1=='object' && (this.HighColor.effectValue!==this._state.HighColor.effectValue || this._state.HighColor.color.indexOf(this.HighColor.color)<0)) || + (type1!='object' && (this._state.HighColor.indexOf(this.HighColor)<0 || typeof(this.btnHighColor.color)=='object'))) { + + this.btnHighColor.setColor(this.HighColor); + if ( typeof(this.HighColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.HighColor.effectValue ) { + this.colorsHigh.select(this.HighColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsHigh.clearSelection(); + } else + this.colorsHigh.select(this.HighColor,true); + + this._state.HighColor = this.HighColor; + styleChanged = true; + } + } + + point = props.asc_getLowPoint(); + color = props.asc_getColorLow(); + if ( this._state.LowPoint!==point ) { + this.chLowPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.LowPoint=point; + styleChanged = true; + } + if (color) { + this.LowColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.LowColor), + type2 = typeof(this._state.LowColor); + if ( (type1 !== type2) || (type1=='object' && (this.LowColor.effectValue!==this._state.LowColor.effectValue || this._state.LowColor.color.indexOf(this.LowColor.color)<0)) || + (type1!='object' && (this._state.LowColor.indexOf(this.LowColor)<0 || typeof(this.btnLowColor.color)=='object'))) { + + this.btnLowColor.setColor(this.LowColor); + if ( typeof(this.LowColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.LowColor.effectValue ) { + this.colorsLow.select(this.LowColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsLow.clearSelection(); + } else + this.colorsLow.select(this.LowColor,true); + + this._state.LowColor = this.LowColor; + styleChanged = true; + } + } + + point = props.asc_getFirstPoint(); + color = props.asc_getColorFirst(); + if ( this._state.FirstPoint!==point ) { + this.chFirstPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.FirstPoint=point; + styleChanged = true; + } + if (color) { + this.FirstColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.FirstColor), + type2 = typeof(this._state.FirstColor); + if ( (type1 !== type2) || (type1=='object' && (this.FirstColor.effectValue!==this._state.FirstColor.effectValue || this._state.FirstColor.color.indexOf(this.FirstColor.color)<0)) || + (type1!='object' && (this._state.FirstColor.indexOf(this.FirstColor)<0 || typeof(this.btnFirstColor.color)=='object'))) { + + this.btnFirstColor.setColor(this.FirstColor); + if ( typeof(this.FirstColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.FirstColor.effectValue ) { + this.colorsFirst.select(this.FirstColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsFirst.clearSelection(); + } else + this.colorsFirst.select(this.FirstColor,true); + + this._state.FirstColor = this.FirstColor; + styleChanged = true; + } + } + + point = props.asc_getLastPoint(); + color = props.asc_getColorLast(); + if ( this._state.LastPoint!==point ) { + this.chLastPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.LastPoint=point; + styleChanged = true; + } + if (color) { + this.LastColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.LastColor), + type2 = typeof(this._state.LastColor); + if ( (type1 !== type2) || (type1=='object' && (this.LastColor.effectValue!==this._state.LastColor.effectValue || this._state.LastColor.color.indexOf(this.LastColor.color)<0)) || + (type1!='object' && (this._state.LastColor.indexOf(this.LastColor)<0 || typeof(this.btnLastColor.color)=='object'))) { + + this.btnLastColor.setColor(this.LastColor); + if ( typeof(this.LastColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.LastColor.effectValue ) { + this.colorsLast.select(this.LastColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsLast.clearSelection(); + } else + this.colorsLast.select(this.LastColor,true); + + this._state.LastColor = this.LastColor; + styleChanged = true; + } + } + + point = props.asc_getNegativePoint(); + color = props.asc_getColorNegative(); + if ( this._state.NegativePoint!==point ) { + this.chNegativePoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true); + this._state.NegativePoint=point; + styleChanged = true; + } + if (color) { + this.NegativeColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ? + {color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } : + Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()); + + var type1 = typeof(this.NegativeColor), + type2 = typeof(this._state.NegativeColor); + if ( (type1 !== type2) || (type1=='object' && (this.NegativeColor.effectValue!==this._state.NegativeColor.effectValue || this._state.NegativeColor.color.indexOf(this.NegativeColor.color)<0)) || + (type1!='object' && (this._state.NegativeColor.indexOf(this.NegativeColor)<0 || typeof(this.btnNegativeColor.color)=='object'))) { + + this.btnNegativeColor.setColor(this.NegativeColor); + if ( typeof(this.NegativeColor) == 'object' ) { + var isselected = false; + for (var i=0; i<10; i++) { + if ( Common.Utils.ThemeColor.ThemeValues[i] == this.NegativeColor.effectValue ) { + this.colorsNegative.select(this.NegativeColor,true); + isselected = true; + break; + } + } + if (!isselected) this.colorsNegative.clearSelection(); + } else + this.colorsNegative.select(this.NegativeColor,true); + + this._state.NegativeColor = this.NegativeColor; + styleChanged = true; + } + } + + if (styleChanged) + this.updateSparkStyles(props.asc_getStyles()); } } }, @@ -198,9 +515,141 @@ 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.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, 1, this.btnLowColor)); + $(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, 2, this.btnNegativeColor)); + $(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, 3, this.btnFirstColor)); + $(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, 4, this.btnLastColor)); + $(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, 5, this.btnMarkersColor)); + $(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()); + }, + createDelayedControls: function() { var me = this; + // charts this.btnChartType = new Common.UI.Button({ cls : 'btn-large-dataview', iconCls : 'item-chartlist bar-normal', @@ -211,6 +660,7 @@ define([ ] }) }); + this.btnChartType.on('render:after', function(btn) { me.mnuChartTypePicker = new Common.UI.DataView({ el: $('#id-chart-menu-type'), @@ -307,6 +757,95 @@ 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, + 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.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'}, + { group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.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.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ + el : $('#spark-combo-line-type'), + style : 'width: 90px;', + allowNoBorders: false + }).on('selected', _.bind(this.onBorderSizeSelect, this)) + .on('changed:before', _.bind(this.onBorderSizeChanged, this, true)) + .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)); + 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.chPoints.push(this.chHighPoint); + this.chLowPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-low'), + labelText: this.textLowPoint + }); + this.lockedControls.push(this.chLowPoint); + this.chPoints.push(this.chLowPoint); + this.chNegativePoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-negative'), + labelText: this.textNegativePoint + }); + this.lockedControls.push(this.chNegativePoint); + this.chPoints.push(this.chNegativePoint); + this.chFirstPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-first'), + labelText: this.textFirstPoint + }); + this.lockedControls.push(this.chFirstPoint); + this.chPoints.push(this.chFirstPoint); + this.chLastPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-last'), + labelText: this.textLastPoint + }); + this.lockedControls.push(this.chLastPoint); + this.chPoints.push(this.chLastPoint); + this.chMarkersPoint = new Common.UI.CheckBox({ + el: $('#spark-checkbox-markers'), + labelText: this.textMarkers + }); + this.lockedControls.push(this.chMarkersPoint); + this.chPoints.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.btnSelectData = new Common.UI.Button({ el: $('#chart-btn-select-data') }); @@ -320,9 +859,17 @@ define([ createDelayedElements: function() { this.createDelayedControls(); this.updateMetricUnit(); + this.UpdateThemeColors(); this._initSettings = false; }, + 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){ var w = field.getNumberValue(); var h = this.spnHeight.getNumberValue(); @@ -372,17 +919,20 @@ define([ var me = this; var win, props; if (me.api){ - props = me.api.asc_getChartObject(); + props = (me.isChart) ? me.api.asc_getChartObject() : me._originalProps; if (props) { - (new SSE.Views.ChartSettingsDlg( { chartSettings: props, + isChart: me.isChart, api: me.api, handler: function(result, value) { if (result == 'ok') { if (me.api) { - me.api.asc_editChartDrawingObject(value.chartSettings); + if (me.isChart) + me.api.asc_editChartDrawingObject(value.chartSettings); + else + me.api.asc_setSparklineGroup(me._state.SparkId, value.chartSettings); } } Common.NotificationCenter.trigger('edit:complete', me); @@ -528,7 +1078,211 @@ define([ } } }, + + updateSparkStyles: function(styles) { + var me = this; + if (!this.cmbSparkStyle) { + this.cmbSparkStyle = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 272, + enableKeyEvents: true, + cls: 'combo-spark-style' + }); + this.cmbSparkStyle.render($('#spark-combo-style')); + this.cmbSparkStyle.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this)); + this.cmbSparkStyle.openButton.menu.on('show:after', function () { + me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbSparkStyle); + } + + if (styles && styles.length>1){ + var stylesStore = this.cmbSparkStyle.menuPicker.store, + selectedIdx = styles[styles.length-1]; + if (stylesStore.length == styles.length-1) { + var data = stylesStore.models; + for (var i=0; i-1); + } + } + }, + + onSelectSparkType: function(btn, 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; + } + + this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls); + this._state.SparkType = -1; + + if (this.api && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + props.asc_setType(rawData.type); + this.api.asc_setSparklineGroup(this._state.SparkId, props); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onSelectSparkStyle: function(combo, record) { + if (this._noApply) return; + + if (this.api && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + props.asc_setStyle(record.get('data')); + this.api.asc_setSparklineGroup(this._state.SparkId, props); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + applyBorderSize: function(value) { + value = parseFloat(value); + value = isNaN(value) ? 1 : Math.max(0.01, Math.min(1584, value)); + + this.BorderSize = value; + if (this.api && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + props.asc_setLineWeight(this.BorderSize); + this.api.asc_setSparklineGroup(this._state.SparkId, props); + Common.NotificationCenter.trigger('edit:complete', this); + } + }, + + onBorderSizeChanged: function(before, combo, record, e) { + var me = this; + if (before) { + var value = parseFloat(record.value), + expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(' + me.txtPt + ')?\\s*$'); + if (!(expr.exec(record.value)) || value<0.01 || value>1584) { + this._state.LineWeight = -1; + Common.UI.error({ + msg: this.textBorderSizeErr, + callback: function() { + _.defer(function(btn) { + Common.NotificationCenter.trigger('edit:complete', me); + }) + } + }); + } + } else + this.applyBorderSize(record.value); + }, + + onBorderSizeSelect: function(combo, record) { + this.applyBorderSize(record.value); + }, + + onColorsSparkSelect: function(picker, color) { + this.btnSparkColor.setColor(color); + if (this.api && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + props.asc_setColorSeries(Common.Utils.ThemeColor.getRgbColor(color)); + this.api.asc_setSparklineGroup(this._state.SparkId, props); + } + Common.NotificationCenter.trigger('edit:complete', 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 && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + switch (type) { + case 0: + props.asc_setHighPoint(field.getValue()=='checked'); + break; + case 1: + props.asc_setLowPoint(field.getValue()=='checked'); + break; + case 2: + props.asc_setNegativePoint(field.getValue()=='checked'); + break; + case 3: + props.asc_setFirstPoint(field.getValue()=='checked'); + break; + case 4: + props.asc_setLastPoint(field.getValue()=='checked'); + break; + case 5: + props.asc_setMarkersPoint(field.getValue()=='checked'); + break; + } + this.api.asc_setSparklineGroup(this._state.SparkId, props); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + + onColorsPointSelect: function(type, btn, picker, color) { + btn.setColor(color); + if (this.chPoints[type].getValue() !== 'checked') + this.chPoints[type].setValue(true, true); + if (this.api && !this._noApply && this._originalProps) { + var props = new Asc.sparklineGroup(); + switch (type) { + case 0: + props.asc_setHighPoint(true); + props.asc_setColorHigh(Common.Utils.ThemeColor.getRgbColor(color)); + break; + case 1: + props.asc_setLowPoint(true); + props.asc_setColorLow(Common.Utils.ThemeColor.getRgbColor(color)); + break; + case 2: + props.asc_setNegativePoint(true); + props.asc_setColorNegative(Common.Utils.ThemeColor.getRgbColor(color)); + break; + case 3: + props.asc_setFirstPoint(true); + props.asc_setColorFirst(Common.Utils.ThemeColor.getRgbColor(color)); + break; + case 4: + props.asc_setLastPoint(true); + props.asc_setColorLast(Common.Utils.ThemeColor.getRgbColor(color)); + break; + case 5: + props.asc_setMarkersPoint(true); + props.asc_setColorMarkers(Common.Utils.ThemeColor.getRgbColor(color)); + break; + } + this.api.asc_setSparklineGroup(this._state.SparkId, props); + } + Common.NotificationCenter.trigger('edit:complete', this); + }, + setLocked: function (locked) { this._locked = locked; }, @@ -549,7 +1303,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', @@ -560,9 +1314,24 @@ define([ textStock: 'Stock Chart', textStyle: 'Style', textAdvanced: 'Show advanced settings', + strSparkColor: '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', + strTemplate: 'Template', + textShow: 'Show', textType: 'Type', textSelectData: 'Select Data', - textRanges: 'Data Range' + textRanges: 'Data Range', + textBorderSizeErr: 'The entered value is incorrect.
Please enter a value between 0 pt and 1584 pt.' }, 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 31eb1f28a..a114d5b8a 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 @@ -79,17 +81,21 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); this._state = { - ChartType: Asc.c_oAscChartTypeSettings.barNormal + ChartType: Asc.c_oAscChartTypeSettings.barNormal, + SparkType: -1 }; this._noApply = true; + this._changedProps = null; 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() { @@ -770,12 +776,231 @@ 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.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'}, + { group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.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.cmbSparkStyle = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 272, + enableKeyEvents: true, + cls: 'combo-spark-style' + }); + this.cmbSparkStyle.render($('#spark-dlg-combo-style')); + this.cmbSparkStyle.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this)); + this.cmbSparkStyle.openButton.menu.on('show:after', function () { + me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + + 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._arrEmptyCells = [ + { value: Asc.c_oAscEDispBlanksAs.Gap, displayValue: this.textGaps }, + { value: Asc.c_oAscEDispBlanksAs.Zero, displayValue: this.textZero }, + { value: Asc.c_oAscEDispBlanksAs.Span, displayValue: this.textEmptyLine } + ]; + this.cmbEmptyCells = new Common.UI.ComboBox({ + el : $('#spark-dlg-combo-empty'), + menuStyle : 'min-width: 188px;', + editable : false, + cls : 'input-group-nr' + }); + this.cmbEmptyCells.on('selected', _.bind(function(combo, record){ + if (this._changedProps) { + this._changedProps.asc_setDisplayEmpty(record.value); + } + }, this)); + + this.chShowEmpty = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-show-data'), + labelText: this.textShowData + }); + this.chShowEmpty.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + if (this._changedProps) { + this._changedProps.asc_setDisplayHidden(field.getValue()=='checked'); + } + }, this)); + + // Sparkline axis + + this.chShowAxis = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-show'), + labelText: this.textShowSparkAxis + }); + this.chShowAxis.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + if (this._changedProps) { + this._changedProps.asc_setDisplayXAxis(field.getValue()=='checked'); + } + }, this)); + + this.chReverse = new Common.UI.CheckBox({ + el: $('#spark-dlg-check-reverse'), + labelText: this.textReverseOrder + }); + this.chReverse.on('change', _.bind(function(field, newValue, oldValue, eOpts){ + if (this._changedProps) { + this._changedProps.asc_setRightToLeft(field.getValue()=='checked'); + } + }, this)); + + 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_oAscSparklineAxisMinMax.Individual}, + {displayValue: this.textSameAll, value: Asc.c_oAscSparklineAxisMinMax.Group}, + {displayValue: this.textFixed, value: Asc.c_oAscSparklineAxisMinMax.Custom} + ] + }).on('selected', _.bind(function(combo, record) { + this.spnSparkMinValue.setDisabled(record.value!==Asc.c_oAscSparklineAxisMinMax.Custom); + if (this._changedProps) { + this._changedProps.asc_setMinAxisType(record.value); + } + if (record.value==Asc.c_oAscSparklineAxisMinMax.Custom && _.isEmpty(this.spnSparkMinValue.getValue())) + this.spnSparkMinValue.setValue(0); + }, 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) { + if (this._changedProps) { + this._changedProps.asc_setManualMin(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_oAscSparklineAxisMinMax.Individual}, + {displayValue: this.textSameAll, value: Asc.c_oAscSparklineAxisMinMax.Group}, + {displayValue: this.textFixed, value: Asc.c_oAscSparklineAxisMinMax.Custom} + ] + }).on('selected', _.bind(function(combo, record) { + this.spnSparkMaxValue.setDisabled(record.value!==Asc.c_oAscSparklineAxisMinMax.Custom); + if (this._changedProps) { + this._changedProps.asc_setMaxAxisType(record.value); + } + if (record.value==Asc.c_oAscSparklineAxisMinMax.Custom && _.isEmpty(this.spnSparkMaxValue.getValue())) + this.spnSparkMaxValue.setValue(0); + }, 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) { + if (this._changedProps) { + this._changedProps.asc_setManualMax(field.getNumberValue()); + } + }, this)); + this.afterRender(); }, - afterRender: function() { 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); @@ -985,64 +1210,170 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' this.currentAxisProps = props; }, + updateSparkStyles: function(styles) { + if (styles && styles.length>1){ + var picker = this.cmbSparkStyle.menuPicker, + stylesStore = picker.store; + if (stylesStore.length == styles.length-1) { + var data = stylesStore.models; + for (var i=0; i-1); + } + } + }, + + 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); + if (this._changedProps) { + this._changedProps.asc_setType(rawData.type); + } + this.chartSettings.asc_setType(rawData.type); + this._state.SparkType = rawData.type; + + var changed = false, + value = this.cmbEmptyCells.getValue(); + if (rawData.type !== Asc.c_oAscSparklineType.Line && this._arrEmptyCells.length>2) { + if (value == Asc.c_oAscEDispBlanksAs.Span) + value = Asc.c_oAscEDispBlanksAs.Gap; + this._arrEmptyCells.pop(); + changed = true; + } else if (rawData.type == Asc.c_oAscSparklineType.Line && this._arrEmptyCells.length<3) { + this._arrEmptyCells.push({ value: Asc.c_oAscEDispBlanksAs.Span, displayValue: this.textEmptyLine }); + changed = true; + } + if (changed) { + this.cmbEmptyCells.setData(this._arrEmptyCells); + this.cmbEmptyCells.setValue(value); + if (this._changedProps) + this._changedProps.asc_setDisplayEmpty(value); + } + + this.updateSparkStyles(this.chartSettings.asc_getStyles()); + }, + + + onSelectSparkStyle: function(combo, record) { + if (this._noApply) return; + + if (this._changedProps) { + this._changedProps.asc_setStyle(record.get('data')); + } + }, + _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._noApply = false; - - 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; + 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')); } - if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); + this._noApply = false; - var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); - return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; - }; + var value = props.getRange(); + this.txtDataRange.setValue((value) ? value : ''); + this.dataRangeValid = value; - this.cmbDataDirect.setDisabled(value===null); - this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); + this.txtDataRange.validation = function(value) { + if (_.isEmpty(value)) { + if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true); + return true; + } - this.cmbChartTitle.setValue(props.getTitle()); - this.cmbLegendPos.setValue(props.getLegendPos()); + if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false); - this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos()); + var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false); + return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; + }; - this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true); - this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); - this.chValue.setValue(this.chartSettings.getShowVal(), true); + this.cmbDataDirect.setDisabled(value===null); + this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0); - value = props.getSeparator(); - this.txtSeparator.setValue((value) ? value : ''); + this.cmbChartTitle.setValue(props.getTitle()); + this.cmbLegendPos.setValue(props.getLegendPos()); - // Vertical Axis - this.vertAxisProps = props.getVertAxisProps(); + this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos()); - // Horizontal Axis - this.horAxisProps = props.getHorAxisProps(); + this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true); + this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); + this.chValue.setValue(this.chartSettings.getShowVal(), true); - this.updateAxisProps(this._state.ChartType); - this.currentChartType = this._state.ChartType; + value = props.getSeparator(); + this.txtSeparator.setValue((value) ? value : ''); + + // Vertical Axis + this.vertAxisProps = props.getVertAxisProps(); + + // Horizontal Axis + this.horAxisProps = props.getHorAxisProps(); + + this.updateAxisProps(this._state.ChartType); + this.currentChartType = this._state.ChartType; + } else { // sparkline + this._state.SparkType = props.asc_getType(); + var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType}); + this.mnuSparkTypePicker.selectRecord(record, true); + if (record) + this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls')); + + this.updateSparkStyles(props.asc_getStyles()); + + if (this._state.SparkType !== Asc.c_oAscSparklineType.Line) + this._arrEmptyCells.pop(); + this.cmbEmptyCells.setData(this._arrEmptyCells); + this.cmbEmptyCells.setValue(props.asc_getDisplayEmpty()); + + this.chShowEmpty.setValue(props.asc_getDisplayHidden(), true); + this.chShowAxis.setValue(props.asc_getDisplayXAxis(), true); + this.chReverse.setValue(props.asc_getRightToLeft(), true); + + this.cmbSparkMinType.setValue(props.asc_getMinAxisType(), true); + this.cmbSparkMaxType.setValue(props.asc_getMaxAxisType(), true); + this.spnSparkMinValue.setDisabled(props.asc_getMinAxisType()!==Asc.c_oAscSparklineAxisMinMax.Custom); + this.spnSparkMaxValue.setDisabled(props.asc_getMaxAxisType()!==Asc.c_oAscSparklineAxisMinMax.Custom); + this.spnSparkMinValue.setValue((props.asc_getManualMin() !== null) ? props.asc_getManualMin() : '', true); + this.spnSparkMaxValue.setValue((props.asc_getManualMax() !== null) ? props.asc_getManualMax() : '', true); + + this._changedProps = new Asc.sparklineGroup(); + this._noApply = false; + } } }, @@ -1050,67 +1381,72 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template' var value, type = this.mnuChartTypePicker.getSelectedRec()[0].get('type'); - // Layout + if (this.isChart) { + this.chartSettings.putType(type); - this.chartSettings.putType(type); + this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); + this.chartSettings.putRange(this.txtDataRange.getValue()); - this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1); - this.chartSettings.putRange(this.txtDataRange.getValue()); + this.chartSettings.putTitle(this.cmbChartTitle.getValue()); + this.chartSettings.putLegendPos(this.cmbLegendPos.getValue()); - this.chartSettings.putTitle(this.cmbChartTitle.getValue()); - this.chartSettings.putLegendPos(this.cmbLegendPos.getValue()); + this.chartSettings.putShowHorAxis(this.cmbHorShow.getValue()); + this.chartSettings.putShowVerAxis(this.cmbVertShow.getValue()); - this.chartSettings.putShowHorAxis(this.cmbHorShow.getValue()); - this.chartSettings.putShowVerAxis(this.cmbVertShow.getValue()); + this.chartSettings.putHorAxisLabel(this.cmbHorTitle.getValue()); + this.chartSettings.putVertAxisLabel(this.cmbVertTitle.getValue()); - this.chartSettings.putHorAxisLabel(this.cmbHorTitle.getValue()); - this.chartSettings.putVertAxisLabel(this.cmbVertTitle.getValue()); + this.chartSettings.putHorGridLines(this.cmbHorGrid.getValue()); + this.chartSettings.putVertGridLines(this.cmbVertGrid.getValue()); - this.chartSettings.putHorGridLines(this.cmbHorGrid.getValue()); - this.chartSettings.putVertGridLines(this.cmbVertGrid.getValue()); + this.chartSettings.putDataLabelsPos(this.cmbDataLabels.getValue()); - this.chartSettings.putDataLabelsPos(this.cmbDataLabels.getValue()); + this.chartSettings.putShowSerName(this.chSeriesName.getValue()=='checked'); + this.chartSettings.putShowCatName(this.chCategoryName.getValue()=='checked'); + this.chartSettings.putShowVal(this.chValue.getValue()=='checked'); - this.chartSettings.putShowSerName(this.chSeriesName.getValue()=='checked'); - this.chartSettings.putShowCatName(this.chCategoryName.getValue()=='checked'); - this.chartSettings.putShowVal(this.chValue.getValue()=='checked'); + this.chartSettings.putSeparator(_.isEmpty(this.txtSeparator.getValue()) ? ' ' : this.txtSeparator.getValue()); - this.chartSettings.putSeparator(_.isEmpty(this.txtSeparator.getValue()) ? ' ' : this.txtSeparator.getValue()); + this.chartSettings.putShowMarker(this.chMarkers.getValue()=='checked'); - this.chartSettings.putShowMarker(this.chMarkers.getValue()=='checked'); + value = (type == Asc.c_oAscChartTypeSettings.lineNormal || type == Asc.c_oAscChartTypeSettings.lineStacked || + type == Asc.c_oAscChartTypeSettings.lineStackedPer || type == Asc.c_oAscChartTypeSettings.scatter); + if (value) { + value = this.cmbLines.getValue(); + this.chartSettings.putLine(value!==0); + if (value>0) + this.chartSettings.putSmooth(value==2); + } - value = (type == Asc.c_oAscChartTypeSettings.lineNormal || type == Asc.c_oAscChartTypeSettings.lineStacked || - type == Asc.c_oAscChartTypeSettings.lineStackedPer || type == Asc.c_oAscChartTypeSettings.scatter); - if (value) { - value = this.cmbLines.getValue(); - this.chartSettings.putLine(value!==0); - if (value>0) - this.chartSettings.putSmooth(value==2); + this.chartSettings.putVertAxisProps(this.vertAxisProps); + this.chartSettings.putHorAxisProps(this.horAxisProps); + + return { chartSettings: this.chartSettings }; + } else { + return { chartSettings: this._changedProps }; } - - this.chartSettings.putVertAxisProps(this.vertAxisProps); - this.chartSettings.putHorAxisProps(this.horAxisProps); - - return { chartSettings: this.chartSettings }; }, isRangeValid: function() { - var isvalid; - if (!_.isEmpty(this.txtDataRange.getValue())) { - isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, this.mnuChartTypePicker.getSelectedRec()[0].get('type')); - if (isvalid == Asc.c_oAscError.ID.No) - return true; - } else - this.txtDataRange.showError([this.txtEmpty]); + if (this.isChart) { + var isvalid; + if (!_.isEmpty(this.txtDataRange.getValue())) { + isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, this.mnuChartTypePicker.getSelectedRec()[0].get('type')); + if (isvalid == Asc.c_oAscError.ID.No) + return true; + } else + this.txtDataRange.showError([this.txtEmpty]); - this.setActiveCategory(0); - if (isvalid == Asc.c_oAscError.ID.StockChartError) { - Common.UI.warning({msg: this.errorStockChart}); - } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { - Common.UI.warning({msg: this.errorMaxRows}); + this.setActiveCategory(0); + if (isvalid == Asc.c_oAscError.ID.StockChartError) { + Common.UI.warning({msg: this.errorStockChart}); + } else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) { + Common.UI.warning({msg: this.errorMaxRows}); + } else + this.txtDataRange.cmpEl.find('input').focus(); + return false; } else - this.txtDataRange.cmpEl.find('input').focus(); - return false; + return true; }, onSelectData: function() { @@ -1277,6 +1613,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 cb46ba084..a2aad1de2 100644 --- a/apps/spreadsheeteditor/main/app/view/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js @@ -503,7 +503,33 @@ define([ id : 'id-toolbar-btn-insertchart', cls : 'btn-toolbar', iconCls : 'btn-insertchart', - lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth] + lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth], + 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('') } + ] + }) + }) + ] + }) }); me.btnEditChart = new Common.UI.Button({ @@ -1685,6 +1711,68 @@ define([ } ] })); + + this.mnuInsertChartPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-insertchart'), + parentMenu: this.mnuInsertChart.menu, + showLast: false, + restoreHeight: 411, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-bar', caption: this.textColumn }, + { id: 'menu-chart-group-line', caption: this.textLine }, + { id: 'menu-chart-group-pie', caption: this.textPie }, + { id: 'menu-chart-group-hbar', caption: this.textBar }, + { id: 'menu-chart-group-area', caption: this.textArea }, + { id: 'menu-chart-group-scatter', caption: this.textPoint }, + { id: 'menu-chart-group-stock', caption: this.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('
') + }); + this.mnuInsertSparkPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-insertspark'), + parentMenu: this.mnuInsertSparkline.menu, + showLast: false, + restoreHeight: 200, + allowScrollbar: false, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-sparkcolumn', caption: this.textColumnSpark }, + { id: 'menu-chart-group-sparkline', caption: this.textLineSpark }, + { id: 'menu-chart-group-sparkwin', caption: this.textWinLossSpark } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-sparkcolumn', type: Asc.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'}, + { group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'}, + { group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'} + ]), + itemTemplate: _.template('
') + }) }, setApi: function(api) { @@ -2031,6 +2119,18 @@ define([ txtPasteRange: 'Paste name', textInsText: 'Insert text box', 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', tipInsertEquation: 'Insert Equation' }, 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 902467fc0..a9806180c 100644 --- a/apps/spreadsheeteditor/main/locale/en.json +++ b/apps/spreadsheeteditor/main/locale/en.json @@ -719,7 +719,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/img/charttypes.png b/apps/spreadsheeteditor/main/resources/img/charttypes.png index 1a809d63f..accc8a021 100644 Binary files a/apps/spreadsheeteditor/main/resources/img/charttypes.png and b/apps/spreadsheeteditor/main/resources/img/charttypes.png differ diff --git a/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png b/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png index fcd18de30..40e98ea44 100644 Binary files a/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png and b/apps/spreadsheeteditor/main/resources/img/charttypes@2x.png differ diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less index 2f02d4e6f..801c35841 100644 --- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less @@ -295,6 +295,18 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px - background-position: -200px 0; } +.spark-line{ + background-position: 0px -250px; +} + +.spark-column{ + background-position: -50px -250px; +} + +.spark-win{ + background-position: -100px -250px; +} + #table-combo-template .combo-dataview{ .combo-template(60px); } \ No newline at end of file