adding separate handlers to deal with pie visualization instantiating classes in different ways than visualizations with axes

src/kibana/components/vislib/handler_types.js

@@ -0,0 +1,10 @@
+define(function (require) {
+  return function HandlerTypeFactory(Private) {
+    // handler types
+    return {
+      histogram: Private(require('components/vislib/lib/handler/axes_handler')),
+      line: this.histogram,
+      pie: Private(require('components/vislib/lib/handler/pie_handler'))
+    };
+  };
+});

src/kibana/components/vislib/lib/handler/axes_handler.js

@@ -0,0 +1,62 @@
+define(function (require) {
+  return function AxesHandlerClass(d3, Private) {
+    var _ = require('lodash');
+
+    var Handler = Private(require('components/vislib/lib/handler/handler'));
+    var Layout = Private(require('components/vislib/lib/layout'));
+    var Legend = Private(require('components/vislib/lib/legend'));
+    var XAxis = Private(require('components/vislib/lib/x_axis'));
+    var YAxis = Private(require('components/vislib/lib/y_axis'));
+    var AxisTitle = Private(require('components/vislib/lib/axis_title'));
+    var ChartTitle = Private(require('components/vislib/lib/chart_title'));
+
+    _(AxesHandler).inherits(Handler);
+    function AxesHandler(vis) {
+      if (!(this instanceof AxesHandler)) {
+        return new AxesHandler(vis);
+      }
+      AxesHandler.Super.apply(this, arguments);
+
+      var self = this;
+
+      // Visualization constructors
+      this.layout = new Layout(this.el, this.data.injectZeros(), this._attr.type);
+
+      if (this._attr.addLegend) {
+        this.legend = new Legend(this.vis, this.el, this.data.getLabels(), this.data.getColorFunc(), this._attr);
+      }
+
+      this.axisTitle = new AxisTitle(this.el, this.data.get('xAxisLabel'), this.data.get('yAxisLabel'));
+      this.chartTitle = new ChartTitle(this.el);
+
+      this.xAxis = new XAxis({
+        el            : this.el,
+        xValues       : this.data.xValues(),
+        ordered       : this.data.get('ordered'),
+        xAxisFormatter: this.data.get('xAxisFormatter'),
+        _attr         : this._attr
+      });
+
+      this.yAxis = new YAxis({
+        el   : this.el,
+        yMax : this.data.getYMaxValue(),
+        _attr: this._attr
+      });
+
+      // Array of objects to render to the visualization
+      _.forEach(_.filter([
+        this.layout,
+        this.legend,
+        this.axisTitle,
+        this.chartTitle,
+        this.yAxis,
+        this.xAxis
+      ], Boolean), function (_class) {
+        self.renderArray.push(_class);
+      });
+    }
+
+    return AxesHandler;
+  };
+});
+

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

@@ -1,15 +1,9 @@
 define(function (require) {
-  var _ = require('lodash');
-
   return function HandlerBaseClass(d3, Private) {
+    var _ = require('lodash');
+
     var Data = Private(require('components/vislib/lib/data'));
-    var Layout = Private(require('components/vislib/lib/layout'));
-    var Legend = Private(require('components/vislib/lib/legend'));
     var Tooltip = Private(require('components/vislib/lib/tooltip'));
-    var XAxis = Private(require('components/vislib/lib/x_axis'));
-    var YAxis = Private(require('components/vislib/lib/y_axis'));
-    var AxisTitle = Private(require('components/vislib/lib/axis_title'));
-    var ChartTitle = Private(require('components/vislib/lib/chart_title'));
 
     /*
      * Handles building all the components of the visualization
@@ -33,65 +27,13 @@ define(function (require) {
       });
 
       // Visualization constructors
-      var axesVisTypes = this.axesVisTypes = {
-        ColumnChart: 'histogram',
-        LineChart: 'line'
-      };
-
-      // Add the visualization layout
-      if (axesVisTypes[this.ChartClass.name]) {
-        this.layout = new Layout(this.el, this.data.injectZeros(), this._attr.type);
-      } else {
-        this.layout = new Layout(this.el, this.data.root(), this._attr.type);
-      }
-
-      // Only add legend if addLegend attribute set
-      if (this._attr.addLegend) {
-        if (this.ChartClass.name in axesVisTypes) {
-          this.legend = new Legend(this.vis, this.el, this.data.getLabels(), this.data.getColorFunc(), this._attr);
-        } else {
-          this.legend = new Legend(this.vis, this.el, this.data.getLabelsAndXValues(), this.data.getPieColorFunc(), this._attr);
-        }
-      }
-
-      // only add tooltip if addTooltip attribute set
       if (this._attr.addTooltip) {
         this.tooltip = new Tooltip(this.el, this.data.get('tooltipFormatter'));
       }
 
-      // add a x axis
-      if (axesVisTypes[this.ChartClass.name]) {
-        this.xAxis = new XAxis({
-          el: this.el,
-          xValues: this.data.xValues(),
-          ordered: this.data.get('ordered'),
-          xAxisFormatter: this.data.get('xAxisFormatter'),
-          _attr: this._attr
-        });
-
-        // add a y axis
-        this.yAxis = new YAxis({
-          el: this.el,
-          yMax: this.data.getYMaxValue(),
-          _attr: this._attr
-        });
-
-        // add axis titles
-        this.axisTitle = new AxisTitle(this.el, this.data.get('xAxisLabel'), this.data.get('yAxisLabel'));
-      }
-
-      // add chart titles
-      this.chartTitle = new ChartTitle(this.el);
-
       // Array of objects to render to the visualization
       this.renderArray = _.filter([
-        this.layout,
-        this.legend,
-        this.tooltip,
-        this.axisTitle,
-        this.chartTitle,
-        this.yAxis,
-        this.xAxis
+        this.tooltip
       ], Boolean);
     }
 

src/kibana/components/vislib/lib/handler/pie_handler.js

@@ -0,0 +1,40 @@
+define(function (require) {
+  return function PieHandlerClass(d3, Private) {
+    var _ = require('lodash');
+
+    var Handler = Private(require('components/vislib/lib/handler/handler'));
+    var Layout = Private(require('components/vislib/lib/layout'));
+    var Legend = Private(require('components/vislib/lib/legend'));
+    var ChartTitle = Private(require('components/vislib/lib/chart_title'));
+
+    _(PieHandler).inherits(Handler);
+    function PieHandler(vis) {
+      if (!(this instanceof PieHandler)) {
+        return new PieHandler(vis);
+      }
+      PieHandler.Super.apply(this, arguments);
+
+      var self = this;
+
+      // Visualization constructors
+      this.layout = new Layout(this.el, this.data.root(), this._attr.type);
+
+      if (this._attr.addLegend) {
+        this.legend = new Legend(this.vis, this.el, this.data.getLabelsAndXValues(), this.data.getPieColorFunc(), this._attr);
+      }
+
+      this.chartTitle = new ChartTitle(this.el);
+
+      // Array of objects to render to the visualization
+      _.forEach(_.filter([
+        this.layout,
+        this.legend,
+        this.chartTitle
+      ], Boolean), function (_class) {
+        self.renderArray.push(_class);
+      });
+    }
+
+    return PieHandler;
+  };
+});

src/kibana/components/vislib/vis.js

@@ -3,9 +3,9 @@ define(function (require) {
     var $ = require('jquery');
     var _ = require('lodash');
 
-    var Handler = Private(require('components/vislib/lib/handler'));
     var ResizeChecker = Private(require('components/vislib/lib/resize_checker'));
     var Events = Private(require('factories/events'));
+    var handlerTypes = Private(require('components/vislib/handler_types'));
     var chartTypes = Private(require('components/vislib/vis_types'));
     var errors = require('errors');
     require('css!components/vislib/components/styles/main.css');
@@ -37,13 +37,15 @@ define(function (require) {
 
     // Exposed API for rendering charts.
     Vis.prototype.render = function (data) {
+      var chartType = this._attr.type;
+
       if (!data) {
         throw new Error('No valid data!');
       }
 
       // Save data to this object and new up the Handler constructor
       this.data = data;
-      this.handler = new Handler(this);
+      this.handler = new handlerTypes[chartType](this);
 
       try {
         this.handler.render();

test/unit/specs/vislib/handler.js

@@ -92,7 +92,7 @@ define(function (require) {
       inject(function (d3, Private) {
         Vis = Private(require('components/vislib/vis'));
         Data = Private(require('components/vislib/lib/data'));
-        Handler = Private(require('components/vislib/lib/handler'));
+        Handler = Private(require('components/vislib/lib/handler/handler'));
 
         el = d3.select('body').append('div')
           .attr('class', 'visualize');