Handle resize correclty.

zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html

@@ -21,7 +21,7 @@ limitations under the License.
           ng-if="paragraph.result.type == 'TABLE'"
           ng-repeat="viz in builtInTableDataVisualizationList track by $index"
           ng-class="{'active' : isGraphMode(viz.id)}"
-          ng-click="setGraphMode(viz.id, true)"
+          ng-click="setGraphMode(viz.id, true, false)"
           tooltip="{{viz.name}}" tooltip-placement="bottom"><i ng-class="viz.icon"></i>
   </button>
 

zeppelin-web/src/app/notebook/paragraph/paragraph-pivot.html

@@ -20,11 +20,11 @@ limitations under the License.
   All fields:
   <div class="allFields row">
     <ul class="noDot">
-      <li class="liVertical" ng-repeat="col in paragraph.result.columnNames">
+      <li class="liVertical" ng-repeat="col in tableDataColumns">
         <div class="btn btn-default btn-xs"
              data-drag="true"
              data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
-             ng-model="paragraph.result.columnNames"
+             ng-model="tableDataColumns"
              jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}">
            {{col.name | limitTo: 30}}{{col.name.length > 30 ? '...' : ''}}
         </div>

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -135,6 +135,9 @@
      */
     var tableData;
 
+    // available columns in tabledata
+    $scope.tableDataColumns = [];
+
     // Controller init
     $scope.init = function(newParagraph, note) {
       $scope.paragraph = newParagraph;
@@ -157,6 +160,7 @@
         var TableData = zeppelin.TableData;
         tableData = new TableData();
         tableData.loadParagraphResult($scope.paragraph.result);
+        $scope.tableDataColumns = tableData.columns;
         $scope.setGraphMode($scope.getGraphMode(), false, false);
       } else if ($scope.getResultType() === 'HTML') {
         $scope.renderHtml();
@@ -1011,8 +1015,17 @@
             };
             $timeout(retryRenderer);
           } else if (refresh) {
-            builtInViz.instance.targetEl.height(height);
+            // when graph options or data are changed
+            builtInViz.instance.setConfig($scope.paragraph.config.graph);
             builtInViz.instance.render(tableData);
+          } else {
+            /* Following line is required to handle the case
+             *  1. select a chart type
+             *  2. resize browser window
+             *  3. select another chart
+             * The chart selected on step 3 will be displayed in incorrect size
+             */
+            $timeout(function() {emitWindowResizeEvent();}, 1);
           }
         }
 
@@ -1024,6 +1037,29 @@
       }
     };
 
+    var emitWindowResizeEvent = function() {
+      var eventName = 'resize';
+      var el = window;
+      var event;
+      if (document.createEvent) {
+        event = document.createEvent('HTMLEvents');
+        event.initEvent(eventName,true,true);
+      } else if (document.createEventObject) { // IE < 9
+        event = document.createEventObject();
+        event.eventType = eventName;
+      }
+      event.eventName = eventName;
+      if (el.dispatchEvent) {
+        el.dispatchEvent(event);
+      } else if (el.fireEvent && el['on' + eventName]) {  // IE < 9
+        el.fireEvent('on' + event.eventType,event);
+      } else if (el[eventName]) {
+        el[eventName]();
+      } else if (el['on' + eventName]) {
+        el['on' + eventName]();
+      }
+    };
+
     var setNewMode = function(newMode) {
       var newConfig = angular.copy($scope.paragraph.config);
       var newParams = angular.copy($scope.paragraph.settings.params);
@@ -2304,6 +2340,7 @@
             var TableData = zeppelin.TableData;
             tableData = new TableData();
             tableData.loadParagraphResult($scope.paragraph.result);
+            $scope.tableDataColumns = tableData.columns;
             clearUnknownColsFromGraphOption();
             selectDefaultColsForGraphOption();
           }

zeppelin-web/src/app/tabledata/pivot.js

@@ -29,6 +29,7 @@ zeppelin.PivotTransformation.prototype = Object.create(zeppelin.Transformation.p
  * Method will be invoked when tableData or config changes
  */
 zeppelin.PivotTransformation.prototype.transform = function(tableData) {
+  console.log('pivot config %o', this.config);
   return this.pivot(
     tableData,
     this.config.keys,
@@ -153,7 +154,7 @@ zeppelin.PivotTransformation.prototype.pivot = function(data, keys, groups, valu
     }
   }
 
-  console.log('schema=%o, rows=%o', schema, rows);
+  //console.log('schema=%o, rows=%o', schema, rows);
   return {
     keys: keys,
     groups: groups,

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

@@ -49,6 +49,14 @@ zeppelin.BarchartVisualization.prototype.render = function(tableData) {
   zeppelin.Nvd3ChartVisualization.prototype.render.call(this, d3Data);
 };
 
+/**
+ * Set new config
+ */
+zeppelin.BarchartVisualization.prototype.setConfig = function(config) {
+  zeppelin.Nvd3ChartVisualization.prototype.setConfig.call(this, config);
+  this.pivot.setConfig(config);
+};
+
 zeppelin.BarchartVisualization.prototype.configureChart = function(chart) {
   // override this to configure chart
   var self = this;

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

@@ -19,7 +19,7 @@
  */
 zeppelin.Nvd3ChartVisualization = function(targetEl, config) {
   zeppelin.Visualization.call(this, targetEl, config);
-  this.targetEl.append("<svg></svg>");
+  this.targetEl.append('<svg></svg>');
 };
 
 zeppelin.Nvd3ChartVisualization.prototype = Object.create(zeppelin.Visualization.prototype);
@@ -32,6 +32,7 @@ zeppelin.Nvd3ChartVisualization.prototype.render = function(data) {
     this.chart = nv.models[type]();
   }
 
+  console.log('render nvd3 chart');
   this.configureChart(this.chart);
 
   var animationDuration = 300;
@@ -54,16 +55,9 @@ zeppelin.Nvd3ChartVisualization.prototype.render = function(data) {
     .duration(animationDuration)
     .call(this.chart);
   d3.select('#' + this.targetEl[0].id + ' svg').style.height = height + 'px';
-  this.chart.update();
   nv.utils.windowResize(this.chart.update);
 };
 
-zeppelin.Nvd3ChartVisualization.prototype.onResize = function() {
-  if (this.chart) {
-    this.chart.update();
-  }
-};
-
 zeppelin.Nvd3ChartVisualization.prototype.type = function() {
   // override this and return chart type
 };

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

@@ -39,10 +39,10 @@ zeppelin.Visualization.prototype.render = function(tableData) {
 };
 
 /**
- * Invoked when container is resized
+ * Set new config
  */
-zeppelin.Visualization.prototype.onResize = function() {
-  // override this
+zeppelin.Visualization.prototype.setConfig = function(config) {
+  this.config = config;
 };
 
 /**
@@ -52,8 +52,3 @@ zeppelin.Visualization.prototype.onResize = function() {
 zeppelin.Visualization.prototype.destroy = function() {
   // override this
 };
-
-zeppelin.Visualization.prototype.setHeight = function(height) {
-  this.targetEl.height(height);
-  this.onResize();
-};