From 6da6ef98be0c0e0d7f1c2441ccdffd8d8c2c01c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 11 Nov 2021 14:10:23 +0100 Subject: [PATCH] VisualizationSuggestions: More suggestions and refinements (#41480) * VisualizationSuggestions: More suggestions * more refinements * Minor fixes --- .../VizTypePicker/VisualizationPreview.tsx | 1 + .../panel/state/getAllSuggestions.test.ts | 4 ++ .../features/panel/state/getAllSuggestions.ts | 1 + .../plugins/panel/status-history/module.tsx | 4 +- .../panel/status-history/suggestions.ts | 48 +++++++++++++++++++ .../plugins/panel/timeseries/suggestions.ts | 41 +++++++++++++++- public/app/types/suggestions.ts | 5 +- 7 files changed, 100 insertions(+), 4 deletions(-) create mode 100644 public/app/plugins/panel/status-history/suggestions.ts diff --git a/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx b/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx index 96beaa1f212..91a6d578776 100644 --- a/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx +++ b/public/app/features/panel/components/VizTypePicker/VisualizationPreview.tsx @@ -77,6 +77,7 @@ const getStyles = (theme: GrafanaTheme2) => { background: none; border-radius: ${theme.shape.borderRadius(1)}; cursor: pointer; + text-align: left; border: 1px solid ${theme.colors.border.strong}; transition: ${theme.transitions.create(['background'], { diff --git a/public/app/features/panel/state/getAllSuggestions.test.ts b/public/app/features/panel/state/getAllSuggestions.test.ts index 7bffe2a6cec..81c90cb68d4 100644 --- a/public/app/features/panel/state/getAllSuggestions.test.ts +++ b/public/app/features/panel/state/getAllSuggestions.test.ts @@ -92,7 +92,9 @@ scenario('Single frame with time and number field', (ctx) => { SuggestionName.LineChart, SuggestionName.LineChartSmooth, SuggestionName.AreaChart, + SuggestionName.LineChartGradientColorScheme, SuggestionName.BarChart, + SuggestionName.BarChartGradientColorScheme, SuggestionName.Gauge, SuggestionName.GaugeNoThresholds, SuggestionName.Stat, @@ -101,6 +103,7 @@ scenario('Single frame with time and number field', (ctx) => { SuggestionName.BarGaugeLCD, SuggestionName.Table, SuggestionName.StateTimeline, + SuggestionName.StatusHistory, ]); }); @@ -146,6 +149,7 @@ scenario('Single frame with time 2 number fields', (ctx) => { SuggestionName.BarGaugeLCD, SuggestionName.Table, SuggestionName.StateTimeline, + SuggestionName.StatusHistory, ]); }); diff --git a/public/app/features/panel/state/getAllSuggestions.ts b/public/app/features/panel/state/getAllSuggestions.ts index c86ee02c68e..f174533e1f6 100644 --- a/public/app/features/panel/state/getAllSuggestions.ts +++ b/public/app/features/panel/state/getAllSuggestions.ts @@ -10,6 +10,7 @@ export const panelsToCheckFirst = [ 'bargauge', 'table', 'state-timeline', + 'status-history', 'text', 'dashlist', ]; diff --git a/public/app/plugins/panel/status-history/module.tsx b/public/app/plugins/panel/status-history/module.tsx index 76c02ad2c6a..65be04c368b 100755 --- a/public/app/plugins/panel/status-history/module.tsx +++ b/public/app/plugins/panel/status-history/module.tsx @@ -3,6 +3,7 @@ import { StatusHistoryPanel } from './StatusHistoryPanel'; import { StatusPanelOptions, StatusFieldConfig, defaultStatusFieldConfig } from './types'; import { VisibilityMode } from '@grafana/schema'; import { commonOptionsBuilder } from '@grafana/ui'; +import { StatusHistorySuggestionsSupplier } from './suggestions'; export const plugin = new PanelPlugin(StatusHistoryPanel) .useFieldConfig({ @@ -77,4 +78,5 @@ export const plugin = new PanelPlugin(Sta commonOptionsBuilder.addLegendOptions(builder, false); commonOptionsBuilder.addTooltipOptions(builder, true); - }); + }) + .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier()); diff --git a/public/app/plugins/panel/status-history/suggestions.ts b/public/app/plugins/panel/status-history/suggestions.ts new file mode 100644 index 00000000000..f2b12ba04c9 --- /dev/null +++ b/public/app/plugins/panel/status-history/suggestions.ts @@ -0,0 +1,48 @@ +import { FieldColorModeId, VisualizationSuggestionsBuilder } from '@grafana/data'; +import { SuggestionName } from 'app/types/suggestions'; +import { StatusPanelOptions, StatusFieldConfig } from './types'; + +export class StatusHistorySuggestionsSupplier { + getSuggestionsForData(builder: VisualizationSuggestionsBuilder) { + const { dataSummary } = builder; + + if (!dataSummary.hasData) { + return; + } + + // This panel needs a time field and a string or number field + if (!dataSummary.hasTimeField || (!dataSummary.hasStringField && !dataSummary.hasNumberField)) { + return; + } + + // If there are many series then they won't fit on y-axis so this panel is not good fit + if (dataSummary.numberFieldCount >= 30) { + return; + } + + // if there a lot of data points for each series then this is not a good match + if (dataSummary.rowCountMax > 100) { + return; + } + + const list = builder.getListAppender({ + name: '', + pluginId: 'status-history', + options: {}, + fieldConfig: { + defaults: { + color: { + mode: FieldColorModeId.ContinuousGrYlRd, + }, + custom: {}, + }, + overrides: [], + }, + previewModifier: (s) => { + s.options!.colWidth = 0.7; + }, + }); + + list.append({ name: SuggestionName.StatusHistory }); + } +} diff --git a/public/app/plugins/panel/timeseries/suggestions.ts b/public/app/plugins/panel/timeseries/suggestions.ts index 20c8efd5799..e8dbbdcb3aa 100644 --- a/public/app/plugins/panel/timeseries/suggestions.ts +++ b/public/app/plugins/panel/timeseries/suggestions.ts @@ -1,4 +1,4 @@ -import { VisualizationSuggestionsBuilder } from '@grafana/data'; +import { FieldColorModeId, VisualizationSuggestionsBuilder } from '@grafana/data'; import { GraphDrawStyle, GraphFieldConfig, @@ -34,7 +34,7 @@ export class TimeSeriesSuggestionsSupplier { s.options!.legend.displayMode = LegendDisplayMode.Hidden; if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) { - s.fieldConfig!.defaults.custom!.lineWidth = 3; + s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2); } }, }); @@ -73,6 +73,24 @@ export class TimeSeriesSuggestionsSupplier { }, }); + list.append({ + name: SuggestionName.LineChartGradientColorScheme, + fieldConfig: { + defaults: { + color: { + mode: FieldColorModeId.ContinuousGrYlRd, + }, + custom: { + gradientMode: GraphGradientMode.Scheme, + lineInterpolation: LineInterpolation.Smooth, + lineWidth: 3, + fillOpacity: 20, + }, + }, + overrides: [], + }, + }); + if (dataSummary.rowCountMax < maxBarsCount) { list.append({ name: SuggestionName.BarChart, @@ -88,7 +106,26 @@ export class TimeSeriesSuggestionsSupplier { overrides: [], }, }); + + list.append({ + name: SuggestionName.BarChartGradientColorScheme, + fieldConfig: { + defaults: { + color: { + mode: FieldColorModeId.ContinuousGrYlRd, + }, + custom: { + drawStyle: GraphDrawStyle.Bars, + fillOpacity: 90, + lineWidth: 1, + gradientMode: GraphGradientMode.Scheme, + }, + }, + overrides: [], + }, + }); } + return; } diff --git a/public/app/types/suggestions.ts b/public/app/types/suggestions.ts index 2242975b37c..11195b712d9 100644 --- a/public/app/types/suggestions.ts +++ b/public/app/types/suggestions.ts @@ -1,10 +1,12 @@ 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', @@ -19,7 +21,8 @@ export enum SuggestionName { BarGaugeBasic = 'Bar gauge basic', BarGaugeLCD = 'Bar gauge LCD', Table = 'Table', - StateTimeline = 'StateTimeline', + StateTimeline = 'State timeline', + StatusHistory = 'Status history', TextPanel = 'Text panel', DashboardList = 'Dashboard list', }