diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index ce78517fd..92d34befd 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -276,10 +276,10 @@ UPD 2013-12-07_12:24:10 2270 www/frontend/app/app.js UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js UPD 2013-07-07_12:12:08 16201 www/frontend/app/view/DevicePanel.js UPD 2013-12-26_08:39:37 10257 www/frontend/app/view/TableDataGridPanel.js -UPD 2013-12-26_08:39:37 31894 www/frontend/app/view/LineChartPanel.js +UPD 2013-12-29_01:56:25 64890 www/frontend/app/view/LineChartPanel.js UPD 2013-12-27_01:39:11 9980 www/frontend/app/view/Viewport.js -UPD 2013-12-27_03:20:41 19171 www/frontend/app/controller/MainController.js -UPD 2013-12-27_05:40:34 106568 www/frontend/app/controller/ChartController.js +UPD 2013-12-29_01:55:25 19171 www/frontend/app/controller/MainController.js +UPD 2013-12-29_01:54:25 112255 www/frontend/app/controller/ChartController.js UPD 2013-06-30_11:46:54 5415 www/frontend/app/controller/TableDataController.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 diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index 37c4bdb45..bb31b4019 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -297,9 +297,7 @@ Ext.define('FHEM.controller.ChartController', { //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]'), + rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'), yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'), axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'); @@ -434,9 +432,7 @@ Ext.define('FHEM.controller.ChartController', { 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, + styleConfig = rowFieldSets[i].styleConfig, yaxisstatistics = yaxesstatistics[i].getValue(), axisside = axissideradio[i].getChecked()[0].getSubmitValue(), logtype = axissideradio[i].up().down("radiogroup[name=datasourceradio]").getChecked()[0].inputValue; @@ -444,8 +440,7 @@ Ext.define('FHEM.controller.ChartController', { yaxis = yaxes[i].getRawValue(); } - me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, - yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype); + me.populateAxis(i, yaxes.length, device, yaxis, styleConfig, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype); i++; }); @@ -814,7 +809,7 @@ Ext.define('FHEM.controller.ChartController', { /** * fill the axes with data */ - populateAxis: function(i, axeslength, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype) { + populateAxis: function(i, axeslength, device, yaxis, styleConfig, axisside, yaxisstatistics, dbstarttime, dbendtime, logtype) { var me = this, chart = me.getChart(), @@ -825,9 +820,9 @@ Ext.define('FHEM.controller.ChartController', { generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(); if (i > 0) { - yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); + yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, styleConfig, axisside); } else { - yseries = me.createSeries('VALUE', device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); + yseries = me.createSeries('VALUE', device + " - " + yaxis, styleConfig, axisside); } var url; @@ -896,8 +891,6 @@ Ext.define('FHEM.controller.ChartController', { Ext.each(responseArr, function(row) { // the first column is always the timestamp, followed by device and key:value var timestamp = row.split(" ")[0].replace("_", " "), - //keyindex = row.split(": ")[0].split(" ").length - 1, - //key = row.split(": ")[0].split(" ")[keyindex], val = row.split(" ")[1]; if (timestamp && val) { @@ -1021,7 +1014,7 @@ Ext.define('FHEM.controller.ChartController', { //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 - if(yaxisstepcheck) { + if(styleConfig.yaxisstepcheck === "true" || styleConfig.yaxisstepcheck === true) { if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") { var lastrec = store.last(); var datetomodify = Ext.Date.parse(json.data[j].TIMESTAMP, "Y-m-d H:i:s"); @@ -1219,7 +1212,7 @@ Ext.define('FHEM.controller.ChartController', { /** * create a single series for the chart */ - createSeries: function(yfield, title, fill, color, axisside) { + createSeries: function(yfield, title, styleConfig, axisside) { //setting axistitle and fontsize var chart = this.getChart(), @@ -1265,27 +1258,27 @@ Ext.define('FHEM.controller.ChartController', { xField : 'TIMESTAMP', yField : yfield, title: title, - showInLegend: true, - smooth: 0, + showInLegend: (styleConfig.yaxislegendcheck === "false" || styleConfig.yaxislegendcheck === false) ? false : true, + smooth: (styleConfig.yaxisstepcheck === "true" || styleConfig.yaxisstepcheck === true)? 0 : styleConfig.yaxissmoothing, highlight: { size: 5, radius: 5 }, - fill: fill, + fill: (styleConfig.yaxisfillcheck === "false" || styleConfig.yaxisfillcheck === false) ? false : true, style: { - fill: color, + fill: '#' + styleConfig.fillcolorhexcode, // fill: 'url(#gradientId)', - opacity: 0.7, - stroke: '#808080', - 'stroke-width': 2 + opacity: styleConfig.fillopacity, + stroke: '#' + styleConfig.linecolorhexcode, + 'stroke-width': styleConfig.linestrokewidth }, markerConfig: { - type: 'circle', - radius: 2, - stroke: color, - fill: color + type: styleConfig.pointshape, + radius: styleConfig.pointradius, + stroke: '#' + styleConfig.pointcolorhexcode, + fill: '#' + styleConfig.pointcolorhexcode }, - showMarkers: true, + showMarkers: (styleConfig.yaxisshowpoints === "false" || styleConfig.yaxisshowpoints === false) ? false : true, selectionTolerance: 5, tips : { trackMouse : true, @@ -1450,21 +1443,19 @@ Ext.define('FHEM.controller.ChartController', { savename = savename.replace(/\+/g, "_"); //getting the necessary values - var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'); - var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'); - var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'); - var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'); - var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'); - 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 logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'), + devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'), + yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'), + rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'), + axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'), + yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'), - var basesstart = Ext.ComponentQuery.query('numberfield[name=basestart]'); - var basesend = Ext.ComponentQuery.query('numberfield[name=baseend]'); - var basescolors = Ext.ComponentQuery.query('combobox[name=baselinecolorcombo]'); - var basesfills = Ext.ComponentQuery.query('checkboxfield[name=baselinefillcheck]'); + 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]'), - var starttime = me.getStarttimepicker().getValue(), + 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'), @@ -1493,9 +1484,18 @@ Ext.define('FHEM.controller.ChartController', { var logtype = logtypes[i].getChecked()[0].inputValue, device = dev.getValue(), yaxis = yaxes[i].getValue(), - yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(), - yaxisfillcheck = yaxesfillchecks[i].checked, - yaxisstepcheck = yaxesstepchecks[i].checked, + linestrokewidth = rowFieldSets[i].styleConfig.linestrokewidth, + linecolorhexcode = rowFieldSets[i].styleConfig.linecolorhexcode.toString(), + fillopacity = rowFieldSets[i].styleConfig.fillopacity, + fillcolorhexcode = rowFieldSets[i].styleConfig.fillcolorhexcode, + yaxisshowpoints = rowFieldSets[i].styleConfig.yaxisshowpoints, + pointshape = rowFieldSets[i].styleConfig.pointshape, + pointradius = rowFieldSets[i].styleConfig.pointradius, + yaxissmoothing = rowFieldSets[i].styleConfig.yaxissmoothing, + yaxislegendcheck = rowFieldSets[i].styleConfig.yaxislegendcheck, + pointcolorhexcode = rowFieldSets[i].styleConfig.pointcolorhexcode, + yaxisfillcheck = rowFieldSets[i].styleConfig.yaxisfillcheck, + yaxisstepcheck = rowFieldSets[i].styleConfig.yaxisstepcheck, yaxisstatistics = yaxesstatistics[i].getValue(), axisside = axissideradio[i].getChecked()[0].getSubmitValue(), rightaxistitle = me.getChartformpanel().down('textfield[name=rightaxistitle]').getValue(), @@ -1506,11 +1506,20 @@ Ext.define('FHEM.controller.ChartController', { //replacing + in title rightaxistitle = rightaxistitle.replace(/\+/g, "_"); leftaxistitle = leftaxistitle.replace(/\+/g, "_"); - if (i === 0) { jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",'; jsonConfig += '"logtype":"' + logtype + '",'; - jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",'; + jsonConfig += '"linestrokewidth":"' + linestrokewidth + '",'; + jsonConfig += '"linecolorhexcode":"' + linecolorhexcode + '",'; + jsonConfig += '"fillopacity":"' + fillopacity + '",'; + jsonConfig += '"fillcolorhexcode":"' + fillcolorhexcode + '",'; + jsonConfig += '"yaxisshowpoints":"' + yaxisshowpoints + '",'; + jsonConfig += '"pointshape":"' + pointshape + '",'; + jsonConfig += '"pointradius":"' + pointradius + '",'; + jsonConfig += '"yaxissmoothing":"' + yaxissmoothing + '",'; + jsonConfig += '"yaxislegendcheck":"' + yaxislegendcheck + '",'; + jsonConfig += '"pointcolorhexcode":"' + pointcolorhexcode + '",'; + jsonConfig += '"yaxisfillcheck":"' + yaxisfillcheck + '",'; jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",'; jsonConfig += '"yaxisside":"' + axisside + '",'; jsonConfig += '"leftaxistitle":"' + leftaxistitle + '",'; @@ -1523,16 +1532,26 @@ Ext.define('FHEM.controller.ChartController', { var logtypename = "y" + (i + 1) + "logtype", axisname = "y" + (i + 1) + "axis", devicename = "y" + (i + 1) + "device", - colorname = "y" + (i + 1) + "axiscolorcombo", - fillname = "y" + (i + 1) + "axisfillcheck", - stepname = "y" + (i + 1) + "axisstepcheck", sidename = "y" + (i + 1) + "axisside", - statsname = "y" + (i + 1) + "axisstatistics"; + statsname = "y" + (i + 1) + "axisstatistics", + prefix = "y" + (i + 1); jsonConfig += '"' + axisname + '":"' + yaxis + '","' + devicename + '":"' + device + '",'; jsonConfig += '"' + logtypename + '":"' + logtype + '",'; - jsonConfig += '"' + colorname + '":"' + yaxiscolorcombo + '","' + fillname + '":"' + yaxisfillcheck + '",'; - jsonConfig += '"' + stepname + '":"' + yaxisstepcheck + '",'; + + jsonConfig += '"' + prefix + 'linestrokewidth' + '":"' + linestrokewidth + '",'; + jsonConfig += '"' + prefix + 'linecolorhexcode' + '":"' + linecolorhexcode + '",'; + jsonConfig += '"' + prefix + 'fillopacity' + '":"' + fillopacity + '",'; + jsonConfig += '"' + prefix + 'fillcolorhexcode' + '":"' + fillcolorhexcode + '",'; + jsonConfig += '"' + prefix + 'yaxisshowpoints' + '":"' + yaxisshowpoints + '",'; + jsonConfig += '"' + prefix + 'pointshape' + '":"' + pointshape + '",'; + jsonConfig += '"' + prefix + 'pointradius' + '":"' + pointradius + '",'; + jsonConfig += '"' + prefix + 'yaxissmoothing' + '":"' + yaxissmoothing + '",'; + jsonConfig += '"' + prefix + 'yaxislegendcheck' + '":"' + yaxislegendcheck + '",'; + jsonConfig += '"' + prefix + 'pointcolorhexcode' + '":"' + pointcolorhexcode + '",'; + jsonConfig += '"' + prefix + 'axisfillcheck' + '":"' + yaxisfillcheck + '",'; + jsonConfig += '"' + prefix + 'axisstepcheck' + '":"' + yaxisstepcheck + '",'; + jsonConfig += '"' + sidename + '":"' + axisside + '",'; if (yaxisstatistics !== "none") { jsonConfig += '"' + statsname + '":"' + yaxisstatistics + '",'; @@ -1760,19 +1779,30 @@ Ext.define('FHEM.controller.ChartController', { yaxeslength++; } - var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'); - var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'); - var yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'); - var yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'); - var yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'); - 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 logtypename; + var logtypes = Ext.ComponentQuery.query('radiogroup[name=datasourceradio]'), + devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'), + yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'), + rowFieldSets = Ext.ComponentQuery.query('fieldset[commonName=singlerowfieldset]'), + axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'), + yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'), + oldColorArray = ['Blue', 'Green', 'Orange', 'Yellow', 'Red'], + logtypename; var i = 0; Ext.each(yaxes, function(yaxis) { + // cleanup old colorvalues from old chartconfigs + if (chartdata.yaxiscolorcombo === "Blue") { + chartdata.yaxiscolorcombo = "3366FF"; + } else if (chartdata.yaxiscolorcombo === "Green") { + chartdata.yaxiscolorcombo = "00FF00"; + } else if (chartdata.yaxiscolorcombo === "Orange") { + chartdata.yaxiscolorcombo = "FF6600"; + } else if (chartdata.yaxiscolorcombo === "Yellow") { + chartdata.yaxiscolorcombo = "FFFF00"; + } else if (chartdata.yaxiscolorcombo === "Red") { + chartdata.yaxiscolorcombo = "FF0000"; + } if (i === 0) { logtypename = logtypes[i].getChecked()[0].name; eval('logtypes[i].setValue({' + logtypename + ': "' + chartdata.logtype + '"})'); @@ -1780,9 +1810,19 @@ Ext.define('FHEM.controller.ChartController', { yaxes[i].getStore().getProxy().url = url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + chartdata.device + '+getreadings&XHR=1'; yaxes[i].setDisabled(false); yaxes[i].setValue(chartdata.y); - yaxescolorcombos[i].setValue(chartdata.yaxiscolorcombo); - yaxesfillchecks[i].setValue(chartdata.yaxisfillcheck); - yaxesstepchecks[i].setValue(chartdata.yaxisstepcheck); + rowFieldSets[i].styleConfig.linestrokewidth = chartdata.linestrokewidth || 2; + rowFieldSets[i].styleConfig.linecolorhexcode = chartdata.linecolorhexcode || '000000'; + rowFieldSets[i].styleConfig.fillopacity = chartdata.fillopacity || 0.5; + rowFieldSets[i].styleConfig.fillcolorhexcode = chartdata.fillcolorhexcode || chartdata.yaxiscolorcombo || 'FF0000'; + rowFieldSets[i].styleConfig.yaxisshowpoints = chartdata.yaxisshowpoints || true; + rowFieldSets[i].styleConfig.pointshape = chartdata.pointshape || 'circle'; + rowFieldSets[i].styleConfig.pointradius = chartdata.pointradius || 2; + rowFieldSets[i].styleConfig.yaxissmoothing = chartdata.yaxissmoothing || 3; + rowFieldSets[i].styleConfig.yaxislegendcheck = chartdata.yaxislegendcheck || true; + rowFieldSets[i].styleConfig.pointcolorhexcode = chartdata.pointcolorhexcode || chartdata.yaxiscolorcombo || 'FF0000'; + rowFieldSets[i].styleConfig.yaxisfillcheck = chartdata.yaxisfillcheck || false; + rowFieldSets[i].styleConfig.yaxisstepcheck = chartdata.yaxisstepcheck || false; + axissideradio[i].items.items[0].setValue(chartdata.yaxisside); if (chartdata.yaxisstatistics && chartdata.yaxisstatistics !== "") { @@ -1792,23 +1832,44 @@ Ext.define('FHEM.controller.ChartController', { } i++; } else { - logtypename = logtypes[i].getChecked()[0].name, - logtype = "y" + (i + 1) + "logtype", - axisdevice = "y" + (i + 1) + "device", - axisname = "y" + (i + 1) + "axis", - axiscolorcombo = axisname + "colorcombo", - axisfillcheck = axisname + "fillcheck", - axisstepcheck = axisname + "stepcheck", - axisside = axisname + "side", - axisstatistics = axisname + "statistics"; + logtypename = logtypes[i].getChecked()[0].name, + logtype = "y" + (i + 1) + "logtype", + axisdevice = "y" + (i + 1) + "device", + axisname = "y" + (i + 1) + "axis", + axisside = axisname + "side", + axisstatistics = axisname + "statistics", + prefix = "y" + (i + 1), + oldcolorcombo = eval('chartdata.' + prefix + 'axiscolorcombo'); + + // cleanup old colorvalues from old chartconfigs + if (oldcolorcombo === "Blue") { + oldcolorcombo = "3366FF"; + } else if (oldcolorcombo === "Green") { + oldcolorcombo = "00FF00"; + } else if (oldcolorcombo === "Orange") { + oldcolorcombo = "FF6600"; + } else if (oldcolorcombo === "Yellow") { + oldcolorcombo = "FFFF00"; + } else if (oldcolorcombo === "Red") { + oldcolorcombo = "FF0000"; + } eval('logtypes[i].setValue({' + logtypename + ' : chartdata.' + logtype + '})'); eval('devices[i].setValue(chartdata.' + axisdevice + ')'); yaxes[i].getStore().getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+' + eval('chartdata.' + axisdevice) + '+getreadings&XHR=1'; yaxes[i].setDisabled(false); eval('yaxes[i].setValue(chartdata.' + axisname + ')'); - eval('yaxescolorcombos[i].setValue(chartdata.' + axiscolorcombo + ')'); - eval('yaxesfillchecks[i].setValue(chartdata.' + axisfillcheck + ')'); - eval('yaxesstepchecks[i].setValue(chartdata.' + axisstepcheck + ')'); + rowFieldSets[i].styleConfig.linestrokewidth = eval('chartdata.' + prefix + 'linestrokewidth') || 2; + rowFieldSets[i].styleConfig.linecolorhexcode = eval('chartdata.' + prefix + 'linecolorhexcode') || '000000'; + rowFieldSets[i].styleConfig.fillopacity = eval('chartdata.' + prefix + 'fillopacity') || 0.5; + rowFieldSets[i].styleConfig.fillcolorhexcode = eval('chartdata.' + prefix + 'fillcolorhexcode') || oldcolorcombo || 'FF0000'; + rowFieldSets[i].styleConfig.yaxisshowpoints = eval('chartdata.' + prefix + 'yaxisshowpoints') || true; + rowFieldSets[i].styleConfig.pointshape = eval('chartdata.' + prefix + 'pointshape') || 'circle'; + rowFieldSets[i].styleConfig.pointradius = eval('chartdata.' + prefix + 'pointradius') || 2; + rowFieldSets[i].styleConfig.yaxissmoothing = eval('chartdata.' + prefix + 'yaxissmoothing') || 3; + rowFieldSets[i].styleConfig.yaxislegendcheck = eval('chartdata.' + prefix + 'yaxislegendcheck') || true; + rowFieldSets[i].styleConfig.pointcolorhexcode = eval('chartdata.' + prefix + 'pointcolorhexcode') || oldcolorcombo || 'FF0000'; + rowFieldSets[i].styleConfig.yaxisfillcheck = eval('chartdata.' + prefix + 'axisfillcheck') || false; + rowFieldSets[i].styleConfig.yaxisstepcheck = eval('chartdata.' + prefix + 'axisstepcheck') || false; eval('axissideradio[i].items.items[0].setValue(chartdata.' + axisside + ')'); if (eval('chartdata.' + axisstatistics) && eval('chartdata.' + axisstatistics) !== "") { @@ -2104,11 +2165,6 @@ Ext.define('FHEM.controller.ChartController', { column = { header: key, dataIndex: key, -// xtype: 'numbercolumn', -// format:'0.000', -// renderer: function(value){ -// return parseFloat(value, 10); -// }, width: columnwidth }; } else { diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index 431641526..063b8e16c 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -95,7 +95,7 @@ Ext.define('FHEM.controller.MainController', { if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); - sp.setText(FHEM.version + "; Frontend Version: 1.0.4 - 2013-12-27"); + sp.setText(FHEM.version + "; Frontend Version: 1.0.5 - 2013-12-29"); } this.setupTree(false); diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js index c27c94fb6..a829f55a7 100644 --- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js +++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js @@ -449,11 +449,13 @@ Ext.define('FHEM.view.LineChartPanel', { var me = this; me.setAxiscounter(me.getAxiscounter() + 1); + var countForThisRow = me.getAxiscounter(); var components = { xtype: 'fieldset', - name: 'singlerowfieldset', + name: 'singlerowfieldset' + countForThisRow, + commonName: 'singlerowfieldset', layout: 'hbox', autoScroll: true, defaults: { @@ -464,7 +466,7 @@ Ext.define('FHEM.view.LineChartPanel', { { xtype: 'radiogroup', name: 'datasourceradio', - rowCount: me.getAxiscounter(), + rowCount: countForThisRow, allowBlank: false, defaults: { labelWidth: 40, @@ -473,14 +475,14 @@ Ext.define('FHEM.view.LineChartPanel', { items: [ { fieldLabel: 'DbLog', - name: 'logtype' + me.getAxiscounter(), + name: 'logtype' + countForThisRow, inputValue: 'dblog', checked: true, disabled: !FHEM.dblogname }, { fieldLabel: 'FileLog', - name: 'logtype' + me.getAxiscounter(), + name: 'logtype' + countForThisRow, inputValue: 'filelog', checked: false, disabled: !FHEM.filelogs @@ -538,36 +540,352 @@ Ext.define('FHEM.view.LineChartPanel', { displayField: 'READING', valueField: 'READING' }, - { - xtype: 'combobox', - name: 'yaxiscolorcombo', - fieldLabel: 'Y-Color', - labelWidth: 50, - 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: '#2F40FA' - }, - { - xtype: 'checkboxfield', - name: 'yaxisfillcheck', - boxLabel: 'Fill' - }, - { - xtype: 'checkboxfield', - name: 'yaxisstepcheck', - boxLabel: 'Steps', - tooltip: 'Check, if the chart should be shown with steps instead of a linear Line' + { + xtype: 'button', + text: 'Styling...', + handler: function() { + Ext.create('Ext.window.Window', { + width: 470, + height: 600, + name: 'stylerwindow', + title: 'Set the Style for this Axis', + modal: true, + constrainHeader: true, + items: [ + { + xtype: 'panel', + title: 'Preview', + height: 200, + items: [ + me.createPreviewChart(countForThisRow) + ] + }, + { + xtype: 'panel', + title: 'Configuration', + autoScroll: true, + height: 335, + defaults: { + padding: '5px 5px 5px 5px' + }, + items: [ + { + xtype: 'fieldset', + layout: 'vbox', + title: 'Line Settings', + items: [ + { + xtype: 'numberfield', + name: 'linestrokewidth', + fieldLabel: 'Line Stroke Width', + editable: false, + labelWidth: 150, + value: me.getStyleConfig(countForThisRow).linestrokewidth, + maxValue: 10, + minValue: 1, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'container', + name: 'linecolorcontainer', + layout: 'hbox', + items: [ + { + xtype: 'displayfield', + value: 'Select your Linecolor: ', + width: 155 + }, + { + xtype: 'colorpicker', + listeners: { + select: function(picker, selColor) { + picker.up().down('textfield').setValue(selColor); + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'textfield', + padding: '0 0 0 5px', + labelWidth: 50, + width: 120, + name: 'linecolorhexcode', + fieldLabel: 'Hexcode', + value: me.getStyleConfig(countForThisRow).linecolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).linecolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).linecolorhexcode, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + } + ] + } + ] + }, + { + xtype: 'fieldset', + layout: 'vbox', + title: 'Fill Color', + items: [ + { + xtype: 'checkboxfield', + name: 'yaxisfillcheck', + fieldLabel: 'Use a Fill below the line?', + labelWidth: 150, + checked: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || !me.getStyleConfig(countForThisRow).yaxisfillcheck) ? false : true, + listeners: { + change: function(box, state) { + if (state === true) { + box.up().down('numberfield').show(); + box.up().down('container[name=fillcolorcontainer]').show(); + me.createPreviewChart(countForThisRow); + } else { + box.up().down('numberfield').hide(); + box.up().down('container[name=fillcolorcontainer]').hide(); + me.createPreviewChart(countForThisRow); + } + } + } + }, + { + xtype: 'numberfield', + name: 'fillopacity', + fieldLabel: 'Opacity for Fill', + editable: false, + hidden: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || me.getStyleConfig(countForThisRow).yaxisfillcheck === false) ? true : false, + labelWidth: 150, + value: me.getStyleConfig(countForThisRow).fillopacity, + maxValue: 1.0, + minValue: 0.1, + step: 0.1, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'container', + name: 'fillcolorcontainer', + layout: 'hbox', + hidden: (me.getStyleConfig(countForThisRow).yaxisfillcheck === "false" || me.getStyleConfig(countForThisRow).yaxisfillcheck === false) ? true : false, + items: [ + { + xtype: 'displayfield', + value: 'Select your Fillcolor: ', + width: 155 + }, + { + xtype: 'colorpicker', + listeners: { + select: function(picker, selColor) { + picker.up().down('textfield').setValue(selColor); + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'textfield', + padding: '0 0 0 5px', + labelWidth: 50, + width: 120, + name: 'fillcolorhexcode', + fieldLabel: 'Hexcode', + value: me.getStyleConfig(countForThisRow).fillcolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).fillcolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).fillcolorhexcode, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + } + ] + } + ] + }, + { + xtype: 'fieldset', + layout: 'vbox', + title: 'Point Settings', + items: [ + { + xtype: 'displayfield', + value: 'Configure how the Points representing Readings should be displayed.
' + }, + { + xtype: 'checkboxfield', + name: 'yaxisshowpoints', + checked: (me.getStyleConfig(countForThisRow).yaxisshowpoints === "false" || me.getStyleConfig(countForThisRow).yaxisshowpoints === false) ? false : true, + fieldLabel: 'Show Points? (if not, you will only see the line)', + labelWidth: 150, + listeners: { + change: function(box, state) { + if (state === true) { + box.up().down('container[name=pointfillcolorcontainer]').show(); + box.up().down('combo').show(); + box.up().down('numberfield[name=pointradius]').show(); + me.createPreviewChart(countForThisRow); + } else { + box.up().down('container[name=pointfillcolorcontainer]').hide(); + box.up().down('combo').hide(); + box.up().down('numberfield[name=pointradius]').hide(); + me.createPreviewChart(countForThisRow); + } + } + } + }, + { + xtype: 'combo', + fieldLabel: 'Choose the Shape', + name: 'shapecombo', + labelWidth: 150, + editable: false, + allowBlank: false, + store: ['circle', 'line', 'triangle', 'diamond', 'cross', 'plus', 'arrow'], + queryMode: 'local', + value: me.getStyleConfig(countForThisRow).pointshape, + listeners: { + change: function(combo, val) { + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'numberfield', + name: 'pointradius', + fieldLabel: 'Point Radius', + editable: false, + labelWidth: 150, + value: me.getStyleConfig(countForThisRow).pointradius, + maxValue: 10, + minValue: 1, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'container', + name: 'pointfillcolorcontainer', + layout: 'hbox', + items: [ + { + xtype: 'displayfield', + value: 'Select your Point-Fillcolor: ', + width: 155 + }, + { + xtype: 'colorpicker', + listeners: { + select: function(picker, selColor) { + picker.up().down('textfield').setValue(selColor); + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'textfield', + padding: '0 0 0 5px', + labelWidth: 50, + width: 120, + name: 'pointcolorhexcode', + fieldLabel: 'Hexcode', + value: me.getStyleConfig(countForThisRow).pointcolorhexcode.indexOf("#") >= 0 ? me.getStyleConfig(countForThisRow).pointcolorhexcode.split("#")[1] : me.getStyleConfig(countForThisRow).pointcolorhexcode, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + } + ] + } + ] + }, + { + xtype: 'fieldset', + layout: 'vbox', + title: 'Advanced Settings', + items: [ + { + xtype: 'checkboxfield', + name: 'yaxisstepcheck', + fieldLabel: 'Show Steps for this Axis?', + checked: (me.getStyleConfig(countForThisRow).yaxisstepcheck === "false" || me.getStyleConfig(countForThisRow).yaxisstepcheck === false) ? false : true, + labelWidth: 200, + listeners: { + change: function(box, checked) { + if (checked) { + box.up().down('numberfield').setDisabled(true); + } else { + box.up().down('numberfield').setDisabled(false); + } + } + } + }, + { + xtype: 'numberfield', + name: 'yaxissmoothing', + fieldLabel: 'Smoothing for this Axis (0 for off)', + editable: false, + value: me.getStyleConfig(countForThisRow).yaxissmoothing, + maxValue: 10, + minValue: 0, + labelWidth: 200, + listeners: { + change: function(field, val) { + me.createPreviewChart(countForThisRow); + } + } + }, + { + xtype: 'checkboxfield', + name: 'yaxislegendcheck', + fieldLabel: 'Show this Axis in Legend?', + labelWidth: 200, + checked: (me.getStyleConfig(countForThisRow).yaxislegendcheck === "false" || me.getStyleConfig(countForThisRow).yaxislegendcheck === false) ? false : true + } + ] + } + ] + } + ], + buttons: [ + { + text: "Cancel", + handler: function(btn) { + btn.up('window').destroy(); + } + }, + { + text: "Save settings", + handler: function(btn) { + var win = btn.up('window'), + styleConfig = me.getStyleConfig(countForThisRow); + + // set all values + styleConfig.linestrokewidth = win.down('numberfield[name=linestrokewidth]').getValue(); + styleConfig.linecolorhexcode = win.down('textfield[name=linecolorhexcode]').getValue(); + styleConfig.yaxisfillcheck = win.down('checkboxfield[name=yaxisfillcheck]').getValue(); + styleConfig.fillopacity = win.down('numberfield[name=fillopacity]').getValue(); + styleConfig.fillcolorhexcode = win.down('textfield[name=fillcolorhexcode]').getValue(); + styleConfig.yaxisshowpoints = win.down('checkboxfield[name=yaxisshowpoints]').getValue(); + styleConfig.pointshape = win.down('combo[name=shapecombo]').getValue(); + styleConfig.pointradius = win.down('numberfield[name=pointradius]').getValue(); + styleConfig.pointcolorhexcode = win.down('textfield[name=pointcolorhexcode]').getValue(); + styleConfig.yaxisstepcheck = win.down('checkboxfield[name=yaxisstepcheck]').getValue(); + styleConfig.yaxissmoothing = win.down('numberfield[name=yaxissmoothing]').getValue(); + styleConfig.yaxislegendcheck = win.down('checkboxfield[name=yaxislegendcheck]').getValue(); + + btn.up('window').destroy(); + } + } + ] + }).show(); + } }, { xtype: 'radiogroup', @@ -633,13 +951,124 @@ Ext.define('FHEM.view.LineChartPanel', { me.removeRow(btn); } } - ] + ], + styleConfig: { + linestrokewidth: 2, + linecolorhexcode: 'FF0000', + yaxisfillcheck: false, + fillopacity: 0.5, + fillcolorhexcode: 'FF0000', + yaxisshowpoints: true, + pointshape: 'circle', + pointradius: 2, + pointcolorhexcode: 'FF0000', + yaxisstepcheck: false, + yaxissmoothing: 3, + yaxislegendcheck: true + } }; Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(components); }, + /** + * + */ + createPreviewChart: function(countForThisRow) { + var me = this, + win = Ext.ComponentQuery.query('window[name=stylerwindow]')[0], + styleConfig = me.getStyleConfig(countForThisRow), + chart = Ext.create('Ext.chart.Chart', { + name: 'previewchart', + store: Ext.create('Ext.data.Store', { + model: Ext.define('WeatherPoint', { + extend: 'Ext.data.Model', + fields: ['temperature', 'date'] + }), + data: [ + { temperature: 2, date: new Date(2011, 1, 1, 3) }, + { temperature: 20, date: new Date(2011, 1, 1, 4) }, + { temperature: 6, date: new Date(2011, 1, 1, 5) }, + { temperature: 4, date: new Date(2011, 1, 1, 6) }, + { temperature: 30, date: new Date(2011, 1, 1, 7) }, + { temperature: 58, date: new Date(2011, 1, 1, 8) }, + { temperature: 63, date: new Date(2011, 1, 1, 9) }, + { temperature: 73, date: new Date(2011, 1, 1, 10) }, + { temperature: 78, date: new Date(2011, 1, 1, 11) }, + { temperature: 81, date: new Date(2011, 1, 1, 12) }, + { temperature: 64, date: new Date(2011, 1, 1, 13) }, + { temperature: 53, date: new Date(2011, 1, 1, 14) }, + { temperature: 21, date: new Date(2011, 1, 1, 15) }, + { temperature: 4, date: new Date(2011, 1, 1, 16) }, + { temperature: 6, date: new Date(2011, 1, 1, 17) }, + { temperature: 35, date: new Date(2011, 1, 1, 18) }, + { temperature: 8, date: new Date(2011, 1, 1, 19) }, + { temperature: 24, date: new Date(2011, 1, 1, 20) }, + { temperature: 22, date: new Date(2011, 1, 1, 21) }, + { temperature: 18, date: new Date(2011, 1, 1, 22) } + ] + }), + axes: [ + { + type: 'Numeric', + position: 'left', + fields: ['temperature'], + minimum: 0, + maximum: 100 + }, + { + type: 'Time', + position: 'bottom', + fields: ['date'], + dateFormat: 'ga' + } + ], + series: [ + { + type: 'line', + xField: 'date', + yField: 'temperature', + smooth: win ? win.down('numberfield[name=yaxissmoothing]').getValue() : styleConfig.yaxissmoothing, + fill: win ? win.down('checkboxfield[name=yaxisfillcheck]').getValue() : ((styleConfig.yaxisfillcheck === "false" || !styleConfig.yaxisfillcheck) ? false: true), + style: { + fill: win ? '#' + win.down('textfield[name=fillcolorhexcode]').getValue() : '#' + styleConfig.fillcolorhexcode, + opacity: win ? win.down('numberfield[name=fillopacity]').getValue() : styleConfig.fillopacity, + stroke: win ? '#' + win.down('textfield[name=linecolorhexcode]').getValue() : '#' + styleConfig.linecolorhexcode, + 'stroke-width': win ? win.down('numberfield[name=linestrokewidth]').getValue() : styleConfig.linestrokewidth + }, + markerConfig: { + type: win ? win.down('combo[name=shapecombo]').getValue() : styleConfig.pointshape, + radius: win ? win.down('numberfield[name=pointradius]').getValue() : styleConfig.pointradius, + stroke: win ? '#' + win.down('textfield[name=pointcolorhexcode]').getValue() : '#' + styleConfig.pointcolorhexcode, + fill: win ? '#' + win.down('textfield[name=pointcolorhexcode]').getValue() : '#' + styleConfig.pointcolorhexcode + }, + showMarkers: win ? win.down('checkboxfield[name=yaxisshowpoints]').getValue() : ((styleConfig.yaxisshowpoints === "false" || !styleConfig.yaxisshowpoints) ? false: true) + } + ], + width: 455, + height: 170 + }); + + // find exisitng chart + var existingChart = Ext.ComponentQuery.query('chart[name=previewchart]')[0]; + if (existingChart && existingChart !== chart) { + var parent = existingChart.up(); + existingChart.destroy(); + parent.add(chart); + } else { + return chart; + } + }, + + /** + * + */ + getStyleConfig: function(axiscount) { + var fs = Ext.ComponentQuery.query('fieldset[name=singlerowfieldset' + axiscount + ']')[0]; + return fs.styleConfig; + }, + /** * */