Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added sparkline settings.

Browse source
This commit is contained in:
Julia Radzhabova 2016-09-14 16:34:08 +03:00
parent 7d4ce1c7a2
commit 5924e4ff82
12 changed files with 1099 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -75,6 +75,7 @@ define([
}); });
Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({ Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
allowNoBorders: true,
template: _.template([ template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>"></div>', '<div class="form-control" style="<%= style %>"></div>',
@ -94,13 +95,8 @@ define([
].join('')), ].join('')),
initialize : function(options) { initialize : function(options) {
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt); var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
data = [
Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
editable: false,
store: new Common.UI.BordersStore(),
data: [
{displayValue: this.txtNoBorders, value: 0, pxValue: 0 },
{displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0}, {displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0},
{displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20}, {displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20},
{displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40}, {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: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80},
{displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 5, offsety: 100}, {displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 5, offsety: 100},
{displayValue: '6 ' + txtPt, value: 6, pxValue: 6, offsety: 120} {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;' menuStyle: 'min-width: 150px;'
}, options)); }, options));
}, },

13
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -309,7 +309,7 @@ define([
} }
}, },
updateColors: function(effectcolors, standartcolors) { updateColors: function(effectcolors, standartcolors, value) {
if (effectcolors===undefined || standartcolors===undefined) return; if (effectcolors===undefined || standartcolors===undefined) return;
var me = this, var me = this,
@ -366,11 +366,14 @@ define([
} }
} }
var selected = $(this.el).find('a.' + this.selectedCls); if (value)
if (selected.length && selected.hasClass('palette-color-effect')) { this.select(value, true);
this.value = selected[0].className.match(this.colorRe)[1].toUpperCase(); 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; this.options.updateColorsArr = undefined;
}, },

1
apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
View file

@ -662,6 +662,7 @@ define([
(new SSE.Views.ChartSettingsDlg( (new SSE.Views.ChartSettingsDlg(
{ {
chartSettings: props, chartSettings: props,
isChart: true,
api: me.api, api: me.api,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {

19
apps/spreadsheeteditor/main/app/controller/RightMenu.js
View file

@ -108,21 +108,22 @@ define([
var SelectedObjects = [], var SelectedObjects = [],
selectType = info.asc_getFlags().asc_getSelectionType(), 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 || 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) { selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) {
SelectedObjects = this.api.asc_getGraphicObjectProps(); 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.rightmenu.clearSelection();
this._openRightMenu = true; this._openRightMenu = true;
} }
var need_disable = info.asc_getLocked(); 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) { if (this._state.prevDisabled != need_disable) {
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) if (!this.editMode)
return; return;
@ -176,7 +177,14 @@ define([
this._settings[settingsType].locked = isCellLocked; this._settings[settingsType].locked = isCellLocked;
this._settings[settingsType].hidden = 0; 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; var lastactive = -1, currentactive, priorityactive = -1;
for (i=0; i<this._settings.length; ++i) { for (i=0; i<this._settings.length; ++i) {
var pnl = this._settings[i]; var pnl = this._settings[i];
@ -245,6 +253,7 @@ define([
UpdateThemeColors: function() { UpdateThemeColors: function() {
this.rightmenu.shapeSettings.UpdateThemeColors(); this.rightmenu.shapeSettings.UpdateThemeColors();
this.rightmenu.textartSettings.UpdateThemeColors(); this.rightmenu.textartSettings.UpdateThemeColors();
this.rightmenu.chartSettings.UpdateThemeColors();
}, },
updateMetricUnit: function() { updateMetricUnit: function() {

47
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -201,7 +201,8 @@ define([
toolbar.btnTextOrient.menu.on('item:click', _.bind(this.onTextOrientationMenu, this)); toolbar.btnTextOrient.menu.on('item:click', _.bind(this.onTextOrientationMenu, this));
toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageMenu, this)); toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageMenu, this));
toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlink, this)); toolbar.btnInsertHyperlink.on('click', _.bind(this.onHyperlink, this));
toolbar.btnInsertChart.on('click', _.bind(this.onInsertChart, this)); if (toolbar.mnuInsertChartPicker) toolbar.mnuInsertChartPicker.on('item:click', _.bind(this.onSelectChart, this));
if (toolbar.mnuInsertSparkPicker) toolbar.mnuInsertSparkPicker.on('item:click', _.bind(this.onSelectSpark, this));
toolbar.btnEditChart.on('click', _.bind(this.onInsertChart, this)); toolbar.btnEditChart.on('click', _.bind(this.onInsertChart, this));
toolbar.btnInsertText.on('click', _.bind(this.onBtnInsertTextClick, this)); toolbar.btnInsertText.on('click', _.bind(this.onBtnInsertTextClick, this));
toolbar.btnInsertText.menu.on('item:click', _.bind(this.onInsertTextClick, this)); toolbar.btnInsertText.menu.on('item:click', _.bind(this.onInsertTextClick, this));
@ -748,6 +749,7 @@ define([
(new SSE.Views.ChartSettingsDlg( (new SSE.Views.ChartSettingsDlg(
{ {
chartSettings: props, chartSettings: props,
isChart: true,
api: me.api, api: me.api,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { if (result == 'ok') {
@ -763,6 +765,49 @@ define([
} }
}, },
onSelectChart: function(picker, item, record, e) {
if (!this.editMode) return;
var me = this, info = me.api.asc_getCellInfo();
if (info.asc_getFlags().asc_getSelectionType()!=Asc.c_oAscSelectionType.RangeImage) {
var win, props;
if (me.api){
var ischartedit = ( info.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChart || info.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChartText);
if (ischartedit) {
} else {
props = me.api.asc_getChartObject();
if (props) {
props.putType(record.get('type'));
me.api.asc_addChartDrawingObject(props);
}
}
}
}
if (e.type !== 'click')
me.toolbar.btnInsertChart.menu.hide();
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onSelectSpark: function(picker, item, record, e) {
if (!this.editMode) return;
var me = this, info = me.api.asc_getCellInfo();
if (info.asc_getFlags().asc_getSelectionType()!=Asc.c_oAscSelectionType.RangeImage) {
var win, props;
if (me.api){
var ischartedit = ( info.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChart || info.asc_getFlags().asc_getSelectionType() == Asc.c_oAscSelectionType.RangeChartText);
if (!ischartedit) {
props = me.api.asc_getChartObject();
if (props) {
props.putType(record.get('type'));
me.api.asc_addChartDrawingObject(props);
}
}
}
}
if (e.type !== 'click')
me.toolbar.btnInsertChart.menu.hide();
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onBtnInsertTextClick: function(btn, e) { onBtnInsertTextClick: function(btn, e) {
if (this.api) if (this.api)
this._addAutoshape(btn.pressed, 'textRect'); this._addAutoshape(btn.pressed, 'textRect');

87
apps/spreadsheeteditor/main/app/template/ChartSettings.template
View file

@ -1,4 +1,4 @@
<table cols="3"> <table cols="3" id="chart-panel-size">
<tr> <tr>
<td colspan=3> <td colspan=3>
<label class="header"><%= scope.textSize %></label> <label class="header"><%= scope.textSize %></label>
@ -18,7 +18,7 @@
</td> </td>
</tr> </tr>
</table> </table>
<table cols="2"> <table cols="2" id="chart-panel-types">
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
@ -37,13 +37,92 @@
<div id="chart-button-style" style=""></div> <div id="chart-button-style" style=""></div>
</td> </td>
</tr> </tr>
</table>
<table cols="2" id="spark-panel-types">
<tr> <tr>
<td class="padding-small" colspan=2> <td colspan=2>
<label class="header"><%= scope.strSparkType %></label>
</td>
</tr>
<tr>
<td class="padding-large">
<div id="spark-button-type" style=""></div>
</td>
<td class="padding-large">
<div id="spark-button-style" style=""></div>
</td>
</tr>
</table>
<table cols="1" id="spark-panel-points">
<tr>
<td>
<div style="width: 100%; height: 25px;">
<label class="input-label" style="margin-top: 4px;"><%= scope.strSparkColor %></label>
<div id="spark-color-btn" style="display: inline-block; float:right;"></div>
</div>
</td>
</tr>
<tr>
<td class="padding-small">
<div style="display:inline-block;width:100px;vertical-align: middle;">
<label class="input-label" style=""><%= scope.strLineWeight %></label>
<div id="spark-combo-line-type" style="width: 93px;"></div>
</div>
</td>
</tr>
<tr>
<td class="padding-small">
<div class="separator horizontal"></div> <div class="separator horizontal"></div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td align="center" colspan=2> <td class="padding-small">
<label class="header" style="margin-bottom: 8px;"><%= scope.textMarkers %></label>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<div id="spark-checkbox-high" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-high-color-btn" style="display: inline-block; float:right;"></div>
</div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<div id="spark-checkbox-low" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-low-color-btn" style="display: inline-block; float:right;"></div>
</div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<div id="spark-checkbox-negative" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-negative-color-btn" style="display: inline-block; float:right;"></div>
</div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<div id="spark-checkbox-first" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-first-color-btn" style="display: inline-block; float:right;"></div>
</div>
<div style="width: 100%; height: 25px; margin-bottom: 8px;">
<div id="spark-checkbox-last" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-last-color-btn" style="display: inline-block; float:right;"></div>
</div>
<div style="width: 100%; height: 25px;">
<div id="spark-checkbox-markers" style="display: inline-block;margin-top: 4px;"></div>
<div id="spark-markers-color-btn" style="display: inline-block; float:right;"></div>
</div>
</td>
</tr>
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<button type="button" class="btn btn-text-default" id="spark-button-edit-data" style="width:100%;"><%= scope.textEditData %></button>
</td>
</tr>
</table>
<table cols="1">
<tr>
<td class="padding-small">
<div class="separator horizontal"></div>
</td>
</tr>
<tr>
<td align="center">
<label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>

109
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -316,4 +316,113 @@
</tr> </tr>
</table> </table>
</div> </div>
</div>
<div id="id-spark-settings-dlg-style" class="settings-panel">
<div class="inner-content padding-large">
<table cols="2" style="">
<tr>
<td class="padding-large">
<label class="header"><%= scope.textType %></label>
<div id="spark-dlg-button-type" style="margin-right: 15px;"></div>
</td>
<td class="padding-large">
<label class="header"><%= scope.textStyle %></label>
<div id="spark-dlg-button-style" style=""></div>
</td>
</tr>
</table>
</div>
<div class="inner-content">
<div class="padding-large" >
<label class="header padding-small" style="display: block;"><%= scope.textSparkRanges %></label>
<div id="spark-dlg-radio-group" class="padding-small" style="display: block;"></div>
<div id="spark-dlg-radio-single" style="display: block;"></div>
</div>
<table cols="2" style="width: 100%;">
<tr>
<td colspan=2 >
<label class="header"><%= scope.textDataRange %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="200">
<div id="spark-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>
</td>
<td class="padding-small" style="text-align: right;">
<button type="button" class="btn btn-text-default" id="spark-dlg-btn-data" style="min-width: 100px;"><%= scope.textSelectData %></button>
</td>
</tr>
<tr>
<td colspan=2 >
<label class="header"><%= scope.textLocationRange %></label>
</td>
</tr>
<tr>
<td class="padding-large" width="200">
<div id="spark-dlg-txt-location" class="input-row" style="margin-right: 10px;"></div>
</td>
<td class="padding-large" style="text-align: right;">
<button type="button" class="btn btn-text-default" id="spark-dlg-btn-location-data" style="min-width: 100px;"><%= scope.textSelectData %></button>
</td>
</tr>
<tr>
<td colspan=2 class="padding-large"></td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<label class="header"><%= scope.textEmptyCells %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="200">
<label class="input-label"><%= scope.textShowEmptyCells %></label>
<div id="spark-dlg-combo-empty" class="input-group-nr" style="margin-right: 10px;"></div>
</td>
<td></td>
</tr>
<tr>
<td colspan=2>
<div id="spark-dlg-check-show-data"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-spark-settings-dlg-axis" class="settings-panel">
<div class="inner-content">
<div class="padding-large" >
<label class="header padding-small" style="display: block;"><%= scope.textHorAxis %></label>
<div id="spark-dlg-check-show" class="padding-small" style="display: block;"></div>
<div id="spark-dlg-check-reverse" class="padding-small" style="display: block;"></div>
</div>
<table cols="3" style="width: 100%">
<tr>
<td colspan="3">
<label class="header padding-small"><%= scope.textVertAxis %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="100">
<label class="input-label"><%= scope.textMinValue %></label>
</td>
<td class="padding-small" width="115" style="padding-right: 10px;">
<div id="spark-dlg-combo-mintype"></div>
</td>
<td class="padding-small" width="90">
<div id="spark-dlg-input-min-value"></div>
</td>
</tr>
<tr>
<td class="padding-large" width="100">
<label class="input-label"><%= scope.textMaxValue %></label>
</td>
<td class="padding-large" width="115" style="padding-right: 10px;">
<div id="spark-dlg-combo-maxtype"></div>
</td>
<td class="padding-large" width="90">
<div id="spark-dlg-input-max-value"></div>
</td>
</tr>
</table>
</div>
</div> </div>

458
apps/spreadsheeteditor/main/app/view/ChartSettings.js
View file

@ -80,12 +80,15 @@ define([
this.spinners = []; this.spinners = [];
this.lockedControls = []; this.lockedControls = [];
this._locked = false; this._locked = false;
this.defColor = {color: '4f81bd', effectId: 24};
this.isChart = true;
this._noApply = false; this._noApply = false;
this._originalProps = null; this._originalProps = null;
this.render(); this.render();
// charts
this.btnChartType = new Common.UI.Button({ this.btnChartType = new Common.UI.Button({
cls : 'btn-large-dataview', cls : 'btn-large-dataview',
iconCls : 'item-chartlist bar-normal', iconCls : 'item-chartlist bar-normal',
@ -221,7 +224,123 @@ define([
} }
}, this)); }, 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('<div id="id-spark-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
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('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
});
});
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('<div id="id-spark-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
});
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('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
});
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.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 () { render: function () {
@ -247,79 +366,85 @@ define([
this._initSettings = false; this._initSettings = false;
} }
this.ShowHideElem(!!(props && props.asc_getChartProperties && props.asc_getChartProperties()));
this.disableControls(this._locked); this.disableControls(this._locked);
if (this.api && props && props.asc_getChartProperties()){ if (this.api && props){
this._originalProps = new Asc.asc_CImgProperty(props); if (props.asc_getChartProperties && props.asc_getChartProperties()) { // chart
this._originalProps = new Asc.asc_CImgProperty(props);
this.isChart = true;
this._noApply = true; this._noApply = true;
this.chartProps = props.asc_getChartProperties(); this.chartProps = props.asc_getChartProperties();
var value = props.asc_getSeveralCharts() || this._locked; var value = props.asc_getSeveralCharts() || this._locked;
if (this._state.SeveralCharts!==value) { if (this._state.SeveralCharts!==value) {
this.linkAdvanced.toggleClass('disabled', value); this.linkAdvanced.toggleClass('disabled', value);
this._state.SeveralCharts=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;
} }
}
value = props.asc_getSeveralChartStyles(); value = props.asc_getSeveralChartTypes();
if (this._state.SeveralCharts && value) { if (this._state.SeveralCharts && value) {
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.btnChartType.setIconCls('');
btnIconEl.css('background-image', 'none'); this._state.ChartType = null;
this.mnuChartStylePicker.selectRecord(null, true); } else {
this._state.ChartStyle = null; var type = this.chartProps.getType();
} else { if (this._state.ChartType !== type) {
value = this.chartProps.getStyle(); var record = this.mnuChartTypePicker.store.findWhere({type: type});
if (this._state.ChartStyle!==value) { this.mnuChartTypePicker.selectRecord(record, true);
var record = this.mnuChartStylePicker.store.findWhere({data: value}); if (record) {
this.mnuChartStylePicker.selectRecord(record, true); this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
if (record) { }
var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon'); this.updateChartStyles(this.api.asc_getChartPreviews(type));
btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')'); 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(); this._noApply = false;
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(); value = props.asc_getWidth();
if ( Math.abs(this._state.Height-value)>0.001 || if ( Math.abs(this._state.Width-value)>0.001 ||
(this._state.Height===null || value===null)&&(this._state.Height!==value)) { (this._state.Width===null || value===null)&&(this._state.Width!==value)) {
this.spnHeight.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true); this.spnWidth.setValue((value!==null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
this._state.Height = value; this._state.Width = value;
} }
if (props.asc_getHeight()>0) value = props.asc_getHeight();
this._nRatio = props.asc_getWidth()/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 (props.asc_getHeight()>0)
if (this._state.keepRatio!==value) { this._nRatio = props.asc_getWidth()/props.asc_getHeight();
this.btnRatio.toggle(value);
this._state.keepRatio=value; 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('<div id="spark-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
});
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('<div id="spark-high-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-high-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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('<div id="spark-low-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-low-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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('<div id="spark-negative-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-negative-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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('<div id="spark-first-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-first-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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('<div id="spark-last-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-last-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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('<div id="spark-markers-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
{ template: _.template('<a id="spark-markers-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
]
})
}).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() { createDelayedElements: function() {
this.updateMetricUnit(); 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){ onWidthChange: function(field, newValue, oldValue, eOpts){
@ -393,6 +657,7 @@ define([
(new SSE.Views.ChartSettingsDlg( (new SSE.Views.ChartSettingsDlg(
{ {
chartSettings: props, chartSettings: props,
isChart: me.isChart,
api: me.api, api: me.api,
handler: function(result, value) { handler: function(result, value) {
if (result == 'ok') { 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) { setLocked: function (locked) {
this._locked = locked; this._locked = locked;
}, },
@ -521,7 +840,7 @@ define([
textSize: 'Size', textSize: 'Size',
textWidth: 'Width', textWidth: 'Width',
textHeight: 'Height', textHeight: 'Height',
textEditData: 'Edit Data', textEditData: 'Edit Data and Location',
textChartType: 'Change Chart Type', textChartType: 'Change Chart Type',
textLine: 'Line Chart', textLine: 'Line Chart',
textColumn: 'Column Chart', textColumn: 'Column Chart',
@ -531,7 +850,20 @@ define([
textPoint: 'XY (Scatter) Chart', textPoint: 'XY (Scatter) Chart',
textStock: 'Stock Chart', textStock: 'Stock Chart',
textStyle: 'Style', 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 || {})); }, SSE.Views.ChartSettings || {}));
}); });

365
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -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-style', panelCaption: this.textTypeData},
{panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout},
{panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, {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)({ contentTemplate: _.template(contentTemplate)({
scope: this scope: this
@ -86,11 +88,13 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.api = this.options.api; this.api = this.options.api;
this.chartSettings = this.options.chartSettings; this.chartSettings = this.options.chartSettings;
this.isChart = this.options.isChart;
this.vertAxisProps = null; this.vertAxisProps = null;
this.horAxisProps = null; this.horAxisProps = null;
this.currentAxisProps = null; this.currentAxisProps = null;
this.dataRangeValid = ''; this.dataRangeValid = '';
this.currentChartType = this._state.ChartType; this.currentChartType = this._state.ChartType;
this.storageName = (this.isChart) ? 'sse-chart-settings-adv-category' : 'sse-spark-settings-adv-category';
}, },
render: function() { 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[2].on('click', _.bind(this.onVCategoryClick, this));
this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, 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('<div id="id-spark-dlg-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
});
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('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
});
});
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('<div id="id-spark-dlg-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
]
})
});
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('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
});
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(); this.afterRender();
}, },
@ -808,6 +1018,19 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType)); this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
this._setDefaults(this.chartSettings); 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) { if (this.storageName) {
var value = Common.localStorage.getItem(this.storageName); var value = Common.localStorage.getItem(this.storageName);
this.setActiveCategory((value!==null) ? parseInt(value) : 0); 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) { _setDefaults: function(props) {
var me = this; var me = this;
if (props ){ if (props ){
this.chartSettings = 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._noApply = false;
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._state.ChartStyle = props.getStyle();
record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle});
this._state.ChartStyle = props.getStyle(); this.mnuChartStylePicker.selectRecord(record, true);
record = this.mnuChartStylePicker.store.findWhere({data: this._state.ChartStyle}); if (record) {
this.mnuChartStylePicker.selectRecord(record, true); var btnIconEl = this.btnChartStyle.cmpEl.find('span.btn-icon');
if (record) { btnIconEl.css('background-image', 'url(' + record.get('imageUrl') + ')');
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;
} }
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); this.txtDataRange.validation = function(value) {
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true; if (_.isEmpty(value)) {
}; if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true);
return true;
}
this.cmbDataDirect.setDisabled(value===null); if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false);
this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0);
this.cmbChartTitle.setValue(props.getTitle()); var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false);
this.cmbLegendPos.setValue(props.getLegendPos()); 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.cmbChartTitle.setValue(props.getTitle());
this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true); this.cmbLegendPos.setValue(props.getLegendPos());
this.chValue.setValue(this.chartSettings.getShowVal(), true);
value = props.getSeparator(); this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos());
this.txtSeparator.setValue((value) ? value : '');
// Vertical Axis this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true);
this.vertAxisProps = props.getVertAxisProps(); this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true);
this.chValue.setValue(this.chartSettings.getShowVal(), true);
// Horizontal Axis value = props.getSeparator();
this.horAxisProps = props.getHorAxisProps(); this.txtSeparator.setValue((value) ? value : '');
this.updateAxisProps(this._state.ChartType); // Vertical Axis
this.currentChartType = this._state.ChartType; 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', textRight: 'Right',
textTop: 'Top', textTop: 'Top',
textBottom: 'Bottom', 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 || {})); }, SSE.Views.ChartSettingsDlg || {}));
}); });

105
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -652,7 +652,96 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'btn-insertchart', 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],
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('<div id="id-toolbar-menu-insertchart" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
}),
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('<div id="id-toolbar-menu-insertspark" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
]
})
})
]
})
});
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('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
});
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('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
})
}); });
me.btnEditChart = new Common.UI.Button({ me.btnEditChart = new Common.UI.Button({
@ -1965,6 +2054,18 @@ define([
txtManageRange: 'Name manager', txtManageRange: 'Name manager',
txtPasteRange: 'Paste name', txtPasteRange: 'Paste name',
textInsText: 'Insert text box', 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 || {})); }, SSE.Views.Toolbar || {}));
}); });

2
apps/spreadsheeteditor/main/locale/en.json
View file

@ -300,7 +300,7 @@
"SSE.Views.ChartSettings.textBar": "Bar Chart", "SSE.Views.ChartSettings.textBar": "Bar Chart",
"SSE.Views.ChartSettings.textChartType": "Change Chart Type", "SSE.Views.ChartSettings.textChartType": "Change Chart Type",
"SSE.Views.ChartSettings.textColumn": "Column Chart", "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.textHeight": "Height",
"SSE.Views.ChartSettings.textKeepRatio": "Constant Proportions", "SSE.Views.ChartSettings.textKeepRatio": "Constant Proportions",
"SSE.Views.ChartSettings.textLine": "Line Chart", "SSE.Views.ChartSettings.textLine": "Line Chart",

12
apps/spreadsheeteditor/main/resources/less/rightmenu.less
View file

@ -295,6 +295,18 @@ button:active .btn-change-shape {background-position: -56px -16px;}
background-position: -200px 0; 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{ #table-combo-template .combo-dataview{
.combo-template(60px); .combo-template(60px);
} }