timeseries widget async loading working again (4948bb51) · Commits · github_fork / Clip

lib/fnordmetric/widgets/numbers_widget.rb

+1 −1

Original line number	Diff line number	Diff line
		@@ -45,7 +45,7 @@ class FnordMetric::NumbersWidget < FnordMetric::Widget
		super.merge(
		:series => gauges.map(&:name),
		:offsets => (@opts[:offsets] \|\| [0, 1, "s30"]),
		:autoupdate => (@opts[:autoupdate] \|\| 10)
		:autoupdate => (@opts[:autoupdate] \|\| 60)
		)
		end

lib/fnordmetric/widgets/timeseries_widget.rb

+22 −5

Original line number	Diff line number	Diff line
		class FnordMetric::TimeseriesWidget < FnordMetric::Widget

		def self.execute(namespace, event)
		resp = if event["cmd"] == "values_at"
		{
		:cmd => :values_at,
		:gauges => event["gauges"].map{ \|gkey\|
		vals = namespace.gauges[gkey.to_sym].values_in(event["since"]..event["until"])
		{ :key => gkey, :vals => vals }
		}
		}
		end

		return false unless resp

		resp.merge(
		:class => "widget_response",
		:widget_key => event["widget_key"]
		)
		end

		def data
		super.merge(
		:series => series,
		:gauges => gauges.map(&:name),
		:start_timestamp => ticks.first,
		:end_timestamp => ticks.last,
		:autoupdate => (@opts[:autoupdate] \|\| 60),
		:include_current => !!@opts[:include_current],
		:plot_style => plot_style,
		:default_style => (@opts[:plot_style] \|\| 'line'),
		:async_chart => true,
		:tick => tick
		)
		end

		def plot_style
		(@opts[:plot_style] \|\| 'line').to_s.gsub("area", "stack")
		end

		def series
		colors = ["#2F635E", "#606B36", "#727070", "#936953", "#CD645A", "#FACE4F", "#42436B"]

web/fnordmetric.timeseries_widget.js

+156 −42

Original line number	Diff line number	Diff line
		@@ -10,7 +10,7 @@ FnordMetric.widgets.timeseriesWidget = function(){
		*/

		var widget_uid = "fnord-" + parseInt(Math.random()*99990000);
		var width, height, opts, graph, gconfig;
		var width, height, opts, graph, gconfig, xticks, legend, hoverDetail, shelving, highlighter;

		var cardinal = true;

		@@ -37,38 +37,13 @@ FnordMetric.widgets.timeseriesWidget = function(){
		padding: { top: 0.1, bottom: 0.15 }
		}

		graph = new Rickshaw.Graph(gconfig);

		$('.button[data="'+opts.default_style+'"]')
		.addClass('active')
		.trigger('click');

		var legend = new Rickshaw.Graph.Legend({
		graph: graph,
		element: $('.legend', opts.elem)[0]
		});

		hoverDetail = new Rickshaw.Graph.HoverDetail( {
		graph: graph
		});
		apply_style(opts.default_style);

		shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
		graph: graph,
		legend: legend
		});

		highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
		graph: graph,
		legend: legend
		});

		new Rickshaw.Graph.Axis.Time({
		graph: graph,
		}).render();

		new Rickshaw.Graph.Axis.Y({
		graph: graph,
		}).render();
		if(opts.async_chart){
		updateChart();
		} else {
		renderChart();
		}
		}

		function toggle_cardinal(){
		@@ -90,23 +65,28 @@ FnordMetric.widgets.timeseriesWidget = function(){
		function change_style(){
		$(this).addClass('active').siblings().removeClass('active');

		if($(this).attr('data') == 'line'){
		apply_style($(this).attr('data'));
		//graph.configure(gconfig);
		//graph.render();

		renderChart();
		}

		function apply_style(style){
		if(style == 'line'){
		gconfig.renderer = 'line';
		gconfig.offset = 'value';
		}

		if($(this).attr('data') == 'stack'){
		if(style == 'stack'){
		gconfig.renderer = 'area';
		gconfig.offset = 'value';
		}

		if($(this).attr('data') == 'flow'){
		if(style == 'flow'){
		gconfig.renderer = 'stack';
		gconfig.offset = 'wiggle';
		}

		graph.configure(gconfig);
		graph.render();
		}

		function draw_layout(){
		@@ -151,7 +131,7 @@ FnordMetric.widgets.timeseriesWidget = function(){
		)
		.append(
		$('<div></div>')
		.addClass('button')
		.addClass('button ml')
		.addClass(opts.default_cardinal ? 'active' : '')
		.append($('<span>').html('On'))
		.attr('data', 'cardinal-on')
		@@ -174,10 +154,144 @@ FnordMetric.widgets.timeseriesWidget = function(){
		margin: '0 23px 50px 23px',
		})
		);

		if(opts.async_chart){
		$('.headbar', opts.elem).prepend(
		$('<div></div>')
		.addClass('button ml')
		.append($('<span></span>').html('←'))
		.click(function(){ moveRange(-1); })
		).prepend(
		$('<div></div>')
		.addClass('datepicker')
		).prepend(
		$('<div></div>')
		.addClass('button')
		.append($('<span></span>').html('→'))
		.click(function(){ moveRange(1); })
		);
		}
		}

		function announce(){
		function renderChart(){
		$(gconfig.element).html("");
		$(".rickshaw_legend", opts.elem).html("");

		graph = new Rickshaw.Graph(gconfig);

		legend = new Rickshaw.Graph.Legend({
		graph: graph,
		element: $('.legend', opts.elem)[0]
		});

		hoverDetail = new Rickshaw.Graph.HoverDetail( {
		graph: graph
		});

		shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
		graph: graph,
		legend: legend
		});

		highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
		graph: graph,
		legend: legend
		});

		new Rickshaw.Graph.Axis.Time({
		graph: graph,
		}).render();

		new Rickshaw.Graph.Axis.Y({
		graph: graph,
		}).render();

		graph.configure(gconfig);
		graph.render();
		}


		function announce(evt){
		if(evt.widget_key == opts.widget_key){
		if((evt.class == "widget_response") && (evt.cmd == "values_at")){
		running_request = false;
		$(opts.elem).css('opacity', 1);
		updateSeriesData(evt.gauges);
		}
		}
		}

		function requestValuesAsync(){
		FnordMetric.publish({
		"type": "widget_request",
		"klass": "TimeseriesWidget",
		"gauges": opts.gauges,
		"cmd": "values_at",
		"tick": opts.tick,
		"since": opts.start_timestamp,
		"until": opts.end_timestamp,
		"widget_key": opts.widget_key
		})
		}

		function updateSeriesData(dgauges){
		gconfig.series = [];

		for(var ind = 0; ind < dgauges.length; ind++){

		gconfig.series.push({
		name: dgauges[ind].key,
		color: opts.series[ind].color,
		data: []
		});

		for(_time in dgauges[ind].vals){
		gconfig.series[ind].data.push(
		{ x: parseInt(_time), y: parseInt(dgauges[ind].vals[_time] \|\| 0) }
		);
		}

		}

		renderChart();
		}

		function updateChart(first_time, silent){
		if(!silent){ $(opts.elem).css('opacity', 0.5); }
		updateRange();
		redrawDatepicker();
		requestValuesAsync();
		}

		function redrawDatepicker(){
		// dateFormat('%d.%m.%y %H:%M', parseInt(opts.start_timestamp)*1000) +
		$('.datepicker', opts.elem).html(
		opts.start_timestamp +
		' &dash; ' +
		opts.end_timestamp
		);
		}

		function updateRange(force){
		if(!opts.tick){
		opts.tick = opts.ticks[0];
		}

		if(!opts.start_timestamp \|\| !opts.end_timestamp \|\| !!force){
		opts.end_timestamp = parseInt(new Date().getTime() / 1000);
		opts.start_timestamp = opts.end_timestamp - (opts.tick * xticks);
		}
		}

		function moveRange(direction){
		v = opts.tickdirection8;

		if(((opts.end_timestamp + v)*1000) < new Date().getTime()){
		opts.start_timestamp += v;
		opts.end_timestamp += v;
		}

		updateChart();
		}

		return {

Admin message