Charting actions (#2411)

* working on adding charts

* working on chart options

* adding image and table insight

* add chart viewing and handle a bunch of small bugs

* formatting

* add actions to chart viewer

* formatting

* remove unimplemented function

package.json

@@ -36,6 +36,7 @@
     "@angular/platform-browser-dynamic": "~4.1.3",
     "@angular/router": "~4.1.3",
     "@angular/upgrade": "~4.1.3",
+    "@types/chart.js": "^2.7.31",
     "angular2-grid": "2.0.6",
     "angular2-slickgrid": "github:Microsoft/angular2-slickgrid#1.4.4",
     "applicationinsights": "0.18.0",

src/sql/base/browser/ui/taskbar/taskbar.ts

@@ -106,6 +106,14 @@ export class Taskbar {
 		this.actionBar.setAriaLabel(label);
 	}
 
+	public length(): number {
+		return this.actionBar.length();
+	}
+
+	public pull(index: number) {
+		this.actionBar.pull(index);
+	}
+
 	/**
 	 * Push HTMLElements and icons for IActions into the ActionBar UI. Push IActions into ActionBar's private collection.
 	 */

src/sql/parts/query/editor/actions.ts

@@ -171,7 +171,7 @@ export class ChartDataAction extends Action {
 	}
 
 	public run(context: IGridActionContext): TPromise<boolean> {
-		let activeEditor = this.editorService.activeEditor;
+		let activeEditor = this.editorService.activeControl;
 		if (activeEditor instanceof QueryEditor) {
 			activeEditor.resultsEditor.chart({ batchId: context.batchId, resultId: context.resultId });
 			return TPromise.as(true);

src/sql/parts/query/editor/charting/actions.ts

@@ -0,0 +1,216 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { IInsightOptions, IInsight } from './insights/interfaces';
+import { Graph } from './insights/graphInsight';
+import * as PathUtilities from 'sql/common/pathUtilities';
+import { QueryEditor } from 'sql/parts/query/editor/queryEditor';
+import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
+import { IInsightsConfig } from 'sql/parts/dashboard/widgets/insights/interfaces';
+
+import { localize } from 'vs/nls';
+import { Action } from 'vs/base/common/actions';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { join, normalize } from 'vs/base/common/paths';
+import { writeFile } from 'vs/base/node/pfs';
+import { IWindowsService, IWindowService } from 'vs/platform/windows/common/windows';
+import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
+import URI from 'vs/base/common/uri';
+import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
+import { IUntitledEditorService } from 'vs/workbench/services/untitled/common/untitledEditorService';
+import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+
+export interface IChartActionContext {
+	options: IInsightOptions;
+	insight: IInsight;
+}
+
+export class CreateInsightAction extends Action {
+	public static ID = 'chartview.createInsight';
+	public static LABEL = localize('createInsightLabel', "Create Insight");
+	public static ICON = 'createInsight';
+
+	constructor(
+		@IEditorService private editorService: IEditorService,
+		@INotificationService private notificationService: INotificationService,
+		@IUntitledEditorService private untitledEditorService: IUntitledEditorService
+	) {
+		super(CreateInsightAction.ID, CreateInsightAction.LABEL, CreateInsightAction.ICON);
+	}
+
+	public run(context: IChartActionContext): TPromise<boolean> {
+		let uriString: string = this.getActiveUriString();
+		if (!uriString) {
+			this.showError(localize('createInsightNoEditor', 'Cannot create insight as the active editor is not a SQL Editor'));
+			return TPromise.as(false);
+		}
+
+		let uri: URI = URI.parse(uriString);
+		let queryFile: string = uri.fsPath;
+		let query: string = undefined;
+		let type = {};
+		let options = Object.assign({}, context.options);
+		delete options.type;
+		type[context.options.type] = options;
+		// create JSON
+		let config: IInsightsConfig = {
+			type,
+			query,
+			queryFile
+		};
+
+		let widgetConfig = {
+			name: localize('myWidgetName', 'My-Widget'),
+			gridItemConfig: {
+				sizex: 2,
+				sizey: 1
+			},
+			widget: {
+				'insights-widget': config
+			}
+		};
+
+		let input = this.untitledEditorService.createOrGet(undefined, 'json', JSON.stringify(widgetConfig));
+
+		return this.editorService.openEditor(input, { pinned: true })
+			.then(
+				() => true,
+				error => {
+					this.notificationService.notify({
+						severity: Severity.Error,
+						message: error
+					});
+					return false;
+				}
+			);
+	}
+
+	private getActiveUriString(): string {
+		let editor = this.editorService.activeControl;
+		if (editor && editor instanceof QueryEditor) {
+			let queryEditor: QueryEditor = editor;
+			return queryEditor.uri;
+		}
+		return undefined;
+	}
+
+	private showError(errorMsg: string) {
+		this.notificationService.notify({
+			severity: Severity.Error,
+			message: errorMsg
+		});
+	}
+}
+
+export class CopyAction extends Action {
+	public static ID = 'chartview.copy';
+	public static LABEL = localize('copyChartLabel', "Copy as image");
+	public static ICON = 'copyImage';
+
+	constructor(
+		@IClipboardService private clipboardService: IClipboardService,
+		@INotificationService private notificationService: INotificationService
+	) {
+		super(CopyAction.ID, CopyAction.LABEL, CopyAction.ICON);
+	}
+
+	public run(context: IChartActionContext): TPromise<boolean> {
+		if (context.insight instanceof Graph) {
+			let data = context.insight.getCanvasData();
+			if (!data) {
+				this.showError(localize('chartNotFound', 'Could not find chart to save'));
+				return TPromise.as(false);
+			}
+
+			this.clipboardService.writeImageDataUrl(data);
+			return TPromise.as(true);
+		}
+		return TPromise.as(false);
+	}
+
+	private showError(errorMsg: string) {
+		this.notificationService.notify({
+			severity: Severity.Error,
+			message: errorMsg
+		});
+	}
+}
+
+export class SaveImageAction extends Action {
+	public static ID = 'chartview.saveImage';
+	public static LABEL = localize('saveImageLabel', "Save as image");
+	public static ICON = 'saveAsImage';
+
+	constructor(
+		@IWindowsService private windowsService: IWindowsService,
+		@IWindowService private windowService: IWindowService,
+		@INotificationService private notificationService: INotificationService,
+		@IEditorService private editorService: IEditorService,
+		@IWorkspaceContextService private workspaceContextService: IWorkspaceContextService
+	) {
+		super(SaveImageAction.ID, SaveImageAction.LABEL, SaveImageAction.ICON);
+	}
+
+	public run(context: IChartActionContext): TPromise<boolean> {
+		if (context.insight instanceof Graph) {
+			return this.promptForFilepath().then(filePath => {
+				let data = (<Graph>context.insight).getCanvasData();
+				if (!data) {
+					this.showError(localize('chartNotFound', 'Could not find chart to save'));
+					return false;
+				}
+				if (filePath) {
+					let buffer = this.decodeBase64Image(data);
+					writeFile(filePath, buffer).then(undefined, (err) => {
+						if (err) {
+							this.showError(err.message);
+						} else {
+							let fileUri = URI.file(filePath);
+							this.windowsService.openExternal(fileUri.toString());
+							this.notificationService.notify({
+								severity: Severity.Error,
+								message: localize('chartSaved', 'Saved Chart to path: {0}', filePath)
+							});
+						}
+					});
+				}
+				return true;
+			});
+		}
+		return TPromise.as(false);
+	}
+
+	private decodeBase64Image(data: string): Buffer {
+		let matches = data.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
+		return new Buffer(matches[2], 'base64');
+	}
+
+	private promptForFilepath(): TPromise<string> {
+		let filepathPlaceHolder = PathUtilities.resolveCurrentDirectory(this.getActiveUriString(), PathUtilities.getRootPath(this.workspaceContextService));
+		filepathPlaceHolder = join(filepathPlaceHolder, 'chart.png');
+		return this.windowService.showSaveDialog({
+			title: localize('chartViewer.saveAsFileTitle', 'Choose Results File'),
+			defaultPath: normalize(filepathPlaceHolder, true)
+		});
+	}
+
+	private showError(errorMsg: string) {
+		this.notificationService.notify({
+			severity: Severity.Error,
+			message: errorMsg
+		});
+	}
+
+	private getActiveUriString(): string {
+		let editor = this.editorService.activeControl;
+		if (editor && editor instanceof QueryEditor) {
+			let queryEditor: QueryEditor = editor;
+			return queryEditor.uri;
+		}
+		return undefined;
+	}
+}

src/sql/parts/query/editor/charting/chartView.css

@@ -3,13 +3,24 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.chart-view-container {
-	display: flex;
-	width: 100%;
+.chart-parent-container {
 	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
-.graph-container {
+.actionbar-container {
+	width: 100%;
+	flex: 0 0 auto;
+}
+
+.charting-container {
+	display: flex;
+	flex: 1 1 auto;
+}
+
+.insight-container {
 	flex: 1 1 0;
 }
 

src/sql/parts/query/editor/charting/chartView.ts

@@ -15,10 +15,12 @@ import { ChartOptions, IChartOption, ControlType } from './chartOptions';
 import { ChartType } from 'sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
 import { IInsightOptions } from './insights/interfaces';
+import { CopyAction, SaveImageAction, CreateInsightAction, IChartActionContext } from './actions';
+import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
 
 import { Dimension, $, getContentHeight, getContentWidth } from 'vs/base/browser/dom';
 import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
-import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { IContextViewService, IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
 import { Builder } from 'vs/base/browser/builder';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
@@ -35,32 +37,52 @@ export class ChartView implements IPanelView {
 	private _queryRunner: QueryRunner;
 	private _data: IInsightData;
 	private _currentData: { batchId: number, resultId: number };
+	private taskbar: Taskbar;
 
-	private optionsControl: HTMLElement;
+	private _createInsightAction: CreateInsightAction;
+	private _copyAction: CopyAction;
+	private _saveAction: SaveImageAction;
 
 	private options: IInsightOptions = {
 		type: ChartType.Bar
 	};
 
+	/** parent container */
 	private container: HTMLElement;
+	/** container for the options controls */
+	private optionsControl: HTMLElement;
+	/** container for type specific controls */
 	private typeControls: HTMLElement;
-	private graphContainer: HTMLElement;
+	/** container for the insight */
+	private insightContainer: HTMLElement;
+	/** container for the action bar */
+	private taskbarContainer: HTMLElement;
+	/** container for the charting (includes insight and options) */
+	private chartingContainer: HTMLElement;
 
 	private optionDisposables: IDisposable[] = [];
-
 	private optionMap: { [x: string]: HTMLElement } = {};
 
 	constructor(
 		@IContextViewService private _contextViewService: IContextViewService,
 		@IThemeService private _themeService: IThemeService,
-		@IInstantiationService private _instantiationService: IInstantiationService
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IContextMenuService contextMenuService: IContextMenuService
 	) {
+		this.taskbarContainer = $('div.taskbar-container');
+		this.taskbar = new Taskbar(this.taskbarContainer, contextMenuService);
 		this.optionsControl = $('div.options-container');
 		let generalControls = $('div.general-controls');
 		this.optionsControl.appendChild(generalControls);
 		this.typeControls = $('div.type-controls');
 		this.optionsControl.appendChild(this.typeControls);
 
+		this._createInsightAction = this._instantiationService.createInstance(CreateInsightAction);
+		this._copyAction = this._instantiationService.createInstance(CopyAction);
+		this._saveAction = this._instantiationService.createInstance(SaveImageAction);
+
+		this.taskbar.setContent([{ action: this._createInsightAction }]);
+
 		let self = this;
 		this.options = new Proxy(this.options, {
 			get: function (target, key, receiver) {
@@ -75,6 +97,7 @@ export class ChartView implements IPanelView {
 				let result = Reflect.set(target, key, value, receiver);
 
 				if (change) {
+					self.taskbar.context = <IChartActionContext>{ options: self.options, insight: self.insight ? self.insight.insight : undefined };
 					if (key === 'type') {
 						self.buildOptions();
 					} else {
@@ -89,15 +112,19 @@ export class ChartView implements IPanelView {
 		ChartOptions.general.map(o => {
 			this.createOption(o, generalControls);
 		});
+		this.buildOptions();
 	}
 
 	render(container: HTMLElement): void {
 		if (!this.container) {
-			this.container = $('div.chart-view-container');
-			this.graphContainer = $('div.graph-container');
-			this.container.appendChild(this.graphContainer);
-			this.container.appendChild(this.optionsControl);
-			this.insight = new Insight(this.graphContainer, this.options, this._instantiationService);
+			this.container = $('div.chart-parent-container');
+			this.insightContainer = $('div.insight-container');
+			this.chartingContainer = $('div.charting-container');
+			this.container.appendChild(this.taskbarContainer);
+			this.container.appendChild(this.chartingContainer);
+			this.chartingContainer.appendChild(this.insightContainer);
+			this.chartingContainer.appendChild(this.optionsControl);
+			this.insight = new Insight(this.insightContainer, this.options, this._instantiationService);
 		}
 
 		container.appendChild(this.container);
@@ -107,7 +134,7 @@ export class ChartView implements IPanelView {
 		} else {
 			this.queryRunner = this._queryRunner;
 		}
-
+		this.verifyOptions();
 	}
 
 	public chart(dataId: { batchId: number, resultId: number }) {
@@ -117,7 +144,7 @@ export class ChartView implements IPanelView {
 
 	layout(dimension: Dimension): void {
 		if (this.insight) {
-			this.insight.layout(new Dimension(getContentWidth(this.graphContainer), getContentHeight(this.graphContainer)));
+			this.insight.layout(new Dimension(getContentWidth(this.insightContainer), getContentHeight(this.insightContainer)));
 		}
 	}
 
@@ -155,6 +182,8 @@ export class ChartView implements IPanelView {
 		this.optionDisposables = [];
 		this.optionMap = {};
 		new Builder(this.typeControls).clearChildren();
+
+		this.updateActionbar();
 		ChartOptions[this.options.type].map(o => {
 			this.createOption(o, this.typeControls);
 		});
@@ -165,6 +194,7 @@ export class ChartView implements IPanelView {
 	}
 
 	private verifyOptions() {
+		this.updateActionbar();
 		for (let key in this.optionMap) {
 			if (this.optionMap.hasOwnProperty(key)) {
 				let option = ChartOptions[this.options.type].find(e => e.configEntry === key);
@@ -179,6 +209,18 @@ export class ChartView implements IPanelView {
 		}
 	}
 
+	private updateActionbar() {
+		if (this.insight && this.insight.isCopyable) {
+			this.taskbar.setContent([
+				{ action: this._createInsightAction },
+				{ action: this._copyAction },
+				{ action: this._saveAction }
+			]);
+		} else {
+			this.taskbar.setContent([{ action: this._createInsightAction }]);
+		}
+	}
+
 	private createOption(option: IChartOption, container: HTMLElement) {
 		let label = $('div');
 		label.innerText = option.label;

src/sql/parts/query/editor/charting/insights/graphInsight.ts

@@ -64,6 +64,10 @@ export class Graph implements IInsight {
 
 	}
 
+	public getCanvasData(): string {
+		return this.chartjs.toBase64Image();
+	}
+
 	public set data(data: IInsightData) {
 		this._data = data;
 		let chartData: Array<ChartJs.ChartDataSets>;

src/sql/parts/query/editor/charting/insights/imageInsight.ts

@@ -30,6 +30,7 @@ export class ImageInsight implements IInsight {
 	private imageEle: HTMLImageElement;
 
 	constructor(container: HTMLElement, options: IConfig) {
+		this._options = mixin(options, defaultConfig, false);
 		this.imageEle = $('img');
 		container.appendChild(this.imageEle);
 	}

src/sql/parts/query/editor/charting/insights/insight.ts

@@ -23,11 +23,15 @@ const defaultOptions: IInsightOptions = {
 };
 
 export class Insight {
-	private insight: IInsight;
+	private _insight: IInsight;
+
+	public get insight(): IInsight {
+		return this._insight;
+	}
 
 	private _options: IInsightOptions;
 	private _data: IInsightData;
-	private dim: Dimension
+	private dim: Dimension;
 
 	constructor(
 		private container: HTMLElement, options: IInsightOptions = defaultOptions,
@@ -75,13 +79,16 @@ export class Insight {
 		let ctor = this.findctor(this.options.type);
 
 		if (ctor) {
-			this.insight = this._instantiationService.createInstance(ctor, this.container, this.options);
+			this._insight = this._instantiationService.createInstance(ctor, this.container, this.options);
 			this.insight.layout(this.dim);
 			if (this._data) {
 				this.insight.data = this._data;
 			}
 		}
 	}
+	public get isCopyable(): boolean {
+		return Graph.types.includes(this.options.type as ChartType);
+	}
 
 	private findctor(type: ChartType | InsightType): IInsightCtor {
 		if (Graph.types.includes(type as ChartType)) {

src/sql/parts/query/editor/queryResultsView.ts

@@ -127,7 +127,6 @@ export class QueryResultsView {
 	public chartData(dataId: { resultId: number, batchId: number }): void {
 		if (!this._panelView.contains(this.chartTab)) {
 			this._panelView.pushTab(this.chartTab);
-			this.resultsTab.view.hideResultHeader();
 		}
 
 		this._panelView.showTab(this.chartTab.identifier);

yarn.lock

@@ -53,6 +53,10 @@
     normalize-path "^2.0.1"
     through2 "^2.0.3"
 
+"@types/chart.js@^2.7.31":
+  version "2.7.31"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.31.tgz#fe2c28d3defa461f5d5cd01f1fac635df649472b"
+
 "@types/commander@^2.11.0":
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/@types/commander/-/commander-2.12.2.tgz#183041a23842d4281478fa5d23c5ca78e6fd08ae"