FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-13 05:06: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 Update vom 09.4.2013
* Step Funktion für Charts hinzugefügt * Step Funktion für Charts hinzugefügt
* X-Achsenauswahl entfernt, da nur Timestmap Sinn macht * 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 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-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-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-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-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-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-14_05:52:09 49258 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 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: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:36 338 www/frontend/app/model/SavedChartsModel.js
UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js

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

@ -13,6 +13,16 @@ Ext.define('FHEM.controller.ChartController', {
*/ */
minYValue: 9999999, 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: [ refs: [
{ {
selector: 'panel[name=chartformpanel]', selector: 'panel[name=chartformpanel]',
@ -95,7 +105,8 @@ Ext.define('FHEM.controller.ChartController', {
yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'), yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'),
yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'), yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'),
yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'), 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(), var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'), dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
@ -118,6 +129,10 @@ Ext.define('FHEM.controller.ChartController', {
chart.series.removeAt(i); chart.series.removeAt(i);
} }
//Reset axis titles
chart.axes.get(0).setTitle("");
chart.axes.get(1).setTitle("");
//reset zoomValues //reset zoomValues
chartpanel.setLastYmax(null); chartpanel.setLastYmax(null);
chartpanel.setLastYmin(null); chartpanel.setLastYmin(null);
@ -126,9 +141,8 @@ Ext.define('FHEM.controller.ChartController', {
me.maxYValue = 0; me.maxYValue = 0;
me.minYValue = 9999999; me.minYValue = 9999999;
me.maxY2Value = 0;
//setting x-axis title me.minY2Value = 9999999;
chart.axes.get(1).setTitle("TIMESTAMP");
//check if timerange or dynamic time should be used //check if timerange or dynamic time should be used
dynamicradio.eachBox(function(box, idx){ dynamicradio.eachBox(function(box, idx){
@ -198,11 +212,12 @@ Ext.define('FHEM.controller.ChartController', {
yaxiscolorcombo = yaxescolorcombos[i].getValue(), yaxiscolorcombo = yaxescolorcombos[i].getValue(),
yaxisfillcheck = yaxesfillchecks[i].checked, yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepcheck[i].checked, yaxisstepcheck = yaxesstepcheck[i].checked,
yaxisstatistics = yaxesstatistics[i].getValue(); yaxisstatistics = yaxesstatistics[i].getValue(),
axisside = axissideradio[i].getChecked()[0].getSubmitValue();
if(yaxis === "" || yaxis === null) { if(yaxis === "" || yaxis === null) {
yaxis = yaxes[i].getRawValue(); 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++; i++;
}); });
@ -267,7 +282,7 @@ Ext.define('FHEM.controller.ChartController', {
/** /**
* fill the axes with data * 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, var me = this,
chart = me.getChart(), chart = me.getChart(),
@ -277,9 +292,9 @@ Ext.define('FHEM.controller.ChartController', {
generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(); generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
if (i > 0) { 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 { } else {
var yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo); var yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
} }
var url; var url;
@ -394,8 +409,8 @@ Ext.define('FHEM.controller.ChartController', {
//add records to store //add records to store
for (var j = 0; j < json.data.length; j++) { 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) { Ext.iterate(item.data, function(key, value) {
if (key.indexOf("TIMESTAMP") >= 0) { if (key.indexOf("TIMESTAMP") >= 0) {
item.set(key, json.data[j].TIMESTAMP); item.set(key, json.data[j].TIMESTAMP);
@ -413,12 +428,13 @@ Ext.define('FHEM.controller.ChartController', {
//check if we have to ues steps //check if we have to ues steps
//if yes, create a new record with the same value as the last one //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(yaxisstepcheck) {
if (store.last()) { if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") {
var lastrec = store.last(); var lastrec = store.last();
var datetomodify = Ext.Date.parse(json.data[j].TIMESTAMP, "Y-m-d H:i:s"); 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(); var stepitem = lastrec.copy();
Ext.iterate(stepitem.data, function(key, value) { Ext.iterate(stepitem.data, function(key, value) {
if (key.indexOf("TIMESTAMP") >= 0) { if (key.indexOf("TIMESTAMP") >= 0) {
@ -431,15 +447,25 @@ Ext.define('FHEM.controller.ChartController', {
store.add(item); store.add(item);
//rewrite of valuestring to get always numbers, even when text as value was passed to model //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 // recheck if our min and max values are still valid
if (me.minYValue > valuestring) { if (yseries.axis === "left") {
me.minYValue = valuestring; if (me.minYValue > valuestring) {
} me.minYValue = valuestring;
if (me.maxYValue < valuestring) { }
me.maxYValue = 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) { 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 //remove the old max values of y axis to get a dynamic range
delete chart.axes.get(0).maximum; delete chart.axes.get(0).maximum;
delete chart.axes.get(0).minimum; 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; chart.axes.get(0).maximum = me.maxYValue;
if (me.minYValue === 9999999) { chart.axes.get(1).maximum = me.maxY2Value;
chart.axes.get(0).minimum = 0;
// 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 { } else {
chart.axes.get(0).minimum = me.minYValue; 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 // set the x axis range dependent on user given timerange
var starttime = me.getStarttimepicker().getValue(), var chart = me.getChart(),
endtime = me.getEndtimepicker().getValue(); store = chart.getStore(),
chart.axes.get(1).fromDate = starttime; starttime = new Date(me.getStarttimepicker().getValue()),
chart.axes.get(1).toDate = endtime; endtime = new Date(me.getEndtimepicker().getValue());
chart.axes.get(1).processView();
chart.axes.get(2).fromDate = starttime;
chart.axes.get(2).toDate = endtime;
chart.axes.get(2).processView();
chart.redraw(); chart.redraw();
chart.setLoading(false); chart.setLoading(false);
}, },
/** /**
* create a single series for the chart * 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 = { var series = {
type : 'line', type : 'line',
axis : 'left', axis : axisside,
xField : 'TIMESTAMP', xField : 'TIMESTAMP',
yField : yfield, yField : yfield,
title: title, title: title,
@ -645,6 +715,8 @@ Ext.define('FHEM.controller.ChartController', {
//reset y-axis max //reset y-axis max
me.maxYValue = 0; me.maxYValue = 0;
me.minYValue = 9999999; me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
var starttime = me.getStarttimepicker().getValue(), var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d H:i:s'), 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 yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'); var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'); 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 yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'); var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]');
@ -724,12 +797,15 @@ Ext.define('FHEM.controller.ChartController', {
yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(), yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(),
yaxisfillcheck = yaxesfillchecks[i].checked, yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepchecks[i].checked, yaxisstepcheck = yaxesstepchecks[i].checked,
axisside = axissideradio[i].getChecked()[0].getSubmitValue();
yaxisstatistics = yaxesstatistics[i].getValue(); yaxisstatistics = yaxesstatistics[i].getValue();
if (i === 0) { if (i === 0) {
jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",'; jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",';
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",'; jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",'; jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",';
jsonConfig += '"yaxisside":"' + axisside + '",';
if (yaxisstatistics !== "none") { if (yaxisstatistics !== "none") {
jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",'; jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",';
} }
@ -739,11 +815,13 @@ Ext.define('FHEM.controller.ChartController', {
colorname = "y" + (i + 1) + "axiscolorcombo", colorname = "y" + (i + 1) + "axiscolorcombo",
fillname = "y" + (i + 1) + "axisfillcheck", fillname = "y" + (i + 1) + "axisfillcheck",
stepname = "y" + (i + 1) + "axisstepcheck", stepname = "y" + (i + 1) + "axisstepcheck",
sidename = "y" + (i + 1) + "axisside",
statsname = "y" + (i + 1) + "axisstatistics"; statsname = "y" + (i + 1) + "axisstatistics";
jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",'; jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",';
jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",'; jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",';
jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",'; jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",';
jsonConfig += '"' + sidename + '":"' + axisside + '",';
if (yaxisstatistics !== "none") { if (yaxisstatistics !== "none") {
jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",'; jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",';
} }
@ -833,6 +911,8 @@ Ext.define('FHEM.controller.ChartController', {
//reset y-axis max //reset y-axis max
me.maxYValue = 0; me.maxYValue = 0;
me.minYValue = 9999999; me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
//count axes //count axes
var axescount = 0; var axescount = 0;
@ -853,6 +933,7 @@ Ext.define('FHEM.controller.ChartController', {
var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'); var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]');
var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'); var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]');
var yaxesstepchecks = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'); 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 yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]');
var i = 0; var i = 0;
@ -865,6 +946,7 @@ Ext.define('FHEM.controller.ChartController', {
yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo); yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo);
yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck); yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck);
yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck); yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck);
axissideradio[i].items.items[0].setValue(chartdata.yaxisside);
if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") { if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") {
yaxesstatistics[i].setValue(chartdata.yaxisstatistics); yaxesstatistics[i].setValue(chartdata.yaxisstatistics);
@ -878,6 +960,7 @@ Ext.define('FHEM.controller.ChartController', {
axiscolorcombo = axisname + "colorcombo", axiscolorcombo = axisname + "colorcombo",
axisfillcheck = axisname + "fillcheck", axisfillcheck = axisname + "fillcheck",
axisstepcheck = axisname + "stepcheck", axisstepcheck = axisname + "stepcheck",
axisside = axisname + "side",
axisstatistics = axisname + "statistics"; axisstatistics = axisname + "statistics";
eval('devices[i].setValue(chartdata.' + axisdevice + ')'); eval('devices[i].setValue(chartdata.' + axisdevice + ')');
@ -887,6 +970,7 @@ Ext.define('FHEM.controller.ChartController', {
eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')'); eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')');
eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')'); eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')');
eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')'); eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')');
eval('axissideradio[i].items.items[0].setValue(chartdata.' + axisside + ')');
if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") { if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") {
eval('yaxesstatistics[i].setValue(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)) { if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield(); 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 //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, 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 * 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 * last min value of Y axis before zoom was applied
*/ */
lastXmin: null lastXmin: null,
/**
*
*/
axiscounter: 0
}, },
artifactSeries: [], artifactSeries: [],
@ -261,10 +276,13 @@ Ext.define('FHEM.view.LineChartPanel', {
handler: function(btn) { handler: function(btn) {
var chart = me.down('chart'); var chart = me.down('chart');
chart.restoreZoom(); chart.restoreZoom();
chart.axes.get(0).minimum = me.getLastYmin(); chart.axes.get(0).minimum = me.getLastYmin();
chart.axes.get(0).maximum = me.getLastYmax(); chart.axes.get(0).maximum = me.getLastYmax();
chart.axes.get(1).minimum = me.getLastXmin(); chart.axes.get(1).minimum = me.getLastY2min();
chart.axes.get(1).maximum = me.getLastXmax(); chart.axes.get(1).maximum = me.getLastY2max();
chart.axes.get(2).minimum = me.getLastXmin();
chart.axes.get(2).maximum = me.getLastXmax();
chart.redraw(); chart.redraw();
//helper to reshow the hidden items after zooming back out //helper to reshow the hidden items after zooming back out
@ -294,8 +312,8 @@ Ext.define('FHEM.view.LineChartPanel', {
type : 'Numeric', type : 'Numeric',
name : 'yaxe', name : 'yaxe',
position : 'left', position : 'left',
fields : [ 'VALUE', 'VALUE2' ], fields : [],
title : 'VALUE', title : '',
grid : { grid : {
odd : { odd : {
opacity : 1, opacity : 1,
@ -305,6 +323,13 @@ Ext.define('FHEM.view.LineChartPanel', {
} }
} }
}, },
{
type : 'Numeric',
name : 'yaxe2',
position : 'right',
fields : [],
title : ''
},
{ {
type : 'Time', type : 'Time',
name : 'xaxe', name : 'xaxe',
@ -324,22 +349,22 @@ Ext.define('FHEM.view.LineChartPanel', {
evt.preventDefault(); evt.preventDefault();
}, },
select: { select: {
fn: function(chart, selection, evt) { fn: function(chart, zoomConfig, evt) {
delete chart.axes.get(1).fromDate;
delete chart.axes.get(1).toDate; delete chart.axes.get(2).fromDate;
if (Ext.isEmpty(me.getLastYmax())) { delete chart.axes.get(2).toDate;
me.setLastYmax(chart.axes.get(0).maximum); me.setLastYmax(chart.axes.get(0).maximum);
me.setLastYmin(chart.axes.get(0).minimum); me.setLastYmin(chart.axes.get(0).minimum);
} me.setLastY2max(chart.axes.get(1).maximum);
if (Ext.isEmpty(me.getLastXmax())) { me.setLastY2min(chart.axes.get(1).minimum);
me.setLastXmax(chart.axes.get(1).maximum); me.setLastXmax(chart.axes.get(2).maximum);
me.setLastXmin(chart.axes.get(1).minimum); me.setLastXmin(chart.axes.get(2).minimum);
}
chart.axes.get(1).processView(); chart.setZoom(zoomConfig);
chart.redraw();
chart.setZoom(selection);
chart.mask.hide(); chart.mask.hide();
//helper hiding series and items which are out of scope //helper hiding series and items which are out of scope
//var me = this;
Ext.each(chart.series.items, function(serie) { Ext.each(chart.series.items, function(serie) {
if (serie.items.length === 0) { if (serie.items.length === 0) {
me.artifactSeries.push(serie); me.artifactSeries.push(serie);
@ -348,6 +373,7 @@ Ext.define('FHEM.view.LineChartPanel', {
item.redraw(); item.redraw();
}); });
serie.hideAll(); serie.hideAll();
} }
}); });
} }
@ -388,13 +414,15 @@ Ext.define('FHEM.view.LineChartPanel', {
var me = this; var me = this;
me.setAxiscounter(me.getAxiscounter() + 1);
var components = var components =
{ {
xtype: 'fieldset', xtype: 'fieldset',
name: 'singlerowfieldset', name: 'singlerowfieldset',
layout: 'column', layout: 'column',
defaults: { defaults: {
margin: '5 5 5 5' margin: '5 5 5 0'
}, },
items: items:
[ [
@ -485,6 +513,20 @@ Ext.define('FHEM.view.LineChartPanel', {
boxLabel: 'Steps', boxLabel: 'Steps',
tooltip: 'Check, if the chart should be shown with steps instead of a linear Line' 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', xtype: 'combobox',
name: 'yaxisstatisticscombo', name: 'yaxisstatisticscombo',
@ -537,7 +579,7 @@ Ext.define('FHEM.view.LineChartPanel', {
}, },
{ {
xtype: 'button', xtype: 'button',
width: 110, width: 90,
text: 'Add Baseline', text: 'Add Baseline',
name: 'addbaselinebtn', name: 'addbaselinebtn',
handler: function(btn) { handler: function(btn) {