diff --git a/package.json b/package.json index 404d5b1fae..4a471643d2 100644 --- a/package.json +++ b/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", diff --git a/src/sql/base/browser/ui/taskbar/taskbar.ts b/src/sql/base/browser/ui/taskbar/taskbar.ts index 3223d12333..2e2259c73c 100644 --- a/src/sql/base/browser/ui/taskbar/taskbar.ts +++ b/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. */ diff --git a/src/sql/parts/query/editor/actions.ts b/src/sql/parts/query/editor/actions.ts index 13effdeb7a..cc1606f5b1 100644 --- a/src/sql/parts/query/editor/actions.ts +++ b/src/sql/parts/query/editor/actions.ts @@ -171,7 +171,7 @@ export class ChartDataAction extends Action { } public run(context: IGridActionContext): TPromise { - 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); diff --git a/src/sql/parts/query/editor/charting/actions.ts b/src/sql/parts/query/editor/charting/actions.ts new file mode 100644 index 0000000000..e4c6bac289 --- /dev/null +++ b/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 { + 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 { + 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 { + if (context.insight instanceof Graph) { + return this.promptForFilepath().then(filePath => { + let data = (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 { + 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; + } +} diff --git a/src/sql/parts/query/editor/charting/chartView.css b/src/sql/parts/query/editor/charting/chartView.css index cecb6bc709..56c6e01b62 100644 --- a/src/sql/parts/query/editor/charting/chartView.css +++ b/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; } diff --git a/src/sql/parts/query/editor/charting/chartView.ts b/src/sql/parts/query/editor/charting/chartView.ts index a042f07c89..775ac6ba27 100644 --- a/src/sql/parts/query/editor/charting/chartView.ts +++ b/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 = { 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; diff --git a/src/sql/parts/query/editor/charting/insights/graphInsight.ts b/src/sql/parts/query/editor/charting/insights/graphInsight.ts index 70929aa9c4..08b7e9b75a 100644 --- a/src/sql/parts/query/editor/charting/insights/graphInsight.ts +++ b/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; diff --git a/src/sql/parts/query/editor/charting/insights/imageInsight.ts b/src/sql/parts/query/editor/charting/insights/imageInsight.ts index 48bfe8f880..abbf1065cb 100644 --- a/src/sql/parts/query/editor/charting/insights/imageInsight.ts +++ b/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); } diff --git a/src/sql/parts/query/editor/charting/insights/insight.ts b/src/sql/parts/query/editor/charting/insights/insight.ts index 67878a292c..25257f4a4f 100644 --- a/src/sql/parts/query/editor/charting/insights/insight.ts +++ b/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)) { diff --git a/src/sql/parts/query/editor/queryResultsView.ts b/src/sql/parts/query/editor/queryResultsView.ts index cb9a0b92c1..e4e5296b92 100644 --- a/src/sql/parts/query/editor/queryResultsView.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index 7c65cedafa..8474b82655 100644 --- a/yarn.lock +++ b/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"