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 6de38a8996..7721caff9d 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 @@ -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 { 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]); } diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.contribution.ts index 9c73c1394b..9f5e8f9497 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/chartInsight.contribution.ts +++ b/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.') } } }; \ No newline at end of file diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution.ts index ba7b787930..8e5318eeff 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/types/barChart.contribution.ts +++ b/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); diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/types/horizontalBarChart.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/types/horizontalBarChart.contribution.ts index 4332070d68..7bbe7c285c 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/types/horizontalBarChart.contribution.ts +++ b/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); diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/types/lineChart.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/types/lineChart.contribution.ts index 055aabe8fc..b317a6f41b 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/types/lineChart.contribution.ts +++ b/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); diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/types/scatterChart.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/types/scatterChart.contribution.ts index d9b43ac6de..d294c74f63 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/types/scatterChart.contribution.ts +++ b/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); diff --git a/src/sql/parts/dashboard/widgets/insights/views/charts/types/timeSeriesChart.contribution.ts b/src/sql/parts/dashboard/widgets/insights/views/charts/types/timeSeriesChart.contribution.ts index 4212ce03b8..8e97e3a9dd 100644 --- a/src/sql/parts/dashboard/widgets/insights/views/charts/types/timeSeriesChart.contribution.ts +++ b/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);