Convert areachart

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()=='stackedAreaChart'"
-       id="p{{paragraph.id}}_stackedAreaChart">
-    <svg></svg>
-  </div>
-
   <div ng-if="getGraphMode()=='lineChart'"
        id="p{{paragraph.id}}_lineChart">
     <svg></svg>

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

@@ -119,6 +119,12 @@
         name: 'Pie Chart',
         icon: 'fa fa-pie-chart',
         transformation: 'pivot'
+      },
+      {
+        id: 'areaChart',
+        name: 'Area Chart',
+        icon: 'fa fa-area-chart',
+        transformation: 'pivot'
       }
     ];
 
@@ -137,6 +143,10 @@
       'pieChart': {
         class: zeppelin.PiechartVisualization,
         instance: undefined
+      },
+      'areaChart': {
+        class: zeppelin.AreachartVisualization,
+        instance: undefined
       }
     };
 

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

@@ -0,0 +1,68 @@
+/*
+ * 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 area chart
+ */
+zeppelin.AreachartVisualization = function(targetEl, config) {
+  zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);
+
+  var PivotTransformation = zeppelin.PivotTransformation;
+  this.pivot = new PivotTransformation(config);
+  this.xLables = [];
+};
+
+zeppelin.AreachartVisualization.prototype = Object.create(zeppelin.Nvd3ChartVisualization.prototype);
+
+zeppelin.AreachartVisualization.prototype.type = function() {
+  return 'stackedAreaChart';
+};
+
+zeppelin.AreachartVisualization.prototype.getTransformation = function() {
+  return this.pivot;
+};
+
+zeppelin.AreachartVisualization.prototype.render = function(tableData) {
+  var pivot = this.pivot.transform(tableData);
+  var d3Data = this.d3DataFromPivot(
+    pivot.schema,
+    pivot.rows,
+    pivot.keys,
+    pivot.groups,
+    pivot.values,
+    false,
+    true,
+    false);
+
+  this.xLabels = d3Data.xLabels;
+  zeppelin.Nvd3ChartVisualization.prototype.render.call(this, d3Data);
+};
+
+/**
+ * Set new config
+ */
+zeppelin.AreachartVisualization.prototype.setConfig = function(config) {
+  zeppelin.Nvd3ChartVisualization.prototype.setConfig.call(this, config);
+  this.pivot.setConfig(config);
+};
+
+zeppelin.AreachartVisualization.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);});
+  chart.yAxis.axisLabelDistance(50);
+  chart.useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691)
+};

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

@@ -15,7 +15,7 @@
 'use strict';
 
 /**
- * Visualize data in table format
+ * Visualize data in bar char
  */
 zeppelin.BarchartVisualization = function(targetEl, config) {
   zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);

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

@@ -15,7 +15,7 @@
 'use strict';
 
 /**
- * Visualize data in table format
+ * Visualize data in pie chart
  */
 zeppelin.PiechartVisualization = function(targetEl, config) {
   zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);

zeppelin-web/src/index.html

@@ -161,6 +161,7 @@ limitations under the License.
     <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/visualization/builtins/visualization-areachart.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>