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

[SSE] Refactoring chart range settings

Browse source
This commit is contained in:
Julia Radzhabova 2020-07-08 10:41:18 +03:00
parent 3bfd4182fc
commit f5dc20d8d0
2 changed files with 160 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
View file

@ -124,7 +124,6 @@ define([
this.api = this.options.api;
this.chartSettings = this.options.chartSettings;
this.dataRangeValid = '';
this.dataDirect = 0;
this.currentChartType = Asc.c_oAscChartTypeSettings.barNormal;
},
@ -140,19 +139,10 @@ define([
allowBlank : true,
validateOnChange: true
});
this.txtDataRange.on('button:click', _.bind(this.onSelectData_simple, this));
this.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
this.txtDataRange.on('changed:after', function(input, newValue, oldValue, e) {
if (newValue !==me.dataRangeValid) {
if (me.isRangeValid()) {
me.dataRangeValid = newValue;
me.txtDataRange.checkValidate();
me.chartSettings.putRange(me.dataRangeValid);
me.api.asc_editChartDrawingObject(me.chartSettings);
} else {
me.txtDataRange.setValue(me.dataRangeValid);
me.txtDataRange.checkValidate();
}
}
if (newValue == oldValue) return;
me.changeChartRange(newValue);
});
// Chart data
@ -210,7 +200,6 @@ define([
emptyText: '',
scrollAlwaysVisible: true
});
this.categoryList.onKeyDown = _.bind(this.onListKeyDown, this, 'category');
this.btnEditCategory = new Common.UI.Button({
el: $('#chart-dlg-btn-category-edit')
@ -258,31 +247,13 @@ define([
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true;
};
this.dataDirect = props.getInColumns() ? 1 : 0;
this.updateSeriesList(props.getSeries(), 0);
var categories = props.getCatValues(),
arr = [];
var store = this.categoryList.store;
for (var i = 0, len = categories.length; i < len; i++)
{
var item = categories[i],
rec = new Common.UI.DataViewModel();
rec.set({
value: item
});
arr.push(rec);
}
store.reset(arr);
(len>0) && this.categoryList.selectByIndex(0);
this.updateCategoryList(props.getCatValues());
}
this.updateButtons();
this.updateCatButtons();
},
getSettings: function () {
this.chartSettings.putRange(this.txtDataRange.getValue());
return { chartSettings: this.chartSettings};
},
@ -290,6 +261,7 @@ define([
var me = this;
var state = (typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event;
if (state == 'ok') {
if (!this.isRangeValid()) return;
this.handler && this.handler.call(this, state, (state == 'ok') ? this.getSettings() : undefined);
}
@ -304,6 +276,7 @@ define([
isRangeValid: function() {
var isvalid;
if (!_.isEmpty(this.txtDataRange.getValue())) {
//change validation!!
isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, this.txtDataRange.getValue(), true, this.dataDirect===0, this.currentChartType);
if (isvalid == Asc.c_oAscError.ID.No)
return true;
@ -321,18 +294,26 @@ define([
return false;
},
onSelectData_simple: function() {
changeChartRange: function(settings) {
var me = this;
if (me.isRangeValid(settings)) {
me.dataRangeValid = settings;
me.txtDataRange.checkValidate();
me.chartSettings.putRange(me.dataRangeValid);
me.updateSeriesList(me.chartSettings.getSeries(), 0);
me.updateCategoryList(me.chartSettings.getCatValues());
me.updateButtons();
}
},
onSelectData: function(input) {
var me = this;
if (me.api) {
var props = me.chartSettings;
var handlerDlg = function(dlg, result) {
if (result == 'ok' && me.isRangeValid()) {
me.dataRangeValid = dlg.getSettings();
me.txtDataRange.setValue(me.dataRangeValid);
me.txtDataRange.checkValidate();
props.putRange(me.dataRangeValid);
me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None);
me.api.asc_editChartDrawingObject(props);
if (result == 'ok') {
input.setValue(dlg.getSettings());
me.changeChartRange(dlg.getSettings());
}
};
@ -353,59 +334,13 @@ define([
}
},
onSelectData: function() {
var me = this;
if (me.api) {
var props = me.chartSettings,
handlerDlg = function(dlg, result) {
if (result == 'ok' && me.isRangeValid()) {
props.putRange(dlg.getSettings());
me.api.asc_setSelectionDialogMode(Asc.c_oAscSelectionDialogType.None);
me.api.asc_editChartDrawingObject(props);
}
},
validation = function(value) {
var isvalid;
if (!_.isEmpty(value)) {
isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, !props.getInColumns(), me.currentChartType);
if (isvalid == Asc.c_oAscError.ID.No)
return true;
} else return '';
if (isvalid == Asc.c_oAscError.ID.StockChartError) {
return this.errorStockChart;
} else if (isvalid == Asc.c_oAscError.ID.MaxDataSeriesError) {
return this.errorMaxRows;
}
return this.txtInvalidRange;
};
var win = new SSE.Views.CellRangeDialog({
handler: handlerDlg
}).on('close', function() {
me.show();
// me.api.asc_onCloseChartFrame();
});
var xy = me.$window.offset();
me.hide();
win.show(xy.left + 160, xy.top + 125);
win.setSettings({
api : me.api,
range : props.getRange(),
validation: validation,
type : Asc.c_oAscSelectionDialogType.Chart
});
}
},
onListKeyDown: function (type, e, data) {
var record = null, listView = (type=='series') ? this.seriesList : this.categoryList;
var record = null, listView = this.seriesList;
if (listView.disabled) return;
if (_.isUndefined(undefined)) data = e;
if (type=='series' && data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) {
if (data.keyCode==Common.UI.Keys.DELETE && !this.btnDelete.isDisabled()) {
// this.onDeleteSeries();
} else {
Common.UI.DataView.prototype.onKeyDown.call(listView, e, data);
@ -413,25 +348,15 @@ define([
},
onSelectSeries: function(lisvView, itemView, record) {
this.updateCatButtons(record.get('series').asc_IsScatter());
this.updateMoveButtons();
},
updateButtons: function() {
// this.btnAdd.setDisabled(this.seriesList.store.length>63);
this.btnEdit.setDisabled(this.seriesList.store.length<1);
this.btnDelete.setDisabled(this.seriesList.store.length<1);
this.updateMoveButtons();
},
updateCatButtons: function(isScatter) {
if (isScatter===undefined) {
var rec = this.seriesList.getSelectedRec();
rec && (isScatter = rec.get('series').asc_IsScatter());
}
this.btnEditCategory.setDisabled(this.categoryList.store.length<1 || !!isScatter);
},
updateMoveButtons: function() {
var rec = this.seriesList.getSelectedRec(),
index = rec ? this.seriesList.store.indexOf(rec) : -1;
@ -441,21 +366,23 @@ define([
onAddSeries: function() {
var rec = (this.seriesList.store.length>0) ? this.seriesList.store.at(this.seriesList.store.length-1) : null,
isScatter = false;
isScatter = false,
me = this;
rec && (isScatter = rec.get('series').asc_IsScatter());
// me.setStartPointHistory();
var series;
if (isScatter) {
series = me.chartSettings.addScatterSeries();
} else {
series = me.chartSettings.addSeries();
}
var handlerDlg = function(dlg, result) {
if (result == 'ok') {
var changedValue = dlg.getSettings();
if (isScatter) {
this.chartSettings.addScatterSeries(changedValue.name, changedValue.valuesX, changedValue.valuesY);
} else {
this.chartSettings.addSeries(changedValue.name, changedValue.values);
}
this.updateSeriesList(this.chartSettings.getSeries(), this.seriesList.store.length-1);
this.updateButtons();
me.updateSeriesList(me.chartSettings.getSeries(), me.seriesList.store.length-1);
me.updateButtons();
}
};
this.changeDataRange(1, {isScatter: isScatter}, true, handlerDlg);
this.changeDataRange(1, {series: series, isScatter: isScatter}, handlerDlg);
},
onDeleteSeries: function() {
@ -472,27 +399,38 @@ define([
var rec = this.seriesList.getSelectedRec();
if (rec) {
var series = rec.get('series'),
isScatter = series.asc_IsScatter();
isScatter = series.asc_IsScatter(),
me = this;
var handlerDlg = function(dlg, result) {
if (result == 'ok') {
var changedValue = dlg.getSettings();
// var changedValue = dlg.getSettings();
// series.asc_setName(changedValue.name);
// if (isScatter) {
// series.asc_setXValues(changedValue.valuesX);
// series.asc_setYValues(changedValue.valuesY);
// } else {
// series.asc_setValues(changedValue.valuesX);
// }
}
};
this.changeDataRange(1, {series: series, name: series.asc_getName(), isScatter: isScatter, values: isScatter ? null : series.asc_getValues(),
valuesX: !isScatter ? null : series.asc_getXValues(), valuesY: !isScatter ? null : series.asc_getYValues() }, false, handlerDlg);
// me.setStartPointHistory();
this.changeDataRange(1, {series: series, isScatter: isScatter }, handlerDlg);
}
},
onEditCategory: function() {
var me = this;
var handlerDlg = function(dlg, result) {
if (result == 'ok') {
var changedValue = dlg.getSettings();
// var changedValue = dlg.getSettings();
// me.chartSettings.setCatFormula(changedValue.name);
}
};
this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, false, handlerDlg);
// me.setStartPointHistory();
this.changeDataRange(0, {category: '', values: this.chartSettings.getCatValues()}, handlerDlg);
},
changeDataRange: function(type, props, add, handlerDlg) {
changeDataRange: function(type, props, handlerDlg) {
var me = this;
var win = new SSE.Views.ChartDataRangeDialog({
type: type, //series
@ -500,6 +438,7 @@ define([
handler: handlerDlg
}).on('close', function() {
me.show();
// me.setEndPointHistory(); when cancel
});
var xy = me.$window.offset();
@ -507,7 +446,8 @@ define([
win.show(xy.left + 160, xy.top + 125);
win.setSettings({
api : me.api,
props : props
props : props,
chartSettings: me.chartSettings
});
},
@ -532,6 +472,8 @@ define([
},
updateSeriesList: function(series, index) {
this.btnEditCategory.setDisabled(series && series.length>0 ? series[0].asc_IsScatter() : false);
var arr = [];
var store = this.seriesList.store;
for (var i = 0, len = series.length; i < len; i++)
@ -550,6 +492,22 @@ define([
(len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1));
},
updateCategoryList: function(categories) {
var arr = [];
var store = this.categoryList.store;
for (var i = 0, len = categories.length; i < len; i++)
{
var item = categories[i],
rec = new Common.UI.DataViewModel();
rec.set({
value: item
});
arr.push(rec);
}
store.reset(arr);
(len>0) && this.categoryList.selectByIndex(0);
},
textTitle: 'Chart Data',
txtEmpty: 'This field is required',
textInvalidRange: 'ERROR! Invalid cells range',

110
apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
View file

@ -131,10 +131,12 @@ define([
validateOnChange: true,
validateOnBlur: false
}).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
me.updateRangeData(1, newValue);
}).on('changing', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
// me.onInputChanging(input, newValue, oldValue);
}).on('button:click', _.bind(this.onSelectData, this));
}).on('button:click', _.bind(this.onSelectData, this, 1));
this.lblRange1 = $window.find('#id-dlg-chart-range-lbl1');
me.inputRange2 = new Common.UI.InputFieldBtn({
@ -144,10 +146,12 @@ define([
validateOnChange: true,
validateOnBlur: false
}).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
me.updateRangeData(2, newValue);
}).on('changing', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
// me.onInputChanging(input, newValue, oldValue);
}).on('button:click', _.bind(this.onSelectData, this));
}).on('button:click', _.bind(this.onSelectData, this, 2));
this.lblRange2 = $window.find('#id-dlg-chart-range-lbl2');
me.inputRange3 = new Common.UI.InputFieldBtn({
@ -157,10 +161,12 @@ define([
validateOnChange: true,
validateOnBlur: false
}).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
me.updateRangeData(3, newValue);
}).on('changing', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;
// me.onInputChanging(input, newValue, oldValue);
}).on('button:click', _.bind(this.onSelectData, this));
}).on('button:click', _.bind(this.onSelectData, this, 3));
this.lblRange3 = $window.find('#id-dlg-chart-range-lbl3');
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
@ -179,19 +185,24 @@ define([
var me = this;
this.api = settings.api;
this.props = settings.props;
this.chartSettings = settings.chartSettings;
if (this.type==1) {
if (this.props.series) {
var series = this.props.series;
this.inputRange1.setValue(series.asc_getName());
(this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName());
if (this.props.isScatter) {
this.inputRange2.setValue(series.asc_getXValues());
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; '));
this.inputRange3.setValue(series.asc_getYValues());
(this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; '));
} else {
this.inputRange2.setValue(series.asc_getValues());
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; '));
}
} else { // add series
if (this.props.series) {
var series = this.props.series;
this.inputRange1.setValue(series.asc_getName());
(this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName());
if (this.props.isScatter) {
this.inputRange2.setValue(series.asc_getXValues());
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; '));
this.inputRange3.setValue(series.asc_getYValues());
(this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; '));
} else {
this.inputRange2.setValue(series.asc_getValues());
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; '));
}
} else {
this.inputRange1.setValue(this.props.category || '');
@ -201,16 +212,16 @@ define([
},
getSettings: function () {
return {name: this.inputRange1.getValue(), value: this.inputRange2.getValue()};
return {name: this.inputRange1.getValue(), valuesX: this.inputRange2.getValue(), valuesY: this.inputRange3.getValue()};
},
onSelectData: function(input) {
onSelectData: function(type, input) {
var me = this;
if (me.api) {
var changedValue = input.getValue();
var handlerDlg = function(dlg, result) {
if (result == 'ok') {
changedValue = dlg.getSettings();
input.setValue(dlg.getSettings());
me.updateRangeData(type, dlg.getSettings());
}
};
@ -218,7 +229,6 @@ define([
allowBlank: true,
handler: handlerDlg
}).on('close', function() {
input.setValue(changedValue);
// me.onInputChanging(input);
me.show();
_.delay(function(){
@ -239,6 +249,57 @@ define([
}
},
isRangeValid: function(type, value) {
var isvalid;
if (!_.isEmpty(value)) {
//change validation!!
isvalid = this.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.Chart, value, true, false, this.chartSettings.getType());
if (isvalid == Asc.c_oAscError.ID.No)
return true;
} else
return true;
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 if (isvalid == Asc.c_oAscError.ID.MaxDataPointsError)
Common.UI.warning({msg: this.errorMaxPoints});
return false;
},
updateRangeData: function(type, value) {
if (!this.isRangeValid(type, value)) return;
if (this.props.series) {
var series = this.props.series;
switch (type) {
case 1:
series.asc_setName(value);
(this.inputRange1.getValue()!=='') && this.lblRange1.html('= ' + series.getName());
break;
case 2:
if (this.isScatter) {
series.asc_setXValues(value);
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getXValuesArr().join('; '));
} else {
series.asc_setValues(value);
(this.inputRange2.getValue()!=='') && this.lblRange2.html('= ' + series.asc_getValuesArr().join('; '));
}
break;
case 3:
series.asc_setYValues(value);
(this.inputRange3.getValue()!=='') && this.lblRange3.html('= ' + series.asc_getYValuesArr().join('; '));
break;
}
} else {
// this.chartSettings.setCatFormula(value);
var values = this.chartSettings.getCatValues();
// if (this.inputRange1.getValue()!=='')
values && this.lblRange1.html('= ' + values.join('; '));
}
},
onBtnClick: function(event) {
this._handleInput(event.currentTarget.attributes['result'].value);
},
@ -246,12 +307,9 @@ define([
_handleInput: function(state) {
if (this.options.handler) {
if (state == 'ok') {
if (this.inputRange1.checkValidate() !== true)
return;
if (this.type==1 && this.inputRange2.checkValidate() !== true)
return;
if (this.type==1 && this.isScatter && this.inputRange3.checkValidate() !== true)
return;
if (!this.isRangeValid(1, this.inputRange1.getValue())) return;
if (this.type==1 && !this.isRangeValid(2, this.inputRange1.getValue())) return;
if (this.type==1 && this.isScatter && !this.isRangeValid(3, this.inputRange1.getValue())) return;
}
if (this.options.handler.call(this, this, state))
return;