zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From m...@apache.org
Subject [1/2] zeppelin git commit: [ZEPPELIN-1722] Modernize visualization/transformation using ES6 class and module syntax
Date Wed, 04 Jan 2017 02:37:48 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/master 90decd2a1 -> d60dd6fd7


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
index 60cdadf..267693e 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
@@ -12,318 +12,320 @@
  * limitations under the License.
  */
 
-import zeppelin from '../../zeppelin';
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import ColumnselectorTransformation from '../../tabledata/columnselector';
 
 /**
  * Visualize data in scatter char
  */
-zeppelin.ScatterchartVisualization = function(targetEl, config) {
-  zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);
-  var ColumnselectorTransformation = zeppelin.ColumnselectorTransformation;
-  this.columnselectorProps = [
-    {
-      name: 'xAxis'
-    },
-    {
-      name: 'yAxis'
-    },
-    {
-      name: 'group'
-    },
-    {
-      name: 'size',
-      tooltip: `<li>Size option is valid only when you drop numeric field here.</li>
-                <li>When data in each axis are discrete,
-                'number of values in corresponding coordinate' will be used as size.</li>
-                <li>Zeppelin consider values as discrete when the values contain string
value
-                or the number of distinct values are bigger than 5% of total number of values.</li>
-                <li>Size field button turns to grey when the option you chose is not
valid.</li>`
-    }
-  ];
-  this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps);
-};
-
-zeppelin.ScatterchartVisualization.prototype = Object.create(zeppelin.Nvd3ChartVisualization.prototype);
-
-zeppelin.ScatterchartVisualization.prototype.type = function() {
-  return 'scatterChart';
-};
-
-zeppelin.ScatterchartVisualization.prototype.getTransformation = function() {
-  return this.columnselector;
-};
-
-zeppelin.ScatterchartVisualization.prototype.render = function(tableData) {
-  this.tableData = tableData;
-  this.selectDefault();
-  var d3Data = this.setScatterChart(tableData, true);
-  this.xLabels = d3Data.xLabels;
-  this.yLabels = d3Data.yLabels;
-
-  zeppelin.Nvd3ChartVisualization.prototype.render.call(this, d3Data);
-};
-
-zeppelin.ScatterchartVisualization.prototype.configureChart = function(chart) {
-  var self = this;
-
-  chart.xAxis.tickFormat(function(d) {return self.xAxisTickFormat(d, self.xLabels);});
-  chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d, self.yLabels);});
-
-  // configure how the tooltip looks.
-  chart.tooltipContent(function(key, x, y, graph, data) {
-    var tooltipContent = '<h3>' + key + '</h3>';
-    if (self.config.size &&
-      self.isValidSizeOption(self.config, self.tableData.rows)) {
-      tooltipContent += '<p>' + data.point.size + '</p>';
-    }
+export default class ScatterchartVisualization extends Nvd3ChartVisualization {
+  constructor(targetEl, config) {
+    super(targetEl, config);
+
+    this.columnselectorProps = [
+      {
+        name: 'xAxis'
+      },
+      {
+        name: 'yAxis'
+      },
+      {
+        name: 'group'
+      },
+      {
+        name: 'size',
+        tooltip: `<li>Size option is valid only when you drop numeric field here.</li>
+                  <li>When data in each axis are discrete,
+                  'number of values in corresponding coordinate' will be used as size.</li>
+                  <li>Zeppelin consider values as discrete when the values contain
string value
+                  or the number of distinct values are bigger than 5% of total number of
values.</li>
+                  <li>Size field button turns to grey when the option you chose is
not valid.</li>`
+      }
+    ];
+    this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps);
+  };
 
-    return tooltipContent;
-  });
+  type() {
+    return 'scatterChart';
+  };
 
-  chart.showDistX(true).showDistY(true);
-  //handle the problem of tooltip not showing when muliple points have same value.
-};
+  getTransformation() {
+    return this.columnselector;
+  };
 
-zeppelin.ScatterchartVisualization.prototype.selectDefault = function() {
-  if (!this.config.xAxis && !this.config.yAxis) {
-    if (this.tableData.columns.length > 1) {
-      this.config.xAxis = this.tableData.columns[0];
-      this.config.yAxis = this.tableData.columns[1];
-    } else if (this.tableData.columns.length === 1) {
-      this.config.xAxis = this.tableData.columns[0];
-    }
-  }
-};
-
-zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, refresh) {
-  var xAxis = this.config.xAxis;
-  var yAxis = this.config.yAxis;
-  var group = this.config.group;
-  var size = this.config.size;
-
-  var xValues = [];
-  var yValues = [];
-  var rows = {};
-  var d3g = [];
-
-  var rowNameIndex = {};
-  var colNameIndex = {};
-  var grpNameIndex = {};
-  var rowIndexValue = {};
-  var colIndexValue = {};
-  var grpIndexValue = {};
-  var rowIdx = 0;
-  var colIdx = 0;
-  var grpIdx = 0;
-  var grpName = '';
-
-  var xValue;
-  var yValue;
-  var row;
-
-  if (!xAxis && !yAxis) {
-    return {
-      d3g: []
-    };
-  }
+  render(tableData) {
+    this.tableData = tableData;
+    this.selectDefault();
+    var d3Data = this.setScatterChart(tableData, true);
+    this.xLabels = d3Data.xLabels;
+    this.yLabels = d3Data.yLabels;
 
-  for (var i = 0; i < data.rows.length; i++) {
-    row = data.rows[i];
-    if (xAxis) {
-      xValue = row[xAxis.index];
-      xValues[i] = xValue;
-    }
-    if (yAxis) {
-      yValue = row[yAxis.index];
-      yValues[i] = yValue;
-    }
-  }
-
-  var isAllDiscrete = ((xAxis && yAxis && this.isDiscrete(xValues) &&
this.isDiscrete(yValues)) ||
-  (!xAxis && this.isDiscrete(yValues)) ||
-  (!yAxis && this.isDiscrete(xValues)));
-
-  if (isAllDiscrete) {
-    rows = this.setDiscreteScatterData(data);
-  } else {
-    rows = data.rows;
-  }
-
-  if (!group && isAllDiscrete) {
-    grpName = 'count';
-  } else if (!group && !size) {
-    if (xAxis && yAxis) {
-      grpName = '(' + xAxis.name + ', ' + yAxis.name + ')';
-    } else if (xAxis && !yAxis) {
-      grpName = xAxis.name;
-    } else if (!xAxis && yAxis) {
-      grpName = yAxis.name;
-    }
-  } else if (!group && size) {
-    grpName = size.name;
-  }
-
-  for (i = 0; i < rows.length; i++) {
-    row = rows[i];
-    if (xAxis) {
-      xValue = row[xAxis.index];
-    }
-    if (yAxis) {
-      yValue = row[yAxis.index];
-    }
-    if (group) {
-      grpName = row[group.index];
-    }
-    var sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1);
-
-    if (grpNameIndex[grpName] === undefined) {
-      grpIndexValue[grpIdx] = grpName;
-      grpNameIndex[grpName] = grpIdx++;
-    }
+    super.render(d3Data);
+  };
 
-    if (xAxis && rowNameIndex[xValue] === undefined) {
-      rowIndexValue[rowIdx] = xValue;
-      rowNameIndex[xValue] = rowIdx++;
-    }
+  configureChart(chart) {
+    var self = this;
 
-    if (yAxis && colNameIndex[yValue] === undefined) {
-      colIndexValue[colIdx] = yValue;
-      colNameIndex[yValue] = colIdx++;
-    }
+    chart.xAxis.tickFormat(function(d) {return self.xAxisTickFormat(d, self.xLabels);});
+    chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d, self.yLabels);});
 
-    if (!d3g[grpNameIndex[grpName]]) {
-      d3g[grpNameIndex[grpName]] = {
-        key: grpName,
-        values: []
-      };
-    }
+    // configure how the tooltip looks.
+    chart.tooltipContent(function(key, x, y, graph, data) {
+      var tooltipContent = '<h3>' + key + '</h3>';
+      if (self.config.size &&
+        self.isValidSizeOption(self.config, self.tableData.rows)) {
+        tooltipContent += '<p>' + data.point.size + '</p>';
+      }
 
-    d3g[grpNameIndex[grpName]].values.push({
-      x: xAxis ? (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) : 0,
-      y: yAxis ? (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) : 0,
-      size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz)
+      return tooltipContent;
     });
-  }
 
-  return {
-    xLabels: rowIndexValue,
-    yLabels: colIndexValue,
-    d3g: d3g
+    chart.showDistX(true).showDistY(true);
+    //handle the problem of tooltip not showing when muliple points have same value.
   };
-};
-zeppelin.ScatterchartVisualization.prototype.setDiscreteScatterData = function(data) {
-  var xAxis = this.config.xAxis;
-  var yAxis = this.config.yAxis;
-  var group = this.config.group;
-
-  var xValue;
-  var yValue;
-  var grp;
-
-  var rows = {};
-
-  for (var i = 0; i < data.rows.length; i++) {
-    var row = data.rows[i];
-    if (xAxis) {
-      xValue = row[xAxis.index];
+
+  selectDefault() {
+    if (!this.config.xAxis && !this.config.yAxis) {
+      if (this.tableData.columns.length > 1) {
+        this.config.xAxis = this.tableData.columns[0];
+        this.config.yAxis = this.tableData.columns[1];
+      } else if (this.tableData.columns.length === 1) {
+        this.config.xAxis = this.tableData.columns[0];
+      }
     }
-    if (yAxis) {
-      yValue = row[yAxis.index];
+  };
+
+  setScatterChart(data, refresh) {
+    var xAxis = this.config.xAxis;
+    var yAxis = this.config.yAxis;
+    var group = this.config.group;
+    var size = this.config.size;
+
+    var xValues = [];
+    var yValues = [];
+    var rows = {};
+    var d3g = [];
+
+    var rowNameIndex = {};
+    var colNameIndex = {};
+    var grpNameIndex = {};
+    var rowIndexValue = {};
+    var colIndexValue = {};
+    var grpIndexValue = {};
+    var rowIdx = 0;
+    var colIdx = 0;
+    var grpIdx = 0;
+    var grpName = '';
+
+    var xValue;
+    var yValue;
+    var row;
+
+    if (!xAxis && !yAxis) {
+      return {
+        d3g: []
+      };
     }
-    if (group) {
-      grp = row[group.index];
+
+    for (var i = 0; i < data.rows.length; i++) {
+      row = data.rows[i];
+      if (xAxis) {
+        xValue = row[xAxis.index];
+        xValues[i] = xValue;
+      }
+      if (yAxis) {
+        yValue = row[yAxis.index];
+        yValues[i] = yValue;
+      }
     }
 
-    var key = xValue + ',' + yValue +  ',' + grp;
+    var isAllDiscrete = ((xAxis && yAxis && this.isDiscrete(xValues) &&
this.isDiscrete(yValues)) ||
+    (!xAxis && this.isDiscrete(yValues)) ||
+    (!yAxis && this.isDiscrete(xValues)));
 
-    if (!rows[key]) {
-      rows[key] = {
-        x: xValue,
-        y: yValue,
-        group: grp,
-        size: 1
-      };
+    if (isAllDiscrete) {
+      rows = this.setDiscreteScatterData(data);
     } else {
-      rows[key].size++;
+      rows = data.rows;
     }
-  }
-
-  // change object into array
-  var newRows = [];
-  for (var r in rows) {
-    var newRow = [];
-    if (xAxis) { newRow[xAxis.index] = rows[r].x; }
-    if (yAxis) { newRow[yAxis.index] = rows[r].y; }
-    if (group) { newRow[group.index] = rows[r].group; }
-    newRow[data.rows[0].length] = rows[r].size;
-    newRows.push(newRow);
-  }
-  return newRows;
-};
-
-zeppelin.ScatterchartVisualization.prototype.isDiscrete = function(field) {
-  var getUnique = function(f) {
-    var uniqObj = {};
-    var uniqArr = [];
-    var j = 0;
-    for (var i = 0; i < f.length; i++) {
-      var item = f[i];
-      if (uniqObj[item] !== 1) {
-        uniqObj[item] = 1;
-        uniqArr[j++] = item;
+
+    if (!group && isAllDiscrete) {
+      grpName = 'count';
+    } else if (!group && !size) {
+      if (xAxis && yAxis) {
+        grpName = '(' + xAxis.name + ', ' + yAxis.name + ')';
+      } else if (xAxis && !yAxis) {
+        grpName = xAxis.name;
+      } else if (!xAxis && yAxis) {
+        grpName = yAxis.name;
       }
+    } else if (!group && size) {
+      grpName = size.name;
     }
-    return uniqArr;
+
+    for (i = 0; i < rows.length; i++) {
+      row = rows[i];
+      if (xAxis) {
+        xValue = row[xAxis.index];
+      }
+      if (yAxis) {
+        yValue = row[yAxis.index];
+      }
+      if (group) {
+        grpName = row[group.index];
+      }
+      var sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1);
+
+      if (grpNameIndex[grpName] === undefined) {
+        grpIndexValue[grpIdx] = grpName;
+        grpNameIndex[grpName] = grpIdx++;
+      }
+
+      if (xAxis && rowNameIndex[xValue] === undefined) {
+        rowIndexValue[rowIdx] = xValue;
+        rowNameIndex[xValue] = rowIdx++;
+      }
+
+      if (yAxis && colNameIndex[yValue] === undefined) {
+        colIndexValue[colIdx] = yValue;
+        colNameIndex[yValue] = colIdx++;
+      }
+
+      if (!d3g[grpNameIndex[grpName]]) {
+        d3g[grpNameIndex[grpName]] = {
+          key: grpName,
+          values: []
+        };
+      }
+
+      d3g[grpNameIndex[grpName]].values.push({
+        x: xAxis ? (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) : 0,
+        y: yAxis ? (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) : 0,
+        size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz)
+      });
+    }
+
+    return {
+      xLabels: rowIndexValue,
+      yLabels: colIndexValue,
+      d3g: d3g
+    };
   };
 
-  for (var i = 0; i < field.length; i++) {
-    if (isNaN(parseFloat(field[i])) &&
-      (typeof field[i] === 'string' || field[i] instanceof String)) {
-      return true;
+  setDiscreteScatterData(data) {
+    var xAxis = this.config.xAxis;
+    var yAxis = this.config.yAxis;
+    var group = this.config.group;
+
+    var xValue;
+    var yValue;
+    var grp;
+
+    var rows = {};
+
+    for (var i = 0; i < data.rows.length; i++) {
+      var row = data.rows[i];
+      if (xAxis) {
+        xValue = row[xAxis.index];
+      }
+      if (yAxis) {
+        yValue = row[yAxis.index];
+      }
+      if (group) {
+        grp = row[group.index];
+      }
+
+      var key = xValue + ',' + yValue +  ',' + grp;
+
+      if (!rows[key]) {
+        rows[key] = {
+          x: xValue,
+          y: yValue,
+          group: grp,
+          size: 1
+        };
+      } else {
+        rows[key].size++;
+      }
     }
-  }
 
-  var threshold = 0.05;
-  var unique = getUnique(field);
-  if (unique.length / field.length < threshold) {
-    return true;
-  } else {
-    return false;
-  }
-};
-
-zeppelin.ScatterchartVisualization.prototype.isValidSizeOption = function(options) {
-  var xValues = [];
-  var yValues = [];
-  var rows = this.tableData.rows;
-
-  for (var i = 0; i < rows.length; i++) {
-    var row = rows[i];
-    var size = row[options.size.index];
-
-    //check if the field is numeric
-    if (isNaN(parseFloat(size)) || !isFinite(size)) {
-      return false;
+    // change object into array
+    var newRows = [];
+    for (var r in rows) {
+      var newRow = [];
+      if (xAxis) { newRow[xAxis.index] = rows[r].x; }
+      if (yAxis) { newRow[yAxis.index] = rows[r].y; }
+      if (group) { newRow[group.index] = rows[r].group; }
+      newRow[data.rows[0].length] = rows[r].size;
+      newRows.push(newRow);
     }
+    return newRows;
+  };
 
-    if (options.xAxis) {
-      var x = row[options.xAxis.index];
-      xValues[i] = x;
+  isDiscrete(field) {
+    var getUnique = function(f) {
+      var uniqObj = {};
+      var uniqArr = [];
+      var j = 0;
+      for (var i = 0; i < f.length; i++) {
+        var item = f[i];
+        if (uniqObj[item] !== 1) {
+          uniqObj[item] = 1;
+          uniqArr[j++] = item;
+        }
+      }
+      return uniqArr;
+    };
+
+    for (var i = 0; i < field.length; i++) {
+      if (isNaN(parseFloat(field[i])) &&
+        (typeof field[i] === 'string' || field[i] instanceof String)) {
+        return true;
+      }
+    }
+
+    var threshold = 0.05;
+    var unique = getUnique(field);
+    if (unique.length / field.length < threshold) {
+      return true;
+    } else {
+      return false;
     }
-    if (options.yAxis) {
-      var y = row[options.yAxis.index];
-      yValues[i] = y;
+  };
+
+  isValidSizeOption(options) {
+    var xValues = [];
+    var yValues = [];
+    var rows = this.tableData.rows;
+
+    for (var i = 0; i < rows.length; i++) {
+      var row = rows[i];
+      var size = row[options.size.index];
+
+      //check if the field is numeric
+      if (isNaN(parseFloat(size)) || !isFinite(size)) {
+        return false;
+      }
+
+      if (options.xAxis) {
+        var x = row[options.xAxis.index];
+        xValues[i] = x;
+      }
+      if (options.yAxis) {
+        var y = row[options.yAxis.index];
+        yValues[i] = y;
+      }
     }
-  }
 
-  //check if all existing fields are discrete
-  var isAllDiscrete = ((options.xAxis && options.yAxis && this.isDiscrete(xValues)
&& this.isDiscrete(yValues)) ||
-  (!options.xAxis && this.isDiscrete(yValues)) ||
-  (!options.yAxis && this.isDiscrete(xValues)));
+    //check if all existing fields are discrete
+    var isAllDiscrete = ((options.xAxis && options.yAxis && this.isDiscrete(xValues)
&& this.isDiscrete(yValues)) ||
+    (!options.xAxis && this.isDiscrete(yValues)) ||
+    (!options.yAxis && this.isDiscrete(xValues)));
 
-  if (isAllDiscrete) {
-    return false;
-  }
+    if (isAllDiscrete) {
+      return false;
+    }
 
-  return true;
-};
+    return true;
+  };
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/src/app/visualization/builtins/visualization-table.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-table.js b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
index 8b11d7d..440f9f0 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-table.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
@@ -12,54 +12,55 @@
  * limitations under the License.
  */
 
-import zeppelin from '../../zeppelin';
+import Visualization from '../visualization';
+import PassthroughTransformation from '../../tabledata/passthrough';
+import HandsonHelper from '../../handsontable/handsonHelper';
 
 /**
  * Visualize data in table format
  */
-zeppelin.TableVisualization = function(targetEl, config) {
-  zeppelin.Visualization.call(this, targetEl, config);
-  console.log('Init table viz');
-  targetEl.addClass('table');
-  var PassthroughTransformation = zeppelin.PassthroughTransformation;
-  this.passthrough = new PassthroughTransformation(config);
-};
+export default class TableVisualization extends Visualization {
+  constructor(targetEl, config) {
+    super(targetEl, config);
+    console.log('Init table viz');
+    targetEl.addClass('table');
+    this.passthrough = new PassthroughTransformation(config);
+  };
 
-zeppelin.TableVisualization.prototype = Object.create(zeppelin.Visualization.prototype);
+  refresh() {
+    this.hot.render();
+  };
 
-zeppelin.TableVisualization.prototype.refresh = function() {
-  this.hot.render();
-};
+  render(tableData) {
+    var height = this.targetEl.height();
+    var container = this.targetEl.css('height', height).get(0);
+    var resultRows = tableData.rows;
+    var columnNames = _.pluck(tableData.columns, 'name');
 
-zeppelin.TableVisualization.prototype.render = function(tableData) {
-  var height = this.targetEl.height();
-  var container = this.targetEl.css('height', height).get(0);
-  var resultRows = tableData.rows;
-  var columnNames = _.pluck(tableData.columns, 'name');
+    if (this.hot) {
+      this.hot.destroy();
+    }
 
-  if (this.hot) {
-    this.hot.destroy();
-  }
+    if (!this.columns) {
+      this.columns = Array.apply(null, Array(tableData.columns.length)).map(function() {
+        return {type: 'text'};
+      });
+    }
 
-  if (!this.columns) {
-    this.columns = Array.apply(null, Array(tableData.columns.length)).map(function() {
-      return {type: 'text'};
-    });
-  }
+    var handsonHelper = new HandsonHelper();
 
-  var handsonHelper = new zeppelin.HandsonHelper();
+    this.hot = new Handsontable(container, handsonHelper.getHandsonTableConfig(
+      this.columns, columnNames, resultRows));
+    this.hot.validateCells(null);
+  };
 
-  this.hot = new Handsontable(container, handsonHelper.getHandsonTableConfig(
-    this.columns, columnNames, resultRows));
-  this.hot.validateCells(null);
-};
+  destroy() {
+    if (this.hot) {
+      this.hot.destroy();
+    }
+  };
 
-zeppelin.TableVisualization.prototype.destroy = function() {
-  if (this.hot) {
-    this.hot.destroy();
-  }
-};
-
-zeppelin.TableVisualization.prototype.getTransformation = function() {
-  return this.passthrough;
-};
+  getTransformation() {
+    return this.passthrough;
+  };
+}

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/src/app/visualization/visualization.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/visualization.js b/zeppelin-web/src/app/visualization/visualization.js
index adabd40..ec7ce96 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -12,161 +12,160 @@
  * limitations under the License.
  */
 
-import zeppelin from '../zeppelin';
-
 /**
  * Base class for visualization
  */
-zeppelin.Visualization = function(targetEl, config) {
-  this.targetEl = targetEl;
-  this.config = config;
-  this._dirty = false;
-  this._active = false;
-  this._emitter;
-};
-
-/**
- * get transformation
- */
-zeppelin.Visualization.prototype.getTransformation = function() {
-  // override this
-};
-
-/**
- * Method will be invoked when data or configuration changed
- */
-zeppelin.Visualization.prototype.render = function(tableData) {
-  // override this
-};
-
-/**
- * Refresh visualization.
- */
-zeppelin.Visualization.prototype.refresh = function() {
-  // override this
-};
-
-/**
- * Activate. invoked when visualization is selected
- */
-zeppelin.Visualization.prototype.activate = function() {
-  if (!this._active || this._dirty) {
-    this.refresh();
+export default class Visualization {
+  constructor(targetEl, config) {
+    this.targetEl = targetEl;
+    this.config = config;
     this._dirty = false;
-  }
-  this._active = true;
-};
-
-/**
- * Activate. invoked when visualization is de selected
- */
-zeppelin.Visualization.prototype.deactivate = function() {
-  this._active = false;
-};
-
-/**
- * Is active
- */
-zeppelin.Visualization.prototype.isActive = function() {
-  return this._active;
-};
-
-/**
- * When window or paragraph is resized
- */
-zeppelin.Visualization.prototype.resize = function() {
-  if (this.isActive()) {
-    this.refresh();
-  } else {
-    this._dirty = true;
-  }
-};
-
-/**
- * Set new config
- */
-zeppelin.Visualization.prototype.setConfig = function(config) {
-  this.config = config;
-  if (this.isActive()) {
-    this.refresh();
-  } else {
-    this._dirty = true;
-  }
-};
-
-/**
- * Emit config. config will sent to server and saved.
- */
-zeppelin.Visualization.prototype.emitConfig = function(config) {
-  this._emitter(config);
-};
-
-/**
- * method will be invoked when visualization need to be destroyed.
- * Don't need to destroy this.targetEl.
- */
-zeppelin.Visualization.prototype.destroy = function() {
-  // override this
-};
-
-/**
- * return {
- *   template : angular template string or url (url should end with .html),
- *   scope : an object to bind to template scope
- * }
- */
-zeppelin.Visualization.prototype.getSetting = function() {
-  // override this
-};
-
-/**
- * render setting
- */
-zeppelin.Visualization.prototype.renderSetting = function(targetEl) {
-  var setting = this.getSetting();
-  if (!setting) {
-    return;
-  }
-
-  // already readered
-  if (this._scope) {
-    var self = this;
-    this._scope.$apply(function() {
-      for (var k in setting.scope) {
-        self._scope[k] = setting.scope[k];
-      }
-
-      for (var k in self._prevSettingScope) {
-        if (!setting.scope[k]) {
+    this._active = false;
+    this._emitter;
+  };
+
+  /**
+   * get transformation
+   */
+  getTransformation() {
+    // override this
+  };
+
+  /**
+   * Method will be invoked when data or configuration changed
+   */
+  render(tableData) {
+    // override this
+  };
+
+  /**
+   * Refresh visualization.
+   */
+  refresh() {
+    // override this
+  };
+
+  /**
+   * method will be invoked when visualization need to be destroyed.
+   * Don't need to destroy this.targetEl.
+   */
+  destroy() {
+    // override this
+  };
+
+  /**
+   * return {
+   *   template : angular template string or url (url should end with .html),
+   *   scope : an object to bind to template scope
+   * }
+   */
+  getSetting() {
+    // override this
+  };
+
+  /**
+   * Activate. invoked when visualization is selected
+   */
+  activate() {
+    if (!this._active || this._dirty) {
+      this.refresh();
+      this._dirty = false;
+    }
+    this._active = true;
+  };
+
+  /**
+   * Activate. invoked when visualization is de selected
+   */
+  deactivate() {
+    this._active = false;
+  };
+
+  /**
+   * Is active
+   */
+  isActive() {
+    return this._active;
+  };
+
+  /**
+   * When window or paragraph is resized
+   */
+  resize() {
+    if (this.isActive()) {
+      this.refresh();
+    } else {
+      this._dirty = true;
+    }
+  };
+
+  /**
+   * Set new config
+   */
+  setConfig(config) {
+    this.config = config;
+    if (this.isActive()) {
+      this.refresh();
+    } else {
+      this._dirty = true;
+    }
+  };
+
+  /**
+   * Emit config. config will sent to server and saved.
+   */
+  emitConfig(config) {
+    this._emitter(config);
+  };
+
+  /**
+   * render setting
+   */
+  renderSetting(targetEl) {
+    var setting = this.getSetting();
+    if (!setting) {
+      return;
+    }
+
+    // already readered
+    if (this._scope) {
+      var self = this;
+      this._scope.$apply(function() {
+        for (var k in setting.scope) {
           self._scope[k] = setting.scope[k];
         }
-      }
-    });
-    return;
-  } else {
-    this._prevSettingScope = setting.scope;
-  }
-
-  var scope = this._createNewScope();
-  for (var k in setting.scope) {
-    scope[k] = setting.scope[k];
-  }
-  var template = setting.template;
-
-  if (template.split('\n').length === 1 &&
-      template.endsWith('.html')) { // template is url
-    var self = this;
-    this._templateRequest(template).then(function(t) {
-      self._renderSetting(targetEl, t, scope);
-    });
-  } else {
-    this._renderSetting(targetEl, template, scope);
-  }
-};
 
-zeppelin.Visualization.prototype._renderSetting = function(targetEl, template, scope) {
-  this._targetEl = targetEl;
+        for (var k in self._prevSettingScope) {
+          if (!setting.scope[k]) {
+            self._scope[k] = setting.scope[k];
+          }
+        }
+      });
+      return;
+    } else {
+      this._prevSettingScope = setting.scope;
+    }
+
+    var scope = this._createNewScope();
+    for (var k in setting.scope) {
+      scope[k] = setting.scope[k];
+    }
+    var template = setting.template;
+
+    if (template.split('\n').length === 1 &&
+        template.endsWith('.html')) { // template is url
+      this._templateRequest(template).then(t =>
+      _renderSetting(this, targetEl, t, scope)
+      );
+    } else {
+      _renderSetting(this, targetEl, template, scope);
+    }
+  };
+}
+
+function _renderSetting(instance, targetEl, template, scope) {
+  instance._targetEl = targetEl;
   targetEl.html(template);
-  this._compile(targetEl.contents())(scope);
-  this._scope = scope;
+  instance._compile(targetEl.contents())(scope);
+  instance._scope = scope;
 };

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/src/app/zeppelin.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/zeppelin.js b/zeppelin-web/src/app/zeppelin.js
deleted file mode 100644
index 4c69c89..0000000
--- a/zeppelin-web/src/app/zeppelin.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// Used as globally shared variable in
-// `src/app/visualization/**/*js`
-// `src/app/tabledata/*.js`
-// `src/app/notebook/paragraph/result/result.controller.js`
-// see also: ProvidePlugin in webpack.config.js
-
-export default {};

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/test/spec/tabledata/tabledata.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/test/spec/tabledata/tabledata.js b/zeppelin-web/test/spec/tabledata/tabledata.js
index 8f14c45..c465606 100644
--- a/zeppelin-web/test/spec/tabledata/tabledata.js
+++ b/zeppelin-web/test/spec/tabledata/tabledata.js
@@ -12,15 +12,13 @@
  * limitations under the License.
  */
 
-import zeppelin from '../../../src/app/zeppelin.js';
-import '../../../src/app/tabledata/tabledata.js';
+import TableData from '../../../src/app/tabledata/tabledata.js';
 
 describe('TableData build', function() {
   var td;
 
   beforeEach(function() {
-    console.log(zeppelin.TableData);
-    var TableData = zeppelin.TableData;
+    console.log(TableData);
     td = new TableData();
   });
 

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/d60dd6fd/zeppelin-web/webpack.config.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/webpack.config.js b/zeppelin-web/webpack.config.js
index d973122..c18f0fc 100644
--- a/zeppelin-web/webpack.config.js
+++ b/zeppelin-web/webpack.config.js
@@ -195,10 +195,6 @@ module.exports = function makeWebpackConfig () {
    * List: http://webpack.github.io/docs/list-of-plugins.html
    */
   config.plugins = [
-    // Enable global variable
-    new webpack.ProvidePlugin({
-      "zeppelin": "zeppelin"
-    })
   ];
 
   // Skip rendering index.html in test mode


Mime
View raw message