Merge pull request #42 from ONLYOFFICE/feature/sparklines
Feature/sparklines
This commit is contained in:
Alexander Trofimov
GitHub
commit
b49489d2dd
|
|
@ -94,13 +94,8 @@ define([
|
|||
].join('')),
|
||||
|
||||
initialize : function(options) {
|
||||
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
|
||||
|
||||
Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
|
||||
editable: false,
|
||||
store: new Common.UI.BordersStore(),
|
||||
data: [
|
||||
{displayValue: this.txtNoBorders, value: 0, pxValue: 0 },
|
||||
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
|
||||
data = [
|
||||
{displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0},
|
||||
{displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20},
|
||||
{displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40},
|
||||
|
|
@ -108,7 +103,14 @@ define([
|
|||
{displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80},
|
||||
{displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 5, offsety: 100},
|
||||
{displayValue: '6 ' + txtPt, value: 6, pxValue: 6, offsety: 120}
|
||||
],
|
||||
];
|
||||
if (options.allowNoBorders !== false)
|
||||
data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 });
|
||||
|
||||
Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
|
||||
editable: false,
|
||||
store: new Common.UI.BordersStore(),
|
||||
data: data,
|
||||
menuStyle: 'min-width: 150px;'
|
||||
}, options));
|
||||
},
|
||||
|
|
@ -189,13 +191,8 @@ define([
|
|||
|
||||
initialize : function(options) {
|
||||
this.txtNoBorders = options.txtNoBorders || this.txtNoBorders;
|
||||
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
|
||||
|
||||
Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
|
||||
editable: true,
|
||||
store: new Common.UI.BordersStore(),
|
||||
data: [
|
||||
{displayValue: this.txtNoBorders, value: 0, pxValue: 0 },
|
||||
var txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt),
|
||||
data = [
|
||||
{displayValue: '0.5 ' + txtPt, value: 0.5, pxValue: 0.5, offsety: 0},
|
||||
{displayValue: '1 ' + txtPt, value: 1, pxValue: 1, offsety: 20},
|
||||
{displayValue: '1.5 ' + txtPt, value: 1.5, pxValue: 2, offsety: 40},
|
||||
|
|
@ -203,7 +200,15 @@ define([
|
|||
{displayValue: '3 ' + txtPt, value: 3, pxValue: 4, offsety: 80},
|
||||
{displayValue: '4.5 ' + txtPt, value: 4.5, pxValue: 5, offsety: 100},
|
||||
{displayValue: '6 ' + txtPt, value: 6, pxValue: 6, offsety: 120}
|
||||
],
|
||||
];
|
||||
|
||||
if (options.allowNoBorders !== false)
|
||||
data.unshift({displayValue: this.txtNoBorders, value: 0, pxValue: 0 });
|
||||
|
||||
Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
|
||||
editable: true,
|
||||
store: new Common.UI.BordersStore(),
|
||||
data: data,
|
||||
menuStyle: 'min-width: 150px;'
|
||||
}, options));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
updateColors: function(effectcolors, standartcolors) {
|
||||
updateColors: function(effectcolors, standartcolors, value) {
|
||||
if (effectcolors===undefined || standartcolors===undefined) return;
|
||||
|
||||
var me = this,
|
||||
|
|
@ -366,11 +366,14 @@ define([
|
|||
}
|
||||
}
|
||||
|
||||
var selected = $(this.el).find('a.' + this.selectedCls);
|
||||
if (selected.length && selected.hasClass('palette-color-effect')) {
|
||||
this.value = selected[0].className.match(this.colorRe)[1].toUpperCase();
|
||||
if (value)
|
||||
this.select(value, true);
|
||||
else {
|
||||
var selected = $(this.el).find('a.' + this.selectedCls);
|
||||
if (selected.length && selected.hasClass('palette-color-effect')) {
|
||||
this.value = selected[0].className.match(this.colorRe)[1].toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
this.options.updateColorsArr = undefined;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -251,6 +251,10 @@
|
|||
.combo-textart();
|
||||
}
|
||||
|
||||
.combo-spark-style {
|
||||
.combo-textart(58px, 2px);
|
||||
}
|
||||
|
||||
.combo-chart-style {
|
||||
.combo-textart(58px, 2px);
|
||||
|
||||
|
|
|
|||
|
|
@ -674,6 +674,7 @@ define([
|
|||
(new SSE.Views.ChartSettingsDlg(
|
||||
{
|
||||
chartSettings: props,
|
||||
isChart: true,
|
||||
api: me.api,
|
||||
handler: function(result, value) {
|
||||
if (result == 'ok') {
|
||||
|
|
|
|||
|
|
@ -108,21 +108,22 @@ define([
|
|||
|
||||
var SelectedObjects = [],
|
||||
selectType = info.asc_getFlags().asc_getSelectionType(),
|
||||
formatTableInfo = info.asc_getFormatTableInfo();
|
||||
formatTableInfo = info.asc_getFormatTableInfo(),
|
||||
sparkLineInfo = info.asc_getSparklineInfo();
|
||||
|
||||
if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape ||
|
||||
selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) {
|
||||
SelectedObjects = this.api.asc_getGraphicObjectProps();
|
||||
}
|
||||
|
||||
if (SelectedObjects.length<=0 && !formatTableInfo && !this.rightmenu.minimizedMode) {
|
||||
if (SelectedObjects.length<=0 && !formatTableInfo && !sparkLineInfo && !this.rightmenu.minimizedMode) {
|
||||
this.rightmenu.clearSelection();
|
||||
this._openRightMenu = true;
|
||||
}
|
||||
|
||||
var need_disable = info.asc_getLocked();
|
||||
|
||||
this.onFocusObject(SelectedObjects, formatTableInfo, need_disable);
|
||||
this.onFocusObject(SelectedObjects, formatTableInfo, sparkLineInfo, need_disable);
|
||||
|
||||
if (this._state.prevDisabled != need_disable) {
|
||||
this._state.prevDisabled = need_disable;
|
||||
|
|
@ -132,7 +133,7 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
onFocusObject: function(SelectedObjects, formatTableInfo, isCellLocked) {
|
||||
onFocusObject: function(SelectedObjects, formatTableInfo, sparkLineInfo, isCellLocked) {
|
||||
if (!this.editMode)
|
||||
return;
|
||||
|
||||
|
|
@ -176,7 +177,14 @@ define([
|
|||
this._settings[settingsType].locked = isCellLocked;
|
||||
this._settings[settingsType].hidden = 0;
|
||||
}
|
||||
|
||||
|
||||
if (sparkLineInfo) {
|
||||
settingsType = Common.Utils.documentSettingsType.Chart;
|
||||
this._settings[settingsType].props = sparkLineInfo;
|
||||
this._settings[settingsType].locked = isCellLocked;
|
||||
this._settings[settingsType].hidden = 0;
|
||||
}
|
||||
|
||||
var lastactive = -1, currentactive, priorityactive = -1,
|
||||
activePane = this.rightmenu.GetActivePane();
|
||||
for (i=0; i<this._settings.length; ++i) {
|
||||
|
|
@ -246,6 +254,7 @@ define([
|
|||
UpdateThemeColors: function() {
|
||||
this.rightmenu.shapeSettings.UpdateThemeColors();
|
||||
this.rightmenu.textartSettings.UpdateThemeColors();
|
||||
this.rightmenu.chartSettings.UpdateThemeColors();
|
||||
},
|
||||
|
||||
updateMetricUnit: function() {
|
||||
|
|
|
|||
|
|
@ -205,7 +205,8 @@ define([
|
|||
toolbar.btnTextOrient.menu.on('item:click', _.bind(this.onTextOrientationMenu, this));
|
||||
toolbar.btnInsertImage.menu.on('item:click', _.bind(this.onInsertImageMenu, 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.btnInsertText.on('click', _.bind(this.onBtnInsertTextClick, this));
|
||||
toolbar.btnInsertText.menu.on('item:click', _.bind(this.onInsertTextClick, this));
|
||||
|
|
@ -754,6 +755,7 @@ define([
|
|||
(new SSE.Views.ChartSettingsDlg(
|
||||
{
|
||||
chartSettings: props,
|
||||
isChart: true,
|
||||
api: me.api,
|
||||
handler: function(result, value) {
|
||||
if (result == 'ok') {
|
||||
|
|
@ -769,6 +771,47 @@ 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(), type = info.asc_getFlags().asc_getSelectionType();
|
||||
if (type==Asc.c_oAscSelectionType.RangeCells || type==Asc.c_oAscSelectionType.RangeCol ||
|
||||
type==Asc.c_oAscSelectionType.RangeRow || type==Asc.c_oAscSelectionType.RangeMax) {
|
||||
var props;
|
||||
if (me.api){
|
||||
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) {
|
||||
if (this.api)
|
||||
this._addAutoshape(btn.pressed, 'textRect');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<table cols="3">
|
||||
<table cols="3" id="chart-panel-size">
|
||||
<tr>
|
||||
<td colspan=3>
|
||||
<label class="header"><%= scope.textSize %></label>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1">
|
||||
<table cols="1" id="chart-panel-types">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div class="separator horizontal"></div>
|
||||
|
|
@ -47,6 +47,84 @@
|
|||
<button type="button" class="btn btn-text-default" id="chart-btn-select-data" style="min-width: 100px; width: auto; display: block;"><%= scope.textSelectData %></button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="spark-panel-types">
|
||||
<tr>
|
||||
<td>
|
||||
<label class="header"><%= scope.textType %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="spark-button-type" style=""></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="header"><%= scope.textStyle %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label class="input-label" style=""><%= scope.strTemplate %></label>
|
||||
<div class="" id="spark-combo-style" style="width: 100%;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div style="display:inline-block;vertical-align: middle;width:55px;">
|
||||
<label class="input-label" style=""><%= scope.strSparkColor %></label>
|
||||
<div id="spark-color-btn" style=""></div>
|
||||
</div>
|
||||
<div style="display:inline-block;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>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table cols="1" id="spark-panel-points">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<label class="header" style="margin-bottom: 4px;"><%= scope.textShow %></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>
|
||||
</table>
|
||||
<table cols="1">
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div class="separator horizontal"></div>
|
||||
|
|
|
|||
|
|
@ -312,4 +312,113 @@
|
|||
</tr>
|
||||
</table>
|
||||
</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-combo-style" style="width: 190px;"></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>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -61,7 +61,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
{panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData},
|
||||
{panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout},
|
||||
{panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis},
|
||||
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis}
|
||||
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis},
|
||||
{panelId: 'id-spark-settings-dlg-style', panelCaption: this.textTypeData},
|
||||
{panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions}
|
||||
],
|
||||
contentTemplate: _.template(contentTemplate)({
|
||||
scope: this
|
||||
|
|
@ -79,17 +81,21 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
|
||||
|
||||
this._state = {
|
||||
ChartType: Asc.c_oAscChartTypeSettings.barNormal
|
||||
ChartType: Asc.c_oAscChartTypeSettings.barNormal,
|
||||
SparkType: -1
|
||||
};
|
||||
this._noApply = true;
|
||||
this._changedProps = null;
|
||||
|
||||
this.api = this.options.api;
|
||||
this.chartSettings = this.options.chartSettings;
|
||||
this.isChart = this.options.isChart;
|
||||
this.vertAxisProps = null;
|
||||
this.horAxisProps = null;
|
||||
this.currentAxisProps = null;
|
||||
this.dataRangeValid = '';
|
||||
this.currentChartType = this._state.ChartType;
|
||||
this.storageName = (this.isChart) ? 'sse-chart-settings-adv-category' : 'sse-spark-settings-adv-category';
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
|
@ -770,12 +776,231 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
|
||||
this.btnsCategory[2].on('click', _.bind(this.onVCategoryClick, this));
|
||||
this.btnsCategory[3].on('click', _.bind(this.onHCategoryClick, this));
|
||||
|
||||
// Sparklines
|
||||
this.btnSparkType = new Common.UI.Button({
|
||||
cls : 'btn-large-dataview',
|
||||
iconCls : 'item-chartlist spark-column',
|
||||
menu : new Common.UI.Menu({
|
||||
style: 'width: 210px;',
|
||||
additionalAlign: menuAddAlign,
|
||||
items: [
|
||||
{ template: _.template('<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.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'},
|
||||
{ group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'},
|
||||
{ group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'}
|
||||
]),
|
||||
itemTemplate: _.template('<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.cmbSparkStyle = new Common.UI.ComboDataView({
|
||||
itemWidth: 50,
|
||||
itemHeight: 50,
|
||||
menuMaxHeight: 272,
|
||||
enableKeyEvents: true,
|
||||
cls: 'combo-spark-style'
|
||||
});
|
||||
this.cmbSparkStyle.render($('#spark-dlg-combo-style'));
|
||||
this.cmbSparkStyle.openButton.menu.cmpEl.css({
|
||||
'min-width': 178,
|
||||
'max-width': 178
|
||||
});
|
||||
this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this));
|
||||
this.cmbSparkStyle.openButton.menu.on('show:after', function () {
|
||||
me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||
});
|
||||
|
||||
this.radioGroup = new Common.UI.RadioBox({
|
||||
el: $('#spark-dlg-radio-group'),
|
||||
labelText: this.textGroup,
|
||||
name: 'asc-radio-sparkline',
|
||||
checked: true
|
||||
});
|
||||
|
||||
this.radioSingle = new Common.UI.RadioBox({
|
||||
el: $('#spark-dlg-radio-single'),
|
||||
labelText: this.textSingle,
|
||||
name: 'asc-radio-sparkline'
|
||||
});
|
||||
|
||||
this.txtSparkDataRange = new Common.UI.InputField({
|
||||
el : $('#spark-dlg-txt-range'),
|
||||
name : 'range',
|
||||
style : 'width: 100%;',
|
||||
allowBlank : true,
|
||||
blankError : this.txtEmpty,
|
||||
validateOnChange: true
|
||||
});
|
||||
|
||||
this.btnSelectSparkData = new Common.UI.Button({
|
||||
el: $('#spark-dlg-btn-data')
|
||||
});
|
||||
// this.btnSelectSparkData.on('click', _.bind(this.onSelectData, this));
|
||||
|
||||
this.txtSparkDataLocation = new Common.UI.InputField({
|
||||
el : $('#spark-dlg-txt-location'),
|
||||
name : 'range',
|
||||
style : 'width: 100%;',
|
||||
allowBlank : true,
|
||||
blankError : this.txtEmpty,
|
||||
validateOnChange: true
|
||||
});
|
||||
|
||||
this.btnSelectLocationData = new Common.UI.Button({
|
||||
el: $('#spark-dlg-btn-data')
|
||||
});
|
||||
// this.btnSelectLocationData.on('click', _.bind(this.onSelectData, this));
|
||||
|
||||
this._arrEmptyCells = [
|
||||
{ value: Asc.c_oAscEDispBlanksAs.Gap, displayValue: this.textGaps },
|
||||
{ value: Asc.c_oAscEDispBlanksAs.Zero, displayValue: this.textZero },
|
||||
{ value: Asc.c_oAscEDispBlanksAs.Span, displayValue: this.textEmptyLine }
|
||||
];
|
||||
this.cmbEmptyCells = new Common.UI.ComboBox({
|
||||
el : $('#spark-dlg-combo-empty'),
|
||||
menuStyle : 'min-width: 188px;',
|
||||
editable : false,
|
||||
cls : 'input-group-nr'
|
||||
});
|
||||
this.cmbEmptyCells.on('selected', _.bind(function(combo, record){
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setDisplayEmpty(record.value);
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.chShowEmpty = new Common.UI.CheckBox({
|
||||
el: $('#spark-dlg-check-show-data'),
|
||||
labelText: this.textShowData
|
||||
});
|
||||
this.chShowEmpty.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setDisplayHidden(field.getValue()=='checked');
|
||||
}
|
||||
}, this));
|
||||
|
||||
// Sparkline axis
|
||||
|
||||
this.chShowAxis = new Common.UI.CheckBox({
|
||||
el: $('#spark-dlg-check-show'),
|
||||
labelText: this.textShowSparkAxis
|
||||
});
|
||||
this.chShowAxis.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setDisplayXAxis(field.getValue()=='checked');
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.chReverse = new Common.UI.CheckBox({
|
||||
el: $('#spark-dlg-check-reverse'),
|
||||
labelText: this.textReverseOrder
|
||||
});
|
||||
this.chReverse.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setRightToLeft(field.getValue()=='checked');
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.cmbSparkMinType = new Common.UI.ComboBox({
|
||||
el : $('#spark-dlg-combo-mintype'),
|
||||
cls : 'input-group-nr',
|
||||
menuStyle : 'min-width: 100px;',
|
||||
editable : false,
|
||||
data : [
|
||||
{displayValue: this.textAutoEach, value: Asc.c_oAscSparklineAxisMinMax.Individual},
|
||||
{displayValue: this.textSameAll, value: Asc.c_oAscSparklineAxisMinMax.Group},
|
||||
{displayValue: this.textFixed, value: Asc.c_oAscSparklineAxisMinMax.Custom}
|
||||
]
|
||||
}).on('selected', _.bind(function(combo, record) {
|
||||
this.spnSparkMinValue.setDisabled(record.value!==Asc.c_oAscSparklineAxisMinMax.Custom);
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setMinAxisType(record.value);
|
||||
}
|
||||
if (record.value==Asc.c_oAscSparklineAxisMinMax.Custom && _.isEmpty(this.spnSparkMinValue.getValue()))
|
||||
this.spnSparkMinValue.setValue(0);
|
||||
}, this));
|
||||
|
||||
this.spnSparkMinValue = new Common.UI.MetricSpinner({
|
||||
el : $('#spark-dlg-input-min-value'),
|
||||
maxValue : 1000000,
|
||||
minValue : -1000000,
|
||||
step : 0.1,
|
||||
defaultUnit : "",
|
||||
defaultValue : 0,
|
||||
value : ''
|
||||
}).on('change', _.bind(function(field, newValue, oldValue) {
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setManualMin(field.getNumberValue());
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.cmbSparkMaxType = new Common.UI.ComboBox({
|
||||
el : $('#spark-dlg-combo-maxtype'),
|
||||
cls : 'input-group-nr',
|
||||
menuStyle : 'min-width: 100px;',
|
||||
editable : false,
|
||||
data : [
|
||||
{displayValue: this.textAutoEach, value: Asc.c_oAscSparklineAxisMinMax.Individual},
|
||||
{displayValue: this.textSameAll, value: Asc.c_oAscSparklineAxisMinMax.Group},
|
||||
{displayValue: this.textFixed, value: Asc.c_oAscSparklineAxisMinMax.Custom}
|
||||
]
|
||||
}).on('selected', _.bind(function(combo, record) {
|
||||
this.spnSparkMaxValue.setDisabled(record.value!==Asc.c_oAscSparklineAxisMinMax.Custom);
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setMaxAxisType(record.value);
|
||||
}
|
||||
if (record.value==Asc.c_oAscSparklineAxisMinMax.Custom && _.isEmpty(this.spnSparkMaxValue.getValue()))
|
||||
this.spnSparkMaxValue.setValue(0);
|
||||
}, this));
|
||||
|
||||
this.spnSparkMaxValue = new Common.UI.MetricSpinner({
|
||||
el : $('#spark-dlg-input-max-value'),
|
||||
maxValue : 1000000,
|
||||
minValue : -1000000,
|
||||
step : 0.1,
|
||||
defaultUnit : "",
|
||||
defaultValue : 0,
|
||||
value : ''
|
||||
}).on('change', _.bind(function(field, newValue, oldValue) {
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setManualMax(field.getNumberValue());
|
||||
}
|
||||
}, this));
|
||||
|
||||
this.afterRender();
|
||||
},
|
||||
|
||||
|
||||
afterRender: function() {
|
||||
this._setDefaults(this.chartSettings);
|
||||
|
||||
this.setTitle((this.isChart) ? this.textTitle : this.textTitleSparkline);
|
||||
|
||||
if (this.isChart) {
|
||||
this.btnsCategory[4].setVisible(false);
|
||||
this.btnsCategory[5].setVisible(false);
|
||||
} else {
|
||||
this.btnsCategory[0].setVisible(false);
|
||||
this.btnsCategory[1].setVisible(false);
|
||||
this.btnsCategory[2].setVisible(false);
|
||||
this.btnsCategory[3].setVisible(false);
|
||||
}
|
||||
|
||||
if (this.storageName) {
|
||||
var value = Common.localStorage.getItem(this.storageName);
|
||||
this.setActiveCategory((value!==null) ? parseInt(value) : 0);
|
||||
|
|
@ -985,64 +1210,170 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
this.currentAxisProps = props;
|
||||
},
|
||||
|
||||
updateSparkStyles: function(styles) {
|
||||
if (styles && styles.length>1){
|
||||
var picker = this.cmbSparkStyle.menuPicker,
|
||||
stylesStore = picker.store;
|
||||
if (stylesStore.length == styles.length-1) {
|
||||
var data = stylesStore.models;
|
||||
for (var i=0; i<styles.length-1; i++) {
|
||||
data[i].set('imageUrl', styles[i]);
|
||||
}
|
||||
} else {
|
||||
var stylearray = [],
|
||||
selectedIdx = styles[styles.length-1];
|
||||
for (var i=0; i<styles.length-1; i++) {
|
||||
stylearray.push({
|
||||
imageUrl: styles[i],
|
||||
data : i
|
||||
});
|
||||
}
|
||||
stylesStore.reset(stylearray, {silent: false});
|
||||
this.cmbSparkStyle.fillComboView(stylesStore.at(selectedIdx<0 ? 0 : selectedIdx), selectedIdx>-1);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onSelectSparkType: function(btn, picker, itemView, record) {
|
||||
if (this._noApply) return;
|
||||
|
||||
var rawData = {},
|
||||
isPickerSelect = _.isFunction(record.toJSON);
|
||||
|
||||
if (isPickerSelect){
|
||||
if (record.get('selected')) {
|
||||
rawData = record.toJSON();
|
||||
} else {
|
||||
// record deselected
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
rawData = record;
|
||||
}
|
||||
|
||||
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setType(rawData.type);
|
||||
}
|
||||
this.chartSettings.asc_setType(rawData.type);
|
||||
this._state.SparkType = rawData.type;
|
||||
|
||||
var changed = false,
|
||||
value = this.cmbEmptyCells.getValue();
|
||||
if (rawData.type !== Asc.c_oAscSparklineType.Line && this._arrEmptyCells.length>2) {
|
||||
if (value == Asc.c_oAscEDispBlanksAs.Span)
|
||||
value = Asc.c_oAscEDispBlanksAs.Gap;
|
||||
this._arrEmptyCells.pop();
|
||||
changed = true;
|
||||
} else if (rawData.type == Asc.c_oAscSparklineType.Line && this._arrEmptyCells.length<3) {
|
||||
this._arrEmptyCells.push({ value: Asc.c_oAscEDispBlanksAs.Span, displayValue: this.textEmptyLine });
|
||||
changed = true;
|
||||
}
|
||||
if (changed) {
|
||||
this.cmbEmptyCells.setData(this._arrEmptyCells);
|
||||
this.cmbEmptyCells.setValue(value);
|
||||
if (this._changedProps)
|
||||
this._changedProps.asc_setDisplayEmpty(value);
|
||||
}
|
||||
|
||||
this.updateSparkStyles(this.chartSettings.asc_getStyles());
|
||||
},
|
||||
|
||||
|
||||
onSelectSparkStyle: function(combo, record) {
|
||||
if (this._noApply) return;
|
||||
|
||||
if (this._changedProps) {
|
||||
this._changedProps.asc_setStyle(record.get('data'));
|
||||
}
|
||||
},
|
||||
|
||||
_setDefaults: function(props) {
|
||||
var me = this;
|
||||
if (props ){
|
||||
this.chartSettings = props;
|
||||
if (this.isChart) {
|
||||
this._state.ChartType = props.getType();
|
||||
|
||||
this._state.ChartType = props.getType();
|
||||
this._noApply = true;
|
||||
|
||||
this._noApply = true;
|
||||
// Layout
|
||||
|
||||
// Layout
|
||||
|
||||
var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType});
|
||||
this.mnuChartTypePicker.selectRecord(record, true);
|
||||
if (record) {
|
||||
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
|
||||
}
|
||||
|
||||
this._noApply = false;
|
||||
|
||||
var value = props.getRange();
|
||||
this.txtDataRange.setValue((value) ? value : '');
|
||||
this.dataRangeValid = value;
|
||||
|
||||
this.txtDataRange.validation = function(value) {
|
||||
if (_.isEmpty(value)) {
|
||||
if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true);
|
||||
return true;
|
||||
var record = this.mnuChartTypePicker.store.findWhere({type: this._state.ChartType});
|
||||
this.mnuChartTypePicker.selectRecord(record, true);
|
||||
if (record) {
|
||||
this.btnChartType.setIconCls('item-chartlist ' + record.get('iconCls'));
|
||||
}
|
||||
|
||||
if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false);
|
||||
this._noApply = false;
|
||||
|
||||
var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false);
|
||||
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true;
|
||||
};
|
||||
var value = props.getRange();
|
||||
this.txtDataRange.setValue((value) ? value : '');
|
||||
this.dataRangeValid = value;
|
||||
|
||||
this.cmbDataDirect.setDisabled(value===null);
|
||||
this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0);
|
||||
this.txtDataRange.validation = function(value) {
|
||||
if (_.isEmpty(value)) {
|
||||
if (!me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(true);
|
||||
return true;
|
||||
}
|
||||
|
||||
this.cmbChartTitle.setValue(props.getTitle());
|
||||
this.cmbLegendPos.setValue(props.getLegendPos());
|
||||
if (me.cmbDataDirect.isDisabled()) me.cmbDataDirect.setDisabled(false);
|
||||
|
||||
this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos());
|
||||
var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, false);
|
||||
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true;
|
||||
};
|
||||
|
||||
this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true);
|
||||
this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true);
|
||||
this.chValue.setValue(this.chartSettings.getShowVal(), true);
|
||||
this.cmbDataDirect.setDisabled(value===null);
|
||||
this.cmbDataDirect.setValue(props.getInColumns() ? 1 : 0);
|
||||
|
||||
value = props.getSeparator();
|
||||
this.txtSeparator.setValue((value) ? value : '');
|
||||
this.cmbChartTitle.setValue(props.getTitle());
|
||||
this.cmbLegendPos.setValue(props.getLegendPos());
|
||||
|
||||
// Vertical Axis
|
||||
this.vertAxisProps = props.getVertAxisProps();
|
||||
this.updateDataLabels(this._state.ChartType, props.getDataLabelsPos());
|
||||
|
||||
// Horizontal Axis
|
||||
this.horAxisProps = props.getHorAxisProps();
|
||||
this.chSeriesName.setValue(this.chartSettings.getShowSerName(), true);
|
||||
this.chCategoryName.setValue(this.chartSettings.getShowCatName(), true);
|
||||
this.chValue.setValue(this.chartSettings.getShowVal(), true);
|
||||
|
||||
this.updateAxisProps(this._state.ChartType);
|
||||
this.currentChartType = this._state.ChartType;
|
||||
value = props.getSeparator();
|
||||
this.txtSeparator.setValue((value) ? value : '');
|
||||
|
||||
// Vertical Axis
|
||||
this.vertAxisProps = props.getVertAxisProps();
|
||||
|
||||
// Horizontal Axis
|
||||
this.horAxisProps = props.getHorAxisProps();
|
||||
|
||||
this.updateAxisProps(this._state.ChartType);
|
||||
this.currentChartType = this._state.ChartType;
|
||||
} else { // sparkline
|
||||
this._state.SparkType = props.asc_getType();
|
||||
var record = this.mnuSparkTypePicker.store.findWhere({type: this._state.SparkType});
|
||||
this.mnuSparkTypePicker.selectRecord(record, true);
|
||||
if (record)
|
||||
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
|
||||
|
||||
this.updateSparkStyles(props.asc_getStyles());
|
||||
|
||||
if (this._state.SparkType !== Asc.c_oAscSparklineType.Line)
|
||||
this._arrEmptyCells.pop();
|
||||
this.cmbEmptyCells.setData(this._arrEmptyCells);
|
||||
this.cmbEmptyCells.setValue(props.asc_getDisplayEmpty());
|
||||
|
||||
this.chShowEmpty.setValue(props.asc_getDisplayHidden(), true);
|
||||
this.chShowAxis.setValue(props.asc_getDisplayXAxis(), true);
|
||||
this.chReverse.setValue(props.asc_getRightToLeft(), true);
|
||||
|
||||
this.cmbSparkMinType.setValue(props.asc_getMinAxisType(), true);
|
||||
this.cmbSparkMaxType.setValue(props.asc_getMaxAxisType(), true);
|
||||
this.spnSparkMinValue.setDisabled(props.asc_getMinAxisType()!==Asc.c_oAscSparklineAxisMinMax.Custom);
|
||||
this.spnSparkMaxValue.setDisabled(props.asc_getMaxAxisType()!==Asc.c_oAscSparklineAxisMinMax.Custom);
|
||||
this.spnSparkMinValue.setValue((props.asc_getManualMin() !== null) ? props.asc_getManualMin() : '', true);
|
||||
this.spnSparkMaxValue.setValue((props.asc_getManualMax() !== null) ? props.asc_getManualMax() : '', true);
|
||||
|
||||
this._changedProps = new Asc.sparklineGroup();
|
||||
this._noApply = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1050,67 +1381,72 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
var value,
|
||||
type = this.mnuChartTypePicker.getSelectedRec()[0].get('type');
|
||||
|
||||
// Layout
|
||||
if (this.isChart) {
|
||||
this.chartSettings.putType(type);
|
||||
|
||||
this.chartSettings.putType(type);
|
||||
this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1);
|
||||
this.chartSettings.putRange(this.txtDataRange.getValue());
|
||||
|
||||
this.chartSettings.putInColumns(this.cmbDataDirect.getValue()==1);
|
||||
this.chartSettings.putRange(this.txtDataRange.getValue());
|
||||
this.chartSettings.putTitle(this.cmbChartTitle.getValue());
|
||||
this.chartSettings.putLegendPos(this.cmbLegendPos.getValue());
|
||||
|
||||
this.chartSettings.putTitle(this.cmbChartTitle.getValue());
|
||||
this.chartSettings.putLegendPos(this.cmbLegendPos.getValue());
|
||||
this.chartSettings.putShowHorAxis(this.cmbHorShow.getValue());
|
||||
this.chartSettings.putShowVerAxis(this.cmbVertShow.getValue());
|
||||
|
||||
this.chartSettings.putShowHorAxis(this.cmbHorShow.getValue());
|
||||
this.chartSettings.putShowVerAxis(this.cmbVertShow.getValue());
|
||||
this.chartSettings.putHorAxisLabel(this.cmbHorTitle.getValue());
|
||||
this.chartSettings.putVertAxisLabel(this.cmbVertTitle.getValue());
|
||||
|
||||
this.chartSettings.putHorAxisLabel(this.cmbHorTitle.getValue());
|
||||
this.chartSettings.putVertAxisLabel(this.cmbVertTitle.getValue());
|
||||
this.chartSettings.putHorGridLines(this.cmbHorGrid.getValue());
|
||||
this.chartSettings.putVertGridLines(this.cmbVertGrid.getValue());
|
||||
|
||||
this.chartSettings.putHorGridLines(this.cmbHorGrid.getValue());
|
||||
this.chartSettings.putVertGridLines(this.cmbVertGrid.getValue());
|
||||
this.chartSettings.putDataLabelsPos(this.cmbDataLabels.getValue());
|
||||
|
||||
this.chartSettings.putDataLabelsPos(this.cmbDataLabels.getValue());
|
||||
this.chartSettings.putShowSerName(this.chSeriesName.getValue()=='checked');
|
||||
this.chartSettings.putShowCatName(this.chCategoryName.getValue()=='checked');
|
||||
this.chartSettings.putShowVal(this.chValue.getValue()=='checked');
|
||||
|
||||
this.chartSettings.putShowSerName(this.chSeriesName.getValue()=='checked');
|
||||
this.chartSettings.putShowCatName(this.chCategoryName.getValue()=='checked');
|
||||
this.chartSettings.putShowVal(this.chValue.getValue()=='checked');
|
||||
this.chartSettings.putSeparator(_.isEmpty(this.txtSeparator.getValue()) ? ' ' : this.txtSeparator.getValue());
|
||||
|
||||
this.chartSettings.putSeparator(_.isEmpty(this.txtSeparator.getValue()) ? ' ' : this.txtSeparator.getValue());
|
||||
this.chartSettings.putShowMarker(this.chMarkers.getValue()=='checked');
|
||||
|
||||
this.chartSettings.putShowMarker(this.chMarkers.getValue()=='checked');
|
||||
value = (type == Asc.c_oAscChartTypeSettings.lineNormal || type == Asc.c_oAscChartTypeSettings.lineStacked ||
|
||||
type == Asc.c_oAscChartTypeSettings.lineStackedPer || type == Asc.c_oAscChartTypeSettings.scatter);
|
||||
if (value) {
|
||||
value = this.cmbLines.getValue();
|
||||
this.chartSettings.putLine(value!==0);
|
||||
if (value>0)
|
||||
this.chartSettings.putSmooth(value==2);
|
||||
}
|
||||
|
||||
value = (type == Asc.c_oAscChartTypeSettings.lineNormal || type == Asc.c_oAscChartTypeSettings.lineStacked ||
|
||||
type == Asc.c_oAscChartTypeSettings.lineStackedPer || type == Asc.c_oAscChartTypeSettings.scatter);
|
||||
if (value) {
|
||||
value = this.cmbLines.getValue();
|
||||
this.chartSettings.putLine(value!==0);
|
||||
if (value>0)
|
||||
this.chartSettings.putSmooth(value==2);
|
||||
this.chartSettings.putVertAxisProps(this.vertAxisProps);
|
||||
this.chartSettings.putHorAxisProps(this.horAxisProps);
|
||||
|
||||
return { chartSettings: this.chartSettings };
|
||||
} else {
|
||||
return { chartSettings: this._changedProps };
|
||||
}
|
||||
|
||||
this.chartSettings.putVertAxisProps(this.vertAxisProps);
|
||||
this.chartSettings.putHorAxisProps(this.horAxisProps);
|
||||
|
||||
return { chartSettings: this.chartSettings };
|
||||
},
|
||||
|
||||
isRangeValid: function() {
|
||||
var isvalid;
|
||||
if (!_.isEmpty(this.txtDataRange.getValue())) {
|
||||
isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, this.mnuChartTypePicker.getSelectedRec()[0].get('type'));
|
||||
if (isvalid == Asc.c_oAscError.ID.No)
|
||||
return true;
|
||||
} else
|
||||
this.txtDataRange.showError([this.txtEmpty]);
|
||||
if (this.isChart) {
|
||||
var isvalid;
|
||||
if (!_.isEmpty(this.txtDataRange.getValue())) {
|
||||
isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, this.mnuChartTypePicker.getSelectedRec()[0].get('type'));
|
||||
if (isvalid == Asc.c_oAscError.ID.No)
|
||||
return true;
|
||||
} else
|
||||
this.txtDataRange.showError([this.txtEmpty]);
|
||||
|
||||
this.setActiveCategory(0);
|
||||
if (isvalid == Asc.c_oAscError.ID.StockChartError) {
|
||||
Common.UI.warning({msg: this.errorStockChart});
|
||||
} else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) {
|
||||
Common.UI.warning({msg: this.errorMaxRows});
|
||||
this.setActiveCategory(0);
|
||||
if (isvalid == Asc.c_oAscError.ID.StockChartError) {
|
||||
Common.UI.warning({msg: this.errorStockChart});
|
||||
} else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) {
|
||||
Common.UI.warning({msg: this.errorMaxRows});
|
||||
} else
|
||||
this.txtDataRange.cmpEl.find('input').focus();
|
||||
return false;
|
||||
} else
|
||||
this.txtDataRange.cmpEl.find('input').focus();
|
||||
return false;
|
||||
return true;
|
||||
},
|
||||
|
||||
onSelectData: function() {
|
||||
|
|
@ -1277,6 +1613,24 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
|
|||
textRight: 'Right',
|
||||
textTop: 'Top',
|
||||
textBottom: 'Bottom',
|
||||
textFit: 'Fit Width'
|
||||
textFit: 'Fit Width',
|
||||
textSparkRanges: 'Sparkline Ranges',
|
||||
textLocationRange: 'Location Range',
|
||||
textEmptyCells: 'Hidden and Empty cells',
|
||||
textShowEmptyCells: 'Show empty cells as',
|
||||
textShowData: 'Show data in hidden rows and columns',
|
||||
textGroup: 'Group Sparkline',
|
||||
textSingle: 'Single Sparkline',
|
||||
textGaps: 'Gaps',
|
||||
textZero: 'Zero',
|
||||
textEmptyLine: 'Connect data points with line',
|
||||
textLineSpark: 'Line',
|
||||
textColumnSpark: 'Column',
|
||||
textWinLossSpark: 'Win/Loss',
|
||||
textShowSparkAxis: 'Show Axis',
|
||||
textReverseOrder: 'Reverse order',
|
||||
textAutoEach: 'Auto for Each',
|
||||
textSameAll: 'Same for All',
|
||||
textTitleSparkline: 'Sparkline - Advanced Settings'
|
||||
}, SSE.Views.ChartSettingsDlg || {}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -503,7 +503,33 @@ define([
|
|||
id : 'id-toolbar-btn-insertchart',
|
||||
cls : 'btn-toolbar',
|
||||
iconCls : 'btn-insertchart',
|
||||
lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth]
|
||||
lock : [_set.editCell, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth],
|
||||
menu : new Common.UI.Menu({
|
||||
items : [
|
||||
this.mnuInsertChart = new Common.UI.MenuItem({
|
||||
caption: this.textInsCharts,
|
||||
value: 'chart',
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'tl-tr',
|
||||
style: 'width: 560px;',
|
||||
items: [
|
||||
{ template: _.template('<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>') }
|
||||
]
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
me.btnEditChart = new Common.UI.Button({
|
||||
|
|
@ -1685,6 +1711,68 @@ define([
|
|||
}
|
||||
]
|
||||
}));
|
||||
|
||||
this.mnuInsertChartPicker = new Common.UI.DataView({
|
||||
el: $('#id-toolbar-menu-insertchart'),
|
||||
parentMenu: this.mnuInsertChart.menu,
|
||||
showLast: false,
|
||||
restoreHeight: 411,
|
||||
groups: new Common.UI.DataViewGroupStore([
|
||||
{ id: 'menu-chart-group-bar', caption: this.textColumn },
|
||||
{ id: 'menu-chart-group-line', caption: this.textLine },
|
||||
{ id: 'menu-chart-group-pie', caption: this.textPie },
|
||||
{ id: 'menu-chart-group-hbar', caption: this.textBar },
|
||||
{ id: 'menu-chart-group-area', caption: this.textArea },
|
||||
{ id: 'menu-chart-group-scatter', caption: this.textPoint },
|
||||
{ id: 'menu-chart-group-stock', caption: this.textStock }
|
||||
]),
|
||||
store: new Common.UI.DataViewStore([
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, allowSelected: true, iconCls: 'column-normal', selected: true},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, allowSelected: true, iconCls: 'column-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, allowSelected: true, iconCls: 'column-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, allowSelected: true, iconCls: 'column-3d-normal'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, allowSelected: true, iconCls: 'column-3d-stack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, allowSelected: true, iconCls: 'column-3d-pstack'},
|
||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, allowSelected: true, iconCls: 'column-3d-normal-per'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, allowSelected: true, iconCls: 'line-normal'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, allowSelected: true, iconCls: 'line-stack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, allowSelected: true, iconCls: 'line-pstack'},
|
||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, allowSelected: true, iconCls: 'line-3d'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, allowSelected: true, iconCls: 'pie-normal'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, allowSelected: true, iconCls: 'pie-doughnut'},
|
||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, allowSelected: true, iconCls: 'pie-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, allowSelected: true, iconCls: 'bar-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, allowSelected: true, iconCls: 'bar-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, allowSelected: true, iconCls: 'bar-pstack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, allowSelected: true, iconCls: 'bar-3d-normal'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, allowSelected: true, iconCls: 'bar-3d-stack'},
|
||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, allowSelected: true, iconCls: 'bar-3d-pstack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, allowSelected: true, iconCls: 'area-normal'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, allowSelected: true, iconCls: 'area-stack'},
|
||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, allowSelected: true, iconCls: 'area-pstack'},
|
||||
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, allowSelected: true, iconCls: 'point-normal'},
|
||||
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, allowSelected: true, iconCls: 'stock-normal'}
|
||||
]),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||
});
|
||||
this.mnuInsertSparkPicker = new Common.UI.DataView({
|
||||
el: $('#id-toolbar-menu-insertspark'),
|
||||
parentMenu: this.mnuInsertSparkline.menu,
|
||||
showLast: false,
|
||||
restoreHeight: 200,
|
||||
allowScrollbar: false,
|
||||
groups: new Common.UI.DataViewGroupStore([
|
||||
{ id: 'menu-chart-group-sparkcolumn', caption: this.textColumnSpark },
|
||||
{ id: 'menu-chart-group-sparkline', caption: this.textLineSpark },
|
||||
{ id: 'menu-chart-group-sparkwin', caption: this.textWinLossSpark }
|
||||
]),
|
||||
store: new Common.UI.DataViewStore([
|
||||
{ group: 'menu-chart-group-sparkcolumn', type: Asc.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'},
|
||||
{ group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'},
|
||||
{ group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'}
|
||||
]),
|
||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||
})
|
||||
},
|
||||
|
||||
setApi: function(api) {
|
||||
|
|
@ -2031,6 +2119,18 @@ define([
|
|||
txtPasteRange: 'Paste name',
|
||||
textInsText: 'Insert text box',
|
||||
textInsTextArt: 'Insert Text Art',
|
||||
textInsCharts: 'Charts',
|
||||
textLine: 'Line Chart',
|
||||
textColumn: 'Column Chart',
|
||||
textBar: 'Bar Chart',
|
||||
textArea: 'Area Chart',
|
||||
textPie: 'Pie Chart',
|
||||
textPoint: 'Point Chart',
|
||||
textStock: 'Stock Chart',
|
||||
textInsSparklines: 'Sparklines',
|
||||
textLineSpark: 'Line',
|
||||
textColumnSpark: 'Column',
|
||||
textWinLossSpark: 'Win/Loss',
|
||||
tipInsertEquation: 'Insert Equation'
|
||||
}, SSE.Views.Toolbar || {}));
|
||||
});
|
||||
|
|
@ -719,7 +719,7 @@
|
|||
"SSE.Views.ChartSettings.textBar": "Bar Chart",
|
||||
"SSE.Views.ChartSettings.textChartType": "Change Chart Type",
|
||||
"SSE.Views.ChartSettings.textColumn": "Column Chart",
|
||||
"SSE.Views.ChartSettings.textEditData": "Edit Data",
|
||||
"SSE.Views.ChartSettings.textEditData": "Edit Data and Location",
|
||||
"SSE.Views.ChartSettings.textHeight": "Height",
|
||||
"SSE.Views.ChartSettings.textKeepRatio": "Constant Proportions",
|
||||
"SSE.Views.ChartSettings.textLine": "Line Chart",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
|
@ -295,6 +295,18 @@ button:active:not(.disabled) .btn-change-shape {background-position: -56px -
|
|||
background-position: -200px 0;
|
||||
}
|
||||
|
||||
.spark-line{
|
||||
background-position: 0px -250px;
|
||||
}
|
||||
|
||||
.spark-column{
|
||||
background-position: -50px -250px;
|
||||
}
|
||||
|
||||
.spark-win{
|
||||
background-position: -100px -250px;
|
||||
}
|
||||
|
||||
#table-combo-template .combo-dataview{
|
||||
.combo-template(60px);
|
||||
}
|
||||
Loading…
Reference in a new issue