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
