FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-12 22:56:34 +00:00
Code Issues Releases Wiki Activity

added configurable generalization of chartdata on clientside

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@2925 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes 2013-03-16 12:43:48 +00:00
parent d93c5673b1
commit ff41c73df5
5 changed files with 175 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fhem/www/frontend/CHANGED
View File

@ -1,3 +1,5 @@
Update vom 16.3.2013
* Implementation einer clientseitigen Generalisierung
Update vom 8.3.2013 Update vom 8.3.2013
* Erweiterung der Charts - Anzeige und Speicherung von dynamischen Zeiträumen (Woche, Tag,...) * Erweiterung der Charts - Anzeige und Speicherung von dynamischen Zeiträumen (Woche, Tag,...)
* Bugfixes in der Darstellung der gespeicherten Farben eines Charts * Bugfixes in der Darstellung der gespeicherten Farben eines Charts

6
fhem/www/frontend/controls_frontend.txt
View File

@ -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-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-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-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 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 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 2503 www/frontend/app/view/TableDataGridPanel.js
UPD 2013-03-06_11:11:22 1310 www/frontend/app/view/LineChartView.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-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 202 www/frontend/app/model/ReadingsModel.js
UPD 2013-03-06_11:11:22 338 www/frontend/app/model/SavedChartsModel.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 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 685 www/frontend/app/model/TableDataModel.js
UPD 2013-03-06_11:11:22 432 www/frontend/app/store/ChartStore.js UPD 2013-03-06_11:11:22 432 www/frontend/app/store/ChartStore.js

110
fhem/www/frontend/www/frontend/app/controller/ChartController.js
View File

@ -261,6 +261,8 @@ Ext.define('FHEM.controller.ChartController', {
endtime = me.getEndtimepicker().getValue(), endtime = me.getEndtimepicker().getValue(),
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], 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(), view = me.getLinechartview(),
store = me.getLinechartview().getStore(), store = me.getLinechartview().getStore(),
proxy = store.getProxy(); proxy = store.getProxy();
@ -353,7 +355,7 @@ Ext.define('FHEM.controller.ChartController', {
yField : 'VALUE', yField : 'VALUE',
title: yaxis, title: yaxis,
showInLegend: true, showInLegend: true,
smooth: 2, smooth: 0,
highlight: true, highlight: true,
fill: yaxisfillcheck, fill: yaxisfillcheck,
style: { style: {
@ -399,7 +401,7 @@ Ext.define('FHEM.controller.ChartController', {
}, },
axis: 'left', axis: 'left',
fill: y2axisfillcheck, fill: y2axisfillcheck,
smooth: 2, smooth: 0,
highlight: true, highlight: true,
showInLegend: true, showInLegend: true,
xField: 'TIMESTAMP2', xField: 'TIMESTAMP2',
@ -453,6 +455,8 @@ Ext.define('FHEM.controller.ChartController', {
for (var i = storelength; i < json.data.length; i++) { for (var i = storelength; i < json.data.length; i++) {
store.add( store.add(
{ {
'VALUE': '',
'TIMESTAMP': json.data[i].TIMESTAMP,
"VALUE2": json.data[i].VALUE, "VALUE2": json.data[i].VALUE,
"TIMESTAMP2": json.data[i].TIMESTAMP "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)) { if (!Ext.isEmpty(y3axis)) {
var y3series = { var y3series = {
@ -473,7 +481,7 @@ Ext.define('FHEM.controller.ChartController', {
}, },
axis: 'left', axis: 'left',
fill: y3axisfillcheck, fill: y3axisfillcheck,
smooth: 2, smooth: 0,
showInLegend: true, showInLegend: true,
xField: 'TIMESTAMP3', xField: 'TIMESTAMP3',
yField: 'VALUE3', yField: 'VALUE3',
@ -527,6 +535,10 @@ Ext.define('FHEM.controller.ChartController', {
for (var i = storelength; i < json.data.length; i++) { for (var i = storelength; i < json.data.length; i++) {
store.add( store.add(
{ {
"VALUE": "",
"TIMESTAMP": json.data[i].TIMESTAMP,
"VALUE2": "",
"TIMESTAMP2": json.data[i].TIMESTAMP,
"VALUE3": json.data[i].VALUE, "VALUE3": json.data[i].VALUE,
"TIMESTAMP3": json.data[i].TIMESTAMP "TIMESTAMP3": json.data[i].TIMESTAMP
} }
@ -534,6 +546,10 @@ Ext.define('FHEM.controller.ChartController', {
} }
} }
if (generalization.checked) {
me.generalizeChartData(generalizationfactor, 3);
}
} }
}, },
failure: function() { 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 //remove the old max values of y axis to get a dynamic range
delete view.axes.get(0).maximum; delete view.axes.get(0).maximum;
@ -648,9 +668,72 @@ Ext.define('FHEM.controller.ChartController', {
}, this, {single: true}); }, 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(), endtime = this.getEndtimepicker().getValue(),
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], 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(); view = this.getLinechartview();
//setting the starttime parameter in the chartconfig to the string of the radiofield, gets parsed on load //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 + '",'; var jsonConfig = '{"x":"' + xaxis + '","y":"' + yaxis + '","device":"' + device + '",';
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",'; jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
if(generalization.checked) {
jsonConfig += '"generalization":"true",';
jsonConfig += '"generalizationfactor":"' + generalizationfactor + '",';
}
jsonConfig += '"y2device":"' + y2device + '",'; jsonConfig += '"y2device":"' + y2device + '",';
jsonConfig += '"y2axis":"' + y2axis + '","y2axiscolorcombo":"' + y2axiscolorcombo + '",'; jsonConfig += '"y2axis":"' + y2axis + '","y2axiscolorcombo":"' + y2axiscolorcombo + '",';
jsonConfig += '"y2axisfillcheck":"' + y2axisfillcheck + '","y3axis":"' + y3axis + '",'; jsonConfig += '"y2axisfillcheck":"' + y2axisfillcheck + '","y3axis":"' + y3axis + '",';
@ -956,6 +1047,17 @@ Ext.define('FHEM.controller.ChartController', {
this.getEndtimepicker().setValue(end); 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.requestChartData();
this.getLinechartpanel().setTitle(name); this.getLinechartpanel().setTitle(name);
} else { } else {

17
fhem/www/frontend/www/frontend/app/model/ChartModel.js
View File

@ -23,26 +23,27 @@ Ext.define('FHEM.model.ChartModel', {
{ {
name: 'VALUE', name: 'VALUE',
type: 'float', type: 'float',
convert: function( v, record ) { convert: function(v,record) {
return record.parseToNumber(v); return record.parseToNumber(v, 1, record);
} }
},{ },{
name: 'VALUE2', name: 'VALUE2',
type: 'float', type: 'float',
convert: function( v, record ) { convert: function(v,record) {
return record.parseToNumber(v); return record.parseToNumber(v, 2, record);
} }
},{ },{
name: 'VALUE3', name: 'VALUE3',
type: 'float', type: 'float',
convert: function( v, record ) { convert: function(v,record) {
return record.parseToNumber(v); return record.parseToNumber(v, 3, record);
} }
} }
], ],
parseToNumber: function(value) { parseToNumber: function(value, idx, rec) {
if (value === "") { if (value === "") {
return 0; //we will return nothing
} else if (parseFloat(value, 10).toString().toUpperCase() === "NAN") { } else if (parseFloat(value, 10).toString().toUpperCase() === "NAN") {
if (Ext.isDefined(FHEM) && Ext.isDefined(FHEM.userconfig)) { if (Ext.isDefined(FHEM) && Ext.isDefined(FHEM.userconfig)) {
var convertednumber = 0; var convertednumber = 0;

61
fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
View File

@ -426,16 +426,16 @@ Ext.define('FHEM.view.LineChartPanel', {
labelWidth: 140, labelWidth: 140,
allowBlank: true, allowBlank: true,
defaults: { defaults: {
labelWidth: 60, labelWidth: 42,
padding: "0 25px 0 0", padding: "0 25px 0 0",
checked: false checked: false
}, },
items: [ items: [
{ fieldLabel: 'this year', name: 'rb', inputValue: 'year' }, { fieldLabel: 'yearly', name: 'rb', inputValue: 'year' },
{ fieldLabel: 'this month', name: 'rb', inputValue: 'month' }, { fieldLabel: 'monthly', name: 'rb', inputValue: 'month' },
{ fieldLabel: 'this week', name: 'rb', inputValue: 'week' }, { fieldLabel: 'weekly', name: 'rb', inputValue: 'week' },
{ fieldLabel: 'this day', name: 'rb', inputValue: 'day' }, { fieldLabel: 'daily', name: 'rb', inputValue: 'day' },
{ fieldLabel: 'this hour', name: 'rb', inputValue: 'hour' } { fieldLabel: 'hourly', name: 'rb', inputValue: 'hour' }
] ]
} }
] ]
@ -476,6 +476,55 @@ Ext.define('FHEM.view.LineChartPanel', {
width: 100, width: 100,
text: 'Step forward', text: 'Step forward',
name: 'stepforward' 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'
} }
] ]
} }