sysvitals/web/static/js/stats.js

window.addEvent('domready', function() {
	'use strict';

	Rickshaw.Graph.Axis.Y.Base1024KMGTP = Rickshaw.Class.create(Rickshaw.Graph.Axis.Y, {
		'_drawAxis': function($super, scale) {
			var axis = d3.svg.axis().scale(scale).orient(this.orientation);
			var domain = axis.scale().domain();
			var tickSpacing = 1;
			while (tickSpacing * 1024 < domain[1])
				tickSpacing *= 1024;
			while (tickSpacing * 20 < domain[1])
				tickSpacing *= 10;
			while (tickSpacing * 5 < domain[1])
				tickSpacing *= 2;
			var min = Math.ceil(domain[0] / tickSpacing);
			var max = Math.floor(domain[1] / tickSpacing) + 1;
			var tickValues = [];
			for (var i = min * tickSpacing; i < max; i += 1)
				tickValues.push(i * tickSpacing);
			axis.tickValues(tickValues);
			axis.tickFormat(this.tickFormat);

			if (this.orientation == 'left') {
				var berth = this.height * berthRate;
				var transform = 'translate(' + this.width + ', ' + berth + ')';
			}

			if (this.element)
				this.vis.selectAll('*').remove();

			this.vis
				.append('svg:g')
				.attr('class', ['y_ticks', this.ticksTreatment].join(' '))
				.attr('transform', transform)
				.call(axis.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));

			return axis;
		},
	});

	var split = document.location.pathname.split('/');
	var url = 'http://localhost:8892/v1/' + split[2] + '/stats/' + split[3];
	new Request.JSON({
		'url': url + '?start=2014-04-20&end=2014-04-20&interval=15',
		'onSuccess': graph_stats,
	}).get();

	function graph_stats(data) {
		Object.each(data, function(subfields, field) {
			if (field == 'disk')
				return;
			graph_stat(field, subfields);
		});
	}

	var colors = {
		'cpu': [
			['user', '#33a'],
			['nice', '#55c'],
			['iowait', '#a33'],
			['system', '#aa3'],
			['irq', '#711'],
			['softirq', '#771'],
			['guest', '#555'],
			['guest_nice', '#777'],
			['steal', '#a71'],
			['idle', '#3aa'],
		],
		'mem': [
			['used', '#a33'],
			['buffers', '#3aa'],
			['cached', '#33a'],
			['free', '#3a3'],
		],
		'net': [
			['bit/s_in', '#33a', 'area'],
			['bit/s_out', '#3a3', 'area'],
			['err_in', '#a33', 'line'],
			['err_out', '#aa3', 'line'],
			['drop_in', '#a33', 'line'],
			['drop_out', '#aa3', 'line'],
		],
	};
	function graph_stat(field, subfields) {
		var series = [];
		colors[field].each(function(subfield_meta) {
			var subfield = subfield_meta[0];
			var color = subfield_meta[1];
			var array = [];
			Object.each(subfields[subfield], function(day_array, k) {
				if (day_array == null)
					return;
				array = array.append(day_array.map(function(val, i) {
					return {'x': i, 'y': val};
				}));
			});
			series.push({
				'name': field + '.' + subfield,
				'data': array,
				'color': color,
				'renderer': subfield_meta[2],
			});
		});
		var graph_div = new Element('div');
		var legend_div = new Element('div');
		var graph = new Rickshaw.Graph({
			'element': graph_div,
			'width': 500,
			'height': 200,
			'renderer': field == 'net' ? 'multi' : 'area',
			'stroke': true,
			'series': series,
			'interpolation': 'step-after',
		});
		new Rickshaw.Graph.Legend({
			'graph': graph,
			'element': legend_div,
		});
		new Rickshaw.Graph.HoverDetail({
			'graph': graph,
		});
		new Rickshaw.Graph.Axis.Time({
			'graph': graph,
			'timeUnit': new Rickshaw.Fixtures.Time().unit('minute'),
		});
		new Rickshaw.Graph.Axis.Y.Base1024KMGTP({
			'graph': graph,
			'tickFormat': Rickshaw.Fixtures.Number.formatBase1024KMGTP,
		});
		graph.render();
		$('graphs').adopt(graph_div, legend_div, new Element('br'));
	}
});