Issue 6. Add tootip

public/heatmap.html

@@ -1,3 +1,4 @@
 <div ng-controller="HeatmapController" class="heatmap-vis">
-  <heatmap data="data" options="vis.params" eventListeners="eventListeners"></heatmap>
+  <heatmap data="data" options="vis.params" event-listeners="eventListeners"></heatmap>
+  <tooltip top="top" left="left" items="tooltipItems"></tooltip>
 </div>

public/heatmap.js

@@ -1,11 +1,13 @@
 require('plugins/heatmap/heatmap.less');
+require('plugins/heatmap/heatmap_tooltip.css');
 require('plugins/heatmap/color_directive.js');
 require('plugins/heatmap/lib/heatmap_controller.js');
 require('plugins/heatmap/lib/heatmap_directive.js');
+require('plugins/heatmap/heatmap_tooltip_directive.js');
 
 function HeatmapProvider(Private) {
-  var TemplateVisType = Private(require('ui/template_vis_type/TemplateVisType'));
-  var Schemas = Private(require('ui/Vis/Schemas'));
+  var TemplateVisType = Private(require('ui/template_vis_type/template_vis_type'));
+  var Schemas = Private(require('ui/vis/schemas'));
   var colors = require('plugins/heatmap/colors.js');
 
   return new TemplateVisType({

public/heatmap_tooltip.css

@@ -0,0 +1,25 @@
+.heatmap-tooltip {
+  position: absolute;
+  width: auto;
+  fadeout(@gray-darker, 7%);
+  gray-darker: #222222;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+  -mox-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.heatmap-tooltip-list {
+  padding: 0;
+  list-style-type: none;
+}
+.heatmap-tooltip-list span{
+  font-size: 12px;
+}
+.heatmap-tooltip-list span.key{
+  font-weight: bold;
+}

public/heatmap_tooltip.html

@@ -0,0 +1,8 @@
+<div class="heatmap-tooltip" ng-show="isShown">
+  <ul class="heatmap-tooltip-list">
+    <li ng-repeat="item in items">
+      <span class="key">{{ item.key }}: </span>
+      <span class="value">{{ item.value }}</span>
+    </li>
+  </ul>
+</div>

public/heatmap_tooltip_directive.js

@@ -0,0 +1,58 @@
+var d3 = require("d3");
+var _ = require("lodash");
+var module = require('ui/modules').get('heatmap');
+
+module.directive('tooltip', function () {
+
+  function controller($scope) {
+    $scope.isShown = false;
+     /*
+      * Make sure that the items array is populated before tooltip is shown.
+      * The items variable is an array of objects, e.g.
+      *  [ 
+      *    { key: "Column", value: "Tuesday" },
+      *    { key: "Row", value: "12pm" }, 
+      *    { key: "Count", value: 12 } 
+      *  ]
+      */
+    this.showOnHover = function () {
+      $scope.isShown = !!($scope.items && _.isArray($scope.items) && $scope.items.length);
+    };
+
+    this.hideOnOut = function(){
+      $scope.isShown = false;
+    };
+  }
+
+  function link(scope, element, attrs, ctrl) {
+    function render($scope) {
+      d3.select(_.first(element))
+        .style("top", $scope.top + "px")
+        .style("left", $scope.left + "px");
+
+      ctrl.showOnHover();
+    }
+
+    scope.$watchGroup(["top", "left", "items"], function (newVal, oldVal, scope) {
+      render(scope);
+    }, 250);
+
+    scope.$watch("ngShow", function (newVal) {
+      ctrl.hideOnOut();
+    });
+  };
+
+  return {
+    restrict: "E",
+    scope: {
+      top: "=",
+      left: "=",
+      items: "=",
+      ngShow: "="
+    },
+    replace: true,
+    controller: controller,
+    link: link,
+    template: require("plugins/heatmap/heatmap_tooltip.html")
+  };
+});

public/lib/heatmap_controller.js

@@ -47,7 +47,7 @@ module.controller('HeatmapController', function ($scope, Private) {
       $scope.data = null;
       return;
     }
-
+	
     // Add row, column, and metric titles as vis parameters
     _.merge($scope.vis.params, {
       rowAxis: { title: getLabel($scope.vis.aggs, 'rows') },
@@ -58,5 +58,53 @@ module.controller('HeatmapController', function ($scope, Private) {
     $scope.data = [{
       cells: processTableGroups(tabifyAggResponse($scope.vis, resp), $scope)
     }];
+
+	  $scope.eventListeners = {
+      mouseover: [ mouseover ],
+      mouseout: [ mouseout ]
+    };	
+
+  	function mouseover(event) {
+      var target = d3.select(event.target);
+      var isHeatmapCell = (target.attr("class") === "cell");
+      var OFFSET = 50;
+
+      if (isHeatmapCell) {
+        // get data bound to heatmap cell
+        var d = _.first(target.data());
+        // Custom code for tooltip functionality goes here
+        $scope.$apply(function () {   
+          var params = $scope.vis.params; 
+          $scope.tooltipItems = Object.keys(d)
+            .filter(function (key) { return key !== "data"; })
+            .map(function (key) {
+
+              var title = d3.selectAll('text.title');
+              var value = d[key];
+              if (key.toUpperCase() === 'ROW') {                            
+                key = params.columnAxis.title || 'ROW';
+              }
+              if (key.toUpperCase() === 'COL') {
+                key = params.rowAxis.title || 'COL';
+              }
+              return {
+                key: key.toUpperCase(),
+                value: value
+              };
+            });
+
+          $scope.top = d.data.row + parseInt(params.margin.top) + OFFSET;
+          $scope.left = d.data.col + parseInt(params.margin.left) + OFFSET;
+        });
+      }
+    };
+
+    function mouseout(event){
+      $scope.$apply(function () {
+        $scope.tooltipItems = [];
+        $scope.top = 0;
+        $scope.left = 0;
+      });
+    }
   });
 });

public/tooltip_directive.js

@@ -0,0 +1,51 @@
+var _ = require("lodash");
+var module = require('ui/modules').get('heatmap');
+
+module.directive('tooltip', function () {
+  debugger;
+  function controller($scope) {
+    $scope.isShown = false;
+    debugger;
+     /*
+      * Make sure that the items array is populated before tooltip is shown.
+      * The items variable is an array of objects, e.g.
+      *  [ 
+      *    { key: "Column", value: "Tuesday" },
+      *    { key: "Row", value: "12pm" }, 
+      *    { key: "Count", value: 12 } 
+      *  ]
+      */
+    this.showOnHover = function () {
+      $scope.isShown = !!($scope.items && _.isArray($scope.items) && $scope.items.length);
+    };
+  }
+
+  function link(scope, element, attrs, ctrl) {
+    function render($scope) {
+      debugger;
+      d3.select(_.first(element))
+        .style("top", $scope.top + "px")
+        .style("left", $scope.left + "px");
+
+      ctrl.showOnHover();
+    }
+
+    scope.$watchGroup(["top", "left", "items"], function (newVal, oldVal, scope) {
+      debugger;
+      render(scope);
+    }, 250);
+  }
+
+  return {
+    restrict: "E",
+    scope: {
+      top: "=",
+      left: "=",
+      items: "="
+    },
+    replace: true,
+    controller: controller,
+    link: link,
+    template: require("plugins/heatmap/heatmap_tooltip.html")
+  };
+});

public/vis/components/axis/axis.js

@@ -58,7 +58,7 @@ function axes() {
 
       var text = g.selectAll('text.title')
         .data([data]);
-
+        
       text.exit().remove();
       text.enter().append('text')
         .attr('class', title.class || 'title');

public/vis/components/control/events.js

@@ -14,9 +14,8 @@ function events() {
       }
 
       d3.entries(listeners).forEach(function (d) {
-        svg.on(d.key, function () {
+        element.on(d.key, function () {
           d3.event.stopPropagation(); // => event.stopPropagation()
-
           _.forEach(d.value, function (listener) {
             listener.call(this, processor(d3.event));
           });

public/vis/components/elements/text.js

@@ -15,7 +15,7 @@ function text() {
     selection.each(function (data) {
       var text = d3.select(this).selectAll('text.' + cssClass)
         .data(data);
-
+        
         text.exit().remove();
 
         text.enter().append('text')

public/vis/index.js

@@ -15,7 +15,7 @@ function vis() {
   function generator(selection) {
     selection.each(function (data) {
       events.listeners(listeners);
-
+      
       layout.attr({
         type: opts.layout || 'grid',
         columns: opts.numOfColumns || 0,