Convert linechart

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

@@ -22,16 +22,6 @@ limitations under the License.
        ng-show="getGraphMode()==viz.id">
   </div>
 
-  <div ng-if="getGraphMode()=='lineChart'"
-       id="p{{paragraph.id}}_lineChart">
-    <svg></svg>
-  </div>
-
-  <div ng-if="getGraphMode()=='lineWithFocusChart'"
-       id="p{{paragraph.id}}_lineWithFocusChart">
-    <svg></svg>
-  </div>
-
   <div ng-if="getGraphMode()=='scatterChart'"
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>

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

@@ -24,7 +24,7 @@ limitations under the License.
     <label>
       <input type="checkbox"
              ng-model="paragraph.config.graph.lineWithFocus"
-             ng-click="toggleLineWithFocus()" />
+             ng-click="onGraphOptionChange()" />
       show line chart with focus
     </label>
   </div>

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

@@ -121,10 +121,16 @@
         transformation: 'pivot'
       },
       {
-        id: 'areaChart',
+        id: 'stackedAreaChart',
         name: 'Area Chart',
         icon: 'fa fa-area-chart',
         transformation: 'pivot'
+      },
+      {
+        id: 'lineChart',
+        name: 'Line Chart',
+        icon: 'fa fa-line-chart',
+        transformation: 'pivot'
       }
     ];
 
@@ -144,9 +150,13 @@
         class: zeppelin.PiechartVisualization,
         instance: undefined
       },
-      'areaChart': {
+      'stackedAreaChart': {
         class: zeppelin.AreachartVisualization,
         instance: undefined
+      },
+      'lineChart': {
+        class: zeppelin.LinechartVisualization,
+        instance: undefined
       }
     };
 
@@ -580,22 +590,6 @@
       commitParagraph($scope.paragraph.title, $scope.paragraph.text, newConfig, newParams);
     };
 
-    $scope.toggleLineWithFocus = function() {
-      var mode = $scope.getGraphMode();
-
-      if (mode === 'lineWithFocusChart') {
-        $scope.setGraphMode('lineChart', true);
-        return true;
-      }
-
-      if (mode === 'lineChart') {
-        $scope.setGraphMode('lineWithFocusChart', true);
-        return true;
-      }
-
-      return false;
-    };
-
     $scope.loadForm = function(formulaire, params) {
       var value = formulaire.defaultValue;
       if (params[formulaire.name]) {

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

@@ -62,7 +62,7 @@ zeppelin.AreachartVisualization.prototype.setConfig = function(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.yAxisTickFormat(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-linechart.js

@@ -0,0 +1,86 @@
+/*
+ * 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 line chart
+ */
+zeppelin.LinechartVisualization = function(targetEl, config) {
+  zeppelin.Nvd3ChartVisualization.call(this, targetEl, config);
+
+  var PivotTransformation = zeppelin.PivotTransformation;
+  this.pivot = new PivotTransformation(config);
+  this.xLables = [];
+};
+
+zeppelin.LinechartVisualization.prototype = Object.create(zeppelin.Nvd3ChartVisualization.prototype);
+
+zeppelin.LinechartVisualization.prototype.type = function() {
+  if (this.config.lineWithFocus) {
+    return 'lineWithFocusChart';
+  } else {
+    return 'lineChart';
+  }
+};
+
+zeppelin.LinechartVisualization.prototype.getTransformation = function() {
+  return this.pivot;
+};
+
+zeppelin.LinechartVisualization.prototype.render = function(tableData) {
+  this.tableData = 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.LinechartVisualization.prototype.setConfig = function(config) {
+  zeppelin.Nvd3ChartVisualization.prototype.setConfig.call(this, config);
+  this.pivot.setConfig(config);
+
+  // change mode
+  if (this.currentMode !== config.lineWithFocus) {
+    zeppelin.Nvd3ChartVisualization.prototype.destroy.call(this);
+    this.currentMode = config.lineWithFocus;
+  }
+};
+
+zeppelin.LinechartVisualization.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, 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)
+  }
+  if (this.config.forceY) {
+    chart.forceY([0]); // force y-axis minimum to 0 for line chart.
+  } else {
+    chart.forceY([]);
+  }
+};

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

@@ -32,7 +32,6 @@ zeppelin.Nvd3ChartVisualization.prototype.render = function(data) {
     this.chart = nv.models[type]();
   }
 
-  console.log('render nvd3 chart');
   this.configureChart(this.chart);
 
   var animationDuration = 300;
@@ -240,3 +239,14 @@ zeppelin.Nvd3ChartVisualization.prototype.d3DataFromPivot = function(
     d3g: d3g
   };
 };
+
+/**
+ * method will be invoked when visualization need to be destroyed.
+ * Don't need to destroy this.targetEl.
+ */
+zeppelin.Visualization.prototype.destroy = function() {
+  if (this.chart) {
+    d3.selectAll('#' + this.targetEl[0].id + ' svg > *').remove();
+    this.chart = undefined;
+  }
+};

zeppelin-web/src/index.html

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