diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component.ts index b5a6767ae2..54b5c0ee06 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component.ts +++ b/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component.ts @@ -20,6 +20,7 @@ import { Color } from 'vs/base/common/color'; import * as types from 'vs/base/common/types'; import { Disposable } from 'vs/base/common/lifecycle'; import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService'; +import * as nls from 'vs/nls'; export enum ChartType { Bar = 'bar', @@ -98,11 +99,13 @@ export const defaultChartConfig: IChartConfig = { [chartType]="chartType" [colors]="colors" [options]="_options"> +
{{CHART_ERROR_MESSAGE}}
` }) export abstract class ChartInsight extends Disposable implements IInsightsView { private _isDataAvailable: boolean = false; private _hasInit: boolean = false; + private _hasError: boolean = false; private _options: any = {}; @ViewChild(BaseChartDirective) private _chart: BaseChartDirective; @@ -111,6 +114,8 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { protected _config: IChartConfig; protected _data: IInsightData; + private readonly CHART_ERROR_MESSAGE = nls.localize('chartErrorMessage', 'Chart cannot be displayed with the given data'); + protected abstract get chartType(): ChartType; constructor( @@ -129,7 +134,14 @@ export abstract class ChartInsight extends Disposable implements IInsightsView { // hence it's easier to not render until ready this.options = mixin(this.options, { maintainAspectRatio: false }); this._hasInit = true; - this._changeRef.detectChanges(); + this._hasError = false; + try { + this._changeRef.detectChanges(); + } catch (err) { + this._hasInit = false; + this._hasError = true; + this._changeRef.detectChanges(); + } TelemetryUtils.addTelemetry(this._bootstrapService.telemetryService, TelemetryKeys.ChartCreated, { type: this.chartType }); } diff --git a/src/sql/parts/dashboard/widgets/insights/views/imageInsight.component.ts b/src/sql/parts/dashboard/widgets/insights/views/imageInsight.component.ts index a7cff328ac..e52059bae1 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/imageInsight.component.ts +++ b/src/sql/parts/dashboard/widgets/insights/views/imageInsight.component.ts @@ -27,7 +27,7 @@ const defaultConfig: IConfig = { }) export default class ImageInsight implements IInsightsView, OnInit { private _rawSource: string; - private _config: IConfig; + private _config: IConfig = defaultConfig; @ViewChild('image') private image: ElementRef; @ViewChild('container') private container: ElementRef; diff --git a/src/sql/parts/grid/views/query/chartViewer.component.ts b/src/sql/parts/grid/views/query/chartViewer.component.ts index 4d3d398b40..c0c3c4e6c7 100644 --- a/src/sql/parts/grid/views/query/chartViewer.component.ts +++ b/src/sql/parts/grid/views/query/chartViewer.component.ts @@ -97,14 +97,18 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction } ngOnInit() { + this.setDefaultChartConfig(); + this.legendOptions = Object.values(LegendPosition); + this.initializeUI(); + } + + private setDefaultChartConfig() { this._chartConfig = { dataDirection: 'vertical', dataType: 'number', legendPosition: 'none', labelFirstColumn: false }; - this.legendOptions = Object.values(LegendPosition); - this.initializeUI(); } private initializeUI() { @@ -169,6 +173,7 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction public onChartChanged(): void { + this.setDefaultChartConfig(); if ([Constants.chartTypeScatter, Constants.chartTypeTimeSeries].some(item => item === this.chartTypesSelectBox.value)) { this.dataType = DataType.Point; this.dataDirection = DataDirection.Horizontal;