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

- added multiple y-scales

Browse Source 
- remove bug in steps function

git-svn-id: https://svn.fhem.de/fhem/trunk@3071 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes 2013-04-14 15:55:49 +00:00
parent d7cfbea392
commit 003a49a0af
5 changed files with 183 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fhem/www/frontend/CHANGED
View File

@ -1,3 +1,6 @@
Update vom 14.4.2013
* Multiple Y-Skalen hinzugefügt (linke + rechte Achse)
* Bug in Stepansicht behoben
Update vom 09.4.2013
* Step Funktion für Charts hinzugefügt
* X-Achsenauswahl entfernt, da nur Timestmap Sinn macht

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

@ -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-09_07:08:49 26062 www/frontend/app/view/LineChartPanel.js
UPD 2013-04-14_05:52:20 27637 www/frontend/app/view/LineChartPanel.js
UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.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-09_07:38:16 45657 www/frontend/app/controller/ChartController.js
UPD 2013-04-09_07:08:13 13004 www/frontend/app/controller/MainController.js
UPD 2013-04-14_05:52:09 49258 www/frontend/app/controller/ChartController.js
UPD 2013-04-14_05:52:09 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

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

@ -12,6 +12,16 @@ Ext.define('FHEM.controller.ChartController', {
* minValue of Y Axis gets saved here as reference
*/
minYValue: 9999999,
/**
* maxValue of Y2 Axis gets saved here as reference
*/
maxY2Value: 0,
/**
* minValue of Y2 Axis gets saved here as reference
*/
minY2Value: 9999999,
refs: [
{
@ -95,7 +105,8 @@ Ext.define('FHEM.controller.ChartController', {
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]');
yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'),
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
@ -118,6 +129,10 @@ Ext.define('FHEM.controller.ChartController', {
chart.series.removeAt(i);
}
//Reset axis titles
chart.axes.get(0).setTitle("");
chart.axes.get(1).setTitle("");
//reset zoomValues
chartpanel.setLastYmax(null);
chartpanel.setLastYmin(null);
@ -126,10 +141,9 @@ Ext.define('FHEM.controller.ChartController', {
me.maxYValue = 0;
me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
//setting x-axis title
chart.axes.get(1).setTitle("TIMESTAMP");
//check if timerange or dynamic time should be used
dynamicradio.eachBox(function(box, idx){
var date = new Date();
@ -198,11 +212,12 @@ Ext.define('FHEM.controller.ChartController', {
yaxiscolorcombo = yaxescolorcombos[i].getValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepcheck[i].checked,
yaxisstatistics = yaxesstatistics[i].getValue();
yaxisstatistics = yaxesstatistics[i].getValue(),
axisside = axissideradio[i].getChecked()[0].getSubmitValue();
if(yaxis === "" || yaxis === null) {
yaxis = yaxes[i].getRawValue();
}
me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, yaxisstatistics, dbstarttime, dbendtime);
me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime);
i++;
});
@ -267,7 +282,7 @@ Ext.define('FHEM.controller.ChartController', {
/**
* fill the axes with data
*/
populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, yaxisstatistics, dbstarttime, dbendtime) {
populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime) {
var me = this,
chart = me.getChart(),
@ -277,9 +292,9 @@ Ext.define('FHEM.controller.ChartController', {
generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
if (i > 0) {
var yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo);
var yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
} else {
var yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo);
var yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
}
var url;
@ -394,8 +409,8 @@ Ext.define('FHEM.controller.ChartController', {
//add records to store
for (var j = 0; j < json.data.length; j++) {
var item = Ext.create('FHEM.model.ChartModel');
var item = Ext.create('FHEM.model.ChartModel');
Ext.iterate(item.data, function(key, value) {
if (key.indexOf("TIMESTAMP") >= 0) {
item.set(key, json.data[j].TIMESTAMP);
@ -413,12 +428,13 @@ Ext.define('FHEM.controller.ChartController', {
//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
//and a timestamp 1 millisecond less than the actual record to add.
// only do this, when last record is from same axis
if(yaxisstepcheck) {
if (store.last()) {
if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") {
var lastrec = store.last();
var datetomodify = Ext.Date.parse(json.data[j].TIMESTAMP, "Y-m-d H:i:s");
var modtimestamp = Ext.Date.add(datetomodify, Ext.Date.SECOND, -1);
var modtimestamp = Ext.Date.add(datetomodify, Ext.Date.MILLI, -1);
var stepitem = lastrec.copy();
Ext.iterate(stepitem.data, function(key, value) {
if (key.indexOf("TIMESTAMP") >= 0) {
@ -426,20 +442,30 @@ Ext.define('FHEM.controller.ChartController', {
}
});
store.add(stepitem);
}
}
}
store.add(item);
//rewrite of valuestring to get always numbers, even when text as value was passed to model
valuestring = store.last().get(valuetext);
valuestring = item.get(valuetext);
// recheck if our min and max values are still valid
if (me.minYValue > valuestring) {
me.minYValue = valuestring;
}
if (me.maxYValue < valuestring) {
me.maxYValue = valuestring;
if (yseries.axis === "left") {
if (me.minYValue > valuestring) {
me.minYValue = valuestring;
}
if (me.maxYValue < valuestring) {
me.maxYValue = valuestring;
}
} else if (yseries.axis === "right") {
if (me.minY2Value > valuestring) {
me.minY2Value = valuestring;
}
if (me.maxY2Value < valuestring) {
me.maxY2Value = valuestring;
}
}
}
if (generalization.checked) {
@ -501,32 +527,76 @@ Ext.define('FHEM.controller.ChartController', {
//remove the old max values of y axis to get a dynamic range
delete chart.axes.get(0).maximum;
delete chart.axes.get(0).minimum;
delete chart.axes.get(1).maximum;
delete chart.axes.get(1).minimum;
chart.axes.get(0).maximum = me.maxYValue;
if (me.minYValue === 9999999) {
chart.axes.get(0).minimum = 0;
chart.axes.get(1).maximum = me.maxY2Value;
// adopt the values from the other y-axis, if we have no values assigned at all
if (chart.axes.get(0).maximum === 0 && chart.axes.get(1).maximum > 0) {
chart.axes.get(0).maximum = chart.axes.get(1).maximum;
}
if (me.minYValue === 9999999 && me.minY2Value < 9999999) {
chart.axes.get(0).minimum = me.minY2Value;
} else {
chart.axes.get(0).minimum = me.minYValue;
}
if (chart.axes.get(1).maximum === 0 && chart.axes.get(0).maximum > 0) {
chart.axes.get(1).maximum = chart.axes.get(0).maximum;
}
if (me.minY2Value === 9999999 && me.minYValue < 9999999) {
chart.axes.get(1).minimum = me.minYValue;
} else {
chart.axes.get(1).minimum = me.minY2Value;
}
// set the x axis range dependent on user given timerange
var starttime = me.getStarttimepicker().getValue(),
endtime = me.getEndtimepicker().getValue();
chart.axes.get(1).fromDate = starttime;
chart.axes.get(1).toDate = endtime;
chart.axes.get(1).processView();
var chart = me.getChart(),
store = chart.getStore(),
starttime = new Date(me.getStarttimepicker().getValue()),
endtime = new Date(me.getEndtimepicker().getValue());
chart.axes.get(2).fromDate = starttime;
chart.axes.get(2).toDate = endtime;
chart.axes.get(2).processView();
chart.redraw();
chart.setLoading(false);
},
/**
* create a single series for the chart
*/
createSeries: function(yfield, title, fill, color) {
createSeries: function(yfield, title, fill, color, axisside) {
//setting axistitle and fontsize
var chart = this.getChart(),
axis;
if (axisside === "left") {
axis = chart.axes.get(0);
} else if (axisside === "right") {
axis = chart.axes.get(1);
}
var currenttitle = axis.title;
if (currenttitle === "") {
axis.setTitle(title);
} else {
axis.setTitle(axis.title + " / " + title);
}
axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif";
//adding linked yfield to axis fields
axis.fields.push(yfield);
var series = {
type : 'line',
axis : 'left',
axis : axisside,
xField : 'TIMESTAMP',
yField : yfield,
title: title,
@ -645,6 +715,8 @@ Ext.define('FHEM.controller.ChartController', {
//reset y-axis max
me.maxYValue = 0;
me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d H:i:s'),
@ -688,6 +760,7 @@ Ext.define('FHEM.controller.ChartController', {
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 axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]');
@ -724,12 +797,15 @@ Ext.define('FHEM.controller.ChartController', {
yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepchecks[i].checked,
axisside = axissideradio[i].getChecked()[0].getSubmitValue();
yaxisstatistics = yaxesstatistics[i].getValue();
if (i === 0) {
jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",';
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",';
jsonConfig += '"yaxisside":"' + axisside + '",';
if (yaxisstatistics !== "none") {
jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",';
}
@ -739,11 +815,13 @@ Ext.define('FHEM.controller.ChartController', {
colorname = "y" + (i + 1) + "axiscolorcombo",
fillname = "y" + (i + 1) + "axisfillcheck",
stepname = "y" + (i + 1) + "axisstepcheck",
sidename = "y" + (i + 1) + "axisside",
statsname = "y" + (i + 1) + "axisstatistics";
jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",';
jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",';
jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",';
jsonConfig += '"' + sidename + '":"' + axisside + '",';
if (yaxisstatistics !== "none") {
jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",';
}
@ -833,6 +911,8 @@ Ext.define('FHEM.controller.ChartController', {
//reset y-axis max
me.maxYValue = 0;
me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
//count axes
var axescount = 0;
@ -853,6 +933,7 @@ Ext.define('FHEM.controller.ChartController', {
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 axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
var yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var i = 0;
@ -865,6 +946,7 @@ Ext.define('FHEM.controller.ChartController', {
yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo);
yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck);
yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck);
axissideradio[i].items.items[0].setValue(chartdata.yaxisside);
if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") {
yaxesstatistics[i].setValue(chartdata.yaxisstatistics);
@ -878,6 +960,7 @@ Ext.define('FHEM.controller.ChartController', {
axiscolorcombo = axisname + "colorcombo",
axisfillcheck = axisname + "fillcheck",
axisstepcheck = axisname + "stepcheck",
axisside = axisname + "side",
axisstatistics = axisname + "statistics";
eval('devices[i].setValue(chartdata.' + axisdevice + ')');
@ -887,6 +970,7 @@ Ext.define('FHEM.controller.ChartController', {
eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')');
eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')');
eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')');
eval('axissideradio[i].items.items[0].setValue(chartdata.' + axisside + ')');
if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") {
eval('yaxesstatistics[i].setValue(chartdata.' + axisstatistics + ')');

2
fhem/www/frontend/www/frontend/app/controller/MainController.js
View File

@ -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-09");
sp.setText(FHEM.version + "; Frontend Version: 0.5 - 2013-04-14");
}
//setup west accordion / treepanel

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

@ -32,6 +32,16 @@ Ext.define('FHEM.view.LineChartPanel', {
*/
lastYmin: null,
/**
* last max value of Y2 axis before zoom was applied
*/
lastY2max: null,
/**
* last min value of Y2 axis before zoom was applied
*/
lastY2min: null,
/**
* last max value of Y axis before zoom was applied
*/
@ -40,7 +50,12 @@ Ext.define('FHEM.view.LineChartPanel', {
/**
* last min value of Y axis before zoom was applied
*/
lastXmin: null
lastXmin: null,
/**
*
*/
axiscounter: 0
},
artifactSeries: [],
@ -261,10 +276,13 @@ Ext.define('FHEM.view.LineChartPanel', {
handler: function(btn) {
var chart = me.down('chart');
chart.restoreZoom();
chart.axes.get(0).minimum = me.getLastYmin();
chart.axes.get(0).maximum = me.getLastYmax();
chart.axes.get(1).minimum = me.getLastXmin();
chart.axes.get(1).maximum = me.getLastXmax();
chart.axes.get(1).minimum = me.getLastY2min();
chart.axes.get(1).maximum = me.getLastY2max();
chart.axes.get(2).minimum = me.getLastXmin();
chart.axes.get(2).maximum = me.getLastXmax();
chart.redraw();
//helper to reshow the hidden items after zooming back out
@ -294,8 +312,8 @@ Ext.define('FHEM.view.LineChartPanel', {
type : 'Numeric',
name : 'yaxe',
position : 'left',
fields : [ 'VALUE', 'VALUE2' ],
title : 'VALUE',
fields : [],
title : '',
grid : {
odd : {
opacity : 1,
@ -305,6 +323,13 @@ Ext.define('FHEM.view.LineChartPanel', {
}
}
},
{
type : 'Numeric',
name : 'yaxe2',
position : 'right',
fields : [],
title : ''
},
{
type : 'Time',
name : 'xaxe',
@ -324,22 +349,22 @@ Ext.define('FHEM.view.LineChartPanel', {
evt.preventDefault();
},
select: {
fn: function(chart, selection, evt) {
delete chart.axes.get(1).fromDate;
delete chart.axes.get(1).toDate;
if (Ext.isEmpty(me.getLastYmax())) {
me.setLastYmax(chart.axes.get(0).maximum);
me.setLastYmin(chart.axes.get(0).minimum);
}
if (Ext.isEmpty(me.getLastXmax())) {
me.setLastXmax(chart.axes.get(1).maximum);
me.setLastXmin(chart.axes.get(1).minimum);
}
chart.axes.get(1).processView();
chart.redraw();
chart.setZoom(selection);
fn: function(chart, zoomConfig, evt) {
delete chart.axes.get(2).fromDate;
delete chart.axes.get(2).toDate;
me.setLastYmax(chart.axes.get(0).maximum);
me.setLastYmin(chart.axes.get(0).minimum);
me.setLastY2max(chart.axes.get(1).maximum);
me.setLastY2min(chart.axes.get(1).minimum);
me.setLastXmax(chart.axes.get(2).maximum);
me.setLastXmin(chart.axes.get(2).minimum);
chart.setZoom(zoomConfig);
chart.mask.hide();
//helper hiding series and items which are out of scope
//var me = this;
Ext.each(chart.series.items, function(serie) {
if (serie.items.length === 0) {
me.artifactSeries.push(serie);
@ -348,6 +373,7 @@ Ext.define('FHEM.view.LineChartPanel', {
item.redraw();
});
serie.hideAll();
}
});
}
@ -388,13 +414,15 @@ Ext.define('FHEM.view.LineChartPanel', {
var me = this;
me.setAxiscounter(me.getAxiscounter() + 1);
var components =
{
xtype: 'fieldset',
name: 'singlerowfieldset',
layout: 'column',
defaults: {
margin: '5 5 5 5'
margin: '5 5 5 0'
},
items:
[
@ -485,6 +513,20 @@ Ext.define('FHEM.view.LineChartPanel', {
boxLabel: 'Steps',
tooltip: 'Check, if the chart should be shown with steps instead of a linear Line'
},
{
xtype: 'radiogroup',
name: 'axisside',
allowBlank: false,
border: true,
defaults: {
padding: "0 15px 0 0",
checked: false
},
items: [
{ labelWidth: 50, fieldLabel: 'Left Axis', name: 'rbc' + me.getAxiscounter(), inputValue: 'left', checked: true },
{ labelWidth: 60, fieldLabel: 'Right Axis', name: 'rbc' + me.getAxiscounter(), inputValue: 'right' }
]
},
{
xtype: 'combobox',
name: 'yaxisstatisticscombo',
@ -537,7 +579,7 @@ Ext.define('FHEM.view.LineChartPanel', {
},
{
xtype: 'button',
width: 110,
width: 90,
text: 'Add Baseline',
name: 'addbaselinebtn',
handler: function(btn) {