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;