2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-13 17:26:34 +00:00

- enhanced performance for charts

- better axis title handling

git-svn-id: https://svn.fhem.de/fhem/trunk@3126 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes 2013-04-27 16:16:39 +00:00
parent 86976015aa
commit c4e8c6ebe6
6 changed files with 307 additions and 227 deletions

View File

@ -1,3 +1,7 @@
Update vom 27.4.2013
* Performance Verbesserungen der Charts
* Achsenkonfiguration aufgeräumt
* Achsenbeschriftung verbessert / erweitert
Update vom 26.4.2013
* Testintegration von Highcharts
* Neue abhängige Bibliotheken Highcharts und JQuery hinzugefügt

View File

@ -49,15 +49,15 @@ 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-26_05:05:23 2238 www/frontend/app/app.js
UPD 2013-04-20_04:52:50 20318 www/frontend/app/view/LineChartPanel.js
UPD 2013-04-27_06:11:24 22156 www/frontend/app/view/LineChartPanel.js
UPD 2013-04-26_05:05:57 22790 www/frontend/app/view/HighChartsPanel.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-26_05:05:57 8922 www/frontend/app/view/Viewport.js
UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js
UPD 2013-04-20_04:52:30 62546 www/frontend/app/controller/ChartController.js
UPD 2013-04-27_06:11:02 64176 www/frontend/app/controller/ChartController.js
UPD 2013-04-26_05:05:41 12806 www/frontend/app/controller/HighChartController.js
UPD 2013-04-26_05:05:41 13891 www/frontend/app/controller/MainController.js
UPD 2013-04-27_06:15:02 13892 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
@ -67,7 +67,7 @@ UPD 2013-04-01_07:04:54 432 www/frontend/app/store/ChartStore.js
UPD 2013-04-01_07:04:54 451 www/frontend/app/store/SavedChartsStore.js
UPD 2013-04-01_07:04:54 426 www/frontend/app/store/ReadingsStore.js
UPD 2013-04-01_07:04:54 1048 www/frontend/app/store/TableDataStore.js
UPD 2013-04-01_07:04:53 414 www/frontend/app/store/DeviceStore.js
UPD 2013-04-27_06:11:13 439 www/frontend/app/store/DeviceStore.js
UPD 2013-04-01_07:03:30 260475 www/frontend/lib/ext-4.2.0.663/ext-theme-gray-all.css
UPD 2013-04-01_07:03:30 1434875 www/frontend/lib/ext-4.2.0.663/ext-all.js
UPD 2013-04-01_07:03:33 1981 www/frontend/lib/ext-4.2.0.663/images/tools/tools-sprites-trans.gif

View File

@ -127,8 +127,11 @@ Ext.define('FHEM.controller.ChartController', {
//show loadmask
me.getLinechartpanel().setLoading(true);
//collapse chart settings
me.getChartformpanel().collapse();
//timeout needed for loadmask to appear
window.setTimeout(function() {
//suspending complex layouts
Ext.suspendLayouts();
//getting the necessary values
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
@ -176,7 +179,6 @@ Ext.define('FHEM.controller.ChartController', {
chart.axes.get(0).setTitle("");
}
//reset zoomValues
chartpanel.setLastYmax(null);
chartpanel.setLastYmin(null);
@ -266,6 +268,7 @@ Ext.define('FHEM.controller.ChartController', {
i++;
});
}, 300);
},
/**
@ -277,13 +280,24 @@ Ext.define('FHEM.controller.ChartController', {
var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
// disable animation as long as we resize, causes serious performance issues
lcv.animate = false;
if (lcp && lcv && cfp && cdg) {
var chartheight = lcp.getHeight() - cfp.getHeight() - cdg.getHeight() - 95;
var chartwidth = lcp.getWidth() - 25;
var lcph = lcp.getHeight(),
lcpw = lcp.getWidth(),
cfph = cfp.getHeight(),
cdgh = cdg.getHeight();
if (lcph && lcpw && cfph && cdgh) {
var chartheight = lcph - cfph - cdgh - 95;
var chartwidth = lcpw - 25;
lcv.setHeight(chartheight);
lcv.setWidth(chartwidth);
}
}
lcv.animate = true;
lcv.redraw();
},
/**
@ -388,7 +402,7 @@ Ext.define('FHEM.controller.ChartController', {
title : 'Time'
}
],
animate: true,
animate: false,
store: store,
enableMask: true,
mask: true,//'vertical',//true, //'horizontal',
@ -438,7 +452,6 @@ Ext.define('FHEM.controller.ChartController', {
* creating baselines
*/
createBaseLine: function(index, basestart, baseend, basefill, basecolor) {
var me = this,
chart = me.getChart(),
store = chart.getStore(),
@ -504,9 +517,9 @@ Ext.define('FHEM.controller.ChartController', {
generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue();
if (i > 0) {
yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
} else {
yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
yseries = me.createSeries('VALUE', device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside);
}
var url;
@ -645,7 +658,7 @@ 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 millisecond less than the actual record to add.
// only do this, when last record is from same axis
//only do this, when last record is from same axis
if(yaxisstepcheck) {
if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") {
var lastrec = store.last();
@ -727,7 +740,7 @@ Ext.define('FHEM.controller.ChartController', {
if (me.minYValue > baseend) {
me.minYValue = baseend;
}
i++;
j++;
});
me.doFinalChartLayout(chart);
}
@ -774,13 +787,17 @@ Ext.define('FHEM.controller.ChartController', {
chart.axes.get(2).fromDate = starttime;
chart.axes.get(2).toDate = endtime;
chart.axes.get(2).processView();
chart.redraw();
me.resizeChart();
chart.axes.get(2).processView();
//collapse chart settings
me.getChartformpanel().collapse();
me.getLinechartpanel().setLoading(false);
//enable animation
chart.animate = true;
},
/**
@ -788,6 +805,9 @@ Ext.define('FHEM.controller.ChartController', {
*/
createSeries: function(yfield, title, fill, color, axisside) {
//resuming the layout
Ext.resumeLayouts(true);
//setting axistitle and fontsize
var chart = this.getChart(),
axis;
@ -804,7 +824,16 @@ Ext.define('FHEM.controller.ChartController', {
} else {
axis.setTitle(axis.title + " / " + title);
}
if (axis.title.length > 80) {
axis.displaySprite.attr.font = "10px Arial, Helvetica, sans-serif";
} else if (axis.title.length > 50) {
axis.displaySprite.attr.font = "12px Arial, Helvetica, sans-serif";
} else if (axis.title.length > 40) {
axis.displaySprite.attr.font = "13px Arial, Helvetica, sans-serif";
} else {
axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif";
}
//adding linked yfield to axis fields
axis.fields.push(yfield);
@ -1344,7 +1373,7 @@ Ext.define('FHEM.controller.ChartController', {
*/
fillChartGrid: function(jsondata, valuetext) {
if (jsondata && jsondata[0]) {
this.getChartformpanel().collapse();
//this.getChartformpanel().collapse();
var store = this.getChartdatagrid().getStore(),
columnwidth = 0,

View File

@ -97,7 +97,7 @@ Ext.define('FHEM.controller.MainController', {
if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield();
sp.setText(FHEM.version + "; Frontend Version: 0.6 - 2013-04-20");
sp.setText(FHEM.version + "; Frontend Version: 0.61 - 2013-04-27");
}
//setup west accordion / treepanel

View File

@ -8,6 +8,7 @@ Ext.define('FHEM.store.DeviceStore', {
proxy: {
type: 'ajax',
method: 'POST',
noCache : false,
url: '', //gets set by controller
reader: {
type: 'json',

View File

@ -73,6 +73,21 @@ Ext.define('FHEM.view.LineChartPanel', {
var me = this;
me.devicestore = Ext.create('FHEM.store.DeviceStore', {
proxy: {
type: 'ajax',
noCache: false,
method: 'POST',
url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
autoLoad: true
});
var chartSettingPanel = Ext.create('Ext.form.Panel', {
title: 'Chart Settings - Click me to edit',
name: 'chartformpanel',
@ -123,6 +138,7 @@ Ext.define('FHEM.view.LineChartPanel', {
name: 'starttimepicker',
format: 'Y-m-d H:i:s',
fieldLabel: 'Starttime',
allowBlank: false,
labelWidth: 70
},
{
@ -130,6 +146,7 @@ Ext.define('FHEM.view.LineChartPanel', {
name: 'endtimepicker',
format: 'Y-m-d H:i:s',
fieldLabel: 'Endtime',
allowBlank: false,
labelWidth: 70
},
{
@ -181,6 +198,24 @@ Ext.define('FHEM.view.LineChartPanel', {
name: 'resetchartform',
icon: 'app/resources/icons/delete.png'
},
{
xtype: 'button',
width: 110,
text: 'Add another Y-Axis',
name: 'addyaxisbtn',
handler: function(btn) {
me.createNewYAxis();
}
},
{
xtype: 'button',
width: 90,
text: 'Add Baseline',
name: 'addbaselinebtn',
handler: function(btn) {
me.createNewBaseLineFields(btn);
}
},
{
xtype: 'radio',
width: 160,
@ -269,19 +304,9 @@ Ext.define('FHEM.view.LineChartPanel', {
name: 'devicecombo',
fieldLabel: 'Select Device',
labelWidth: 90,
store: Ext.create('FHEM.store.DeviceStore', {
proxy: {
type: 'ajax',
method: 'POST',
url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
autoLoad: true
}),
store: me.devicestore,
allowBlank: false,
queryMode: 'local',
displayField: 'DEVICE',
valueField: 'DEVICE',
listeners: {
@ -301,6 +326,7 @@ Ext.define('FHEM.view.LineChartPanel', {
xtype: 'combobox',
name: 'yaxiscombo',
fieldLabel: 'Select Y-Axis',
allowBlank: false,
disabled: true,
labelWidth: 90,
inputWidth: 110,
@ -408,20 +434,11 @@ Ext.define('FHEM.view.LineChartPanel', {
},
{
xtype: 'button',
width: 110,
text: 'Add another Y-Axis',
name: 'addyaxisbtn',
width: 60,
text: 'Remove',
name: 'removerowbtn',
handler: function(btn) {
me.createNewYAxis();
}
},
{
xtype: 'button',
width: 90,
text: 'Add Baseline',
name: 'addbaselinebtn',
handler: function(btn) {
me.createNewBaseLineFields(btn);
me.removeRow(btn);
}
}
]
@ -435,7 +452,18 @@ Ext.define('FHEM.view.LineChartPanel', {
*
*/
createNewBaseLineFields: function(btn) {
var me = this;
var itemsToAdd = [
{
xtype: 'fieldset',
name: 'baselineowfieldset',
layout: 'column',
defaults: {
margin: '5 5 5 0'
},
items:
[
{
xtype: 'numberfield',
fieldLabel: 'Startvalue',
@ -476,13 +504,31 @@ Ext.define('FHEM.view.LineChartPanel', {
xtype: 'checkboxfield',
name: 'baselinefillcheck',
boxLabel: 'Fill'
},
{
xtype: 'button',
width: 60,
text: 'Remove',
name: 'removebaselinebtn',
handler: function(btn) {
me.removeRow(btn);
}
}
]
}
];
if (Ext.isDefined(btn)) {
btn.up().add(itemsToAdd);
} else {
this.down('fieldset[name=singlerowfieldset]').add(itemsToAdd);
}
Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(itemsToAdd);
},
/**
* remove the current chart configuration row
*/
removeRow: function(btn) {
var me = this;
if (btn.name === "removerowbtn") {
me.setAxiscounter(me.getAxiscounter() - 1);
}
btn.up().destroy();
}
});