diff --git a/packages/grafana-schema/src/schema/mudball.cue b/packages/grafana-schema/src/schema/mudball.cue index e91a5ea4356..0a6d423cd48 100644 --- a/packages/grafana-schema/src/schema/mudball.cue +++ b/packages/grafana-schema/src/schema/mudball.cue @@ -133,7 +133,7 @@ GraphThresholdsStyleConfig: { LegendPlacement: "bottom" | "right" @cuetsy(kind="type") // TODO docs -LegendDisplayMode: "list" | "table" | "hidden" @cuetsy(kind="enum") +LegendDisplayMode: "list" | "table" @cuetsy(kind="enum") // TODO docs TableSortByFieldState: { @@ -235,6 +235,7 @@ GraphFieldConfig: { VizLegendOptions: { displayMode: LegendDisplayMode placement: LegendPlacement + showLegend: bool asTable?: bool isVisible?: bool sortBy?: string diff --git a/packages/grafana-schema/src/schema/mudball.gen.ts b/packages/grafana-schema/src/schema/mudball.gen.ts index 5b9aad146ce..33834d5c365 100644 --- a/packages/grafana-schema/src/schema/mudball.gen.ts +++ b/packages/grafana-schema/src/schema/mudball.gen.ts @@ -168,7 +168,6 @@ export interface GraphThresholdsStyleConfig { export type LegendPlacement = ('bottom' | 'right'); export enum LegendDisplayMode { - Hidden = 'hidden', List = 'list', Table = 'table', } @@ -289,6 +288,7 @@ export interface VizLegendOptions { displayMode: LegendDisplayMode; isVisible?: boolean; placement: LegendPlacement; + showLegend: boolean; sortBy?: string; sortDesc?: boolean; width?: number; diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx index 723e4d3c3b1..4eddbb648ee 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.internal.tsx @@ -119,13 +119,7 @@ export const WithLegend: Story = ({ rightAxisSeries, displayMode, le return ( diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx index 693b8763024..c2d690c21fc 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx @@ -15,6 +15,7 @@ import { Graph, GraphProps } from './Graph'; export interface GraphWithLegendProps extends GraphProps { legendDisplayMode: LegendDisplayMode; + legendVisibility: boolean; placement: LegendPlacement; hideEmpty?: boolean; hideZero?: boolean; @@ -58,6 +59,7 @@ export const GraphWithLegend: React.FunctionComponent = (p sortLegendBy, sortLegendDesc, legendDisplayMode, + legendVisibility, placement, onSeriesToggle, onToggleSort, @@ -106,7 +108,7 @@ export const GraphWithLegend: React.FunctionComponent = (p - {legendDisplayMode !== LegendDisplayMode.Hidden && ( + {legendVisibility && (
{ renderLegend = (config: UPlotConfigBuilder) => { const { legend, frames } = this.props; - if (!config || (legend && legend.displayMode === LegendDisplayMode.Hidden)) { + //hides and shows the legend ON the uPlot graph + if (!config || (legend && !legend.showLegend)) { return null; } diff --git a/packages/grafana-ui/src/options/builder/legend.tsx b/packages/grafana-ui/src/options/builder/legend.tsx index ef0d282eb07..5fdbfd992ae 100644 --- a/packages/grafana-ui/src/options/builder/legend.tsx +++ b/packages/grafana-ui/src/options/builder/legend.tsx @@ -9,9 +9,16 @@ export function addLegendOptions( includeLegendCalcs = true ) { builder + .addBooleanSwitch({ + path: 'legend.showLegend', + name: 'Visibility', + category: ['Legend'], + description: '', + defaultValue: true, + }) .addRadio({ path: 'legend.displayMode', - name: 'Legend mode', + name: 'Mode', category: ['Legend'], description: '', defaultValue: LegendDisplayMode.List, @@ -19,13 +26,13 @@ export function addLegendOptions( options: [ { value: LegendDisplayMode.List, label: 'List' }, { value: LegendDisplayMode.Table, label: 'Table' }, - { value: LegendDisplayMode.Hidden, label: 'Hidden' }, ], }, + showIf: (c) => c.legend.showLegend, }) .addRadio({ path: 'legend.placement', - name: 'Legend placement', + name: 'Placement', category: ['Legend'], description: '', defaultValue: 'bottom', @@ -35,7 +42,7 @@ export function addLegendOptions( { value: 'right', label: 'Right' }, ], }, - showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden, + showIf: (c) => c.legend.showLegend, }) .addNumberInput({ path: 'legend.width', @@ -44,14 +51,14 @@ export function addLegendOptions( settings: { placeholder: 'Auto', }, - showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden && c.legend.placement === 'right', + showIf: (c) => c.legend.showLegend && c.legend.placement === 'right', }); if (includeLegendCalcs) { builder.addCustomEditor({ id: 'legend.calcs', path: 'legend.calcs', - name: 'Legend values', + name: 'Values', category: ['Legend'], description: 'Select values or calculations to show in legend', editor: standardEditorsRegistry.get('stats-picker').editor as any, @@ -59,7 +66,7 @@ export function addLegendOptions( settings: { allowMultiple: true, }, - showIf: (currentConfig) => currentConfig.legend.displayMode !== LegendDisplayMode.Hidden, + showIf: (currentConfig) => currentConfig.legend.showLegend !== false, }); } } diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 88d0e15a4ec..a1f0d15eb22 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -239,6 +239,16 @@ export class KeybindingSrv { locationService.partial({ viewPanel: isViewing ? null : panelId }); }); + //toggle legend + this.bindWithPanelId('p l', (panelId) => { + const panel = dashboard.getPanelById(panelId)!; + const newOptions = { ...panel.options }; + + newOptions.legend.showLegend ? (newOptions.legend.showLegend = false) : (newOptions.legend.showLegend = true); + + panel.updateOptions(newOptions); + }); + this.bindWithPanelId('i', (panelId) => { locationService.partial({ inspect: panelId }); }); @@ -293,14 +303,6 @@ export class KeybindingSrv { }); // toggle panel legend - this.bindWithPanelId('p l', (panelId) => { - const panelInfo = dashboard.getPanelInfoById(panelId)!; - - if (panelInfo.panel.legend) { - panelInfo.panel.legend.show = !panelInfo.panel.legend.show; - panelInfo.panel.render(); - } - }); // toggle all panel legends this.bind('d l', () => { diff --git a/public/app/features/dashboard/state/DashboardMigrator.test.ts b/public/app/features/dashboard/state/DashboardMigrator.test.ts index 6acfbd00117..bcaa941aa8b 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.test.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.test.ts @@ -193,7 +193,7 @@ describe('DashboardModel', () => { }); it('dashboard schema version should be set to latest', () => { - expect(model.schemaVersion).toBe(36); + expect(model.schemaVersion).toBe(37); }); it('graph thresholds should be migrated', () => { @@ -2026,6 +2026,72 @@ describe('DashboardModel', () => { }); }); +describe('when generating the legend for a panel', () => { + let model: DashboardModel; + + beforeEach(() => { + model = new DashboardModel({ + panels: [ + { + id: 0, + options: { + legend: { + displayMode: 'hidden', + placement: 'bottom', + }, + tooltipOptions: { + mode: 'single', + }, + }, + }, + { + id: 1, + options: { + legend: { + displayMode: 'list', + placement: 'right', + }, + tooltipOptions: { + mode: 'single', + }, + }, + }, + { + id: 2, + options: { + legend: { + displayMode: 'table', + placement: 'bottom', + }, + tooltipOptions: { + mode: 'single', + }, + }, + }, + ], + schemaVersion: 30, + }); + }); + + it('should update displayMode = hidden to showLegend = false and displayMode = list', () => { + expect(model.panels[0].options.legend).toEqual({ displayMode: 'list', showLegend: false, placement: 'bottom' }); + }); + + it('should keep displayMode = list and update to showLegend = true', () => { + expect(model.panels[1].options.legend).toEqual({ displayMode: 'list', showLegend: true, placement: 'right' }); + }); + + it('should keep displayMode = table and update to showLegend = true', () => { + expect(model.panels[2].options.legend).toEqual({ displayMode: 'table', showLegend: true, placement: 'bottom' }); + }); + + it('should preserve the placement', () => { + expect(model.panels[0].options.legend.placement).toEqual('bottom'); + expect(model.panels[1].options.legend.placement).toEqual('right'); + expect(model.panels[2].options.legend.placement).toEqual('bottom'); + }); +}); + function createRow(options: any, panelDescriptions: any[]) { const PANEL_HEIGHT_STEP = GRID_CELL_HEIGHT + GRID_CELL_VMARGIN; const { collapse, showTitle, title, repeat, repeatIteration } = options; diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts index d1becd26b2c..8e7e7b9a990 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.ts @@ -76,7 +76,7 @@ export class DashboardMigrator { let i, j, k, n; const oldVersion = this.dashboard.schemaVersion; const panelUpgrades: PanelSchemeUpgradeHandler[] = []; - this.dashboard.schemaVersion = 36; + this.dashboard.schemaVersion = 37; if (oldVersion === this.dashboard.schemaVersion) { return; @@ -777,6 +777,18 @@ export class DashboardMigrator { } } + if (oldVersion < 37) { + panelUpgrades.push((panel: PanelModel) => { + if (panel.options?.legend && panel.options.legend.displayMode === 'hidden') { + panel.options.legend.displayMode = 'list'; + panel.options.legend.showLegend = false; + } else if (panel.options?.legend) { + panel.options.legend = { ...panel.options?.legend, showLegend: true }; + } + return panel; + }); + } + if (panelUpgrades.length === 0) { return; } diff --git a/public/app/features/dashboard/utils/getPanelMenu.test.ts b/public/app/features/dashboard/utils/getPanelMenu.test.ts index ab6751711f7..094be864769 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.test.ts +++ b/public/app/features/dashboard/utils/getPanelMenu.test.ts @@ -45,6 +45,12 @@ describe('getPanelMenu', () => { "shortcut": "x", "text": "Explore", }, + Object { + "iconClassName": "exchange-alt", + "onClick": [Function], + "shortcut": "p l", + "text": "Show legend", + }, Object { "iconClassName": "info-circle", "onClick": [Function], @@ -129,6 +135,12 @@ describe('getPanelMenu', () => { "shortcut": "x", "text": "Explore", }, + Object { + "iconClassName": "exchange-alt", + "onClick": [Function], + "shortcut": "p l", + "text": "Show legend", + }, Object { "iconClassName": "info-circle", "onClick": [Function], diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts index ef99116806e..5cb16e663f2 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.ts +++ b/public/app/features/dashboard/utils/getPanelMenu.ts @@ -12,6 +12,7 @@ import { duplicatePanel, removePanel, sharePanel, + toggleLegend, unlinkLibraryPanel, } from 'app/features/dashboard/utils/panel'; import { isPanelModelLibraryPanel } from 'app/features/library-panels/guard'; @@ -46,6 +47,11 @@ export function getPanelMenu( sharePanel(dashboard, panel); }; + const onToggleLegend = (event: React.MouseEvent) => { + event.preventDefault(); + toggleLegend(panel); + }; + const onAddLibraryPanel = (event: React.MouseEvent) => { event.preventDefault(); addLibraryPanel(dashboard, panel); @@ -129,11 +135,18 @@ export function getPanelMenu( menu.push({ text: 'Explore', iconClassName: 'compass', - shortcut: 'x', onClick: onNavigateToExplore, + shortcut: 'x', }); } + menu.push({ + text: panel.options.legend?.showLegend ? 'Hide legend' : 'Show legend', + iconClassName: 'exchange-alt', + onClick: onToggleLegend, + shortcut: 'p l', + }); + const inspectMenu: PanelMenuItem[] = []; // Only show these inspect actions for data plugins diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts index 202de4be4f4..47da3b000ff 100644 --- a/public/app/features/dashboard/utils/panel.ts +++ b/public/app/features/dashboard/utils/panel.ts @@ -102,10 +102,11 @@ export const refreshPanel = (panel: PanelModel) => { }; export const toggleLegend = (panel: PanelModel) => { - console.warn('Toggle legend is not implemented yet'); - // We need to set panel.legend defaults first - // panel.legend.show = !panel.legend.show; - refreshPanel(panel); + const newOptions = { ...panel.options }; + newOptions.legend.showLegend === true + ? (newOptions.legend.showLegend = false) + : (newOptions.legend.showLegend = true); + panel.updateOptions(newOptions); }; export interface TimeOverrideResult { diff --git a/public/app/features/explore/ExploreGraph.tsx b/public/app/features/explore/ExploreGraph.tsx index a983741b1bb..f59790aa2c9 100644 --- a/public/app/features/explore/ExploreGraph.tsx +++ b/public/app/features/explore/ExploreGraph.tsx @@ -173,7 +173,12 @@ export function ExploreGraph({ options={ { tooltip: { mode: tooltipDisplayMode, sort: SortOrder.None }, - legend: { displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }, + legend: { + displayMode: LegendDisplayMode.List, + showLegend: true, + placement: 'bottom', + calcs: [], + }, } as TimeSeriesOptions } /> diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index adfa27748cb..a9851074458 100644 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -12,7 +12,6 @@ import { VizOrientation, } from '@grafana/data'; import { PanelDataErrorView } from '@grafana/runtime'; -import { LegendDisplayMode } from '@grafana/schema'; import { GraphNG, GraphNGProps, @@ -183,7 +182,7 @@ export const BarChartPanel: React.FunctionComponent = ({ const renderLegend = (config: UPlotConfigBuilder) => { const { legend } = options; - if (!config || legend.displayMode === LegendDisplayMode.Hidden) { + if (!config || legend.showLegend === false) { return null; } diff --git a/public/app/plugins/panel/barchart/suggestions.ts b/public/app/plugins/panel/barchart/suggestions.ts index c5631671f72..eca2ac73995 100644 --- a/public/app/plugins/panel/barchart/suggestions.ts +++ b/public/app/plugins/panel/barchart/suggestions.ts @@ -1,5 +1,5 @@ import { VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data'; -import { LegendDisplayMode, StackingMode, VisibilityMode } from '@grafana/schema'; +import { StackingMode, VisibilityMode } from '@grafana/schema'; import { SuggestionName } from 'app/types/suggestions'; import { BarChartFieldConfig, PanelOptions } from './models.gen'; @@ -12,7 +12,7 @@ export class BarChartSuggestionsSupplier { options: { showValue: VisibilityMode.Never, legend: { - displayMode: LegendDisplayMode.Hidden, + showLegend: true, placement: 'right', } as any, }, diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts index f9b90b08ff7..ac4ea565d8a 100644 --- a/public/app/plugins/panel/barchart/utils.test.ts +++ b/public/app/plugins/panel/barchart/utils.test.ts @@ -94,6 +94,7 @@ describe('BarChart utils', () => { showValue: VisibilityMode.Always, legend: { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'bottom', calcs: [], }, diff --git a/public/app/plugins/panel/candlestick/models.gen.ts b/public/app/plugins/panel/candlestick/models.gen.ts index 892e420befa..5f4c4410e4c 100644 --- a/public/app/plugins/panel/candlestick/models.gen.ts +++ b/public/app/plugins/panel/candlestick/models.gen.ts @@ -66,6 +66,7 @@ export const defaultPanelOptions: CandlestickOptions = { fields: {}, legend: { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'bottom', calcs: [], }, diff --git a/public/app/plugins/panel/histogram/Histogram.tsx b/public/app/plugins/panel/histogram/Histogram.tsx index 60e04804326..6c8bc260ee1 100644 --- a/public/app/plugins/panel/histogram/Histogram.tsx +++ b/public/app/plugins/panel/histogram/Histogram.tsx @@ -12,14 +12,7 @@ import { histogramBucketSizes, histogramFrameBucketMaxFieldName, } from '@grafana/data/src/transformations/transformers/histogram'; -import { - VizLegendOptions, - LegendDisplayMode, - ScaleDistribution, - AxisPlacement, - ScaleDirection, - ScaleOrientation, -} from '@grafana/schema'; +import { VizLegendOptions, ScaleDistribution, AxisPlacement, ScaleDirection, ScaleOrientation } from '@grafana/schema'; import { Themeable2, UPlotConfigBuilder, @@ -273,7 +266,7 @@ export class Histogram extends React.Component { renderLegend(config: UPlotConfigBuilder) { const { legend } = this.props; - if (!config || legend.displayMode === LegendDisplayMode.Hidden) { + if (!config || legend.showLegend === false) { return null; } diff --git a/public/app/plugins/panel/histogram/models.gen.ts b/public/app/plugins/panel/histogram/models.gen.ts index 1b1b9315c44..53909a7c75b 100644 --- a/public/app/plugins/panel/histogram/models.gen.ts +++ b/public/app/plugins/panel/histogram/models.gen.ts @@ -25,6 +25,7 @@ export const defaultPanelOptions: PanelOptions = { bucketOffset: 0, legend: { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'bottom', calcs: [], }, diff --git a/public/app/plugins/panel/piechart/PieChartPanel.test.tsx b/public/app/plugins/panel/piechart/PieChartPanel.test.tsx index fcaef98151b..6fb04623424 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.test.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.test.tsx @@ -171,6 +171,7 @@ const setup = (propsOverrides?: {}) => { displayLabels: [], legend: { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'right', calcs: [], values: [PieChartLegendValues.Percent], diff --git a/public/app/plugins/panel/piechart/PieChartPanel.tsx b/public/app/plugins/panel/piechart/PieChartPanel.tsx index 9fb348ded96..59747377ce5 100644 --- a/public/app/plugins/panel/piechart/PieChartPanel.tsx +++ b/public/app/plugins/panel/piechart/PieChartPanel.tsx @@ -27,6 +27,7 @@ import { filterDisplayItems, sumDisplayItemsReducer } from './utils'; const defaultLegendOptions: PieChartLegendOptions = { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'right', calcs: [], values: [PieChartLegendValues.Percent], @@ -77,7 +78,7 @@ export function PieChartPanel(props: Props) { function getLegend(props: Props, displayValues: FieldDisplay[]) { const legendOptions = props.options.legend ?? defaultLegendOptions; - if (legendOptions.displayMode === LegendDisplayMode.Hidden) { + if (legendOptions.showLegend === false) { return undefined; } const total = displayValues.filter(filterDisplayItems).reduce(sumDisplayItemsReducer, 0); diff --git a/public/app/plugins/panel/piechart/migrations.test.ts b/public/app/plugins/panel/piechart/migrations.test.ts index b11c492658d..b9ff1741497 100644 --- a/public/app/plugins/panel/piechart/migrations.test.ts +++ b/public/app/plugins/panel/piechart/migrations.test.ts @@ -1,5 +1,4 @@ import { FieldColorModeId, FieldConfigProperty, FieldMatcherID, PanelModel } from '@grafana/data'; -import { LegendDisplayMode } from '@grafana/schema'; import { PieChartPanelChangedHandler } from './migrations'; import { PieChartLabels } from './types'; @@ -71,6 +70,6 @@ describe('PieChart -> PieChartV2 migrations', () => { }, }; const options = PieChartPanelChangedHandler(panel, 'grafana-piechart-panel', oldPieChartOptions); - expect(options).toMatchObject({ legend: { displayMode: LegendDisplayMode.Hidden } }); + expect(options).toMatchObject({ legend: { showLegend: false } }); }); }); diff --git a/public/app/plugins/panel/piechart/migrations.ts b/public/app/plugins/panel/piechart/migrations.ts index fa42a9cb766..994c73944cf 100644 --- a/public/app/plugins/panel/piechart/migrations.ts +++ b/public/app/plugins/panel/piechart/migrations.ts @@ -45,7 +45,13 @@ export const PieChartPanelChangedHandler = ( }, }; - options.legend = { placement: 'right', values: [], displayMode: LegendDisplayMode.Table, calcs: [] }; + options.legend = { + placement: 'right', + values: [], + displayMode: LegendDisplayMode.Table, + showLegend: true, + calcs: [], + }; if (angular.valueName) { options.reduceOptions = { calcs: [] }; @@ -88,7 +94,7 @@ export const PieChartPanelChangedHandler = ( if (angular.legend) { if (!angular.legend.show) { - options.legend.displayMode = LegendDisplayMode.Hidden; + options.legend.showLegend = false; } if (angular.legend.values) { options.legend.values.push(PieChartLegendValues.Value); @@ -98,13 +104,13 @@ export const PieChartPanelChangedHandler = ( } if (!angular.legend.percentage && !angular.legend.values) { // If you deselect both value and percentage in the old pie chart plugin, the legend is hidden. - options.legend.displayMode = LegendDisplayMode.Hidden; + options.legend.showLegend = false; } } // Set up labels when the old piechart is using 'on graph', for the legend option. if (angular.legendType === 'On graph') { - options.legend.displayMode = LegendDisplayMode.Hidden; + options.legend.showLegend = false; options.displayLabels = [PieChartLabels.Name]; if (angular.legend.values) { options.displayLabels.push(PieChartLabels.Value); diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index 8fa9b4abbfd..19984b51964 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -1,5 +1,4 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data'; -import { LegendDisplayMode } from '@grafana/schema'; import { commonOptionsBuilder } from '@grafana/ui'; import { addStandardDataReduceOptions } from '../stat/common'; @@ -70,7 +69,7 @@ export const plugin = new PanelPlugin(PieChartPanel) { value: PieChartLegendValues.Value, label: 'Value' }, ], }, - showIf: (c) => c.legend.displayMode !== LegendDisplayMode.Hidden, + showIf: (c) => c.legend.showLegend !== false, }); }) .setSuggestionsSupplier(new PieChartSuggestionsSupplier()); diff --git a/public/app/plugins/panel/piechart/suggestions.ts b/public/app/plugins/panel/piechart/suggestions.ts index 4eae227cd4e..f26643e3d82 100644 --- a/public/app/plugins/panel/piechart/suggestions.ts +++ b/public/app/plugins/panel/piechart/suggestions.ts @@ -1,5 +1,4 @@ import { VisualizationSuggestionsBuilder } from '@grafana/data'; -import { LegendDisplayMode } from '@grafana/schema'; import { SuggestionName } from 'app/types/suggestions'; import { PieChartLabels, PieChartOptions, PieChartType } from './types'; @@ -23,7 +22,7 @@ export class PieChartSuggestionsSupplier { cardOptions: { previewModifier: (s) => { // Hide labels in preview - s.options!.legend.displayMode = LegendDisplayMode.Hidden; + s.options!.legend.showLegend = false; }, }, }); diff --git a/public/app/plugins/panel/state-timeline/TimelineChart.tsx b/public/app/plugins/panel/state-timeline/TimelineChart.tsx index f2f59ab7aca..9eb63a960d4 100644 --- a/public/app/plugins/panel/state-timeline/TimelineChart.tsx +++ b/public/app/plugins/panel/state-timeline/TimelineChart.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { DataFrame, FALLBACK_COLOR, FieldType, TimeRange } from '@grafana/data'; -import { LegendDisplayMode, VisibilityMode } from '@grafana/schema'; +import { VisibilityMode } from '@grafana/schema'; import { PanelContext, PanelContextRoot, @@ -73,7 +73,7 @@ export class TimelineChart extends React.Component { renderLegend = (config: UPlotConfigBuilder) => { const { legend, legendItems } = this.props; - if (!config || !legendItems || !legend || legend.displayMode === LegendDisplayMode.Hidden) { + if (!config || !legendItems || !legend || legend.showLegend === false) { return null; } diff --git a/public/app/plugins/panel/state-timeline/utils.ts b/public/app/plugins/panel/state-timeline/utils.ts index 986970534ea..8ae265ed438 100644 --- a/public/app/plugins/panel/state-timeline/utils.ts +++ b/public/app/plugins/panel/state-timeline/utils.ts @@ -497,7 +497,7 @@ export function prepareTimelineLegendItems( options: VizLegendOptions, theme: GrafanaTheme2 ): VizLegendItem[] | undefined { - if (!frames || options.displayMode === 'hidden') { + if (!frames || options.showLegend === false) { return undefined; } diff --git a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap index 243f9f77801..63ab57895cc 100644 --- a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap +++ b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap @@ -44,6 +44,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -72,6 +73,7 @@ Object { ], "displayMode": "list", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "single", @@ -98,6 +100,7 @@ Object { "calcs": Array [], "displayMode": "list", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "single", @@ -169,6 +172,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -240,6 +244,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -268,6 +273,7 @@ Object { "calcs": Array [], "displayMode": "list", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "single", @@ -355,6 +361,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -412,6 +419,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -453,6 +461,7 @@ Object { ], "displayMode": "table", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -502,6 +511,7 @@ Object { "calcs": Array [], "displayMode": "list", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", @@ -638,6 +648,7 @@ Object { "calcs": Array [], "displayMode": "list", "placement": "bottom", + "showLegend": true, }, "tooltip": Object { "mode": "multi", diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts index d49cca16649..6fc292e66b3 100644 --- a/public/app/plugins/panel/timeseries/migrations.ts +++ b/public/app/plugins/panel/timeseries/migrations.ts @@ -319,6 +319,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour const options: TimeSeriesOptions = { legend: { displayMode: LegendDisplayMode.List, + showLegend: true, placement: 'bottom', calcs: [], }, @@ -334,7 +335,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour if (legendConfig.show) { options.legend.displayMode = legendConfig.alignAsTable ? LegendDisplayMode.Table : LegendDisplayMode.List; } else { - options.legend.displayMode = LegendDisplayMode.Hidden; + options.legend.showLegend = false; } if (legendConfig.rightSide) { diff --git a/public/app/plugins/panel/timeseries/suggestions.ts b/public/app/plugins/panel/timeseries/suggestions.ts index e1e3906a912..d44ce409561 100644 --- a/public/app/plugins/panel/timeseries/suggestions.ts +++ b/public/app/plugins/panel/timeseries/suggestions.ts @@ -1,12 +1,5 @@ import { FieldColorModeId, VisualizationSuggestionsBuilder } from '@grafana/data'; -import { - GraphDrawStyle, - GraphFieldConfig, - GraphGradientMode, - LegendDisplayMode, - LineInterpolation, - StackingMode, -} from '@grafana/schema'; +import { GraphDrawStyle, GraphFieldConfig, GraphGradientMode, LineInterpolation, StackingMode } from '@grafana/schema'; import { SuggestionName } from 'app/types/suggestions'; import { TimeSeriesOptions } from './types'; @@ -33,7 +26,7 @@ export class TimeSeriesSuggestionsSupplier { }, cardOptions: { previewModifier: (s) => { - s.options!.legend.displayMode = LegendDisplayMode.Hidden; + s.options!.legend.showLegend = false; if (s.fieldConfig?.defaults.custom?.drawStyle !== GraphDrawStyle.Bars) { s.fieldConfig!.defaults.custom!.lineWidth = Math.max(s.fieldConfig!.defaults.custom!.lineWidth ?? 1, 2);