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
This commit is contained in:
Abbie Petchtes
2018-04-16 14:30:24 -07:00
committed by GitHub
parent b2c70e9301
commit ae8e2e1f89
7 changed files with 50 additions and 13 deletions

View File

@@ -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]);
}

View File

@@ -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.')
}
}
};

View File

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

View File

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

View File

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

View File

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

View File

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