converting to ES6 class syntax

airow · Sep 8, 2016 · 161ba75 · 161ba75
1 parent d2aff6c
commit 161ba75
Show file tree

Hide file tree

Showing 25 changed files with 4,418 additions and 4,433 deletions.
diff --git a/src/ui/public/vislib/lib/_error_handler.js b/src/ui/public/vislib/lib/_error_handler.js
@@ -9,25 +9,29 @@ export default function ErrorHandlerFactory() {
    * @class ErrorHandler
    * @constructor
    */
-  function ErrorHandler() {}
+  class ErrorHandler {
+    constructor() {
 
-  /**
-   * Validates the height and width are > 0
-   * min size must be at least 1 px
-   *
-   * @method validateWidthandHeight
-   * @param width {Number} HTMLElement width
-   * @param height {Number} HTMLElement height
-   * @returns {HTMLElement} HTML div with an error message
-   */
-  ErrorHandler.prototype.validateWidthandHeight = function (width, height) {
-    let badWidth = _.isNaN(width) || width <= 0;
-    let badHeight = _.isNaN(height) || height <= 0;
-
-    if (badWidth || badHeight) {
-      throw new errors.ContainerTooSmall();
     }
-  };
+
+    /**
+     * Validates the height and width are > 0
+     * min size must be at least 1 px
+     *
+     * @method validateWidthandHeight
+     * @param width {Number} HTMLElement width
+     * @param height {Number} HTMLElement height
+     * @returns {HTMLElement} HTML div with an error message
+     */
+    validateWidthandHeight(width, height) {
+      let badWidth = _.isNaN(width) || width <= 0;
+      let badHeight = _.isNaN(height) || height <= 0;
+
+      if (badWidth || badHeight) {
+        throw new errors.ContainerTooSmall();
+      }
+    };
+  }
 
   return ErrorHandler;
 };
diff --git a/src/ui/public/vislib/lib/alerts.js b/src/ui/public/vislib/lib/alerts.js
@@ -1,4 +1,3 @@
-import d3 from 'd3';
 import $ from 'jquery';
 import _ from 'lodash';
 import Binder from 'ui/binder';
@@ -11,90 +10,88 @@ export default function AlertsFactory(Private) {
    * @constructor
    * @param el {HTMLElement} Reference to DOM element
    */
-  function Alerts(vis, data, alertDefs) {
-    if (!(this instanceof Alerts)) {
-      return new Alerts(vis, data, alertDefs);
+  class Alerts {
+    constructor(vis, data, alertDefs) {
+      this.vis = vis;
+      this.data = data;
+      this.binder = new Binder();
+      this.alertDefs = alertDefs || [];
+
+      this.binder.jqOn(vis.el, 'mouseenter', '.vis-alerts-tray', function () {
+        let $tray = $(this);
+        hide();
+        $(vis.el).on('mousemove', checkForExit);
+
+        function hide() {
+          $tray.css({
+            'pointer-events': 'none',
+            opacity: 0.3
+          });
+        }
+
+        function show() {
+          $(vis.el).off('mousemove', checkForExit);
+          $tray.css({
+            'pointer-events': 'auto',
+            opacity: 1
+          });
+        }
+
+        function checkForExit(event) {
+          let pos = $tray.offset();
+          if (pos.top > event.clientY || pos.left > event.clientX) return show();
+
+          let bottom = pos.top + $tray.height();
+          if (event.clientY > bottom) return show();
+
+          let right = pos.left + $tray.width();
+          if (event.clientX > right) return show();
+        }
+      });
     }
 
-    this.vis = vis;
-    this.data = data;
-    this.binder = new Binder();
-    this.alertDefs = alertDefs || [];
-
-    this.binder.jqOn(vis.el, 'mouseenter', '.vis-alerts-tray', function () {
-      let $tray = $(this);
-      hide();
-      $(vis.el).on('mousemove', checkForExit);
-
-      function hide() {
-        $tray.css({
-          'pointer-events': 'none',
-          opacity: 0.3
-        });
-      }
-
-      function show() {
-        $(vis.el).off('mousemove', checkForExit);
-        $tray.css({
-          'pointer-events': 'auto',
-          opacity: 1
-        });
-      }
-
-      function checkForExit(event) {
-        let pos = $tray.offset();
-        if (pos.top > event.clientY || pos.left > event.clientX) return show();
-
-        let bottom = pos.top + $tray.height();
-        if (event.clientY > bottom) return show();
-
-        let right = pos.left + $tray.width();
-        if (event.clientX > right) return show();
-      }
-    });
+    /**
+     * Renders chart titles
+     *
+     * @method render
+     * @returns {D3.Selection|D3.Transition.Transition} DOM element with chart titles
+     */
+    render() {
+      let vis = this.vis;
+      let data = this.data;
+
+      let alerts = _(this.alertDefs)
+        .map(function (alertDef) {
+          if (!alertDef) return;
+          if (alertDef.test && !alertDef.test(vis, data)) return;
+
+          let type = alertDef.type || 'info';
+          let icon = alertDef.icon || type;
+          let msg = alertDef.msg;
+
+          // alert container
+          let $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
+          let $text = $('<p>').addClass('vis-alerts-text').text(msg);
+
+          return $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text]);
+        })
+        .compact();
+
+      if (!alerts.size()) return;
+
+      $(vis.el).find('.vis-alerts').append(
+        $('<div>').addClass('vis-alerts-tray').append(alerts.value())
+      );
+    };
+
+    /**
+     * Tear down the Alerts
+     * @return {undefined}
+     */
+    destroy() {
+      this.binder.destroy();
+    };
   }
 
-  /**
-   * Renders chart titles
-   *
-   * @method render
-   * @returns {D3.Selection|D3.Transition.Transition} DOM element with chart titles
-   */
-  Alerts.prototype.render = function () {
-    let vis = this.vis;
-    let data = this.data;
-
-    let alerts = _(this.alertDefs)
-    .map(function (alertDef) {
-      if (!alertDef) return;
-      if (alertDef.test && !alertDef.test(vis, data)) return;
-
-      let type = alertDef.type || 'info';
-      let icon = alertDef.icon || type;
-      let msg = alertDef.msg;
-
-      // alert container
-      let $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
-      let $text = $('<p>').addClass('vis-alerts-text').text(msg);
-
-      return $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text]);
-    })
-    .compact();
-
-    if (!alerts.size()) return;
-
-    $(vis.el).find('.vis-alerts').append(
-      $('<div>').addClass('vis-alerts-tray').append(alerts.value())
-    );
-  };
-
-  /**
-   * Tear down the Alerts
-   * @return {undefined}
-   */
-  Alerts.prototype.destroy = function () {
-    this.binder.destroy();
-  };
-
   return Alerts;
 };
diff --git a/src/ui/public/vislib/lib/axis_title.js b/src/ui/public/vislib/lib/axis_title.js
@@ -15,62 +15,60 @@ export default function AxisTitleFactory(Private) {
    * @param xTitle {String} X-axis title
    * @param yTitle {String} Y-axis title
    */
-  _.class(AxisTitle).inherits(ErrorHandler);
-  function AxisTitle(el, xTitle, yTitle) {
-    if (!(this instanceof AxisTitle)) {
-      return new AxisTitle(el, xTitle, yTitle);
+  class AxisTitle extends ErrorHandler {
+    constructor(el, xTitle, yTitle) {
+      super();
+      this.el = el;
+      this.xTitle = xTitle;
+      this.yTitle = yTitle;
     }
 
-    this.el = el;
-    this.xTitle = xTitle;
-    this.yTitle = yTitle;
-  }
-
-  /**
-   * Renders both x and y axis titles
-   *
-   * @method render
-   * @returns {HTMLElement} DOM Element with axis titles
-   */
-  AxisTitle.prototype.render = function () {
-    d3.select(this.el).select('.x-axis-title').call(this.draw(this.xTitle));
-    d3.select(this.el).select('.y-axis-title').call(this.draw(this.yTitle));
-  };
+    /**
+     * Renders both x and y axis titles
+     *
+     * @method render
+     * @returns {HTMLElement} DOM Element with axis titles
+     */
+    render() {
+      d3.select(this.el).select('.x-axis-title').call(this.draw(this.xTitle));
+      d3.select(this.el).select('.y-axis-title').call(this.draw(this.yTitle));
+    };
 
-  /**
-   * Appends an SVG with title text
-   *
-   * @method draw
-   * @param title {String} Axis title
-   * @returns {Function} Appends axis title to a D3 selection
-   */
-  AxisTitle.prototype.draw = function (title) {
-    let self = this;
+    /**
+     * Appends an SVG with title text
+     *
+     * @method draw
+     * @param title {String} Axis title
+     * @returns {Function} Appends axis title to a D3 selection
+     */
+    draw(title) {
+      let self = this;
 
-    return function (selection) {
-      selection.each(function () {
-        let el = this;
-        let div = d3.select(el);
-        let width = $(el).width();
-        let height = $(el).height();
+      return function (selection) {
+        selection.each(function () {
+          let el = this;
+          let div = d3.select(el);
+          let width = $(el).width();
+          let height = $(el).height();
 
-        self.validateWidthandHeight(width, height);
+          self.validateWidthandHeight(width, height);
 
-        div.append('svg')
-        .attr('width', width)
-        .attr('height', height)
-        .append('text')
-        .attr('transform', function () {
-          if (div.attr('class') === 'x-axis-title') {
-            return 'translate(' + width / 2 + ',11)';
-          }
-          return 'translate(11,' + height / 2 + ')rotate(270)';
-        })
-        .attr('text-anchor', 'middle')
-        .text(title);
-      });
+          div.append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .append('text')
+            .attr('transform', function () {
+              if (div.attr('class') === 'x-axis-title') {
+                return 'translate(' + width / 2 + ',11)';
+              }
+              return 'translate(11,' + height / 2 + ')rotate(270)';
+            })
+            .attr('text-anchor', 'middle')
+            .text(title);
+        });
+      };
     };
-  };
+  }
 
   return AxisTitle;
 };