Add showTopNData option to insight charts (#1157)

* add showTopNData option to insight charts

* address comments

* fix the label in the widget when label first column is set

src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.component.ts

@@ -79,6 +79,7 @@ export interface IChartConfig {
 	legendPosition?: LegendPosition;
 	dataDirection?: DataDirection;
 	columnsAsLabels?: boolean;
+	showTopNData?: number;
 }
 
 export const defaultChartConfig: IChartConfig = {
@@ -179,7 +180,7 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 		// unmemoize chart data as the data needs to be recalced
 		unmemoize(this, 'chartData');
 		unmemoize(this, 'labels');
-		this._data = data;
+		this._data = this.filterToTopNData(data);
 		if (isValidData(data)) {
 			this._isDataAvailable = true;
 		}
@@ -187,6 +188,34 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 		this._changeRef.detectChanges();
 	}
 
+	private filterToTopNData(data: IInsightData): IInsightData {
+		if (this._config.dataDirection === 'horizontal') {
+			return {
+				columns: this.getTopNData(data.columns),
+				rows: data.rows.map((row) => {
+					return this.getTopNData(row);
+				})
+			};
+		} else {
+			return {
+				columns: data.columns,
+				rows: data.rows.slice(0, this._config.showTopNData)
+			};
+		}
+	}
+
+	private getTopNData(data: any[]): any[] {
+		if (this._config.showTopNData) {
+			if (this._config.dataDirection === 'horizontal' && this._config.labelFirstColumn) {
+				return data.slice(0, this._config.showTopNData + 1);
+			} else {
+				return data.slice(0, this._config.showTopNData);
+			}
+		} else {
+			return data;
+		}
+	}
+
 	protected clearMemoize(): void {
 		// unmemoize getters since their result can be changed by a new config
 		unmemoize(this, 'getChartData');
@@ -250,7 +279,11 @@ export abstract class ChartInsight extends Disposable implements IInsightsView {
 	@memoize
 	public getLabels(): Array<string> {
 		if (this._config.dataDirection === 'horizontal') {
-			return this._data.columns;
+			if (this._config.labelFirstColumn) {
+				return this._data.columns.slice(1);
+			} else {
+				return this._data.columns;
+			}
 		} else {
 			return this._data.rows.map(row => row[0]);
 		}

src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.contribution.ts

@@ -35,6 +35,10 @@ export const chartInsightSchema: IJSONSchema = {
 			default: 'vertical',
 			enum: ['vertical', 'horizontal'],
 			enumDescriptions: ['When vertical, the first column is used to define the x-axis labels, with other columns expected to be numerical.', 'When horizontal, the column names are used as the x-axis labels.']
+		},
+		showTopNData: {
+			type: 'number',
+			description: nls.localize('showTopNData', 'If showTopNData is set, showing only top N data in the chart.')
 		}
 	}
 };

src/sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution.ts

@@ -12,7 +12,7 @@ import { chartInsightSchema } from 'sql/parts/dashboard/widgets/insights/views/c
 
 import BarChart from './barChart.component';
 
-export const properties: IJSONSchema = {
+const properties: IJSONSchema = {
 	properties: {
 		yAxisMin: {
 			type: 'number',
@@ -41,6 +41,6 @@ export const properties: IJSONSchema = {
 	}
 };
 
-const barSchema = mixin(clone(chartInsightSchema), properties) as IJSONSchema;
+export const barChartSchema = mixin(clone(chartInsightSchema), properties) as IJSONSchema;
 
-registerInsight('bar', '', barSchema, BarChart);
+registerInsight('bar', '', barChartSchema, BarChart);

src/sql/parts/dashboard/widgets/insights/views/charts/types/horizontalBarChart.contribution.ts

@@ -7,7 +7,7 @@ import { mixin } from 'vs/base/common/objects';
 import { IJSONSchema } from 'vs/base/common/jsonSchema';
 
 import { registerInsight } from 'sql/platform/dashboard/common/insightRegistry';
-import { properties as BarChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
+import { barChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
 
 import HorizontalBarChart from './horizontalBarChart.component';
 
@@ -15,6 +15,6 @@ const properties: IJSONSchema = {
 
 };
 
-const horizontalBarSchema = mixin(clone(BarChartSchema), properties) as IJSONSchema;
+const horizontalBarSchema = mixin(clone(barChartSchema), properties) as IJSONSchema;
 
 registerInsight('horizontalBar', '', horizontalBarSchema, HorizontalBarChart);

src/sql/parts/dashboard/widgets/insights/views/charts/types/lineChart.contribution.ts

@@ -8,7 +8,7 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import * as nls from 'vs/nls';
 
 import { registerInsight } from 'sql/platform/dashboard/common/insightRegistry';
-import { properties as BarChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
+import { barChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
 
 import LineChart from './lineChart.component';
 
@@ -24,6 +24,6 @@ const properties: IJSONSchema = {
 	}
 };
 
-export const lineSchema = mixin(clone(BarChartSchema), properties) as IJSONSchema;
+export const lineSchema = mixin(clone(barChartSchema), properties) as IJSONSchema;
 
 registerInsight('line', '', lineSchema, LineChart);

src/sql/parts/dashboard/widgets/insights/views/charts/types/scatterChart.contribution.ts

@@ -7,13 +7,13 @@ import { clone } from 'sql/base/common/objects';
 import { IJSONSchema } from 'vs/base/common/jsonSchema';
 
 import { registerInsight } from 'sql/platform/dashboard/common/insightRegistry';
-import { properties as BarChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
+import { barChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
 
 import ScatterChart from './scatterChart.component';
 
 const properties: IJSONSchema = {
 };
 
-const scatterSchema = mixin(clone(BarChartSchema), properties) as IJSONSchema;
+const scatterSchema = mixin(clone(barChartSchema), properties) as IJSONSchema;
 
 registerInsight('scatter', '', scatterSchema, ScatterChart);

src/sql/parts/dashboard/widgets/insights/views/charts/types/timeSeriesChart.contribution.ts

@@ -7,13 +7,13 @@ import { clone } from 'sql/base/common/objects';
 import { IJSONSchema } from 'vs/base/common/jsonSchema';
 
 import { registerInsight } from 'sql/platform/dashboard/common/insightRegistry';
-import { properties as BarChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
+import { barChartSchema } from 'sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution';
 
 import TimeSeriesChart from './timeSeriesChart.component';
 
 const properties: IJSONSchema = {
 };
 
-const timeSeriesSchema = mixin(clone(BarChartSchema), properties) as IJSONSchema;
+const timeSeriesSchema = mixin(clone(barChartSchema), properties) as IJSONSchema;
 
 registerInsight('timeSeries', '', timeSeriesSchema, TimeSeriesChart);