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

Merge pull request #42 from ONLYOFFICE/feature/sparklines

Browse source 
Feature/sparklines
This commit is contained in:
Alexander Trofimov 2016-11-18 18:40:18 +03:00 committed by GitHub
parent 503f4a0e73 73b4eb87a4
commit b49489d2dd
15 changed files with 1674 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,13 +94,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 +103,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 !== 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;' menuStyle: 'min-width: 150px;'
}, options)); }, options));
}, },
@ -189,13 +191,8 @@ define([
initialize : function(options) { initialize : function(options) {
this.txtNoBorders = options.txtNoBorders || this.txtNoBorders; this.txtNoBorders = options.txtNoBorders || this.txtNoBorders;
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: true,
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},
@ -203,7 +200,15 @@ 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 !== 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;' menuStyle: 'min-width: 150px;'
}, options)); }, options));
}, },

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

@ -309,7 +309,7 @@ define([
} }
}, },
updateColors: function(effectcolors, standartcolors) { updateColors: function(effectcolors, standartcolors, value) {
if (effectcolors===undefined || standartcolors===undefined) return; if (effectcolors===undefined || standartcolors===undefined) return;
var me = this, var me = this,
@ -366,11 +366,14 @@ define([
} }
} }
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;
}, },

4
apps/common/main/resources/less/combo-dataview.less
View file

@ -251,6 +251,10 @@
.combo-textart(); .combo-textart();
} }
.combo-spark-style {
.combo-textart(58px, 2px);
}
.combo-chart-style { .combo-chart-style {
.combo-textart(58px, 2px); .combo-textart(58px, 2px);

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

@ -674,6 +674,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') {

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

@ -108,21 +108,22 @@ define([
var SelectedObjects = [], var SelectedObjects = [],
selectType = info.asc_getFlags().asc_getSelectionType(), selectType = info.asc_getFlags().asc_getSelectionType(),
formatTableInfo = info.asc_getFormatTableInfo(); formatTableInfo = info.asc_getFormatTableInfo(),
sparkLineInfo = info.asc_getSparklineInfo();
if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape || if (selectType == Asc.c_oAscSelectionType.RangeImage || selectType == Asc.c_oAscSelectionType.RangeShape ||
selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) { selectType == Asc.c_oAscSelectionType.RangeChart || selectType == Asc.c_oAscSelectionType.RangeChartText || selectType == Asc.c_oAscSelectionType.RangeShapeText) {
SelectedObjects = this.api.asc_getGraphicObjectProps(); SelectedObjects = this.api.asc_getGraphicObjectProps();
} }
if (SelectedObjects.length<=0 && !formatTableInfo && !this.rightmenu.minimizedMode) { if (SelectedObjects.length<=0 && !formatTableInfo && !sparkLineInfo && !this.rightmenu.minimizedMode) {
this.rightmenu.clearSelection(); this.rightmenu.clearSelection();
this._openRightMenu = true; this._openRightMenu = true;
} }
var need_disable = info.asc_getLocked(); var need_disable = info.asc_getLocked();
this.onFocusObject(SelectedObjects, formatTableInfo, need_disable); this.onFocusObject(SelectedObjects, formatTableInfo, sparkLineInfo, need_disable);
if (this._state.prevDisabled != need_disable) { if (this._state.prevDisabled != need_disable) {
this._state.prevDisabled = need_disable; this._state.prevDisabled = need_disable;
@ -132,7 +133,7 @@ define([
} }
}, },
onFocusObject: function(SelectedObjects, formatTableInfo, isCellLocked) { onFocusObject: function(SelectedObjects, formatTableInfo, sparkLineInfo, isCellLocked) {
if (!this.editMode) if (!this.editMode)
return; return;
@ -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,
activePane = this.rightmenu.GetActivePane(); activePane = this.rightmenu.GetActivePane();
for (i=0; i<this._settings.length; ++i) { for (i=0; i<this._settings.length; ++i) {
@ -246,6 +254,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() {

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

@ -205,7 +205,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));
@ -754,6 +755,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') {
@ -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) { onBtnInsertTextClick: function(btn, e) {
if (this.api) if (this.api)
this._addAutoshape(btn.pressed, 'textRect'); this._addAutoshape(btn.pressed, 'textRect');

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

@ -1,4 +1,4 @@
<table cols="3"> <table cols="3" id="chart-panel-size">
<tr> <tr>
<td colspan=3> <td colspan=3>
<label class="header"><%= scope.textSize %></label> <label class="header"><%= scope.textSize %></label>
@ -18,7 +18,7 @@
</td> </td>
</tr> </tr>
</table> </table>
<table cols="1"> <table cols="1" id="chart-panel-types">
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="separator horizontal"></div> <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> <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> </td>
</tr> </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> <tr>
<td class="padding-small"> <td class="padding-small">
<div class="separator horizontal"></div> <div class="separator horizontal"></div>

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

@ -313,3 +313,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-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>

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

@ -66,6 +66,7 @@ define([
initialize: function () { initialize: function () {
this._initSettings = true; this._initSettings = true;
this.txtPt = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt);
this._state = { this._state = {
Width: 0, Width: 0,
@ -74,17 +75,42 @@ define([
ChartType: -1, ChartType: -1,
SeveralCharts: false, SeveralCharts: false,
DisabledControls: false, DisabledControls: false,
keepRatio: false keepRatio: false,
SparkType: -1,
SparkStyle: 1,
LineWeight: 1,
MarkersPoint: false,
HighPoint: false,
LowPoint: false,
FirstPoint: false,
LastPoint: false,
NegativePoint: false,
SparkColor: '000000',
MarkersColor: this.defColor,
HighColor: this.defColor,
LowColor: this.defColor,
FirstColor: this.defColor,
LastColor: this.defColor,
NegativeColor: this.defColor,
SparkId: undefined
}; };
this._nRatio = 1; this._nRatio = 1;
this.spinners = []; this.spinners = [];
this.chPoints = [];
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();
this.ChartSizeContainer = $('#chart-panel-size');
this.ChartTypesContainer = $('#chart-panel-types');
this.SparkTypesContainer = $('#spark-panel-types');
this.SparkPointsContainer = $('#spark-panel-points');
}, },
render: function () { render: function () {
@ -106,10 +132,13 @@ define([
if (this._initSettings) if (this._initSettings)
this.createDelayedElements(); this.createDelayedElements();
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();
@ -185,6 +214,294 @@ define([
this.btnRatio.toggle(value); this.btnRatio.toggle(value);
this._state.keepRatio=value; this._state.keepRatio=value;
} }
} else { //sparkline
this._originalProps = props;
this.isChart = false;
this._state.SparkId = props.asc_getId();
var type = props.asc_getType(),
styleChanged = false;
if (this._state.SparkType !== type) {
var record = this.mnuSparkTypePicker.store.findWhere({type: type});
this.mnuSparkTypePicker.selectRecord(record, true);
if (record) {
this.btnSparkType.setIconCls('item-chartlist ' + record.get('iconCls'));
}
this._state.SparkType = type;
styleChanged = true;
}
var w = props.asc_getLineWeight(),
check_value = (Math.abs(this._state.LineWeight-w)<0.001) && !((new RegExp(this.txtPt + '\\s*$')).test(this.cmbBorderSize.getRawValue()));
if ( Math.abs(this._state.LineWeight-w)>0.001 || check_value ||
(this._state.LineWeight===null || w===null)&&(this._state.LineWeight!==w)) {
this._state.LineWeight = w;
var _selectedItem = (w===null) ? w : _.find(this.cmbBorderSize.store.models, function(item) {
if ( w<item.attributes.value+0.01 && w>item.attributes.value-0.01) {
return true;
}
});
if (_selectedItem)
this.cmbBorderSize.selectRecord(_selectedItem);
else {
this.cmbBorderSize.setValue((w!==null) ? parseFloat(w.toFixed(2)) + ' ' + this.txtPt : '');
}
this.BorderSize = w;
}
this.cmbBorderSize.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line);
var color = props.asc_getColorSeries();
if (color) {
this.SparkColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.SparkColor),
type2 = typeof(this._state.SparkColor);
if ( (type1 !== type2) || (type1=='object' && (this.SparkColor.effectValue!==this._state.SparkColor.effectValue || this._state.SparkColor.color.indexOf(this.SparkColor.color)<0)) ||
(type1!='object' && (this._state.SparkColor.indexOf(this.SparkColor)<0 || typeof(this.btnSparkColor.color)=='object'))) {
this.btnSparkColor.setColor(this.SparkColor);
if ( typeof(this.SparkColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.SparkColor.effectValue ) {
this.colorsSpark.select(this.SparkColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsSpark.clearSelection();
} else
this.colorsSpark.select(this.SparkColor,true);
this._state.SparkColor = this.SparkColor;
}
}
var point = props.asc_getMarkersPoint();
color = props.asc_getColorMarkers();
if ( this._state.MarkersPoint!==point ) {
this.chMarkersPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.MarkersPoint=point;
styleChanged = true;
}
this.chMarkersPoint.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line);
this.btnMarkersColor.setDisabled(this._locked || this._state.SparkType!==Asc.c_oAscSparklineType.Line);
if (color) {
this.MarkersColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.MarkersColor),
type2 = typeof(this._state.MarkersColor);
if ( (type1 !== type2) || (type1=='object' && (this.MarkersColor.effectValue!==this._state.MarkersColor.effectValue || this._state.MarkersColor.color.indexOf(this.MarkersColor.color)<0)) ||
(type1!='object' && (this._state.MarkersColor.indexOf(this.MarkersColor)<0 || typeof(this.btnMarkersColor.color)=='object'))) {
this.btnMarkersColor.setColor(this.MarkersColor);
if ( typeof(this.MarkersColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.MarkersColor.effectValue ) {
this.colorsMarkers.select(this.MarkersColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsMarkers.clearSelection();
} else
this.colorsMarkers.select(this.MarkersColor,true);
this._state.MarkersColor = this.MarkersColor;
styleChanged = true;
}
}
point = props.asc_getHighPoint();
color = props.asc_getColorHigh();
if ( this._state.HighPoint!==point ) {
this.chHighPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.HighPoint=point;
styleChanged = true;
}
if (color) {
this.HighColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.HighColor),
type2 = typeof(this._state.HighColor);
if ( (type1 !== type2) || (type1=='object' && (this.HighColor.effectValue!==this._state.HighColor.effectValue || this._state.HighColor.color.indexOf(this.HighColor.color)<0)) ||
(type1!='object' && (this._state.HighColor.indexOf(this.HighColor)<0 || typeof(this.btnHighColor.color)=='object'))) {
this.btnHighColor.setColor(this.HighColor);
if ( typeof(this.HighColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.HighColor.effectValue ) {
this.colorsHigh.select(this.HighColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsHigh.clearSelection();
} else
this.colorsHigh.select(this.HighColor,true);
this._state.HighColor = this.HighColor;
styleChanged = true;
}
}
point = props.asc_getLowPoint();
color = props.asc_getColorLow();
if ( this._state.LowPoint!==point ) {
this.chLowPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.LowPoint=point;
styleChanged = true;
}
if (color) {
this.LowColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.LowColor),
type2 = typeof(this._state.LowColor);
if ( (type1 !== type2) || (type1=='object' && (this.LowColor.effectValue!==this._state.LowColor.effectValue || this._state.LowColor.color.indexOf(this.LowColor.color)<0)) ||
(type1!='object' && (this._state.LowColor.indexOf(this.LowColor)<0 || typeof(this.btnLowColor.color)=='object'))) {
this.btnLowColor.setColor(this.LowColor);
if ( typeof(this.LowColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.LowColor.effectValue ) {
this.colorsLow.select(this.LowColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsLow.clearSelection();
} else
this.colorsLow.select(this.LowColor,true);
this._state.LowColor = this.LowColor;
styleChanged = true;
}
}
point = props.asc_getFirstPoint();
color = props.asc_getColorFirst();
if ( this._state.FirstPoint!==point ) {
this.chFirstPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.FirstPoint=point;
styleChanged = true;
}
if (color) {
this.FirstColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.FirstColor),
type2 = typeof(this._state.FirstColor);
if ( (type1 !== type2) || (type1=='object' && (this.FirstColor.effectValue!==this._state.FirstColor.effectValue || this._state.FirstColor.color.indexOf(this.FirstColor.color)<0)) ||
(type1!='object' && (this._state.FirstColor.indexOf(this.FirstColor)<0 || typeof(this.btnFirstColor.color)=='object'))) {
this.btnFirstColor.setColor(this.FirstColor);
if ( typeof(this.FirstColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.FirstColor.effectValue ) {
this.colorsFirst.select(this.FirstColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsFirst.clearSelection();
} else
this.colorsFirst.select(this.FirstColor,true);
this._state.FirstColor = this.FirstColor;
styleChanged = true;
}
}
point = props.asc_getLastPoint();
color = props.asc_getColorLast();
if ( this._state.LastPoint!==point ) {
this.chLastPoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.LastPoint=point;
styleChanged = true;
}
if (color) {
this.LastColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.LastColor),
type2 = typeof(this._state.LastColor);
if ( (type1 !== type2) || (type1=='object' && (this.LastColor.effectValue!==this._state.LastColor.effectValue || this._state.LastColor.color.indexOf(this.LastColor.color)<0)) ||
(type1!='object' && (this._state.LastColor.indexOf(this.LastColor)<0 || typeof(this.btnLastColor.color)=='object'))) {
this.btnLastColor.setColor(this.LastColor);
if ( typeof(this.LastColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.LastColor.effectValue ) {
this.colorsLast.select(this.LastColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsLast.clearSelection();
} else
this.colorsLast.select(this.LastColor,true);
this._state.LastColor = this.LastColor;
styleChanged = true;
}
}
point = props.asc_getNegativePoint();
color = props.asc_getColorNegative();
if ( this._state.NegativePoint!==point ) {
this.chNegativePoint.setValue((point !== null && point !== undefined) ? point : 'indeterminate', true);
this._state.NegativePoint=point;
styleChanged = true;
}
if (color) {
this.NegativeColor = (color.asc_getType() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) ?
{color: Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB()), effectValue: color.asc_getValue() } :
Common.Utils.ThemeColor.getHexColor(color.asc_getR(), color.asc_getG(), color.asc_getB());
var type1 = typeof(this.NegativeColor),
type2 = typeof(this._state.NegativeColor);
if ( (type1 !== type2) || (type1=='object' && (this.NegativeColor.effectValue!==this._state.NegativeColor.effectValue || this._state.NegativeColor.color.indexOf(this.NegativeColor.color)<0)) ||
(type1!='object' && (this._state.NegativeColor.indexOf(this.NegativeColor)<0 || typeof(this.btnNegativeColor.color)=='object'))) {
this.btnNegativeColor.setColor(this.NegativeColor);
if ( typeof(this.NegativeColor) == 'object' ) {
var isselected = false;
for (var i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] == this.NegativeColor.effectValue ) {
this.colorsNegative.select(this.NegativeColor,true);
isselected = true;
break;
}
}
if (!isselected) this.colorsNegative.clearSelection();
} else
this.colorsNegative.select(this.NegativeColor,true);
this._state.NegativeColor = this.NegativeColor;
styleChanged = true;
}
}
if (styleChanged)
this.updateSparkStyles(props.asc_getStyles());
}
} }
}, },
@ -198,9 +515,141 @@ define([
} }
}, },
UpdateThemeColors: function() {
var defValue;
if (!this.btnSparkColor) {
defValue = this.defColor;
this.btnSparkColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<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.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, 1, this.btnLowColor));
$(this.el).on('click', '#spark-low-color-new', _.bind(this.addNewColor, this, this.colorsLow, this.btnLowColor));
this.btnNegativeColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<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, 2, this.btnNegativeColor));
$(this.el).on('click', '#spark-negative-color-new', _.bind(this.addNewColor, this, this.colorsNegative, this.btnNegativeColor));
this.btnFirstColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<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, 3, this.btnFirstColor));
$(this.el).on('click', '#spark-first-color-new', _.bind(this.addNewColor, this, this.colorsFirst, this.btnFirstColor));
this.btnFirstColor.setColor(this.defColor.color);
this.btnLastColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<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, 4, this.btnLastColor));
$(this.el).on('click', '#spark-last-color-new', _.bind(this.addNewColor, this, this.colorsLast, this.btnLastColor));
this.btnMarkersColor = new Common.UI.ColorButton({
style: "width:45px;",
menu : new Common.UI.Menu({
items: [
{ template: _.template('<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, 5, this.btnMarkersColor));
$(this.el).on('click', '#spark-markers-color-new', _.bind(this.addNewColor, this, this.colorsMarkers, this.btnMarkersColor));
}
this.colorsSpark.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsHigh.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.colorsLow.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.colorsNegative.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.colorsFirst.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.colorsLast.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.colorsMarkers.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors(), defValue);
this.btnSparkColor.setColor(this.colorsSpark.getColor());
this.btnHighColor.setColor(this.colorsHigh.getColor());
this.btnLowColor.setColor(this.colorsLow.getColor());
this.btnNegativeColor.setColor(this.colorsNegative.getColor());
this.btnFirstColor.setColor(this.colorsFirst.getColor());
this.btnLastColor.setColor(this.colorsLast.getColor());
this.btnMarkersColor.setColor(this.colorsMarkers.getColor());
},
createDelayedControls: function() { createDelayedControls: function() {
var me = this; var me = this;
// 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',
@ -211,6 +660,7 @@ define([
] ]
}) })
}); });
this.btnChartType.on('render:after', function(btn) { this.btnChartType.on('render:after', function(btn) {
me.mnuChartTypePicker = new Common.UI.DataView({ me.mnuChartTypePicker = new Common.UI.DataView({
el: $('#id-chart-menu-type'), el: $('#id-chart-menu-type'),
@ -307,6 +757,95 @@ 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,
restoreHeight: 200,
allowScrollbar: false,
groups: new Common.UI.DataViewGroupStore([
{ id: 'menu-chart-group-sparkcolumn', caption: me.textColumnSpark },
{ id: 'menu-chart-group-sparkline', caption: me.textLineSpark },
{ id: 'menu-chart-group-sparkwin', caption: me.textWinLossSpark }
]),
store: new Common.UI.DataViewStore([
{ group: 'menu-chart-group-sparkcolumn', type: Asc.c_oAscSparklineType.Column, allowSelected: true, iconCls: 'spark-column'},
{ group: 'menu-chart-group-sparkline', type: Asc.c_oAscSparklineType.Line, allowSelected: true, iconCls: 'spark-line'},
{ group: 'menu-chart-group-sparkwin', type: Asc.c_oAscSparklineType.Stacked, allowSelected: true, iconCls: 'spark-win'}
]),
itemTemplate: _.template('<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.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el : $('#spark-combo-line-type'),
style : 'width: 90px;',
allowNoBorders: false
}).on('selected', _.bind(this.onBorderSizeSelect, this))
.on('changed:before', _.bind(this.onBorderSizeChanged, this, true))
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false));
this.BorderSize = this.cmbBorderSize.store.at(1).get('value');
this.cmbBorderSize.setValue(this.BorderSize);
this.lockedControls.push(this.cmbBorderSize);
this.chHighPoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-high'),
labelText: this.textHighPoint
});
this.lockedControls.push(this.chHighPoint);
this.chPoints.push(this.chHighPoint);
this.chLowPoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-low'),
labelText: this.textLowPoint
});
this.lockedControls.push(this.chLowPoint);
this.chPoints.push(this.chLowPoint);
this.chNegativePoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-negative'),
labelText: this.textNegativePoint
});
this.lockedControls.push(this.chNegativePoint);
this.chPoints.push(this.chNegativePoint);
this.chFirstPoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-first'),
labelText: this.textFirstPoint
});
this.lockedControls.push(this.chFirstPoint);
this.chPoints.push(this.chFirstPoint);
this.chLastPoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-last'),
labelText: this.textLastPoint
});
this.lockedControls.push(this.chLastPoint);
this.chPoints.push(this.chLastPoint);
this.chMarkersPoint = new Common.UI.CheckBox({
el: $('#spark-checkbox-markers'),
labelText: this.textMarkers
});
this.lockedControls.push(this.chMarkersPoint);
this.chPoints.push(this.chMarkersPoint);
this.chHighPoint.on('change', _.bind(this.onCheckPointChange, this, 0));
this.chLowPoint.on('change', _.bind(this.onCheckPointChange, this, 1));
this.chNegativePoint.on('change', _.bind(this.onCheckPointChange, this, 2));
this.chFirstPoint.on('change', _.bind(this.onCheckPointChange, this, 3));
this.chLastPoint.on('change', _.bind(this.onCheckPointChange, this, 4));
this.chMarkersPoint.on('change', _.bind(this.onCheckPointChange, this, 5));
this.btnSelectData = new Common.UI.Button({ this.btnSelectData = new Common.UI.Button({
el: $('#chart-btn-select-data') el: $('#chart-btn-select-data')
}); });
@ -320,9 +859,17 @@ define([
createDelayedElements: function() { createDelayedElements: function() {
this.createDelayedControls(); this.createDelayedControls();
this.updateMetricUnit(); this.updateMetricUnit();
this.UpdateThemeColors();
this._initSettings = false; this._initSettings = false;
}, },
ShowHideElem: function(isChart) {
this.ChartSizeContainer.toggleClass('settings-hidden', !isChart);
this.ChartTypesContainer.toggleClass('settings-hidden', !isChart);
this.SparkTypesContainer.toggleClass('settings-hidden', isChart);
this.SparkPointsContainer.toggleClass('settings-hidden', isChart);
},
onWidthChange: function(field, newValue, oldValue, eOpts){ onWidthChange: function(field, newValue, oldValue, eOpts){
var w = field.getNumberValue(); var w = field.getNumberValue();
var h = this.spnHeight.getNumberValue(); var h = this.spnHeight.getNumberValue();
@ -372,17 +919,20 @@ define([
var me = this; var me = this;
var win, props; var win, props;
if (me.api){ if (me.api){
props = me.api.asc_getChartObject(); props = (me.isChart) ? me.api.asc_getChartObject() : me._originalProps;
if (props) { if (props) {
(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') {
if (me.api) { if (me.api) {
if (me.isChart)
me.api.asc_editChartDrawingObject(value.chartSettings); me.api.asc_editChartDrawingObject(value.chartSettings);
else
me.api.asc_setSparklineGroup(me._state.SparkId, value.chartSettings);
} }
} }
Common.NotificationCenter.trigger('edit:complete', me); Common.NotificationCenter.trigger('edit:complete', me);
@ -529,6 +1079,210 @@ define([
} }
}, },
updateSparkStyles: function(styles) {
var me = this;
if (!this.cmbSparkStyle) {
this.cmbSparkStyle = new Common.UI.ComboDataView({
itemWidth: 50,
itemHeight: 50,
menuMaxHeight: 272,
enableKeyEvents: true,
cls: 'combo-spark-style'
});
this.cmbSparkStyle.render($('#spark-combo-style'));
this.cmbSparkStyle.openButton.menu.cmpEl.css({
'min-width': 178,
'max-width': 178
});
this.cmbSparkStyle.on('click', _.bind(this.onSelectSparkStyle, this));
this.cmbSparkStyle.openButton.menu.on('show:after', function () {
me.cmbSparkStyle.menuPicker.scroller.update({alwaysVisibleY: true});
});
this.lockedControls.push(this.cmbSparkStyle);
}
if (styles && styles.length>1){
var stylesStore = this.cmbSparkStyle.menuPicker.store,
selectedIdx = styles[styles.length-1];
if (stylesStore.length == styles.length-1) {
var data = stylesStore.models;
for (var i=0; i<styles.length-1; i++) {
data[i].set('imageUrl', styles[i]);
}
if (selectedIdx<0) {
this.cmbSparkStyle.fillComboView(stylesStore.at(0), false);
this.cmbSparkStyle.fieldPicker.deselectAll();
this.cmbSparkStyle.menuPicker.deselectAll();
} else
this.cmbSparkStyle.menuPicker.selectRecord(stylesStore.at(selectedIdx));
} else {
var stylearray = [];
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) {
var rawData = {},
isPickerSelect = _.isFunction(record.toJSON);
if (isPickerSelect){
if (record.get('selected')) {
rawData = record.toJSON();
} else {
// record deselected
return;
}
} else {
rawData = record;
}
this.btnSparkType.setIconCls('item-chartlist ' + rawData.iconCls);
this._state.SparkType = -1;
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
props.asc_setType(rawData.type);
this.api.asc_setSparklineGroup(this._state.SparkId, props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
onSelectSparkStyle: function(combo, record) {
if (this._noApply) return;
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
props.asc_setStyle(record.get('data'));
this.api.asc_setSparklineGroup(this._state.SparkId, props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
applyBorderSize: function(value) {
value = parseFloat(value);
value = isNaN(value) ? 1 : Math.max(0.01, Math.min(1584, value));
this.BorderSize = value;
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
props.asc_setLineWeight(this.BorderSize);
this.api.asc_setSparklineGroup(this._state.SparkId, props);
Common.NotificationCenter.trigger('edit:complete', this);
}
},
onBorderSizeChanged: function(before, combo, record, e) {
var me = this;
if (before) {
var value = parseFloat(record.value),
expr = new RegExp('^\\s*(\\d*(\\.|,)?\\d+)\\s*(' + me.txtPt + ')?\\s*$');
if (!(expr.exec(record.value)) || value<0.01 || value>1584) {
this._state.LineWeight = -1;
Common.UI.error({
msg: this.textBorderSizeErr,
callback: function() {
_.defer(function(btn) {
Common.NotificationCenter.trigger('edit:complete', me);
})
}
});
}
} else
this.applyBorderSize(record.value);
},
onBorderSizeSelect: function(combo, record) {
this.applyBorderSize(record.value);
},
onColorsSparkSelect: function(picker, color) {
this.btnSparkColor.setColor(color);
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
props.asc_setColorSeries(Common.Utils.ThemeColor.getRgbColor(color));
this.api.asc_setSparklineGroup(this._state.SparkId, props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
addNewColor: function(picker, btn) {
picker.addNewColor((typeof(btn.color) == 'object') ? btn.color.color : btn.color);
},
onCheckPointChange: function(type, field, newValue, oldValue, eOpts) {
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
switch (type) {
case 0:
props.asc_setHighPoint(field.getValue()=='checked');
break;
case 1:
props.asc_setLowPoint(field.getValue()=='checked');
break;
case 2:
props.asc_setNegativePoint(field.getValue()=='checked');
break;
case 3:
props.asc_setFirstPoint(field.getValue()=='checked');
break;
case 4:
props.asc_setLastPoint(field.getValue()=='checked');
break;
case 5:
props.asc_setMarkersPoint(field.getValue()=='checked');
break;
}
this.api.asc_setSparklineGroup(this._state.SparkId, props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
onColorsPointSelect: function(type, btn, picker, color) {
btn.setColor(color);
if (this.chPoints[type].getValue() !== 'checked')
this.chPoints[type].setValue(true, true);
if (this.api && !this._noApply && this._originalProps) {
var props = new Asc.sparklineGroup();
switch (type) {
case 0:
props.asc_setHighPoint(true);
props.asc_setColorHigh(Common.Utils.ThemeColor.getRgbColor(color));
break;
case 1:
props.asc_setLowPoint(true);
props.asc_setColorLow(Common.Utils.ThemeColor.getRgbColor(color));
break;
case 2:
props.asc_setNegativePoint(true);
props.asc_setColorNegative(Common.Utils.ThemeColor.getRgbColor(color));
break;
case 3:
props.asc_setFirstPoint(true);
props.asc_setColorFirst(Common.Utils.ThemeColor.getRgbColor(color));
break;
case 4:
props.asc_setLastPoint(true);
props.asc_setColorLast(Common.Utils.ThemeColor.getRgbColor(color));
break;
case 5:
props.asc_setMarkersPoint(true);
props.asc_setColorMarkers(Common.Utils.ThemeColor.getRgbColor(color));
break;
}
this.api.asc_setSparklineGroup(this._state.SparkId, props);
}
Common.NotificationCenter.trigger('edit:complete', this);
},
setLocked: function (locked) { setLocked: function (locked) {
this._locked = locked; this._locked = locked;
}, },
@ -549,7 +1303,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',
@ -560,9 +1314,24 @@ define([
textStock: 'Stock Chart', textStock: 'Stock Chart',
textStyle: 'Style', textStyle: 'Style',
textAdvanced: 'Show advanced settings', textAdvanced: 'Show advanced settings',
strSparkColor: 'Color',
strLineWeight: 'Line Weight',
textMarkers: 'Markers',
textNewColor: 'Add New Custom Color',
textLineSpark: 'Line',
textColumnSpark: 'Column',
textWinLossSpark: 'Win/Loss',
textHighPoint: 'High Point',
textLowPoint: 'Low Point',
textNegativePoint: 'Negative Point',
textFirstPoint: 'First Point',
textLastPoint: 'Last Point',
strTemplate: 'Template',
textShow: 'Show',
textType: 'Type', textType: 'Type',
textSelectData: 'Select Data', textSelectData: 'Select Data',
textRanges: 'Data Range' textRanges: 'Data Range',
textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.'
}, SSE.Views.ChartSettings || {})); }, SSE.Views.ChartSettings || {}));
}); });

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

@ -61,7 +61,9 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
{panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData}, {panelId: 'id-chart-settings-dlg-style', panelCaption: this.textTypeData},
{panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout}, {panelId: 'id-chart-settings-dlg-layout', panelCaption: this.textLayout},
{panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis}, {panelId: 'id-chart-settings-dlg-vert', panelCaption: this.textVertAxis},
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis} {panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis},
{panelId: 'id-spark-settings-dlg-style', panelCaption: this.textTypeData},
{panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions}
], ],
contentTemplate: _.template(contentTemplate)({ contentTemplate: _.template(contentTemplate)({
scope: this scope: this
@ -79,17 +81,21 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
this._state = { this._state = {
ChartType: Asc.c_oAscChartTypeSettings.barNormal ChartType: Asc.c_oAscChartTypeSettings.barNormal,
SparkType: -1
}; };
this._noApply = true; this._noApply = true;
this._changedProps = null;
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() {
@ -770,12 +776,231 @@ 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.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(); this.afterRender();
}, },
afterRender: function() { afterRender: function() {
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);
@ -985,11 +1210,89 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.currentAxisProps = props; 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) { _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;
@ -1043,6 +1346,34 @@ 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
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,8 +1381,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
var value, var value,
type = this.mnuChartTypePicker.getSelectedRec()[0].get('type'); 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.putInColumns(this.cmbDataDirect.getValue()==1);
@ -1092,9 +1422,13 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.chartSettings.putHorAxisProps(this.horAxisProps); this.chartSettings.putHorAxisProps(this.horAxisProps);
return { chartSettings: this.chartSettings }; return { chartSettings: this.chartSettings };
} else {
return { chartSettings: this._changedProps };
}
}, },
isRangeValid: function() { isRangeValid: function() {
if (this.isChart) {
var isvalid; var isvalid;
if (!_.isEmpty(this.txtDataRange.getValue())) { 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')); isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.cmbDataDirect.getValue()==0, this.mnuChartTypePicker.getSelectedRec()[0].get('type'));
@ -1111,6 +1445,8 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
} else } else
this.txtDataRange.cmpEl.find('input').focus(); this.txtDataRange.cmpEl.find('input').focus();
return false; return false;
} else
return true;
}, },
onSelectData: function() { onSelectData: function() {
@ -1277,6 +1613,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 || {}));
}); });

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

@ -503,7 +503,33 @@ define([
id : 'id-toolbar-btn-insertchart', id : 'id-toolbar-btn-insertchart',
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],
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({ 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) { setApi: function(api) {
@ -2031,6 +2119,18 @@ define([
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',
tipInsertEquation: 'Insert Equation' tipInsertEquation: 'Insert Equation'
}, SSE.Views.Toolbar || {})); }, SSE.Views.Toolbar || {}));
}); });

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

@ -719,7 +719,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",

BIN
apps/spreadsheeteditor/main/resources/img/charttypes.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
apps/spreadsheeteditor/main/resources/img/charttypes@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

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

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