start to reorganise the example application

3 files changed, 112 insertions, 154 deletions

diff --git a/docs/examples/index.html b/docs/examples/index.html
index 3debd18..ec5143d 100644
--- a/docs/examples/index.html
+++ b/docs/examples/index.html
@@ -18,31 +18,36 @@
         <script type="text/javascript">
         // Recipes for the charts on this page
 
-        var application_recipes = [
-            {
-                title: 'Jarmon Webserver TCP Stats',
-                data: [
-                    ['data/tcpconns-8080-local/tcp_connections-CLOSE_WAIT.rrd', 0, 'CLOSE_WAIT', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-SYN_RECV.rrd', 0, 'SYN_RECV', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-TIME_WAIT.rrd', 0, 'TIME_WAIT', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-CLOSED.rrd', 0, 'CLOSED', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT2.rrd', 0, 'FIN_WAIT2', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT1.rrd', 0, 'FIN_WAIT1', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-ESTABLISHED.rrd', 0, 'ESTABLISHED', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-LAST_ACK.rrd', 0, 'LAST_ACK', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-LISTEN.rrd', 0, 'LISTEN', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-SYN_SENT.rrd', 0, 'SYN_SENT', ''],
-                    ['data/tcpconns-8080-local/tcp_connections-CLOSING.rrd', 0, 'CLOSING', '']
-                ],
-                options: jQuery.extend(true, {yaxis: {tickDecimals: 0}}, jarmon.Chart.BASE_OPTIONS, jarmon.Chart.STACKED_OPTIONS)
-            }
-        ];
+        var application_recipe = {
+            title: 'Jarmon Webserver TCP Stats',
+            data: [
+                ['data/tcpconns-8080-local/tcp_connections-CLOSE_WAIT.rrd', 0, 'CLOSE_WAIT', ''],
+                ['data/tcpconns-8080-local/tcp_connections-SYN_RECV.rrd', 0, 'SYN_RECV', ''],
+                ['data/tcpconns-8080-local/tcp_connections-TIME_WAIT.rrd', 0, 'TIME_WAIT', ''],
+                ['data/tcpconns-8080-local/tcp_connections-CLOSED.rrd', 0, 'CLOSED', ''],
+                ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT2.rrd', 0, 'FIN_WAIT2', ''],
+                ['data/tcpconns-8080-local/tcp_connections-FIN_WAIT1.rrd', 0, 'FIN_WAIT1', ''],
+                ['data/tcpconns-8080-local/tcp_connections-ESTABLISHED.rrd', 0, 'ESTABLISHED', ''],
+                ['data/tcpconns-8080-local/tcp_connections-LAST_ACK.rrd', 0, 'LAST_ACK', ''],
+                ['data/tcpconns-8080-local/tcp_connections-LISTEN.rrd', 0, 'LISTEN', ''],
+                ['data/tcpconns-8080-local/tcp_connections-SYN_SENT.rrd', 0, 'SYN_SENT', ''],
+                ['data/tcpconns-8080-local/tcp_connections-CLOSING.rrd', 0, 'CLOSING', '']
+            ],
+            options: jQuery.extend(true, {yaxis: {tickDecimals: 0}}, jarmon.Chart.BASE_OPTIONS, jarmon.Chart.STACKED_OPTIONS)
+        };
 
 
         function initialiseCharts() {
             /**
              * Setup chart date range controls and all charts
              **/
+            var cc = new jarmon.ChartCoordinator($('.chartRangeControl'));
+
+            var TABS = [
+                ['System',      ['cpu', 'memory','load']],
+                ['Network',     ['interface']],
+                ['DNS',         ['dns_query_types', 'dns_return_codes']]
+            ];
 
             var p = new jarmon.Parallimiter(1);
             function serialDownloader(url) {
@@ -50,17 +55,36 @@
             }
 
             // Extract the chart template from the page
-            var chartTemplate = $('.chart-container').remove();
-
-            function templateFactory(parentEl) {
-                return function() {
-                    // The chart template must be appended to the page early, so
-                    // that flot can calculate chart dimensions etc.
-                    return chartTemplate.clone().appendTo(parentEl);
+            var $chartTemplate = $('.chart-container').remove();
+
+            var $tabs = $('<ul/>', {'class': 'css-tabs'}).appendTo('.tabbed-chart-interface');
+            var $tabPanels = $('<div/>', {'class': 'css-panes charts'}).appendTo('.tabbed-chart-interface');
+            var tabName, $tabPanel, chartNames;
+            for(var i=0; i<TABS.length; i++) {
+                tabName = TABS[i][0];
+                chartNames = TABS[i][1];
+                // Add a tab
+                $('<li/>').append(
+                    $('<a/>', {href: ['#', tabName].join('')}).text(tabName)
+                ).appendTo($tabs);
+
+                // Add tab panel
+                $tabPanel = $('<div/>').appendTo($tabPanels);
+
+                for(var j=0; j<chartNames.length; j++) {
+                    cc.charts.push(
+                        new jarmon.Chart(
+                            $chartTemplate.clone().appendTo($tabPanel),
+                            jarmon.COLLECTD_RECIPES[chartNames[j]],
+                            serialDownloader
+                        )
+                    );
                 }
             }
 
-            var cc = new jarmon.ChartCoordinator($('.chartRangeControl'));
+            // Setup dhtml tabs
+            $(".css-tabs").tabs(".css-panes > div", {history: true});
+
             var t;
             // Initialise tabs and update charts when tab is clicked
             $(".css-tabs:first").bind('click', function(i) {
@@ -70,24 +94,6 @@
                 t = window.setTimeout(function() { cc.update(); }, 100);
             });
 
-            cc.charts = [].concat(
-                jarmon.Chart.fromRecipe(
-                    [].concat(
-                        jarmon.COLLECTD_RECIPES.cpu,
-                        jarmon.COLLECTD_RECIPES.memory,
-                        jarmon.COLLECTD_RECIPES.load),
-                    templateFactory('.system-charts'), serialDownloader),
-                jarmon.Chart.fromRecipe(
-                    jarmon.COLLECTD_RECIPES.interface,
-                    templateFactory('.network-charts'), serialDownloader),
-                jarmon.Chart.fromRecipe(
-                    jarmon.COLLECTD_RECIPES.dns,
-                    templateFactory('.dns-charts'), serialDownloader),
-                jarmon.Chart.fromRecipe(
-                    application_recipes,
-                    templateFactory('.application-charts'), serialDownloader)
-            );
-
             // Initialise all the charts
             cc.init();
         }
@@ -157,9 +163,6 @@
                 }
             );
 
-            // Setup dhtml tabs
-            $(".css-tabs").tabs(".css-panes > div", {history: true});
-
             initialiseCharts();
         });
         </script>
@@ -194,18 +197,7 @@
                 <div class="range-preview"
                      title="Time range preview - click and drag to select a custom timerange" ></div>
             </form>
-            <ul class="css-tabs">
-                <li><a href="#system">System</a></li>
-                <li><a href="#network">Network</a></li>
-                <li><a href="#dns">DNS</a></li>
-                <li><a href="#application">Application</a></li>
-            </ul>
-            <div class="css-panes charts">
-                <div class="system-charts"></div>
-                <div class="network-charts"></div>
-                <div class="dns-charts"></div>
-                <div class="application-charts"></div>
-            </div>
+            <div class="tabbed-chart-interface"></div>
             <div class="chart-container">
                 <h2 class="title"></h2>
                 <div class="error"></div>
diff --git a/docs/examples/jarmon_example_recipes.js b/docs/examples/jarmon_example_recipes.js
index 90b5c2e..e2e42b9 100644
--- a/docs/examples/jarmon_example_recipes.js
+++ b/docs/examples/jarmon_example_recipes.js
@@ -10,79 +10,69 @@ if(typeof jarmon == 'undefined') {
 }
 
 jarmon.COLLECTD_RECIPES = {
-    'cpu': [
-        {
-            title: 'CPU Usage',
-            data: [
-                ['data/cpu-0/cpu-wait.rrd', 0, 'CPU-0 Wait', '%'],
-                ['data/cpu-1/cpu-wait.rrd', 0, 'CPU-1 Wait', '%'],
-                ['data/cpu-0/cpu-system.rrd', 0, 'CPU-0 System', '%'],
-                ['data/cpu-1/cpu-system.rrd', 0, 'CPU-1 System', '%'],
-                ['data/cpu-0/cpu-user.rrd', 0, 'CPU-0 User', '%'],
-                ['data/cpu-1/cpu-user.rrd', 0, 'CPU-1 User', '%']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
-                                             jarmon.Chart.STACKED_OPTIONS)
-        }
-    ],
+    'cpu': {
+        title: 'CPU Usage',
+        data: [
+            ['data/cpu-0/cpu-wait.rrd', 0, 'CPU-0 Wait', '%'],
+            ['data/cpu-1/cpu-wait.rrd', 0, 'CPU-1 Wait', '%'],
+            ['data/cpu-0/cpu-system.rrd', 0, 'CPU-0 System', '%'],
+            ['data/cpu-1/cpu-system.rrd', 0, 'CPU-1 System', '%'],
+            ['data/cpu-0/cpu-user.rrd', 0, 'CPU-0 User', '%'],
+            ['data/cpu-1/cpu-user.rrd', 0, 'CPU-1 User', '%']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+                                         jarmon.Chart.STACKED_OPTIONS)
+    },
 
-    'memory': [
-        {
-            title: 'Memory',
-            data: [
-                ['data/memory/memory-buffered.rrd', 0, 'Buffered', 'B'],
-                ['data/memory/memory-used.rrd', 0, 'Used', 'B'],
-                ['data/memory/memory-cached.rrd', 0, 'Cached', 'B'],
-                ['data/memory/memory-free.rrd', 0, 'Free', 'B']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
-                                             jarmon.Chart.STACKED_OPTIONS)
-        }
-    ],
+    'memory': {
+        title: 'Memory',
+        data: [
+            ['data/memory/memory-buffered.rrd', 0, 'Buffered', 'B'],
+            ['data/memory/memory-used.rrd', 0, 'Used', 'B'],
+            ['data/memory/memory-cached.rrd', 0, 'Cached', 'B'],
+            ['data/memory/memory-free.rrd', 0, 'Free', 'B']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS,
+                                         jarmon.Chart.STACKED_OPTIONS)
+    },
 
-    'dns': [
-        {
-            title: 'DNS Query Types',
-            data: [
-                ['data/dns/dns_qtype-A.rrd', 0, 'A', 'Q/s'],
-                ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR', 'Q/s'],
-                ['data/dns/dns_qtype-SOA.rrd', 0, 'SOA', 'Q/s'],
-                ['data/dns/dns_qtype-SRV.rrd', 0, 'SRV', 'Q/s']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
-        },
+    'dns_query_types': {
+        title: 'DNS Query Types',
+        data: [
+            ['data/dns/dns_qtype-A.rrd', 0, 'A', 'Q/s'],
+            ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR', 'Q/s'],
+            ['data/dns/dns_qtype-SOA.rrd', 0, 'SOA', 'Q/s'],
+            ['data/dns/dns_qtype-SRV.rrd', 0, 'SRV', 'Q/s']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+    },
 
-        {
-            title: 'DNS Return Codes',
-            data: [
-                ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/s'],
-                ['data/dns/dns_rcode-NXDOMAIN.rrd', 0, 'NXDOMAIN', 'Q/s'],
-                ['data/dns/dns_rcode-SERVFAIL.rrd', 0, 'SERVFAIL', 'Q/s']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
-        }
-    ],
+    'dns_return_codes': {
+        title: 'DNS Return Codes',
+        data: [
+            ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/s'],
+            ['data/dns/dns_rcode-NXDOMAIN.rrd', 0, 'NXDOMAIN', 'Q/s'],
+            ['data/dns/dns_rcode-SERVFAIL.rrd', 0, 'SERVFAIL', 'Q/s']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+    },
 
-    'load': [
-        {
-            title: 'Load Average',
-            data: [
-                ['data/load/load.rrd', 'shortterm', 'Short Term', ''],
-                ['data/load/load.rrd', 'midterm', 'Medium Term', ''],
-                ['data/load/load.rrd', 'longterm', 'Long Term', '']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
-        }
-    ],
+    'load': {
+        title: 'Load Average',
+        data: [
+            ['data/load/load.rrd', 'shortterm', 'Short Term', ''],
+            ['data/load/load.rrd', 'midterm', 'Medium Term', ''],
+            ['data/load/load.rrd', 'longterm', 'Long Term', '']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+    },
 
-    'interface': [
-        {
-            title: 'Wlan0 Throughput',
-            data: [
-                ['data/interface/if_octets-wlan0.rrd', 'tx', 'Transmit', 'b/s'],
-                ['data/interface/if_octets-wlan0.rrd', 'rx', 'Receive', 'b/s']
-            ],
-            options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
-        }
-    ]
+    'interface': {
+        title: 'Wlan0 Throughput',
+        data: [
+            ['data/interface/if_octets-wlan0.rrd', 'tx', 'Transmit', 'b/s'],
+            ['data/interface/if_octets-wlan0.rrd', 'rx', 'Receive', 'b/s']
+        ],
+        options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS)
+    }
 };
diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js
index 5952aa2..0919915 100644
--- a/jarmon/jarmon.js
+++ b/jarmon/jarmon.js
@@ -679,30 +679,6 @@ jarmon.Chart.prototype.draw = function() {
 };
 
 
-jarmon.Chart.fromRecipe = function(recipes, templateFactory, downloader) {
-    /**
-     * A static factory method to generate a list of I{Chart} from a list of
-     * recipes and a list of available rrd files in collectd path format.
-     *
-     * @method fromRecipe
-     * @param recipes {Array} A list of recipe objects.
-     * @param templateFactory {Function} A callable which generates an html
-     *      template for a chart.
-     * @param downloader {Function} A download function which returns a Deferred
-     * @return {Array} A list of Chart objects
-     **/
-
-    var charts = [];
-
-    for(var i=0; i<recipes.length; i++) {
-        charts.push(
-            new jarmon.Chart(templateFactory(), recipes[i], downloader)
-        );
-    }
-    return charts;
-};
-
-
 /**
  * Generate a form through which to choose a data source from a remote RRD file
  *