heart 0.0.1.pre → 0.0.1

data/README.rdoc

@@ -1,3 +1,39 @@
-= Heart
+# HEART
 
-This project rocks and uses MIT-LICENSE.
+SEE the markdown README.md for the most up to date documentation.
+
+## You
+- Want to quickly start tracking important daily metrics
+- Have access to your data for generating metrics
+- Don't want to dally around with excel, would prefer to automate the presentation and amalgamation of metric data
+- Might like to share your metric definitions across projects, keep things separated and reusable
+
+## Install
+Add the gem to your gemfile:
+```
+gem 'heart', '~> 0.0.1'
+```
+
+[Optional] Add any other gems to your gemfile for prepackaged HEART metrics if applicable:
+```
+gem 'heart_vbulletin4', '~> 0.0.1'
+```
+
+Bundle, then migrate:
+```
+bundle install
+bundle exec rake db:migrate
+```
+That will setup the HEART database tables, and add metrics for any prepackaged HEART metric gem that you might have installed.
+
+Mount the engine on some path, by editing your routes.rb file and adding:
+```ruby
+mount Heart::Engine => "/heart", as: 'heart_engine'
+```
+Now, when you startup your local server and access /heart you'll be greeted by the heart main page.
+
+### Rails 4
+Currently, need to add ```gem 'protected_attributes'``` and ```gem 'haml', '~> 4.0'``` to your gemfile for rails 4 support.
+
+## Creating your own custom metrics
+The real simplicity of this gem comes from the ease in which you can create and isolate your own custom metrics into gems to share between projects. You can start by creating the metrics locally, in your project, then easily move them into a gem if you plan on sharing them with other people / projects.

data/app/assets/javascripts/heart/application.js

@@ -72,13 +72,22 @@ $(function(){
     return false;
   });
   $('.heart_set_zoom').click(function(){
-    HEART.set_set_zoom();
+    HEART.set_zoom();
+    return false;
+  });
+  $('#description_div').click(function(){
+    $('#description_div').hide();
+    $('#description_div_form').show();
+    return false;
+  });
+  $('#add_metric_link').click(function(){
+    $('#heart_form_metrics').toggle();
     return false;
   });
 });
 
 $(document).ready(function(){
-  $('.tTip').betterTooltip();
+  $('[title]').colorTip({color:'yellow', timeout:25});
   $('#clickdata').hide();
   $(function() {
       if($("#date_from").length){

data/app/assets/javascripts/heart/colortip-1.0-jquery.js

@@ -0,0 +1,143 @@
+(function($){
+	$.fn.colorTip = function(settings){
+
+		var defaultSettings = {
+			color		: 'yellow',
+			timeout		: 500
+		}
+		
+		var supportedColors = ['red','green','blue','white','yellow','black'];
+		
+		/* Combining the default settings object with the supplied one */
+		settings = $.extend(defaultSettings,settings);
+
+		/*
+		*	Looping through all the elements and returning them afterwards.
+		*	This will add chainability to the plugin.
+		*/
+		
+		return this.each(function(){
+
+			var elem = $(this);
+			
+			// If the title attribute is empty, continue with the next element
+			if(!elem.attr('title')) return true;
+			
+			// Creating new eventScheduler and Tip objects for this element.
+			// (See the class definition at the bottom).
+			
+			var scheduleEvent = new eventScheduler();
+			var tip = new Tip(elem.attr('title'));
+
+			// Adding the tooltip markup to the element and
+			// applying a special class:
+			
+			elem.append(tip.generate()).addClass('colorTipContainer');
+
+			// Checking to see whether a supported color has been
+			// set as a classname on the element.
+			
+			var hasClass = false;
+			for(var i=0;i<supportedColors.length;i++)
+			{
+				if(elem.hasClass(supportedColors[i])){
+					hasClass = true;
+					break;
+				}
+			}
+			
+			// If it has been set, it will override the default color
+			
+			if(!hasClass){
+				elem.addClass(settings.color);
+			}
+			
+			// On mouseenter, show the tip, on mouseleave set the
+			// tip to be hidden in half a second.
+			
+			elem.hover(function(){
+
+				tip.show();
+				
+				// If the user moves away and hovers over the tip again,
+				// clear the previously set event:
+				
+				scheduleEvent.clear();
+
+			},function(){
+
+				// Schedule event actualy sets a timeout (as you can
+				// see from the class definition below).
+				
+				scheduleEvent.set(function(){
+					tip.hide();
+				},settings.timeout);
+
+			});
+			
+			// Removing the title attribute, so the regular OS titles are
+			// not shown along with the tooltips.
+			
+			elem.removeAttr('title');
+		});
+		
+	}
+
+
+	/*
+	/	Event Scheduler Class Definition
+	*/
+
+	function eventScheduler(){}
+	
+	eventScheduler.prototype = {
+		set	: function (func,timeout){
+
+			// The set method takes a function and a time period (ms) as
+			// parameters, and sets a timeout
+
+			this.timer = setTimeout(func,timeout);
+		},
+		clear: function(){
+			
+			// The clear method clears the timeout
+			
+			clearTimeout(this.timer);
+		}
+	}
+
+
+	/*
+	/	Tip Class Definition
+	*/
+
+	function Tip(txt){
+		this.content = txt;
+		this.shown = false;
+	}
+	
+	Tip.prototype = {
+		generate: function(){
+			
+			// The generate method returns either a previously generated element
+			// stored in the tip variable, or generates it and saves it in tip for
+			// later use, after which returns it.
+			
+			return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
+											 '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
+		},
+		show: function(){
+			if(this.shown) return;
+			
+			// Center the tip and start a fadeIn animation
+      this.tip.css('top',-this.tip.outerHeight()*1.5);
+			this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
+			this.shown = true;
+		},
+		hide: function(){
+			this.tip.fadeOut();
+			this.shown = false;
+		}
+	}
+	
+})(jQuery);

data/app/assets/javascripts/heart/flot/jquery.flot.legendcanvas.js

@@ -0,0 +1,116 @@
+(function($) {
+
+	function init(plot) {
+		plot.hooks.processOptions.push(addLastDrawHook);
+	}
+
+	function addLastDrawHook(plot) {
+		plot.hooks.draw.push(drawLegend);
+	}
+
+	// draws the legend on the canvas, using the HTML added by flot as a guide
+	function drawLegend(plot, ctx) {
+		var options = plot.getOptions();
+		if(!options.legend.show) return;
+    if(!options.legend.showOnCanvas) return;
+
+		var placeholder = plot.getPlaceholder();
+		var container = options.legend.container || placeholder.find('.legend');
+
+		var f = {
+			style: placeholder.css("font-style"),
+			size: Math.round(0.8 * (+placeholder.css("font-size").replace("px", "") || 13)),
+			variant: placeholder.css("font-variant"),
+			weight: placeholder.css("font-weight"),
+			family: placeholder.css("font-family")
+		};
+
+		ctx.font = f.style + " " + f.variant + " " + f.weight + " " + f.size + "px '" + f.family + "'";
+		ctx.textAlign = "left";
+		ctx.textBaseline = "bottom";
+
+		function fontAscent() {
+			return 12;
+		}
+
+		var series = plot.getData();
+		var plotOffset = plot.getPlotOffset();
+		var plotHeight = plot.height();
+		var plotWidth = plot.width();
+		var lf = options.legend.labelFormatter;
+		var legendWidth = 0, legendHeight = 0;
+		var num_labels = 0;
+		var s, label;
+		// get width of legend and number of valid legend entries
+		for(var i = 0; i < series.length; ++i) {
+			s = series[i];
+			label = s.label;
+			if(!label) continue;
+			num_labels++;
+			if(lf) label = lf(label, s);
+			labelWidth = ctx.measureText(label).width;
+			if(labelWidth > legendWidth) legendWidth = labelWidth
+		}
+		var LEGEND_BOX_WIDTH = 22; // color box
+		var PADDING_RIGHT = 5;
+		var LEGEND_BOX_LINE_HEIGHT = 18;
+		legendWidth = legendWidth + LEGEND_BOX_WIDTH + PADDING_RIGHT;
+		legendHeight = num_labels * LEGEND_BOX_LINE_HEIGHT;
+		var x, y;
+		if(options.legend.container != null) {
+			x = $(options.legend.container).offset().left;
+			y = $(options.legend.container).offset().top;
+		} else {
+			var pos = "";
+			var p = options.legend.position;
+			var m = options.legend.margin;
+			if(m[0] == null) m = [m, m];
+			if(p.charAt(0) == "n")
+				y = Math.round(plotOffset.top + options.grid.borderWidth + m[1]);
+			else if(p.charAt(0) == "s")
+				y = Math.round(plotOffset.top + options.grid.borderWidth + plotHeight - m[0] - legendHeight);
+			if(p.charAt(1) == "e")
+				x = Math.round(plotOffset.left + options.grid.borderWidth + plotWidth - m[0] - legendWidth);
+			else if(p.charAt(1) == "w")
+				x = Math.round(plotOffset.left + options.grid.borderWidth + m[0]);
+			if(options.legend.backgroundOpacity != 0.0) {
+				var c = options.legend.backgroundColor;
+				if(c == null) c = options.grid.backgroundColor;
+				if(c && typeof c == "string") {
+					ctx.globalAlpha = options.legend.backgroundOpacity;
+					ctx.fillStyle = c;
+					ctx.fillRect(x, y, legendWidth, legendHeight);
+					ctx.globalAlpha = 1.0;
+				}
+			}
+		}
+		var posx, posy;
+		for(var i = 0; i < series.length; ++i) {
+			s = series[i];
+			label = s.label;
+			if(!label) continue;
+			if(lf) label = lf(label, s);
+			posy = y + (i * 18);
+			ctx.fillStyle = options.legend.labelBoxBorderColor;
+			ctx.fillRect(x, posy, 18, 14);
+			ctx.fillStyle = "#FFF";
+			ctx.fillRect(x + 1, posy + 1, 16, 12);
+			ctx.fillStyle = s.color;
+			ctx.fillRect(x + 2, posy + 2, 14, 10);
+			posx = x + 22;
+			posy = posy + f.size + 2;
+
+			ctx.fillStyle = options.grid.color;
+			ctx.fillText(label, posx, posy);
+		}
+
+		container.hide(); // hide the HTML version
+	}
+
+	$.plot.plugins.push({
+		init: init,
+		options: {},
+		name: 'legendoncanvas',
+		version: '1.0'
+	});
+})(jQuery);

data/app/assets/javascripts/heart/heart.js

@@ -77,7 +77,6 @@ var HEART = function(){
 
     description : function(bool_remove){
       var remove = bool_remove || false;
-      console.log(remove);
       if(!remove){
         $.ajax({
           type : "POST",
@@ -87,7 +86,9 @@ var HEART = function(){
           data : { 'fulldate': '2999-12-31', 'note': $('#custom_description').val(), 'date_from': '2999-12-31', 'date_to': '2999-12-31' },
           success : function(res){
             if(typeof(chart_description) != 'undefined' && chart_description != ""){
-              $('#description_div').html("<img src='"+HEARTENGINE.mountPoint()+"/images/bluestar.png' align='left' width='16px' onclick='HEART.description(false)'/> &nbsp; " + chart_description);
+              $('#description_div').html(chart_description);
+              $('#description_div').show();
+              $('#description_div_form').hide();
             }
             HEART.link();
           },
@@ -121,6 +122,11 @@ var HEART = function(){
     },
 
     image : function(){
+      HEART.flotGraph(
+        {
+          flotoptions: { legend: { noColumns: 3, show: true, showOnCanvas: true, position: 'nw'} }
+        }
+      ).draw();
       dashboard_id = $('#dashboard_id').val();
       result = $.ajax({
         type : "POST",
@@ -142,6 +148,7 @@ var HEART = function(){
           'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
         },
       });
+      HEART.flotGraph().draw();
     },
     
     tsv : function(){
@@ -288,7 +295,7 @@ var HEART = function(){
     //
     flotGraph : function(spec){
       var spec = spec || {};
-      spec.flotoptions = {
+      var flotoptions = {
         colors: ["#FF8300", "#06799F", "#FF2800", "#9440ed","#C3F500"],
         xaxis: { mode: "time", reserveSpace: null},
         xaxes: [{ },
@@ -299,22 +306,7 @@ var HEART = function(){
         yaxis: { min: 0 },
         grid: { backgroundColor: { colors: ["#fff", "#fff"] }, hoverable: true, clickable: true },
         legend: { noColumns: 3, container: $('#flotlegend, .legend'), labelBoxBorderColor: null, show: true, labelFormatter: function(label, series) {
-            // series is the series object for the label
-            if(label.substring(label.length -1) == "]"){
-              if(label.substring(label.length -4) == "999]"){
-                return "forecast";
-              }else if(label.substring(label.length -4) == "998]"){
-                return ".";
-              }else if(label.substring(label.length -4) == "888]"){
-                return "target";
-              }else if(label.substring(label.length -4) == "666]"){
-                return "significance";
-              }else{
-                return label.substring(label.indexOf('['));
-              }
-            }else{
-              return "<a onclick=\"$('#measurement_" + series.att_name + "').attr('checked', false); HEART.flotGraph().draw(); return false;\">" + label + "</a>";
-            }
+            return "<a onclick=\"$('#measurement_" + series.att_name + "').attr('checked', false); HEART.flotGraph().draw(); return false;\">" + label + "</a>";
           } },
         series: { 
           stack: HEART.get_stack(),
@@ -337,6 +329,9 @@ var HEART = function(){
         lines : { show : HEART.get_lines(), fill : HEART.get_fill() },
         points : { show : HEART.get_points() },
       };
+      
+      jQuery.extend(flotoptions, spec.flotoptions);
+      spec.flotoptions = flotoptions;
 
       var that = this.graph(spec);
 
@@ -574,7 +569,7 @@ var HEART = function(){
         }
         if(typeof(HEART.cacheRead(cache_index)["chart_description"]) != 'undefined'){
           if(HEART.cacheRead(cache_index)["chart_description"] != ""){
-            $('#description_div').html("<p class='notice'><img src='"+HEARTENGINE.mountPoint()+"/images/bluestar.png' align='right' width='16px' /><img src='"+HEARTENGINE.mountPoint()+"/images/bluestar.png' align='left' width='16px' onclick='HEART.description(true)'/>&nbsp;" + HEART.cacheRead(cache_index)["chart_description"] + "</p>");
+            $('#description_div').html(HEART.cacheRead(cache_index)["chart_description"]);
           }else{
             $('#description_div').html("");
           }

data/app/assets/javascripts/heart/jquery.betterTooltip.js

@@ -91,7 +91,7 @@ function showTooltip(x, y, contents) {
         top: y + 5,
         left: x + 5,
         padding: '10px',
-				'line-height': '14px',
+				'line-height': '12px',
 				'text-shadow': '0px -1px 1px rgba(0, 0, 0, .8)',
 				'max-width': '240px',
 				color: 'white',

data/app/assets/stylesheets/heart/colortip-1.0-jquery.css

@@ -0,0 +1,99 @@
+.colorTip{
+	/* This class is assigned to the color tip span by jQuery */
+	
+	display:none;
+	position:absolute;	
+	left:50%;
+	top:-30px;
+	padding:6px;
+	
+	background-color:white;
+	font-family:Arial,Helvetica,sans-serif;
+	font-size:11px;
+	font-style:normal;
+	line-height:1;
+	text-decoration:none;
+	text-align:center;
+	text-shadow:0 0 1px white;
+	white-space:nowrap;
+	
+	-moz-border-radius:4px;
+	-webkit-border-radius:4px;
+	border-radius:4px;
+}
+
+.pointyTip,.pointyTipShadow{
+	/* Setting a thick transparent border on a 0x0 div to create a triangle */
+	border:6px solid transparent;
+	bottom:-12px;
+	height:0;
+	left:50%;
+	margin-left:-6px;
+	position:absolute;
+	width:0;
+}
+
+.pointyTipShadow{
+	/* The shadow tip is 1px larger, so it acts as a border to the tip */
+	border-width:7px;
+	bottom:-14px;
+	margin-left:-7px;
+}
+
+.colorTipContainer{
+	position:relative;
+	text-decoration:none !important;
+}
+
+
+/* 6 Available Color Themes */
+
+.white .pointyTip{ border-top-color:white;}
+.white .pointyTipShadow{ border-top-color:#ddd;}
+.white .colorTip{
+	background-color:white;
+	border:1px solid #DDDDDD;
+	color:#555555;
+}
+
+.yellow .pointyTip{ border-top-color:#f9f2ba;}
+.yellow .pointyTipShadow{ border-top-color:#e9d315;}
+.yellow .colorTip{
+	background-color:#f9f2ba;
+	border:1px solid #e9d315;
+	color:#5b5316;
+}
+
+.blue .pointyTip{ border-top-color:#d9f1fb;}
+.blue .pointyTipShadow{ border-top-color:#7fcdee;}
+.blue .colorTip{
+	background-color:#d9f1fb;
+	border:1px solid #7fcdee;
+	color:#1b475a;
+}
+
+.green .pointyTip{ border-top-color:#f2fdf1;}
+.green .pointyTipShadow{ border-top-color:#b6e184;}
+.green .colorTip{
+	background-color:#f2fdf1;
+	border:1px solid #b6e184;
+	color:#558221;
+}
+
+.red .pointyTip{ border-top-color:#bb3b1d;}
+.red .pointyTipShadow{ border-top-color:#8f2a0f;}
+.red .colorTip{
+	background-color:#bb3b1d;
+	border:1px solid #8f2a0f;
+	color:#fcfcfc;
+	text-shadow:none;
+}
+
+.black .pointyTip{ border-top-color:#333;}
+.black .pointyTipShadow{ border-top-color:#111;}
+.black .colorTip{
+	background-color:#333;
+	border:1px solid #111;
+	color:#fcfcfc;
+	text-shadow:none;
+}