rebase master

zeppelin-web/src/app/visualization/builtins/visualization-barchart.js

@@ -45,6 +45,7 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
       true);
 
     super.render(d3Data);
+    this.config.changeXLabel(this.config.xLabelStatus);
   };
 
   /**
@@ -57,19 +58,99 @@ export default class BarchartVisualization extends Nvd3ChartVisualization {
 
   configureChart(chart) {
     var self = this;
+    var configObj = self.config;
+
     chart.yAxis.axisLabelDistance(50);
     chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d);});
 
-    this.chart.stacked(this.config.stacked);
+    self.chart.stacked(this.config.stacked);
+
+    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;
+        case 'rotate':
+          self.chart._options['showXAxis'] = true;
+          self.chart._options['margin'] = {bottom: 140};
+          self.chart.xAxis.rotateLabels(-45);
+          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.config.isXLabelStatus = function(type) {
+      if (configObj.xLabelStatus === type) {
+        return true;
+      } else {
+        return false;
+      }
+    };
 
-    var self = this;
     this.chart.dispatch.on('stateChange', function(s) {
-      self.config.stacked = s.stacked;
+      configObj.stacked = s.stacked;
 
       // give some time to animation finish
       setTimeout(function() {
-        self.emitConfig(self.config);
+        self.emitConfig(configObj);
       }, 500);
     });
   };
+
+
+
+  getSetting(chart) {
+    var self = this;
+    var configObj = self.config;
+
+    // default to visualize xLabel
+    if (typeof(configObj.xLabelStatus) === 'undefined') {
+      configObj.changeXLabel('default');
+    }
+
+    return {
+      template: `<div>
+          xAxis :
+      </div>
+
+      <div class='btn-group'>
+        <button type="button"
+              class="xLabel btn btn-default btn-sm"
+              ng-class="{'active' : this.config.isXLabelStatus('default')}"
+              ng-click="save('default')" >
+            Default
+        </button>
+
+        <button type="button"
+              class="btn btn-default btn-sm"
+              ng-class="{'active' : this.config.isXLabelStatus('rotate')}"
+              ng-click="save('rotate')" >
+            Rotate
+        </button>
+
+        <button type="button"
+              class="btn btn-default btn-sm"
+              ng-class="{'active' : this.config.isXLabelStatus('hide')}"
+              ng-click="save('hide')" >
+            Hide
+        </button>
+      </div>`,
+      scope: {
+        config: configObj,
+        save: function(type) {
+          configObj.changeXLabel(type);
+          self.emitConfig(configObj);
+        }
+      }
+    };
+  };
 }

zeppelin-web/src/app/visualization/builtins/visualization-nvd3chart.js

@@ -44,7 +44,7 @@ export default class Nvd3ChartVisualization extends Visualization {
     var 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.
+    // still, since dataset is large, the chart content sequentially appears like animated
     try {
       if (d3g[0].values.length > numberOfDataThreshold) {
         animationDuration = 0;