Hover element for line charts (still needs refactoring...)

less/morris.core.less

@@ -1,9 +1,27 @@
-.morris-popup {
-  border-radius: 10px;
+.morris-hover {
   position: absolute;
   z-index: 1000;
-  padding: 6px;
-  color: #666;
-  background: rgba(255, 255, 255, 0.8);
-  border: solid 2px rgba(230, 230, 230, 0.8);
+
+  &.morris-default-style {
+    border-radius: 10px;
+    padding: 6px;
+    color: #666;
+    background: rgba(255, 255, 255, 0.8);
+    border: solid 2px rgba(230, 230, 230, 0.8);
+
+    font-family: sans-serif;
+    font-size: 12px;
+    text-align: center;
+
+    .morris-hover-row-label {
+      font-weight: bold;
+      margin: 0.25em 0;
+    }
+
+    .morris-hover-point {
+      white-space: nowrap;
+      margin: 0.1em 0;
+    }
+  }
+
 }

lib/morris.grid.coffee

@@ -12,6 +12,9 @@ class Morris.Grid extends Morris.EventEmitter
     if not @el? or @el.length == 0
       throw new Error("Graph container element not found")
 
+    if @el.css('position') == 'static'
+      @el.css('position', 'relative')
+
     @options = $.extend {}, @gridDefaults, (@defaults || {}), options
 
     # bail if there's no data
@@ -280,15 +283,15 @@ class Morris.Grid extends Morris.EventEmitter
       @el.bind 'touchstart touchmove touchend', (evt) =>
         touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
         @updateHover touch.pageX, touch.pageY
-        return touch
+        touch
 
   hitTest: (x, y) -> null
 
   updateHover: (x, y) ->
     offset = @el.offset()
     x -= offset.left
     y -= offset.top
-    hit = hitTest(x, y)
+    hit = @hitTest(x, y)
     if hit?
       @hover.update(hit...)
 

lib/morris.hover.coffee

@@ -2,7 +2,7 @@ class Morris.Hover
   # Displays contextual information in a floating HTML div.
 
   @defaults:
-    class: 'morris-popup'
+    class: 'morris-hover morris-default-style'
 
   constructor: (options = {}) ->
     @options = $.extend {}, Morris.Hover.defaults, options

lib/morris.line.coffee

@@ -66,13 +66,39 @@ class Morris.Line extends Morris.Grid
       row._x = @transX(row.x)
       row._y = for y in row.y
         if y? then @transY(y) else y
+      row._ymax = Math.min.apply(null, [@bottom].concat(y for y in row._y when y?))
 
   # calculate hilight margins
   #
   # @private
   calcHilightMargins: ->
     @hilightMargins = ((r._x + @data[i]._x) / 2 for r, i in @data.slice(1))
 
+  # hover element hit test
+  #
+  # @private
+  hitTest: (x, y) ->
+    # TODO better search algo
+    for r, i in @data.slice(1)
+      break if x < (r._x + @data[i]._x) / 2
+    @hoverFor(i)
+
+  # hover content for a point
+  #
+  # @private
+  hoverFor: (index) ->
+    row = @data[index]
+    content = "<div class='morris-hover-row-label'>#{row.label}</div>"
+    for y, j in row.y
+      content += """
+        <div class='morris-hover-point' style='color: #{@colorFor(row, j, 'label')}'>
+          #{@options.labels[j]}:
+          #{@yLabelFormat(y)}
+        </div>
+      """
+    [content, row._x, row._ymax]
+
+
   # generate paths for series lines
   #
   # @private

spec/lib/hover_spec.coffee

@@ -6,7 +6,7 @@ describe "Morris.Hover", ->
       parent = $('<div style="width:200px;height:180px"></div>')
         .appendTo($('#test'))
       @hover = new Morris.Hover(parent:  parent)
-      @element = $('#test .morris-popup')
+      @element = $('#test .morris-hover')
 
     it "should initialise a hidden, empty popup", ->
       @element.should.exist
@@ -58,7 +58,7 @@ describe "Morris.Hover", ->
       hover = new Morris.Hover(parent: $('#test'))
       html = "<div style='width:84px;height:84px'>Hello, Everyone!</div>"
       hover.update(html, 150, 200)
-      el = $('#test .morris-popup')
+      el = $('#test .morris-hover')
       el.should.have.css('left', '100px')
       el.should.have.css('top', '90px')
       el.should.have.text('Hello, Everyone!')