public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Suggestions: Update all suggestions suppliers to be functions (#113986)

Browse Source 
* Suggestions: Convert panels to use function supplier

* rework deaggregation

* BarGauge

* cleanup and make consistent the deaggregation in suggestions

* Candlestick

* Implement timeseries and clean up some things that can already be deleted

* spotted some typos in self-review

* restore PanelDataSummary deprecated fields, we wont delete till Grafana 13

* change deprecation message

* remove some unused imports

* run prettier

* update radialbar defaults logic

* update tests and logic to DRY up the reduceOptions a bit and more thoroughly test the output

* Trend: Improve suggestions

* updates from review

* add unique DataFrameType list to PanelDataSummary

* add histogram suggestions

* rework panelDataSummary to be a class, change some things

* further boil down PanelDataSummary

* Improve FlameGgraph suggestions

* geomap and other defaults

* reorder the single frame with string and number test
This commit is contained in:
Paul Marbach
2025-11-26 08:30:38 -08:00
committed by GitHub
parent ca8cad68c8
commit ebaccc781b
53 changed files with 1573 additions and 1275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/panel/PanelPlugin.ts
+5
View File
@@ -381,6 +381,11 @@ export class PanelPlugin<
const appender = builder.getListAppender<TOptions, TFieldConfigOptions>({
pluginId: this.meta.id,
name: this.meta.name,
options: {},
fieldConfig: {
defaults: {},
overrides: [],
},
});
const result = supplier(builder.dataSummary);
packages/grafana-data/src/panel/suggestions/getPanelDataSummary.ts
+112 -50
View File
@@ -1,19 +1,27 @@
import { PreferredVisualisationType } from '../../types/data';
import { DataFrame, FieldType } from '../../types/dataFrame';
import { DataFrameType } from '../../types/dataFrameTypes';
/**
* @alpha
*/
export interface PanelDataSummary {
hasData?: boolean;
rowCountTotal: number;
/** max number of rows in any given dataframe in the panel data */
rowCountMax: number;
frameCount: number;
fieldCount: number;
/** max number of fields in any given dataframe in the panel data */
fieldCountMax: number;
/** given a field type, return the number of fields across all dataframes which match this type */
fieldCountByType: (type: FieldType) => number;
/** returns true if any fields in any frames match the field type */
hasFieldType: (type: FieldType) => boolean;
/** The first frame that set's this value */
preferredVisualisationType?: PreferredVisualisationType;
/* returns true if any of the frames in this panel data summary have the type */
hasDataFrameType: (type: DataFrameType) => boolean;
/* returns true if any of the frames in this panel data summary have the type */
hasPreferredVisualisationType: (type: PreferredVisualisationType) => boolean;
/** pass along a reference to the DataFrame array in case it's needed by the plugin */
rawFrames?: DataFrame[];
/* --- DEPRECATED FIELDS BELOW --- */
/** @deprecated use PanelDataSummary.fieldCountByType(FieldType.number) */
@@ -23,60 +31,114 @@ export interface PanelDataSummary {
/** @deprecated use PanelDataSummary.fieldCountByType(FieldType.string) */
stringFieldCount: number;
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.number) */
hasNumberField?: boolean;
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.time) */
hasTimeField?: boolean;
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.time) */
hasNumberField?: boolean;
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.string) */
hasStringField?: boolean;
}
/**
* @alpha
*/
class PanelDataSummaryImpl implements PanelDataSummary {
public rowCountTotal = 0;
/** max number of rows in any single dataframe in the panel data */
public rowCountMax = 0;
public fieldCount = 0;
/** max number of fields in any single dataframe in the panel data */
public fieldCountMax = 0;
private countByType: Partial<Record<FieldType, number>> = {};
private preferredVisualisationTypes: Set<PreferredVisualisationType> = new Set<PreferredVisualisationType>();
private dataFrameTypes: Set<DataFrameType> = new Set<DataFrameType>();
public get hasData(): boolean {
return this.rowCountTotal > 0;
}
public get frameCount(): number {
return this.rawFrames?.length ?? 0;
}
constructor(public rawFrames?: DataFrame[]) {
this._processFrames();
}
private _processFrames() {
for (const frame of this.rawFrames ?? []) {
this.rowCountTotal += frame.length;
if (frame.meta?.preferredVisualisationType) {
this.preferredVisualisationTypes.add(frame.meta.preferredVisualisationType);
}
if (frame.meta?.type) {
this.dataFrameTypes.add(frame.meta.type);
}
for (const field of frame.fields) {
this.fieldCount++;
this.countByType[field.type] = (this.countByType[field.type] || 0) + 1;
}
if (frame.length > this.rowCountMax) {
this.rowCountMax = frame.length;
}
if (frame.fields.length > this.fieldCountMax) {
this.fieldCountMax = frame.fields.length;
}
}
}
public fieldCountByType(type: FieldType): number {
return this.countByType[type] ?? 0;
}
public hasFieldType(type: FieldType): boolean {
return this.fieldCountByType(type) > 0;
}
public hasPreferredVisualisationType(type: PreferredVisualisationType): boolean {
return this.preferredVisualisationTypes.has(type);
}
public hasDataFrameType(type: DataFrameType): boolean {
return this.dataFrameTypes.has(type);
}
/**** DEPRECATED ****/
/** @deprecated use PanelDataSummary.fieldCountByType(FieldType.number) */
public get numberFieldCount(): number {
return this.fieldCountByType(FieldType.number);
}
/** @deprecated use PanelDataSummary.fieldCountByType(FieldType.time) */
public get timeFieldCount(): number {
return this.fieldCountByType(FieldType.time);
}
/** @deprecated use PanelDataSummary.fieldCountByType(FieldType.string) */
public get stringFieldCount() {
return this.fieldCountByType(FieldType.string);
}
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.number) */
public get hasTimeField() {
return this.fieldCountByType(FieldType.time) > 0;
}
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.time) */
public get hasNumberField() {
return this.fieldCountByType(FieldType.number) > 0;
}
/** @deprecated use PanelDataSummary.hasFieldType(FieldType.string) */
public get hasStringField() {
return this.fieldCountByType(FieldType.string) > 0;
}
}
/**
* @alpha
* given a list of dataframes, summarize attributes of those frames for features like suggestions.
* @param frames - dataframes to summarize
* @returns summary of the dataframes
*/
export function getPanelDataSummary(frames: DataFrame[] = []): PanelDataSummary {
let rowCountTotal = 0;
let rowCountMax = 0;
let fieldCount = 0;
const countByType: Partial<Record<FieldType, number>> = {};
let preferredVisualisationType: PreferredVisualisationType | undefined;
for (const frame of frames) {
rowCountTotal += frame.length;
if (frame.meta?.preferredVisualisationType) {
preferredVisualisationType = frame.meta.preferredVisualisationType;
}
for (const field of frame.fields) {
fieldCount++;
countByType[field.type] = (countByType[field.type] || 0) + 1;
}
if (frame.length > rowCountMax) {
rowCountMax = frame.length;
}
}
const fieldCountByType = (f: FieldType) => countByType[f] ?? 0;
return {
rowCountTotal,
rowCountMax,
fieldCount,
preferredVisualisationType,
frameCount: frames.length,
hasData: rowCountTotal > 0,
hasFieldType: (f: FieldType) => fieldCountByType(f) > 0,
fieldCountByType,
// deprecated
numberFieldCount: fieldCountByType(FieldType.number),
timeFieldCount: fieldCountByType(FieldType.time),
stringFieldCount: fieldCountByType(FieldType.string),
hasTimeField: fieldCountByType(FieldType.time) > 0,
hasNumberField: fieldCountByType(FieldType.number) > 0,
hasStringField: fieldCountByType(FieldType.string) > 0,
};
export function getPanelDataSummary(frames?: DataFrame[]): PanelDataSummary {
return new PanelDataSummaryImpl(frames);
}
packages/grafana-data/src/transformations/transformers/calculateField.ts
+3 -3
View File
@@ -72,7 +72,7 @@ interface IndexOptions {
asPercentile: boolean;
}
const defaultReduceOptions: ReduceOptions = {
const defaultNumericVizOptions: ReduceOptions = {
reducer: ReducerID.sum,
};
@@ -149,10 +149,10 @@ export const calculateFieldTransformer: DataTransformerInfo<CalculateFieldTransf
switch (mode) {
case CalculateFieldMode.ReduceRow:
creator = getReduceRowCreator(defaults(options.reduce, defaultReduceOptions), data);
creator = getReduceRowCreator(defaults(options.reduce, defaultNumericVizOptions), data);
break;
case CalculateFieldMode.CumulativeFunctions:
creator = getCumulativeCreator(defaults(options.cumulative, defaultReduceOptions), data);
creator = getCumulativeCreator(defaults(options.cumulative, defaultNumericVizOptions), data);
break;
case CalculateFieldMode.WindowFunctions:
creator = getWindowCreator(defaults(options.window, defaultWindowOptions), data);
packages/grafana-data/src/types/suggestions.ts
+2
View File
@@ -75,7 +75,9 @@ export interface VisualizationSuggestion<TOptions extends unknown = {}, TFieldCo
* mutate the suggestion object which is passed in as the first argument.
*/
previewModifier?: (suggestion: VisualizationSuggestion<TOptions, TFieldConfig>) => void;
/** @deprecated this will no longer be supported in the new Suggestions UI. */
icon?: string;
/** @deprecated this will no longer be supported in the new Suggestions UI. */
imgSrc?: string;
};
}
public/app/features/geo/utils/location.ts
+10
View File
@@ -68,6 +68,16 @@ const defaultMatchers: LocationFieldMatchers = {
geo: (frame: DataFrame) => frame.fields.find((f) => f.type === FieldType.geo),
};
/**
* suggestions needs to run sync, and we just want to use the default matchers in that situation.
*/
export function getDefaultLocationMatchers(): LocationFieldMatchers {
return {
...defaultMatchers,
mode: FrameGeometrySourceMode.Auto,
};
}
export async function getLocationMatchers(src?: FrameGeometrySource): Promise<LocationFieldMatchers> {
const info: LocationFieldMatchers = {
...defaultMatchers,
public/app/features/panel/components/PanelDataErrorView.tsx
+4 -3
View File
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import {
CoreApp,
FieldType,
getPanelDataSummary,
GrafanaTheme2,
PanelDataSummary,
@@ -134,15 +135,15 @@ function getMessageFor(
return fieldConfig?.defaults.noValue ?? t('panel.panel-data-error-view.no-value.default', 'No data');
}
if (needsStringField && !dataSummary.hasStringField) {
if (needsStringField && !dataSummary.hasFieldType(FieldType.string)) {
return t('panel.panel-data-error-view.missing-value.string', 'Data is missing a string field');
}
if (needsNumberField && !dataSummary.hasNumberField) {
if (needsNumberField && !dataSummary.hasFieldType(FieldType.number)) {
return t('panel.panel-data-error-view.missing-value.number', 'Data is missing a number field');
}
if (needsTimeField && !dataSummary.hasTimeField) {
if (needsTimeField && !dataSummary.hasFieldType(FieldType.time)) {
return t('panel.panel-data-error-view.missing-value.time', 'Data is missing a time field');
}
public/app/features/panel/suggestions/getAllSuggestions.test.ts
+171 -84
View File
@@ -5,12 +5,18 @@ import {
LoadingState,
PanelData,
PanelPluginMeta,
toDataFrame,
PanelPluginVisualizationSuggestion,
toDataFrame,
} from '@grafana/data';
import { GraphFieldConfig, ReduceDataOptions } from '@grafana/schema';
import {
BarGaugeDisplayMode,
BigValueColorMode,
GraphFieldConfig,
ReduceDataOptions,
StackingMode,
VizOrientation,
} from '@grafana/schema';
import { config } from 'app/core/config';
import { SuggestionName } from 'app/types/suggestions';
import { getAllSuggestions, panelsToCheckFirst } from './getAllSuggestions';
@@ -21,6 +27,8 @@ for (const pluginId of panelsToCheckFirst) {
} as PanelPluginMeta;
}
const SCALAR_PLUGINS = ['gauge', 'stat', 'bargauge', 'piechart', 'radialbar'];
config.panels['text'] = {
id: 'text',
name: 'Text',
@@ -69,7 +77,10 @@ scenario('No series', (ctx) => {
ctx.setData([]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([SuggestionName.Table, SuggestionName.TextPanel]);
expect(ctx.suggestions).toEqual([
expect.objectContaining({ pluginId: 'table' }),
expect.objectContaining({ pluginId: 'text' }),
]);
});
});
@@ -84,7 +95,7 @@ scenario('No rows', (ctx) => {
]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([SuggestionName.Table]);
expect(ctx.suggestions).toEqual([expect.objectContaining({ pluginId: 'table' })]);
});
});
@@ -100,33 +111,46 @@ scenario('Single frame with time and number field', (ctx) => {
it('should return correct suggestions', () => {
expect(ctx.suggestions).toEqual([
expect.objectContaining({ name: SuggestionName.LineChart }),
expect.objectContaining({ name: SuggestionName.LineChartSmooth }),
expect.objectContaining({ name: SuggestionName.AreaChart }),
expect.objectContaining({ name: SuggestionName.LineChartGradientColorScheme }),
expect.objectContaining({ name: SuggestionName.BarChart }),
expect.objectContaining({ name: SuggestionName.BarChartGradientColorScheme }),
expect.objectContaining({ name: SuggestionName.Gauge }),
expect.objectContaining({ name: SuggestionName.GaugeNoThresholds }),
expect.objectContaining({ name: SuggestionName.Stat }),
expect.objectContaining({ name: SuggestionName.StatColoredBackground }),
expect.objectContaining({ name: SuggestionName.BarGaugeBasic }),
expect.objectContaining({ name: SuggestionName.BarGaugeLCD }),
expect.objectContaining({ name: SuggestionName.Table }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Line chart' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Line chart - smooth' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Area chart' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Bar chart' }),
expect.objectContaining({ pluginId: 'gauge' }),
expect.objectContaining({ pluginId: 'gauge', options: expect.objectContaining({ showThresholdMarkers: false }) }),
expect.objectContaining({ pluginId: 'stat' }),
expect.objectContaining({
pluginId: 'stat',
options: expect.objectContaining({ colorMode: BigValueColorMode.Background }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Basic }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Lcd }),
}),
expect.objectContaining({ pluginId: 'table' }),
expect.objectContaining({ pluginId: 'state-timeline' }),
expect.objectContaining({ name: SuggestionName.StatusHistory }),
expect.objectContaining({ pluginId: 'status-history' }),
expect.objectContaining({ pluginId: 'heatmap' }),
expect.objectContaining({ pluginId: 'histogram' }),
]);
});
it('Bar chart suggestion should be using timeseries panel', () => {
expect(ctx.suggestions.find((x) => x.name === SuggestionName.BarChart)?.pluginId).toBe('timeseries');
expect(ctx.suggestions.find((x) => x.name === 'Bar chart')?.pluginId).toBe('timeseries');
});
it('Stat panels have reduce values disabled', () => {
for (const suggestion of ctx.suggestions) {
if (suggestion.options?.reduceOptions?.values) {
throw new Error(`Suggestion ${suggestion.name} reduce.values set to true when it should be false`);
}
it('Scalar panels should use calcs', () => {
for (const suggestion of ctx.suggestions.filter((s) => SCALAR_PLUGINS.includes(s.pluginId))) {
expect(suggestion).toEqual(
expect.objectContaining({
options: expect.objectContaining({
reduceOptions: expect.objectContaining({ values: false, calcs: ['lastNotNull'] }),
}),
})
);
}
});
});
@@ -144,31 +168,46 @@ scenario('Single frame with time 2 number fields', (ctx) => {
it('should return correct suggestions', () => {
expect(ctx.suggestions).toEqual([
expect.objectContaining({ name: SuggestionName.LineChart }),
expect.objectContaining({ name: SuggestionName.LineChartSmooth }),
expect.objectContaining({ name: SuggestionName.AreaChartStacked }),
expect.objectContaining({ name: SuggestionName.AreaChartStackedPercent }),
expect.objectContaining({ name: SuggestionName.BarChartStacked }),
expect.objectContaining({ name: SuggestionName.BarChartStackedPercent }),
expect.objectContaining({ name: SuggestionName.Gauge }),
expect.objectContaining({ name: SuggestionName.GaugeNoThresholds }),
expect.objectContaining({ name: SuggestionName.Stat }),
expect.objectContaining({ name: SuggestionName.StatColoredBackground }),
expect.objectContaining({ name: SuggestionName.PieChart }),
expect.objectContaining({ name: SuggestionName.PieChartDonut }),
expect.objectContaining({ name: SuggestionName.BarGaugeBasic }),
expect.objectContaining({ name: SuggestionName.BarGaugeLCD }),
expect.objectContaining({ name: SuggestionName.Table }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Line chart' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Line chart - smooth' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Area chart - stacked' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Area chart - stacked by percentage' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Bar chart - stacked' }),
expect.objectContaining({ pluginId: 'timeseries', name: 'Bar chart - stacked by percentage' }),
expect.objectContaining({ pluginId: 'gauge' }),
expect.objectContaining({ pluginId: 'gauge', options: expect.objectContaining({ showThresholdMarkers: false }) }),
expect.objectContaining({ pluginId: 'stat' }),
expect.objectContaining({
pluginId: 'stat',
options: expect.objectContaining({ colorMode: BigValueColorMode.Background }),
}),
expect.objectContaining({ pluginId: 'piechart' }),
expect.objectContaining({ pluginId: 'piechart', options: expect.objectContaining({ pieType: 'donut' }) }),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Basic }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Lcd }),
}),
expect.objectContaining({ pluginId: 'table' }),
expect.objectContaining({ pluginId: 'state-timeline' }),
expect.objectContaining({ name: SuggestionName.StatusHistory }),
expect.objectContaining({ pluginId: 'status-history' }),
expect.objectContaining({ pluginId: 'heatmap' }),
expect.objectContaining({ pluginId: 'histogram' }),
]);
});
it('Stat panels have reduceOptions.values disabled', () => {
for (const suggestion of ctx.suggestions) {
if (suggestion.options?.reduceOptions?.values) {
throw new Error(`Suggestion ${suggestion.name} reduce.values set to true when it should be false`);
}
it('Scalar panels should use calcs', () => {
for (const suggestion of ctx.suggestions.filter((s) => SCALAR_PLUGINS.includes(s.pluginId))) {
expect(suggestion).toEqual(
expect.objectContaining({
options: expect.objectContaining({
reduceOptions: expect.objectContaining({ values: false, calcs: ['lastNotNull'] }),
}),
})
);
}
});
});
@@ -184,7 +223,7 @@ scenario('Single time series with 100 data points', (ctx) => {
]);
it('should not suggest bar chart', () => {
expect(ctx.suggestions.find((x) => x.name === SuggestionName.BarChart)).toBe(undefined);
expect(ctx.suggestions.find((x) => x.name === 'Bar chart')).toBe(undefined);
});
});
@@ -235,26 +274,42 @@ scenario('Single frame with string and number field', (ctx) => {
]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([
SuggestionName.BarChart,
SuggestionName.BarChartHorizontal,
SuggestionName.Gauge,
SuggestionName.GaugeNoThresholds,
SuggestionName.Stat,
SuggestionName.StatColoredBackground,
SuggestionName.PieChart,
SuggestionName.PieChartDonut,
SuggestionName.BarGaugeBasic,
SuggestionName.BarGaugeLCD,
SuggestionName.Table,
expect(ctx.suggestions).toEqual([
expect.objectContaining({ pluginId: 'piechart' }),
expect.objectContaining({ pluginId: 'piechart', options: expect.objectContaining({ pieType: 'donut' }) }),
expect.objectContaining({ pluginId: 'barchart' }),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ orientation: VizOrientation.Horizontal }),
}),
expect.objectContaining({ pluginId: 'gauge' }),
expect.objectContaining({ pluginId: 'gauge', options: expect.objectContaining({ showThresholdMarkers: false }) }),
expect.objectContaining({ pluginId: 'stat' }),
expect.objectContaining({
pluginId: 'stat',
options: expect.objectContaining({ colorMode: BigValueColorMode.Background }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Basic }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Lcd }),
}),
expect.objectContaining({ pluginId: 'table' }),
expect.objectContaining({ pluginId: 'histogram' }),
]);
});
it('Stat/Gauge/BarGauge/PieChart panels to have reduceOptions.values enabled', () => {
for (const suggestion of ctx.suggestions) {
if (suggestion.options?.reduceOptions && !suggestion.options?.reduceOptions?.values) {
throw new Error(`Suggestion ${suggestion.name} reduce.values set to false when it should be true`);
}
it('Scalar panels should contain raw values', () => {
for (const suggestion of ctx.suggestions.filter((s) => SCALAR_PLUGINS.includes(s.pluginId))) {
expect(suggestion).toEqual(
expect.objectContaining({
options: expect.objectContaining({ reduceOptions: expect.objectContaining({ values: true, calcs: [] }) }),
})
);
}
});
});
@@ -271,22 +326,48 @@ scenario('Single frame with string and 2 number field', (ctx) => {
]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([
SuggestionName.BarChart,
SuggestionName.BarChartStacked,
SuggestionName.BarChartStackedPercent,
SuggestionName.BarChartHorizontal,
SuggestionName.BarChartHorizontalStacked,
SuggestionName.BarChartHorizontalStackedPercent,
SuggestionName.Gauge,
SuggestionName.GaugeNoThresholds,
SuggestionName.Stat,
SuggestionName.StatColoredBackground,
SuggestionName.PieChart,
SuggestionName.PieChartDonut,
SuggestionName.BarGaugeBasic,
SuggestionName.BarGaugeLCD,
SuggestionName.Table,
expect(ctx.suggestions).toEqual([
expect.objectContaining({ pluginId: 'barchart' }),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ stacking: StackingMode.Normal }),
}),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ stacking: StackingMode.Percent }),
}),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ orientation: VizOrientation.Horizontal }),
}),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ orientation: VizOrientation.Horizontal, stacking: StackingMode.Normal }),
}),
expect.objectContaining({
pluginId: 'barchart',
options: expect.objectContaining({ orientation: VizOrientation.Horizontal, stacking: StackingMode.Percent }),
}),
expect.objectContaining({ pluginId: 'gauge' }),
expect.objectContaining({ pluginId: 'gauge', options: expect.objectContaining({ showThresholdMarkers: false }) }),
expect.objectContaining({ pluginId: 'stat' }),
expect.objectContaining({
pluginId: 'stat',
options: expect.objectContaining({ colorMode: BigValueColorMode.Background }),
}),
expect.objectContaining({ pluginId: 'piechart' }),
expect.objectContaining({ pluginId: 'piechart', options: expect.objectContaining({ pieType: 'donut' }) }),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Basic }),
}),
expect.objectContaining({
pluginId: 'bargauge',
options: expect.objectContaining({ displayMode: BarGaugeDisplayMode.Lcd }),
}),
expect.objectContaining({ pluginId: 'table' }),
expect.objectContaining({ pluginId: 'histogram' }),
]);
});
});
@@ -299,11 +380,14 @@ scenario('Single frame with only string field', (ctx) => {
]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([SuggestionName.Stat, SuggestionName.Table]);
expect(ctx.suggestions).toEqual([
expect.objectContaining({ pluginId: 'stat' }),
expect.objectContaining({ pluginId: 'table' }),
]);
});
it('Stat panels have reduceOptions.fields set to show all fields', () => {
for (const suggestion of ctx.suggestions) {
for (const suggestion of ctx.suggestions.filter((s) => s.pluginId === 'stat')) {
if (suggestion.options?.reduceOptions) {
expect(suggestion.options.reduceOptions.fields).toBe('/.*/');
}
@@ -333,7 +417,10 @@ scenario('Given default loki logs data', (ctx) => {
]);
it('should return correct suggestions', () => {
expect(ctx.names()).toEqual([SuggestionName.Logs, SuggestionName.Table]);
expect(ctx.suggestions).toEqual([
expect.objectContaining({ pluginId: 'logs' }),
expect.objectContaining({ pluginId: 'table' }),
]);
});
});
@@ -356,7 +443,7 @@ scenario('Given a preferredVisualisationType', (ctx) => {
]);
it('should return the preferred visualization first', () => {
expect(ctx.names()[0]).toEqual(SuggestionName.Table);
expect(ctx.suggestions[0]).toEqual(expect.objectContaining({ pluginId: 'table' }));
});
});
public/app/features/panel/suggestions/getAllSuggestions.ts
+26 -7
View File
@@ -4,6 +4,7 @@ import {
VisualizationSuggestionsBuilder,
PanelModel,
VisualizationSuggestionScore,
PreferredVisualisationType,
} from '@grafana/data';
import { config } from '@grafana/runtime';
import { importPanelPlugin } from 'app/features/plugins/importPanelPlugin';
@@ -23,8 +24,26 @@ export const panelsToCheckFirst = [
'flamegraph',
'traces',
'nodeGraph',
'heatmap',
'histogram',
'geomap',
];
/**
* some of the PreferredVisualisationTypes do not match the panel plugin ids, so we have to map them. d'oh.
*/
const PLUGIN_ID_TO_PREFERRED_VIZ_TYPE: Record<string, PreferredVisualisationType> = {
traces: 'trace',
timeseries: 'graph',
table: 'table',
logs: 'logs',
nodeGraph: 'nodeGraph',
flamegraph: 'flamegraph',
};
const mapPreferredVisualisationTypeToPlugin = (type: string): PreferredVisualisationType | undefined => {
return PLUGIN_ID_TO_PREFERRED_VIZ_TYPE[type];
};
export async function getAllSuggestions(
data?: PanelData,
panel?: PanelModel
@@ -61,13 +80,13 @@ export async function getAllSuggestions(
}
return list.sort((a, b) => {
if (builder.dataSummary.preferredVisualisationType) {
if (a.pluginId === builder.dataSummary.preferredVisualisationType) {
return -1;
}
if (b.pluginId === builder.dataSummary.preferredVisualisationType) {
return 1;
}
const mappedA = mapPreferredVisualisationTypeToPlugin(a.pluginId);
if (mappedA && builder.dataSummary.hasPreferredVisualisationType(mappedA)) {
return -1;
}
const mappedB = mapPreferredVisualisationTypeToPlugin(a.pluginId);
if (mappedB && builder.dataSummary.hasPreferredVisualisationType(mappedB)) {
return 1;
}
return (b.score ?? VisualizationSuggestionScore.OK) - (a.score ?? VisualizationSuggestionScore.OK);
});
public/app/features/panel/suggestions/utils.ts
+44 -1
View File
@@ -1,4 +1,11 @@
import { PanelData, PanelDataSummary } from '@grafana/data';
import {
DataFrameType,
PanelData,
PanelDataSummary,
VisualizationSuggestion,
VisualizationSuggestionScore,
} from '@grafana/data';
import { ReduceDataOptions } from '@grafana/schema';
/**
* @internal
@@ -10,6 +17,42 @@ export function showDefaultSuggestion(fn: (panelDataSummary: PanelDataSummary) =
return (panelDataSummary: PanelDataSummary) => (fn(panelDataSummary) ? [{}] : undefined);
}
/**
* @internal
* for panel plugins which render "scalar" data (stat, gauge, etc), this helper provides default reduce options
* depending on whether deaggregation is likely needed.
* @param suggestion the suggestion to modify
* @param panelDataSummary the panel data summary to use for scoring
* @param shouldUseRawValues if true, reduceOptions will be set to use raw values,
* otherwise a calcs will be used with the default value of `lastNotNull`.
*/
export function defaultNumericVizOptions(
suggestion: VisualizationSuggestion<{ reduceOptions?: ReduceDataOptions }>,
panelDataSummary: PanelDataSummary,
shouldUseRawValues: boolean
): VisualizationSuggestion {
suggestion.score =
(suggestion.score ??
(panelDataSummary.hasDataFrameType(DataFrameType.NumericLong) ||
panelDataSummary.hasDataFrameType(DataFrameType.NumericWide) ||
panelDataSummary.hasDataFrameType(DataFrameType.NumericMulti)))
? VisualizationSuggestionScore.Good
: VisualizationSuggestionScore.OK;
suggestion.options = suggestion.options ?? {};
suggestion.options.reduceOptions =
suggestion.options.reduceOptions ??
(shouldUseRawValues
? {
values: true,
calcs: [],
}
: {
values: false,
calcs: ['lastNotNull'],
});
return suggestion;
}
/**
* @internal
* Checks if the panel has data
public/app/plugins/panel/barchart/module.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import { BarChartPanel } from './BarChartPanel';
import { TickSpacingEditor } from './TickSpacingEditor';
import { changeToBarChartPanelMigrationHandler } from './migrations';
import { FieldConfig, Options, defaultFieldConfig, defaultOptions } from './panelcfg.gen';
import { BarChartSuggestionsSupplier } from './suggestions';
import { barchartSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options, FieldConfig>(BarChartPanel)
.setPanelChangeHandler(changeToBarChartPanelMigrationHandler)
@@ -257,7 +257,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(BarChartPanel)
commonOptionsBuilder.addLegendOptions(builder);
commonOptionsBuilder.addTextSizeOptions(builder, { withValue: true });
})
.setSuggestionsSupplier(new BarChartSuggestionsSupplier());
.setSuggestionsSupplier(barchartSuggestionsSupplier);
function countNumberFields(data?: DataFrame[]): number {
let count = 0;
public/app/plugins/panel/barchart/suggestions.ts
+87 -74
View File
@@ -1,99 +1,112 @@
import { VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data';
import { defaultsDeep } from 'lodash';
import { FieldType, VisualizationSuggestion, VisualizationSuggestionsSupplierFn, VizOrientation } from '@grafana/data';
import { t } from '@grafana/i18n';
import { LegendDisplayMode, StackingMode, VisibilityMode } from '@grafana/schema';
import { SuggestionName } from 'app/types/suggestions';
import { FieldConfig, Options } from './panelcfg.gen';
export class BarChartSuggestionsSupplier {
getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
return builder.getListAppender<Options, FieldConfig>({
name: SuggestionName.BarChart,
pluginId: 'barchart',
options: {
showValue: VisibilityMode.Never,
legend: {
calcs: [],
displayMode: LegendDisplayMode.List,
showLegend: true,
placement: 'right',
},
const withDefaults = (suggestion: VisualizationSuggestion<Options, FieldConfig>) =>
defaultsDeep(suggestion, {
options: {
showValue: VisibilityMode.Never,
legend: {
calcs: [],
displayMode: LegendDisplayMode.List,
showLegend: true,
placement: 'right',
},
fieldConfig: {
defaults: {
unit: 'short',
custom: {},
},
overrides: [],
},
fieldConfig: {
defaults: {
unit: 'short',
custom: {},
},
cardOptions: {
previewModifier: (s) => {
s.options!.barWidth = 0.8;
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
s.options!.barWidth = 0.8;
s.fieldConfig!.defaults!.custom!.hideFrom = { tooltip: false, legend: true, viz: false }; // hide legend in preview
},
});
},
} satisfies VisualizationSuggestion<Options, FieldConfig>);
export const barchartSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, FieldConfig> = (dataSummary) => {
if (dataSummary.frameCount !== 1) {
return;
}
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const list = this.getListWithDefaults(builder);
const { dataSummary } = builder;
if (!dataSummary.hasFieldType(FieldType.number) || !dataSummary.hasFieldType(FieldType.string)) {
return;
}
if (dataSummary.frameCount !== 1) {
return;
}
// if you have this many rows barchart might not be a good fit
if (dataSummary.rowCountTotal > 50) {
return;
}
if (!dataSummary.hasNumberField || !dataSummary.hasStringField) {
return;
}
const result: Array<VisualizationSuggestion<Options, FieldConfig>> = [
{
name: t('barchart.suggestions.vertical', 'Bar chart'),
},
];
// if you have this many rows barchart might not be a good fit
if (dataSummary.rowCountTotal > 50) {
return;
}
// Vertical bars
list.append({
name: SuggestionName.BarChart,
});
if (dataSummary.numberFieldCount > 1) {
list.append({
name: SuggestionName.BarChartStacked,
if (dataSummary.fieldCountByType(FieldType.number) > 1) {
result.push(
{
name: t('barchart.suggestions.vert-stacked', 'Bar chart - stacked'),
options: {
stacking: StackingMode.Normal,
},
});
list.append({
name: SuggestionName.BarChartStackedPercent,
},
{
name: t('barchart.suggestions.vert-stacked-percent', 'Bar chart - stacked by percentage'),
options: {
stacking: StackingMode.Percent,
},
});
}
// horizontal bars
list.append({
name: SuggestionName.BarChartHorizontal,
options: {
orientation: VizOrientation.Horizontal,
},
});
if (dataSummary.numberFieldCount > 1) {
list.append({
name: SuggestionName.BarChartHorizontalStacked,
options: {
stacking: StackingMode.Normal,
orientation: VizOrientation.Horizontal,
fieldConfig: {
overrides: [],
defaults: {
unit: 'percentunit',
},
},
});
}
);
}
list.append({
name: SuggestionName.BarChartHorizontalStackedPercent,
// horizontal bars
result.push({
name: t('barchart.suggestions.horizontal', 'Horizontal bar chart'),
options: {
orientation: VizOrientation.Horizontal,
},
});
if (dataSummary.fieldCountByType(FieldType.number) > 1) {
result.push(
{
name: t('barchart.suggestions.hz-stacked', 'Horizontal bar chart - stacked'),
options: {
orientation: VizOrientation.Horizontal,
stacking: StackingMode.Normal,
},
},
{
name: t('barchart.suggestions.hz-stacked-percent', 'Horizontal bar chart - stacked by percentage'),
options: {
orientation: VizOrientation.Horizontal,
stacking: StackingMode.Percent,
},
});
}
fieldConfig: {
overrides: [],
defaults: {
unit: 'percentunit',
},
},
}
);
}
}
return result.map(withDefaults);
};
public/app/plugins/panel/bargauge/module.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { addOrientationOption, addStandardDataReduceOptions } from '../stat/comm
import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
import { BarGaugePanel } from './BarGaugePanel';
import { Options, defaultOptions } from './panelcfg.gen';
import { BarGaugeSuggestionsSupplier } from './suggestions';
import { barGaugeSugggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options>(BarGaugePanel)
.useFieldConfig()
@@ -151,4 +151,4 @@ export const plugin = new PanelPlugin<Options>(BarGaugePanel)
})
.setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
.setMigrationHandler(barGaugePanelMigrationHandler)
.setSuggestionsSupplier(new BarGaugeSuggestionsSupplier());
.setSuggestionsSupplier(barGaugeSugggestionsSupplier);
public/app/plugins/panel/bargauge/suggestions.ts
+51 -106
View File
@@ -1,115 +1,60 @@
import { FieldColorModeId, VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data';
import { defaultsDeep } from 'lodash';
import {
FieldColorModeId,
FieldType,
VisualizationSuggestion,
VisualizationSuggestionsSupplierFn,
VizOrientation,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { BarGaugeDisplayMode } from '@grafana/ui';
import { SuggestionName } from 'app/types/suggestions';
import { defaultNumericVizOptions } from 'app/features/panel/suggestions/utils';
import { Options } from './panelcfg.gen';
export class BarGaugeSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
if (!dataSummary.hasData || !dataSummary.hasNumberField) {
return;
}
const list = builder.getListAppender<Options, {}>({
name: '',
pluginId: 'bargauge',
options: {},
fieldConfig: {
defaults: {
custom: {},
const withDefaults = (suggestion: VisualizationSuggestion<Options>): VisualizationSuggestion<Options> =>
defaultsDeep(suggestion, {
options: {
displayMode: BarGaugeDisplayMode.Basic,
orientation: VizOrientation.Horizontal,
},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
overrides: [],
},
});
overrides: [],
},
});
// This is probably not a good option for many numeric fields
if (dataSummary.numberFieldCount > 50) {
return;
}
const BAR_LIMIT = 30;
// To use show individual row values we also need a string field to give each value a name
if (dataSummary.hasStringField && dataSummary.frameCount === 1 && dataSummary.rowCountTotal < 30) {
list.append({
name: SuggestionName.BarGaugeBasic,
options: {
reduceOptions: {
values: true,
calcs: [],
},
displayMode: BarGaugeDisplayMode.Basic,
orientation: VizOrientation.Horizontal,
},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
},
overrides: [],
},
});
list.append({
name: SuggestionName.BarGaugeLCD,
options: {
reduceOptions: {
values: true,
calcs: [],
},
displayMode: BarGaugeDisplayMode.Lcd,
orientation: VizOrientation.Horizontal,
},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
},
overrides: [],
},
});
} else {
list.append({
name: SuggestionName.BarGaugeBasic,
options: {
displayMode: BarGaugeDisplayMode.Basic,
orientation: VizOrientation.Horizontal,
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
},
overrides: [],
},
});
list.append({
name: SuggestionName.BarGaugeLCD,
options: {
displayMode: BarGaugeDisplayMode.Lcd,
orientation: VizOrientation.Horizontal,
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
},
overrides: [],
},
});
}
export const barGaugeSugggestionsSupplier: VisualizationSuggestionsSupplierFn<Options> = (dataSummary) => {
if (!dataSummary.hasData || !dataSummary.hasFieldType(FieldType.number)) {
return;
}
}
// This is probably not a good option for many numeric fields
if (dataSummary.fieldCountByType(FieldType.number) > BAR_LIMIT) {
return;
}
const suggestions: Array<VisualizationSuggestion<Options>> = [
{ name: t('bargauge.suggestions.basic', 'Bar gauge') },
{
name: t('bargauge.suggestions.lcd', 'Bar gauge - LCD'),
options: {
displayMode: BarGaugeDisplayMode.Lcd,
},
},
];
const shouldUseRawValues =
dataSummary.hasFieldType(FieldType.string) &&
dataSummary.frameCount === 1 &&
dataSummary.rowCountTotal <= BAR_LIMIT;
return suggestions.map((s) => defaultNumericVizOptions(withDefaults(s), dataSummary, shouldUseRawValues));
};
public/app/plugins/panel/candlestick/module.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config';
import { CandlestickPanel } from './CandlestickPanel';
import { CandlestickData, getCandlestickFieldsInfo, FieldPickerInfo, prepareCandlestickFields } from './fields';
import { CandlestickSuggestionsSupplier } from './suggestions';
import { candlestickSuggestionSupplier } from './suggestions';
import { defaultCandlestickColors, defaultOptions, Options, VizDisplayMode, ColorStrategy, CandleStyle } from './types';
const numericFieldFilter = (f: Field) => f.type === FieldType.number;
@@ -147,4 +147,4 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(CandlestickPane
commonOptionsBuilder.addLegendOptions(builder);
})
.setDataSupport({ annotations: true, alertStates: true })
.setSuggestionsSupplier(new CandlestickSuggestionsSupplier());
.setSuggestionsSupplier(candlestickSuggestionSupplier);
public/app/plugins/panel/candlestick/suggestions.ts
+23 -48
View File
@@ -1,54 +1,29 @@
import { VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
import { FieldType, VisualizationSuggestionScore, VisualizationSuggestionsSupplierFn } from '@grafana/data';
import { config } from '@grafana/runtime';
import { SuggestionName } from 'app/types/suggestions';
import { prepareCandlestickFields } from './fields';
import { defaultOptions, Options } from './types';
export class CandlestickSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
if (
!builder.data?.series ||
!dataSummary.hasData ||
dataSummary.timeFieldCount < 1 ||
dataSummary.numberFieldCount < 2 ||
dataSummary.numberFieldCount > 10
) {
return;
}
const info = prepareCandlestickFields(builder.data.series, defaultOptions, config.theme2);
if (!info) {
return;
}
// Regular timeseries
if (info.open === info.high && info.open === info.low) {
return;
}
const list = builder.getListAppender<Options, {}>({
name: '',
pluginId: 'candlestick',
options: {},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
});
list.append({
name: SuggestionName.Candlestick,
options: defaultOptions,
fieldConfig: {
defaults: {},
overrides: [],
},
score: info.autoOpenClose ? VisualizationSuggestionScore.Good : VisualizationSuggestionScore.Best,
});
export const candlestickSuggestionSupplier: VisualizationSuggestionsSupplierFn<Options> = (dataSummary) => {
if (
!dataSummary.rawFrames ||
!dataSummary.hasData ||
dataSummary.fieldCountByType(FieldType.time) < 1 ||
dataSummary.fieldCountByType(FieldType.number) < 2 ||
dataSummary.fieldCountByType(FieldType.number) > 10
) {
return;
}
}
const info = prepareCandlestickFields(dataSummary.rawFrames, defaultOptions, config.theme2);
if (!info) {
return;
}
// Regular timeseries
if (info.open === info.high && info.open === info.low) {
return;
}
return [{ score: info.autoOpenClose ? VisualizationSuggestionScore.Good : VisualizationSuggestionScore.Best }];
};
public/app/plugins/panel/flamegraph/FlameGraphPanel.tsx
+3 -1
View File
@@ -2,6 +2,8 @@ import { CoreApp, PanelProps } from '@grafana/data';
import { FlameGraph, checkFields, getMessageCheckFieldsResult } from '@grafana/flamegraph';
import { PanelDataErrorView, reportInteraction, config } from '@grafana/runtime';
import { Options } from './types';
function interaction(name: string, context: Record<string, string | number> = {}) {
reportInteraction(`grafana_flamegraph_${name}`, {
app: CoreApp.Unknown,
@@ -10,7 +12,7 @@ function interaction(name: string, context: Record<string, string | number> = {}
});
}
export const FlameGraphPanel = (props: PanelProps) => {
export const FlameGraphPanel = (props: PanelProps<Options>) => {
const wrongFields = checkFields(props.data.series[0]);
if (wrongFields) {
return (
public/app/plugins/panel/flamegraph/module.tsx
+20 -3
View File
@@ -1,12 +1,29 @@
import { FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { checkFields } from '@grafana/flamegraph';
import { FlameGraphPanel } from './FlameGraphPanel';
import { FlameGraphSuggestionsSupplier } from './suggestions';
import { Options } from './types';
const flamegraphConfigOptions = [FieldConfigProperty.Unit, FieldConfigProperty.Decimals];
export const plugin = new PanelPlugin(FlameGraphPanel)
.setSuggestionsSupplier(new FlameGraphSuggestionsSupplier())
export const plugin = new PanelPlugin<Options>(FlameGraphPanel)
// check that the first frame of the data has the required fields for a flamegraph
.setSuggestionsSupplier((ds) => {
if (!ds.rawFrames?.some((frame) => checkFields(frame) === undefined)) {
return;
}
return [
{
cardOptions: {
previewModifier: (s) => {
s.options = s.options || {};
s.options.showFlameGraphOnly = true;
},
},
},
];
})
.useFieldConfig({
disableStandardOptions: Object.values(FieldConfigProperty).filter((v) => !flamegraphConfigOptions.includes(v)),
});
public/app/plugins/panel/flamegraph/suggestions.ts
-31
View File
@@ -1,31 +0,0 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { checkFields } from '@grafana/flamegraph';
import { SuggestionName } from 'app/types/suggestions';
export class FlameGraphSuggestionsSupplier {
getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
return builder.getListAppender<{}, {}>({
name: SuggestionName.FlameGraph,
pluginId: 'flamegraph',
});
}
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
if (!builder.data) {
return;
}
const dataFrame = builder.data.series[0];
if (!dataFrame) {
return;
}
const wrongFields = checkFields(dataFrame);
if (wrongFields) {
return;
}
this.getListWithDefaults(builder).append({
name: SuggestionName.FlameGraph,
});
}
}
public/app/plugins/panel/flamegraph/types.ts
+3
View File
@@ -0,0 +1,3 @@
export interface Options {
showFlameGraphOnly?: boolean;
}
public/app/plugins/panel/gauge/module.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { addOrientationOption, addStandardDataReduceOptions } from '../stat/comm
import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
import { GaugePanel } from './GaugePanel';
import { Options, defaultOptions } from './panelcfg.gen';
import { GaugeSuggestionsSupplier } from './suggestions';
import { gaugeSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options>(GaugePanel)
.useFieldConfig({
@@ -88,5 +88,5 @@ export const plugin = new PanelPlugin<Options>(GaugePanel)
commonOptionsBuilder.addTextSizeOptions(builder, { withTitle: true, withValue: true });
})
.setPanelChangeHandler(gaugePanelChangedHandler)
.setSuggestionsSupplier(new GaugeSuggestionsSupplier())
.setSuggestionsSupplier(gaugeSuggestionsSupplier)
.setMigrationHandler(gaugePanelMigrationHandler);
public/app/plugins/panel/gauge/suggestions.ts
+55 -81
View File
@@ -1,89 +1,63 @@
import { ThresholdsMode, VisualizationSuggestionsBuilder } from '@grafana/data';
import { GraphFieldConfig } from '@grafana/ui';
import { SuggestionName } from 'app/types/suggestions';
import { defaultsDeep } from 'lodash';
import { ThresholdsMode, FieldType, VisualizationSuggestion, VisualizationSuggestionsSupplierFn } from '@grafana/data';
import { t } from '@grafana/i18n';
import { defaultNumericVizOptions } from 'app/features/panel/suggestions/utils';
import { Options } from './panelcfg.gen';
export class GaugeSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
if (!dataSummary.hasData || !dataSummary.hasNumberField) {
return;
}
// for many fields / series this is probably not a good fit
if (dataSummary.numberFieldCount >= 50) {
return;
}
const list = builder.getListAppender<Options, GraphFieldConfig>({
name: SuggestionName.Gauge,
pluginId: 'gauge',
options: {},
fieldConfig: {
defaults: {
thresholds: {
steps: [
{ value: -Infinity, color: 'green' },
{ value: 70, color: 'orange' },
{ value: 85, color: 'red' },
],
mode: ThresholdsMode.Percentage,
},
custom: {},
const withDefaults = (suggestion: VisualizationSuggestion<Options>): VisualizationSuggestion<Options> =>
defaultsDeep(suggestion, {
fieldConfig: {
defaults: {
thresholds: {
steps: [
{ value: -Infinity, color: 'green' },
{ value: 70, color: 'orange' },
{ value: 85, color: 'red' },
],
mode: ThresholdsMode.Percentage,
},
overrides: [],
custom: {},
},
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions?.values) {
s.options.reduceOptions.limit = 2;
}
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions?.values) {
s.options.reduceOptions.limit = 2;
}
},
});
},
} satisfies VisualizationSuggestion<Options>);
if (dataSummary.hasStringField && dataSummary.frameCount === 1 && dataSummary.rowCountTotal < 10) {
list.append({
name: SuggestionName.Gauge,
options: {
reduceOptions: {
values: true,
calcs: [],
},
},
});
list.append({
name: SuggestionName.GaugeNoThresholds,
options: {
reduceOptions: {
values: true,
calcs: [],
},
showThresholdMarkers: false,
},
});
} else {
list.append({
name: SuggestionName.Gauge,
options: {
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
},
});
list.append({
name: SuggestionName.GaugeNoThresholds,
options: {
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
showThresholdMarkers: false,
},
});
}
const GAUGE_LIMIT = 10;
export const gaugeSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options> = (dataSummary) => {
if (!dataSummary.hasData || !dataSummary.hasFieldType(FieldType.number)) {
return;
}
}
// for many fields / series this is probably not a good fit
if (dataSummary.fieldCountByType(FieldType.number) > GAUGE_LIMIT) {
return;
}
const suggestions: Array<VisualizationSuggestion<Options>> = [
{ name: t('gauge.suggestions.arc', 'Gauge') },
{
name: t('gauge.suggestions.no-thresholds', 'Gauge - no thresholds'),
options: {
showThresholdMarkers: false,
},
},
];
// sometimes, we want to de-aggregate the data for the gauge suggestion
const shouldUseRawValues =
dataSummary.hasFieldType(FieldType.string) &&
dataSummary.frameCount === 1 &&
dataSummary.rowCountTotal <= GAUGE_LIMIT;
return suggestions.map((s) => defaultNumericVizOptions(withDefaults(s), dataSummary, shouldUseRawValues));
};
public/app/plugins/panel/geomap/module.tsx
+3 -1
View File
@@ -8,6 +8,7 @@ import { LayersEditor } from './editor/LayersEditor';
import { MapViewEditor } from './editor/MapViewEditor';
import { getLayerEditor } from './editor/layerEditor';
import { mapPanelChangedHandler, mapMigrationHandler } from './migrations';
import { geomapSuggestionsSupplier } from './suggestions';
import { defaultMapViewConfig, Options, TooltipMode, GeomapInstanceState } from './types';
export const plugin = new PanelPlugin<Options>(GeomapPanel)
@@ -171,4 +172,5 @@ export const plugin = new PanelPlugin<Options>(GeomapPanel)
],
},
});
});
})
.setSuggestionsSupplier(geomapSuggestionsSupplier);
public/app/plugins/panel/geomap/suggestions.ts
+46
View File
@@ -0,0 +1,46 @@
import { VisualizationSuggestionScore, VisualizationSuggestionsSupplierFn } from '@grafana/data';
import { GraphFieldConfig } from '@grafana/ui';
import { getGeometryField, getDefaultLocationMatchers } from 'app/features/geo/utils/location';
import { Options } from './panelcfg.gen';
export const geomapSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, GraphFieldConfig> = (
dataSummary
) => {
if (!dataSummary.hasData || !dataSummary.rawFrames) {
return;
}
// use getGeometryField to see if any frames have geolocation info
const location = getDefaultLocationMatchers();
if (!dataSummary.rawFrames.some((frame) => !getGeometryField(frame, location).warning)) {
return;
}
return [
{
score: VisualizationSuggestionScore.Best,
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
s.options!.controls = {
showZoom: false,
showScale: false,
showAttribution: false,
showMeasure: false,
};
// FIXME: this doesn't work. I want to disable legends in the preview.
s.options?.layers?.forEach((layer) => {
layer.config = layer.config || {};
layer.config.showLegend = false;
});
},
},
},
];
};
public/app/plugins/panel/heatmap/module.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ import { HeatmapPanel } from './HeatmapPanel';
import { prepareHeatmapData } from './fields';
import { heatmapChangedHandler, heatmapMigrationHandler } from './migrations';
import { colorSchemes, quantizeScheme } from './palettes';
import { HeatmapSuggestionsSupplier } from './suggestions';
import { heatmapSuggestionsSupplier } from './suggestions';
import { Options, defaultOptions, HeatmapColorMode, HeatmapColorScale } from './types';
export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
@@ -472,5 +472,5 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
annotations?.some((df) => df.meta?.custom?.resultType === 'exemplar'),
});
})
.setSuggestionsSupplier(new HeatmapSuggestionsSupplier())
.setSuggestionsSupplier(heatmapSuggestionsSupplier)
.setDataSupport({ annotations: true });
public/app/plugins/panel/heatmap/suggestions.test.ts
+226
View File
@@ -0,0 +1,226 @@
import {
createDataFrame,
DataFrameType,
FieldType,
getPanelDataSummary,
VisualizationSuggestionScore,
} from '@grafana/data';
import { heatmapSuggestionsSupplier } from './suggestions';
describe('heatmap suggestions', () => {
describe('applicability', () => {
it('should not suggest for data without time field', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{ name: 'value1', type: FieldType.number, values: [1, 2, 3] },
{ name: 'value2', type: FieldType.number, values: [4, 5, 6] },
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toBeUndefined();
});
it('should suggest for data with time and number fields', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{ name: 'time', type: FieldType.time, values: [1609459200000, 1609462800000, 1609466400000] },
{ name: 'value1', type: FieldType.number, values: [1, 2, 3] },
{ name: 'value2', type: FieldType.number, values: [4, 5, 6] },
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toHaveLength(1);
});
});
describe('scoring', () => {
it('should score this as "OK" if the data is not particularly heatmap-y', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{ name: 'time', type: FieldType.time, values: [1609459200000, 1609462800000, 1609466400000] },
{ name: 'value1', type: FieldType.number, values: [1, 2, 3] },
{ name: 'value2', type: FieldType.number, values: [4, 5, 6] },
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toEqual([expect.objectContaining({ score: VisualizationSuggestionScore.OK })]);
});
it.each([DataFrameType.HeatmapRows, DataFrameType.HeatmapCells])(
'should score this as "Best" if the data explicitly has %s frame type',
(frameType: DataFrameType) => {
const dataSummary = getPanelDataSummary([
createDataFrame({
meta: { type: frameType },
fields: [
{
name: 'time',
type: FieldType.time,
values: [1609459200000, 1609462800000, 1609466400000],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value1',
type: FieldType.number,
values: [1, 2, 3],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value2',
type: FieldType.number,
values: [4, 5, 6],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value3',
type: FieldType.number,
values: [7, 8, 9],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toEqual([expect.objectContaining({ score: VisualizationSuggestionScore.Best })]);
}
);
it('should score this as "Best" if the data has "ge" labels', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{
name: 'time',
type: FieldType.time,
values: [1609459200000, 1609462800000, 1609466400000],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value1',
type: FieldType.number,
values: [1, 2, 3],
labels: { ge: '-Inf' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value2',
type: FieldType.number,
values: [4, 5, 6],
labels: { ge: '0' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value3',
type: FieldType.number,
values: [7, 8, 9],
labels: { ge: '10' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toEqual([expect.objectContaining({ score: VisualizationSuggestionScore.Best })]);
});
it('should score this as "Best" if the data has "le" labels', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{
name: 'time',
type: FieldType.time,
values: [1609459200000, 1609462800000, 1609466400000],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value1',
type: FieldType.number,
values: [1, 2, 3],
labels: { le: '1' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value2',
type: FieldType.number,
values: [4, 5, 6],
labels: { le: '2' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value2',
type: FieldType.number,
values: [6, 2, 6],
labels: { le: '4' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'value3',
type: FieldType.number,
values: [7, 8, 9],
labels: { le: 'Inf' },
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toEqual([expect.objectContaining({ score: VisualizationSuggestionScore.Best })]);
});
it('should score this as "Best" if the field names are numeric in a way that makes sense', () => {
const dataSummary = getPanelDataSummary([
createDataFrame({
fields: [
{
name: 'time',
type: FieldType.time,
values: [1609459200000, 1609462800000, 1609466400000],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: '0',
type: FieldType.number,
values: [1, 2, 3],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: '10',
type: FieldType.number,
values: [4, 5, 6],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: '20',
type: FieldType.number,
values: [7, 8, 9],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
{
name: 'Inf',
type: FieldType.number,
values: [10, 9, 8],
display: jest.fn((v) => ({ text: '' + v, numeric: Number(v) })),
},
],
}),
]);
const suggestions = heatmapSuggestionsSupplier(dataSummary);
expect(suggestions).toEqual([expect.objectContaining({ score: VisualizationSuggestionScore.Best })]);
});
});
});
public/app/plugins/panel/heatmap/suggestions.ts
+65 -37
View File
@@ -1,45 +1,73 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import {
DataFrameType,
FieldType,
PanelDataSummary,
VisualizationSuggestionScore,
VisualizationSuggestionsSupplierFn,
} from '@grafana/data';
import { config } from '@grafana/runtime';
import { GraphFieldConfig } from '@grafana/schema';
import { prepareHeatmapData } from './fields';
import { quantizeScheme } from './palettes';
import { Options, defaultOptions } from './types';
export class HeatmapSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
if (
!builder.data?.series ||
!dataSummary.hasData ||
dataSummary.timeFieldCount < 1 ||
dataSummary.numberFieldCount < 2 ||
dataSummary.numberFieldCount > 10
) {
return;
}
const palette = quantizeScheme(defaultOptions.color, config.theme2);
const info = prepareHeatmapData({
frames: builder.data.series,
options: defaultOptions,
palette,
theme: config.theme2,
});
if (!info || info.warning) {
return;
}
builder.getListAppender<Options, {}>({
name: '',
pluginId: 'heatmap',
options: {},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
});
function determineScore(dataSummary: PanelDataSummary): VisualizationSuggestionScore {
// look to see if the data has an explicity marker for heatmap data on it.
if ([DataFrameType.HeatmapRows, DataFrameType.HeatmapCells].some((t) => dataSummary.hasDataFrameType(t))) {
return VisualizationSuggestionScore.Best;
}
// we'll also look more closely at frames which return between 3 and 10 numeric fields.
if (dataSummary.fieldCountByType(FieldType.number) > 2 || dataSummary.fieldCountByType(FieldType.number) <= 10) {
// look through the names of the panels
const hasPotentialHeatmapSeries = dataSummary.rawFrames!.some((frame) => {
for (const field of frame.fields) {
if (field.type === FieldType.number) {
// if the field name, or "ge" or "le" label on the field, are numeric, then it's very possibly part of a heatmap.
if ([field.name, field.labels?.ge, field.labels?.le].some((v) => !isNaN(Number(v)))) {
return true;
}
}
}
return false;
});
// if at least all but 1 of the numeric fields in the frame have numeric names, then this is probably a heatmap.
// (the out-of-place one would be "Inf" or "-Inf")
if (hasPotentialHeatmapSeries) {
return VisualizationSuggestionScore.Best;
}
}
return VisualizationSuggestionScore.OK;
}
export const heatmapSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, GraphFieldConfig> = (
dataSummary: PanelDataSummary
) => {
if (
!dataSummary.rawFrames ||
!dataSummary.hasData ||
!dataSummary.hasFieldType(FieldType.time) ||
!dataSummary.hasFieldType(FieldType.number)
) {
return;
}
// parse the frame into a heatmap structure to see if it's possible.
const palette = quantizeScheme(defaultOptions.color, config.theme2);
const info = prepareHeatmapData({
frames: dataSummary.rawFrames,
options: defaultOptions,
palette,
theme: config.theme2,
});
// if we can't parse the data into a heatmap, then bail out and prevent showing suggestions.
if (!info || info.warning) {
return;
}
return [{ score: determineScore(dataSummary) }];
};
public/app/plugins/panel/histogram/module.tsx
+15
View File
@@ -5,6 +5,9 @@ import {
identityOverrideProcessor,
PanelPlugin,
histogramFieldInfo,
buildHistogram,
VisualizationSuggestionScore,
DataFrameType,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { commonOptionsBuilder, getGraphFieldOptions } from '@grafana/ui';
@@ -149,4 +152,16 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(HistogramPanel)
commonOptionsBuilder.addHideFrom(builder);
},
})
.setSuggestionsSupplier((ds) => {
if (ds.rawFrames && ds.hasData && buildHistogram(ds.rawFrames)) {
return [
{
score: ds.hasDataFrameType(DataFrameType.Histogram)
? VisualizationSuggestionScore.Best
: VisualizationSuggestionScore.OK,
},
];
}
return;
});
public/app/plugins/panel/logs/module.tsx
+5 -3
View File
@@ -1,10 +1,10 @@
import { PanelPlugin, LogsSortOrder, LogsDedupStrategy, LogsDedupDescription } from '@grafana/data';
import { PanelPlugin, LogsSortOrder, LogsDedupStrategy, LogsDedupDescription, FieldType } from '@grafana/data';
import { t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
import { showDefaultSuggestion } from 'app/features/panel/suggestions/utils';
import { LogsPanel } from './LogsPanel';
import { Options } from './panelcfg.gen';
import { LogsPanelSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options>(LogsPanel)
.setPanelOptions((builder, context) => {
@@ -207,4 +207,6 @@ export const plugin = new PanelPlugin<Options>(LogsPanel)
defaultValue: LogsSortOrder.Descending,
});
})
.setSuggestionsSupplier(new LogsPanelSuggestionsSupplier());
.setSuggestionsSupplier(
showDefaultSuggestion((ds) => ds.hasData && ds.hasFieldType(FieldType.time) && ds.hasFieldType(FieldType.string))
);
public/app/plugins/panel/logs/suggestions.ts
-33
View File
@@ -1,33 +0,0 @@
import { VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
import { SuggestionName } from 'app/types/suggestions';
import { Options } from './panelcfg.gen';
export class LogsPanelSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const list = builder.getListAppender<Options, {}>({
name: '',
pluginId: 'logs',
options: {},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
});
const { dataSummary: ds } = builder;
// Require a string & time field
if (!ds.hasData || !ds.hasTimeField || !ds.hasStringField) {
return;
}
if (ds.preferredVisualisationType === 'logs') {
list.append({ name: SuggestionName.Logs, score: VisualizationSuggestionScore.Best });
} else {
list.append({ name: SuggestionName.Logs });
}
}
}
public/app/plugins/panel/nodeGraph/module.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { t } from '@grafana/i18n';
import { NodeGraphPanel } from './NodeGraphPanel';
import { ArcOptionsEditor } from './editor/ArcOptionsEditor';
import { LayoutAlgorithm, Options as NodeGraphOptions } from './panelcfg.gen';
import { NodeGraphSuggestionsSupplier } from './suggestions';
import { nodeGraphSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<NodeGraphOptions>(NodeGraphPanel)
.useFieldConfig({
@@ -92,4 +92,4 @@ export const plugin = new PanelPlugin<NodeGraphOptions>(NodeGraphPanel)
},
});
})
.setSuggestionsSupplier(new NodeGraphSuggestionsSupplier());
.setSuggestionsSupplier(nodeGraphSuggestionsSupplier);
public/app/plugins/panel/nodeGraph/suggestions.ts
+54 -65
View File
@@ -1,71 +1,60 @@
import { DataFrame, FieldType, VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
import { SuggestionName } from 'app/types/suggestions';
import { DataFrame, FieldType, VisualizationSuggestionScore, VisualizationSuggestionsSupplierFn } from '@grafana/data';
export class NodeGraphSuggestionsSupplier {
getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
return builder.getListAppender<{}, {}>({
name: SuggestionName.NodeGraph,
pluginId: 'nodeGraph',
});
}
import { Options } from './panelcfg.gen';
hasCorrectFields(frames: DataFrame[]): boolean {
let hasNodesFrame = false;
let hasEdgesFrame = false;
function checkFields(fields: Array<[string, FieldType]>, frame: DataFrame): boolean {
let hasCorrectFields = true;
const nodeFields: Array<[string, FieldType]> = [
['id', FieldType.string],
['title', FieldType.string],
['mainstat', FieldType.number],
];
const edgeFields: Array<[string, FieldType]> = [
['id', FieldType.string],
['source', FieldType.string],
['target', FieldType.string],
];
for (const frame of frames) {
if (this.checkFields(nodeFields, frame)) {
hasNodesFrame = true;
}
if (this.checkFields(edgeFields, frame)) {
hasEdgesFrame = true;
}
}
return hasNodesFrame && hasEdgesFrame;
}
checkFields(fields: Array<[string, FieldType]>, frame: DataFrame): boolean {
let hasCorrectFields = true;
for (const field of fields) {
const [name, type] = field;
const frameField = frame.fields.find((f) => f.name === name);
if (!frameField || type !== frameField.type) {
hasCorrectFields = false;
break;
}
}
return hasCorrectFields;
}
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
if (!builder.data) {
return;
}
const hasCorrectFields = this.hasCorrectFields(builder.data.series);
const nodeGraphFrames = builder.data.series.filter(
(df) => df.meta && df.meta.preferredVisualisationType === 'nodeGraph'
);
if (hasCorrectFields || nodeGraphFrames.length === 2) {
this.getListWithDefaults(builder).append({
name: SuggestionName.NodeGraph,
score: VisualizationSuggestionScore.Best,
});
for (const field of fields) {
const [name, type] = field;
const frameField = frame.fields.find((f) => f.name === name);
if (!frameField || type !== frameField.type) {
hasCorrectFields = false;
break;
}
}
return hasCorrectFields;
}
function frameHasCorrectFields(frames: DataFrame[]): boolean {
let hasNodesFrame = false;
let hasEdgesFrame = false;
const nodeFields: Array<[string, FieldType]> = [
['id', FieldType.string],
['title', FieldType.string],
['mainstat', FieldType.number],
];
const edgeFields: Array<[string, FieldType]> = [
['id', FieldType.string],
['source', FieldType.string],
['target', FieldType.string],
];
for (const frame of frames) {
if (checkFields(nodeFields, frame)) {
hasNodesFrame = true;
}
if (checkFields(edgeFields, frame)) {
hasEdgesFrame = true;
}
}
return hasNodesFrame && hasEdgesFrame;
}
export const nodeGraphSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options> = (dataSummary) => {
if (!dataSummary.rawFrames) {
return;
}
const hasCorrectFields = frameHasCorrectFields(dataSummary.rawFrames);
const nodeGraphFrames = dataSummary.hasPreferredVisualisationType('nodeGraph');
if (!hasCorrectFields && !nodeGraphFrames) {
return;
}
return [{ score: VisualizationSuggestionScore.Best }];
};
public/app/plugins/panel/piechart/module.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { addStandardDataReduceOptions } from '../stat/common';
import { PieChartPanel } from './PieChartPanel';
import { PieChartPanelChangedHandler } from './migrations';
import { Options, FieldConfig, PieChartType, PieChartLabels, PieChartLegendValues } from './panelcfg.gen';
import { PieChartSuggestionsSupplier } from './suggestions';
import { piechartSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options, FieldConfig>(PieChartPanel)
.setPanelChangeHandler(PieChartPanelChangedHandler)
@@ -92,4 +92,4 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(PieChartPanel)
showIf: (c) => c.legend.showLegend !== false,
});
})
.setSuggestionsSupplier(new PieChartSuggestionsSupplier());
.setSuggestionsSupplier(piechartSuggestionsSupplier);
public/app/plugins/panel/piechart/suggestions.ts
+66 -67
View File
@@ -1,79 +1,78 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { defaultsDeep } from 'lodash';
import {
FieldType,
VisualizationSuggestion,
VisualizationSuggestionScore,
VisualizationSuggestionsSupplierFn,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { LegendDisplayMode } from '@grafana/schema';
import { SuggestionName } from 'app/types/suggestions';
import { defaultNumericVizOptions } from 'app/features/panel/suggestions/utils';
import { PieChartLabels, Options, PieChartType } from './panelcfg.gen';
export class PieChartSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const list = builder.getListAppender<Options, {}>({
name: SuggestionName.PieChart,
pluginId: 'piechart',
options: {
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
displayLabels: [PieChartLabels.Percent],
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
values: [],
showLegend: false,
},
const withDefaults = (suggestion: VisualizationSuggestion<Options>): VisualizationSuggestion<Options> =>
defaultsDeep(suggestion, {
options: {
displayLabels: [PieChartLabels.Percent],
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
values: [],
showLegend: false,
},
});
},
} satisfies VisualizationSuggestion<Options>);
const { dataSummary } = builder;
const SLICE_MAX = 30;
const SLICE_MIN = 2;
if (!dataSummary.hasNumberField) {
return;
}
export const piechartSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options> = (dataSummary) => {
if (!dataSummary.hasFieldType(FieldType.number)) {
return;
}
if (dataSummary.hasStringField && dataSummary.frameCount === 1) {
// if many values this or single value PieChart is not a good option
if (dataSummary.rowCountTotal > 30 || dataSummary.rowCountTotal < 2) {
return;
}
list.append({
name: SuggestionName.PieChart,
options: {
reduceOptions: {
values: true,
calcs: [],
},
},
});
list.append({
name: SuggestionName.PieChartDonut,
options: {
reduceOptions: {
values: true,
calcs: [],
},
pieType: PieChartType.Donut,
},
});
return;
}
if (dataSummary.numberFieldCount > 30 || dataSummary.numberFieldCount < 2) {
return;
}
list.append({
name: SuggestionName.PieChart,
});
list.append({
name: SuggestionName.PieChartDonut,
const suggestions: Array<VisualizationSuggestion<Options>> = [
{
name: t('piechart.suggestions.pie', 'Pie chart'),
},
{
name: t('piechart.suggestions.donut', 'Donut chart'),
options: {
pieType: PieChartType.Donut,
},
});
},
];
let shouldUseRawValues = false;
// we're filtering out data which has more than 30 slices or less than 2, and we're also
// determining whether the reduce options should be set based on the data summary.
if (dataSummary.hasFieldType(FieldType.string) && dataSummary.frameCount === 1) {
if (dataSummary.rowCountTotal > SLICE_MAX && dataSummary.rowCountTotal < SLICE_MIN) {
return;
}
shouldUseRawValues = true;
} else if (
dataSummary.fieldCountByType(FieldType.number) > SLICE_MAX ||
dataSummary.fieldCountByType(FieldType.number) < SLICE_MIN
) {
return;
}
}
return suggestions.map((s) => {
const result = defaultNumericVizOptions(withDefaults(s), dataSummary, shouldUseRawValues);
// bump the score up to best if we have exactly one numeric and one string field
if (
dataSummary.fieldCount === 2 &&
dataSummary.fieldCountByType(FieldType.string) === 1 &&
dataSummary.fieldCountByType(FieldType.number) === 1
) {
result.score = VisualizationSuggestionScore.Best;
}
return result;
});
};
public/app/plugins/panel/radialbar/module.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { EffectsEditor } from './EffectsEditor';
import { gaugePanelChangedHandler, gaugePanelMigrationHandler, shouldMigrateGauge } from './GaugeMigrations';
import { RadialBarPanel } from './RadialBarPanel';
import { defaultGaugePanelEffects, defaultOptions, Options } from './panelcfg.gen';
import { radialBarSuggestionsHandler } from './suggestions';
import { radialBarSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options>(RadialBarPanel)
.useFieldConfig({})
@@ -112,6 +112,6 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
defaultValue: defaultGaugePanelEffects,
});
})
.setSuggestionsSupplier(radialBarSuggestionsHandler)
.setSuggestionsSupplier(radialBarSuggestionsSupplier)
.setMigrationHandler(gaugePanelMigrationHandler, shouldMigrateGauge)
.setPanelChangeHandler(gaugePanelChangedHandler);
public/app/plugins/panel/radialbar/suggestions.test.ts
+9 -9
View File
@@ -1,13 +1,13 @@
import { createDataFrame, Field, FieldType, getPanelDataSummary } from '@grafana/data';
import { radialBarSuggestionsHandler } from './suggestions';
import { radialBarSuggestionsSupplier } from './suggestions';
describe('RadialBarPanel Suggestions', () => {
it('does not suggest gauge if no data is present', () => {
expect(radialBarSuggestionsHandler(getPanelDataSummary([]))).toBeFalsy();
expect(radialBarSuggestionsHandler(getPanelDataSummary(undefined))).toBeFalsy();
expect(radialBarSuggestionsSupplier(getPanelDataSummary([]))).toBeFalsy();
expect(radialBarSuggestionsSupplier(getPanelDataSummary(undefined))).toBeFalsy();
expect(
radialBarSuggestionsHandler(
radialBarSuggestionsSupplier(
getPanelDataSummary([
createDataFrame({
fields: [
@@ -27,7 +27,7 @@ describe('RadialBarPanel Suggestions', () => {
{ name: 'status', type: FieldType.string },
],
});
expect(radialBarSuggestionsHandler(getPanelDataSummary([df]))).toBeFalsy();
expect(radialBarSuggestionsSupplier(getPanelDataSummary([df]))).toBeFalsy();
});
it('does not suggest gauge if there are too many numeric fields', () => {
@@ -35,12 +35,12 @@ describe('RadialBarPanel Suggestions', () => {
for (let i = 0; i < 20; i++) {
fields.push({ name: `numeric-${i}`, type: FieldType.number, values: [0, 100, 200, 300, 400, 500], config: {} });
}
expect(radialBarSuggestionsHandler(getPanelDataSummary([createDataFrame({ fields })]))).toBeFalsy();
expect(radialBarSuggestionsSupplier(getPanelDataSummary([createDataFrame({ fields })]))).toBeFalsy();
});
it('suggests gauge for a single numeric field', () => {
expect(
radialBarSuggestionsHandler(
radialBarSuggestionsSupplier(
getPanelDataSummary([
createDataFrame({
fields: [
@@ -58,7 +58,7 @@ describe('RadialBarPanel Suggestions', () => {
it('suggests gauge for a few numeric fields, with other fields mixed in', () => {
expect(
radialBarSuggestionsHandler(
radialBarSuggestionsSupplier(
getPanelDataSummary([
createDataFrame({
fields: [
@@ -136,7 +136,7 @@ describe('RadialBarPanel Suggestions', () => {
],
},
])('$description suggests aggregated=$aggregated', ({ dataframes, aggregated }) => {
const suggestions = radialBarSuggestionsHandler(getPanelDataSummary(dataframes));
const suggestions = radialBarSuggestionsSupplier(getPanelDataSummary(dataframes));
const expected = aggregated ? { values: false, calcs: ['lastNotNull'] } : { values: true, calcs: [] };
if (Array.isArray(suggestions)) {
for (const suggestion of suggestions) {
public/app/plugins/panel/radialbar/suggestions.ts
+56 -56
View File
@@ -8,10 +8,39 @@ import {
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { GraphFieldConfig } from '@grafana/ui';
import { defaultNumericVizOptions } from 'app/features/panel/suggestions/utils';
import { Options } from './panelcfg.gen';
export const radialBarSuggestionsHandler: VisualizationSuggestionsSupplierFn<Options, GraphFieldConfig> = (
const withDefaults = (
suggestion: VisualizationSuggestion<Options, GraphFieldConfig>
): VisualizationSuggestion<Options, GraphFieldConfig> =>
defaultsDeep(suggestion, {
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions) {
s.options.reduceOptions.limit = 4;
}
},
},
// styles: [{
// name: t('gauge.suggestions.style.circular', 'Glowing'),
// options: {
// effects: {
// rounded: true,
// barGlow: true,
// centerGlow: true,
// spotlight: true,
// },
// },
// }, {
// name: t('gauge.suggestions.style.simple', 'Simple'),
// }]
} satisfies VisualizationSuggestion<Options, GraphFieldConfig>);
const MAX_GAUGES = 10;
export const radialBarSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, GraphFieldConfig> = (
dataSummary
) => {
if (!dataSummary.hasData || !dataSummary.hasFieldType(FieldType.number)) {
@@ -19,69 +48,40 @@ export const radialBarSuggestionsHandler: VisualizationSuggestionsSupplierFn<Opt
}
// for many fields / series this is probably not a good fit
if (dataSummary.fieldCountByType(FieldType.number) >= 10) {
if (dataSummary.fieldCountByType(FieldType.number) > MAX_GAUGES) {
return;
}
const withDefaults = (
suggestion: VisualizationSuggestion<Options, GraphFieldConfig>
): VisualizationSuggestion<Options, GraphFieldConfig> => {
// if there is a string field and there are few enough rows, we assume it's tabular data and not numeric series data,
// and the de-aggregated version of the viz probably makes more sense
const isTabularData =
dataSummary.hasFieldType(FieldType.string) && dataSummary.frameCount === 1 && dataSummary.rowCountTotal < 10;
return defaultsDeep(suggestion, {
options: {
reduceOptions: isTabularData
? {
values: true,
calcs: [],
}
: {
values: false,
calcs: ['lastNotNull'],
},
},
fieldConfig: {
defaults: isTabularData
? {
color: { mode: FieldColorModeId.PaletteClassic },
}
: {},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions) {
s.options.reduceOptions.limit = 4;
}
},
},
// styles: [{
// name: t('gauge.suggestions.style.circular', 'Glowing'),
// options: {
// effects: {
// rounded: true,
// barGlow: true,
// centerGlow: true,
// spotlight: true,
// },
// },
// }, {
// name: t('gauge.suggestions.style.simple', 'Simple'),
// }]
} satisfies VisualizationSuggestion<Options, GraphFieldConfig>);
};
return [
withDefaults({ name: t('gauge.suggestions.arc', 'Gauge') }),
withDefaults({
const suggestions: Array<VisualizationSuggestion<Options, GraphFieldConfig>> = [
{ name: t('gauge.suggestions.arc', 'Gauge') },
{
name: t('gauge.suggestions.circular', 'Circular gauge'),
options: {
shape: 'circle',
showThresholdMarkers: false,
barWidthFactor: 0.3,
},
}),
},
];
const shouldUseRawValues =
dataSummary.hasFieldType(FieldType.string) &&
dataSummary.frameCount === 1 &&
dataSummary.rowCountTotal <= MAX_GAUGES;
return suggestions.map((s) => {
const suggestion = defaultNumericVizOptions(withDefaults(s), dataSummary, shouldUseRawValues);
if (shouldUseRawValues) {
suggestion.fieldConfig = suggestion.fieldConfig ?? {
defaults: {},
overrides: [],
};
suggestion.fieldConfig.defaults.color = suggestion.fieldConfig.defaults.color ?? {
mode: FieldColorModeId.PaletteClassic,
};
}
return suggestion;
});
};
public/app/plugins/panel/stat/module.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import { statPanelChangedHandler } from './StatMigrations';
import { StatPanel } from './StatPanel';
import { addStandardDataReduceOptions, addOrientationOption } from './common';
import { defaultOptions, Options } from './panelcfg.gen';
import { StatSuggestionsSupplier } from './suggestions';
import { statSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options>(StatPanel)
.useFieldConfig()
@@ -137,5 +137,5 @@ export const plugin = new PanelPlugin<Options>(StatPanel)
})
.setNoPadding()
.setPanelChangeHandler(statPanelChangedHandler)
.setSuggestionsSupplier(new StatSuggestionsSupplier())
.setSuggestionsSupplier(statSuggestionsSupplier)
.setMigrationHandler(sharedSingleStatMigrationHandler);
public/app/plugins/panel/stat/suggestions.ts
+68 -59
View File
@@ -1,41 +1,46 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { BigValueColorMode, BigValueGraphMode, GraphFieldConfig } from '@grafana/schema';
import { SuggestionName } from 'app/types/suggestions';
import { defaultsDeep } from 'lodash';
import { FieldType, VisualizationSuggestion, VisualizationSuggestionsSupplierFn } from '@grafana/data';
import { t } from '@grafana/i18n';
import { BigValueColorMode, BigValueGraphMode } from '@grafana/schema';
import { Options } from './panelcfg.gen';
export class StatSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary: ds } = builder;
if (!ds.hasData) {
return;
}
const list = builder.getListAppender<Options, GraphFieldConfig>({
name: SuggestionName.Stat,
pluginId: 'stat',
options: {},
fieldConfig: {
defaults: {
unit: 'short',
custom: {},
},
overrides: [],
const withDefaults = (s: VisualizationSuggestion<Options>): VisualizationSuggestion<Options> =>
defaultsDeep(s, {
fieldConfig: {
defaults: {
unit: 'short',
custom: {},
},
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions?.values) {
s.options.reduceOptions.limit = 1;
}
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.options?.reduceOptions?.values) {
s.options.reduceOptions.limit = 1;
}
},
});
},
} satisfies VisualizationSuggestion<Options>);
// String and number field with low row count show individual rows
if (ds.hasStringField && ds.hasNumberField && ds.frameCount === 1 && ds.rowCountTotal < 10) {
list.append({
name: SuggestionName.Stat,
export const statSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options> = (ds) => {
if (!ds.hasData) {
return;
}
const suggestions: Array<VisualizationSuggestion<Options>> = [];
// String and number field with low row count show individual rows
if (
ds.hasFieldType(FieldType.string) &&
ds.hasFieldType(FieldType.number) &&
ds.frameCount === 1 &&
ds.rowCountTotal < 10
) {
suggestions.push(
{
name: t('stat.suggestions.stat-discrete-values', 'Stat - discrete values'),
options: {
reduceOptions: {
values: true,
@@ -43,9 +48,9 @@ export class StatSuggestionsSupplier {
fields: '/.*/',
},
},
});
list.append({
name: SuggestionName.StatColoredBackground,
},
{
name: t('stat.suggestions.stat-discrete-values-color-background', 'Stat - discrete values - color background'),
options: {
reduceOptions: {
values: true,
@@ -54,36 +59,38 @@ export class StatSuggestionsSupplier {
},
colorMode: BigValueColorMode.Background,
},
});
}
}
);
}
// Just a single string field
if (ds.stringFieldCount === 1 && ds.frameCount === 1 && ds.rowCountTotal < 10 && ds.fieldCount === 1) {
list.append({
name: SuggestionName.Stat,
options: {
reduceOptions: {
values: true,
calcs: [],
fields: '/.*/',
},
colorMode: BigValueColorMode.None,
// just a single string field
if (ds.fieldCount === 1 && ds.hasFieldType(FieldType.string)) {
suggestions.push({
name: t('stat.suggestions.stat-single-string', 'Stat - single string'),
options: {
reduceOptions: {
values: true,
calcs: [],
fields: '/.*/',
},
});
}
colorMode: BigValueColorMode.None,
},
});
}
if (ds.hasNumberField && ds.hasTimeField) {
list.append({
// aggregated suggestions for number fields
if (ds.hasFieldType(FieldType.number) && ds.hasFieldType(FieldType.time)) {
suggestions.push(
{
options: {
reduceOptions: {
values: false,
calcs: ['lastNotNull'],
},
},
});
list.append({
name: SuggestionName.StatColoredBackground,
},
{
name: t('stat.suggestions.stat-color-background', 'Stat - color background'),
options: {
reduceOptions: {
values: false,
@@ -92,7 +99,9 @@ export class StatSuggestionsSupplier {
graphMode: BigValueGraphMode.None,
colorMode: BigValueColorMode.Background,
},
});
}
}
);
}
}
return suggestions.map(withDefaults);
};
public/app/plugins/panel/state-timeline/module.tsx
+1 -1
View File
@@ -177,7 +177,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StateTimelinePanel)
}
// Probably better ways to filter out this by inspecting the types of string values so view this as temporary
if (ds.preferredVisualisationType === 'logs') {
if (ds.hasPreferredVisualisationType('logs')) {
return;
}
public/app/plugins/panel/status-history/module.tsx
+39 -3
View File
@@ -1,11 +1,10 @@
import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
import { FieldColorModeId, FieldConfigProperty, FieldType, PanelPlugin } from '@grafana/data';
import { t } from '@grafana/i18n';
import { AxisPlacement, VisibilityMode } from '@grafana/schema';
import { commonOptionsBuilder } from '@grafana/ui';
import { StatusHistoryPanel } from './StatusHistoryPanel';
import { Options, FieldConfig, defaultFieldConfig } from './panelcfg.gen';
import { StatusHistorySuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options, FieldConfig>(StatusHistoryPanel)
.useFieldConfig({
@@ -113,5 +112,42 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StatusHistoryPanel)
commonOptionsBuilder.addLegendOptions(builder, false);
commonOptionsBuilder.addTooltipOptions(builder);
})
.setSuggestionsSupplier(new StatusHistorySuggestionsSupplier())
.setSuggestionsSupplier((ds) => {
if (!ds.hasData) {
return;
}
// This panel needs a time field and a string or number field
if (
!ds.hasFieldType(FieldType.time) ||
(!ds.hasFieldType(FieldType.string) && !ds.hasFieldType(FieldType.number))
) {
return;
}
// If there are many series then they won't fit on y-axis so this panel is not good fit
if (ds.fieldCountByType(FieldType.number) >= 30) {
return;
}
// if there a lot of data points for each series then this is not a good match
if (ds.rowCountMax > 100) {
return;
}
// Probably better ways to filter out this by inspecting the types of string values so view this as temporary
if (ds.hasPreferredVisualisationType('logs')) {
return;
}
return [
{
cardOptions: {
previewModifier: (s) => {
s.options!.colWidth = 0.7;
},
},
},
];
})
.setDataSupport({ annotations: true });
public/app/plugins/panel/status-history/suggestions.ts
-56
View File
@@ -1,56 +0,0 @@
import { FieldColorModeId, VisualizationSuggestionsBuilder } from '@grafana/data';
import { SuggestionName } from 'app/types/suggestions';
import { Options, FieldConfig } from './panelcfg.gen';
export class StatusHistorySuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary: ds } = builder;
if (!ds.hasData) {
return;
}
// This panel needs a time field and a string or number field
if (!ds.hasTimeField || (!ds.hasStringField && !ds.hasNumberField)) {
return;
}
// If there are many series then they won't fit on y-axis so this panel is not good fit
if (ds.numberFieldCount >= 30) {
return;
}
// if there a lot of data points for each series then this is not a good match
if (ds.rowCountMax > 100) {
return;
}
// Probably better ways to filter out this by inspecting the types of string values so view this as temporary
if (ds.preferredVisualisationType === 'logs') {
return;
}
const list = builder.getListAppender<Options, FieldConfig>({
name: '',
pluginId: 'status-history',
options: {},
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
custom: {},
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
s.options!.colWidth = 0.7;
},
},
});
list.append({ name: SuggestionName.StatusHistory });
}
}
public/app/plugins/panel/table/module.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import { TableCellOptionEditor } from './TableCellOptionEditor';
import { TablePanel } from './TablePanel';
import { tableMigrationHandler, tablePanelChangedHandler } from './migrations';
import { Options, defaultOptions, FieldConfig } from './panelcfg.gen';
import { TableSuggestionsSupplier } from './suggestions';
import { tableSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options, FieldConfig>(TablePanel)
.setPanelChangeHandler(tablePanelChangedHandler)
@@ -227,4 +227,4 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TablePanel)
defaultValue: defaultOptions?.enablePagination,
});
})
.setSuggestionsSupplier(new TableSuggestionsSupplier());
.setSuggestionsSupplier(tableSuggestionsSupplier);
public/app/plugins/panel/table/suggestions.ts
+28 -33
View File
@@ -1,38 +1,33 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { TableFieldOptions } from '@grafana/schema';
import { PanelDataSummary, VisualizationSuggestionScore, VisualizationSuggestionsSupplierFn } from '@grafana/data';
import icnTablePanelSvg from 'app/plugins/panel/table/img/icn-table-panel.svg';
import { SuggestionName } from 'app/types/suggestions';
import { Options } from './panelcfg.gen';
import { Options, FieldConfig } from './panelcfg.gen';
export class TableSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const list = builder.getListAppender<Options, TableFieldOptions>({
name: SuggestionName.Table,
pluginId: 'table',
options: {},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
s.fieldConfig!.defaults.custom!.minWidth = 50;
},
},
});
// If there are not data suggest table anyway but use icon instead of real preview
if (builder.dataSummary.fieldCount === 0) {
list.append({
cardOptions: {
imgSrc: icnTablePanelSvg,
},
});
} else {
list.append({});
}
function getTableSuggestionScore(dataSummary: PanelDataSummary): VisualizationSuggestionScore {
if (dataSummary.hasPreferredVisualisationType('table')) {
return VisualizationSuggestionScore.Best;
}
// table is best suited to showing many fields with many rows.
if (dataSummary.fieldCountMax > 5 && dataSummary.rowCountMax > 50) {
return VisualizationSuggestionScore.Good;
}
return VisualizationSuggestionScore.OK;
}
export const tableSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, FieldConfig> = (dataSummary) => [
{
score: getTableSuggestionScore(dataSummary),
cardOptions: {
previewModifier: (s) => {
if (s.fieldConfig && s.fieldConfig.defaults.custom) {
s.fieldConfig.defaults.custom.minWidth = 50;
}
},
// If there is no data, suggest table anyway, but use icon instead of real preview
// TODO: delete this in once "new" suggestions are fully rolled out
imgSrc: dataSummary.fieldCount === 0 ? icnTablePanelSvg : undefined,
},
},
];
public/app/plugins/panel/timeseries/module.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { TimezonesEditor } from './TimezonesEditor';
import { defaultGraphConfig, getGraphFieldConfig } from './config';
import { graphPanelChangedHandler } from './migrations';
import { FieldConfig, Options } from './panelcfg.gen';
import { TimeSeriesSuggestionsSupplier } from './suggestions';
import { timeseriesSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<Options, FieldConfig>(TimeSeriesPanel)
.setPanelChangeHandler(graphPanelChangedHandler)
@@ -26,5 +26,5 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TimeSeriesPanel)
defaultValue: undefined,
});
})
.setSuggestionsSupplier(new TimeSeriesSuggestionsSupplier())
.setSuggestionsSupplier(timeseriesSuggestionsSupplier)
.setDataSupport({ annotations: true, alertStates: true });
public/app/plugins/panel/timeseries/suggestions.ts
+118 -179
View File
@@ -1,9 +1,15 @@
import { defaultsDeep } from 'lodash';
import {
FieldColorModeId,
VisualizationSuggestionsBuilder,
DataFrameType,
DataTransformerID,
FieldType,
PanelPluginVisualizationSuggestion,
VisualizationSuggestion,
VisualizationSuggestionScore,
VisualizationSuggestionsSupplierFn,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import {
GraphDrawStyle,
GraphFieldConfig,
@@ -13,209 +19,142 @@ import {
StackingMode,
} from '@grafana/schema';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { SuggestionName } from 'app/types/suggestions';
import { Options } from './panelcfg.gen';
export class TimeSeriesSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
const MAX_BARS = 100;
const MAX_ROWS_SMOOTH_CHART = 200;
if (!dataSummary.hasTimeField || !dataSummary.hasNumberField || dataSummary.rowCountTotal < 2) {
return;
}
const list = builder.getListAppender<Options, GraphFieldConfig>({
name: SuggestionName.LineChart,
pluginId: 'timeseries',
options: {
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
showLegend: false,
},
const withDefaults = (
suggestion: VisualizationSuggestion<Options, GraphFieldConfig>
): VisualizationSuggestion<Options, GraphFieldConfig> =>
defaultsDeep(suggestion, {
options: {
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
showLegend: false,
},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
fieldConfig: {
defaults: {
custom: {},
},
cardOptions: {
previewModifier: (s) => {
if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
}
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
}
},
});
},
} satisfies VisualizationSuggestion<Options, GraphFieldConfig>);
const maxBarsCount = 100;
const areaChart = (name: string, stacking?: StackingMode) => ({
name,
fieldConfig: {
defaults: {
custom: {
fillOpacity: 25,
...(stacking ? { stacking: { mode: stacking, group: 'A' } } : {}),
},
},
overrides: [],
},
});
list.append({
name: SuggestionName.LineChart,
});
const barChart = (name: string, stacking?: StackingMode) => ({
name,
fieldConfig: {
defaults: {
custom: {
drawStyle: GraphDrawStyle.Bars,
fillOpacity: 100,
lineWidth: 1,
gradientMode: GraphGradientMode.Hue,
...(stacking ? { stacking: { mode: stacking, group: 'A' } } : {}),
},
},
overrides: [],
},
});
if (dataSummary.rowCountMax < 200) {
list.append({
name: SuggestionName.LineChartSmooth,
fieldConfig: {
defaults: {
custom: {
lineInterpolation: LineInterpolation.Smooth,
},
},
overrides: [],
},
});
}
// TODO: all "gradient color scheme" suggestions have been removed. they will be re-added as part of the "styles" feature.
// Single series suggestions
if (dataSummary.numberFieldCount === 1) {
list.append({
name: SuggestionName.AreaChart,
fieldConfig: {
defaults: {
custom: {
fillOpacity: 25,
},
},
overrides: [],
},
});
export const timeseriesSuggestionsSupplier: VisualizationSuggestionsSupplierFn<Options, GraphFieldConfig> = (
dataSummary
) => {
if (
!dataSummary.hasFieldType(FieldType.time) ||
!dataSummary.hasFieldType(FieldType.number) ||
dataSummary.rowCountTotal < 2
) {
return;
}
list.append({
name: SuggestionName.LineChartGradientColorScheme,
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
custom: {
gradientMode: GraphGradientMode.Scheme,
lineInterpolation: LineInterpolation.Smooth,
lineWidth: 3,
fillOpacity: 20,
},
},
overrides: [],
},
});
const score: VisualizationSuggestionScore =
dataSummary.hasDataFrameType(DataFrameType.TimeSeriesLong) ||
dataSummary.hasDataFrameType(DataFrameType.TimeSeriesWide) ||
dataSummary.hasDataFrameType(DataFrameType.TimeSeriesMulti)
? VisualizationSuggestionScore.Good
: VisualizationSuggestionScore.OK;
if (dataSummary.rowCountMax < maxBarsCount) {
list.append({
name: SuggestionName.BarChart,
fieldConfig: {
defaults: {
custom: {
drawStyle: GraphDrawStyle.Bars,
fillOpacity: 100,
lineWidth: 1,
gradientMode: GraphGradientMode.Hue,
},
},
overrides: [],
},
});
const suggestions: Array<VisualizationSuggestion<Options, GraphFieldConfig>> = [
{
name: t('timeseries.suggestions.line', 'Line chart'),
},
];
list.append({
name: SuggestionName.BarChartGradientColorScheme,
fieldConfig: {
defaults: {
color: {
mode: FieldColorModeId.ContinuousGrYlRd,
},
custom: {
drawStyle: GraphDrawStyle.Bars,
fillOpacity: 90,
lineWidth: 1,
gradientMode: GraphGradientMode.Scheme,
},
},
overrides: [],
},
});
}
return;
}
// Multiple series suggestions
list.append({
name: SuggestionName.AreaChartStacked,
if (dataSummary.rowCountMax < MAX_ROWS_SMOOTH_CHART) {
suggestions.push({
name: t('timeseries.suggestions.line-smooth', 'Line chart - smooth'),
fieldConfig: {
defaults: {
custom: {
fillOpacity: 25,
stacking: {
mode: StackingMode.Normal,
group: 'A',
},
lineInterpolation: LineInterpolation.Smooth,
},
},
overrides: [],
},
});
}
list.append({
name: SuggestionName.AreaChartStackedPercent,
fieldConfig: {
defaults: {
custom: {
fillOpacity: 25,
stacking: {
mode: StackingMode.Percent,
group: 'A',
},
},
},
overrides: [],
},
});
// Single-series suggestions
if (dataSummary.fieldCountByType(FieldType.number) === 1) {
suggestions.push(areaChart(t('timeseries.suggestions.area', 'Area chart')));
if (dataSummary.rowCountTotal / dataSummary.numberFieldCount < maxBarsCount) {
list.append({
name: SuggestionName.BarChartStacked,
fieldConfig: {
defaults: {
custom: {
drawStyle: GraphDrawStyle.Bars,
fillOpacity: 100,
lineWidth: 1,
gradientMode: GraphGradientMode.Hue,
stacking: {
mode: StackingMode.Normal,
group: 'A',
},
},
},
overrides: [],
},
});
list.append({
name: SuggestionName.BarChartStackedPercent,
fieldConfig: {
defaults: {
custom: {
drawStyle: GraphDrawStyle.Bars,
fillOpacity: 100,
lineWidth: 1,
gradientMode: GraphGradientMode.Hue,
stacking: {
mode: StackingMode.Percent,
group: 'A',
},
},
},
overrides: [],
},
});
if (dataSummary.rowCountMax < MAX_BARS) {
suggestions.push(barChart(t('timeseries.suggestions.bar', 'Bar chart')));
}
}
}
// Multiple series suggestions
else {
suggestions.push(
areaChart(t('timeseries.suggestions.area-stacked', 'Area chart - stacked'), StackingMode.Normal),
areaChart(
t('timeseries.suggestions.area-stacked-percentage', 'Area chart - stacked by percentage'),
StackingMode.Percent
)
);
if (dataSummary.rowCountTotal / dataSummary.fieldCountByType(FieldType.number) < MAX_BARS) {
suggestions.push(
barChart(t('timeseries.suggestions.bar-stacked', 'Bar chart - stacked'), StackingMode.Normal),
barChart(
t('timeseries.suggestions.bar-stacked-percent', 'Bar chart - stacked by percentage'),
StackingMode.Percent
)
);
}
}
return suggestions.map((s) => {
s.score = score;
return withDefaults(s);
});
};
// This will try to get a suggestion that will add a long to wide conversion
export function getPrepareTimeseriesSuggestion(panelId: number): PanelPluginVisualizationSuggestion | undefined {
public/app/plugins/panel/traces/module.tsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { PanelPlugin } from '@grafana/data';
import { t } from '@grafana/i18n';
import { showDefaultSuggestion } from 'app/features/panel/suggestions/utils';
import { migrateToAdhocFilters } from '../../../features/explore/TraceView/useSearch';
import { FiltersEditor } from './FiltersEditor';
import { TracesPanel } from './TracesPanel';
import { TracesSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin(TracesPanel)
.setMigrationHandler((panel) => {
@@ -44,4 +44,4 @@ export const plugin = new PanelPlugin(TracesPanel)
category,
});
})
.setSuggestionsSupplier(new TracesSuggestionsSupplier());
.setSuggestionsSupplier(showDefaultSuggestion((ds) => ds.hasPreferredVisualisationType('trace')));
public/app/plugins/panel/traces/suggestions.ts
-29
View File
@@ -1,29 +0,0 @@
import { VisualizationSuggestionsBuilder, VisualizationSuggestionScore } from '@grafana/data';
import { SuggestionName } from 'app/types/suggestions';
export class TracesSuggestionsSupplier {
getListWithDefaults(builder: VisualizationSuggestionsBuilder) {
return builder.getListAppender<{}, {}>({
name: SuggestionName.Trace,
pluginId: 'traces',
});
}
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
if (!builder.data) {
return;
}
const dataFrame = builder.data.series[0];
if (!dataFrame) {
return;
}
if (builder.data.series[0].meta?.preferredVisualisationType === 'trace') {
this.getListWithDefaults(builder).append({
name: SuggestionName.Trace,
score: VisualizationSuggestionScore.Best,
});
}
}
}
public/app/plugins/panel/trend/TrendPanel.tsx
+3 -47
View File
@@ -1,7 +1,6 @@
import { useMemo } from 'react';
import {
isLikelyAscendingVector,
DataFrame,
FieldMatcherID,
fieldMatchers,
@@ -10,18 +9,17 @@ import {
TimeRange,
useDataLinksContext,
} from '@grafana/data';
import { config, PanelDataErrorView } from '@grafana/runtime';
import { PanelDataErrorView } from '@grafana/runtime';
import { KeyboardPlugin, TooltipDisplayMode, TooltipPlugin2, usePanelContext } from '@grafana/ui';
import { TooltipHoverMode } from '@grafana/ui/internal';
import { XYFieldMatchers } from 'app/core/components/GraphNG/types';
import { preparePlotFrame } from 'app/core/components/GraphNG/utils';
import { TimeSeries } from 'app/core/components/TimeSeries/TimeSeries';
import { findFieldIndex } from 'app/features/dimensions/utils';
import { TimeSeriesTooltip } from '../timeseries/TimeSeriesTooltip';
import { prepareGraphableFields } from '../timeseries/utils';
import { Options } from './panelcfg.gen';
import { prepSeries } from './utils';
export const TrendPanel = ({
data,
@@ -51,49 +49,7 @@ export const TrendPanel = ({
return preparePlotFrame(frames, dimFields);
};
const info = useMemo(() => {
if (data.series.length > 1) {
return {
warning: 'Only one frame is supported, consider adding a join transformation',
frames: data.series,
};
}
let frames = data.series;
let xFieldIdx: number | undefined;
if (options.xField) {
xFieldIdx = findFieldIndex(options.xField, frames[0]);
if (xFieldIdx == null) {
return {
warning: 'Unable to find field: ' + options.xField,
frames: data.series,
};
}
} else {
// first number field
// Perhaps we can/should support any ordinal rather than an error here
xFieldIdx = frames[0] ? frames[0].fields.findIndex((f) => f.type === FieldType.number) : -1;
if (xFieldIdx === -1) {
return {
warning: 'No numeric fields found for X axis',
frames,
};
}
}
// Make sure values are ascending
if (xFieldIdx != null) {
const field = frames[0].fields[xFieldIdx];
if (field.type === FieldType.number && !isLikelyAscendingVector(field.values)) {
return {
warning: `Values must be in ascending order`,
frames,
};
}
}
return { frames: prepareGraphableFields(frames, config.theme2, undefined, xFieldIdx) };
}, [data.series, options.xField]);
const info = useMemo(() => prepSeries(data.series, options.xField), [data.series, options.xField]);
if (info.warning || !info.frames) {
return (
public/app/plugins/panel/trend/module.tsx
+47 -4
View File
@@ -1,13 +1,14 @@
import { Field, FieldType, PanelPlugin } from '@grafana/data';
import { Field, FieldType, PanelPlugin, VisualizationSuggestionScore } from '@grafana/data';
import { t } from '@grafana/i18n';
import { commonOptionsBuilder } from '@grafana/ui';
import { GraphDrawStyle } from '@grafana/schema';
import { commonOptionsBuilder, LegendDisplayMode } from '@grafana/ui';
import { optsWithHideZeros } from '@grafana/ui/internal';
import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config';
import { TrendPanel } from './TrendPanel';
import { FieldConfig, Options } from './panelcfg.gen';
import { TrendSuggestionsSupplier } from './suggestions';
import { prepSeries } from './utils';
export const plugin = new PanelPlugin<Options, FieldConfig>(TrendPanel)
.useFieldConfig(getGraphFieldConfig(defaultGraphConfig, false))
@@ -29,5 +30,47 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TrendPanel)
commonOptionsBuilder.addTooltipOptions(builder, false, true, optsWithHideZeros);
commonOptionsBuilder.addLegendOptions(builder);
})
.setSuggestionsSupplier(new TrendSuggestionsSupplier());
.setSuggestionsSupplier((ds) => {
if (
!ds.rawFrames ||
ds.fieldCountByType(FieldType.number) < 2 ||
ds.rowCountTotal < 2 ||
ds.rowCountTotal < 2 ||
ds.frameCount > 1
) {
return;
}
const info = prepSeries(ds.rawFrames);
if (info.warning || !info.frames) {
return;
}
return [
{
score: VisualizationSuggestionScore.Good,
options: {
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
showLegend: false,
},
},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
}
},
},
},
];
});
//.setDataSupport({ annotations: true, alertStates: true });
public/app/plugins/panel/trend/suggestions.ts
-43
View File
@@ -1,43 +0,0 @@
import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { GraphDrawStyle, GraphFieldConfig, LegendDisplayMode } from '@grafana/schema';
import { SuggestionName } from 'app/types/suggestions';
import { Options } from './panelcfg.gen';
export class TrendSuggestionsSupplier {
getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
const { dataSummary } = builder;
if (dataSummary.numberFieldCount < 2 || dataSummary.rowCountTotal < 2 || dataSummary.rowCountTotal < 2) {
return;
}
// Super basic
const list = builder.getListAppender<Options, GraphFieldConfig>({
name: SuggestionName.LineChart,
pluginId: 'trend',
options: {
legend: {
calcs: [],
displayMode: LegendDisplayMode.Hidden,
placement: 'right',
showLegend: false,
},
},
fieldConfig: {
defaults: {
custom: {},
},
overrides: [],
},
cardOptions: {
previewModifier: (s) => {
if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
}
},
},
});
return list;
}
}
public/app/plugins/panel/trend/utils.ts
+48
View File
@@ -0,0 +1,48 @@
import { DataFrame, FieldType, isLikelyAscendingVector } from '@grafana/data';
import config from 'app/core/config';
import { findFieldIndex } from 'app/features/dimensions/utils';
import { prepareGraphableFields } from '../timeseries/utils';
export function prepSeries(frames: DataFrame[], xField?: string): { warning?: string; frames: DataFrame[] | null } {
if (frames.length > 1) {
return {
warning: 'Only one frame is supported, consider adding a join transformation',
frames: frames,
};
}
let xFieldIdx: number | undefined;
if (xField) {
xFieldIdx = findFieldIndex(xField, frames[0]);
if (xFieldIdx == null) {
return {
warning: 'Unable to find field: ' + xField,
frames: frames,
};
}
} else {
// first number field
// Perhaps we can/should support any ordinal rather than an error here
xFieldIdx = frames[0] ? frames[0].fields.findIndex((f) => f.type === FieldType.number) : -1;
if (xFieldIdx === -1) {
return {
warning: 'No numeric fields found for X axis',
frames,
};
}
}
// Make sure values are ascending
if (xFieldIdx != null) {
const field = frames[0].fields[xFieldIdx];
if (field.type === FieldType.number && !isLikelyAscendingVector(field.values)) {
return {
warning: `Values must be in ascending order`,
frames,
};
}
}
return { frames: prepareGraphableFields(frames, config.theme2, undefined, xFieldIdx) };
}
public/app/types/suggestions.ts
-34
View File
@@ -1,34 +0,0 @@
export enum SuggestionName {
LineChart = 'Line chart',
LineChartSmooth = 'Line chart smooth',
LineChartGradientColorScheme = 'Line chart with gradient color scheme',
AreaChart = 'Area chart',
AreaChartStacked = 'Area chart stacked',
AreaChartStackedPercent = 'Area chart 100% stacked',
BarChart = 'Bar chart',
BarChartGradientColorScheme = 'Bar chart with gradient color scheme',
BarChartStacked = 'Bar chart stacked',
BarChartStackedPercent = 'Bar chart 100% stacked',
BarChartHorizontal = 'Bar chart horizontal',
BarChartHorizontalStacked = 'Bar chart horizontal stacked',
BarChartHorizontalStackedPercent = 'Bar chart horizontal 100% stacked',
Candlestick = 'Candlestick',
PieChart = 'Pie chart',
PieChartDonut = 'Pie chart donut',
Stat = 'Stat',
StatColoredBackground = 'Stat colored background',
Gauge = 'Gauge',
GaugeCircular = 'Circular gauge',
GaugeNoThresholds = 'Gauge no thresholds',
BarGaugeBasic = 'Bar gauge basic',
BarGaugeLCD = 'Bar gauge LCD',
Table = 'Table',
StateTimeline = 'State timeline',
StatusHistory = 'Status history',
TextPanel = 'Text',
DashboardList = 'Dashboard list',
Logs = 'Logs',
FlameGraph = 'Flame graph',
Trace = 'Trace',
NodeGraph = 'Node graph',
}
public/locales/en-US/grafana.json
+33
View File
@@ -3477,6 +3477,14 @@
"label-negative-y": "Negative Y"
}
},
"suggestions": {
"horizontal": "Horizontal bar chart",
"hz-stacked": "Horizontal bar chart - stacked",
"hz-stacked-percent": "Horizontal bar chart - stacked by percentage",
"vert-stacked": "Bar chart - stacked",
"vert-stacked-percent": "Bar chart - stacked by percentage",
"vertical": "Bar chart"
},
"tick-spacing-editor": {
"content-require-space-from-the-right-side": "Require space from the right side",
"gaps-options": {
@@ -3521,6 +3529,10 @@
},
"name-show-unfilled-area": "Show unfilled area",
"name-value-display": "Value display",
"suggestions": {
"basic": "Bar gauge",
"lcd": "Bar gauge - LCD"
},
"value-display-options": {
"label-hidden": "Hidden",
"label-text-color": "Text color",
@@ -7849,6 +7861,7 @@
"suggestions": {
"arc": "Gauge",
"circular": "Circular gauge",
"no-thresholds": "Gauge - no thresholds",
"style": {
"circular": "Glowing",
"simple": "Simple"
@@ -11103,6 +11116,10 @@
"pie-chart-type-options": {
"label-donut": "Donut",
"label-pie": "Pie"
},
"suggestions": {
"donut": "Donut chart",
"pie": "Pie chart"
}
},
"playlist": {
@@ -13051,6 +13068,12 @@
"label-same-as-value": "Same as Value",
"label-standard": "Standard"
},
"suggestions": {
"stat-color-background": "Stat - color background",
"stat-discrete-values": "Stat - discrete values",
"stat-discrete-values-color-background": "Stat - discrete values - color background",
"stat-single-string": "Stat - single string"
},
"text-alignment-options": {
"label-auto": "Auto",
"label-center": "Center"
@@ -13490,6 +13513,16 @@
"label-threshold": "Threshold"
}
},
"suggestions": {
"area": "Area chart",
"area-stacked": "Area chart - stacked",
"area-stacked-percentage": "Area chart - stacked by percentage",
"bar": "Bar chart",
"bar-stacked": "Bar chart - stacked",
"bar-stacked-percent": "Bar chart - stacked by percentage",
"line": "Line chart",
"line-smooth": "Line chart - smooth"
},
"timezones-editor": {
"tooltip-add-timezone": "Add timezone",
"tooltip-remove-timezone": "Remove timezone"