Merge pull request #402 from stormpython/feature/brush

Fixes Brush Github Issue #363
elastic · Sep 26, 2014 · 1ae0293 · 1ae0293
2 parents 9325928 + 6d7d919
commit 1ae0293
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 22 deletions.
diff --git a/src/kibana/components/vislib/lib/dispatch.js b/src/kibana/components/vislib/lib/dispatch.js
@@ -69,12 +69,14 @@ define(function (require) {
 
       // if `addBrushing` is true, add brush canvas
       if (isBrush) {
-        return svg.append('g')
+        svg.append('g')
           .attr('class', 'brush')
           .call(brush)
           .selectAll('rect')
           .attr('height', height - margin.top - margin.bottom);
       }
+
+      return brush;
     };
 
     return Dispatch;

diff --git a/src/kibana/components/vislib/visualizations/column_chart.js b/src/kibana/components/vislib/visualizations/column_chart.js
@@ -114,28 +114,45 @@ define(function (require) {
       return bars;
     };
 
-    ColumnChart.prototype.addBarEvents = function (bars) {
+    ColumnChart.prototype.addBarEvents = function (svg, bars, brush) {
       var events = this.events;
       var dispatch = this.events._attr.dispatch;
+      var xScale = this.vis.xAxis.xScale;
+      var startXInv;
 
       bars
-        .on('mouseover.bar', function (d, i) {
-          d3.select(this)
-            .classed('hover', true)
-            .style('stroke', '#333')
-            .style('cursor', 'pointer');
-
-          dispatch.hover(events.eventResponse(d, i));
-          d3.event.stopPropagation();
-        })
-        .on('click.bar', function (d, i) {
-          dispatch.click(events.eventResponse(d, i));
-          d3.event.stopPropagation();
-        })
-        .on('mouseout.bar', function () {
-          d3.select(this).classed('hover', false)
-            .style('stroke', null);
-        });
+      .on('mouseover.bar', function (d, i) {
+        d3.select(this)
+          .classed('hover', true)
+          .style('stroke', '#333')
+          .style('cursor', 'pointer');
+
+        dispatch.hover(events.eventResponse(d, i));
+        d3.event.stopPropagation();
+      })
+      .on('mousedown.bar', function () {
+        var bar = d3.select(this);
+        var startX = d3.mouse(svg.node());
+        startXInv = xScale.invert(startX[0]);
+
+        // Reset the brush value
+        brush.extent([startXInv, startXInv]);
+
+        // Magic!
+        // Need to call brush on svg to see brush when brushing
+        // while on top of bars.
+        // Need to call brush on bar to allow the click event to be registered
+        svg.call(brush);
+        bar.call(brush);
+      })
+      .on('click.bar', function (d, i) {
+        dispatch.click(events.eventResponse(d, i));
+        d3.event.stopPropagation();
+      })
+      .on('mouseout.bar', function () {
+        d3.select(this).classed('hover', false)
+          .style('stroke', null);
+      });
     };
 
     ColumnChart.prototype.draw = function () {
@@ -154,6 +171,7 @@ define(function (require) {
       var width;
       var height;
       var layers;
+      var brush;
       var bars;
 
       return function (selection) {
@@ -179,15 +197,15 @@ define(function (require) {
           .append('g')
           .attr('transform', 'translate(0,' + margin.top + ')');
 
-          // addBrush canvas
-          self.events.addBrush(xScale, svg);
+          // addBrush canvas and return brush function
+          brush = self.events.addBrush(xScale, svg);
 
           // add bars
           bars = self.addBars(svg, layers);
 
           // add events to bars
           if (isEvents) {
-            self.addBarEvents(bars);
+            self.addBarEvents(svg, bars, brush);
           }
 
           // chart base line