X-Git-Url: https://git.octo.it/?p=collection4.git;a=blobdiff_plain;f=share%2Fcollection.js;h=0f41089223d7aa88cef72c103039048db9447e9e;hp=158a36ec9e07defba3c787903c66e2633dc26dcd;hb=110247dd90ceaec4d9fee197fce64cfd63101519;hpb=adcc8c175eb4c97faff1a348e7d5afd5afa95d55

diff --git a/share/collection.js b/share/collection.js
index 158a36e..0f41089 100644
--- a/share/collection.js
+++ b/share/collection.js
@@ -1,6 +1,6 @@
 /**
  * collection4 - collection.js
- * Copyright (C) 2010  Florian octo Forster
+ * Copyright (C) 2010-2013  Florian octo Forster
  * 
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Lesser General Public
@@ -18,12 +18,17 @@
  * Boston, MA  02110-1301  USA
  *
  * Authors:
- *   Florian octo Forster <ff at octo.it>
+ *   Florian octo Forster <octo at collectd.org>
  **/
 
 var c4 =
 {
-  instances: []
+  instances: new Array (),
+  config:
+  {
+    width: 324,
+    height: 200
+  }
 };
 
 function value_to_string (value) /* {{{ */
@@ -225,209 +230,136 @@ function ident_describe (ident, selector) /* {{{ */
   return (ret);
 } /* }}} function ident_describe */
 
-function def_draw_one (def, data, series_array) /* {{{ */
-{
-  var chart_series = new Object ();
-
-  chart_series.type = 'line';
-  chart_series.pointInterval = data.interval * 1000.0;
-  chart_series.pointStart = data.first_value_time * 1000.0;
-  chart_series.data = data.data;
-  chart_series.lineWidth = 1;
-  chart_series.shadow = false;
-  chart_series.marker = { enabled: false };
-
-  if (def.legend)
-    chart_series.name = def.legend;
-  else if (def.ds_name)
-    chart_series.name = def.ds_name;
-
-  if (def.area)
-    chart_series.type = 'area';
-
-  if (def.stack)
-    chart_series.stacking = 'normal';
-
-  if ((def.color) && (def.color != 'random'))
-    chart_series.color = def.color;
-
-  series_array.push (chart_series);
-} /* }}} function def_draw_one */
-
-function def_draw (def, data_list, series_array) /* {{{ */
+/*
+ * Given one metric definition, returns the appropriate metric data from the
+ * graph data (data list). */
+function metric_def_get_data (metric_def, graph_data)
 {
   var i;
 
-  for (i = 0; i < data_list.length; i++)
+  for (i = 0; i < graph_data.length; i++)
   {
-    if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
+    if ((metric_def.ds_name) && (metric_def.ds_name != graph_data[i].data_source))
       continue;
-    if (!ident_matches (def.select, data_list[i].file))
+    if (!ident_matches (metric_def.select, graph_data[i].file))
       continue;
 
-    def_draw_one (def, data_list[i], series_array);
+    return (graph_data[i]);
   }
-} /* }}} function def_draw */
+  return;
+}
 
-function inst_get_chart_opts (inst, def) /* {{{ */
+function metric_def_to_rickshaw_series (metric_def, metric_data)
 {
-  var chart_opts = new Object ();
-
-  chart_opts.chart =
-  {
-    renderTo: inst.container,
-    zoomType: 'x'
-  };
-  chart_opts.xAxis =
-  {
-    type: 'datetime',
-    maxZoom: 300, // five minutes
-    title: { text: null },
-    events:
-    {
-      setExtremes: function (event)
-      {
-        var begin = null;
-        var end   = null;
-
-        if ((event.min) && (event.max))
-        {
-          begin = event.min / 1000.0;
-          end   = event.max / 1000.0;
-        }
-        inst_fetch_data (inst, begin, end);
-      }
-    }
+  var series = {
+    data: []
   };
-  chart_opts.yAxis =
-  {
-    labels:
-    {
-      formatter: function () { return (value_to_string (this.value)); }
-    },
-    startOnTick: false,
-    endOnTick: false
-  };
-  chart_opts.legend =
-  {
-    labelFormatter: function ()
-    {
-      var series = this;
-      var min = Number.MAX_VALUE;
-      var max = Number.NEGATIVE_INFINITY;
-      var num = 0;
-      var sum = 0;
-      var avg;
-      var i;
+  var i;
 
-      for (i = 0; i < this.data.length; i++)
-      {
-        var v;
+  if (metric_def.legend)
+    series.name = metric_def.legend;
 
-        v = this.data[i].y;
-        if (v == null)
-          continue;
+  if (metric_def.color)
+    series.color = metric_def.color;
 
-        if (min > v)
-          min = v;
-        if (max < v)
-          max = v;
+  for (i = 0; i < metric_data.data.length; i++)
+  {
+    var x = metric_data.first_value_time + (i * metric_data.interval);
+    var y = metric_data.data[i];
 
-        sum += v;
-        num++;
-      }
+    series.data.push ({'x': x, 'y': y});
+  }
 
-      if (num == 0)
-      {
-        min = null;
-        max = null;
-        avg = null;
-      }
-      else
-      {
-        avg = sum / num;
-      }
+  return (series);
+}
 
-      return (this.name + " (" + value_to_string (min) + " min, "
-          + value_to_string (avg) + " avg, "
-          + value_to_string (max) + " max)");
-    }
+function graph_def_to_rickshaw_config (root_element, graph_def, data_list)
+{
+  var graph_config = {
+      element: root_element,
+      renderer: 'line',
+      series: []
   };
-  chart_opts.series = new Array ();
+  var graph;
+  var i;
 
-  if (def.title)
-    chart_opts.title = { text: def.title };
+  for (i = 0; i < graph_def.defs.length; i++)
+  {
+    var metric_def = graph_def.defs[i];
+    var metric_data = metric_def_get_data (metric_def, data_list);
+    var series;
+
+    if (!metric_data)
+      continue;
 
-  if (def.vertical_label)
-    chart_opts.yAxis.title = { text: def.vertical_label };
+    series = metric_def_to_rickshaw_series (metric_def, metric_data);
+    if (series)
+      graph_config.series.push (series);
+  }
 
-  return (chart_opts);
-} /* }}} function chart_opts_get */
+  return (graph_config);
+}
 
-function inst_draw (inst, def, data_list) /* {{{ */
+function graph_def_to_rickshaw_graph (root_element, graph_def, graph_data)
 {
-  var chart_opts;
-  var i;
+  var graph_config = graph_def_to_rickshaw_config (root_element, graph_def, graph_data);
 
-  if (!inst || !def || !data_list)
-    return;
+  var graph = new Rickshaw.Graph (graph_config);
+  graph.render ();
 
-  chart_opts = inst_get_chart_opts (inst, def);
+  var x_axis = new Rickshaw.Graph.Axis.Time({
+    graph: graph
+  });
+  x_axis.render ();
 
-  for (i = def.defs.length - 1; i >= 0; i--)
-    def_draw (def.defs[i], data_list, chart_opts.series);
+  var y_axis = new Rickshaw.Graph.Axis.Y({
+    graph: graph
+  });
+  y_axis.render ();
+}
 
-  inst.chart = new Highcharts.Chart (chart_opts);
-} /* }}} function inst_draw */
+function inst_draw_rickshaw (inst, graph_def, graph_data)
+{
+  var root_element = document.getElementById (inst.container);
+
+  inst.chart = graph_def_to_rickshaw_graph (root_element, graph_def, graph_data);
+}
 
-function inst_redraw (inst, def, data_list) /* {{{ */
+function inst_draw (inst, graph_def, graph_data)
+{
+  inst_draw_rickshaw (inst, graph_def, graph_data);
+}
+
+function inst_redraw (inst, graph_def, graph_data) /* {{{ */
 {
   var series_array;
   var i;
 
   if (!inst.chart)
-    return (inst_draw (inst, def, data_list));
-
-  series_array = new Array ();
-  for (i = def.defs.length - 1; i >= 0; i--)
-    def_draw (def.defs[i], data_list, series_array);
-
-  if (inst.chart.series.length != series_array.length)
-  {
-    alert ("inst.chart.series.length != series_array.length");
-    return;
-  }
-
-  for (i = inst.chart.series.length - 1; i >= 0; i--)
-  {
-    series_array[i].visible = inst.chart.series[i].visible;
-    inst.chart.series[i].remove (/* redraw = */ false);
-  }
-
-  for (i = 0; i < series_array.length; i++)
-    inst.chart.addSeries (series_array[i], /* redraw = */ false);
-
-  inst.chart.redraw ();
+    return (inst_draw (inst, graph_def, graph_data));
+  else
+    return; /* TODO: Insert new data into the graph */
 } /* }}} function inst_redraw */
 
 function inst_fetch_data (inst, begin, end) /* {{{ */
 {
-  var def;
+  var graph_def;
   var params;
 
-  def = inst_get_defs (inst);
-  if (!def)
+  graph_def = inst_get_defs (inst);
+  if (!graph_def)
     return;
 
   params = instance_get_params (inst);
   params.action = "instance_data_json";
   params.begin = begin || inst.begin;
   params.end = end || inst.end;
+  params.resolution = (params.end - params.begin) / c4.config.width;
 
   $.getJSON ("collection.fcgi", params,
       function (data)
       {
-        inst_redraw (inst, def, data);
+        inst_redraw (inst, graph_def, data);
       }); /* getJSON */
 } /* }}} inst_fetch_data */
 
@@ -630,6 +562,26 @@ function zoom_out (graph_id) /* {{{ */
   return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0)));
 } /* }}} function zoom_earlier */
 
+function graph_recalc_width () /* {{{ */
+{
+  var tmp;
+
+  tmp = $("#layout-middle-center").width ();
+  if (!tmp)
+    return;
+
+  if (tmp < 324)
+    tmp = 324;
+
+  c4.config.width = tmp;
+  c4.config.height = Math.round (tmp / 1.61803398874989484820);
+  $(".graph-json").each (function ()
+  {
+    $(this).width  (c4.config.width);
+    $(this).height (c4.config.height);
+  });
+} /* }}} function graph_recalc_width */
+
 $(document).ready(function() {
     /* $("#layout-middle-right").html ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>"); */
     $("#search-form").append ("<ul id=\"search-suggest\" class=\"graph_list\"></ul>");
@@ -694,6 +646,8 @@ $(document).ready(function() {
         );
     });
 
+    graph_recalc_width ();
+
     var i;
     for (i = 0; i < c4.instances.length; i++)
     {