mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-04-15 22:26:04 +00:00
added table to show chartdata together with chart
- rendering of charts more efficient git-svn-id: https://svn.fhem.de/fhem/trunk@3092 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes
parent
195a472c7e
commit
92c7af3b08
@ -1,3 +1,6 @@
|
||||
Update vom 20.4.2013
|
||||
* Über dem CHart wird nun eine interaktive Tabelle mit den zugehörigen Daten angezeigt
|
||||
* Chartrendering effizienter
|
||||
Update vom 14.4.2013
|
||||
* Multiple Y-Skalen hinzugefügt (linke + rechte Achse)
|
||||
* Bug in Stepansicht behoben
|
||||
|
||||
@ -76,12 +76,13 @@ 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-14_05:52:20 27637 www/frontend/app/view/LineChartPanel.js
|
||||
UPD 2013-04-20_04:52:50 20318 www/frontend/app/view/LineChartPanel.js
|
||||
UPD 2013-04-20_04:52:50 1202 www/frontend/app/view/ChartGridPanel.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-20_04:52:50 8669 www/frontend/app/view/Viewport.js
|
||||
UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.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-20_04:52:30 62546 www/frontend/app/controller/ChartController.js
|
||||
UPD 2013-04-20_04:52:31 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
|
||||
|
||||
@ -48,6 +48,10 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
selector: 'chart',
|
||||
ref: 'chart' //this.getChart()
|
||||
},
|
||||
{
|
||||
selector: 'chartformpanel',
|
||||
ref: 'panel[name=chartformpanel]' //this.getChartformpanel()
|
||||
},
|
||||
{
|
||||
selector: 'linechartpanel',
|
||||
ref: 'linechartpanel' //this.getLinechartpanel()
|
||||
@ -59,6 +63,10 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
{
|
||||
selector: 'grid[name=savedchartsgrid]',
|
||||
ref: 'savedchartsgrid' //this.getSavedchartsgrid()
|
||||
},
|
||||
{
|
||||
selector: 'grid[name=chartdata]',
|
||||
ref: 'chartdatagrid' //this.getChartdatagrid()
|
||||
}
|
||||
|
||||
],
|
||||
@ -88,6 +96,22 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
},
|
||||
'actioncolumn[name=savedchartsactioncolumn]': {
|
||||
click: this.deletechart
|
||||
},
|
||||
'grid[name=chartdata]': {
|
||||
// itemmouseenter: this.highlightRecordInChart
|
||||
itemclick: this.highlightRecordInChart
|
||||
},
|
||||
'panel[name=chartpanel]': {
|
||||
collapse: this.resizeChart,
|
||||
expand: this.resizeChart
|
||||
},
|
||||
'panel[name=chartformpanel]': {
|
||||
collapse: this.resizeChart,
|
||||
expand: this.resizeChart
|
||||
},
|
||||
'panel[name=chartgridpanel]': {
|
||||
collapse: this.resizeChart,
|
||||
expand: this.resizeChart
|
||||
}
|
||||
});
|
||||
|
||||
@ -99,6 +123,13 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
requestChartData: function(stepchangecalled) {
|
||||
|
||||
var me = this;
|
||||
|
||||
//show loadmask
|
||||
me.getLinechartpanel().setLoading(true);
|
||||
|
||||
//collapse chart settings
|
||||
me.getChartformpanel().collapse();
|
||||
|
||||
//getting the necessary values
|
||||
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
|
||||
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
|
||||
@ -114,24 +145,37 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
|
||||
dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
|
||||
chartpanel = me.getLinechartpanel(),
|
||||
chart = me.getChart(),
|
||||
store = chart.getStore(),
|
||||
proxy = store.getProxy();
|
||||
chart = me.getChart();
|
||||
|
||||
//show loadmask
|
||||
chart.setLoading(true);
|
||||
|
||||
//cleanup store
|
||||
store.removeAll();
|
||||
|
||||
//cleanup chart
|
||||
for (var i = chart.series.length -1; i >= 0; i--) {
|
||||
chart.series.removeAt(i);
|
||||
//cleanup chartpanel
|
||||
var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
|
||||
if (!existingchartgrid) {
|
||||
var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', {
|
||||
name: 'chartgridpanel',
|
||||
height: 200,
|
||||
maxHeight: 200
|
||||
});
|
||||
chartpanel.add(chartdatagrid);
|
||||
} else {
|
||||
existingchartgrid.down('grid').getStore().removeAll();
|
||||
}
|
||||
var existingchart = Ext.ComponentQuery.query('panel[name=chartpanel]')[0];
|
||||
if (!existingchart) {
|
||||
var store = Ext.create('FHEM.store.ChartStore'),
|
||||
proxy = store.getProxy();
|
||||
chart = me.createChart(store);
|
||||
chartpanel.add(chart);
|
||||
} else {
|
||||
chart.getStore().removeAll();
|
||||
chart.getStore().destroy();
|
||||
//removes the store completely from chart
|
||||
chart.bindStore();
|
||||
var chartstore = Ext.create('FHEM.store.ChartStore');
|
||||
chart.bindStore(chartstore);
|
||||
chart.series.removeAll();
|
||||
chart.axes.get(0).setTitle("");
|
||||
}
|
||||
|
||||
//Reset axis titles
|
||||
chart.axes.get(0).setTitle("");
|
||||
chart.axes.get(1).setTitle("");
|
||||
|
||||
//reset zoomValues
|
||||
chartpanel.setLastYmax(null);
|
||||
@ -206,7 +250,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
});
|
||||
|
||||
var i = 0;
|
||||
Ext.each(yaxes, function(yaxis) {
|
||||
Ext.each(yaxes, function(y) {
|
||||
var device = devices[i].getValue(),
|
||||
yaxis = yaxes[i].getValue(),
|
||||
yaxiscolorcombo = yaxescolorcombos[i].getValue(),
|
||||
@ -217,12 +261,179 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
if(yaxis === "" || yaxis === null) {
|
||||
yaxis = yaxes[i].getRawValue();
|
||||
}
|
||||
|
||||
me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime);
|
||||
i++;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* resize the chart to fit the centerpanel
|
||||
*/
|
||||
resizeChart: function() {
|
||||
var lcp = Ext.ComponentQuery.query('linechartpanel')[0];
|
||||
var lcv = Ext.ComponentQuery.query('chart')[0];
|
||||
var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
|
||||
var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
|
||||
|
||||
if (lcp && lcv && cfp && cdg) {
|
||||
var chartheight = lcp.getHeight() - cfp.getHeight() - cdg.getHeight() - 95;
|
||||
var chartwidth = lcp.getWidth() - 25;
|
||||
lcv.setHeight(chartheight);
|
||||
lcv.setWidth(chartwidth);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* create the base chart
|
||||
*/
|
||||
createChart: function(store) {
|
||||
var me = this;
|
||||
|
||||
var chart = Ext.create('Ext.panel.Panel', {
|
||||
title: 'Chart',
|
||||
name: 'chartpanel',
|
||||
collapsible: true,
|
||||
titleCollapse: true,
|
||||
items: [
|
||||
{
|
||||
xtype: 'toolbar',
|
||||
items: [
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Step back',
|
||||
name: 'stepback',
|
||||
icon: 'app/resources/icons/resultset_previous.png'
|
||||
},
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Step forward',
|
||||
name: 'stepforward',
|
||||
icon: 'app/resources/icons/resultset_next.png'
|
||||
},
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Reset Zoom',
|
||||
name: 'resetzoom',
|
||||
icon: 'app/resources/icons/delete.png',
|
||||
scope: me,
|
||||
handler: function(btn) {
|
||||
var chart = btn.up().up().down('chart');
|
||||
chart.restoreZoom();
|
||||
|
||||
chart.axes.get(0).minimum = chart.up().up().getLastYmin();
|
||||
chart.axes.get(0).maximum = chart.up().up().getLastYmax();
|
||||
chart.axes.get(1).minimum = chart.up().up().getLastY2min();
|
||||
chart.axes.get(1).maximum = chart.up().up().getLastY2max();
|
||||
chart.axes.get(2).minimum = chart.up().up().getLastXmin();
|
||||
chart.axes.get(2).maximum = chart.up().up().getLastXmax();
|
||||
|
||||
chart.redraw();
|
||||
//helper to reshow the hidden items after zooming back out
|
||||
if (chart.up().up().artifactSeries && chart.up().up().artifactSeries.length > 0) {
|
||||
Ext.each(chart.up().up().artifactSeries, function(serie) {
|
||||
serie.showAll();
|
||||
Ext.each(serie.group.items, function(item) {
|
||||
if (item.type === "circle") {
|
||||
item.show();
|
||||
item.redraw();
|
||||
}
|
||||
});
|
||||
});
|
||||
chart.up().up().artifactSeries = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'chart',
|
||||
legend: {
|
||||
position: 'right'
|
||||
},
|
||||
axes: [
|
||||
{
|
||||
type : 'Numeric',
|
||||
name : 'yaxe',
|
||||
position : 'left',
|
||||
fields : [],
|
||||
title : '',
|
||||
grid : {
|
||||
odd : {
|
||||
opacity : 1,
|
||||
fill : '#ddd',
|
||||
stroke : '#bbb',
|
||||
'stroke-width' : 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'Numeric',
|
||||
name : 'yaxe2',
|
||||
position : 'right',
|
||||
fields : [],
|
||||
title : ''
|
||||
},
|
||||
{
|
||||
type : 'Time',
|
||||
name : 'xaxe',
|
||||
position : 'bottom',
|
||||
fields : [ 'TIMESTAMP' ],
|
||||
dateFormat : "Y-m-d H:i:s",
|
||||
title : 'Time'
|
||||
}
|
||||
],
|
||||
animate: true,
|
||||
store: store,
|
||||
enableMask: true,
|
||||
mask: true,//'vertical',//true, //'horizontal',
|
||||
listeners: {
|
||||
mousedown: function(evt) {
|
||||
// fix for firefox, not dragging images
|
||||
evt.preventDefault();
|
||||
},
|
||||
select: {
|
||||
fn: function(chart, zoomConfig, evt) {
|
||||
|
||||
delete chart.axes.get(2).fromDate;
|
||||
delete chart.axes.get(2).toDate;
|
||||
chart.up().up().setLastYmax(chart.axes.get(0).maximum);
|
||||
chart.up().up().setLastYmin(chart.axes.get(0).minimum);
|
||||
chart.up().up().setLastY2max(chart.axes.get(1).maximum);
|
||||
chart.up().up().setLastY2min(chart.axes.get(1).minimum);
|
||||
chart.up().up().setLastXmax(chart.axes.get(2).maximum);
|
||||
chart.up().up().setLastXmin(chart.axes.get(2).minimum);
|
||||
|
||||
chart.setZoom(zoomConfig);
|
||||
chart.mask.hide();
|
||||
|
||||
//helper hiding series and items which are out of scope
|
||||
Ext.each(chart.series.items, function(serie) {
|
||||
if (serie.items.length === 0) {
|
||||
chart.up().up().artifactSeries.push(serie);
|
||||
Ext.each(serie.group.items, function(item) {
|
||||
item.hide();
|
||||
item.redraw();
|
||||
});
|
||||
serie.hideAll();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return chart;
|
||||
},
|
||||
|
||||
/**
|
||||
* creating baselines
|
||||
*/
|
||||
@ -288,13 +499,14 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
chart = me.getChart(),
|
||||
store = chart.getStore(),
|
||||
proxy = store.getProxy(),
|
||||
yseries,
|
||||
generalization = Ext.ComponentQuery.query('radio[boxLabel=active]')[0],
|
||||
generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
|
||||
|
||||
if (i > 0) {
|
||||
var yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
} else {
|
||||
var yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
|
||||
}
|
||||
|
||||
var url;
|
||||
@ -400,6 +612,10 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
}
|
||||
}
|
||||
|
||||
//as we have the valuetext, we can fill the grid
|
||||
//fill the grid with the data
|
||||
me.fillChartGrid(json.data, valuetext);
|
||||
|
||||
var timestamptext;
|
||||
if (i === 0) {
|
||||
timestamptext = 'TIMESTAMP';
|
||||
@ -484,19 +700,19 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
//check if we have added the last dataset
|
||||
if ((i + 1) === axeslength) {
|
||||
//add baselines
|
||||
var i = 0,
|
||||
var j = 0,
|
||||
basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'),
|
||||
basesend = Ext.ComponentQuery.query('numberfield[name=baseend]'),
|
||||
basescolors = Ext.ComponentQuery.query('combobox[name=baselinecolorcombo]'),
|
||||
basesfills = Ext.ComponentQuery.query('checkboxfield[name=baselinefillcheck]');
|
||||
|
||||
Ext.each(basesstart, function(base) {
|
||||
var basestart = basesstart[i].getValue(),
|
||||
baseend = basesend[i].getValue(),
|
||||
basecolor = basescolors[i].getValue(),
|
||||
basefill = basesfills[i].checked;
|
||||
var basestart = basesstart[j].getValue(),
|
||||
baseend = basesend[j].getValue(),
|
||||
basecolor = basescolors[j].getValue(),
|
||||
basefill = basesfills[j].checked;
|
||||
|
||||
me.createBaseLine(i + 1, basestart, baseend, basefill, basecolor);
|
||||
me.createBaseLine(j + 1, basestart, baseend, basefill, basecolor);
|
||||
|
||||
//adjust min and max on y axis
|
||||
if (me.maxYValue < basestart) {
|
||||
@ -521,7 +737,6 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
* do the final layout of chart after all data is loaded
|
||||
*/
|
||||
doFinalChartLayout: function(chart) {
|
||||
|
||||
var me = this;
|
||||
|
||||
//remove the old max values of y axis to get a dynamic range
|
||||
@ -554,9 +769,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
|
||||
|
||||
// set the x axis range dependent on user given timerange
|
||||
var chart = me.getChart(),
|
||||
store = chart.getStore(),
|
||||
starttime = new Date(me.getStarttimepicker().getValue()),
|
||||
var starttime = new Date(me.getStarttimepicker().getValue()),
|
||||
endtime = new Date(me.getEndtimepicker().getValue());
|
||||
|
||||
chart.axes.get(2).fromDate = starttime;
|
||||
@ -564,7 +777,9 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
chart.axes.get(2).processView();
|
||||
chart.redraw();
|
||||
|
||||
chart.setLoading(false);
|
||||
me.resizeChart();
|
||||
|
||||
me.getLinechartpanel().setLoading(false);
|
||||
|
||||
},
|
||||
|
||||
@ -834,16 +1049,16 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
jsonConfig += '"generalizationfactor":"' + generalizationfactor + '",';
|
||||
}
|
||||
|
||||
var i = 0;
|
||||
var j = 0;
|
||||
Ext.each(basesstart, function(base) {
|
||||
var basestart = basesstart[i].getValue(),
|
||||
baseend = basesend[i].getValue(),
|
||||
basecolor = basescolors[i].getDisplayValue(),
|
||||
basefill = basesfills[i].checked;
|
||||
var basestart = basesstart[j].getValue(),
|
||||
baseend = basesend[j].getValue(),
|
||||
basecolor = basescolors[j].getDisplayValue(),
|
||||
basefill = basesfills[j].checked;
|
||||
|
||||
i++;
|
||||
jsonConfig += '"base' + i + 'start":"' + basestart + '","base' + i + 'end":"' + baseend + '",';
|
||||
jsonConfig += '"base' + i + 'color":"' + basecolor + '","base' + i + 'fill":"' + basefill + '",';
|
||||
j++;
|
||||
jsonConfig += '"base' + j + 'start":"' + basestart + '","base' + j + 'end":"' + baseend + '",';
|
||||
jsonConfig += '"base' + j + 'color":"' + basecolor + '","base' + j + 'fill":"' + basefill + '",';
|
||||
});
|
||||
|
||||
jsonConfig += '"starttime":"' + dbstarttime + '","endtime":"' + dbendtime + '"}';
|
||||
@ -983,8 +1198,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
|
||||
//handling baselines
|
||||
var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'),
|
||||
baselinecount = 0,
|
||||
i = 1;
|
||||
baselinecount = 0;
|
||||
|
||||
Ext.iterate(chartdata, function(key, value) {
|
||||
if (key.indexOf("base") >= 0 && key.indexOf("start") >= 0 && value != "null") {
|
||||
@ -998,8 +1212,8 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
renderedbaselines++;
|
||||
}
|
||||
|
||||
var i = 0,
|
||||
j = 1;
|
||||
i = 0;
|
||||
var j = 1;
|
||||
basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'),
|
||||
basesend = Ext.ComponentQuery.query('numberfield[name=baseend]'),
|
||||
basescolors = Ext.ComponentQuery.query('combobox[name=baselinecolorcombo]'),
|
||||
@ -1123,6 +1337,114 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
Ext.Msg.alert("Error", "The Chart could not be deleted, no record id has been found");
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* fill the charts grid with data
|
||||
*/
|
||||
fillChartGrid: function(jsondata, valuetext) {
|
||||
if (jsondata && jsondata[0]) {
|
||||
this.getChartformpanel().collapse();
|
||||
|
||||
var store = this.getChartdatagrid().getStore(),
|
||||
columnwidth = 0,
|
||||
storefields = [],
|
||||
gridcolumns = [];
|
||||
|
||||
if (store.model.fields && store.model.fields.length > 0) {
|
||||
Ext.each(store.model.getFields(), function(field) {
|
||||
storefields.push(field.name);
|
||||
});
|
||||
}
|
||||
var i = 0;
|
||||
Ext.each(jsondata, function(dataset) {
|
||||
Ext.iterate(dataset, function(key, value) {
|
||||
|
||||
if (!Ext.Array.contains(storefields, key)) {
|
||||
storefields.push(key);
|
||||
}
|
||||
});
|
||||
// we add each dataset a new key for the valuetext
|
||||
jsondata[i].valuetext = valuetext;
|
||||
i++;
|
||||
});
|
||||
store.model.setFields(storefields);
|
||||
|
||||
columnwidth = 99 / storefields.length + "%";
|
||||
|
||||
Ext.each(storefields, function(key) {
|
||||
var column;
|
||||
if (key != "TIMESTAMP") {
|
||||
column = {
|
||||
header: key,
|
||||
dataIndex: key,
|
||||
// xtype: 'numbercolumn',
|
||||
// format:'0.000',
|
||||
// renderer: function(value){
|
||||
// return parseFloat(value, 10);
|
||||
// },
|
||||
width: columnwidth
|
||||
};
|
||||
} else {
|
||||
column = {
|
||||
header: key,
|
||||
dataIndex: key,
|
||||
width: columnwidth
|
||||
};
|
||||
}
|
||||
|
||||
gridcolumns.push(column);
|
||||
});
|
||||
|
||||
this.getChartdatagrid().reconfigure(store, gridcolumns);
|
||||
store.add(jsondata);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* highlight hoverered record from grid in chart
|
||||
*/
|
||||
highlightRecordInChart: function(gridview, record) {
|
||||
|
||||
var recdate = new Date(Ext.Date.parse(record.get("TIMESTAMP"), 'Y-m-d H:i:s')),
|
||||
chartstore = this.getChart().getStore(),
|
||||
chartrecord,
|
||||
found = false,
|
||||
highlightSprite;
|
||||
|
||||
chartstore.each(function(rec) {
|
||||
if (Ext.Date.isEqual(new Date(rec.get("TIMESTAMP")), recdate)) {
|
||||
var valuematcher = record.raw.valuetext,
|
||||
gridvaluematcher = valuematcher.replace(/[0-9]/g, '');
|
||||
var chartrec = rec.get(valuematcher);
|
||||
var gridrec = record.get(gridvaluematcher);
|
||||
if (parseInt(chartrec, 10) === parseInt(gridrec, 10)) {
|
||||
chartrecord = rec;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (chartrecord && !Ext.isEmpty(chartrecord)) {
|
||||
Ext.each(this.getChart().series.items, function(serie) {
|
||||
Ext.each(serie.items, function(sprite) {
|
||||
if (sprite.storeItem === chartrecord) {
|
||||
highlightSprite = sprite;
|
||||
found = true;
|
||||
}
|
||||
if (found) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (found) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (highlightSprite && !Ext.isEmpty(highlightSprite)) {
|
||||
highlightSprite.sprite.attr.radius = 10;
|
||||
this.getChart().redraw();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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.5 - 2013-04-14");
|
||||
sp.setText(FHEM.version + "; Frontend Version: 0.6 - 2013-04-20");
|
||||
}
|
||||
|
||||
//setup west accordion / treepanel
|
||||
|
||||
64
fhem/www/frontend/www/frontend/app/view/ChartGridPanel.js
Normal file
64
fhem/www/frontend/www/frontend/app/view/ChartGridPanel.js
Normal file
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* A Panel containing device specific information
|
||||
*/
|
||||
Ext.define('FHEM.view.ChartGridPanel', {
|
||||
extend: 'Ext.panel.Panel',
|
||||
alias : 'widget.chartgridpanel',
|
||||
|
||||
requires: [
|
||||
'Ext.form.FieldSet',
|
||||
'Ext.layout.container.Column',
|
||||
'Ext.form.field.ComboBox'
|
||||
],
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
title: 'Chart data',
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
jsonrecords: null,
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
collapsible: true,
|
||||
|
||||
titleCollapse: true,
|
||||
|
||||
collapsed: false,
|
||||
|
||||
/**
|
||||
* init function
|
||||
*/
|
||||
initComponent: function() {
|
||||
|
||||
var me = this;
|
||||
|
||||
var chartdatastore = Ext.create('Ext.data.Store', {
|
||||
fields: [],
|
||||
data: [],
|
||||
proxy: {
|
||||
type: 'memory',
|
||||
reader: {
|
||||
type: 'json'
|
||||
}
|
||||
}
|
||||
});
|
||||
var chartdatagrid = {
|
||||
xtype: 'grid',
|
||||
height: 170,
|
||||
name: 'chartdata',
|
||||
columns: [
|
||||
],
|
||||
store: chartdatastore
|
||||
};
|
||||
|
||||
me.items = [chartdatagrid];
|
||||
|
||||
me.callParent(arguments);
|
||||
}
|
||||
|
||||
});
|
||||
@ -8,6 +8,7 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
'FHEM.store.ChartStore',
|
||||
'FHEM.store.DeviceStore',
|
||||
'FHEM.store.ReadingsStore',
|
||||
'FHEM.view.ChartGridPanel',
|
||||
'Ext.form.Panel',
|
||||
'Ext.form.field.Radio',
|
||||
'Ext.form.field.Date',
|
||||
@ -79,10 +80,6 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
autoScroll: true,
|
||||
collapsible: true,
|
||||
titleCollapse: true,
|
||||
listeners: {
|
||||
collapse: me.layoutChart,
|
||||
expand: me.layoutChart
|
||||
},
|
||||
items: [
|
||||
{
|
||||
xtype: 'fieldset',
|
||||
@ -240,171 +237,12 @@ Ext.define('FHEM.view.LineChartPanel', {
|
||||
|
||||
//add the first yaxis line
|
||||
me.createNewYAxis();
|
||||
|
||||
//creating the chart
|
||||
var chartstore = Ext.create('FHEM.store.ChartStore');
|
||||
var linechartview = Ext.create('Ext.panel.Panel', {
|
||||
title: 'Chart',
|
||||
autoScroll: true,
|
||||
collapsible: true,
|
||||
titleCollapse: true,
|
||||
items: [
|
||||
{
|
||||
xtype: 'toolbar',
|
||||
items: [
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Step back',
|
||||
name: 'stepback',
|
||||
icon: 'app/resources/icons/resultset_previous.png'
|
||||
},
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Step forward',
|
||||
name: 'stepforward',
|
||||
icon: 'app/resources/icons/resultset_next.png'
|
||||
},
|
||||
{
|
||||
xtype: 'button',
|
||||
width: 100,
|
||||
text: 'Reset Zoom',
|
||||
name: 'resetzoom',
|
||||
icon: 'app/resources/icons/delete.png',
|
||||
scope: me,
|
||||
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.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
|
||||
if (me.artifactSeries && me.artifactSeries.length > 0) {
|
||||
Ext.each(me.artifactSeries, function(serie) {
|
||||
serie.showAll();
|
||||
Ext.each(serie.group.items, function(item) {
|
||||
if (item.type === "circle") {
|
||||
item.show();
|
||||
item.redraw();
|
||||
}
|
||||
});
|
||||
});
|
||||
me.artifactSeries = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'chart',
|
||||
legend: {
|
||||
position: 'right'
|
||||
},
|
||||
axes: [
|
||||
{
|
||||
type : 'Numeric',
|
||||
name : 'yaxe',
|
||||
position : 'left',
|
||||
fields : [],
|
||||
title : '',
|
||||
grid : {
|
||||
odd : {
|
||||
opacity : 1,
|
||||
fill : '#ddd',
|
||||
stroke : '#bbb',
|
||||
'stroke-width' : 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type : 'Numeric',
|
||||
name : 'yaxe2',
|
||||
position : 'right',
|
||||
fields : [],
|
||||
title : ''
|
||||
},
|
||||
{
|
||||
type : 'Time',
|
||||
name : 'xaxe',
|
||||
position : 'bottom',
|
||||
fields : [ 'TIMESTAMP' ],
|
||||
dateFormat : "Y-m-d H:i:s",
|
||||
title : 'Time'
|
||||
}
|
||||
],
|
||||
animate: true,
|
||||
store: chartstore,
|
||||
enableMask: true,
|
||||
mask: true,//'vertical',//true, //'horizontal',
|
||||
listeners: {
|
||||
mousedown: function(evt) {
|
||||
// fix for firefox, not dragging images
|
||||
evt.preventDefault();
|
||||
},
|
||||
select: {
|
||||
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);
|
||||
Ext.each(serie.group.items, function(item) {
|
||||
item.hide();
|
||||
item.redraw();
|
||||
});
|
||||
serie.hideAll();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
me.items = [
|
||||
chartSettingPanel,
|
||||
linechartview
|
||||
chartSettingPanel
|
||||
];
|
||||
|
||||
me.callParent(arguments);
|
||||
|
||||
me.on("resize", me.layoutChart);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* helper function to relayout the chartview dependent on free space
|
||||
*/
|
||||
layoutChart: function() {
|
||||
var lcp = Ext.ComponentQuery.query('linechartpanel')[0];
|
||||
var lcv = Ext.ComponentQuery.query('chart')[0];
|
||||
var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
|
||||
var chartheight = lcp.getHeight() - cfp.getHeight() - 85;
|
||||
var chartwidth = lcp.getWidth() - 25;
|
||||
lcv.setHeight(chartheight);
|
||||
lcv.setWidth(chartwidth);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -194,6 +194,8 @@ Ext.define('FHEM.view.Viewport', {
|
||||
xtype: 'text',
|
||||
name: 'statustextfield',
|
||||
padding: '50 0 0 20',
|
||||
width: 400,
|
||||
height: 130,
|
||||
html: '<br>Welcome to the new FHEM Frontend.<br>For Informations, Problems and discussion, visit the <a href="http://forum.fhem.de/index.php?t=msg&th=10439&start=0&rid=0">FHEM Forums</a>'
|
||||
}
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user