Added sparkline settings.
This commit is contained in:
Julia Radzhabova
parent
7d4ce1c7a2
commit
5924e4ff82
|
|
@ -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));
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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([
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (value)
|
||||||
|
this.select(value, true);
|
||||||
|
else {
|
||||||
var selected = $(this.el).find('a.' + this.selectedCls);
|
var selected = $(this.el).find('a.' + this.selectedCls);
|
||||||
if (selected.length && selected.hasClass('palette-color-effect')) {
|
if (selected.length && selected.hasClass('palette-color-effect')) {
|
||||||
this.value = selected[0].className.match(this.colorRe)[1].toUpperCase();
|
this.value = selected[0].className.match(this.colorRe)[1].toUpperCase();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
this.options.updateColorsArr = undefined;
|
this.options.updateColorsArr = undefined;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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') {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
@ -177,6 +178,13 @@ define([
|
||||||
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() {
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -317,3 +317,112 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
||||||
|
|
@ -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,10 +366,13 @@ 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){
|
||||||
|
if (props.asc_getChartProperties && props.asc_getChartProperties()) { // chart
|
||||||
this._originalProps = new Asc.asc_CImgProperty(props);
|
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();
|
||||||
|
|
@ -321,6 +443,9 @@ define([
|
||||||
this.btnRatio.toggle(value);
|
this.btnRatio.toggle(value);
|
||||||
this._state.keepRatio=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 || {}));
|
||||||
});
|
});
|
||||||
|
|
@ -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,11 +1297,34 @@ 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;
|
||||||
|
|
@ -1141,6 +1387,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
||||||
|
|
||||||
this.updateAxisProps(this._state.ChartType);
|
this.updateAxisProps(this._state.ChartType);
|
||||||
this.currentChartType = 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 || {}));
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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 || {}));
|
||||||
});
|
});
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue