Legend/GraphNG: Refactoring legend types and options (#29067)

* Legend/GraphNG: Refactoring legend types and options

* Rename label

* Minor update

* Fixed legend placement crash issue

* remove unused

* Minor tweaks and fixes

public/app/features/explore/ExploreGraphPanel.tsx

@@ -113,9 +113,8 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
           return (
             <GraphWithLegend
               ariaLabel={ariaLabel}
-              displayMode={LegendDisplayMode.List}
+              legendDisplayMode={LegendDisplayMode.List}
               height={height}
-              isLegendVisible={true}
               placement={'bottom'}
               width={width}
               timeRange={timeRange}

public/app/features/explore/utils/decorators.ts

@@ -92,7 +92,7 @@ export const decorateWithGraphResult = (data: ExplorePanelData): ExplorePanelDat
           data.request?.timezone ?? 'browser',
           {},
           { showBars: false, showLines: true, showPoints: false },
-          { displayMode: LegendDisplayMode.List, isVisible: true, placement: 'bottom' }
+          { displayMode: LegendDisplayMode.List, placement: 'bottom' }
         );
 
   return { ...data, graphResult };

public/app/plugins/panel/graph2/GraphPanel.tsx

@@ -53,8 +53,7 @@ export const GraphPanel: React.FunctionComponent<GraphPanelProps> = ({
             timeZone={timeZone}
             width={width}
             height={height}
-            displayMode={legendOptions.displayMode}
-            isLegendVisible={legendOptions.isVisible}
+            legendDisplayMode={legendOptions.displayMode}
             placement={legendOptions.placement}
             sortLegendBy={legendOptions.sortBy}
             sortLegendDesc={legendOptions.sortDesc}

public/app/plugins/panel/graph2/types.ts

@@ -28,7 +28,6 @@ export const defaults: Options = {
     showPoints: false,
   },
   legend: {
-    isVisible: true,
     displayMode: LegendDisplayMode.List,
     placement: 'bottom',
   },

public/app/plugins/panel/graph3/GraphPanel.tsx

@@ -22,7 +22,7 @@ export const GraphPanel: React.FC<GraphPanelProps> = ({
       timeRange={timeRange}
       timeZone={timeZone}
       width={width}
-      height={height - 8}
+      height={height}
       legend={options.legend}
     >
       <TooltipPlugin mode={options.tooltipOptions.mode as any} timeZone={timeZone} />

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

@@ -1,10 +1,9 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
-import { AxisSide, GraphCustomFieldConfig } from '@grafana/ui';
+import { AxisSide, GraphCustomFieldConfig, LegendDisplayMode } from '@grafana/ui';
 import { GraphPanel } from './GraphPanel';
 import { Options } from './types';
 
 export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPanel)
-  .setNoPadding()
   .useFieldConfig({
     standardOptions: {
       [FieldConfigProperty.Color]: {
@@ -133,29 +132,26 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
         defaultValue: 'single',
         settings: {
           options: [
-            { value: 'single', label: 'Single series' },
-            { value: 'multi', label: 'All series' },
-            { value: 'none', label: 'No tooltip' },
+            { value: 'single', label: 'Single' },
+            { value: 'multi', label: 'All' },
+            { value: 'none', label: 'Hidden' },
           ],
         },
       })
-      .addBooleanSwitch({
-        category: ['Legend'],
-        path: 'legend.isVisible',
-        name: 'Show legend',
+      .addRadio({
+        path: 'legend.displayMode',
+        name: 'Legend mode',
         description: '',
-        defaultValue: true,
-      })
-      .addBooleanSwitch({
-        category: ['Legend'],
-        path: 'legend.asTable',
-        name: 'Display legend as table',
-        description: '',
-        defaultValue: false,
-        showIf: c => c.legend.isVisible,
+        defaultValue: LegendDisplayMode.List,
+        settings: {
+          options: [
+            { value: LegendDisplayMode.List, label: 'List' },
+            { value: LegendDisplayMode.Table, label: 'Table' },
+            { value: LegendDisplayMode.Hidden, label: 'Hidden' },
+          ],
+        },
       })
       .addRadio({
-        category: ['Legend'],
         path: 'legend.placement',
         name: 'Legend placement',
         description: '',
@@ -166,6 +162,6 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
             { value: 'right', label: 'Right' },
           ],
         },
-        showIf: c => c.legend.isVisible,
+        showIf: c => c.legend.displayMode !== LegendDisplayMode.Hidden,
       });
   });