Merge pull request #282 from GoogleCloudPlatform/dev-joemu-copy-chart

Add copy to image functionality

Author: jmuharsky

client/components/dashboard/dashboard-directive.html

@@ -32,6 +32,11 @@
             <span class="glyphicon glyphicon-refresh pk-widget-button"
                   ng-show="widget.model.type === widgetFactorySvc.widgetTypes.CHART"
                   ng-click="clickRefreshWidget($event, widget)"></span>
+            <span class="fa fa-camera pk-widget-button"
+                  ng-show="widgetSvc.isCopyableAsImage(widget)"
+                  ng-click="clickCopyAsImage($event, widget)">
+              <md-tooltip>Copy chart image to clipboard</md-tooltip>
+            </span>
             <span class="glyphicon glyphicon-resize-full pk-widget-button"
                   ng-click="maximizeWidget(widget)"></span>
             <a class="pk-widget-button"

client/components/dashboard/dashboard-directive.js

@@ -65,6 +65,9 @@ explorer.components.dashboard.DashboardDirective = function() {
       /** @export */
       $scope.widgetFactorySvc = widgetFactoryService;
 
+      /** @export */
+      $scope.widgetSvc = widgetService;
+
       /** @export */
       $scope.clickRefreshWidget = function(event, widget) {
         dashboardService.refreshWidget(widget);
@@ -79,6 +82,13 @@ explorer.components.dashboard.DashboardDirective = function() {
         sidebarTabService.resolveSelectedTabForContainer();
       }
 
+      /** @export */
+      $scope.clickCopyAsImage = function(event, widget) {
+        event.stopPropagation();
+
+        widgetService.copyAsImage(widget);
+      }
+
       /** @export */
       $scope.maximizeWidget = function(widget) {
         $scope.dashboardSvc.maximizeWidget(widget);

client/components/dashboard/dashboard-widget-focus-directive.html

@@ -9,7 +9,13 @@
   <div class="pk-widget-toolbar">
     <span class="glyphicon glyphicon-refresh pk-widget-button"
           ng-show="ngModel.model.type === widgetFactorySvc.widgetTypes.CHART"
-          ng-click="clickRefreshWidget($event, widget)"></span>
+          ng-click="clickRefreshWidget($event, ngModel)"></span>
+    <span class="fa fa-camera pk-widget-button"
+          ng-show="widgetSvc.isCopyableAsImage(ngModel)"
+          ng-click="clickCopyAsImage($event, ngModel)"
+          aria-hidden="true">
+      <md-tooltip>Copy chart image to clipboard</md-tooltip>
+    </span>
     <span class="glyphicon glyphicon-resize-small pk-widget-button"
           ng-click="restoreWidget()"></span>
     <a class="pk-widget-button"

client/components/dashboard/dashboard-widget-focus-directive.js

@@ -57,6 +57,9 @@ explorer.components.dashboard.DashboardWidgetFocusDirective = function() {
       /** @export */
       $scope.widgetFactorySvc = widgetFactoryService;
 
+      /** @export */
+      $scope.widgetSvc = widgetService;
+
       Object.defineProperty($scope, 'container', {
         get: function() {
           if ($scope.ngModel) {
@@ -78,6 +81,14 @@ explorer.components.dashboard.DashboardWidgetFocusDirective = function() {
         dashboardService.restoreWidget($scope.ngModel);
       }
 
+      /** @export */
+      $scope.clickCopyAsImage = function(event, widget) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        widgetService.copyAsImage(widget);
+      }
+
       /**
        * Returns true if the widget should scroll its overflow, otherwise stretch.
        */

client/components/explorer/explorer-page-directive.html

@@ -3,6 +3,8 @@
 <div class="pk-page-body" ng-controller="DashboardCtrl as dashboardCtrl"
       layout="row" flex>
 
+  <img id="pk-chart-image-buffer">
+
   <sidebar-tabs class="pk-sidebar-tabs" layout="column"></sidebar-tabs>
 
   <div class="pk-page-leftwell" id="pk-page-leftwell" layout="column"

client/components/widget/data_viz/gviz/gviz-charts.json

@@ -1,28 +1,28 @@
 [
   {"title": "Annotation Chart", "className": "AnnotationChart"},
   {"title": "Area", "className": "AreaChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Bar", "className": "BarChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Candlestick", "className": "CandlestickChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Column", "className": "ColumnChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Combo", "className": "ComboChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Gauge", "className": "Gauge"},
-  {"title": "Geo", "className": "GeoChart"},
+  {"title": "Geo", "className": "GeoChart", "canScreenshot": true},
   {"title": "Histogram", "className": "Histogram",
-   "seriesColor": true, "seriesStartColumnIndex": 0},
+   "seriesColor": true, "seriesStartColumnIndex": 0, "canScreenshot": true},
   {"title": "Line", "className": "LineChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Org", "className": "OrgChart"},
-  {"title": "Pie", "className": "PieChart"},
+  {"title": "Pie", "className": "PieChart", "canScreenshot": true},
   {"title": "Sankey", "className": "Sankey"},
   {"title": "Scatter", "className": "ScatterChart",
-   "seriesColor": true},
+   "seriesColor": true, "canScreenshot": true},
   {"title": "Stepped Area", "className": "SteppedAreaChart",
-   "seriesColor": true},
-  {"title": "Table", "className": "Table"},
+   "seriesColor": true, "canScreenshot": true},
+  {"title": "Table", "className": "Table", "canScroll": true},
   {"title": "Word Tree", "className": "WordTree"}
 ]

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

@@ -93,6 +93,7 @@ explorer.components.widget.data_viz.gviz.gvizChart = function(
       // Create and attach to this element a gviz ChartWrapper
       let chartWrapper = chartWrapperService.create();
       chartWrapper.setContainerId(element[0].getElementsByClassName('pk-chart')[0]);
+      scope.widgetConfig.state().chart.element = chartWrapper;
 
       // We currently have animations enabled globally thanks to the
       // material design module, this has the side effect of animating

client/components/widget/widget-factory-service.js

@@ -29,6 +29,7 @@ goog.require('p3rf.perfkit.explorer.components.dashboard.DashboardInstance');
 goog.require('p3rf.perfkit.explorer.components.dashboard.DashboardModel');
 goog.require('p3rf.perfkit.explorer.components.dashboard.DashboardVersionService');
 goog.require('p3rf.perfkit.explorer.components.error.ErrorService');
+goog.require('p3rf.perfkit.explorer.models.ChartType');
 goog.require('p3rf.perfkit.explorer.models.ChartWidgetConfig');
 goog.require('p3rf.perfkit.explorer.models.WidgetConfig');
 goog.require('p3rf.perfkit.explorer.models.WidgetModel');
@@ -47,6 +48,7 @@ const DashboardModel = explorer.components.dashboard.DashboardModel;
 const DashboardVersionService =
     explorer.components.dashboard.DashboardVersionService;
 const ErrorService = explorer.components.error.ErrorService;
+const ChartType = explorer.models.ChartType;
 const WidgetConfig = explorer.models.WidgetConfig;
 const WidgetModel = explorer.models.WidgetModel;
 const WidgetState = explorer.models.WidgetState;
@@ -76,6 +78,12 @@ explorer.components.widget.WidgetFactoryService = function(
    */
   this.widgetTypes = WidgetType;
 
+  /**
+   * Exposes the chart types enum for directives.
+   * @export {!Object.<string, string>}
+   */
+  this.chartTypes = ChartType;
+
   /**
    * Hash table of widgets.
    *

client/components/widget/widget-service.js

@@ -39,11 +39,13 @@ const WidgetConfig = explorer.models.WidgetConfig;
  */
 explorer.components.widget.WidgetService = class {
   /** @ngInject */
-  constructor(widgetFactoryService) {
+  constructor(widgetFactoryService, chartWrapperService) {
     /** @export {string} */
     this.WIDGET_DELETE_WARNING = 'The widget will be deleted:\n\n';
 
     this.widgetFactorySvc = widgetFactoryService;
+    
+    this.chartWrapperSvc = chartWrapperService;
   };
 
   /**
@@ -63,7 +65,54 @@ explorer.components.widget.WidgetService = class {
 
     return this.WIDGET_DELETE_WARNING + widgetName;
   };
-  
+
+  /**
+   * Copies an image of the current chart to the clipboard.
+   * 
+   * @param {!WidgetConfig} widget
+   */
+  copyAsImage(widget) {
+    let chartWrapper = widget.state().chart.element;
+    let chartObject = chartWrapper.getChart();
+
+    let imageBuffer = document.getElementById('pk-chart-image-buffer');
+    let sel = null;
+    imageBuffer.src = chartObject.getImageURI();
+
+    try {
+      let range = document.createRange();
+      range.selectNode(imageBuffer);
+
+      sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+
+      document.execCommand('copy');
+    } finally {
+      sel.removeAllRanges();
+      imageBuffer.src = '';
+    }
+  }
+
+  /**
+   * Returns true if the widget is screenshottable, otherwise false.
+   * @param {!WidgetConfig} widget
+   * @return {boolean}
+   * @export
+   */
+  isCopyableAsImage(widget) {
+    if (widget.model.type === this.widgetFactorySvc.widgetTypes.CHART) {
+      let chartType = this.chartWrapperSvc.allChartsIndex[widget.model.chart.chartType];
+      goog.asserts.assert(goog.isDefAndNotNull(chartType));
+
+      if (chartType.canScreenshot === true) {
+        return true;
+      }
+    }
+    
+    return false;
+  }
+
   /**
    * Returns true if the widget is scrollable, otherwise false.
    * @param {!WidgetConfig} widget

client/models/chart_widget_model.js

@@ -74,6 +74,12 @@ const ChartType = p3rf.perfkit.explorer.models.ChartType;
 
 /** @constructor */
 p3rf.perfkit.explorer.models.ChartState = function() {
+  /**
+   * @type {?*}
+   * @export
+   */
+  this.element = null;
+
   /**
    * @type {?number}
    * @export