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

- enhanced performance for charts

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
fhem/www/frontend/CHANGED
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

8
fhem/www/frontend/controls_frontend.txt
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

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

@ -127,145 +127,148 @@ 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() {
//getting the necessary values
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
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]'),
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
endtime = me.getEndtimepicker().getValue(),
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();
//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 zoomValues
chartpanel.setLastYmax(null);
chartpanel.setLastYmin(null);
chartpanel.setLastXmax(null);
chartpanel.setLastXmin(null);
me.maxYValue = 0;
me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
//check if timerange or dynamic time should be used
dynamicradio.eachBox(function(box, idx){
var date = new Date();
if (box.checked && stepchangecalled !== true) {
if (box.inputValue === "year") {
starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d");
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d");
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "month") {
starttime = Ext.Date.getFirstDateOfMonth(date);
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.getLastDateOfMonth(date);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "week") {
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
//monday starts with 0 till sat with 5, sund with -1
var dayoffset = date.getDay() - 1,
monday,
nextmonday;
if (dayoffset >= 0) {
monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset);
} else {
//we have a sunday
monday = Ext.Date.add(date, Ext.Date.DAY, -6);
}
nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7);
starttime = monday;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = nextmonday;
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "day") {
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
starttime = date;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.add(date, Ext.Date.DAY, 1);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "hour") {
date.setMinutes(0);
date.setSeconds(0);
starttime = date;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.add(date, Ext.Date.HOUR, 1);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else {
Ext.Msg.alert("Error", "Could not setup the dynamic time.");
}
me.getStarttimepicker().setValue(starttime);
me.getEndtimepicker().setValue(endtime);
//suspending complex layouts
Ext.suspendLayouts();
//getting the necessary values
var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'),
yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'),
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]'),
axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]');
var starttime = me.getStarttimepicker().getValue(),
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
endtime = me.getEndtimepicker().getValue(),
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();
//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 i = 0;
Ext.each(yaxes, function(y) {
var device = devices[i].getValue(),
yaxis = yaxes[i].getValue(),
yaxiscolorcombo = yaxescolorcombos[i].getValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepcheck[i].checked,
yaxisstatistics = yaxesstatistics[i].getValue(),
axisside = axissideradio[i].getChecked()[0].getSubmitValue();
if(yaxis === "" || yaxis === null) {
yaxis = yaxes[i].getRawValue();
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("");
}
me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime);
i++;
});
//reset zoomValues
chartpanel.setLastYmax(null);
chartpanel.setLastYmin(null);
chartpanel.setLastXmax(null);
chartpanel.setLastXmin(null);
me.maxYValue = 0;
me.minYValue = 9999999;
me.maxY2Value = 0;
me.minY2Value = 9999999;
//check if timerange or dynamic time should be used
dynamicradio.eachBox(function(box, idx){
var date = new Date();
if (box.checked && stepchangecalled !== true) {
if (box.inputValue === "year") {
starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d");
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d");
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "month") {
starttime = Ext.Date.getFirstDateOfMonth(date);
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.getLastDateOfMonth(date);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "week") {
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
//monday starts with 0 till sat with 5, sund with -1
var dayoffset = date.getDay() - 1,
monday,
nextmonday;
if (dayoffset >= 0) {
monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset);
} else {
//we have a sunday
monday = Ext.Date.add(date, Ext.Date.DAY, -6);
}
nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7);
starttime = monday;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = nextmonday;
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "day") {
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
starttime = date;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.add(date, Ext.Date.DAY, 1);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else if (box.inputValue === "hour") {
date.setMinutes(0);
date.setSeconds(0);
starttime = date;
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
endtime = Ext.Date.add(date, Ext.Date.HOUR, 1);
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
} else {
Ext.Msg.alert("Error", "Could not setup the dynamic time.");
}
me.getStarttimepicker().setValue(starttime);
me.getEndtimepicker().setValue(endtime);
}
});
var i = 0;
Ext.each(yaxes, function(y) {
var device = devices[i].getValue(),
yaxis = yaxes[i].getValue(),
yaxiscolorcombo = yaxescolorcombos[i].getValue(),
yaxisfillcheck = yaxesfillchecks[i].checked,
yaxisstepcheck = yaxesstepcheck[i].checked,
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, axisside, yaxisstatistics, dbstarttime, dbendtime);
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];
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);
}
// disable animation as long as we resize, causes serious performance issues
lcv.animate = false;
if (lcp && lcv && cfp && cdg) {
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;
@ -613,7 +626,7 @@ Ext.define('FHEM.controller.ChartController', {
}
//as we have the valuetext, we can fill the grid
//fill the grid with the data
//fill the grid with the data
me.fillChartGrid(json.data, valuetext);
var timestamptext;
@ -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);
}
axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif";
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,

2
fhem/www/frontend/www/frontend/app/controller/MainController.js
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

1
fhem/www/frontend/www/frontend/app/store/DeviceStore.js
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',

184
fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
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,54 +452,83 @@ Ext.define('FHEM.view.LineChartPanel', {
*
*/
createNewBaseLineFields: function(btn) {
var me = this;
var itemsToAdd = [
{
xtype: 'numberfield',
fieldLabel: 'Startvalue',
name: 'basestart',
allowBlank: false,
labelWidth: 60,
width: 120
},
{
xtype: 'numberfield',
fieldLabel: 'Endvalue',
name: 'baseend',
allowBlank: false,
labelWidth: 60,
width: 120
},
{
xtype: 'combobox',
name: 'baselinecolorcombo',
fieldLabel: 'Baseline Color',
labelWidth: 100,
inputWidth: 70,
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data : [
{'name':'Blue','value':'#2F40FA'},
{'name':'Green', 'value':'#46E01B'},
{'name':'Orange','value':'#F0A800'},
{'name':'Red','value':'#E0321B'},
{'name':'Yellow','value':'#F5ED16'}
xtype: 'fieldset',
name: 'baselineowfieldset',
layout: 'column',
defaults: {
margin: '5 5 5 0'
},
items:
[
{
xtype: 'numberfield',
fieldLabel: 'Startvalue',
name: 'basestart',
allowBlank: false,
labelWidth: 60,
width: 120
},
{
xtype: 'numberfield',
fieldLabel: 'Endvalue',
name: 'baseend',
allowBlank: false,
labelWidth: 60,
width: 120
},
{
xtype: 'combobox',
name: 'baselinecolorcombo',
fieldLabel: 'Baseline Color',
labelWidth: 100,
inputWidth: 70,
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data : [
{'name':'Blue','value':'#2F40FA'},
{'name':'Green', 'value':'#46E01B'},
{'name':'Orange','value':'#F0A800'},
{'name':'Red','value':'#E0321B'},
{'name':'Yellow','value':'#F5ED16'}
]
}),
displayField: 'name',
valueField: 'value',
value: '#46E01B'
},
{
xtype: 'checkboxfield',
name: 'baselinefillcheck',
boxLabel: 'Fill'
},
{
xtype: 'button',
width: 60,
text: 'Remove',
name: 'removebaselinebtn',
handler: function(btn) {
me.removeRow(btn);
}
}
]
}),
displayField: 'name',
valueField: 'value',
value: '#46E01B'
},
{
xtype: 'checkboxfield',
name: 'baselinefillcheck',
boxLabel: 'Fill'
}
];
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();
}
});