[SSE] Show chart data settings

apps/spreadsheeteditor/main/app/view/ChartDataDialog.js

@@ -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) {
+            var rec = this.seriesList.getSelectedRec();
-                if (result == 'ok') {
+            if (rec) {
-                    var changedValue = dlg.getSettings();
+                var series = rec.get('series'),
-                }
+                    isScatter = series.asc_IsScatter();
-            };
+                var handlerDlg = function(dlg, result) {
-            this.changeDataRange(1, false, handlerDlg);
+                    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',

apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js

@@ -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',