Convert piechart

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

@@ -22,11 +22,6 @@ limitations under the License.
        ng-show="getGraphMode()==viz.id">
   </div>
 
-  <div ng-if="getGraphMode()=='pieChart'"
-       id="p{{paragraph.id}}_pieChart">
-    <svg></svg>
-  </div>
-
   <div ng-if="getGraphMode()=='stackedAreaChart'"
        id="p{{paragraph.id}}_stackedAreaChart">
     <svg></svg>

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

@@ -113,6 +113,12 @@
         name: 'Bar Chart',
         icon: 'fa fa-bar-chart',
         transformation: 'pivot'
+      },
+      {
+        id: 'pieChart',
+        name: 'Pie Chart',
+        icon: 'fa fa-pie-chart',
+        transformation: 'pivot'
       }
     ];
 
@@ -127,6 +133,10 @@
       'multiBarChart': {
         class: zeppelin.BarchartVisualization,
         instance: undefined
+      },
+      'pieChart': {
+        class: zeppelin.PiechartVisualization,
+        instance: undefined
       }
     };
 

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

@@ -58,9 +58,7 @@ zeppelin.BarchartVisualization.prototype.setConfig = function(config) {
 };
 
 zeppelin.BarchartVisualization.prototype.configureChart = function(chart) {
-  // override this to configure chart
   var self = this;
   chart.yAxis.axisLabelDistance(50);
   chart.yAxis.tickFormat(function(d) {return self.yAxisTickFormat(d);});
-  console.log('configure chart');
 };

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

@@ -233,7 +233,6 @@ zeppelin.Nvd3ChartVisualization.prototype.d3DataFromPivot = function(
         d3g[d3gIndex].key = colName;
       }
     }
-
   }
 
   return {

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

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+'use strict';
+
+/**
+ * Visualize data in table format
+ */
+zeppelin.PiechartVisualization = function(targetEl, config) {
+  zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);
+
+  var PivotTransformation = zeppelin.PivotTransformation;
+  this.pivot = new PivotTransformation(config);
+};
+
+zeppelin.PiechartVisualization.prototype = Object.create(zeppelin.Nvd3ChartVisualization.prototype);
+
+zeppelin.PiechartVisualization.prototype.type = function() {
+  return 'pieChart';
+};
+
+zeppelin.PiechartVisualization.prototype.getTransformation = function() {
+  return this.pivot;
+};
+
+zeppelin.PiechartVisualization.prototype.render = function(tableData) {
+  var pivot = this.pivot.transform(tableData);
+  var d3Data = this.d3DataFromPivot(
+    pivot.schema,
+    pivot.rows,
+    pivot.keys,
+    pivot.groups,
+    pivot.values,
+    true,
+    false,
+    false);
+
+  var d = d3Data.d3g;
+  var d3g = [];
+  if (d.length > 0) {
+    for (var i = 0; i < d[0].values.length ; i++) {
+      var e = d[0].values[i];
+      d3g.push({
+        label: e.x,
+        value: e.y
+      });
+    }
+  }
+  zeppelin.Nvd3ChartVisualization.prototype.render.call(this, {d3g: d3g});
+};
+
+/**
+ * Set new config
+ */
+zeppelin.PiechartVisualization.prototype.setConfig = function(config) {
+  zeppelin.Nvd3ChartVisualization.prototype.setConfig.call(this, config);
+  this.pivot.setConfig(config);
+};
+
+zeppelin.PiechartVisualization.prototype.configureChart = function(chart) {
+  chart.x(function(d) { return d.label;}).y(function(d) { return d.value;});
+};

zeppelin-web/src/index.html

@@ -160,6 +160,7 @@ limitations under the License.
     <script src="app/visualization/builtins/visualization-table.js"></script>
     <script src="app/visualization/builtins/visualization-nvd3chart.js"></script>
     <script src="app/visualization/builtins/visualization-barchart.js"></script>
+    <script src="app/visualization/builtins/visualization-piechart.js"></script>
     <script src="app/notebook/notebook.controller.js"></script>
     <script src="app/jobmanager/jobmanager.controller.js"></script>
     <script src="app/jobmanager/jobs/job.controller.js"></script>