- enhanced performance for charts

- better axis title handling

git-svn-id: https://svn.fhem.de/fhem/trunk@3126 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/www/frontend/CHANGED

@@ -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

fhem/www/frontend/controls_frontend.txt

@@ -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

fhem/www/frontend/www/frontend/app/controller/ChartController.js

@@ -127,8 +127,11 @@ Ext.define('FHEM.controller.ChartController', {
         //show loadmask
         me.getLinechartpanel().setLoading(true);
         
-        //collapse chart settings
+        //timeout needed for loadmask to appear
-        me.getChartformpanel().collapse();
+        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 lcph = lcp.getHeight(),
-            var chartwidth = lcp.getWidth() - 25;
+                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,

fhem/www/frontend/www/frontend/app/controller/MainController.js

@@ -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

fhem/www/frontend/www/frontend/app/store/DeviceStore.js

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

fhem/www/frontend/www/frontend/app/view/LineChartPanel.js

@@ -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', {
+                          store: me.devicestore,
-                              proxy: {
+                          allowBlank: false,
-                                  type: 'ajax',
+                          queryMode: 'local',
-                                  method: 'POST',
-                                  url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1',
-                                  reader: {
-                                      type: 'json',
-                                      root: 'data',
-                                      totalProperty: 'totalCount'
-                                  }
-                              },
-                              autoLoad: true
-                          }),
                           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,
+                            width: 60,
-                            text: 'Add another Y-Axis',
+                            text: 'Remove',
-                            name: 'addyaxisbtn',
+                            name: 'removerowbtn',
                             handler: function(btn) {
-                                me.createNewYAxis();
+                                me.removeRow(btn);
-                            }
-                        },
-                        {
-                            xtype: 'button',
-                            width: 90,
-                            text: 'Add Baseline',
-                            name: 'addbaselinebtn',
-                            handler: function(btn) {
-                                me.createNewBaseLineFields(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)) {
+        Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(itemsToAdd);
-            btn.up().add(itemsToAdd);
-        } else {
-            this.down('fieldset[name=singlerowfieldset]').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();
     }
 });