mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-03-12 16:46:35 +00:00
- 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
This commit is contained in:
johannnes
parent
010b6cb57b
commit
cd4dc1a527
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 + ')');
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -34,7 +34,7 @@ Ext.define('FHEM.view.Viewport', {
|
||||
{
|
||||
xtype: 'panel',
|
||||
html: '<p><img src="../../fhem/images/default/fhemicon.png" height="70px"</></p><h1 class="x-panel-header">Frontend</h1>',
|
||||
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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user