Zeppelin 1283

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

@@ -126,7 +126,7 @@
         </ul>
       </span>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <span class="columns lightBold">
         group
         <ul data-drop="true"
@@ -142,7 +142,7 @@
         </ul>
       </span>
     </div>
-    <div class="col-md-3">
+    <div class="col-md-2">
       <span class="columns lightBold">
         size
         <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
@@ -164,5 +164,24 @@
         </ul>
       </span>
     </div>
+    <div class="col-md-2">
+      <span class="columns lightBold">
+        label
+        <a tabindex="0" class="fa fa-info-circle" role="button" popover-placement="top"
+           popover-trigger="focus"
+           popover-html-unsafe="<li>Data from given column will be put under label caption of each point in chart.</li>"></a>
+        <ul data-drop="true"
+            ng-model="paragraph.config.graph.scatter.labels"
+            jqyoui-droppable="{onDrop:'onGraphOptionChange()'}"
+            class="list-unstyled"
+            style="height:36px">
+          <li ng-if="paragraph.config.graph.scatter.labels">
+            <div class="btn btn-danger btn-xs" style="color:white">
+              {{paragraph.config.graph.scatter.labels.name}} <span class="fa fa-close" ng-click="removeScatterOptionLabels($index)"></span>
+            </div>
+          </li>
+        </ul>
+      </span>
+    </div>
   </div>
 </div>

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

@@ -1179,6 +1179,12 @@
       $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
     };
 
+    $scope.removeScatterOptionLabels = function(idx) {
+      $scope.paragraph.config.graph.scatter.labels = null;
+      clearUnknownColsFromGraphOption();
+      $scope.setGraphMode($scope.paragraph.config.graph.mode, true, false);
+    };
+
     /* Clear unknown columns from graph option */
     var clearUnknownColsFromGraphOption = function() {
       var unique = function(list) {

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

@@ -49,6 +49,11 @@ zeppelin.ScatterchartVisualization.prototype.configureChart = function(chart) {
   // configure how the tooltip looks.
   chart.tooltipContent(function(key, x, y, graph, data) {
     var tooltipContent = '<h3>' + key + '</h3>';
+
+    if (self.config.scatter.labels) {
+      tooltipContent += '<p>' + data.point.label + '</p>';
+    }
+
     if (self.config.scatter.size &&
       self.isValidSizeOption(self.config.scatter, self.tableData.rows)) {
       tooltipContent += '<p>' + data.point.size + '</p>';
@@ -66,6 +71,7 @@ zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, re
   var yAxis = this.config.scatter.yAxis;
   var group = this.config.scatter.group;
   var size = this.config.scatter.size;
+  var labels = this.config.scatter.labels;
 
   var xValues = [];
   var yValues = [];
@@ -82,6 +88,7 @@ zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, re
   var colIdx = 0;
   var grpIdx = 0;
   var grpName = '';
+  var labelValue = '';
 
   var xValue;
   var yValue;
@@ -140,6 +147,9 @@ zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, re
     if (group) {
       grpName = row[group.index];
     }
+    if (labels) {
+      labelValue = row[labels.index];
+    }
     var sz = (isAllDiscrete) ? row[row.length - 1] : ((size) ? row[size.index] : 1);
 
     if (grpNameIndex[grpName] === undefined) {
@@ -167,7 +177,8 @@ zeppelin.ScatterchartVisualization.prototype.setScatterChart = function(data, re
     d3g[grpNameIndex[grpName]].values.push({
       x: xAxis ? (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) : 0,
       y: yAxis ? (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) : 0,
-      size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz)
+      size: isNaN(parseFloat(sz)) ? 1 : parseFloat(sz),
+      label: labelValue,
     });
   }