Suggestions: Fix legend options for preview (#116078)

public/app/features/panel/suggestions/utils.ts

@@ -5,7 +5,7 @@ import {
   VisualizationSuggestion,
   VisualizationSuggestionScore,
 } from '@grafana/data';
-import { ReduceDataOptions } from '@grafana/schema';
+import { LegendDisplayMode, ReduceDataOptions, VizLegendOptions } from '@grafana/schema';
 
 /**
  * @internal
@@ -62,3 +62,15 @@ export function defaultNumericVizOptions(
 export function hasData(data?: PanelData): boolean {
   return Boolean(data && data.series && data.series.length > 0 && data.series.some((frame) => frame.length > 0));
 }
+
+/**
+ * @internal
+ * Hidden legend config for previewing suggestion cards.
+ * This should only be used in previewModifier.
+ */
+export const SUGGESTIONS_LEGEND_OPTIONS: VizLegendOptions = {
+  calcs: [],
+  displayMode: LegendDisplayMode.Hidden,
+  placement: 'right',
+  showLegend: false,
+};

public/app/plugins/panel/piechart/suggestions.ts

@@ -7,8 +7,7 @@ import {
   VisualizationSuggestionsSupplier,
 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { LegendDisplayMode } from '@grafana/schema';
-import { defaultNumericVizOptions } from 'app/features/panel/suggestions/utils';
+import { defaultNumericVizOptions, SUGGESTIONS_LEGEND_OPTIONS } from 'app/features/panel/suggestions/utils';
 
 import { PieChartLabels, Options, PieChartType } from './panelcfg.gen';
 
@@ -16,12 +15,13 @@ const withDefaults = (suggestion: VisualizationSuggestion<Options>): Visualizati
   defaultsDeep(suggestion, {
     options: {
       displayLabels: [PieChartLabels.Percent],
-      legend: {
-        calcs: [],
-        displayMode: LegendDisplayMode.Hidden,
-        placement: 'right',
-        values: [],
-        showLegend: false,
+    },
+    cardOptions: {
+      previewModifier: (s) => {
+        s.options!.legend = {
+          ...SUGGESTIONS_LEGEND_OPTIONS,
+          values: [],
+        };
       },
     },
   } satisfies VisualizationSuggestion<Options>);

public/app/plugins/panel/timeseries/suggestions.ts

@@ -10,15 +10,9 @@ import {
   VisualizationSuggestionsSupplier,
 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import {
-  GraphDrawStyle,
-  GraphFieldConfig,
-  GraphGradientMode,
-  LegendDisplayMode,
-  LineInterpolation,
-  StackingMode,
-} from '@grafana/schema';
+import { GraphDrawStyle, GraphFieldConfig, GraphGradientMode, LineInterpolation, StackingMode } from '@grafana/schema';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
+import { SUGGESTIONS_LEGEND_OPTIONS } from 'app/features/panel/suggestions/utils';
 
 import { Options } from './panelcfg.gen';
 
@@ -29,14 +23,6 @@ const withDefaults = (
   suggestion: VisualizationSuggestion<Options, GraphFieldConfig>
 ): VisualizationSuggestion<Options, GraphFieldConfig> =>
   defaultsDeep(suggestion, {
-    options: {
-      legend: {
-        calcs: [],
-        displayMode: LegendDisplayMode.Hidden,
-        placement: 'right',
-        showLegend: false,
-      },
-    },
     fieldConfig: {
       defaults: {
         custom: {},
@@ -46,6 +32,7 @@ const withDefaults = (
     cardOptions: {
       previewModifier: (s) => {
         s.options!.disableKeyboardEvents = true;
+        s.options!.legend = SUGGESTIONS_LEGEND_OPTIONS;
         if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
           s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
         }

public/app/plugins/panel/trend/module.tsx

@@ -1,8 +1,9 @@
 import { Field, FieldType, PanelPlugin, VisualizationSuggestionScore } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { GraphDrawStyle } from '@grafana/schema';
-import { commonOptionsBuilder, LegendDisplayMode } from '@grafana/ui';
+import { commonOptionsBuilder } from '@grafana/ui';
 import { optsWithHideZeros } from '@grafana/ui/internal';
+import { SUGGESTIONS_LEGEND_OPTIONS } from 'app/features/panel/suggestions/utils';
 
 import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config';
 
@@ -49,14 +50,6 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TrendPanel)
     return [
       {
         score: VisualizationSuggestionScore.Good,
-        options: {
-          legend: {
-            calcs: [],
-            displayMode: LegendDisplayMode.Hidden,
-            placement: 'right',
-            showLegend: false,
-          },
-        },
         fieldConfig: {
           defaults: {
             custom: {},
@@ -65,6 +58,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TrendPanel)
         },
         cardOptions: {
           previewModifier: (s) => {
+            s.options!.legend = SUGGESTIONS_LEGEND_OPTIONS;
             if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) {
               s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);
             }