mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-26 09:35:38 -05:00
378 lines
14 KiB
TypeScript
378 lines
14 KiB
TypeScript
/*---------------------------------------------------------------------------------------------
|
|
* Copyright (c) Microsoft Corporation. All rights reserved.
|
|
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
|
*--------------------------------------------------------------------------------------------*/
|
|
import 'vs/css!sql/parts/grid/views/query/chartViewer';
|
|
|
|
import {
|
|
Component, Inject, ViewContainerRef, forwardRef, OnInit,
|
|
ComponentFactoryResolver, ViewChild, OnDestroy, Input, ElementRef, ChangeDetectorRef
|
|
} from '@angular/core';
|
|
import { NgGridItemConfig } from 'angular2-grid';
|
|
|
|
import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
|
|
import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
|
|
import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
|
|
import { IGridDataSet } from 'sql/parts/grid/common/interfaces';
|
|
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
|
|
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
|
|
import { IInsightData, IInsightsView, IInsightsConfig } from 'sql/parts/dashboard/widgets/insights/interfaces';
|
|
import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
|
|
import { QueryEditor } from 'sql/parts/query/editor/queryEditor';
|
|
import { DataType, ILineConfig } from 'sql/parts/dashboard/widgets/insights/views/charts/types/lineChart.component';
|
|
import * as PathUtilities from 'sql/common/pathUtilities';
|
|
import { IChartViewActionContext, CopyAction, CreateInsightAction, SaveImageAction } from 'sql/parts/grid/views/query/chartViewerActions';
|
|
import * as WorkbenchUtils from 'sql/workbench/common/sqlWorkbenchUtils';
|
|
import * as Constants from 'sql/parts/query/common/constants';
|
|
|
|
/* Insights */
|
|
import {
|
|
ChartInsight, DataDirection, LegendPosition
|
|
} from 'sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component';
|
|
|
|
import { IDisposable } from 'vs/base/common/lifecycle';
|
|
import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
|
|
import Severity from 'vs/base/common/severity';
|
|
import URI from 'vs/base/common/uri';
|
|
import * as nls from 'vs/nls';
|
|
import { Registry } from 'vs/platform/registry/common/platform';
|
|
import { mixin } from 'vs/base/common/objects';
|
|
import * as paths from 'vs/base/common/paths';
|
|
import * as pfs from 'vs/base/node/pfs';
|
|
|
|
const insightRegistry = Registry.as<IInsightRegistry>(Extensions.InsightContribution);
|
|
|
|
const LocalizedStrings = {
|
|
CHART_TYPE: nls.localize('chartTypeLabel', 'Chart Type'),
|
|
DATA_DIRECTION: nls.localize('dataDirectionLabel', 'Data Direction'),
|
|
VERTICAL: nls.localize('verticalLabel', 'Vertical'),
|
|
HORIZONTAL: nls.localize('horizontalLabel', 'Horizontal'),
|
|
DATA_TYPE: nls.localize('dataTypeLabel', 'Data Type'),
|
|
NUMBER: nls.localize('numberLabel', 'Number'),
|
|
POINT: nls.localize('pointLabel', 'Point'),
|
|
LABEL_FIRST_COLUMN: nls.localize('labelFirstColumnLabel', 'Use First Column as row label?'),
|
|
COLUMNS_AS_LABELS: nls.localize('columnsAsLabelsLabel', 'Use Column names as labels?'),
|
|
LEGEND: nls.localize('legendLabel', 'Legend Position'),
|
|
CHART_NOT_FOUND: nls.localize('chartNotFound', 'Could not find chart to save')
|
|
};
|
|
|
|
@Component({
|
|
selector: 'chart-viewer',
|
|
templateUrl: decodeURI(require.toUrl('sql/parts/grid/views/query/chartViewer.component.html'))
|
|
})
|
|
export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewActionContext {
|
|
public legendOptions: string[];
|
|
private chartTypesSelectBox: SelectBox;
|
|
private legendSelectBox: SelectBox;
|
|
private labelFirstColumnCheckBox: Checkbox;
|
|
private columnsAsLabelsCheckBox: Checkbox;
|
|
|
|
/* UI */
|
|
|
|
private _actionBar: Taskbar;
|
|
private _createInsightAction: CreateInsightAction;
|
|
private _copyAction: CopyAction;
|
|
private _saveAction: SaveImageAction;
|
|
private _chartConfig: ILineConfig;
|
|
private _disposables: Array<IDisposable> = [];
|
|
private _dataSet: IGridDataSet;
|
|
private _executeResult: IInsightData;
|
|
private _chartComponent: ChartInsight;
|
|
|
|
private localizedStrings = LocalizedStrings;
|
|
|
|
@ViewChild(ComponentHostDirective) private componentHost: ComponentHostDirective;
|
|
@ViewChild('taskbarContainer', { read: ElementRef }) private taskbarContainer;
|
|
@ViewChild('chartTypesContainer', { read: ElementRef }) private chartTypesElement;
|
|
@ViewChild('legendContainer', { read: ElementRef }) private legendElement;
|
|
@ViewChild('labelFirstColumnContainer', { read: ElementRef }) private labelFirstColumnElement;
|
|
@ViewChild('columnsAsLabelsContainer', { read: ElementRef }) private columnsAsLabelsElement;
|
|
|
|
constructor(
|
|
@Inject(forwardRef(() => ComponentFactoryResolver)) private _componentFactoryResolver: ComponentFactoryResolver,
|
|
@Inject(forwardRef(() => ViewContainerRef)) private _viewContainerRef: ViewContainerRef,
|
|
@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService,
|
|
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
|
|
) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.setDefaultChartConfig();
|
|
this.legendOptions = Object.values(LegendPosition);
|
|
this.initializeUI();
|
|
}
|
|
|
|
private setDefaultChartConfig() {
|
|
this._chartConfig = <ILineConfig>{
|
|
dataDirection: 'vertical',
|
|
dataType: 'number',
|
|
legendPosition: 'none',
|
|
labelFirstColumn: false
|
|
};
|
|
}
|
|
|
|
private initializeUI() {
|
|
// Initialize the taskbar
|
|
this._initActionBar();
|
|
|
|
// Init chart type dropdown
|
|
this.chartTypesSelectBox = new SelectBox(insightRegistry.getAllIds(), this.getDefaultChartType(), this._bootstrapService.contextViewService);
|
|
this.chartTypesSelectBox.render(this.chartTypesElement.nativeElement);
|
|
this.chartTypesSelectBox.onDidSelect(selected => this.onChartChanged());
|
|
this._disposables.push(attachSelectBoxStyler(this.chartTypesSelectBox, this._bootstrapService.themeService));
|
|
|
|
// Init label first column checkbox
|
|
// Note: must use 'self' for callback
|
|
this.labelFirstColumnCheckBox = new Checkbox(this.labelFirstColumnElement.nativeElement, {
|
|
label: LocalizedStrings.LABEL_FIRST_COLUMN,
|
|
onChange: () => this.onLabelFirstColumnChanged(),
|
|
ariaLabel: LocalizedStrings.LABEL_FIRST_COLUMN
|
|
});
|
|
|
|
// Init label first column checkbox
|
|
// Note: must use 'self' for callback
|
|
this.columnsAsLabelsCheckBox = new Checkbox(this.columnsAsLabelsElement.nativeElement, {
|
|
label: LocalizedStrings.COLUMNS_AS_LABELS,
|
|
onChange: () => this.columnsAsLabelsChanged(),
|
|
ariaLabel: LocalizedStrings.COLUMNS_AS_LABELS
|
|
});
|
|
|
|
// Init legend dropdown
|
|
this.legendSelectBox = new SelectBox(this.legendOptions, this._chartConfig.legendPosition, this._bootstrapService.contextViewService);
|
|
this.legendSelectBox.render(this.legendElement.nativeElement);
|
|
this.legendSelectBox.onDidSelect(selected => this.onLegendChanged());
|
|
this._disposables.push(attachSelectBoxStyler(this.legendSelectBox, this._bootstrapService.themeService));
|
|
}
|
|
|
|
private getDefaultChartType(): string {
|
|
let defaultChartType = Constants.chartTypeHorizontalBar;
|
|
if (this._bootstrapService.configurationService) {
|
|
let chartSettings = WorkbenchUtils.getSqlConfigSection(this._bootstrapService.configurationService, 'chart');
|
|
// Only use the value if it's a known chart type. Ideally could query this dynamically but can't figure out how
|
|
if (chartSettings && Constants.allChartTypes.indexOf(chartSettings[Constants.defaultChartType]) > -1) {
|
|
defaultChartType = chartSettings[Constants.defaultChartType];
|
|
}
|
|
}
|
|
return defaultChartType;
|
|
}
|
|
|
|
private _initActionBar() {
|
|
this._createInsightAction = this._bootstrapService.instantiationService.createInstance(CreateInsightAction);
|
|
this._copyAction = this._bootstrapService.instantiationService.createInstance(CopyAction);
|
|
this._saveAction = this._bootstrapService.instantiationService.createInstance(SaveImageAction);
|
|
|
|
let taskbar = <HTMLElement>this.taskbarContainer.nativeElement;
|
|
this._actionBar = new Taskbar(taskbar, this._bootstrapService.contextMenuService);
|
|
this._actionBar.context = this;
|
|
this._actionBar.setContent([
|
|
{ action: this._createInsightAction },
|
|
{ action: this._copyAction },
|
|
{ action: this._saveAction }
|
|
]);
|
|
}
|
|
|
|
|
|
public onChartChanged(): void {
|
|
this.setDefaultChartConfig();
|
|
if ([Constants.chartTypeScatter, Constants.chartTypeTimeSeries].some(item => item === this.chartTypesSelectBox.value)) {
|
|
this.dataType = DataType.Point;
|
|
this.dataDirection = DataDirection.Horizontal;
|
|
}
|
|
this.initChart();
|
|
}
|
|
|
|
public onLabelFirstColumnChanged(): void {
|
|
this._chartConfig.labelFirstColumn = this.labelFirstColumnCheckBox.checked;
|
|
this.initChart();
|
|
}
|
|
|
|
public columnsAsLabelsChanged(): void {
|
|
this._chartConfig.columnsAsLabels = this.columnsAsLabelsCheckBox.checked;
|
|
this.initChart();
|
|
}
|
|
|
|
public onLegendChanged(): void {
|
|
this._chartConfig.legendPosition = <LegendPosition>this.legendSelectBox.value;
|
|
this.initChart();
|
|
}
|
|
|
|
public set dataType(type: DataType) {
|
|
this._chartConfig.dataType = type;
|
|
// Requires full chart refresh
|
|
this.initChart();
|
|
}
|
|
|
|
public set dataDirection(direction: DataDirection) {
|
|
this._chartConfig.dataDirection = direction;
|
|
// Requires full chart refresh
|
|
this.initChart();
|
|
}
|
|
|
|
public copyChart(): void {
|
|
let data = this._chartComponent.getCanvasData();
|
|
if (!data) {
|
|
this.showError(LocalizedStrings.CHART_NOT_FOUND);
|
|
return;
|
|
}
|
|
|
|
this._bootstrapService.clipboardService.writeImageDataUrl(data);
|
|
}
|
|
|
|
public saveChart(): void {
|
|
this.promptForFilepath().then(filePath => {
|
|
let data = this._chartComponent.getCanvasData();
|
|
if (!data) {
|
|
this.showError(LocalizedStrings.CHART_NOT_FOUND);
|
|
return;
|
|
}
|
|
if (filePath) {
|
|
let buffer = this.decodeBase64Image(data);
|
|
pfs.writeFile(filePath, buffer).then(undefined, (err) => {
|
|
if (err) {
|
|
this.showError(err.message);
|
|
} else {
|
|
let fileUri = URI.from({ scheme: PathUtilities.FILE_SCHEMA, path: filePath });
|
|
this._bootstrapService.windowsService.openExternal(fileUri.toString());
|
|
this._bootstrapService.notificationService.notify({
|
|
severity: Severity.Error,
|
|
message: nls.localize('chartSaved', 'Saved Chart to path: {0}', filePath)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
private promptForFilepath(): Thenable<string> {
|
|
let filepathPlaceHolder = PathUtilities.resolveCurrentDirectory(this.getActiveUriString(), PathUtilities.getRootPath(this._bootstrapService.workspaceContextService));
|
|
filepathPlaceHolder = paths.join(filepathPlaceHolder, 'chart.png');
|
|
return this._bootstrapService.windowService.showSaveDialog({
|
|
title: nls.localize('chartViewer.saveAsFileTitle', 'Choose Results File'),
|
|
defaultPath: paths.normalize(filepathPlaceHolder, true)
|
|
});
|
|
}
|
|
|
|
private decodeBase64Image(data: string): Buffer {
|
|
let matches = data.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
|
|
return new Buffer(matches[2], 'base64');
|
|
}
|
|
|
|
public createInsight(): void {
|
|
let uriString: string = this.getActiveUriString();
|
|
if (!uriString) {
|
|
this.showError(nls.localize('createInsightNoEditor', 'Cannot create insight as the active editor is not a SQL Editor'));
|
|
return;
|
|
}
|
|
|
|
let uri: URI = URI.parse(uriString);
|
|
let dataService = this._bootstrapService.queryModelService.getDataService(uriString);
|
|
if (!dataService) {
|
|
this.showError(nls.localize('createInsightNoDataService', 'Cannot create insight, backing data model not found'));
|
|
return;
|
|
}
|
|
let queryFile: string = uri.fsPath;
|
|
let query: string = undefined;
|
|
let type = {};
|
|
type[this.chartTypesSelectBox.value] = this._chartConfig;
|
|
// create JSON
|
|
let config: IInsightsConfig = {
|
|
type,
|
|
query,
|
|
queryFile
|
|
};
|
|
|
|
let widgetConfig = {
|
|
name: nls.localize('myWidgetName', 'My-Widget'),
|
|
gridItemConfig: this.getGridItemConfig(),
|
|
widget: {
|
|
'insights-widget': config
|
|
}
|
|
};
|
|
|
|
// open in new window as untitled JSON file
|
|
dataService.openLink(JSON.stringify(widgetConfig), 'Insight', 'json');
|
|
}
|
|
|
|
private showError(errorMsg: string) {
|
|
this._bootstrapService.notificationService.notify({
|
|
severity: Severity.Error,
|
|
message: errorMsg
|
|
});
|
|
}
|
|
|
|
private getGridItemConfig(): NgGridItemConfig {
|
|
let config: NgGridItemConfig = {
|
|
sizex: 2,
|
|
sizey: 1
|
|
};
|
|
return config;
|
|
}
|
|
|
|
private getActiveUriString(): string {
|
|
let editorService = this._bootstrapService.editorService;
|
|
let editor = editorService.getActiveEditor();
|
|
if (editor && editor instanceof QueryEditor) {
|
|
let queryEditor: QueryEditor = editor;
|
|
return queryEditor.uri;
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
private get showDataDirection(): boolean {
|
|
return ['pie', 'horizontalBar', 'bar', 'doughnut'].some(item => item === this.chartTypesSelectBox.value) || (this.chartTypesSelectBox.value === 'line' && this.dataType === 'number');
|
|
}
|
|
|
|
private get showLabelFirstColumn(): boolean {
|
|
return this.dataDirection === 'horizontal' && this.dataType !== 'point';
|
|
}
|
|
|
|
private get showColumnsAsLabels(): boolean {
|
|
return this.dataDirection === 'vertical' && this.dataType !== 'point';
|
|
}
|
|
|
|
private get showDataType(): boolean {
|
|
return this.chartTypesSelectBox.value === 'line';
|
|
}
|
|
|
|
public get dataDirection(): DataDirection {
|
|
return this._chartConfig.dataDirection;
|
|
}
|
|
|
|
public get dataType(): DataType {
|
|
return this._chartConfig.dataType;
|
|
}
|
|
|
|
@Input() set dataSet(dataSet: IGridDataSet) {
|
|
// Setup the execute result
|
|
this._dataSet = dataSet;
|
|
this._executeResult = <IInsightData>{};
|
|
this._executeResult.columns = dataSet.columnDefinitions.map(def => def.name);
|
|
this._executeResult.rows = dataSet.dataRows.getRange(0, dataSet.dataRows.getLength()).map(gridRow => {
|
|
return gridRow.values.map(cell => cell.displayValue);
|
|
});
|
|
this.initChart();
|
|
}
|
|
|
|
public initChart() {
|
|
this._cd.detectChanges();
|
|
if (this._executeResult) {
|
|
// Reinitialize the chart component
|
|
let componentFactory = this._componentFactoryResolver.resolveComponentFactory<IInsightsView>(insightRegistry.getCtorFromId(this.chartTypesSelectBox.value));
|
|
this.componentHost.viewContainerRef.clear();
|
|
let componentRef = this.componentHost.viewContainerRef.createComponent(componentFactory);
|
|
this._chartComponent = <ChartInsight>componentRef.instance;
|
|
if (this._chartComponent.setConfig) {
|
|
this._chartComponent.setConfig(this._chartConfig);
|
|
}
|
|
this._chartComponent.data = this._executeResult;
|
|
this._chartComponent.options = mixin(this._chartComponent.options, { animation: { duration: 0 } });
|
|
if (this._chartComponent.init) {
|
|
this._chartComponent.init();
|
|
}
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this._disposables.forEach(i => i.dispose());
|
|
}
|
|
} |