[SSE] Show chart data settings
This commit is contained in:
Julia Radzhabova
parent
6dc0054f77
commit
0e492b6134
|
|
@ -86,7 +86,7 @@ define([
|
|||
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;">', me.textEdit, '</button>',
|
||||
'<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;">', me.textDelete, '</button>',
|
||||
'<div style="display: inline-block; float: right;">',
|
||||
'<div id="chart-dlg-btn-up" style="display: inline-block;border: 1px solid #cfcfcf;border-radius: 1px;"></div>',
|
||||
'<div id="chart-dlg-btn-up" style="display: inline-block;border: 1px solid #cfcfcf;border-radius: 1px;margin-right: 2px;"></div>',
|
||||
'<div id="chart-dlg-btn-down" style="display: inline-block;border: 1px solid #cfcfcf;border-radius: 1px;"></div>',
|
||||
'</div>',
|
||||
'</td>',
|
||||
|
|
@ -168,6 +168,9 @@ define([
|
|||
});
|
||||
this.seriesList.onKeyDown = _.bind(this.onListKeyDown, this, 'series');
|
||||
this.seriesList.on('item:select', _.bind(this.onSelectSeries, this));
|
||||
this.seriesList.store.comparator = function(rec) {
|
||||
return rec.get("order");
|
||||
};
|
||||
|
||||
this.btnAdd = new Common.UI.Button({
|
||||
el: $('#chart-dlg-btn-add')
|
||||
|
|
@ -177,7 +180,7 @@ define([
|
|||
this.btnDelete = new Common.UI.Button({
|
||||
el: $('#chart-dlg-btn-delete')
|
||||
});
|
||||
// this.btnDelete.on('click', _.bind(this.onDeleteSeries, this));
|
||||
this.btnDelete.on('click', _.bind(this.onDeleteSeries, this));
|
||||
|
||||
this.btnEdit = new Common.UI.Button({
|
||||
el: $('#chart-dlg-btn-edit')
|
||||
|
|
@ -190,7 +193,7 @@ define([
|
|||
iconCls: 'caret-up',
|
||||
hint: this.textUp
|
||||
});
|
||||
// this.btnUp.on('click', _.bind(this.onMoveClick, this, true));
|
||||
this.btnUp.on('click', _.bind(this.onMoveClick, this, true));
|
||||
|
||||
this.btnDown = new Common.UI.Button({
|
||||
parentEl: $('#chart-dlg-btn-down'),
|
||||
|
|
@ -198,7 +201,7 @@ define([
|
|||
iconCls: 'caret-down',
|
||||
hint: this.textDown
|
||||
});
|
||||
// this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
|
||||
this.btnDown.on('click', _.bind(this.onMoveClick, this, false));
|
||||
|
||||
this.btnSwitch = new Common.UI.Button({
|
||||
el: $('#chart-dlg-btn-switch')
|
||||
|
|
@ -260,7 +263,25 @@ define([
|
|||
};
|
||||
|
||||
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.updateButtons();
|
||||
},
|
||||
|
||||
getSettings: function () {
|
||||
|
|
@ -398,6 +419,17 @@ define([
|
|||
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() {
|
||||
this.btnEditCategory.setDisabled(this.categoryList.store.length<1);
|
||||
},
|
||||
|
||||
updateMoveButtons: function() {
|
||||
var rec = this.seriesList.getSelectedRec(),
|
||||
index = rec ? this.seriesList.store.indexOf(rec) : -1;
|
||||
|
|
@ -406,21 +438,47 @@ define([
|
|||
},
|
||||
|
||||
onAddSeries: function() {
|
||||
var rec = (this.seriesList.store.length>0) ? this.seriesList.store.at(this.seriesList.store.length-1) : null,
|
||||
isScatter = false;
|
||||
rec && (isScatter = rec.get('series').asc_IsScatter());
|
||||
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();
|
||||
}
|
||||
};
|
||||
this.changeDataRange(1, true, handlerDlg);
|
||||
this.changeDataRange(1, {isScatter: isScatter}, true, handlerDlg);
|
||||
},
|
||||
|
||||
onDeleteSeries: function() {
|
||||
var rec = this.seriesList.getSelectedRec();
|
||||
if (rec) {
|
||||
var order = rec.get('order');
|
||||
// this.chartSettings.deleteSeries(rec.get('index'));
|
||||
this.updateSeriesList(this.chartSettings.getSeries(), order);
|
||||
}
|
||||
this.updateButtons();
|
||||
},
|
||||
|
||||
onEditSeries: function() {
|
||||
var handlerDlg = function(dlg, result) {
|
||||
if (result == 'ok') {
|
||||
var changedValue = dlg.getSettings();
|
||||
}
|
||||
};
|
||||
this.changeDataRange(1, false, handlerDlg);
|
||||
var rec = this.seriesList.getSelectedRec();
|
||||
if (rec) {
|
||||
var series = rec.get('series'),
|
||||
isScatter = series.asc_IsScatter();
|
||||
var handlerDlg = function(dlg, result) {
|
||||
if (result == 'ok') {
|
||||
var changedValue = dlg.getSettings();
|
||||
}
|
||||
};
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
onEditCategory: function() {
|
||||
|
|
@ -432,10 +490,11 @@ define([
|
|||
this.changeDataRange(0, false, handlerDlg);
|
||||
},
|
||||
|
||||
changeDataRange: function(type, add, handlerDlg) {
|
||||
changeDataRange: function(type, props, add, handlerDlg) {
|
||||
var me = this;
|
||||
var win = new SSE.Views.ChartDataRangeDialog({
|
||||
type: type, //series
|
||||
isScatter: !!props.isScatter,
|
||||
handler: handlerDlg
|
||||
}).on('close', function() {
|
||||
me.show();
|
||||
|
|
@ -445,10 +504,50 @@ define([
|
|||
me.hide();
|
||||
win.show(xy.left + 160, xy.top + 125);
|
||||
win.setSettings({
|
||||
api : me.api
|
||||
api : me.api,
|
||||
props : props
|
||||
});
|
||||
},
|
||||
|
||||
onMoveClick: function(up) {
|
||||
var store = this.seriesList.store,
|
||||
length = store.length,
|
||||
rec = this.seriesList.getSelectedRec();
|
||||
if (rec) {
|
||||
var index = store.indexOf(rec),
|
||||
order = rec.get('order'),
|
||||
newindex = up ? Math.max(0, index-1) : Math.min(length-1, index+1),
|
||||
newrec = store.at(newindex),
|
||||
neworder = newrec.get('order');
|
||||
store.add(store.remove(rec), {at: newindex});
|
||||
rec.set('order', neworder);
|
||||
newrec.set('order', order);
|
||||
// this.chartSettings.changeSeriesOrder(rec.get('index'), neworder, newrec.get('index'), order);
|
||||
this.seriesList.selectRecord(rec);
|
||||
this.seriesList.scrollToRecord(rec);
|
||||
}
|
||||
this.updateMoveButtons();
|
||||
},
|
||||
|
||||
updateSeriesList: function(series, index) {
|
||||
var arr = [];
|
||||
var store = this.seriesList.store;
|
||||
for (var i = 0, len = series.length; i < len; i++)
|
||||
{
|
||||
var item = series[i],
|
||||
rec = new Common.UI.DataViewModel();
|
||||
rec.set({
|
||||
value: item.getSeriesName(),
|
||||
index: item.asc_getIdx(),
|
||||
order: item.asc_getOrder(),
|
||||
series: item
|
||||
});
|
||||
arr.push(rec);
|
||||
}
|
||||
store.reset(arr);
|
||||
(len>0) && this.seriesList.selectByIndex(Math.min(index || 0, store.length-1));
|
||||
},
|
||||
|
||||
textTitle: 'Chart Data',
|
||||
txtEmpty: 'This field is required',
|
||||
textInvalidRange: 'ERROR! Invalid cells range',
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ define([
|
|||
|
||||
initialize : function(options) {
|
||||
this.type = options.type || 0;
|
||||
this.isScatter = options.isScatter;
|
||||
|
||||
_.extend(this.options, {
|
||||
title: this.type==1 ? this.txtTitleSeries : this.txtTitleCategory
|
||||
|
|
@ -81,7 +82,7 @@ define([
|
|||
'<% if (type==1) { %>',
|
||||
'<tr>',
|
||||
'<td colspan="2">',
|
||||
'<label>' + this.txtValues + '</label>',
|
||||
'<label>' + (this.isScatter ? this.txtXValues : this.txtValues) + '</label>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
|
|
@ -92,6 +93,21 @@ define([
|
|||
'<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<% if (isScatter) { %>',
|
||||
'<tr>',
|
||||
'<td colspan="2">',
|
||||
'<label>' + this.txtYValues + '</label>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td style="padding-bottom: 8px;width: 100%;">',
|
||||
'<div id="id-dlg-chart-range-range3"></div>',
|
||||
'</td>',
|
||||
'<td style="padding-bottom: 8px;">',
|
||||
'<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
|
||||
'</td>',
|
||||
'</tr>',
|
||||
'<% } %>',
|
||||
'<% } %>',
|
||||
'</table>',
|
||||
'</div>'
|
||||
|
|
@ -134,6 +150,19 @@ define([
|
|||
}).on('button:click', _.bind(this.onSelectData, this));
|
||||
this.lblRange2 = $window.find('#id-dlg-chart-range-lbl2');
|
||||
|
||||
me.inputRange3 = new Common.UI.InputFieldBtn({
|
||||
el: $('#id-dlg-chart-range-range3'),
|
||||
style: '100%',
|
||||
textSelectData: 'Select data',
|
||||
validateOnChange: true,
|
||||
validateOnBlur: false
|
||||
}).on('changed:after', function(input, newValue, oldValue, e) {
|
||||
}).on('changing', function(input, newValue, oldValue, e) {
|
||||
if (newValue == oldValue) return;
|
||||
// me.onInputChanging(input, newValue, oldValue);
|
||||
}).on('button:click', _.bind(this.onSelectData, this));
|
||||
this.lblRange3 = $window.find('#id-dlg-chart-range-lbl3');
|
||||
|
||||
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
|
||||
|
||||
_.defer(function(){
|
||||
|
|
@ -149,6 +178,22 @@ define([
|
|||
setSettings: function(settings) {
|
||||
var me = this;
|
||||
this.api = settings.api;
|
||||
this.props = settings.props;
|
||||
|
||||
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(';'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getSettings: function () {
|
||||
|
|
@ -213,6 +258,8 @@ define([
|
|||
txtTitleCategory: 'Axis Labels',
|
||||
txtSeriesName: 'Series name',
|
||||
txtValues: 'Values',
|
||||
txtXValues: 'X Values',
|
||||
txtYValues: 'Y Values',
|
||||
txtAxisLabel: 'Axis label range',
|
||||
txtChoose: 'Choose range',
|
||||
textSelectData: 'Select data',
|
||||
|
|
|
|||
Loading…
Reference in a new issue