diff --git a/share/collection.js b/share/collection.js
index c7200868b0417c56165d485d94f192181ea2d268..e1a6a2255be5b5114a775118627f094f1151e864 100644 (file)
--- a/share/collection.js
+++ b/share/collection.js
var c4 =
{
- instances: []
+ instances: new Array (),
+ config:
+ {
+ width: 324,
+ height: 200
+ }
};
function value_to_string (value) /* {{{ */
{
- var abs_value = Math.abs (value);
+ var abs_value;
+ var v2s = function (value)
+ {
+ var tmp = Math.round (100.0 * value) / 100.0;
+ return ("" + tmp);
+ }
+
+ if (value == null)
+ return ('NaN');
+ else if (value == 0)
+ return ('0');
+
+ abs_value = Math.abs (value);
if ((abs_value < 10000) && (abs_value >= 0.1))
- return ("" + value);
+ return (v2s (value));
else if (abs_value > 1)
{
if (abs_value < 10000000)
- return ("" + (value / 1000) + "k");
+ return (v2s (value / 1000) + "k");
else if (abs_value < 10000000000)
- return ("" + (value / 1000000) + "M");
+ return (v2s (value / 1000000) + "M");
else if (abs_value < 10000000000000)
- return ("" + (value / 1000000000) + "G");
+ return (v2s (value / 1000000000) + "G");
else
- return ("" + (value / 1000000000000) + "T");
+ return (v2s (value / 1000000000000) + "T");
}
else
{
if (abs_value >= 0.001)
- return ("" + (value * 1000) + "m");
+ return (v2s (value * 1000) + "m");
else if (abs_value >= 0.000001)
- return ("" + (value * 1000000) + "u");
+ return (v2s (value * 1000000) + "u");
else
- return ("" + (value * 1000000000) + "n");
+ return (v2s (value * 1000000000) + "n");
}
} /* }}} function value_to_string */
return (ret);
} /* }}} function ident_describe */
-function def_draw_one (def, data, chart_opts) /* {{{ */
+function def_draw_one (def, data, series_array) /* {{{ */
{
var chart_series = new Object ();
chart_series.type = 'line';
- chart_series.name = def.legend || def.data_source;
- chart_series.pointInterval = data.interval * 1000;
- chart_series.pointStart = data.first_value_time * 1000;
+ 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.color) && (def.color != 'random'))
chart_series.color = def.color;
- chart_opts.series.push (chart_series);
+ series_array.push (chart_series);
} /* }}} function def_draw_one */
-function def_draw (def, data_list, chart_opts) /* {{{ */
+function def_draw (def, data_list, series_array) /* {{{ */
{
var i;
if (!ident_matches (def.select, data_list[i].file))
continue;
- def_draw_one (def, data_list[i], chart_opts);
+ def_draw_one (def, data_list[i], series_array);
}
} /* }}} function def_draw */
-function instance_draw (inst, def, data_list) /* {{{ */
+/*
+ * Given one metric definition, returns the appropriate data from the data
+ * list. */
+function def_get_data (def, data_list)
{
- var x_data = [];
- var y_data = [];
var i;
- var chart_opts = new Object ();
+ for (i = 0; i < data_list.length; i++)
+ {
+ if ((def.ds_name) && (def.ds_name != data_list[i].data_source))
+ continue;
+ if (!ident_matches (def.select, data_list[i].file))
+ continue;
- if (!inst || !def || !data_list)
- return;
+ return (data_list[i]);
+ }
+ return;
+}
- chart_opts.chart =
- {
- renderTo: inst.container,
- zoomType: 'x'
+function def_to_rickshaw_one (def, data)
+{
+ var series = {
+ data: []
};
- chart_opts.xAxis =
+ var i;
+
+ if (def.legend)
+ series.name = def.legend;
+
+ if (def.color)
+ series.color = def.color;
+
+ for (i = 0; i < data.data.length; i++)
{
- type: 'datetime',
- maxZoom: 300, // five minutes
- title: { text: null }
+ var x = data.first_value_time + (i * data.interval);
+ var y = data.data[i];
+
+ series.data.push ({'x': x, 'y': y});
+ }
+
+ return (series);
+}
+
+function def_to_rickshaw (graph_def, data_list)
+{
+ var graph_config = {
+ renderer: 'line',
+ series: []
};
- chart_opts.yAxis =
+ var graph;
+ var i;
+
+ for (i = 0; i < graph_def.defs.length; i++)
{
- labels:
- {
- formatter: function () { return (value_to_string (this.value)); }
- },
- endOnTick: false
- };
- chart_opts.series = new Array ();
+ var def = graph_def.defs[i];
+ var data = def_get_data (def, data_list);
+ var series;
+
+ if (!data)
+ continue;
+
+ series = def_to_rickshaw_one (def, data);
+ if (series)
+ graph_config.series.push (series);
+
+ //if (def.area)
+ // graph_config.renderer = 'area';
+ }
+
+ return (graph_config);
+}
+
+function inst_draw_rickshaw (inst, def, data_list)
+{
+ var graph_config = def_to_rickshaw (def, data_list);
+
+ graph_config.element = document.getElementById (inst.container);
+
+ inst.chart = new Rickshaw.Graph (graph_config);
+ inst.chart.render ();
+
+ var x_axis = new Rickshaw.Graph.Axis.Time({
+ graph: inst.chart
+ });
+ x_axis.render ();
- if (def.title)
- chart_opts.title = { text: def.title };
+ var y_axis = new Rickshaw.Graph.Axis.Y({
+ graph: inst.chart
+ });
+ y_axis.render ();
+}
+
+function inst_draw (inst, def, data_list)
+{
+ inst_draw_rickshaw (inst, def, data_list);
+}
+
+function inst_redraw (inst, def, data_list) /* {{{ */
+{
+ 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, chart_opts);
+ def_draw (def.defs[i], data_list, series_array);
-// if ((def.defs.length == 0) && (data_list.length == 1))
-// def_draw_one (null, data_list[0], chart_opts);
+ if (inst.chart.series.length != series_array.length)
+ {
+ alert ("inst.chart.series.length != series_array.length");
+ return;
+ }
- inst.chart = new Highcharts.Chart (chart_opts);
-} /* }}} function instance_draw */
+ 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);
+ }
-function json_graph_update (index) /* {{{ */
+ for (i = 0; i < series_array.length; i++)
+ inst.chart.addSeries (series_array[i], /* redraw = */ false);
+
+ inst.chart.redraw ();
+} /* }}} function inst_redraw */
+
+function inst_fetch_data (inst, begin, end) /* {{{ */
{
- var inst;
var def;
var params;
- inst = c4.instances[index];
- if (!inst)
- return;
-
def = inst_get_defs (inst);
if (!def)
return;
- if (!inst.container)
- inst.container = "c4-graph" + index;
-
params = instance_get_params (inst);
params.action = "instance_data_json";
- params.begin = inst.begin;
- params.end = inst.end;
+ 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)
{
- instance_draw (inst, def, data);
+ inst_redraw (inst, def, data);
}); /* getJSON */
+} /* }}} inst_fetch_data */
+
+function json_graph_update (index) /* {{{ */
+{
+ var inst;
+
+ inst = c4.instances[index];
+ if (!inst)
+ return;
+
+ if (!inst.container)
+ inst.container = "c4-graph" + index;
+
+ inst_fetch_data (inst);
} /* }}} json_graph_update */
function format_instance(inst)
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>");
+ "<div class=\"graph-button\" onClick=\"zoom_reference ('"+id+"');\">!</div>"
+ "</div>"
+ "<div class=\"graph-buttons navigation\">"
- + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">←</div>"
- + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">−</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_earlier ('"+id+"');\">\u2190</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_out ('"+id+"');\">\u2212</div>"
+ "<div class=\"graph-button\" onClick=\"zoom_in ('"+id+"');\">+</div>"
- + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">→</div>"
+ + "<div class=\"graph-button\" onClick=\"zoom_later ('"+id+"');\">\u2192</div>"
+ "</div>"
);
});
+ graph_recalc_width ();
+
var i;
for (i = 0; i < c4.instances.length; i++)
{