You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by pr...@apache.org on 2018/02/23 04:54:43 UTC
[03/12] zeppelin git commit: [ZEPPELIN-3245] checkstyle/eslintrc for
zeppelin-web (JavaScript)
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
index 6d47a9e..df161b9 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-linechart.js
@@ -12,39 +12,39 @@
* limitations under the License.
*/
-import Nvd3ChartVisualization from './visualization-nvd3chart'
-import PivotTransformation from '../../tabledata/pivot'
-import moment from 'moment'
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import PivotTransformation from '../../tabledata/pivot';
+import moment from 'moment';
/**
* Visualize data in line chart
*/
export default class LinechartVisualization extends Nvd3ChartVisualization {
- constructor (targetEl, config) {
- super(targetEl, config)
+ constructor(targetEl, config) {
+ super(targetEl, config);
- this.pivot = new PivotTransformation(config)
+ this.pivot = new PivotTransformation(config);
try {
- this.config.rotate = {degree: config.rotate.degree}
+ this.config.rotate = {degree: config.rotate.degree};
} catch (e) {
- this.config.rotate = {degree: '-45'}
+ this.config.rotate = {degree: '-45'};
}
}
- type () {
+ type() {
if (this.config.lineWithFocus) {
- return 'lineWithFocusChart'
+ return 'lineWithFocusChart';
} else {
- return 'lineChart'
+ return 'lineChart';
}
}
- getTransformation () {
- return this.pivot
+ getTransformation() {
+ return this.pivot;
}
- render (pivot) {
+ render(pivot) {
let d3Data = this.d3DataFromPivot(
pivot.schema,
pivot.rows,
@@ -53,113 +53,113 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
pivot.values,
false,
true,
- false)
+ false);
- this.xLabels = d3Data.xLabels
- super.render(d3Data)
- this.config.changeXLabel(this.config.xLabelStatus)
+ this.xLabels = d3Data.xLabels;
+ super.render(d3Data);
+ this.config.changeXLabel(this.config.xLabelStatus);
}
/**
* Set new config
*/
- setConfig (config) {
- super.setConfig(config)
- this.pivot.setConfig(config)
+ setConfig(config) {
+ super.setConfig(config);
+ this.pivot.setConfig(config);
// change mode
if (this.currentMode !== config.lineWithFocus) {
- super.destroy()
- this.currentMode = config.lineWithFocus
+ super.destroy();
+ this.currentMode = config.lineWithFocus;
}
}
- configureChart (chart) {
- let self = this
- let configObj = self.config
+ configureChart(chart) {
+ let self = this;
+ let configObj = self.config;
- chart.xAxis.tickFormat(function (d) {
+ chart.xAxis.tickFormat(function(d) {
if (self.config.isDateFormat) {
if (self.config.dateFormat) {
- return moment(new Date(self.xAxisTickFormat(d, self.xLabels))).format(self.config.dateFormat)
+ return moment(new Date(self.xAxisTickFormat(d, self.xLabels))).format(self.config.dateFormat);
} else {
- return moment(new Date(self.xAxisTickFormat(d, self.xLabels))).format('YYYY-MM-DD HH:mm:ss')
+ return moment(new Date(self.xAxisTickFormat(d, self.xLabels))).format('YYYY-MM-DD HH:mm:ss');
}
}
- return self.xAxisTickFormat(d, self.xLabels)
- })
- chart.yAxis.tickFormat(function (d) {
+ return self.xAxisTickFormat(d, self.xLabels);
+ });
+ chart.yAxis.tickFormat(function(d) {
if (d === undefined) {
- return 'N/A'
+ return 'N/A';
}
- return self.yAxisTickFormat(d, self.xLabels)
- })
- chart.yAxis.axisLabelDistance(50)
+ return self.yAxisTickFormat(d, self.xLabels);
+ });
+ chart.yAxis.axisLabelDistance(50);
if (chart.useInteractiveGuideline) { // lineWithFocusChart hasn't got useInteractiveGuideline
- chart.useInteractiveGuideline(true) // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691)
+ chart.useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691)
}
if (this.config.forceY) {
- chart.forceY([0]) // force y-axis minimum to 0 for line chart.
+ chart.forceY([0]); // force y-axis minimum to 0 for line chart.
} else {
- chart.forceY([])
+ chart.forceY([]);
}
self.config.changeXLabel = function(type) {
switch (type) {
case 'default':
- self.chart._options['showXAxis'] = true
- self.chart._options['margin'] = {bottom: 50}
- self.chart.xAxis.rotateLabels(0)
- configObj.xLabelStatus = 'default'
- break
+ self.chart._options['showXAxis'] = true;
+ self.chart._options['margin'] = {bottom: 50};
+ self.chart.xAxis.rotateLabels(0);
+ configObj.xLabelStatus = 'default';
+ break;
case 'rotate':
- self.chart._options['showXAxis'] = true
- self.chart._options['margin'] = {bottom: 140}
- self.chart.xAxis.rotateLabels(configObj.rotate.degree)
- configObj.xLabelStatus = 'rotate'
- break
+ self.chart._options['showXAxis'] = true;
+ self.chart._options['margin'] = {bottom: 140};
+ self.chart.xAxis.rotateLabels(configObj.rotate.degree);
+ configObj.xLabelStatus = 'rotate';
+ break;
case 'hide':
- self.chart._options['showXAxis'] = false
- self.chart._options['margin'] = {bottom: 50}
- d3.select('#' + self.targetEl[0].id + '> svg').select('g.nv-axis.nv-x').selectAll('*').remove()
- configObj.xLabelStatus = 'hide'
- break
+ self.chart._options['showXAxis'] = false;
+ self.chart._options['margin'] = {bottom: 50};
+ d3.select('#' + self.targetEl[0].id + '> svg').select('g.nv-axis.nv-x').selectAll('*').remove();
+ configObj.xLabelStatus = 'hide';
+ break;
}
- self.emitConfig(configObj)
- }
+ self.emitConfig(configObj);
+ };
self.config.isXLabelStatus = function(type) {
if (configObj.xLabelStatus === type) {
- return true
+ return true;
} else {
- return false
+ return false;
}
- }
+ };
self.config.setDegree = function(type) {
- configObj.rotate.degree = type
- self.chart.xAxis.rotateLabels(type)
- self.emitConfig(configObj)
- }
-
- self.config.setDateFormat = function (format) {
- configObj.dateFormat = format
- self.emitConfig(configObj)
- }
+ configObj.rotate.degree = type;
+ self.chart.xAxis.rotateLabels(type);
+ self.emitConfig(configObj);
+ };
+
+ self.config.setDateFormat = function(format) {
+ configObj.dateFormat = format;
+ self.emitConfig(configObj);
+ };
}
- getSetting (chart) {
- let self = this
- let configObj = self.config
+ getSetting(chart) {
+ let self = this;
+ let configObj = self.config;
// default to visualize xLabel
if (typeof (configObj.xLabelStatus) === 'undefined') {
- configObj.changeXLabel('default')
+ configObj.changeXLabel('default');
}
if (typeof (configObj.rotate.degree) === 'undefined' || configObj.rotate.degree === '') {
- configObj.rotate.degree = '-45'
- self.emitConfig(configObj)
+ configObj.rotate.degree = '-45';
+ self.emitConfig(configObj);
}
return {
@@ -199,14 +199,14 @@ export default class LinechartVisualization extends Nvd3ChartVisualization {
</ng-include>`,
scope: {
config: configObj,
- save: function () {
- self.emitConfig(configObj)
- }
- }
- }
+ save: function() {
+ self.emitConfig(configObj);
+ },
+ },
+ };
}
- defaultY () {
- return undefined
+ defaultY() {
+ return undefined;
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
index f99fa3d..b3e6ec6 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js
@@ -12,42 +12,42 @@
* limitations under the License.
*/
-import Visualization from '../visualization'
+import Visualization from '../visualization';
/**
* Visualize data in table format
*/
export default class Nvd3ChartVisualization extends Visualization {
- constructor (targetEl, config) {
- super(targetEl, config)
- this.targetEl.append('<svg></svg>')
+ constructor(targetEl, config) {
+ super(targetEl, config);
+ this.targetEl.append('<svg></svg>');
}
- refresh () {
+ refresh() {
if (this.chart) {
- this.chart.update()
+ this.chart.update();
}
}
- render (data) {
- let type = this.type()
- let d3g = data.d3g
+ render(data) {
+ let type = this.type();
+ let d3g = data.d3g;
if (!this.chart) {
- this.chart = nv.models[type]()
+ this.chart = nv.models[type]();
}
- this.configureChart(this.chart)
+ this.configureChart(this.chart);
- let animationDuration = 300
- let numberOfDataThreshold = 150
- let height = this.targetEl.height()
+ let animationDuration = 300;
+ let numberOfDataThreshold = 150;
+ let height = this.targetEl.height();
// turn off animation when dataset is too large. (for performance issue)
// still, since dataset is large, the chart content sequentially appears like animated
try {
if (d3g[0].values.length > numberOfDataThreshold) {
- animationDuration = 0
+ animationDuration = 0;
}
} catch (err) { /** ignore */ }
@@ -56,206 +56,214 @@ export default class Nvd3ChartVisualization extends Visualization {
.datum(d3g)
.transition()
.duration(animationDuration)
- .call(this.chart)
- d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px'
+ .call(this.chart);
+ d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px';
}
- type () {
+ type() {
// override this and return chart type
}
- configureChart (chart) {
+ configureChart(chart) {
// override this to configure chart
}
- groupedThousandsWith3DigitsFormatter (x) {
- return d3.format(',')(d3.round(x, 3))
+ groupedThousandsWith3DigitsFormatter(x) {
+ return d3.format(',')(d3.round(x, 3));
}
- customAbbrevFormatter (x) {
- let s = d3.format('.3s')(x)
+ customAbbrevFormatter(x) {
+ let s = d3.format('.3s')(x);
switch (s[s.length - 1]) {
- case 'G': return s.slice(0, -1) + 'B'
+ case 'G': return s.slice(0, -1) + 'B';
}
- return s
+ return s;
}
- defaultY () {
- return 0
+ defaultY() {
+ return 0;
}
- xAxisTickFormat (d, xLabels) {
+ xAxisTickFormat(d, xLabels) {
if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { // to handle string type xlabel
- return xLabels[d]
+ return xLabels[d];
} else {
- return d
+ return d;
}
}
- yAxisTickFormat (d) {
+ yAxisTickFormat(d) {
if (Math.abs(d) >= Math.pow(10, 6)) {
- return this.customAbbrevFormatter(d)
+ return this.customAbbrevFormatter(d);
}
- return this.groupedThousandsWith3DigitsFormatter(d)
+ return this.groupedThousandsWith3DigitsFormatter(d);
}
- d3DataFromPivot (
+ d3DataFromPivot(
schema, rows, keys, groups, values, allowTextXAxis, fillMissingValues, multiBarChart) {
- let self = this
+ let self = this;
// construct table data
- let d3g = []
+ let d3g = [];
- let concat = function (o, n) {
+ let concat = function(o, n) {
if (!o) {
- return n
+ return n;
} else {
- return o + '.' + n
+ return o + '.' + n;
}
- }
+ };
- const getSchemaUnderKey = function (key, s) {
+ const getSchemaUnderKey = function(key, s) {
for (let c in key.children) {
- s[c] = {}
- getSchemaUnderKey(key.children[c], s[c])
+ if(key.children.hasOwnProperty(c)) {
+ s[c] = {};
+ getSchemaUnderKey(key.children[c], s[c]);
+ }
}
- }
+ };
- const traverse = function (sKey, s, rKey, r, func, rowName, rowValue, colName) {
+ const traverse = function(sKey, s, rKey, r, func, rowName, rowValue, colName) {
// console.log("TRAVERSE sKey=%o, s=%o, rKey=%o, r=%o, rowName=%o, rowValue=%o, colName=%o", sKey, s, rKey, r, rowName, rowValue, colName);
if (s.type === 'key') {
- rowName = concat(rowName, sKey)
- rowValue = concat(rowValue, rKey)
+ rowName = concat(rowName, sKey);
+ rowValue = concat(rowValue, rKey);
} else if (s.type === 'group') {
- colName = concat(colName, rKey)
+ colName = concat(colName, rKey);
} else if (s.type === 'value' && sKey === rKey || valueOnly) {
- colName = concat(colName, rKey)
- func(rowName, rowValue, colName, r)
+ colName = concat(colName, rKey);
+ func(rowName, rowValue, colName, r);
}
for (let c in s.children) {
if (fillMissingValues && s.children[c].type === 'group' && r[c] === undefined) {
- let cs = {}
- getSchemaUnderKey(s.children[c], cs)
- traverse(c, s.children[c], c, cs, func, rowName, rowValue, colName)
- continue
+ let cs = {};
+ getSchemaUnderKey(s.children[c], cs);
+ traverse(c, s.children[c], c, cs, func, rowName, rowValue, colName);
+ continue;
}
for (let j in r) {
if (s.children[c].type === 'key' || c === j) {
- traverse(c, s.children[c], j, r[j], func, rowName, rowValue, colName)
+ traverse(c, s.children[c], j, r[j], func, rowName, rowValue, colName);
}
}
}
- }
+ };
- const valueOnly = (keys.length === 0 && groups.length === 0 && values.length > 0)
- let noKey = (keys.length === 0)
- let isMultiBarChart = multiBarChart
+ const valueOnly = (keys.length === 0 && groups.length === 0 && values.length > 0);
+ let noKey = (keys.length === 0);
+ let isMultiBarChart = multiBarChart;
- let sKey = Object.keys(schema)[0]
+ let sKey = Object.keys(schema)[0];
- let rowNameIndex = {}
- let rowIdx = 0
- let colNameIndex = {}
- let colIdx = 0
- let rowIndexValue = {}
+ let rowNameIndex = {};
+ let rowIdx = 0;
+ let colNameIndex = {};
+ let colIdx = 0;
+ let rowIndexValue = {};
for (let k in rows) {
- traverse(sKey, schema[sKey], k, rows[k], function (rowName, rowValue, colName, value) {
- // console.log("RowName=%o, row=%o, col=%o, value=%o", rowName, rowValue, colName, value);
- if (rowNameIndex[rowValue] === undefined) {
- rowIndexValue[rowIdx] = rowValue
- rowNameIndex[rowValue] = rowIdx++
- }
+ if (rows.hasOwnProperty(k)) {
+ traverse(sKey, schema[sKey], k, rows[k], function(rowName, rowValue, colName, value) {
+ // console.log("RowName=%o, row=%o, col=%o, value=%o", rowName, rowValue, colName, value);
+ if (rowNameIndex[rowValue] === undefined) {
+ rowIndexValue[rowIdx] = rowValue;
+ rowNameIndex[rowValue] = rowIdx++;
+ }
- if (colNameIndex[colName] === undefined) {
- colNameIndex[colName] = colIdx++
- }
- let i = colNameIndex[colName]
- if (noKey && isMultiBarChart) {
- i = 0
- }
+ if (colNameIndex[colName] === undefined) {
+ colNameIndex[colName] = colIdx++;
+ }
+ let i = colNameIndex[colName];
+ if (noKey && isMultiBarChart) {
+ i = 0;
+ }
- if (!d3g[i]) {
- d3g[i] = {
- values: [],
- key: (noKey && isMultiBarChart) ? 'values' : colName
+ if (!d3g[i]) {
+ d3g[i] = {
+ values: [],
+ key: (noKey && isMultiBarChart) ? 'values' : colName,
+ };
}
- }
- let xVar = isNaN(rowValue) ? ((allowTextXAxis) ? rowValue : rowNameIndex[rowValue]) : parseFloat(rowValue)
- let yVar = self.defaultY()
- if (xVar === undefined) { xVar = colName }
- if (value !== undefined) {
- yVar = isNaN(value.value) ? self.defaultY() : parseFloat(value.value) / parseFloat(value.count)
- }
- d3g[i].values.push({
- x: xVar,
- y: yVar
- })
- })
+ let xVar = isNaN(rowValue) ? ((allowTextXAxis) ? rowValue : rowNameIndex[rowValue]) : parseFloat(rowValue);
+ let yVar = self.defaultY();
+ if (xVar === undefined) {
+ xVar = colName;
+ }
+ if (value !== undefined) {
+ yVar = isNaN(value.value) ? self.defaultY() : parseFloat(value.value) / parseFloat(value.count);
+ }
+ d3g[i].values.push({
+ x: xVar,
+ y: yVar,
+ });
+ });
+ }
}
// clear aggregation name, if possible
- let namesWithoutAggr = {}
- let colName
- let withoutAggr
+ let namesWithoutAggr = {};
+ let colName;
+ let withoutAggr;
// TODO - This part could use som refactoring - Weird if/else with similar actions and variable names
for (colName in colNameIndex) {
- withoutAggr = colName.substring(0, colName.lastIndexOf('('))
- if (!namesWithoutAggr[withoutAggr]) {
- namesWithoutAggr[withoutAggr] = 1
- } else {
- namesWithoutAggr[withoutAggr]++
+ if (colNameIndex.hasOwnProperty(colName)) {
+ withoutAggr = colName.substring(0, colName.lastIndexOf('('));
+ if (!namesWithoutAggr[withoutAggr]) {
+ namesWithoutAggr[withoutAggr] = 1;
+ } else {
+ namesWithoutAggr[withoutAggr]++;
+ }
}
}
if (valueOnly) {
for (let valueIndex = 0; valueIndex < d3g[0].values.length; valueIndex++) {
- colName = d3g[0].values[valueIndex].x
+ colName = d3g[0].values[valueIndex].x;
if (!colName) {
- continue
+ continue;
}
- withoutAggr = colName.substring(0, colName.lastIndexOf('('))
+ withoutAggr = colName.substring(0, colName.lastIndexOf('('));
if (namesWithoutAggr[withoutAggr] <= 1) {
- d3g[0].values[valueIndex].x = withoutAggr
+ d3g[0].values[valueIndex].x = withoutAggr;
}
}
} else {
for (let d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
- colName = d3g[d3gIndex].key
- withoutAggr = colName.substring(0, colName.lastIndexOf('('))
+ colName = d3g[d3gIndex].key;
+ withoutAggr = colName.substring(0, colName.lastIndexOf('('));
if (namesWithoutAggr[withoutAggr] <= 1) {
- d3g[d3gIndex].key = withoutAggr
+ d3g[d3gIndex].key = withoutAggr;
}
}
// use group name instead of group.value as a column name, if there're only one group and one value selected.
if (groups.length === 1 && values.length === 1) {
for (let d3gIndex = 0; d3gIndex < d3g.length; d3gIndex++) {
- colName = d3g[d3gIndex].key
- colName = colName.split('.').slice(0, -1).join('.')
- d3g[d3gIndex].key = colName
+ colName = d3g[d3gIndex].key;
+ colName = colName.split('.').slice(0, -1).join('.');
+ d3g[d3gIndex].key = colName;
}
}
}
return {
xLabels: rowIndexValue,
- d3g: d3g
- }
+ d3g: d3g,
+ };
}
/**
* method will be invoked when visualization need to be destroyed.
* Don't need to destroy this.targetEl.
*/
- destroy () {
+ destroy() {
if (this.chart) {
- d3.selectAll('#' + this.targetEl[0].id + ' svg > *').remove()
- this.chart = undefined
+ d3.selectAll('#' + this.targetEl[0].id + ' svg > *').remove();
+ this.chart = undefined;
}
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
index 4f80654..84479cb 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-piechart.js
@@ -12,29 +12,29 @@
* limitations under the License.
*/
-import Nvd3ChartVisualization from './visualization-nvd3chart'
-import PivotTransformation from '../../tabledata/pivot'
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import PivotTransformation from '../../tabledata/pivot';
/**
* Visualize data in pie chart
*/
export default class PiechartVisualization extends Nvd3ChartVisualization {
- constructor (targetEl, config) {
- super(targetEl, config)
- this.pivot = new PivotTransformation(config)
+ constructor(targetEl, config) {
+ super(targetEl, config);
+ this.pivot = new PivotTransformation(config);
}
- type () {
- return 'pieChart'
+ type() {
+ return 'pieChart';
}
- getTransformation () {
- return this.pivot
+ getTransformation() {
+ return this.pivot;
}
- render (pivot) {
+ render(pivot) {
// [ZEPPELIN-2253] New chart function will be created each time inside super.render()
- this.chart = null
+ this.chart = null;
const d3Data = this.d3DataFromPivot(
pivot.schema,
pivot.rows,
@@ -43,41 +43,45 @@ export default class PiechartVisualization extends Nvd3ChartVisualization {
pivot.values,
true,
false,
- false)
- const d = d3Data.d3g
+ false);
+ const d = d3Data.d3g;
- let generateLabel
+ let generateLabel;
// data is grouped
if (pivot.groups && pivot.groups.length > 0) {
- generateLabel = (suffix, prefix) => `${prefix}.${suffix}`
+ generateLabel = (suffix, prefix) => `${prefix}.${suffix}`;
} else { // data isn't grouped
- generateLabel = suffix => suffix
+ generateLabel = (suffix) => suffix;
}
- let d3g = d.map(group => {
- return group.values.map(row => ({
+ let d3g = d.map((group) => {
+ return group.values.map((row) => ({
label: generateLabel(row.x, group.key),
- value: row.y
- }))
- })
+ value: row.y,
+ }));
+ });
// the map function returns d3g as a nested array
// [].concat flattens it, http://stackoverflow.com/a/10865042/5154397
- d3g = [].concat.apply([], d3g) // eslint-disable-line prefer-spread
- super.render({d3g: d3g})
+ d3g = [].concat.apply([], d3g); // eslint-disable-line prefer-spread
+ super.render({d3g: d3g});
}
/**
* Set new config
*/
- setConfig (config) {
- super.setConfig(config)
- this.pivot.setConfig(config)
+ setConfig(config) {
+ super.setConfig(config);
+ this.pivot.setConfig(config);
}
- configureChart (chart) {
- chart.x(function (d) { return d.label })
- .y(function (d) { return d.value })
- .showLabels(false)
- .showTooltipPercent(true)
+ configureChart(chart) {
+ chart.x(function(d) {
+ return d.label;
+ })
+ .y(function(d) {
+ return d.value;
+ })
+ .showLabels(false)
+ .showTooltipPercent(true);
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/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 d7c00db..fad7500 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-scatterchart.js
@@ -12,25 +12,25 @@
* limitations under the License.
*/
-import Nvd3ChartVisualization from './visualization-nvd3chart'
-import ColumnselectorTransformation from '../../tabledata/columnselector'
+import Nvd3ChartVisualization from './visualization-nvd3chart';
+import ColumnselectorTransformation from '../../tabledata/columnselector';
/**
* Visualize data in scatter char
*/
export default class ScatterchartVisualization extends Nvd3ChartVisualization {
- constructor (targetEl, config) {
- super(targetEl, config)
+ constructor(targetEl, config) {
+ super(targetEl, config);
this.columnselectorProps = [
{
- name: 'xAxis'
+ name: 'xAxis',
},
{
- name: 'yAxis'
+ name: 'yAxis',
},
{
- name: 'group'
+ name: 'group',
},
{
name: 'size',
@@ -39,322 +39,330 @@ export default class ScatterchartVisualization extends Nvd3ChartVisualization {
'number of values in corresponding coordinate' will be used.
Zeppelin considers values as discrete when input values contain a string
or the number of distinct values is greater than 5% of the total number of values.
- This field turns grey when the selected option is invalid.`
- }
- ]
- this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps)
+ This field turns grey when the selected option is invalid.`,
+ },
+ ];
+ this.columnselector = new ColumnselectorTransformation(config, this.columnselectorProps);
}
- type () {
- return 'scatterChart'
+ type() {
+ return 'scatterChart';
}
- getTransformation () {
- return this.columnselector
+ getTransformation() {
+ return this.columnselector;
}
- render (tableData) {
- this.tableData = tableData
- this.selectDefault()
- let d3Data = this.setScatterChart(tableData, true)
- this.xLabels = d3Data.xLabels
- this.yLabels = d3Data.yLabels
+ render(tableData) {
+ this.tableData = tableData;
+ this.selectDefault();
+ let d3Data = this.setScatterChart(tableData, true);
+ this.xLabels = d3Data.xLabels;
+ this.yLabels = d3Data.yLabels;
- super.render(d3Data)
+ super.render(d3Data);
}
- configureChart (chart) {
- let self = this
+ configureChart(chart) {
+ let self = this;
- chart.xAxis.tickFormat(function (d) { // TODO remove round after bump to nvd3 > 1.8.5
- return self.xAxisTickFormat(Math.round(d * 1e3) / 1e3, self.xLabels)
- })
+ chart.xAxis.tickFormat(function(d) { // TODO remove round after bump to nvd3 > 1.8.5
+ return self.xAxisTickFormat(Math.round(d * 1e3) / 1e3, self.xLabels);
+ });
- chart.yAxis.tickFormat(function (d) { // TODO remove round after bump to nvd3 > 1.8.5
- return self.yAxisTickFormat(Math.round(d * 1e3) / 1e3, self.yLabels)
- })
+ chart.yAxis.tickFormat(function(d) { // TODO remove round after bump to nvd3 > 1.8.5
+ return self.yAxisTickFormat(Math.round(d * 1e3) / 1e3, self.yLabels);
+ });
- chart.showDistX(true).showDistY(true)
+ chart.showDistX(true).showDistY(true);
// handle the problem of tooltip not showing when muliple points have same value.
}
- yAxisTickFormat (d, yLabels) {
+ yAxisTickFormat(d, yLabels) {
if (yLabels[d] && (isNaN(parseFloat(yLabels[d])) || !isFinite(yLabels[d]))) { // to handle string type xlabel
- return yLabels[d]
+ return yLabels[d];
} else {
- return super.yAxisTickFormat(d)
+ return super.yAxisTickFormat(d);
}
}
- selectDefault () {
+ 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]
+ 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]
+ this.config.xAxis = this.tableData.columns[0];
}
}
}
- setScatterChart (data, refresh) {
- let xAxis = this.config.xAxis
- let yAxis = this.config.yAxis
- let group = this.config.group
- let size = this.config.size
-
- let xValues = []
- let yValues = []
- let rows = {}
- let d3g = []
-
- let rowNameIndex = {}
- let colNameIndex = {}
- let grpNameIndex = {}
- let rowIndexValue = {}
- let colIndexValue = {}
- let grpIndexValue = {}
- let rowIdx = 0
- let colIdx = 0
- let grpIdx = 0
- let grpName = ''
-
- let xValue
- let yValue
- let row
+ setScatterChart(data, refresh) {
+ let xAxis = this.config.xAxis;
+ let yAxis = this.config.yAxis;
+ let group = this.config.group;
+ let size = this.config.size;
+
+ let xValues = [];
+ let yValues = [];
+ let rows = {};
+ let d3g = [];
+
+ let rowNameIndex = {};
+ let colNameIndex = {};
+ let grpNameIndex = {};
+ let rowIndexValue = {};
+ let colIndexValue = {};
+ let grpIndexValue = {};
+ let rowIdx = 0;
+ let colIdx = 0;
+ let grpIdx = 0;
+ let grpName = '';
+
+ let xValue;
+ let yValue;
+ let row;
if (!xAxis && !yAxis) {
return {
- d3g: []
- }
+ d3g: [],
+ };
}
for (let i = 0; i < data.rows.length; i++) {
- row = data.rows[i]
+ row = data.rows[i];
if (xAxis) {
- xValue = row[xAxis.index]
- xValues[i] = xValue
+ xValue = row[xAxis.index];
+ xValues[i] = xValue;
}
if (yAxis) {
- yValue = row[yAxis.index]
- yValues[i] = yValue
+ yValue = row[yAxis.index];
+ yValues[i] = yValue;
}
}
let isAllDiscrete = ((xAxis && yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
(!xAxis && this.isDiscrete(yValues)) ||
- (!yAxis && this.isDiscrete(xValues)))
+ (!yAxis && this.isDiscrete(xValues)));
if (isAllDiscrete) {
- rows = this.setDiscreteScatterData(data)
+ rows = this.setDiscreteScatterData(data);
} else {
- rows = data.rows
+ rows = data.rows;
}
if (!group && isAllDiscrete) {
- grpName = 'count'
+ grpName = 'count';
} else if (!group && !size) {
if (xAxis && yAxis) {
- grpName = '(' + xAxis.name + ', ' + yAxis.name + ')'
+ grpName = '(' + xAxis.name + ', ' + yAxis.name + ')';
} else if (xAxis && !yAxis) {
- grpName = xAxis.name
+ grpName = xAxis.name;
} else if (!xAxis && yAxis) {
- grpName = yAxis.name
+ grpName = yAxis.name;
}
} else if (!group && size) {
- grpName = size.name
+ grpName = size.name;
}
- let epsilon = 1e-4 // TODO remove after bump to nvd3 > 1.8.5
+ let epsilon = 1e-4; // TODO remove after bump to nvd3 > 1.8.5
for (let i = 0; i < rows.length; i++) {
- row = rows[i]
+ row = rows[i];
if (xAxis) {
- xValue = row[xAxis.index]
+ xValue = row[xAxis.index];
}
if (yAxis) {
- yValue = row[yAxis.index]
+ yValue = row[yAxis.index];
}
if (group) {
- grpName = row[group.index]
+ grpName = row[group.index];
}
- let sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1)
+ let sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1);
if (grpNameIndex[grpName] === undefined) {
- grpIndexValue[grpIdx] = grpName
- grpNameIndex[grpName] = grpIdx++
+ grpIndexValue[grpIdx] = grpName;
+ grpNameIndex[grpName] = grpIdx++;
}
if (xAxis && rowNameIndex[xValue] === undefined) {
- rowIndexValue[rowIdx] = xValue
- rowNameIndex[xValue] = rowIdx++
+ rowIndexValue[rowIdx] = xValue;
+ rowNameIndex[xValue] = rowIdx++;
}
if (yAxis && colNameIndex[yValue] === undefined) {
- colIndexValue[colIdx] = yValue
- colNameIndex[yValue] = colIdx++
+ colIndexValue[colIdx] = yValue;
+ colNameIndex[yValue] = colIdx++;
}
if (!d3g[grpNameIndex[grpName]]) {
d3g[grpNameIndex[grpName]] = {
key: grpName,
- values: []
- }
+ values: [],
+ };
}
// TODO remove epsilon jitter after bump to nvd3 > 1.8.5
- let xval = 0
- let yval = 0
+ let xval = 0;
+ let yval = 0;
if (xAxis) {
- xval = (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) + Math.random() * epsilon
+ xval = (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) + Math.random() * epsilon;
}
if (yAxis) {
- yval = (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) + Math.random() * epsilon
+ yval = (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) + Math.random() * epsilon;
}
d3g[grpNameIndex[grpName]].values.push({
x: xval,
y: yval,
- size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz)
- })
+ size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz),
+ });
}
// TODO remove sort and dedup after bump to nvd3 > 1.8.5
- let d3gvalues = d3g[grpNameIndex[grpName]].values
- d3gvalues.sort(function (a, b) {
- return ((a['x'] - b['x']) || (a['y'] - b['y']))
- })
+ let d3gvalues = d3g[grpNameIndex[grpName]].values;
+ d3gvalues.sort(function(a, b) {
+ return ((a['x'] - b['x']) || (a['y'] - b['y']));
+ });
for (let i = 0; i < d3gvalues.length - 1;) {
if ((Math.abs(d3gvalues[i]['x'] - d3gvalues[i + 1]['x']) < epsilon) &&
(Math.abs(d3gvalues[i]['y'] - d3gvalues[i + 1]['y']) < epsilon)) {
- d3gvalues.splice(i + 1, 1)
+ d3gvalues.splice(i + 1, 1);
} else {
- i++
+ i++;
}
}
return {
xLabels: rowIndexValue,
yLabels: colIndexValue,
- d3g: d3g
- }
+ d3g: d3g,
+ };
}
- setDiscreteScatterData (data) {
- let xAxis = this.config.xAxis
- let yAxis = this.config.yAxis
- let group = this.config.group
+ setDiscreteScatterData(data) {
+ let xAxis = this.config.xAxis;
+ let yAxis = this.config.yAxis;
+ let group = this.config.group;
- let xValue
- let yValue
- let grp
+ let xValue;
+ let yValue;
+ let grp;
- let rows = {}
+ let rows = {};
for (let i = 0; i < data.rows.length; i++) {
- let row = data.rows[i]
+ let row = data.rows[i];
if (xAxis) {
- xValue = row[xAxis.index]
+ xValue = row[xAxis.index];
}
if (yAxis) {
- yValue = row[yAxis.index]
+ yValue = row[yAxis.index];
}
if (group) {
- grp = row[group.index]
+ grp = row[group.index];
}
- let key = xValue + ',' + yValue + ',' + grp
+ let key = xValue + ',' + yValue + ',' + grp;
if (!rows[key]) {
rows[key] = {
x: xValue,
y: yValue,
group: grp,
- size: 1
- }
+ size: 1,
+ };
} else {
- rows[key].size++
+ rows[key].size++;
}
}
// change object into array
- let newRows = []
+ let newRows = [];
for (let r in rows) {
- let 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)
+ if (rows.hasOwnProperty(r)) {
+ let 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
+ return newRows;
}
- isDiscrete (field) {
- let getUnique = function (f) {
- let uniqObj = {}
- let uniqArr = []
- let j = 0
+ isDiscrete(field) {
+ let getUnique = function(f) {
+ let uniqObj = {};
+ let uniqArr = [];
+ let j = 0;
for (let i = 0; i < f.length; i++) {
- let item = f[i]
+ let item = f[i];
if (uniqObj[item] !== 1) {
- uniqObj[item] = 1
- uniqArr[j++] = item
+ uniqObj[item] = 1;
+ uniqArr[j++] = item;
}
}
- return uniqArr
- }
+ return uniqArr;
+ };
for (let i = 0; i < field.length; i++) {
if (isNaN(parseFloat(field[i])) &&
(typeof field[i] === 'string' || field[i] instanceof String)) {
- return true
+ return true;
}
}
- let threshold = 0.05
- let unique = getUnique(field)
+ let threshold = 0.05;
+ let unique = getUnique(field);
if (unique.length / field.length < threshold) {
- return true
+ return true;
} else {
- return false
+ return false;
}
}
- isValidSizeOption (options) {
- let xValues = []
- let yValues = []
- let rows = this.tableData.rows
+ isValidSizeOption(options) {
+ let xValues = [];
+ let yValues = [];
+ let rows = this.tableData.rows;
for (let i = 0; i < rows.length; i++) {
- let row = rows[i]
- let size = row[options.size.index]
+ let row = rows[i];
+ let size = row[options.size.index];
// check if the field is numeric
if (isNaN(parseFloat(size)) || !isFinite(size)) {
- return false
+ return false;
}
if (options.xAxis) {
- let x = row[options.xAxis.index]
- xValues[i] = x
+ let x = row[options.xAxis.index];
+ xValues[i] = x;
}
if (options.yAxis) {
- let y = row[options.yAxis.index]
- yValues[i] = y
+ let y = row[options.yAxis.index];
+ yValues[i] = y;
}
}
// check if all existing fields are discrete
let isAllDiscrete = ((options.xAxis && options.yAxis && this.isDiscrete(xValues) && this.isDiscrete(yValues)) ||
(!options.xAxis && this.isDiscrete(yValues)) ||
- (!options.yAxis && this.isDiscrete(xValues)))
+ (!options.yAxis && this.isDiscrete(xValues)));
if (isAllDiscrete) {
- return false
+ return false;
}
- return true
+ return true;
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/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 afb5394..d77efbc 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-table.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-table.js
@@ -12,8 +12,8 @@
* limitations under the License.
*/
-import Visualization from '../visualization'
-import PassthroughTransformation from '../../tabledata/passthrough'
+import Visualization from '../visualization';
+import PassthroughTransformation from '../../tabledata/passthrough';
import {
Widget, ValueType,
@@ -22,9 +22,9 @@ import {
initializeTableConfig, resetTableOptionConfig,
DefaultTableColumnType, TableColumnType, updateColumnTypeState,
parseTableOption,
-} from './visualization-util'
+} from './visualization-util';
-const SETTING_TEMPLATE = require('./visualization-table-setting.html')
+const SETTING_TEMPLATE = require('./visualization-table-setting.html');
const TABLE_OPTION_SPECS = [
{
@@ -48,41 +48,43 @@ const TABLE_OPTION_SPECS = [
widget: Widget.CHECKBOX,
description: 'Enable a footer for displaying aggregated values',
},
-]
+];
/**
* Visualize data in table format
*/
export default class TableVisualization extends Visualization {
- constructor (targetEl, config) {
- super(targetEl, config)
- this.passthrough = new PassthroughTransformation(config)
- this.emitTimeout = null
- this.isRestoring = false
+ constructor(targetEl, config) {
+ super(targetEl, config);
+ this.passthrough = new PassthroughTransformation(config);
+ this.emitTimeout = null;
+ this.isRestoring = false;
- initializeTableConfig(config, TABLE_OPTION_SPECS)
+ initializeTableConfig(config, TABLE_OPTION_SPECS);
}
getColumnMinWidth(colName) {
- let width = 150 // default
- const calculatedWidth = colName.length * 10
+ let width = 150; // default
+ const calculatedWidth = colName.length * 10;
// use the broad one
- if (calculatedWidth > width) { width = calculatedWidth }
+ if (calculatedWidth > width) {
+ width = calculatedWidth;
+ }
- return width
+ return width;
}
createGridOptions(tableData, onRegisterApiCallback, config) {
- const rows = tableData.rows
- const columnNames = tableData.columns.map(c => c.name)
+ const rows = tableData.rows;
+ const columnNames = tableData.columns.map((c) => c.name);
- const gridData = rows.map(r => {
+ const gridData = rows.map((r) => {
return columnNames.reduce((acc, colName, index) => {
- acc[colName] = r[index]
- return acc
- }, {})
- })
+ acc[colName] = r[index];
+ return acc;
+ }, {});
+ });
const gridOptions = {
data: gridData,
@@ -94,7 +96,7 @@ export default class TableVisualization extends Visualization {
fastWatch: false,
treeRowHeaderAlwaysVisible: false,
- columnDefs: columnNames.map(colName => {
+ columnDefs: columnNames.map((colName) => {
return {
displayName: colName,
name: colName,
@@ -111,7 +113,7 @@ export default class TableVisualization extends Visualization {
`,
minWidth: this.getColumnMinWidth(colName),
width: '*',
- }
+ };
}),
rowEditWaitInterval: -1, /** disable saveRow event */
enableRowHashing: true,
@@ -126,127 +128,131 @@ export default class TableVisualization extends Visualization {
saveTreeView: true,
saveFilter: true,
saveSelection: false,
- }
+ };
- return gridOptions
+ return gridOptions;
}
getGridElemId() {
// angular doesn't allow `-` in scope variable name
- const gridElemId = `${this.targetEl[0].id}_grid`.replace('-', '_')
- return gridElemId
+ const gridElemId = `${this.targetEl[0].id}_grid`.replace('-', '_');
+ return gridElemId;
}
getGridApiId() {
// angular doesn't allow `-` in scope variable name
- const gridApiId = `${this.targetEl[0].id}_gridApi`.replace('-', '_')
- return gridApiId
+ const gridApiId = `${this.targetEl[0].id}_gridApi`.replace('-', '_');
+ return gridApiId;
}
refresh() {
- const gridElemId = this.getGridElemId()
- const gridElem = angular.element(`#${gridElemId}`)
+ const gridElemId = this.getGridElemId();
+ const gridElem = angular.element(`#${gridElemId}`);
if (gridElem) {
- gridElem.css('height', this.targetEl.height() - 10)
+ gridElem.css('height', this.targetEl.height() - 10);
}
}
refreshGrid() {
- const gridElemId = this.getGridElemId()
- const gridElem = angular.element(`#${gridElemId}`)
+ const gridElemId = this.getGridElemId();
+ const gridElem = angular.element(`#${gridElemId}`);
if (gridElem) {
- const scope = this.getScope()
- const gridApiId = this.getGridApiId()
- scope[gridApiId].core.notifyDataChange(this._uiGridConstants.dataChange.ALL)
+ const scope = this.getScope();
+ const gridApiId = this.getGridApiId();
+ scope[gridApiId].core.notifyDataChange(this._uiGridConstants.dataChange.ALL);
}
}
updateColDefType(colDef, type) {
- if (type === colDef.type) { return }
+ if (type === colDef.type) {
+ return;
+ }
- colDef.type = type
- const colName = colDef.name
- const config = this.config
+ colDef.type = type;
+ const colName = colDef.name;
+ const config = this.config;
if (config.tableColumnTypeState.names && config.tableColumnTypeState.names[colName]) {
- config.tableColumnTypeState.names[colName] = type
- this.persistConfigWithGridState(this.config)
+ config.tableColumnTypeState.names[colName] = type;
+ this.persistConfigWithGridState(this.config);
}
}
addColumnMenus(gridOptions) {
- if (!gridOptions || !gridOptions.columnDefs) { return }
+ if (!gridOptions || !gridOptions.columnDefs) {
+ return;
+ }
- const self = this // for closure
+ const self = this; // for closure
// SHOULD use `function() { ... }` syntax for each action to get `this`
- gridOptions.columnDefs.map(colDef => {
+ gridOptions.columnDefs.map((colDef) => {
colDef.menuItems = [
{
title: 'Type: String',
action: function() {
- self.updateColDefType(this.context.col.colDef, TableColumnType.STRING)
+ self.updateColDefType(this.context.col.colDef, TableColumnType.STRING);
},
active: function() {
- return this.context.col.colDef.type === TableColumnType.STRING
+ return this.context.col.colDef.type === TableColumnType.STRING;
},
},
{
title: 'Type: Number',
action: function() {
- self.updateColDefType(this.context.col.colDef, TableColumnType.NUMBER)
+ self.updateColDefType(this.context.col.colDef, TableColumnType.NUMBER);
},
active: function() {
- return this.context.col.colDef.type === TableColumnType.NUMBER
+ return this.context.col.colDef.type === TableColumnType.NUMBER;
},
},
{
title: 'Type: Date',
action: function() {
- self.updateColDefType(this.context.col.colDef, TableColumnType.DATE)
+ self.updateColDefType(this.context.col.colDef, TableColumnType.DATE);
},
active: function() {
- return this.context.col.colDef.type === TableColumnType.DATE
+ return this.context.col.colDef.type === TableColumnType.DATE;
},
},
- ]
- })
+ ];
+ });
}
setDynamicGridOptions(gridOptions, config) {
// parse based on their type definitions
- const parsed = parseTableOption(TABLE_OPTION_SPECS, config.tableOptionValue)
+ const parsed = parseTableOption(TABLE_OPTION_SPECS, config.tableOptionValue);
- const { showAggregationFooter, useFilter, showPagination, } = parsed
+ const {showAggregationFooter, useFilter, showPagination} = parsed;
- gridOptions.showGridFooter = false
- gridOptions.showColumnFooter = showAggregationFooter
- gridOptions.enableFiltering = useFilter
+ gridOptions.showGridFooter = false;
+ gridOptions.showColumnFooter = showAggregationFooter;
+ gridOptions.enableFiltering = useFilter;
- gridOptions.enablePagination = showPagination
- gridOptions.enablePaginationControls = showPagination
+ gridOptions.enablePagination = showPagination;
+ gridOptions.enablePaginationControls = showPagination;
if (showPagination) {
- gridOptions.paginationPageSize = 50
- gridOptions.paginationPageSizes = [25, 50, 100, 250, 1000]
+ gridOptions.paginationPageSize = 50;
+ gridOptions.paginationPageSizes = [25, 50, 100, 250, 1000];
}
// selection can't be rendered dynamically in ui-grid 4.0.4
- gridOptions.enableRowSelection = false
- gridOptions.enableRowHeaderSelection = false
- gridOptions.enableFullRowSelection = false
- gridOptions.enableSelectAll = false
- gridOptions.enableGroupHeaderSelection = false
- gridOptions.enableSelectionBatchEvent = false
+ gridOptions.enableRowSelection = false;
+ gridOptions.enableRowHeaderSelection = false;
+ gridOptions.enableFullRowSelection = false;
+ gridOptions.enableSelectAll = false;
+ gridOptions.enableGroupHeaderSelection = false;
+ gridOptions.enableSelectionBatchEvent = false;
}
- render (tableData) {
- const gridElemId = this.getGridElemId()
- let gridElem = document.getElementById(gridElemId)
+ render(tableData) {
+ const gridElemId = this.getGridElemId();
+ let gridElem = document.getElementById(gridElemId);
- const config = this.config
- const self = this // for closure
+ const config = this.config;
+ const self = this; // for closure
if (!gridElem) {
// create, compile and append grid elem
@@ -261,125 +267,147 @@ export default class TableVisualization extends Visualization {
ui-grid-move-columns
ui-grid-grouping
ui-grid-save-state
- ui-grid-exporter></div>`)
+ ui-grid-exporter></div>`);
- gridElem.css('height', this.targetEl.height() - 10)
- const scope = this.getScope()
- gridElem = this._compile(gridElem)(scope)
- this.targetEl.append(gridElem)
+ gridElem.css('height', this.targetEl.height() - 10);
+ const scope = this.getScope();
+ gridElem = this._compile(gridElem)(scope);
+ this.targetEl.append(gridElem);
// set gridOptions for this elem
- const gridOptions = this.createGridOptions(tableData, onRegisterApiCallback, config)
- this.setDynamicGridOptions(gridOptions, config)
- this.addColumnMenus(gridOptions)
- scope[gridElemId] = gridOptions
+ const gridOptions = this.createGridOptions(tableData, onRegisterApiCallback, config);
+ this.setDynamicGridOptions(gridOptions, config);
+ this.addColumnMenus(gridOptions);
+ scope[gridElemId] = gridOptions;
// set gridApi for this elem
- const gridApiId = this.getGridApiId()
+ const gridApiId = this.getGridApiId();
const onRegisterApiCallback = (gridApi) => {
- scope[gridApiId] = gridApi
+ scope[gridApiId] = gridApi;
// should restore state before registering APIs
// register callbacks for change evens
// should persist `self.config` instead `config` (closure issue)
- gridApi.core.on.columnVisibilityChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.colMovable.on.columnPositionChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.core.on.sortChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.core.on.filterChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.grouping.on.aggregationChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.grouping.on.groupingChanged(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.treeBase.on.rowCollapsed(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.treeBase.on.rowExpanded(scope, () => { self.persistConfigWithGridState(self.config) })
- gridApi.colResizable.on.columnSizeChanged(scope, () => { self.persistConfigWithGridState(self.config) })
+ gridApi.core.on.columnVisibilityChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.colMovable.on.columnPositionChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.core.on.sortChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.core.on.filterChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.grouping.on.aggregationChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.grouping.on.groupingChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.treeBase.on.rowCollapsed(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.treeBase.on.rowExpanded(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
+ gridApi.colResizable.on.columnSizeChanged(scope, () => {
+ self.persistConfigWithGridState(self.config);
+ });
// pagination doesn't follow usual life-cycle in ui-grid v4.0.4
// gridApi.pagination.on.paginationChanged(scope, () => { self.persistConfigWithGridState(self.config) })
// TBD: do we need to propagate row selection?
// gridApi.selection.on.rowSelectionChanged(scope, () => { self.persistConfigWithGridState(self.config) })
// gridApi.selection.on.rowSelectionChangedBatch(scope, () => { self.persistConfigWithGridState(self.config) })
- }
- gridOptions.onRegisterApi = onRegisterApiCallback
+ };
+ gridOptions.onRegisterApi = onRegisterApiCallback;
} else {
// don't need to update gridOptions.data since it's synchronized by paragraph execution
- const gridOptions = this.getGridOptions()
- this.setDynamicGridOptions(gridOptions, config)
- this.refreshGrid()
+ const gridOptions = this.getGridOptions();
+ this.setDynamicGridOptions(gridOptions, config);
+ this.refreshGrid();
}
- const columnDefs = this.getGridOptions().columnDefs
- updateColumnTypeState(tableData.columns, config, columnDefs)
+ const columnDefs = this.getGridOptions().columnDefs;
+ updateColumnTypeState(tableData.columns, config, columnDefs);
// SHOULD restore grid state after columnDefs are updated
- this.restoreGridState(config.tableGridState)
+ this.restoreGridState(config.tableGridState);
}
restoreGridState(gridState) {
- if (!gridState) { return }
+ if (!gridState) {
+ return;
+ }
// should set isRestoring to avoid that changed* events are triggered while restoring
- this.isRestoring = true
- const gridApi = this.getGridApi()
+ this.isRestoring = true;
+ const gridApi = this.getGridApi();
// restore grid state when gridApi is available
if (!gridApi) {
- setTimeout(() => this.restoreGridState(gridState), 100)
+ setTimeout(() => this.restoreGridState(gridState), 100);
} else {
- gridApi.saveState.restore(this.getScope(), gridState)
- this.isRestoring = false
+ gridApi.saveState.restore(this.getScope(), gridState);
+ this.isRestoring = false;
}
}
- destroy () {
+ destroy() {
}
- getTransformation () {
- return this.passthrough
+ getTransformation() {
+ return this.passthrough;
}
getScope() {
- const scope = this.targetEl.scope()
- return scope
+ const scope = this.targetEl.scope();
+ return scope;
}
getGridOptions() {
- const scope = this.getScope()
- const gridElemId = this.getGridElemId()
- return scope[gridElemId]
+ const scope = this.getScope();
+ const gridElemId = this.getGridElemId();
+ return scope[gridElemId];
}
getGridApi() {
- const scope = this.targetEl.scope()
- const gridApiId = this.getGridApiId()
- return scope[gridApiId]
+ const scope = this.targetEl.scope();
+ const gridApiId = this.getGridApiId();
+ return scope[gridApiId];
}
persistConfigImmediatelyWithGridState(config) {
- this.persistConfigWithGridState(config)
+ this.persistConfigWithGridState(config);
}
persistConfigWithGridState(config) {
- if (this.isRestoring) { return }
+ if (this.isRestoring) {
+ return;
+ }
- const gridApi = this.getGridApi()
- config.tableGridState = gridApi.saveState.save()
- this.emitConfig(config)
+ const gridApi = this.getGridApi();
+ config.tableGridState = gridApi.saveState.save();
+ this.emitConfig(config);
}
persistConfig(config) {
- this.emitConfig(config)
+ this.emitConfig(config);
}
- getSetting (chart) {
- const self = this // for closure in scope
- const configObj = self.config
+ getSetting(chart) {
+ const self = this; // for closure in scope
+ const configObj = self.config;
// emit config if it's updated in `render`
if (configObj.initialized) {
- configObj.initialized = false
- this.persistConfig(configObj) // should persist w/o state
+ configObj.initialized = false;
+ this.persistConfig(configObj); // should persist w/o state
} else if (configObj.tableColumnTypeState &&
configObj.tableColumnTypeState.updated) {
- configObj.tableColumnTypeState.updated = false
- this.persistConfig(configObj) // should persist w/o state
+ configObj.tableColumnTypeState.updated = false;
+ this.persistConfig(configObj); // should persist w/o state
}
return {
@@ -393,27 +421,27 @@ export default class TableVisualization extends Visualization {
isTextareaWidget: isTextareaWidget,
isBtnGroupWidget: isBtnGroupWidget,
tableOptionValueChanged: () => {
- self.persistConfigWithGridState(configObj)
+ self.persistConfigWithGridState(configObj);
},
saveTableOption: () => {
- self.persistConfigWithGridState(configObj)
+ self.persistConfigWithGridState(configObj);
},
resetTableOption: () => {
- resetTableOptionConfig(configObj)
- initializeTableConfig(configObj, TABLE_OPTION_SPECS)
- self.persistConfigWithGridState(configObj)
+ resetTableOptionConfig(configObj);
+ initializeTableConfig(configObj, TABLE_OPTION_SPECS);
+ self.persistConfigWithGridState(configObj);
},
tableWidgetOnKeyDown: (event, optSpec) => {
- const code = event.keyCode || event.which
+ const code = event.keyCode || event.which;
if (code === 13 && isInputWidget(optSpec)) {
- self.persistConfigWithGridState(configObj)
+ self.persistConfigWithGridState(configObj);
} else if (code === 13 && event.shiftKey && isTextareaWidget(optSpec)) {
- self.persistConfigWithGridState(configObj)
+ self.persistConfigWithGridState(configObj);
}
- event.stopPropagation() /** avoid to conflict with paragraph shortcuts */
- }
- }
- }
+ event.stopPropagation(); /** avoid to conflict with paragraph shortcuts */
+ },
+ },
+ };
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/app/visualization/builtins/visualization-util.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/visualization/builtins/visualization-util.js b/zeppelin-web/src/app/visualization/builtins/visualization-util.js
index cd9cd48..a82a18e 100644
--- a/zeppelin-web/src/app/visualization/builtins/visualization-util.js
+++ b/zeppelin-web/src/app/visualization/builtins/visualization-util.js
@@ -18,7 +18,7 @@ export const Widget = {
TEXTAREA: 'textarea',
OPTION: 'option',
BTN_GROUP: 'btn-group',
-}
+};
export const ValueType = {
INT: 'int',
@@ -26,7 +26,7 @@ export const ValueType = {
BOOLEAN: 'boolean',
STRING: 'string',
JSON: 'JSON',
-}
+};
export const TableColumnType = {
STRING: 'string',
@@ -35,138 +35,170 @@ export const TableColumnType = {
DATE: 'date',
OBJECT: 'object',
NUMBER_STR: 'numberStr',
-}
+};
-export const DefaultTableColumnType = TableColumnType.STRING
+export const DefaultTableColumnType = TableColumnType.STRING;
-export function isInputWidget (spec) { return spec.widget === Widget.INPUT }
-export function isOptionWidget (spec) { return spec.widget === Widget.OPTION }
-export function isCheckboxWidget (spec) { return spec.widget === Widget.CHECKBOX }
-export function isTextareaWidget (spec) { return spec.widget === Widget.TEXTAREA }
-export function isBtnGroupWidget (spec) { return spec.widget === Widget.BTN_GROUP }
+export function isInputWidget(spec) {
+ return spec.widget === Widget.INPUT;
+}
+export function isOptionWidget(spec) {
+ return spec.widget === Widget.OPTION;
+}
+export function isCheckboxWidget(spec) {
+ return spec.widget === Widget.CHECKBOX;
+}
+export function isTextareaWidget(spec) {
+ return spec.widget === Widget.TEXTAREA;
+}
+export function isBtnGroupWidget(spec) {
+ return spec.widget === Widget.BTN_GROUP;
+}
export function resetTableOptionConfig(config) {
- delete config.tableOptionSpecHash
- config.tableOptionSpecHash = {}
- delete config.tableOptionValue
- config.tableOptionValue = {}
- delete config.tableColumnTypeState.names
- config.tableColumnTypeState.names = {}
- config.updated = false
- return config
+ delete config.tableOptionSpecHash;
+ config.tableOptionSpecHash = {};
+ delete config.tableOptionValue;
+ config.tableOptionValue = {};
+ delete config.tableColumnTypeState.names;
+ config.tableColumnTypeState.names = {};
+ config.updated = false;
+ return config;
}
export function initializeTableConfig(config, tableOptionSpecs) {
- if (typeof config.tableOptionValue === 'undefined') { config.tableOptionValue = {} }
- if (typeof config.tableGridState === 'undefined') { config.tableGridState = {} }
- if (typeof config.tableColumnTypeState === 'undefined') { config.tableColumnTypeState = {} }
+ if (typeof config.tableOptionValue === 'undefined') {
+ config.tableOptionValue = {};
+ }
+ if (typeof config.tableGridState === 'undefined') {
+ config.tableGridState = {};
+ }
+ if (typeof config.tableColumnTypeState === 'undefined') {
+ config.tableColumnTypeState = {};
+ }
// should remove `$$hashKey` using angular.toJson
- const newSpecHash = JSON.stringify(JSON.parse(angular.toJson(tableOptionSpecs)))
- const previousSpecHash = config.tableOptionSpecHash
+ const newSpecHash = JSON.stringify(JSON.parse(angular.toJson(tableOptionSpecs)));
+ const previousSpecHash = config.tableOptionSpecHash;
// check whether spec is updated or not
if (typeof previousSpecHash === 'undefined' || (previousSpecHash !== newSpecHash)) {
- resetTableOptionConfig(config)
+ resetTableOptionConfig(config);
- config.tableOptionSpecHash = newSpecHash
- config.initialized = true
+ config.tableOptionSpecHash = newSpecHash;
+ config.initialized = true;
// reset all persisted option values if spec is updated
for (let i = 0; i < tableOptionSpecs.length; i++) {
- const option = tableOptionSpecs[i]
- config.tableOptionValue[option.name] = option.defaultValue
+ const option = tableOptionSpecs[i];
+ config.tableOptionValue[option.name] = option.defaultValue;
}
}
- return config
+ return config;
}
export function parseTableOption(specs, persistedTableOption) {
/** copy original params */
- const parsed = JSON.parse(JSON.stringify(persistedTableOption))
+ const parsed = JSON.parse(JSON.stringify(persistedTableOption));
for (let i = 0; i < specs.length; i++) {
- const s = specs[i]
- const name = s.name
+ const s = specs[i];
+ const name = s.name;
if (s.valueType === ValueType.INT &&
typeof parsed[name] !== 'number') {
- try { parsed[name] = parseInt(parsed[name]) } catch (error) { parsed[name] = s.defaultValue }
+ try {
+ parsed[name] = parseInt(parsed[name]);
+ } catch (error) {
+ parsed[name] = s.defaultValue;
+ }
} else if (s.valueType === ValueType.FLOAT &&
typeof parsed[name] !== 'number') {
- try { parsed[name] = parseFloat(parsed[name]) } catch (error) { parsed[name] = s.defaultValue }
+ try {
+ parsed[name] = parseFloat(parsed[name]);
+ } catch (error) {
+ parsed[name] = s.defaultValue;
+ }
} else if (s.valueType === ValueType.BOOLEAN) {
if (parsed[name] === 'false') {
- parsed[name] = false
+ parsed[name] = false;
} else if (parsed[name] === 'true') {
- parsed[name] = true
+ parsed[name] = true;
} else if (typeof parsed[name] !== 'boolean') {
- parsed[name] = s.defaultValue
+ parsed[name] = s.defaultValue;
}
} else if (s.valueType === ValueType.JSON) {
if (parsed[name] !== null && typeof parsed[name] !== 'object') {
- try { parsed[name] = JSON.parse(parsed[name]) } catch (error) { parsed[name] = s.defaultValue }
+ try {
+ parsed[name] = JSON.parse(parsed[name]);
+ } catch (error) {
+ parsed[name] = s.defaultValue;
+ }
} else if (parsed[name] === null) {
- parsed[name] = s.defaultValue
+ parsed[name] = s.defaultValue;
}
}
}
- return parsed
+ return parsed;
}
export function isColumnNameUpdated(prevColumnNames, newColumnNames) {
- if (typeof prevColumnNames === 'undefined') { return true }
+ if (typeof prevColumnNames === 'undefined') {
+ return true;
+ }
- let columnNameUpdated = false
+ let columnNameUpdated = false;
for (let prevColName in prevColumnNames) {
if (!newColumnNames[prevColName]) {
- return true
+ return true;
}
}
if (!columnNameUpdated) {
for (let newColName in newColumnNames) {
if (!prevColumnNames[newColName]) {
- return true
+ return true;
}
}
}
- return false
+ return false;
}
export function updateColumnTypeState(columns, config, columnDefs) {
- const columnTypeState = config.tableColumnTypeState
+ const columnTypeState = config.tableColumnTypeState;
- if (!columnTypeState) { return }
+ if (!columnTypeState) {
+ return;
+ }
// compare objects because order might be changed
- const prevColumnNames = columnTypeState.names || {}
+ const prevColumnNames = columnTypeState.names || {};
const newColumnNames = columns.reduce((acc, c) => {
- const prevColumnType = prevColumnNames[c.name]
+ const prevColumnType = prevColumnNames[c.name];
// use previous column type if exists
if (prevColumnType) {
- acc[c.name] = prevColumnType
+ acc[c.name] = prevColumnType;
} else {
- acc[c.name] = DefaultTableColumnType
+ acc[c.name] = DefaultTableColumnType;
}
- return acc
- }, {})
+ return acc;
+ }, {});
- let columnNameUpdated = isColumnNameUpdated(prevColumnNames, newColumnNames)
+ let columnNameUpdated = isColumnNameUpdated(prevColumnNames, newColumnNames);
if (columnNameUpdated) {
- columnTypeState.names = newColumnNames
- columnTypeState.updated = true
+ columnTypeState.names = newColumnNames;
+ columnTypeState.updated = true;
}
// update `columnDefs[n].type`
for (let i = 0; i < columnDefs.length; i++) {
- const colName = columnDefs[i].name
- columnDefs[i].type = columnTypeState.names[colName]
+ const colName = columnDefs[i].name;
+ columnDefs[i].type = columnTypeState.names[colName];
}
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/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 6b6e36a..f6475cb 100644
--- a/zeppelin-web/src/app/visualization/visualization.js
+++ b/zeppelin-web/src/app/visualization/visualization.js
@@ -16,12 +16,12 @@
* Base class for visualization.
*/
export default class Visualization {
- constructor (targetEl, config) {
- this.targetEl = targetEl
- this.config = config
- this._dirty = false
- this._active = false
- this._emitter = () => {}
+ constructor(targetEl, config) {
+ this.targetEl = targetEl;
+ this.config = config;
+ this._dirty = false;
+ this._active = false;
+ this._emitter = () => {};
}
/**
@@ -29,33 +29,33 @@ export default class Visualization {
* @abstract
* @return {Transformation}
*/
- getTransformation () {
+ getTransformation() {
// override this
- throw new TypeError('Visualization.getTransformation() should be overrided')
+ throw new TypeError('Visualization.getTransformation() should be overrided');
}
/**
* Method will be invoked when data or configuration changed.
* @abstract
*/
- render (tableData) {
+ render(tableData) {
// override this
- throw new TypeError('Visualization.render() should be overrided')
+ throw new TypeError('Visualization.render() should be overrided');
}
/**
* Refresh visualization.
*/
- refresh () {
+ refresh() {
// override this
- console.warn('A chart is missing refresh function, it might not work preperly')
+ console.warn('A chart is missing refresh function, it might not work preperly');
}
/**
* Method will be invoked when visualization need to be destroyed.
* Don't need to destroy this.targetEl.
*/
- destroy () {
+ destroy() {
// override this
}
@@ -65,113 +65,117 @@ export default class Visualization {
* scope : an object to bind to template scope
* }
*/
- getSetting () {
+ getSetting() {
// override this
}
/**
* Activate. Invoked when visualization is selected.
*/
- activate () {
+ activate() {
if (!this._active || this._dirty) {
- this.refresh()
- this._dirty = false
+ this.refresh();
+ this._dirty = false;
}
- this._active = true
+ this._active = true;
}
/**
* Deactivate. Invoked when visualization is de selected.
*/
- deactivate () {
- this._active = false
+ deactivate() {
+ this._active = false;
}
/**
* Is active.
*/
- isActive () {
- return this._active
+ isActive() {
+ return this._active;
}
/**
* When window or paragraph is resized.
*/
- resize () {
+ resize() {
if (this.isActive()) {
- this.refresh()
+ this.refresh();
} else {
- this._dirty = true
+ this._dirty = true;
}
}
/**
* Set new config.
*/
- setConfig (config) {
- this.config = config
+ setConfig(config) {
+ this.config = config;
if (this.isActive()) {
- this.refresh()
+ this.refresh();
} else {
- this._dirty = true
+ this._dirty = true;
}
}
/**
* Emit config. config will sent to server and saved.
*/
- emitConfig (config) {
- this._emitter(config)
+ emitConfig(config) {
+ this._emitter(config);
}
/**
* Render setting.
*/
- renderSetting (targetEl) {
- let setting = this.getSetting()
+ renderSetting(targetEl) {
+ let setting = this.getSetting();
if (!setting) {
- return
+ return;
}
// already readered
if (this._scope) {
- let self = this
- this._scope.$apply(function () {
+ let self = this;
+ this._scope.$apply(function() {
for (let k in setting.scope) {
- self._scope[k] = setting.scope[k]
+ if (setting.scope.hasOwnProperty(k)) {
+ self._scope[k] = setting.scope[k];
+ }
}
for (let k in self._prevSettingScope) {
if (!setting.scope[k]) {
- self._scope[k] = setting.scope[k]
+ self._scope[k] = setting.scope[k];
}
}
- })
- return
+ });
+ return;
} else {
- this._prevSettingScope = setting.scope
+ this._prevSettingScope = setting.scope;
}
- let scope = this._createNewScope()
+ let scope = this._createNewScope();
for (let k in setting.scope) {
- scope[k] = setting.scope[k]
+ if (setting.scope.hasOwnProperty(k)) {
+ scope[k] = setting.scope[k];
+ }
}
- let template = setting.template
+ let template = setting.template;
if (template.split('\n').length === 1 &&
template.endsWith('.html')) { // template is url
- this._templateRequest(template).then(t =>
+ this._templateRequest(template).then((t) =>
_renderSetting(this, targetEl, t, scope)
- )
+ );
} else {
- _renderSetting(this, targetEl, template, scope)
+ _renderSetting(this, targetEl, template, scope);
}
}
}
-function _renderSetting (instance, targetEl, template, scope) {
- instance._targetEl = targetEl
- targetEl.html(template)
- instance._compile(targetEl.contents())(scope)
- instance._scope = scope
+function _renderSetting(instance, targetEl, template, scope) {
+ instance._targetEl = targetEl;
+ targetEl.html(template);
+ instance._compile(targetEl.contents())(scope);
+ instance._scope = scope;
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/components/array-ordering/array-ordering.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/array-ordering/array-ordering.service.js b/zeppelin-web/src/components/array-ordering/array-ordering.service.js
index 6fa1ad9..1f275e6 100644
--- a/zeppelin-web/src/components/array-ordering/array-ordering.service.js
+++ b/zeppelin-web/src/components/array-ordering/array-ordering.service.js
@@ -12,51 +12,51 @@
* limitations under the License.
*/
-angular.module('zeppelinWebApp').service('arrayOrderingSrv', ArrayOrderingService)
+angular.module('zeppelinWebApp').service('arrayOrderingSrv', ArrayOrderingService);
function ArrayOrderingService(TRASH_FOLDER_ID) {
- 'ngInject'
+ 'ngInject';
- let arrayOrderingSrv = this
+ let arrayOrderingSrv = this;
- this.noteListOrdering = function (note) {
+ this.noteListOrdering = function(note) {
if (note.id === TRASH_FOLDER_ID) {
- return '\uFFFF'
+ return '\uFFFF';
}
- return arrayOrderingSrv.getNoteName(note)
- }
+ return arrayOrderingSrv.getNoteName(note);
+ };
- this.getNoteName = function (note) {
+ this.getNoteName = function(note) {
if (note.name === undefined || note.name.trim() === '') {
- return 'Note ' + note.id
+ return 'Note ' + note.id;
} else {
- return note.name
+ return note.name;
}
- }
+ };
- this.noteComparator = function (v1, v2) {
- let note1 = v1.value || v1
- let note2 = v2.value || v2
+ this.noteComparator = function(v1, v2) {
+ let note1 = v1.value || v1;
+ let note2 = v2.value || v2;
if (note1.id === TRASH_FOLDER_ID) {
- return 1
+ return 1;
}
if (note2.id === TRASH_FOLDER_ID) {
- return -1
+ return -1;
}
if (note1.children === undefined && note2.children !== undefined) {
- return 1
+ return 1;
}
if (note1.children !== undefined && note2.children === undefined) {
- return -1
+ return -1;
}
- let noteName1 = arrayOrderingSrv.getNoteName(note1)
- let noteName2 = arrayOrderingSrv.getNoteName(note2)
+ let noteName1 = arrayOrderingSrv.getNoteName(note1);
+ let noteName2 = arrayOrderingSrv.getNoteName(note2);
- return noteName1.localeCompare(noteName2)
- }
+ return noteName1.localeCompare(noteName2);
+ };
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/components/base-url/base-url.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/base-url/base-url.service.js b/zeppelin-web/src/components/base-url/base-url.service.js
index 6ef55b9..845293c 100644
--- a/zeppelin-web/src/components/base-url/base-url.service.js
+++ b/zeppelin-web/src/components/base-url/base-url.service.js
@@ -12,39 +12,39 @@
* limitations under the License.
*/
-angular.module('zeppelinWebApp').service('baseUrlSrv', BaseUrlService)
+angular.module('zeppelinWebApp').service('baseUrlSrv', BaseUrlService);
function BaseUrlService() {
- this.getPort = function () {
- let port = Number(location.port)
+ this.getPort = function() {
+ let port = Number(location.port);
if (!port) {
- port = 80
+ port = 80;
if (location.protocol === 'https:') {
- port = 443
+ port = 443;
}
}
// Exception for when running locally via grunt
if (port === process.env.WEB_PORT) {
- port = process.env.SERVER_PORT
+ port = process.env.SERVER_PORT;
}
- return port
- }
+ return port;
+ };
- this.getWebsocketUrl = function () {
- let wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+ this.getWebsocketUrl = function() {
+ let wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
return wsProtocol + '//' + location.hostname + ':' + this.getPort() +
- skipTrailingSlash(location.pathname) + '/ws'
- }
+ skipTrailingSlash(location.pathname) + '/ws';
+ };
this.getBase = function() {
- return location.protocol + '//' + location.hostname + ':' + this.getPort() + location.pathname
- }
+ return location.protocol + '//' + location.hostname + ':' + this.getPort() + location.pathname;
+ };
- this.getRestApiBase = function () {
- return skipTrailingSlash(this.getBase()) + '/api'
- }
+ this.getRestApiBase = function() {
+ return skipTrailingSlash(this.getBase()) + '/api';
+ };
- const skipTrailingSlash = function (path) {
- return path.replace(/\/$/, '')
- }
+ const skipTrailingSlash = function(path) {
+ return path.replace(/\/$/, '');
+ };
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/components/login/login.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/login/login.controller.js b/zeppelin-web/src/components/login/login.controller.js
index 9190950..9a42d5f 100644
--- a/zeppelin-web/src/components/login/login.controller.js
+++ b/zeppelin-web/src/components/login/login.controller.js
@@ -12,73 +12,73 @@
* limitations under the License.
*/
-angular.module('zeppelinWebApp').controller('LoginCtrl', LoginCtrl)
+angular.module('zeppelinWebApp').controller('LoginCtrl', LoginCtrl);
-function LoginCtrl ($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv, $location, $timeout) {
- 'ngInject'
+function LoginCtrl($scope, $rootScope, $http, $httpParamSerializer, baseUrlSrv, $location, $timeout) {
+ 'ngInject';
- $scope.SigningIn = false
- $scope.loginParams = {}
- $scope.login = function () {
- $scope.SigningIn = true
+ $scope.SigningIn = false;
+ $scope.loginParams = {};
+ $scope.login = function() {
+ $scope.SigningIn = true;
$http({
method: 'POST',
url: baseUrlSrv.getRestApiBase() + '/login',
headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
+ 'Content-Type': 'application/x-www-form-urlencoded',
},
data: $httpParamSerializer({
'userName': $scope.loginParams.userName,
- 'password': $scope.loginParams.password
- })
- }).then(function successCallback (response) {
- $rootScope.ticket = response.data.body
- angular.element('#loginModal').modal('toggle')
- $rootScope.$broadcast('loginSuccess', true)
- $rootScope.userName = $scope.loginParams.userName
- $scope.SigningIn = false
+ 'password': $scope.loginParams.password,
+ }),
+ }).then(function successCallback(response) {
+ $rootScope.ticket = response.data.body;
+ angular.element('#loginModal').modal('toggle');
+ $rootScope.$broadcast('loginSuccess', true);
+ $rootScope.userName = $scope.loginParams.userName;
+ $scope.SigningIn = false;
// redirect to the page from where the user originally was
if ($location.search() && $location.search()['ref']) {
- $timeout(function () {
- let redirectLocation = $location.search()['ref']
- $location.$$search = {}
- $location.path(redirectLocation)
- }, 100)
+ $timeout(function() {
+ let redirectLocation = $location.search()['ref'];
+ $location.$$search = {};
+ $location.path(redirectLocation);
+ }, 100);
}
- }, function errorCallback (errorResponse) {
- $scope.loginParams.errorText = 'The username and password that you entered don\'t match.'
- $scope.SigningIn = false
- })
- }
+ }, function errorCallback(errorResponse) {
+ $scope.loginParams.errorText = 'The username and password that you entered don\'t match.';
+ $scope.SigningIn = false;
+ });
+ };
- let initValues = function () {
+ let initValues = function() {
$scope.loginParams = {
userName: '',
- password: ''
- }
- }
+ password: '',
+ };
+ };
// handle session logout message received from WebSocket
- $rootScope.$on('session_logout', function (event, data) {
+ $rootScope.$on('session_logout', function(event, data) {
if ($rootScope.userName !== '') {
- $rootScope.userName = ''
- $rootScope.ticket = undefined
+ $rootScope.userName = '';
+ $rootScope.ticket = undefined;
- setTimeout(function () {
- $scope.loginParams = {}
- $scope.loginParams.errorText = data.info
- angular.element('.nav-login-btn').click()
- }, 1000)
- let locationPath = $location.path()
- $location.path('/').search('ref', locationPath)
+ setTimeout(function() {
+ $scope.loginParams = {};
+ $scope.loginParams.errorText = data.info;
+ angular.element('.nav-login-btn').click();
+ }, 1000);
+ let locationPath = $location.path();
+ $location.path('/').search('ref', locationPath);
}
- })
+ });
/*
** $scope.$on functions below
*/
- $scope.$on('initLoginValues', function () {
- initValues()
- })
+ $scope.$on('initLoginValues', function() {
+ initValues();
+ });
}
http://git-wip-us.apache.org/repos/asf/zeppelin/blob/ea2c9447/zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js b/zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js
index e4280e8..58629af 100644
--- a/zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js
+++ b/zeppelin-web/src/components/navbar/expand-collapse/expand-collapse.directive.js
@@ -12,37 +12,37 @@
* limitations under the License.
*/
-import './expand-collapse.css'
+import './expand-collapse.css';
-angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapseDirective)
+angular.module('zeppelinWebApp').directive('expandCollapse', expandCollapseDirective);
function expandCollapseDirective() {
return {
restrict: 'EA',
- link: function (scope, element, attrs) {
- angular.element(element).click(function (event) {
+ link: function(scope, element, attrs) {
+ angular.element(element).click(function(event) {
if (angular.element(element).next('.expandable:visible').length > 1) {
- angular.element(element).next('.expandable:visible').slideUp('slow')
- angular.element(element).find('i.fa-folder-open').toggleClass('fa-folder fa-folder-open')
+ angular.element(element).next('.expandable:visible').slideUp('slow');
+ angular.element(element).find('i.fa-folder-open').toggleClass('fa-folder fa-folder-open');
} else {
- angular.element(element).next('.expandable').first().slideToggle('200', function () {
+ angular.element(element).next('.expandable').first().slideToggle('200', function() {
// do not toggle trash folder
if (angular.element(element).find('.fa-trash-o').length === 0) {
- angular.element(element).find('i').first().toggleClass('fa-folder fa-folder-open')
+ angular.element(element).find('i').first().toggleClass('fa-folder fa-folder-open');
}
- })
+ });
}
- let target = event.target
+ let target = event.target;
// add note
if (target.classList !== undefined && target.classList.contains('fa-plus') &&
target.tagName.toLowerCase() === 'i') {
- return
+ return;
}
- event.stopPropagation()
- })
- }
- }
+ event.stopPropagation();
+ });
+ },
+ };
}