Merge pull request #289 from GoogleCloudPlatform/dev-joemu-htmltooltip

Add HTML Tooltip Support

client/components/dashboard/dashboard-version-service.js

@@ -52,6 +52,7 @@ goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchem
 goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchemaV9');
 goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchemaV10');
 goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchemaV11');
+goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchemaV12');
 
 goog.require('p3rf.perfkit.explorer.components.dashboard.DashboardVersionModel');
 
@@ -180,6 +181,7 @@ DashboardVersionService.prototype.getDashboardVersion = function(dashboard) {
  */
 DashboardVersionService.prototype.initVersions = function() {
   return [
+    new versions.DashboardSchemaV12(),
     new versions.DashboardSchemaV11(),
     new versions.DashboardSchemaV10(),
     new versions.DashboardSchemaV9(),

client/components/dashboard/versions/dashboard-schema_12.js

@@ -0,0 +1,60 @@
+/**
+ * @copyright Copyright 2016 Google Inc. All rights reserved.
+ *
+ * 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.
+ *
+ * @fileoverview Version info class, including update and verify scripts.
+ *
+ * V12   2016-Jun    Adds a 'tooltip' object to the chart options.
+ *
+ * @author joemu@google.com (Joe Allan Muharsky)
+ */
+
+
+goog.provide('p3rf.perfkit.explorer.components.dashboard.versions.DashboardSchemaV12');
+
+goog.require('p3rf.perfkit.explorer.components.dashboard.versions.DashboardVersionUtil');
+goog.require('p3rf.perfkit.explorer.models.perfkit_simple_builder.QueryFilterModel');
+
+
+goog.scope(function() {
+  const explorer = p3rf.perfkit.explorer;
+  const DashboardVersionUtil = explorer.components.dashboard.versions.DashboardVersionUtil;
+  const QueryFilterModel = explorer.models.perfkit_simple_builder.QueryFilterModel;
+
+  /**
+   * @constructor
+   */
+  explorer.components.dashboard.versions.DashboardSchemaV12 = function() {
+    this.version = '12';
+  };
+  const DashboardSchema = (
+      explorer.components.dashboard.versions.DashboardSchemaV12);
+
+  DashboardSchema.prototype.verify = function(dashboard) {
+    return DashboardVersionUtil.VerifyDashboard(
+        dashboard, null, function(widget) {
+      return (
+          goog.isDef(widget.chart.options.tooltip) &&
+          goog.isObject(widget.chart.options.tooltip));
+    });
+  };
+
+  DashboardSchema.prototype.update = function(dashboard) {
+    DashboardVersionUtil.UpdateDashboard(dashboard, null, function(widget) {
+      if (!goog.isDef(widget.chart.options.tooltip)) {
+        widget.chart.options.tooltip = {};
+      }
+    });
+  };
+});

client/components/widget/data_viz/gviz/chart-config-directive.html

@@ -124,6 +124,44 @@
           </div>
         </div>
       </div>
+
+      <div class="pk-sidebar-group-title">Tooltips</div>
+
+      <div class="pk-sidebar-item">
+        <div class="pk-sidebar-item-label">
+          <input type="checkbox"
+                class="widget-results-pivot"
+                ng-model="ngModel.chart.options.tooltip.isHtml"> allow HTML
+        </div>
+        <md-tooltip md-direction="right">
+          Allows HTML content in the tooltip
+        </md-tooltip>
+      </div>
+
+      <div class="pk-sidebar-item">
+        <div class="pk-sidebar-item-label">
+          <input type="checkbox"
+                class="widget-results-pivot"
+                ng-model="ngModel.chart.options.tooltip.showColorCode"> show color code
+        </div>
+        <md-tooltip md-direction="right">
+          If true, show colored squares next to the series information in the tooltip
+        </md-tooltip>
+      </div>
+
+      <div class="pk-sidebar-item">
+        <div class="pk-sidebar-item-label">trigger</div>
+        <div class="pk-sidebar-item-value">
+          <md-select
+              ng-model="ngModel.chart.options.tooltip.trigger"
+              placeholder="focus"
+              class="pk-sidebar-input-full widget-chart-tooltip-trigger">
+            <md-option
+                ng-value="trigger"
+                ng-repeat="trigger in chartSvc.TOOLTIP_TRIGGERS">{{ trigger }}</md-option>
+          </md-select>
+        </div>
+      </div>
     </div>
 
     <div class="pk-sidebar-group-buttons">

client/components/widget/data_viz/gviz/chart-wrapper-service.js

@@ -104,6 +104,17 @@ explorer.components.widget.data_viz.gviz.ChartWrapperService = function($http,
     'in'
   ];
 
+  /**
+   * A list of tooltip triggers for GViz charts.
+   * @export {!Array.<!string>}
+   */
+  this.TOOLTIP_TRIGGERS = [
+    'none',
+    'focus',
+    'selection',
+    'both'
+  ];
+
   /**
    * An angular-exposed copy of ChartType.
    * @export @enum {string}

client/components/widget/data_viz/gviz/column_style/column-style-directive.html

@@ -46,7 +46,7 @@
     <div class="pk-sidebar-item-label">role</div>
     <div class="pk-sidebar-item-value">
       <md-select
-             class="column-style-role-select"
+             class="widget-column-style-role-select"
              placeholder="(default)"
              ng-model="ngModel.data_role">
         <md-option ng-show="ngModel.data_role" value="">(default)</md-option>
@@ -59,6 +59,16 @@
       Describes the role this column should play in a chart (select a role for more help)
     </md-tooltip>
   </div>
+  <div class="pk-sidebar-item" ng-show="ngModel.data_role === 'tooltip'">
+    <div class="pk-sidebar-item-label">
+      <input type="checkbox"
+             class="widget-column-style-allow-html"
+             ng-model="ngModel.is_html"> allow HTML
+    </div>
+    <md-tooltip md-direction="right">
+      Renders the tooltip using HTML, which allows markup in the tooltip text
+    </md-tooltip>
+  </div>
   <div ng-show="isASeries()">
     <div class="pk-sidebar-item-label">series color</div>
     <div class="input-group pk-sidebar-item-value">

client/components/widget/data_viz/gviz/column_style/column-style-directive_test.js

@@ -120,6 +120,18 @@ describe('ColumnStyleDirective', function() {
         'input.widget-column-style-title');
       expect(targetElement.length).toBe(1);
     });
+
+    it('the role', function() {
+      var targetElement = actualElement.find(
+        'md-select.widget-column-style-role-select');
+      expect(targetElement.length).toBe(1);
+    });
+
+    it('allowing HTML content', function() {
+      var targetElement = actualElement.find(
+        'input.widget-column-style-allow-html');
+      expect(targetElement.length).toBe(1);
+    });
   });
 
   describe('should reflect the ngModel state for', function() {
@@ -156,6 +168,18 @@ describe('ColumnStyleDirective', function() {
 
       expect(columnTitleElement.value).toBe(expectedTitle);
     });
+
+    it('allowing HTML', function() {
+      var columnTitleElement = actualElement.find(
+        'input.widget-column-style-allow-html')[0];
+
+      expect(columnTitleElement.checked).toBe(false);
+
+      scope.providedModel.is_html = true;
+      scope.$digest();
+
+      expect(columnTitleElement.checked).toBe(true);
+    });
   });
 
   describe('should refresh the widget when the column id changes', function() {

client/components/widget/data_viz/gviz/column_style/column-style-model.js

@@ -33,10 +33,11 @@ const gviz = explorer.components.widget.data_viz.gviz;
  * @param {string=} opt_title
  * @param {string=} opt_dataRole
  * @param {string=} opt_seriesColor
+ * @param {boolean=} opt_isHtml
  * @export
  */
 gviz.column_style.ColumnStyleModel = class {
-  constructor(opt_columnId, opt_title, opt_dataRole, opt_seriesColor) {
+  constructor(opt_columnId, opt_title, opt_dataRole, opt_seriesColor, opt_isHtml) {
     /**
      * Specifies the column id that the style applies to.
      * @export {string}
@@ -62,6 +63,13 @@ gviz.column_style.ColumnStyleModel = class {
      * @export {string}
      */
     this.series_color = opt_seriesColor || '';
+
+    /**
+     * A boolean indicating whether the column supports HTML content.
+     * This is presently applicable to tooltip columns.
+     * @export {boolean}
+     */
+    this.is_html = opt_isHtml || false;
   }
 }
 

client/components/widget/data_viz/gviz/column_style/column-style-service.js

@@ -235,6 +235,13 @@ gviz.column_style.ColumnStyleService = class {
           dataTable.setColumnProperty(columnIndex, 'role', '');
         } else {
           dataTable.setColumnProperty(columnIndex, 'role', column.data_role);
+
+          // TODO: Encapsulate this functionality to a specialized library/function.
+          if (column.data_role === 'tooltip') {
+            if (column.is_html === true) {
+              dataTable.setColumnProperty(columnIndex, 'html', true);
+            }
+          }
         }
       }
     });

client/components/widget/data_viz/gviz/column_style/column-style-service_test.js

@@ -334,6 +334,39 @@ describe('columnStyleService', function() {
       expect(providedDataTable.getColumnProperty(1, 'role')).toEqual('data');
     });
 
+    it('should apply an html property to columns using html tooltips', function() {
+      var data = {
+        cols: [
+          {id: 'timestamp', type: 'date'},
+          {id: 'sales_amt', type: 'number'},
+          {id: 'sales_tip', type: 'string'}
+        ],
+        rows: [
+          {c: [
+            {v: '2013/03/30'},
+            {v: 3},
+            {v: '<b>Working!</b>'}
+          ]}
+        ]
+      };
+
+      providedDataTable = new GvizDataTable(data);
+      providedConfig.state().datasource.data = providedDataTable;
+
+      var providedColumns = [
+        new ColumnStyleModel('timestamp', null, 'domain'),
+        new ColumnStyleModel('sales_amt', null, 'data'),
+        new ColumnStyleModel('sales_tip', null, 'tooltip', null, true)
+      ];
+      providedConfig.model.chart.columns = providedColumns;
+
+      svc.applyToDataTable(providedConfig.model.chart.columns, providedDataTable);
+
+      expect(providedDataTable.getColumnLabel(2)).toEqual('sales_tip');
+      expect(providedDataTable.getColumnProperty(2, 'role')).toEqual('tooltip');
+      expect(providedDataTable.getColumnProperty(2, 'html')).toEqual(true);
+    });
+
     it('should set column titles and roles together', function() {
       svc.applyToDataTable(providedConfig.model.chart.columns, providedDataTable);
 

client/components/widget/data_viz/gviz/gviz-directive.css

@@ -0,0 +1,3 @@
+.google-visualization-tooltip {
+  padding: 8px;
+}

client/models/chart_widget_model.js

@@ -122,7 +122,8 @@ p3rf.perfkit.explorer.models.ChartModel = function() {
    */
   this.options = {
     'chartArea': {},
-    'legend': {}
+    'legend': {},
+    'tooltips': {}
   };
 
   /**