first version of hover refactored to be 100% html

ekkelenkamp · Nov 18, 2012 · 9bdabf1 · 9bdabf1
1 parent 25698d6
commit 9bdabf1
Show file tree

Hide file tree

Showing 31 changed files with 750 additions and 671 deletions.
diff --git a/examples/area.html b/examples/area.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Area charts</h1>

diff --git a/examples/bar-colors.html b/examples/bar-colors.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Bar charts</h1>

diff --git a/examples/bar.html b/examples/bar.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Bar charts</h1>

diff --git a/examples/days.html b/examples/days.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Dates YYYY-MM-DD</h1>

diff --git a/examples/decimal.html b/examples/decimal.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Decimal Data</h1>

diff --git a/examples/donut-formatter.html b/examples/donut-formatter.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Donut Chart</h1>

diff --git a/examples/donut.html b/examples/donut.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Donut Chart</h1>

diff --git a/examples/events.html b/examples/events.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Time Events</h1>

diff --git a/examples/goals.html b/examples/goals.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Value Goals</h1>

diff --git a/examples/months-no-smooth.html b/examples/months-no-smooth.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Dates with YYYY-MM</h1>

diff --git a/examples/negative.html b/examples/negative.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Negative values</h1>

diff --git a/examples/non-continuous.html b/examples/non-continuous.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Non-continuous data</h1>

diff --git a/examples/non-date.html b/examples/non-date.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Non-date Arbitrary X-axis</h1>

diff --git a/examples/quarters.html b/examples/quarters.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Dates with Quarters</h1>

diff --git a/examples/timestamps.html b/examples/timestamps.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Timestamps</h1>

diff --git a/examples/updating.html b/examples/updating.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Updating data</h1>

diff --git a/examples/weeks.html b/examples/weeks.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Dates With Weeks</h1>

diff --git a/examples/years.html b/examples/years.html
@@ -7,6 +7,7 @@
   <script src="lib/example.js"></script>
   <link rel="stylesheet" href="lib/example.css">
   <link rel="stylesheet" href="lib/prettify.css">
+  <link rel="stylesheet" href="../morris.css">
 </head>
 <body>
 <h1>Formatting Dates YYYY</h1>

diff --git a/grunt.js b/grunt.js
@@ -16,13 +16,23 @@ module.exports = function (grunt) {
       'build/morris.coffee': [
         'lib/morris.coffee',
         'lib/morris.grid.coffee',
+        'lib/morris.hover.coffee',
         'lib/morris.line.coffee',
         'lib/morris.area.coffee',
         'lib/morris.bar.coffee',
         'lib/morris.donut.coffee'
       ],
       'build/spec.coffee': ['spec/support/**/*.coffee', 'spec/lib/**/*.coffee']
     },
+    less: {
+      all: {
+        src: 'less/*.less',
+        dest: 'morris.css',
+        options: {
+          compress: true
+        }
+      }
+    },
     min: {
       'morris.min.js': 'morris.js'
     },
@@ -33,13 +43,14 @@ module.exports = function (grunt) {
       }
     },
     watch: {
-      files: ['lib/**/*.coffee', 'spec/lib/**/*.coffee', 'spec/support/**/*.coffee'],
+      files: ['lib/**/*.coffee', 'spec/lib/**/*.coffee', 'spec/support/**/*.coffee', 'less/**/*.less'],
       tasks: 'default'
     }
   });
 
   grunt.loadNpmTasks('grunt-coffee');
   grunt.loadNpmTasks('grunt-mocha');
+  grunt.loadNpmTasks('grunt-less');
 
-  grunt.registerTask('default', 'concat coffee min mocha');
+  grunt.registerTask('default', 'concat coffee less min mocha');
 };
diff --git a/less/morris.core.less b/less/morris.core.less
@@ -0,0 +1,19 @@
+div.morris-popup {
+    border-radius: 10px;
+    position: absolute;
+    z-index: 1000;
+    padding: 6px;
+    font: normal 13px/16px Arial, sans-serif;
+    color: #666;
+    background: rgba(255,255,255,.8);
+    border: solid 2px rgba(230,230,230,.8);
+
+    h4, p {
+        font: normal 13px/16px Arial, sans-serif;
+        text-align: center;
+        color: #666;
+        margin: 0;
+    }
+
+    h4 { font-weight: bold; }
+}
diff --git a/lib/morris.area.coffee b/lib/morris.area.coffee
@@ -31,7 +31,7 @@ class Morris.Area extends Morris.Line
     super()
 
   fillForSeries: (i) ->
-    color = Raphael.rgb2hsl @colorForSeries(i)
+    color = Raphael.rgb2hsl @colorFor(@data[i], i, 'line')
     Raphael.hsl(
       color.h,
       Math.min(255, color.s * 0.75),

diff --git a/lib/morris.bar.coffee b/lib/morris.bar.coffee
@@ -1,29 +1,22 @@
 class Morris.Bar extends Morris.Grid
-  # Initialise the graph.
-  #
+  @include Morris.Hover
+
+  # override hoverCalculatePosition
+  hoverGetPosition: (index) ->
+    [x, y] = Morris.Hover.hoverGetPosition.call(this, index)
+
+    [x, (@top + @bottom)/2 - @hoverHeight/2]
+
   constructor: (options) ->
     return new Morris.Bar(options) unless (@ instanceof Morris.Bar)
     super($.extend {}, options, parseTime: false)
 
-  # setup event handlers
-  #
   init: ->
-    @prevHilight = null
-    @el.mousemove (evt) =>
-      @updateHilight evt.pageX
-    if @options.hideHover
-      @el.mouseout (evt) =>
-        @hilight null
-    touchHandler = (evt) =>
-      touch = evt.originalEvent.touches[0] or evt.originalEvent.changedTouches[0]
-      @updateHilight touch.pageX
-      return touch
-    @el.bind 'touchstart', touchHandler
-    @el.bind 'touchmove', touchHandler
-    @el.bind 'touchend', touchHandler
-
-  # Default configuration
-  #
+    @hoverConfigure @options.hoverOptions
+
+  postInit: ->
+    @hoverInit()
+
   defaults:
     barSizeRatio: 0.75
     barGap: 3
@@ -36,23 +29,13 @@ class Morris.Bar extends Morris.Grid
       '#cb4b4b'
       '#9440ed'
     ]
-    hoverPaddingX: 10
-    hoverPaddingY: 5
-    hoverMargin: 10
-    hoverFillColor: '#fff'
-    hoverBorderColor: '#ccc'
-    hoverBorderWidth: 2
-    hoverOpacity: 0.95
-    hoverLabelColor: '#444'
-    hoverFontSize: 12
-    hideHover: false
 
   # Do any size-related calculations
   #
   # @private
   calc: ->
     @calcBars()
-    @calcHoverMargins()
+    @hoverCalculateMargins()
 
   # calculate series data bars coordinates and sizes
   #
@@ -63,21 +46,12 @@ class Morris.Bar extends Morris.Grid
       row._y = for y in row.y
         if y? then @transY(y) else null
 
-  # calculate hover margins
-  #
-  # @private
-  calcHoverMargins: ->
-    @hoverMargins = for i in [1...@data.length]
-      @left + i * @width / @data.length
-
   # Draws the bar chart.
   #
   draw: ->
     @drawXAxis()
     @drawSeries()
-    @drawHover()
-    @hilight(if @options.hideHover then null else @data.length - 1)
-
+
   # draw the x-axis labels
   #
   # @private
@@ -125,69 +99,6 @@ class Morris.Bar extends Morris.Grid
         else
           null
 
-  # draw the hover tooltip
-  #
-  # @private
-  drawHover: ->
-    # hover labels
-    @hoverHeight = @options.hoverFontSize * 1.5 * (@options.ykeys.length + 1)
-    @hover = @r.rect(-10, -@hoverHeight / 2 - @options.hoverPaddingY, 20, @hoverHeight + @options.hoverPaddingY * 2, 10)
-      .attr('fill', @options.hoverFillColor)
-      .attr('stroke', @options.hoverBorderColor)
-      .attr('stroke-width', @options.hoverBorderWidth)
-      .attr('opacity', @options.hoverOpacity)
-    @xLabel = @r.text(0, (@options.hoverFontSize * 0.75) - @hoverHeight / 2, '')
-      .attr('fill', @options.hoverLabelColor)
-      .attr('font-weight', 'bold')
-      .attr('font-size', @options.hoverFontSize)
-    @hoverSet = @r.set()
-    @hoverSet.push(@hover)
-    @hoverSet.push(@xLabel)
-    @yLabels = []
-    for i in [0...@options.ykeys.length]
-      yLabel = @r.text(0, @options.hoverFontSize * 1.5 * (i + 1.5) - @hoverHeight / 2, '')
-        .attr('font-size', @options.hoverFontSize)
-      @yLabels.push(yLabel)
-      @hoverSet.push(yLabel)
-
-  # @private
-  updateHover: (index) =>
-    @hoverSet.show()
-    row = @data[index]
-    @xLabel.attr('text', row.label)
-    for y, i in row.y
-      @yLabels[i].attr('fill', @colorFor(row, i, 'hover'))
-      @yLabels[i].attr('text', "#{@options.labels[i]}: #{@yLabelFormat(y)}")
-    # recalculate hover box width
-    maxLabelWidth = Math.max.apply null, (l.getBBox().width for l in @yLabels)
-    maxLabelWidth = Math.max maxLabelWidth, @xLabel.getBBox().width
-    @hover.attr 'width', maxLabelWidth + @options.hoverPaddingX * 2
-    @hover.attr 'x', -@options.hoverPaddingX - maxLabelWidth / 2
-    # move to y pos
-    yloc = (@bottom + @top) / 2
-    xloc = Math.min @right - maxLabelWidth / 2 - @options.hoverPaddingX, @data[index]._x
-    xloc = Math.max @left + maxLabelWidth / 2 + @options.hoverPaddingX, xloc
-    @hoverSet.attr 'transform', "t#{xloc},#{yloc}"
-
-  # @private
-  hideHover: ->
-    @hoverSet.hide()
-
-  # @private
-  hilight: (index) =>
-    if index isnt null and @prevHilight isnt index
-      @updateHover index
-    @prevHilight = index
-    if not index?
-      @hideHover()
-
-  # @private
-  updateHilight: (x) =>
-    x -= @el.offset().left
-    for hoverIndex in [0...@hoverMargins.length]
-      break if @hoverMargins[hoverIndex] > x
-    @hilight hoverIndex
-
   # @private
   #
   # @param row  [Object] row data