scout_realtime 0.5.1

data/lib/scout_realtime/web/javascripts/charts.js

@@ -0,0 +1,189 @@
+var ChartsView = {
+  init: function(params) {
+    var _this = this;
+    this.active = false;
+    this.charts = [];
+    $.each(params, function(name, value) {
+      _this[name] = value;
+    });
+  },
+
+  pollForUpdates: function() {
+    var _this = this;
+    var timeOffset = 0;
+    this.poller = setInterval(function() {
+      _this.update(timeOffset++);
+    }, _this.pollInterval);
+  },
+
+  update: function (timeOffset) {
+    var _this = this;
+    $.getJSON(_this.url + '?time_offset=' + timeOffset,function (data) {
+      _this.updateData(data);
+      if (_this.active) {
+        _this.updateCharts();
+      }
+    }).fail(function () {
+      console.log("error fetching data");
+    });
+  },
+
+  setActive: function() {
+    this.active = true;
+    this.updateCharts();
+  },
+};
+
+var Chart = {
+  init: function(params) {
+    var _this = this;
+    $.each(params, function(name, value) {
+      _this[name] = value;
+    });
+  },
+
+  renderData: function() {
+    this.barChart.data = this.data;
+    if (this.data.length) { this.barChart.draw() };
+  },
+
+  updatedLatestValue: function() {
+    this.$latestValue.html(this.formattedValue(this.latestValue));
+  },
+
+	/* 
+	 * For the displays where the latest value is positioned above the chart, the latest value need to be aligned 
+	 * with the last rectangle in the chart svg element. This is because the rectangles may not use the full width of the svg
+	 * to avoid aliased lines.
+	 */
+	positionLatestValue: function() {
+		if (this.latestValuePositioned) {return true} // only need to position once
+		$lastRect = $(this.chartSVG).children('g').last();
+		// Workaround - FF doesn't return SVG position() relative to the parent but to the entire viewport. 
+		left = $lastRect.get(0).getBoundingClientRect().right - $(this.chartSVG).get(0).getBoundingClientRect().left;
+		margin = this.$container.width()-left;
+		this.$latestValue.css("margin-right",margin);
+		if ($chartSub = this.$container.children(".chart_sub")) {
+			$chartSub.css("margin-right",margin);
+		}
+		this.latestValuePositioned = true;
+	},
+
+  formattedValue: function(value, meta_index) {
+    meta_index = typeof meta_index !== 'undefined' ? meta_index : 0; // default to first set of meta values
+    // numberToHumanSize?
+    /*
+    if(this.units && (this.units.indexOf("KB") !== -1 || this.units.indexOf("MB") !== -1)) {
+      var numString;
+      if(this.units.indexOf("KB") !== -1) {
+        numString = numberToHumanSize(this.latestValue * 1024);
+      } else if(this.units.indexOf("MB") !== -1) {
+        numString = numberToHumanSize(this.latestValue * 1024 * 1024);
+      }
+      this.latestValue = numString.split(" ")[0];
+      this.units = this.units.replace("KB", numString.split(" ")[1]);
+    }
+    */
+    var formattedUnits;
+    var currentMeta;
+    if(this.meta[meta_index] == null) {
+      currentMeta = {};
+    } else {
+      currentMeta = this.meta[meta_index];
+    }
+    if(typeof currentMeta.units == 'undefined') {
+      formattedUnits = '';
+    } else if(currentMeta.units == '%') {
+      formattedUnits = currentMeta.units;
+    } else {
+      formattedUnits = ' ' + currentMeta.units;
+    }
+    return numberFormatter(value, currentMeta.precision, currentMeta.delimiter) + formattedUnits;
+  },
+
+  labelOrBlank: function(meta_index) {
+    if(this.meta[meta_index] == null) {
+      return '';
+    } else {
+      return this.meta[meta_index].label + ': ';
+    }
+  }
+};
+
+// based on https://github.com/jblz/Javascript-Number-Formatter/blob/master/numberFormatter.js
+
+function numberFormatter ( num, places, ksep, dsep ) {
+  var sign = '';
+  if(num < 0) { sign = '-'; }
+  num = Math.abs(num);
+  var rounder = function( n, places ) {
+    n2 = parseFloat(n);
+    if( isNaN(n2) ) return n;
+    places = parseInt(places);
+    if( isNaN(places) ) places = 0;
+    var factor= Math.pow(10,places);
+    return Math.floor(n*factor+((n*factor*10)%10>=5?1:0))/factor;
+  };
+  var num = rounder( num, places );
+  if ( isNaN( num ) ) return num;
+  if ( 'undefined' == typeof places ) places = 0;
+  if ( 'undefined' == typeof ksep ) ksep = ',';
+  if ( 'undefined' == typeof dsep ) dsep = '.';
+  num = num.toString();
+  if ( places > 0 ) {
+    var dot = num.indexOf( '.' );
+    var rlength = num.substr( dot ).length - 1;
+    if ( -1 == dot ) {
+      num = num + '.';
+      for ( var i = 0; i < places; i++ ) {
+        num = num + '0';
+      }
+    }
+    else if ( places > rlength ) {
+      var diff = places - rlength;
+      for ( var i = 0; i < diff; i++ ) {
+        num = num + '0';
+      }
+    }
+  }
+
+  var l = '', m = '', r = '';
+  num.replace( /^([0-9]*)?(\.)?([0-9]*)?$/, function( $0, $1, $2, $3 ) {
+    var llen = $1.length;
+    if ( llen > 3 ) {
+      for ( var i = llen - 1; i >= 0; i-- ) {
+        var x = i - llen + 1;
+        if ( x != 0 && x % 3 == 0 ) l = ksep + l;
+        l = $1[i] + l;
+      }
+    }
+    else {
+      l = $1;
+    }
+    if ( $2 == '.' && ! isNaN( $3 ) ) {
+      m = dsep;
+      r = $3;
+    }
+  });
+  return sign + l + m + r;
+}
+
+function formatTime(timestamp) {
+  var date = new Date(timestamp);
+  var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  var month = monthNames[date.getMonth()];
+  var hour = date.getHours();
+  var ampm;
+  if(hour > 12) {
+    hour = hour - 12;
+    ampm = 'pm';
+  } else {
+    ampm = 'am';
+  }
+	// only print date if not today
+	dateString = ''
+	if (date.toDateString() != new Date().toDateString()) {
+		dateString += month + ' ' + date.getDate() + ', ';
+	}
+  return dateString  + hour + ':' + (date.getMinutes()<10?'0':'') + date.getMinutes() + ampm;
+}

data/lib/scout_realtime/web/javascripts/d3.barchart.js

@@ -0,0 +1,210 @@
+/* new BarChart({ element: this.chartSVG, data: this.data, yMax: this.yMax, addColors: this.colors, parent: this })
+ */
+function BarChart(params) {
+  this.data = params.data;
+  this.parent = params.parent;
+  var element = params.element;
+	var colors = ["#65A7DE"]; // default color is light blue
+  var currentYMax = params.yMax;
+  var numberOfBars = this.data.length; 
+	if(params.addColors) {
+    colors = colors.concat(params.addColors);
+  }
+  var color = d3.scale.ordinal()
+    .range(colors)
+    .domain([0, (this.data.length ? this.data[0].value.length-1 : 0)])
+
+  var selection, width, height, rangeWidth, barWidth, y, x, yWithMinimum, heightWithMinimum, tooltip;
+
+  this.setYMax = function(yMax) {
+    currentYMax = yMax;
+  }
+
+  function setViewDependentVariables() {
+    selection = d3.select(element);
+    // get the width and height form the selection
+    width = selection.node().clientWidth || parseInt($(selection.node()).css('width'));
+    height = selection.node().clientHeight || parseInt($(selection.node()).css('height'));
+
+    // want the same width for each bar. with anti-aliasing enabled, the widths will be integers but aren't
+    // guarenteed to be the same width. this uses the greatest possible width of the svg element where the bars
+    // will all be the same width.
+    rangeWidth = Math.floor(width / numberOfBars)*numberOfBars;
+    barWidth = (rangeWidth / numberOfBars) - 1;
+
+    y = d3.scale.linear().range([height, 0]);
+    x = d3.time.scale().rangeRound([0, rangeWidth]);
+
+    // y and height are modified to always show the first series even if it isn't large enough
+    // to be displayed. this ensures a dashed line is always displayed vs. missing blocks.
+    yWithMinimum = function(d, i) {
+      var yValue = y(d.y1); 
+      if (i==0 && (y(d.y0) - y(d.y1)) < 1 && y(0) == height) {
+        yValue = height - 1.5; // height of the container - 1px (height we're using as minimum) - 0.5 (anti-aliasing)
+      }
+      return yValue;
+    }
+
+    heightWithMinimum = function(d, i) {
+      var height = Math.abs(y(d.y0) - y(d.y1));
+      if (i==0) {
+        height = d3.max( [height,1] );
+      }
+      return height;
+    }
+
+    if($('#charts-tooltip').length > 0) {
+      tooltip = d3.select('#charts-tooltip');
+    } else {
+      tooltip = d3.select('body').append('div')
+        .attr('id', 'charts-tooltip')
+        .attr('class', 'modal-tooltip')
+        .style('opacity', 0);
+    }
+  }
+
+  /* passing in anything other than false will make the charts update without a sliding effect.
+     Pass in false (or nothing at all), and the bars will slide left for the new data. */
+  this.draw = function(suppressAnimation) {
+    if(!selection) { setViewDependentVariables(); } // only call the first time we draw
+    var animationDuration = suppressAnimation ? 0 : 1000;
+    var data = this.data;
+    var _this = this;
+    var stackedData = data.map(function(d){
+      y0 = 0;
+      formattedTime = formatTime(d.time);
+      return { value: d.value.map(
+        function(d) {
+          if(d >= 0) {
+            thisY0 = y0;
+            thisY1 = y0 += d;
+            //return { d: d, time: formattedTime, y0: y0, y1: y0 += d }
+          } else {
+            thisY1 = y0;
+            thisY0 = y0 += d;
+            //return { d: d, time: formattedTime, y0: y0 += d, y1: y0 - d }
+          }
+          return { d: d, time: formattedTime, y0: thisY0, y1: thisY1 }
+        }
+      ), time: d.time };
+    })
+
+    // time update
+    var timeMin = d3.min(data.map(function(d) {return d.time}));
+    // adds the step to the timeMax. otherwise, the last data element is drawn on 100% of the x scale.
+    // want the last data element to fully fit in the svg element.
+    var timeMax = d3.max(data.map(function(d) {return d.time})) + step(data); // add a minute to the max
+    x.domain([timeMin, timeMax]);
+    y.domain([yMin(data), yMax(data)]);
+    var state = selection.selectAll(".g")
+      .data(stackedData, function(d) { return d.time; });
+    // initialise entering bars and then do the transition
+    var stateEnter = state
+      .enter().append("g")
+        .attr("class", "g")
+        .attr("transform", function(d) { return "translate(" + x(d.time + enterStep(state)) + ",0)"; })
+
+    stateEnter.selectAll("rect")
+        .data(function(d) { return d.value; })
+      .enter().append("rect")
+        .attr("width", barWidth)
+        .attr("y", function(d,i) { return yWithMinimum(d, i); })
+        .attr("height", function(d,i) { return heightWithMinimum(d, i); })
+        .attr("class", "bar")
+        .style("fill", function(d,i) { return color(i); })
+        .on("mouseover", function(d, i) {
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 1)
+          tooltip.html(tooltipHTML(_this,d,i))
+            .style("left", (d3.event.pageX) + 20 + "px")
+            .style("top", (d3.event.pageY) + "px");
+        })
+        .on("mouseout", function(d) {
+          tooltip.transition()
+            .duration(200)
+            .style('opacity', 0);
+        });
+
+      
+    // transition entering and updating bars
+    state.transition()
+      .duration(animationDuration)
+      .attr("transform", function(d) { return "translate(" + x(d.time) + ",0)"; })
+      .attr('width', barWidth);
+
+    // rescale height to new data
+    state.selectAll('rect').transition()
+      .duration(animationDuration)
+      .attr("y", function(d,i) { return yWithMinimum(d, i); })
+      .attr("height", function(d,i) { return heightWithMinimum(d, i); });
+    
+    // remove shifted bar that is not displayed anymore
+    state.exit()
+      .transition()
+        .duration(animationDuration)
+        .attr("transform", function(d) { return "translate(" + x(d.time) + ",0)"; })
+      .remove();
+  }
+
+  function yMax(data) {
+    dataMax = d3.max(data, function(d) {
+      var total = 0;
+      $.each(d.value, function(i, value) {
+        total += value;
+      });
+      return total;
+    });
+    return d3.max([(currentYMax||0), dataMax]);
+  }
+
+  function yMin(data) {
+    dataMin = d3.min(data, function(d) {
+      var total = 0;
+      $.each(d.value, function(i, value) {
+        total += value;
+      });
+      return total;
+    });
+    return d3.min([0, dataMin]);
+  }
+
+	/* When new data are added via enter(), they are transitioned from the right to the left unless
+	 * >= 6 new elements will be added. This is a bit of a hack to not apply a transition when the page is 
+	 * initially loaded, but may actually look better when a refresh results in a lot more data 
+	 * (shifting a lot of elements looks wrong). 
+	 */
+	function enterStep(state) {
+		var val;
+		// why 6? our highest interval is 5 minutes, so on initial, clients on this interval will show 30/5=6 bars.
+		if (state.enter()[0].length >= 6) {
+			val=0;
+		} else {
+			val=step(state.data());
+		}
+		return val;
+	}
+	
+	// Returns the time interval interval btw data values in ms
+	function step(data) {
+		return data[1].time-data[0].time
+	}
+	
+	/* Formats the text for the tooltips. Logic:
+	 * If there is only one layer, don't print the label. Put time+value on same line. 
+	 * If there is more than one layer, put time on first line, then label+value on the next line.
+	 */
+	function tooltipHTML(chart,d,i) {
+		var tooltipHTML = ''
+    if (chart.parent.meta.length > 1) {
+      tooltipHTML = d.time + "<br/>";
+      tooltipHTML += "<span class='label'>" + chart.parent.meta[i].label + "</span>";
+    } else {
+      tooltipHTML += "<span class='label'>" + d.time+ "</span>";
+		}
+    tooltipHTML += "<strong>"+chart.parent.formattedValue(d.d)+"</strong>";
+		return tooltipHTML;
+	}
+  
+  return this;
+}

data/lib/scout_realtime/web/javascripts/d3.linechart.js

@@ -0,0 +1,168 @@
+function lineChart(params) {
+  this.data = params.data;
+  this.yScaleMax = params.yScaleMax;
+  this.element = params.element;
+  this.metadata = params.metadata;
+	var line, path, x, y, barWidth, height, selection, chartInfo, latestValue, chartId;
+	
+  this.draw = function() {
+    var _this = this;
+	  selection = d3.select(this.element);
+    chartId = $(selection[0]).data('collector') + $(selection[0]).data('instance-name');
+    // get the width and height form the selection
+    var width = selection.node().clientWidth || parseInt($(selection.node()).css('width'));
+    height = selection.node().clientHeight || parseInt($(selection.node()).css('height'));
+    y = d3.scale.linear().range([height, 0]);
+    x = d3.time.scale().range([0, width]);
+		now = new Date();
+    x.domain([new Date(now - 60 * refreshInterval), now]);
+    var currentYMax = d3.max([this.yScaleMax, yMax(this.data)]);
+    if(this.yScaleMax) {
+      var currentYMin = d3.min([0,yMin(this.data)]);
+    } else {
+      var currentYMin = yMin(this.data);
+    }
+  	y.domain([currentYMin, currentYMax])
+		
+    barWidth = width / this.data.length;
+
+		// used to handle clipping, but not sure how it works (or if it is doing anything)
+		selection.append("defs").append("clipPath")
+		    .attr("id", "clip-" + chartId)
+        .attr("class", "clip-path")
+		  .append("rect")
+		    .attr("width", width - (barWidth * 2)) // new data points are drawn outside of clip area
+		    .attr("height", height);
+
+    line = d3.svg.line()
+		    .interpolate("basis")
+		    .x(function(d, i) { return x(d.time); })
+		    .y(function(d, i) { return y(d.value[0]); });
+	
+
+    chartInfo = $(selection[0]).parent().siblings('.chart_info');
+    latestValue = $(selection[0]).parent().siblings('.latest_value');
+    latestValue.html(this.format(this.data[this.data.length - 1].value[0]));
+
+    chartSection = selection.selectAll("rect")
+        .data(this.data);
+
+    chartSection.enter()
+        .append("rect")
+        .attr("class", "chart_section")
+        .attr("width", barWidth)
+        .attr("height", height)
+        .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+        .on("mouseover", function(d) {
+          //latestValue.html(_this.format(d.value[0]));
+          chartInfo.html(_this.tooltip(d));
+        })
+        .on("mouseout", function(d) {
+          chartInfo.html("");
+        });
+
+		path = selection.append("g")
+        .attr("clip-path", "url(#clip-" + chartId + ")")
+		  .append("path")
+		    .datum(this.data)
+		    .attr("class", "line")
+		    .attr("d", line);
+
+    this.refresh();
+  } // this.draw
+
+	this.refresh = function() {
+    var _this = this;
+    if(window.refresher) {
+      var now = new Date();
+      // update domains
+      x.domain([new Date(now - 60 * refreshInterval), now.getTime()]);
+      var currentYMax = d3.max([this.yScaleMax, yMax(this.data)]);
+      if(this.yScaleMax > 0) {
+        var currentYMin = d3.min([0,yMin(this.data)]);
+      } else {
+        var currentYMin = yMin(this.data);
+      }
+      y.domain([currentYMin, currentYMax]);
+
+      latestValue.html(this.format(this.data[this.data.length - 1].value[0]));
+
+      path
+        // update the line - this isn't part of the transition. new points will be off to the right.
+        .attr("d", line)
+        .attr("transform", null)	
+        // slide the path to the left 1 second
+        .transition()
+          .duration(refreshInterval - 50) // duration is the same as the update interval...if it equals the update interval, it gets canceled?
+          .ease("linear")
+          .attr("transform", "translate(" + x(x.domain()[0] - refreshInterval) + ")")
+          .each("end", function() {
+            _this.refresh();
+          });
+
+      chartSection = selection.selectAll("rect")
+          .data(this.data);
+
+      chartSection.enter()
+          .append("rect")
+          .attr("class", "chart_section")
+          .attr("width", barWidth)
+          .attr("height", height)
+          .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+          .on("mouseover", function(d) {
+            chartInfo.html(_this.tooltip(d));
+          })
+          .on("mouseout", function(d) {
+            chartInfo.html("");
+          })
+        .transition()
+          .duration(0)
+          .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+    } else {
+      setTimeout(function() { _this.refresh() }, refreshInterval);
+    }
+	}
+	
+	/* Given an array of data, iterates through and returns the maximum value. */
+	function yMax(data) {
+    dataMax = d3.max(data, function(d) {
+      var total = 0;
+      $.each(d.value, function(i, value) {
+        total += value;
+      });
+      return total;
+    });
+    return dataMax;
+  }
+
+	/* Given an array of data, iterates through and returns the minimum value. */
+	function yMin(data) {
+    dataMin = d3.min(data, function(d) {
+      var total = 0;
+      $.each(d.value, function(i, value) {
+        total += value;
+      });
+      return total;
+    });
+    return dataMin;
+  }
+
+  this.format = function(value) {
+    var formattedUnits = ( this.metadata.units == '%' ? '%' : ' ' + this.metadata.units )
+    return(value.toFixed(this.metadata.precision) + formattedUnits);
+  }
+
+  this.tooltip = function(data) {
+    var tooltipStr = '';
+    if(data.valueBreakdown) {
+      for(var key in data.valueBreakdown) {
+        tooltipStr += key + ': ' + this.format(data.valueBreakdown[key]) + '; ';
+      }
+    } else {
+      tooltipStr = this.format(data.value[0]);
+    }
+    return tooltipStr;
+  }
+  
+  return this;
+}