Click events for current oesmith/master

examples/area.html

@@ -25,6 +25,8 @@ Morris.Area({
   xkey: 'x',
   ykeys: ['y', 'z'],
   labels: ['Y', 'Z']
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

examples/bar.html

@@ -25,6 +25,8 @@ Morris.Bar({
   xkey: 'x',
   ykeys: ['y', 'z', 'a'],
   labels: ['Y', 'Z', 'A']
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

examples/donut.html

@@ -22,6 +22,8 @@ Morris.Donut({
     {value: 5, label: 'A really really long label'}
   ],
   formatter: function (x) { return x + "%"}
+}).on('click', function(i, row){
+  console.log(i, row);
 });
 </pre>
 </body>

lib/morris.bar.coffee

@@ -10,6 +10,7 @@ class Morris.Bar extends Morris.Grid
       @hover = new Morris.Hover(parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
+      @on('gridclick', @onGridClick)
 
   # Default configuration
   #
@@ -124,6 +125,13 @@ class Morris.Bar extends Morris.Grid
     Math.min(@data.length - 1,
       Math.floor((x - @left) / (@width / @data.length)))
 
+  # click on grid event handler
+  #
+  # @private
+  onGridClick: (x, y) =>
+    index = @hitTest(x, y)
+    @fire 'click', index, @options.data[index], x, y
+
   # hover movement event handler
   #
   # @private

lib/morris.donut.coffee

@@ -8,7 +8,7 @@
 #       { label: 'yang', value: 50 }
 #     ]
 #   });
-class Morris.Donut
+class Morris.Donut extends Morris.EventEmitter
   defaults:
     colors: [
       '#0B62A4'
@@ -71,10 +71,11 @@ class Morris.Donut
     @segments = []
     for d in @data
       next = last + min + C * (d.value / total)
-      seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], d)
+      seg = new Morris.DonutSegment(cx, cy, w*2, w, last, next, @options.colors[idx % @options.colors.length], d, idx)
       seg.render @r
       @segments.push seg
       seg.on 'hover', @select
+      seg.on 'click', @click
       last = next
       idx += 1
     @text1 = @r.text(cx, cy - 10, '').attr('font-size': 15, 'font-weight': 800)
@@ -87,6 +88,11 @@ class Morris.Donut
         break
       idx += 1
 
+  # @private
+  click: (idx) =>
+    if typeof idx is 'number' then segment = @segments[idx] else segment = idx
+    @fire 'click', segment.idx, segment.data
+
   # Select the segment at the given index.
   select: (idx) =>
     s.deselect() for s in @segments
@@ -114,7 +120,7 @@ class Morris.Donut
 #
 # @private
 class Morris.DonutSegment extends Morris.EventEmitter
-  constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @data) ->
+  constructor: (@cx, @cy, @inner, @outer, p0, p1, @color, @data, @idx) ->
     @sin_p0 = Math.sin(p0)
     @cos_p0 = Math.cos(p0)
     @sin_p1 = Math.sin(p1)
@@ -152,6 +158,7 @@ class Morris.DonutSegment extends Morris.EventEmitter
     @seg = r.path(@path)
       .attr(fill: @color, stroke: 'white', 'stroke-width': 3)
       .hover(=> @fire('hover', @))
+      .click(=> @fire('click', @))
 
   select: =>
     unless @selected

lib/morris.grid.coffee

@@ -53,6 +53,10 @@ class Morris.Grid extends Morris.EventEmitter
       @fire 'hover', touch.pageX - offset.left, touch.pageY - offset.top
       touch
 
+    @el.bind 'click', (evt) =>
+      offset = @el.offset()
+      @fire 'gridclick', evt.pageX - offset.left, evt.pageY - offset.top
+
     @postInit() if @postInit
 
   # Default options

lib/morris.line.coffee

@@ -14,6 +14,7 @@ class Morris.Line extends Morris.Grid
       @hover = new Morris.Hover(parent: @el)
       @on('hovermove', @onHoverMove)
       @on('hoverout', @onHoverOut)
+      @on('gridclick', @onGridClick)
 
   # Default configuration
   #
@@ -64,6 +65,13 @@ class Morris.Line extends Morris.Grid
       break if x < (r._x + @data[index]._x) / 2
     index
 
+  # click on grid event handler
+  #
+  # @private
+  onGridClick: (x, y) =>
+    index = @hitTest(x, y)
+    @fire 'click', index, @options.data[index], x, y
+
   # hover movement event handler
   #
   # @private

morris.js

@@ -110,6 +110,11 @@
         _this.fire('hover', touch.pageX - offset.left, touch.pageY - offset.top);
         return touch;
       });
+      this.el.bind('click', function(evt) {
+        var offset;
+        offset = _this.el.offset();
+        return _this.fire('gridclick', evt.pageX - offset.left, evt.pageY - offset.top);
+      });
       if (this.postInit) {
         this.postInit();
       }
@@ -543,6 +548,8 @@
       this.onHoverOut = __bind(this.onHoverOut, this);
 
       this.onHoverMove = __bind(this.onHoverMove, this);
+
+      this.onGridClick = __bind(this.onGridClick, this);
       if (!(this instanceof Morris.Line)) {
         return new Morris.Line(options);
       }
@@ -561,7 +568,8 @@
           parent: this.el
         });
         this.on('hovermove', this.onHoverMove);
-        return this.on('hoverout', this.onHoverOut);
+        this.on('hoverout', this.onHoverOut);
+        return this.on('gridclick', this.onGridClick);
       }
     };
 
@@ -634,6 +642,12 @@
       return index;
     };
 
+    Line.prototype.onGridClick = function(x, y) {
+      var index;
+      index = this.hitTest(x, y);
+      return this.fire('click', index, this.options.data[index], x, y);
+    };
+
     Line.prototype.onHoverMove = function(x, y) {
       var index;
       index = this.hitTest(x, y);
@@ -1110,6 +1124,8 @@
       this.onHoverOut = __bind(this.onHoverOut, this);
 
       this.onHoverMove = __bind(this.onHoverMove, this);
+
+      this.onGridClick = __bind(this.onGridClick, this);
       if (!(this instanceof Morris.Bar)) {
         return new Morris.Bar(options);
       }
@@ -1125,7 +1141,8 @@
           parent: this.el
         });
         this.on('hovermove', this.onHoverMove);
-        return this.on('hoverout', this.onHoverOut);
+        this.on('hoverout', this.onHoverOut);
+        return this.on('gridclick', this.onGridClick);
       }
     };
 
@@ -1267,6 +1284,12 @@
       return Math.min(this.data.length - 1, Math.floor((x - this.left) / (this.width / this.data.length)));
     };
 
+    Bar.prototype.onGridClick = function(x, y) {
+      var index;
+      index = this.hitTest(x, y);
+      return this.fire('click', index, this.options.data[index], x, y);
+    };
+
     Bar.prototype.onHoverMove = function(x, y) {
       var index, _ref;
       index = this.hitTest(x, y);
@@ -1300,7 +1323,9 @@
 
   })(Morris.Grid);
 
-  Morris.Donut = (function() {
+  Morris.Donut = (function(_super) {
+
+    __extends(Donut, _super);
 
     Donut.prototype.defaults = {
       colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'],
@@ -1309,6 +1334,8 @@
 
     function Donut(options) {
       this.select = __bind(this.select, this);
+
+      this.click = __bind(this.click, this);
       if (!(this instanceof Morris.Donut)) {
         return new Morris.Donut(options);
       }
@@ -1350,10 +1377,11 @@
       for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
         d = _ref1[_j];
         next = last + min + C * (d.value / total);
-        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], d);
+        seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.options.colors[idx % this.options.colors.length], d, idx);
         seg.render(this.r);
         this.segments.push(seg);
         seg.on('hover', this.select);
+        seg.on('click', this.click);
         last = next;
         idx += 1;
       }
@@ -1388,6 +1416,16 @@
       return _results;
     };
 
+    Donut.prototype.click = function(idx) {
+      var segment;
+      if (typeof idx === 'number') {
+        segment = this.segments[idx];
+      } else {
+        segment = idx;
+      }
+      return this.fire('click', segment.idx, segment.data);
+    };
+
     Donut.prototype.select = function(idx) {
       var s, segment, _i, _len, _ref;
       _ref = this.segments;
@@ -1432,19 +1470,20 @@
 
     return Donut;
 
-  })();
+  })(Morris.EventEmitter);
 
   Morris.DonutSegment = (function(_super) {
 
     __extends(DonutSegment, _super);
 
-    function DonutSegment(cx, cy, inner, outer, p0, p1, color, data) {
+    function DonutSegment(cx, cy, inner, outer, p0, p1, color, data, idx) {
       this.cx = cx;
       this.cy = cy;
       this.inner = inner;
       this.outer = outer;
       this.color = color;
       this.data = data;
+      this.idx = idx;
       this.deselect = __bind(this.deselect, this);
 
       this.select = __bind(this.select, this);
@@ -1489,6 +1528,8 @@
         'stroke-width': 3
       }).hover(function() {
         return _this.fire('hover', _this);
+      }).click(function() {
+        return _this.fire('click', _this);
       });
     };