Handle errors when chart is invalid for given data (#1226)

This commit is contained in:
Matt Irvine
2018-04-23 16:38:18 -07:00
committed by GitHub
parent 08d73675d4
commit f63da13210
3 changed files with 21 additions and 4 deletions

View File

@@ -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"></canvas>
<div *ngIf="_hasError">{{CHART_ERROR_MESSAGE}}</div>
</div>`
})
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 });
}

View File

@@ -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;

View File

@@ -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 = <ILineConfig>{
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;