VisualizationSuggestions: More suggestions and refinements (#41480)

* VisualizationSuggestions: More suggestions

* more refinements

* Minor fixes

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'], {

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

public/app/features/panel/state/getAllSuggestions.ts

@@ -10,6 +10,7 @@ export const panelsToCheckFirst = [
   'bargauge',
   'table',
   'state-timeline',
+  'status-history',
   'text',
   'dashlist',
 ];

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<StatusPanelOptions, StatusFieldConfig>(StatusHistoryPanel)
   .useFieldConfig({
@@ -77,4 +78,5 @@ export const plugin = new PanelPlugin<StatusPanelOptions, StatusFieldConfig>(Sta
 
     commonOptionsBuilder.addLegendOptions(builder, false);
     commonOptionsBuilder.addTooltipOptions(builder, true);
-  });
+  })
+  .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier());

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<StatusPanelOptions, StatusFieldConfig>({
+      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 });
+  }
+}

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;
     }
 

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',
 }