From 4d4fa4722b83a726471c39f8313dd157ed3a230b Mon Sep 17 00:00:00 2001
From: Richard Wall <richard@aziz>
Date: Sun, 18 Apr 2010 23:01:08 +0100
Subject: A create charts from recipe dicts

---
 index.html | 132 +++++++++++++++++++++++++++----------------------------------
 jrrd.js    |  20 ++++++++++
 2 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/index.html b/index.html
index 5a56fd8..b935840 100644
--- a/index.html
+++ b/index.html
@@ -74,9 +74,8 @@
         <script type="text/javascript">
 
         var baseOptions = {
-
             grid: {
-                clickable: true,
+                clickable: false,
                 borderWidth: 1,
                 borderColor: "#000",
                 color: "#000",
@@ -101,92 +100,79 @@
             }
         };
 
-        var fillOptions = jQuery.extend(true, {
+        var stacked = {
             series: {
                 stack: true,
                 lines: {
                     fill: 0.5
                 }
             }
-        }, baseOptions);
-
-        function cpuChartFactory(title, template) {
-            template.find('.title').text(title);
-            var c = new jrrd.Chart(template.find('.chart'), fillOptions);
-            data = 'cpu-user.rrd  cpu-system.rrd  cpu-wait.rrd'.split('  ').reverse();
-
-            jQuery.each(data, function(i, el) {
-                var label = el.split('.')[0].split('-')[1];
-                c.addData('cpu0-' + label, new jrrd.RrdQueryRemote('data/cpu-0/' + el));
-                c.addData('cpu1-' + label, new jrrd.RrdQueryRemote('data/cpu-1/' + el));
-            });
-            return c;
-        }
-
-        function memoryChartFactory(title, template) {
-            template.find('.title').text(title);
-            var c = new jrrd.Chart(template.find('.chart'), fillOptions);
-            data = 'memory-free.rrd memory-cached.rrd memory-used.rrd memory-buffered.rrd'.split(' ').reverse();
+        };
 
-            jQuery.each(data, function(i, el) {
-                var url = 'data/memory/' + el;
-                var label = el.split('.')[0].split('-')[1];
-                c.addData(label, new jrrd.RrdQueryRemote(url));
-            });
-            return c;
-        }
+        var recipes = [
+            {
+                title: 'CPU Usage',
+                data: [
+                    ['data/cpu-0/cpu-wait.rrd', 0, 'CPU-0 Wait', 'Jiffies'],
+                    ['data/cpu-1/cpu-wait.rrd', 0, 'CPU-1 Wait', 'Jiffies'],
+                    ['data/cpu-0/cpu-system.rrd', 0, 'CPU-0 System', 'Jiffies'],
+                    ['data/cpu-1/cpu-system.rrd', 0, 'CPU-1 System', 'Jiffies'],
+                    ['data/cpu-0/cpu-user.rrd', 0, 'CPU-0 User', 'Jiffies'],
+                    ['data/cpu-1/cpu-user.rrd', 0, 'CPU-1 User', 'Jiffies']
+                ],
+                options: jQuery.extend(true, {}, baseOptions, stacked)
+            },
 
-        function dnsChartFactory(title, template) {
-            template.find('.title').text(title);
-            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
-            data = 'dns_opcode-Query.rrd  dns_qtype-A.rrd  dns_qtype-PTR.rrd  dns_rcode-NOERROR.rrd'.split('  ').reverse();
+            {
+                title: 'Memory',
+                data: [
+                    ['data/memory/memory-buffered.rrd', 0, 'Buffered', 'Byte'],
+                    ['data/memory/memory-used.rrd', 0, 'Used', 'Byte'],
+                    ['data/memory/memory-cached.rrd', 0, 'Cached', 'Byte'],
+                    ['data/memory/memory-free.rrd', 0, 'Free', 'Byte']
+                ],
+                options: jQuery.extend(true, {}, baseOptions, stacked)
+            },
 
-            jQuery.each(data, function(i, el) {
-                var url = 'data/dns/' + el;
-                var label = el.split('.')[0].split('_')[1];
-                c.addData(label, new jrrd.RrdQueryRemote(url));
-            });
-            return c;
-        }
+            {
+                title: 'DNS Queries',
+                data: [
+                    ['data/dns/dns_opcode-Query.rrd', 0, 'Opcode Query', 'Q/sec'],
+                    ['data/dns/dns_qtype-A.rrd', 0, 'A Queries', 'Q/sec'],
+                    ['data/dns/dns_qtype-PTR.rrd', 0, 'PTR Queries', 'Q/sec'],
+                    ['data/dns/dns_rcode-NOERROR.rrd', 0, 'NOERROR', 'Q/sec']
+                ],
+                options: jQuery.extend(true, {}, baseOptions)
+            },
 
-        function loadChartFactory(title, template) {
-            template.find('.title').text(title);
-            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
-            var data = new jrrd.RrdQueryRemote('data/load/load.rrd');
-            var rrdDSs = ['shortterm', 'midterm', 'longterm'];
-            jQuery.each(rrdDSs, function(i, rrdDS) {
-                c.addData(rrdDS, new jrrd.RrdQueryDsProxy(data, rrdDS));
-            });
-            return c;
-        }
+            {
+                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, {}, baseOptions)
+            },
 
-        function nicChartFactory(title, template, nicname) {
-            template.find('.title').text(title);
-            var c = new jrrd.Chart(template.find('.chart'), baseOptions);
-            var data = new jrrd.RrdQueryRemote('data/interface/if_octets-' + nicname + '.rrd');
-            var rrdDSs = ['tx', 'rx'];
-            jQuery.each(rrdDSs, function(i, rrdDS) {
-                c.addData(rrdDS, new jrrd.RrdQueryDsProxy(data, rrdDS));
-            });
-            return c;
-        }
+            {
+                title: 'Wlan0 Throughput (B/sec)',
+                data: [
+                    ['data/interface/if_octets-wlan0.rrd', 'tx', 'Transmit', 'B'],
+                    ['data/interface/if_octets-wlan0.rrd', 'rx', 'Receive', 'B']
+                ],
+                options: jQuery.extend(true, {}, baseOptions)
+            },
+        ];
 
         $(function() {
-            var cc = new jrrd.ChartCoordinator($('.chartRangeControl'));
             var chartTemplate = $('.chart-container').remove();
-            cc.charts = [
-                loadChartFactory('Load Average',
-                    chartTemplate.clone().appendTo('.charts')),
-
-                nicChartFactory('Wlan0 Throughput',
-                    chartTemplate.clone().appendTo('.charts'), 'wlan0'),
 
-                cpuChartFactory('CPU',
-                    chartTemplate.clone().appendTo('.charts')),
-
-                memoryChartFactory('Memory',
-                    chartTemplate.clone().appendTo('.charts'))
-            ];
+            var cc = new jrrd.ChartCoordinator($('.chartRangeControl'));
+            cc.charts = jQuery.map(recipes, function(recipe, i) {
+                return jrrd.Chart.fromRecipe(
+                    chartTemplate.clone().appendTo('.charts'), recipe);
+            });
 
             $('.charts').bind("plotselected", function(event, ranges) {
                 cc.setTimeRange(new Date(ranges.xaxis.from),
diff --git a/jrrd.js b/jrrd.js
index d49212a..5e723d3 100644
--- a/jrrd.js
+++ b/jrrd.js
@@ -326,6 +326,26 @@ jrrd.Chart.prototype.draw = function() {
                 }, this);
 };
 
+
+jrrd.Chart.fromRecipe = function(template, recipe) {
+    template.find('.title').text(recipe['title']);
+    var c = new jrrd.Chart(template.find('.chart'), recipe['options']);
+    var dataDict = {};
+    var ds, label, rrd, unit;
+    for(var i=0; i<recipe['data'].length; i++) {
+        rrd = recipe['data'][i][0];
+        ds = recipe['data'][i][1];
+        label = recipe['data'][i][2];
+        unit = recipe['data'][i][3];
+        if(typeof dataDict[rrd] == 'undefined') {
+            dataDict[rrd] = new jrrd.RrdQueryRemote(rrd);
+        }
+        c.addData(label, new jrrd.RrdQueryDsProxy(dataDict[rrd], ds));
+    }
+    return c;
+}
+
+
 jrrd.ChartCoordinator = function(ui) {
     this.ui = ui;
     this.charts = [];
-- 
cgit v1.2.3