mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-03-13 23:36:37 +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
parent
86976015aa
commit
c4e8c6ebe6
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -8,6 +8,7 @@ Ext.define('FHEM.store.DeviceStore', {
|
||||
proxy: {
|
||||
type: 'ajax',
|
||||
method: 'POST',
|
||||
noCache : false,
|
||||
url: '', //gets set by controller
|
||||
reader: {
|
||||
type: 'json',
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user