From cd4dc1a527d6662c88d8d9431bff719fd53be4dd Mon Sep 17 00:00:00 2001
From: johannnes <>
Date: Tue, 9 Apr 2013 17:17:44 +0000
Subject: [PATCH] - added steps functionality similar to gplot - removed x-axis
selection as only timestmap makes sense
git-svn-id: https://svn.fhem.de/fhem/trunk@3058 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
fhem/www/frontend/CHANGED | 3 +
fhem/www/frontend/controls_frontend.txt | 8 +--
.../app/controller/ChartController.js | 61 +++++++++++++------
.../frontend/app/controller/MainController.js | 2 +-
.../www/frontend/app/view/LineChartPanel.js | 27 ++------
.../www/frontend/app/view/Viewport.js | 4 +-
6 files changed, 59 insertions(+), 46 deletions(-)
diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED
index dee3fa863..02d5a4985 100644
--- a/fhem/www/frontend/CHANGED
+++ b/fhem/www/frontend/CHANGED
@@ -1,3 +1,6 @@
+Update vom 09.4.2013
+ * Step Funktion für Charts hinzugefügt
+ * X-Achsenauswahl entfernt, da nur Timestmap Sinn macht
Update vom 03.4.2013
* Bugfix in der Verarbeitung der Userconfig für nicht numerische Werte
* Icons hinzugefügt
diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt
index a0e8fba3e..ebcca138f 100644
--- a/fhem/www/frontend/controls_frontend.txt
+++ b/fhem/www/frontend/controls_frontend.txt
@@ -76,12 +76,12 @@ UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png
UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png
UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png
UPD 2013-04-01_07:05:33 2154 www/frontend/app/app.js
-UPD 2013-04-03_07:26:41 26743 www/frontend/app/view/LineChartPanel.js
+UPD 2013-04-09_07:08:49 26062 www/frontend/app/view/LineChartPanel.js
UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js
-UPD 2013-04-03_07:26:41 8588 www/frontend/app/view/Viewport.js
+UPD 2013-04-09_07:08:49 8588 www/frontend/app/view/Viewport.js
UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js
-UPD 2013-04-03_07:04:19 44036 www/frontend/app/controller/ChartController.js
-UPD 2013-04-03_07:04:20 13004 www/frontend/app/controller/MainController.js
+UPD 2013-04-09_07:08:13 45636 www/frontend/app/controller/ChartController.js
+UPD 2013-04-09_07:08:13 13004 www/frontend/app/controller/MainController.js
UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js
UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js
UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js
diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js
index 867726641..d856e5e7c 100644
--- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js
@@ -90,12 +90,12 @@ Ext.define('FHEM.controller.ChartController', {
var me = this;
//getting the necessary values
- var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]');
- var xaxes = Ext.ComponentQuery.query('combobox[name=xaxiscombo]');
- var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]');
- var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
- var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
- var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
+ var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
+ yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
+ yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'),
+ yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'),
+ yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'),
+ yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
@@ -128,7 +128,7 @@ Ext.define('FHEM.controller.ChartController', {
me.minYValue = 9999999;
//setting x-axis title
- chart.axes.get(1).setTitle(xaxes[0]);
+ chart.axes.get(1).setTitle("TIMESTAMP");
//check if timerange or dynamic time should be used
dynamicradio.eachBox(function(box, idx){
@@ -194,12 +194,15 @@ Ext.define('FHEM.controller.ChartController', {
var i = 0;
Ext.each(yaxes, function(yaxis) {
var device = devices[i].getValue(),
- xaxis = xaxes[i].getValue(),
yaxis = yaxes[i].getValue(),
yaxiscolorcombo = yaxescolorcombos[i].getValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
+ yaxisstepcheck = yaxesstepcheck[i].checked,
yaxisstatistics = yaxesstatistics[i].getValue();
- me.populateAxis(i, yaxes.length, device, xaxis, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstatistics, dbstarttime, dbendtime);
+ if(yaxis === "" || yaxis === null) {
+ yaxis = yaxes[i].getRawValue();
+ }
+ me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, yaxisstatistics, dbstarttime, dbendtime);
i++;
});
@@ -264,7 +267,7 @@ Ext.define('FHEM.controller.ChartController', {
/**
* fill the axes with data
*/
- populateAxis: function(i, axeslength, device, xaxis, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstatistics, dbstarttime, dbendtime) {
+ populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, yaxisstatistics, dbstarttime, dbendtime) {
var me = this,
chart = me.getChart(),
@@ -282,7 +285,7 @@ Ext.define('FHEM.controller.ChartController', {
var url;
if (!Ext.isDefined(yaxisstatistics) || yaxisstatistics === "none" || Ext.isEmpty(yaxisstatistics)) {
url += '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+' + dbstarttime + '+' + dbendtime + '+';
- url +=device + '+timerange+' + xaxis + '+' + yaxis;
+ url +=device + '+timerange+' + "TIMESTAMP" + '+' + yaxis;
url += '&XHR=1';
} else { //setup url to get statistics
url += '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+' + dbstarttime + '+' + dbendtime + '+';
@@ -300,7 +303,7 @@ Ext.define('FHEM.controller.ChartController', {
url += '+yearstats+';
}
- url += xaxis + '+' + yaxis;
+ url += 'TIMESTAMP' + '+' + yaxis;
url += '&XHR=1';
}
@@ -407,6 +410,24 @@ Ext.define('FHEM.controller.ChartController', {
}
item.set(valuetext, valuestring);
item.set(timestamptext, json.data[j].TIMESTAMP);
+
+ //check if we have to ues steps
+ //if yes, create a new record with the same value as the last one
+ //and a timestamp 1 second less than the actual record to add
+ if(yaxisstepcheck) {
+ if (store.last()) {
+ var lastrec = store.last();
+ var datetomodify = new Date(json.data[j].TIMESTAMP);
+ var modtimestamp = Ext.Date.add(datetomodify, Ext.Date.SECOND, -1);
+ var stepitem = lastrec.copy();
+ Ext.iterate(stepitem.data, function(key, value) {
+ if (key.indexOf("TIMESTAMP") >= 0) {
+ stepitem.set(key, modtimestamp);
+ }
+ });
+ store.add(stepitem);
+ }
+ }
store.add(item);
//rewrite of valuestring to get always numbers, even when text as value was passed to model
@@ -663,10 +684,10 @@ Ext.define('FHEM.controller.ChartController', {
//getting the necessary values
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]');
- var xaxes = Ext.ComponentQuery.query('combobox[name=xaxiscombo]');
var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]');
var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
+ var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]');
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]');
@@ -699,15 +720,16 @@ Ext.define('FHEM.controller.ChartController', {
Ext.each(devices, function(dev) {
var device = dev.getValue(),
- xaxis = xaxes[i].getValue(),
yaxis = yaxes[i].getValue(),
yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
+ yaxisstepcheck = yaxesstepchecks[i].checked,
yaxisstatistics = yaxesstatistics[i].getValue();
if (i === 0) {
- jsonConfig += '"x":"' + xaxis + '","y":"' + yaxis + '","device":"' + device + '",';
+ jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",';
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
+ jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",';
if (yaxisstatistics !== "none") {
jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",';
}
@@ -716,10 +738,12 @@ Ext.define('FHEM.controller.ChartController', {
devicename = "y" + (i + 1) + "device",
colorname = "y" + (i + 1) + "axiscolorcombo",
fillname = "y" + (i + 1) + "axisfillcheck",
+ stepname = "y" + (i + 1) + "axisstepcheck",
statsname = "y" + (i + 1) + "axisstatistics";
jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",';
jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",';
+ jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",';
if (yaxisstatistics !== "none") {
jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",';
}
@@ -824,11 +848,11 @@ Ext.define('FHEM.controller.ChartController', {
yaxeslength++;
}
- var xaxes = Ext.ComponentQuery.query('combobox[name=xaxiscombo]');
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]');
var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]');
var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
+ var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]');
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var i = 0;
@@ -838,9 +862,9 @@ Ext.define('FHEM.controller.ChartController', {
yaxes[i].getStore().getProxy().url = url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + chartdata.device + '+getreadings&XHR=1';
yaxes[i].setDisabled(false);
yaxes[i].setValue(chartdata.y);
- xaxes[i].setValue(chartdata.x);
yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo);
yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck);
+ yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck);
if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") {
yaxesstatistics[i].setValue(chartdata.yaxisstatistics);
@@ -853,15 +877,16 @@ Ext.define('FHEM.controller.ChartController', {
axisname = "y" + (i + 1) + "axis",
axiscolorcombo = axisname + "colorcombo",
axisfillcheck = axisname + "fillcheck",
+ axisstepcheck = axisname + "stepcheck",
axisstatistics = axisname + "statistics";
eval('devices[i].setValue(chartdata.' + axisdevice + ')');
yaxes[i].getStore().getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + eval('chartdata.' + axisdevice) + '+getreadings&XHR=1';
yaxes[i].setDisabled(false);
- xaxes[i].setValue(chartdata.x);
eval('yaxes[i].setValue(chartdata.' + axisname + ')');
eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')');
eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')');
+ eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')');
if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") {
eval('yaxesstatistics[i].setValue(chartdata.' + axisstatistics + ')');
diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js
index 5f0f546a2..4eff729d6 100644
--- a/fhem/www/frontend/www/frontend/app/controller/MainController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js
@@ -93,7 +93,7 @@ Ext.define('FHEM.controller.MainController', {
if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield();
- sp.setText(FHEM.version + "; Frontend Version: 0.4 - 2013-04-03");
+ sp.setText(FHEM.version + "; Frontend Version: 0.4 - 2013-04-09");
}
//setup west accordion / treepanel
diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
index 38c3c6688..3c4e70261 100644
--- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
+++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
@@ -431,27 +431,6 @@ Ext.define('FHEM.view.LineChartPanel', {
}
}
},
- {
- xtype: 'combobox',
- name: 'xaxiscombo',
- fieldLabel: 'Select X Axis',
- labelWidth: 90,
- inputWidth: 100,
- store: Ext.create('Ext.data.Store', {
- fields: ['name'],
- data : [
- {'name':'TIMESTAMP'},
- {'name':'DEVICE'},
- {'name':'TYPE'},
- {'name':'EVENT'},
- {'name':'READING'},
- {'name':'VALUE'},
- {'name':'UNIT'}
- ]
- }),
- displayField: 'name',
- valueField: 'name'
- },
{
xtype: 'combobox',
name: 'yaxiscombo',
@@ -500,6 +479,12 @@ Ext.define('FHEM.view.LineChartPanel', {
name: 'yaxisfillcheck',
boxLabel: 'Fill'
},
+ {
+ xtype: 'checkboxfield',
+ name: 'yaxisstepcheck',
+ boxLabel: 'Steps',
+ tooltip: 'Check, if the chart should be shown with steps instead of a linear Line'
+ },
{
xtype: 'combobox',
name: 'yaxisstatisticscombo',
diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js
index c61f5a2da..4d752bd35 100644
--- a/fhem/www/frontend/www/frontend/app/view/Viewport.js
+++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js
@@ -34,7 +34,7 @@ Ext.define('FHEM.view.Viewport', {
{
xtype: 'panel',
html: '
',
- width: '30%',
+ width: '25%',
border: false
},
{
@@ -48,7 +48,7 @@ Ext.define('FHEM.view.Viewport', {
{
xtype: 'panel',
border: false,
- width: '20%',
+ width: '25%',
items: [
{
xtype: 'button',