diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index 0d0fb6ab4..f179a913c 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,3 +1,5 @@ +Update vom 16.3.2013 + * Implementation einer clientseitigen Generalisierung Update vom 8.3.2013 * Erweiterung der Charts - Anzeige und Speicherung von dynamischen Zeiträumen (Woche, Tag,...) * Bugfixes in der Darstellung der gespeicherten Farben eines Charts diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index a9ee91316..f3dfac39b 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -42,16 +42,16 @@ UPD 2013-03-08_07:13:10 563 www/frontend/index.html UPD 2013-03-06_11:11:22 236 www/frontend/README.txt UPD 2013-03-08_01:44:54 613 www/frontend/app/userconfig.js UPD 2013-03-06_11:11:22 1856 www/frontend/app/app.js -UPD 2013-03-08_06:58:48 22644 www/frontend/app/view/LineChartPanel.js +UPD 2013-03-16_06:58:22 25147 www/frontend/app/view/LineChartPanel.js UPD 2013-03-06_11:11:22 7826 www/frontend/app/view/Viewport.js UPD 2013-03-06_11:11:22 4269 www/frontend/app/view/DevicePanel.js UPD 2013-03-06_11:11:22 2503 www/frontend/app/view/TableDataGridPanel.js UPD 2013-03-06_11:11:22 1310 www/frontend/app/view/LineChartView.js -UPD 2013-03-08_06:58:22 46090 www/frontend/app/controller/ChartController.js +UPD 2013-03-16_06:58:22 50691 www/frontend/app/controller/ChartController.js UPD 2013-03-08_06:15:36 10876 www/frontend/app/controller/MainController.js UPD 2013-03-06_11:11:22 202 www/frontend/app/model/ReadingsModel.js UPD 2013-03-06_11:11:22 338 www/frontend/app/model/SavedChartsModel.js -UPD 2013-03-08_05:43:31 1751 www/frontend/app/model/ChartModel.js +UPD 2013-03-16_06:58:22 1809 www/frontend/app/model/ChartModel.js UPD 2013-03-06_11:11:22 198 www/frontend/app/model/DeviceModel.js UPD 2013-03-06_11:11:22 685 www/frontend/app/model/TableDataModel.js UPD 2013-03-06_11:11:22 432 www/frontend/app/store/ChartStore.js diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index cc3d211b0..3ef40005c 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -261,6 +261,8 @@ Ext.define('FHEM.controller.ChartController', { endtime = me.getEndtimepicker().getValue(), dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], + generalization = Ext.ComponentQuery.query('radio[boxLabel=active]')[0], + generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(), view = me.getLinechartview(), store = me.getLinechartview().getStore(), proxy = store.getProxy(); @@ -353,7 +355,7 @@ Ext.define('FHEM.controller.ChartController', { yField : 'VALUE', title: yaxis, showInLegend: true, - smooth: 2, + smooth: 0, highlight: true, fill: yaxisfillcheck, style: { @@ -399,7 +401,7 @@ Ext.define('FHEM.controller.ChartController', { }, axis: 'left', fill: y2axisfillcheck, - smooth: 2, + smooth: 0, highlight: true, showInLegend: true, xField: 'TIMESTAMP2', @@ -453,6 +455,8 @@ Ext.define('FHEM.controller.ChartController', { for (var i = storelength; i < json.data.length; i++) { store.add( { + 'VALUE': '', + 'TIMESTAMP': json.data[i].TIMESTAMP, "VALUE2": json.data[i].VALUE, "TIMESTAMP2": json.data[i].TIMESTAMP } @@ -461,6 +465,10 @@ Ext.define('FHEM.controller.ChartController', { } + if (generalization.checked) { + me.generalizeChartData(generalizationfactor, 2); + } + if (!Ext.isEmpty(y3axis)) { var y3series = { @@ -473,7 +481,7 @@ Ext.define('FHEM.controller.ChartController', { }, axis: 'left', fill: y3axisfillcheck, - smooth: 2, + smooth: 0, showInLegend: true, xField: 'TIMESTAMP3', yField: 'VALUE3', @@ -527,6 +535,10 @@ Ext.define('FHEM.controller.ChartController', { for (var i = storelength; i < json.data.length; i++) { store.add( { + "VALUE": "", + "TIMESTAMP": json.data[i].TIMESTAMP, + "VALUE2": "", + "TIMESTAMP2": json.data[i].TIMESTAMP, "VALUE3": json.data[i].VALUE, "TIMESTAMP3": json.data[i].TIMESTAMP } @@ -534,6 +546,10 @@ Ext.define('FHEM.controller.ChartController', { } } + + if (generalization.checked) { + me.generalizeChartData(generalizationfactor, 3); + } } }, failure: function() { @@ -641,6 +657,10 @@ Ext.define('FHEM.controller.ChartController', { } + if (generalization.checked) { + me.generalizeChartData(generalizationfactor, 1); + } + //remove the old max values of y axis to get a dynamic range delete view.axes.get(0).maximum; @@ -648,9 +668,72 @@ Ext.define('FHEM.controller.ChartController', { }, this, {single: true}); - } + }, + + /** + * + */ + generalizeChartData: function(generalizationfactor, index) { + + var store = this.getLinechartview().getStore(); + + this.factorpositive = 1 + (generalizationfactor / 100), + this.factornegative = 1 - (generalizationfactor / 100), + this.lastValue = null, + this.lastItem = null, + this.recsToRemove = []; + + Ext.each(store.data.items, function(item) { + + var value; + + if (index === 1) { + value = item.get('VALUE'); + } else if (index === 2) { + value = item.get('VALUE2'); + } else if (index === 3) { + value = item.get('VALUE3'); + } + + var one = this.lastValue / 100; + var diff = value / one / 100; + + if (diff > this.factorpositive || diff < this.factornegative) { + + if (this.lastItem) { + if (index === 1) { + this.lastItem.set('VALUE', this.lastValue); + } else if (index === 2) { + this.lastItem.set('VALUE2', this.lastValue); + } else if (index === 3) { + this.lastItem.set('VALUE3', this.lastValue); + } + } + + this.lastValue = value; + this.lastItem = item; + + } else { + + //keep last record + if (store.last() !== item) { + if (index === 1) { + item.set('VALUE', ''); + } else if (index === 2) { + item.set('VALUE2', ''); + } else if (index === 3) { + item.set('VALUE3', ''); + } + } + + + this.lastValue = value; + this.lastItem = item; + } + + }, this); }, @@ -792,6 +875,8 @@ Ext.define('FHEM.controller.ChartController', { endtime = this.getEndtimepicker().getValue(), dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], + generalization = Ext.ComponentQuery.query('radio[boxLabel=active]')[0], + generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(), view = this.getLinechartview(); //setting the starttime parameter in the chartconfig to the string of the radiofield, gets parsed on load @@ -805,6 +890,12 @@ Ext.define('FHEM.controller.ChartController', { var jsonConfig = '{"x":"' + xaxis + '","y":"' + yaxis + '","device":"' + device + '",'; jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",'; + + if(generalization.checked) { + jsonConfig += '"generalization":"true",'; + jsonConfig += '"generalizationfactor":"' + generalizationfactor + '",'; + } + jsonConfig += '"y2device":"' + y2device + '",'; jsonConfig += '"y2axis":"' + y2axis + '","y2axiscolorcombo":"' + y2axiscolorcombo + '",'; jsonConfig += '"y2axisfillcheck":"' + y2axisfillcheck + '","y3axis":"' + y3axis + '",'; @@ -956,6 +1047,17 @@ Ext.define('FHEM.controller.ChartController', { this.getEndtimepicker().setValue(end); } + var genbox = Ext.ComponentQuery.query('radio[boxLabel=active]')[0], + genfaccombo = Ext.ComponentQuery.query('combobox[name=genfactor]')[0]; + + if (chartdata.generalization && chartdata.generalization === "true") { + genbox.setValue(true); + genfaccombo.setValue(chartdata.generalizationfactor); + } else { + genfaccombo.setValue('30'); + genbox.setValue(false); + } + this.requestChartData(); this.getLinechartpanel().setTitle(name); } else { diff --git a/fhem/www/frontend/www/frontend/app/model/ChartModel.js b/fhem/www/frontend/www/frontend/app/model/ChartModel.js index f08092620..133913174 100644 --- a/fhem/www/frontend/www/frontend/app/model/ChartModel.js +++ b/fhem/www/frontend/www/frontend/app/model/ChartModel.js @@ -23,26 +23,27 @@ Ext.define('FHEM.model.ChartModel', { { name: 'VALUE', type: 'float', - convert: function( v, record ) { - return record.parseToNumber(v); + convert: function(v,record) { + return record.parseToNumber(v, 1, record); } },{ name: 'VALUE2', type: 'float', - convert: function( v, record ) { - return record.parseToNumber(v); + convert: function(v,record) { + return record.parseToNumber(v, 2, record); } },{ name: 'VALUE3', type: 'float', - convert: function( v, record ) { - return record.parseToNumber(v); + convert: function(v,record) { + return record.parseToNumber(v, 3, record); } } ], - parseToNumber: function(value) { + parseToNumber: function(value, idx, rec) { + if (value === "") { - return 0; + //we will return nothing } else if (parseFloat(value, 10).toString().toUpperCase() === "NAN") { if (Ext.isDefined(FHEM) && Ext.isDefined(FHEM.userconfig)) { var convertednumber = 0; diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js index e73566e6e..7e84d18fe 100644 --- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js +++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js @@ -426,16 +426,16 @@ Ext.define('FHEM.view.LineChartPanel', { labelWidth: 140, allowBlank: true, defaults: { - labelWidth: 60, + labelWidth: 42, padding: "0 25px 0 0", checked: false }, items: [ - { fieldLabel: 'this year', name: 'rb', inputValue: 'year' }, - { fieldLabel: 'this month', name: 'rb', inputValue: 'month' }, - { fieldLabel: 'this week', name: 'rb', inputValue: 'week' }, - { fieldLabel: 'this day', name: 'rb', inputValue: 'day' }, - { fieldLabel: 'this hour', name: 'rb', inputValue: 'hour' } + { fieldLabel: 'yearly', name: 'rb', inputValue: 'year' }, + { fieldLabel: 'monthly', name: 'rb', inputValue: 'month' }, + { fieldLabel: 'weekly', name: 'rb', inputValue: 'week' }, + { fieldLabel: 'daily', name: 'rb', inputValue: 'day' }, + { fieldLabel: 'hourly', name: 'rb', inputValue: 'hour' } ] } ] @@ -476,6 +476,55 @@ Ext.define('FHEM.view.LineChartPanel', { width: 100, text: 'Step forward', name: 'stepforward' + }, + { + xtype: 'radio', + width: 160, + fieldLabel: 'Generalization', + boxLabel: 'active', + name: 'generalization', + listeners: { + change: function(radio, state) { + if (state) { + radio.up().down('combobox[name=genfactor]').setDisabled(false); + } else { + radio.up().down('combobox[name=genfactor]').setDisabled(true); + } + } + } + }, + { + xtype: 'radio', + width: 80, + boxLabel: 'disabled', + checked: true, + name: 'generalization' + }, + { + xtype: 'combo', + width: 120, + name: 'genfactor', + disabled: true, + fieldLabel: 'Factor', + labelWidth: 50, + store: Ext.create('Ext.data.Store', { + fields: ['displayval', 'val'], + data : [ + {"displayval": "10%", "val":"10"}, + {"displayval": "20%", "val":"20"}, + {"displayval": "30%", "val":"30"}, + {"displayval": "40%", "val":"40"}, + {"displayval": "50%", "val":"50"}, + {"displayval": "60%", "val":"60"}, + {"displayval": "70%", "val":"70"}, + {"displayval": "80%", "val":"80"}, + {"displayval": "90%", "val":"90"} + ] + }), + fields: ['displayval', 'val'], + displayField: 'displayval', + valueField: 'val', + value: '30' } ] }