restructured the less and css files into separate files which are imported into a main file, removed event code from visualizations and moved them into the Dispatch class to reduce code redundancy, fixed issues with legend not toggling

src/kibana/components/vislib/lib/dispatch.js

@@ -31,6 +31,7 @@ define(function (require) {
      */
     Dispatch.prototype.eventResponse = function (d, i) {
       var data = d3.event.target.nearestViewportElement.__data__;
+      var label = d.label ? d.label : d.name;
       var isSeries = !!(data.series);
       var isSlices = !!(data.slices);
       var series = isSeries ? data.series : undefined;
@@ -55,8 +56,8 @@ define(function (require) {
       return {
         value: d.y,
         point: d,
-        label: d.label,
-        color: color(d.label),
+        label: label,
+        color: color(label),
         pointIndex: i,
         series: series,
         slices: slices,
@@ -80,31 +81,96 @@ define(function (require) {
         selection.each(function () {
           var element = d3.select(this);
 
-          element.on(event, callback);
+          if (typeof callback === 'function') {
+            return element.on(event, callback);
+          }
         });
       };
     };
 
     /**
-     * Mouse over Behavior
      *
-     * @method mouseOverBar
-     * @returns {D3.Selection} this object with '.hover' class true
+     * @method addHoverEvent
+     * @returns {Function}
      */
-    Dispatch.prototype.onMouseOver = function () {
-      return d3.select(this).classed('hover', true)
-        .style('stroke', '#333')
-        .style('cursor', 'pointer');
+    Dispatch.prototype.addHoverEvent = function () {
+      var self = this;
+      var isClickable = (this.dispatch.on('click'));
+      var addEvent = this.addEvent;
+
+      function hover(d, i) {
+        d3.event.stopPropagation();
+
+        // Add pointer if item is clickable
+        if (isClickable) {
+          self.addMousePointer.call(this, arguments);
+        }
+
+        self.dispatch.hover.call(this, self.eventResponse(d, i));
+      }
+
+      return addEvent('mouseover', hover);
     };
 
     /**
-     * Mouse out Behavior
      *
-     * @method mouseOutBar
-     * @returns {D3.Selection} this object with '.hover' class false
+     * @method addClickEvent
+     * @returns {Function}
      */
-    Dispatch.prototype.onMouseOut = function () {
-      return d3.select(this).classed('hover', false).style('stroke', null);
+    Dispatch.prototype.addClickEvent = function () {
+      var self = this;
+      var addEvent = this.addEvent;
+
+      function click(d, i) {
+        d3.event.stopPropagation();
+        self.dispatch.click.call(this, self.eventResponse(d, i));
+      }
+
+      return addEvent('click', click);
+    };
+
+    /**
+     *
+     * @param svg
+     * @returns {Function}
+     */
+    Dispatch.prototype.addBrushEvent = function (svg) {
+      var dispatch = this.dispatch;
+      var xScale = this.handler.xAxis.xScale;
+      var isBrushable = (dispatch.on('brush'));
+      var brush = this.createBrush(xScale, svg);
+      var addEvent = this.addEvent;
+
+      function brushEnd() {
+        var bar = d3.select(this);
+        var startX = d3.mouse(svg.node());
+        var 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);
+      }
+
+      if (isBrushable) {
+        return addEvent('mousedown', brushEnd);
+      }
+    };
+
+
+    /**
+     * Mouse over Behavior
+     *
+     * @method addMousePointer
+     * @returns {D3.Selection}
+     */
+    Dispatch.prototype.addMousePointer = function () {
+      return d3.select(this).style('cursor', 'pointer');
     };
 
     /**
@@ -114,7 +180,7 @@ define(function (require) {
      * @param svg {HTMLElement} Reference to SVG
      * @returns {*} Returns a D3 brush function and a SVG with a brush group attached
      */
-    Dispatch.prototype.addBrush = function (xScale, svg) {
+    Dispatch.prototype.createBrush = function (xScale, svg) {
       var dispatch = this.dispatch;
       var attr = this.handler._attr;
       var height = attr.height;

src/kibana/components/vislib/lib/legend.js

@@ -105,26 +105,25 @@ define(function (require) {
       var visEl = d3.select(this.el);
       var legendDiv = visEl.select('.' + this._attr.legendClass);
       var items = this.labels;
-      var headerIcon = visEl.select('.legend-toggle');
+      var headerIcon = '.legend-toggle';
       var self = this;
 
       this.header(legendDiv, this);
       this.list(legendDiv, items, this);
 
       // toggle
-      headerIcon
+      visEl.select(headerIcon)
       .on('click', function legendClick() {
         if (self._attr.isOpen) {
           // close legend
-          visEl.select('ul.legend-ul')
-            .classed('hidden', true);
+          visEl.select('ul.legend-ul').classed('hidden', true);
           self._attr.isOpen = false;
+
           // need to add reference to resize function on toggle
           self.vis.resize();
         } else {
           // open legend
-          visEl.select('ul.legend-ul')
-            .classed('hidden', false);
+          visEl.select('ul.legend-ul').classed('hidden', false);
           self._attr.isOpen = true;
 
           // need to add reference to resize function on toggle
@@ -146,7 +145,7 @@ define(function (require) {
          * The default opacity of elements in charts may be modified by the
          * chart constructor, and so may differ from that of the legend
          */
-        visEl.select('.chart')
+        visEl.selectAll('.chart')
         .selectAll('.color')
         .style('opacity', self._attr.defaultOpacity);
 

src/kibana/components/vislib/styles/_error.less

@@ -0,0 +1,12 @@
+@import (reference) "lesshat.less";
+
+.error {
+  .flex(1 1 100%);
+  text-align: center;
+
+  p {
+    margin-top: 15%;
+    font-size: 18px;
+    text-wrap: wrap;
+  }
+}

src/kibana/components/vislib/styles/_layout.less

@@ -0,0 +1,144 @@
+@import (reference) "lesshat.less";
+
+.visualize-chart {
+  .display(flex);
+  .flex(1 1 100%);
+}
+
+.vis-wrapper {
+  .display(flex);
+  .flex(1 1 100%);
+  .flex-direction(row);
+  margin: 10px 0 0 6px;
+}
+
+/* YAxis logic */
+.y-axis-col-wrapper {
+  .display(flex);
+  .flex-direction(column);
+}
+
+.y-axis-col {
+  .display(flex);
+  .flex-direction(row);
+  .flex(1 0 50px);
+}
+
+.y-axis-spacer-block {
+  min-height: 45px;
+}
+
+.y-axis-div-wrapper {
+  .display(flex);
+  .flex-direction(column);
+  width: 38px;
+  min-height: 20px;
+}
+
+.y-axis-div {
+  .flex(1 1 25px);
+  min-width: 14px;
+  min-height: 14px;
+}
+
+.y-axis-title {
+  min-height: 14px;
+  min-width: 14px;
+}
+
+.y-axis-chart-title {
+  .display(flex);
+  .flex-direction(column);
+  min-height: 14px;
+  width: 14px;
+}
+
+.y-axis-title text {
+  font-size: 11px;
+}
+
+.chart-title {
+  .flex(1 1 100%);
+  min-height: 14px;
+  min-width: 14px;
+}
+
+.chart-title text {
+  font-size: 11px;
+  fill: #848e96;
+}
+
+.vis-col-wrapper {
+  .display(flex);
+  .flex(1 0 20px);
+  .flex-direction(column);
+}
+
+.chart-wrapper {
+  .display(flex);
+  .flex(1 0 20px);
+  overflow: visible;
+  margin: 0 5px 0 0;
+}
+
+.chart-wrapper-column {
+  .display(flex);
+  .flex(1 0 20px);
+  .flex-direction(row);
+}
+
+.chart-wrapper-row {
+  .display(flex);
+  .flex-direction(column);
+  .flex(1 0 100%);
+}
+
+.chart {
+  .flex(1 1 100%);
+  overflow: visible;
+}
+
+.chart-row {
+  .flex(1 1);
+}
+
+.chart-column {
+  .flex(1 1);
+}
+
+.x-axis-wrapper {
+  .display(flex);
+  .flex-direction(column);
+  min-height: 45px;
+  overflow: visible;
+}
+
+.x-axis-div-wrapper {
+  .display(flex);
+  .flex-direction(row);
+  min-height: 15px;
+}
+
+.x-axis-chart-title {
+  .display(flex);
+  .flex-direction(row);
+  min-height: 15px;
+  max-height: 15px;
+  min-width: 20px;
+}
+
+.x-axis-title {
+  min-height: 15px;
+  max-height: 15px;
+  min-width: 20px;
+}
+
+.x-axis-title text {
+  font-size: 11px;
+}
+
+.x-axis-div {
+  margin-top: -5px;
+  min-height: 20px;
+  min-width: 20px;
+}

src/kibana/components/vislib/styles/_legend.less

@@ -0,0 +1,59 @@
+@import (reference) "lesshat.less";
+
+.legend-col-wrapper {
+  .flex(0 1 auto);
+  z-index: 10;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 40px;
+
+  .header {
+    width: 100%;
+    height: 26px;
+    margin: 0 0 14px 0;
+    visibility: visible;
+  }
+
+  .legend-ul {
+    list-style-type: none;
+    margin: 0 0 0 14px;
+    padding: 0;
+    visibility: visible;
+    .display(flex);
+    .flex-direction(column);
+
+    li.color {
+      min-height: 22px;
+      margin: 0 18px 0 18px;
+      padding: 3px 0 3px 0;
+      text-align: left;
+      font-size: 12px;
+      line-height: 13px;
+      color: #666;
+      cursor: default;
+      text-align: left;
+      .flex-grow(2);
+      word-wrap: break-word;
+      max-width: 150px;
+
+      .dots {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        float: left;
+        margin: 1px 0 0 -14px;
+      }
+    }
+  }
+
+  .legend-ul.hidden {
+    visibility: hidden;
+  }
+
+  .legend-toggle {
+    position: relative;
+    float: right;
+    right: 9px;
+    top: 9px;
+  }
+}

src/kibana/components/vislib/styles/_svg.less

@@ -0,0 +1,63 @@
+/* Axis Styles */
+.axis {
+  shape-rendering: crispEdges;
+  stroke-width: 1px;
+
+  line, path {
+    stroke: #ddd;
+    fill: none;
+    shape-rendering: crispEdges;
+  }
+}
+
+.x.axis path {
+  display: none;
+}
+
+.tick text {
+  font-size: 7pt;
+  fill: #848e96;
+}
+
+/* Brush Styling */
+.brush .extent {
+  stroke: #fff;
+  fill-opacity: .125;
+  shape-rendering: crispEdges;
+}
+
+/* SVG Element Default Styling */
+rect {
+  stroke: none;
+  opacity: 1;
+
+  &:hover {
+    stroke: #333;
+  }
+}
+
+circle {
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+    stroke: #333;
+  }
+}
+
+path {
+  &:hover {
+    opacity: 1;
+  }
+}
+
+/* Visualization Styling */
+.line {
+  circle {
+    opacity: 1;
+  }
+
+  &:hover {
+    stroke: #333;
+  }
+}

src/kibana/components/vislib/styles/_tooltip.less

@@ -0,0 +1,36 @@
+@import (reference) "../../../styles/main";
+
+.vis-tooltip {
+  visibility: hidden;
+  line-height: 1.1;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 8px;
+  background: rgba(70, 82, 93, 0.95);
+  color: @gray-lighter;
+  border-radius: 4px;
+  position: fixed;
+  z-index: 120;
+  word-wrap: break-word;
+  max-width: 40%;
+
+  table {
+    td,th {
+      padding: 2px 4px;
+    }
+
+    // if there is a header, give it a border that matches
+    // those in the body
+    thead tr {
+      border-bottom: 1px solid @gray;
+    }
+
+    // only apply to tr in the body, not the header
+    tbody tr {
+      border-top: 1px solid @gray;
+      &:first-child {
+        border-top: none;
+      }
+    }
+  }
+}

src/kibana/components/vislib/styles/main.less

@@ -1,410 +1,5 @@
-@import (reference) "../../../styles/main.less";
-@import (reference) "lesshat.less";
-
-/* vislib styles */
-.arc path {
-  stroke: #fff;
-}
-
-div.columns {
-  .display(flex);
-  .flex-direction(row);
-  .flex(1 1 100%);
-  margin: 0;
-  padding: 0;
-}
-
-div.rows {
-  .display(flex);
-  .flex-direction(column);
-  .flex(1 1 100%);
-  margin: 0;
-  padding: 0;
-}
-
-.row-labels, .column-labels {
-  margin: 0;
-  padding: 10;
-}
-
-visualize {
-  margin:0;
-  padding:0;
-}
-
-.visualize-chart {
-  .display(flex);
-  .flex(1 1 100%);
-}
-
-.visualize-wrapper {
-  .display(flex);
-  .flex-direction(row);
-}
-
-.y-axis-wrapper {
-  .display(flex);
-  .flex(1 1);
-  .flex-direction(column);
-}
-
-.y-axis-filler-div {
-  .flex(1 1);
-}
-
-div.x-axis-label {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  bottom: 15px;
-  font-size: 7pt;
-  color: #848e96;
-}
-
-div.y-axis-label {
-  position: absolute;
-  left: -25px;
-  top: 42.5%;
-  font-size: 7pt;
-  color: #848e96;
-  -webkit-transform: rotate(270deg);
-  -moz-transform: rotate(270deg);
-  -o-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-
-/*  legend  */
-.legend-col-wrapper {
-  .flex(0 1 auto);
-  z-index: 10;
-  overflow-x: hidden;
-  overflow-y: auto;
-  min-width: 40px;
-}
-
-.header {
-  width: 100%;
-  height: 26px;
-  margin: 0 0 14px 0;
-}
-
-.legend {
-  width: 100%;
-  height: 26px;
-  margin: 0 0 14px 0;
-}
-
-.legend-ul {
-  list-style-type: none;
-  margin: 0 0 0 14px;
-  padding: 0;
-  visibility: visible;
-  .display(flex);
-  .flex-direction(column);
-}
-
-.legend-ul.hidden {
-  visibility: hidden;
-}
-
-li.color {
-  min-height: 22px;
-  margin: 0 18px 0 18px;
-  padding: 3px 0 3px 0;
-  text-align: left;
-  font-size: 12px;
-  line-height: 13px;
-  color: #666;
-  cursor: default;
-  text-align: left;
-  .flex-grow(2);
-  word-wrap: break-word;
-  max-width: 150px;
-}
-.wordwrap {
-  word-wrap: break-word;
-  max-width: 150px;
-}
-
-.dots {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  float: left;
-  margin: 1px 0 0 -14px;
-}
-
-.legend-toggle {
-  position: relative;
-  float: right;
-  right: 9px;
-  top: 9px;
-}
-
-.column-labels {
-  color: #777;
-  font-size: 10pt;
-  font-weight: normal;
-  display: block;
-  margin: 0;
-  padding: 0;
-  padding-left: 1.0em;
-  line-height: 2.0em;
-}
-
-/*  histogram axis and label styles  */
-.vis-canvas {
-}
-
-.chart-bkgd {
-  fill: #ffffff;
-}
-
-p.rows-label, p.columns-label {
-  display: block;
-  background: #eff3f4;
-  padding: 0;
-  margin: 0;
-  font-size: 9pt;
-  fill: #46525d;
-  text-align: center;
-  line-height: 1.9em;
-}
-
-.charts-label {
-  font-size: 8pt;
-  fill: #848e96;
-}
-
-.x-axis-label, .y-axis-label {
-  font-size: 7pt;
-  fill: #848e96;
-}
-
-.tick text {
-  font-size: 7pt;
-  fill: #848e96;
-}
-
-.axis {
-  shape-rendering: crispEdges;
-  stroke-width: 1px;
-}
-
-.axis line, .axis path {
-  stroke: #ddd;
-  fill: none;
-  shape-rendering: crispEdges;
-}
-
-.legend-box {
-  fill: #ffffff;
-}
-
-.brush .extent {
-  stroke: #fff;
-  fill-opacity: .125;
-  shape-rendering: crispEdges;
-}
-
-.layer .rect:hover {
-  stroke: 3px;
-}
-
-.vis-tooltip {
-  visibility: hidden;
-  line-height: 1.1;
-  font-size: 12px;
-  font-weight: normal;
-  padding: 8px;
-  background: rgba(70, 82, 93, 0.95);
-  color: @gray-lighter;
-  border-radius: 4px;
-  position: fixed;
-  z-index: 120;
-  word-wrap: break-word;
-  max-width: 40%;
-
-  table {
-    td,th {
-      padding: 2px 4px;
-    }
-
-    // if there is a header, give it a border that matches
-    // those in the body
-    thead tr {
-      border-bottom: 1px solid @gray;
-    }
-
-    // only apply to tr in the body, not the header
-    tbody tr {
-      border-top: 1px solid @gray;
-      &:first-child {
-        border-top: none;
-      }
-    }
-  }
-}
-
-.rect {
-  stroke: transparent;
-  stroke-width: 2;
-}
-.rect.hover {
-  stroke: #333;
-}
-
-/* Flex Box Layout */
-.vis-wrapper {
-  .display(flex);
-  .flex(1 1 100%);
-  .flex-direction(row);
-  margin: 10px 0 0 6px;
-}
-
-.error {
-  .flex(1 1 100%);
-  text-align: center;
-
-  p {
-    margin-top: 15%;
-    font-size: 18px;
-    text-wrap: wrap;
-  }
-}
-
-/* YAxis logic */
-.y-axis-col-wrapper {
-  .display(flex);
-  .flex-direction(column);
-}
-
-.y-axis-col {
-  .display(flex);
-  .flex-direction(row);
-  .flex(1 0 50px);
-}
-
-.y-axis-spacer-block {
-  min-height: 45px;
-}
-
-.y-axis-div-wrapper {
-  .display(flex);
-  .flex-direction(column);
-  width: 38px;
-  min-height: 20px;
-}
-
-.y-axis-div {
-  .flex(1 1 25px);
-  min-width: 14px;
-  min-height: 14px;
-}
-
-.y-axis-title {
-  min-height: 14px;
-  min-width: 14px;
-}
-
-.y-axis-chart-title {
-  .display(flex);
-  .flex-direction(column);
-  min-height: 14px;
-  width: 14px;
-}
-
-.y-axis-title text {
-  font-size: 11px;
-}
-
-.chart-title {
-  .flex(1 1 100%);
-  min-height: 14px;
-  min-width: 14px;
-}
-
-.chart-title text {
-  font-size: 11px;
-  fill: #848e96;
-}
-
-.vis-col-wrapper {
-  .display(flex);
-  .flex(1 0 20px);
-  .flex-direction(column);
-}
-
-.chart-wrapper {
-  .display(flex);
-  .flex(1 0 20px);
-  overflow: visible;
-  margin: 0 5px 0 0;
-}
-
-.chart-wrapper-column {
-  .display(flex);
-  .flex(1 0 20px);
-  .flex-direction(row);
-}
-
-.chart-wrapper-row {
-  .display(flex);
-  .flex-direction(column);
-  .flex(1 0 100%);
-}
-
-.chart {
-  .flex(1 1 100%);
-  overflow: visible;
-}
-
-.chart-row {
-  .flex(1 1);
-}
-
-.chart-column {
-  .flex(1 1);
-}
-
-.x-axis-wrapper {
-  .display(flex);
-  .flex-direction(column);
-  min-height: 45px;
-  overflow: visible;
-}
-
-.x-axis-div-wrapper {
-  .display(flex);
-  .flex-direction(row);
-  min-height: 15px;
-}
-
-.x-axis-chart-title {
-  .display(flex);
-  .flex-direction(row);
-  min-height: 15px;
-  max-height: 15px;
-  min-width: 20px;
-}
-
-.x-axis-title {
-  min-height: 15px;
-  max-height: 15px;
-  min-width: 20px;
-}
-
-.x-axis-title text {
-  font-size: 11px;
-}
-
-.x-axis-div {
-  margin-top: -5px;
-  min-height: 20px;
-  min-width: 20px;
-}
-
-.x.axis path {
-  display: none;
-}
+@import "_error";
+@import "_layout";
+@import "_legend";
+@import "_svg";
+@import "_tooltip";

src/kibana/components/vislib/vis.js

@@ -84,6 +84,7 @@ define(function (require) {
     /**
      * Destroys the visualization
      * Removes chart and all elements associated with it.
+     * Removes chart and all elements associated with it.
      * Remove event listeners and pass destroy call down to owned objects.
      *
      * @method destroy

src/kibana/components/vislib/visualizations/area_chart.js

@@ -136,38 +136,15 @@ define(function (require) {
      * Adds Events to SVG circles
      *
      * @method addCircleEvents
-     * @param circles {D3.UpdateSelection} SVG circles
-     * @returns {HTMLElement} circles with event listeners attached
+     * @param element {D3.UpdateSelection} SVG circles
+     * @returns {D3.Selection} circles with event listeners attached
      */
-    AreaChart.prototype.addCircleEvents = function (circles) {
+    AreaChart.prototype.addCircleEvents = function (element) {
       var events = this.events;
-      var dispatch = this.events.dispatch;
 
-      circles
-      .on('mouseover.circle', function mouseOverCircle(d, i) {
-        var circle = this;
-
-        d3.select(circle)
-        .classed('hover', true)
-        .style('stroke', '#333')
-        .style('cursor', 'pointer')
-        .style('opacity', 1);
-
-        dispatch.hover(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('click.circle', function clickCircle(d, i) {
-        dispatch.click(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('mouseout.circle', function mouseOutCircle() {
-        var circle = this;
-
-        d3.select(circle)
-        .classed('hover', false)
-        .style('stroke', null)
-        .style('opacity', 0);
-      });
+      return element
+        .call(events.addHoverEvent())
+        .call(events.addClickEvent());
     };
 
     /**
@@ -179,7 +156,6 @@ define(function (require) {
      * @returns {D3.UpdateSelection} SVG with circles added
      */
     AreaChart.prototype.addCircles = function (svg, data) {
-      var self = this;
       var color = this.handler.data.getColorFunc();
       var xScale = this.handler.xAxis.xScale;
       var yScale = this.handler.yAxis.yScale;
@@ -196,7 +172,7 @@ define(function (require) {
       .data(data)
       .enter()
         .append('g')
-        .attr('class', 'points');
+        .attr('class', 'points area');
 
       // Append the bars
       circles = layer
@@ -237,8 +213,7 @@ define(function (require) {
         }
         return yScale(d.y0 + d.y);
       })
-      .attr('r', circleRadius)
-      .style('opacity', 0);
+      .attr('r', circleRadius);
 
       // Add tooltip
       if (isTooltip) {
@@ -328,9 +303,6 @@ define(function (require) {
           // add clipPath to hide circles when they go out of bounds
           self.addClipPath(svg, width, height);
 
-          // addBrush canvas
-          self.events.addBrush(xScale, svg);
-
           // add path
           path = self.addPath(svg, layers);
 

src/kibana/components/vislib/visualizations/column_chart.js

@@ -217,76 +217,27 @@ define(function (require) {
 
     /**
      * Adds Events to SVG rect
+     * Visualization is only brushable when a brush event is added
+     * If a brush event is added, then a function should be returned.
      *
      * @method addBarEvents
-     * @param element {d3.UpdateSelection} target
-     * @param svg {HTMLElement} chart SVG
-     * @returns {HTMLElement} rect with event listeners attached
+     * @param element {D3.UpdateSelection} target
+     * @param svg {D3.UpdateSelection} chart SVG
+     * @returns {D3.Selection} rect with event listeners attached
      */
     ColumnChart.prototype.addBarEvents = function (element, svg) {
-      var addEvent = this.events.addEvent;
-      var mouseOver = addEvent('mouseover.bar', this.mouseOver());
-      var mouseOut = addEvent('mouseout.bar', this.mouseOut());
-      var brush = addEvent('mousedown.bar', this.brush(svg));
-      var click = addEvent('click.bar', this.click());
+      var events = this.events;
+      var isBrushable = (typeof events.addBrushEvent(svg) === 'function');
+      var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
+      var hover = events.addHoverEvent();
+      var click = events.addClickEvent();
+      var attachedEvents = element.call(hover).call(click);
 
-      return element
-      .call(mouseOver)
-      .call(mouseOut)
-      .call(brush)
-      .call(click);
-    };
-
-    ColumnChart.prototype.brush = function (svg) {
-      var dispatch = this.events.dispatch;
-      var xScale = this.handler.xAxis.xScale;
-      var brush = this.events.addBrush(xScale, svg);
-
-      if (dispatch.on('brush')) {
-        return function () {
-          var bar = d3.select(this);
-          var startX = d3.mouse(svg.node());
-          var 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);
-        };
+      if (isBrushable) {
+        attachedEvents.call(brush);
       }
-    };
 
-    ColumnChart.prototype.mouseOver = function () {
-      var self = this;
-
-      return function (d, i) {
-        self.events.onMouseOver.call(this, arguments);
-        self.events.dispatch.hover.call(this, self.events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      };
-    };
-
-    ColumnChart.prototype.mouseOut = function () {
-      var self = this;
-
-      return function () {
-        self.events.onMouseOut.call(this, arguments);
-        d3.event.stopPropagation();
-      };
-    };
-
-    ColumnChart.prototype.click = function () {
-      var self = this;
-
-      return function (d, i) {
-        self.events.dispatch.click.call(this, self.events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      };
+      return attachedEvents;
     };
 
     /**

src/kibana/components/vislib/visualizations/line_chart.js

@@ -36,36 +36,15 @@ define(function (require) {
      * Adds Events to SVG circle
      *
      * @method addCircleEvents
-     * @param circles {D3.UpdateSelection} Reference to SVG circle
-     * @returns {D3.UpdateSelection} SVG circles with event listeners attached
+     * @param element{D3.UpdateSelection} Reference to SVG circle
+     * @returns {D3.Selection} SVG circles with event listeners attached
      */
-    LineChart.prototype.addCircleEvents = function (circles) {
+    LineChart.prototype.addCircleEvents = function (element) {
       var events = this.events;
-      var dispatch = this.events.dispatch;
 
-      circles
-      .on('mouseover.circle', function mouseOverCircle(d, i) {
-        var circle = this;
-
-        d3.select(circle)
-        .classed('hover', true)
-        .style('stroke', '#333')
-        .style('cursor', 'pointer');
-
-        dispatch.hover(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('click.circle', function clickCircle(d, i) {
-        dispatch.click(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('mouseout.circle', function mouseOutCircle() {
-        var circle = this;
-
-        d3.select(circle)
-        .classed('hover', false)
-        .style('stroke', null);
-      });
+      return element
+        .call(events.addHoverEvent())
+        .call(events.addClickEvent());
     };
 
     /**
@@ -93,7 +72,7 @@ define(function (require) {
       .data(data)
       .enter()
         .append('g')
-        .attr('class', 'points');
+        .attr('class', 'points line');
 
       circles = layer
       .selectAll('rect')
@@ -274,12 +253,8 @@ define(function (require) {
           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
           self.addClipPath(svg, width, height);
-
-          self.events.addBrush(xScale, svg);
-
           lines = self.addLines(svg, data.series);
           circles = self.addCircles(svg, layers);
-
           self.addCircleEvents(circles);
 
           var line = svg

src/kibana/components/vislib/visualizations/pie_chart.js

@@ -34,30 +34,15 @@ define(function (require) {
      * Adds Events to SVG paths
      *
      * @method addPathEvents
-     * @param path {D3.Selection} Reference to SVG path
+     * @param element {D3.Selection} Reference to SVG path
      * @returns {D3.Selection} SVG path with event listeners attached
      */
-    PieChart.prototype.addPathEvents = function (path) {
+    PieChart.prototype.addPathEvents = function (element) {
       var events = this.events;
-      var dispatch = this.events.dispatch;
 
-      path
-      .on('mouseover.pie', function mouseOverPie(d, i) {
-        d3.select(this)
-        .classed('hover', true)
-        .style('cursor', 'pointer');
-
-        dispatch.hover(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('click.pie', function clickPie(d, i) {
-        dispatch.click(events.eventResponse(d, i));
-        d3.event.stopPropagation();
-      })
-      .on('mouseout.pie', function mouseOutPie() {
-        d3.select(this)
-        .classed('hover', false);
-      });
+      return element
+        .call(events.addHoverEvent())
+        .call(events.addClickEvent());
     };
 
     /**
@@ -148,7 +133,6 @@ define(function (require) {
      */
     PieChart.prototype.draw = function () {
       var self = this;
-      var isEvents = this._attr.addEvents;
 
       return function (selection) {
         selection.each(function (data) {
@@ -159,6 +143,7 @@ define(function (require) {
           var height = $(el).height();
           var minWidth = 20;
           var minHeight = 20;
+          var path;
 
           if (width <= minWidth || height <= minHeight) {
             throw new errors.ContainerTooSmall();
@@ -170,11 +155,8 @@ define(function (require) {
           .append('g')
           .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
 
-          var path = self.addPath(width, height, svg, slices);
-
-          if (isEvents) {
-            self.addPathEvents(path);
-          }
+          path = self.addPath(width, height, svg, slices);
+          self.addPathEvents(path);
 
           return svg;
         });

tasks/config/less.js

@@ -6,7 +6,6 @@ module.exports = {
       '<%= src %>/kibana/components/*/*.less',
       '<%= src %>/kibana/styles/main.less',
       '<%= src %>/kibana/components/vislib/styles/main.less',
-      '<%= src %>/kibana/components/**/*.less',
       '<%= plugins %>/dashboard/styles/main.less',
       '<%= plugins %>/discover/styles/main.less',
       '<%= plugins %>/settings/styles/main.less',