diff --git a/devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json b/devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json index ccb96d1277e..4d66adf921d 100644 --- a/devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json +++ b/devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json @@ -137,7 +137,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -250,7 +250,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -363,7 +363,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -517,7 +517,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -619,7 +619,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -722,7 +722,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -825,7 +825,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1028,7 +1028,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "multi" } }, @@ -1336,7 +1336,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1591,7 +1591,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1717,7 +1717,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1895,7 +1895,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2078,7 +2078,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json b/devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json index 76629a0505a..8720c908ea5 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json @@ -97,7 +97,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -186,7 +186,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -275,7 +275,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -363,7 +363,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -452,7 +452,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -541,7 +541,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json b/devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json index 23fe602a5f9..ea07b8e2e96 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json @@ -105,7 +105,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -200,7 +200,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -295,7 +295,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -390,7 +390,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -485,7 +485,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -580,7 +580,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -675,7 +675,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -770,7 +770,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -865,7 +865,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-nulls.json b/devenv/dev-dashboards/panel-graph/graph-ng-nulls.json index 0262ca92229..95c10fac68b 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-nulls.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-nulls.json @@ -85,7 +85,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -187,7 +187,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -297,7 +297,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -425,7 +425,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -527,7 +527,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -637,7 +637,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -822,7 +822,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -983,7 +983,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1087,7 +1087,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json b/devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json index 8507ebadb61..69db6af9e67 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json @@ -107,7 +107,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -227,7 +227,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -347,7 +347,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -467,7 +467,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -587,7 +587,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -707,7 +707,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -827,7 +827,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -951,7 +951,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1075,7 +1075,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1199,7 +1199,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1323,7 +1323,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1447,7 +1447,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1571,7 +1571,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1695,7 +1695,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1815,7 +1815,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1936,7 +1936,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2057,7 +2057,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2180,7 +2180,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-stacking.json b/devenv/dev-dashboards/panel-graph/graph-ng-stacking.json index 0876d2d3fe4..97ae888c683 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-stacking.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-stacking.json @@ -80,7 +80,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -184,7 +184,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -289,7 +289,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -393,7 +393,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -490,7 +490,7 @@ "placement": "bottom" }, "stacking": "none", - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -587,7 +587,7 @@ "placement": "bottom" }, "stacking": "none", - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -684,7 +684,7 @@ "placement": "bottom" }, "stacking": "none", - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -843,7 +843,7 @@ "placement": "bottom" }, "stacking": "none", - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-thresholds.json b/devenv/dev-dashboards/panel-graph/graph-ng-thresholds.json index 4d775a698ab..5ab9a8d13d6 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-thresholds.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-thresholds.json @@ -199,7 +199,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -398,7 +398,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -597,7 +597,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -797,7 +797,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1003,7 +1003,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1208,7 +1208,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1245,4 +1245,4 @@ "title": "Panel Tests - GraphNG Thresholds", "uid": "6HMMh4rMz", "version": 2 -} \ No newline at end of file +} diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-time.json b/devenv/dev-dashboards/panel-graph/graph-ng-time.json index ed06868f01a..08eb267237c 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-time.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-time.json @@ -86,7 +86,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -157,7 +157,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -228,7 +228,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -299,7 +299,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -370,7 +370,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -441,7 +441,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json b/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json index 1a9177bfdfa..cba384076e1 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json @@ -87,7 +87,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -166,7 +166,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -245,7 +245,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -324,7 +324,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -403,7 +403,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -482,7 +482,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -562,7 +562,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -642,7 +642,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -721,7 +721,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-ng.json b/devenv/dev-dashboards/panel-graph/graph-ng.json index abf88a47626..94324b6b543 100644 --- a/devenv/dev-dashboards/panel-graph/graph-ng.json +++ b/devenv/dev-dashboards/panel-graph/graph-ng.json @@ -122,7 +122,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -246,7 +246,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -370,7 +370,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -494,7 +494,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -618,7 +618,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -742,7 +742,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -866,7 +866,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -990,7 +990,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1193,7 +1193,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1473,7 +1473,7 @@ "displayMode": "list", "placement": "right" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1608,7 +1608,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1746,7 +1746,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -1884,7 +1884,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2022,7 +2022,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2188,7 +2188,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2328,7 +2328,7 @@ "isVisible": false, "placement": "right" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2482,7 +2482,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2635,7 +2635,7 @@ "isVisible": true, "placement": "right" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2777,7 +2777,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -2885,7 +2885,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "multi" } }, @@ -2992,7 +2992,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "none" } }, @@ -3100,7 +3100,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "multi" } }, @@ -3224,7 +3224,7 @@ "isVisible": true, "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -3363,7 +3363,7 @@ "displayMode": "hidden", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-shared-tooltip-cursor-position.json b/devenv/dev-dashboards/panel-graph/graph-shared-tooltip-cursor-position.json index 85d1fa69a52..4fe72790d64 100644 --- a/devenv/dev-dashboards/panel-graph/graph-shared-tooltip-cursor-position.json +++ b/devenv/dev-dashboards/panel-graph/graph-shared-tooltip-cursor-position.json @@ -81,7 +81,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -174,7 +174,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -304,7 +304,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -410,7 +410,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -514,7 +514,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/devenv/dev-dashboards/panel-graph/graph-shared-tooltips.json b/devenv/dev-dashboards/panel-graph/graph-shared-tooltips.json index a311cc4caf7..2b9ff85d0af 100644 --- a/devenv/dev-dashboards/panel-graph/graph-shared-tooltips.json +++ b/devenv/dev-dashboards/panel-graph/graph-shared-tooltips.json @@ -93,7 +93,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -206,7 +206,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -352,7 +352,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -450,7 +450,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, @@ -562,7 +562,7 @@ "displayMode": "list", "placement": "bottom" }, - "tooltipOptions": { + "tooltip": { "mode": "single" } }, diff --git a/packages/grafana-ui/src/options/builder/index.ts b/packages/grafana-ui/src/options/builder/index.ts index 6b33ae5930d..f4ee91f24d6 100644 --- a/packages/grafana-ui/src/options/builder/index.ts +++ b/packages/grafana-ui/src/options/builder/index.ts @@ -1,3 +1,4 @@ export * from './axis'; export * from './hideSeries'; export * from './legend'; +export * from './tooltip'; diff --git a/packages/grafana-ui/src/options/builder/tooltip.tsx b/packages/grafana-ui/src/options/builder/tooltip.tsx new file mode 100644 index 00000000000..849a20bcdef --- /dev/null +++ b/packages/grafana-ui/src/options/builder/tooltip.tsx @@ -0,0 +1,19 @@ +import { OptionsWithTooltip } from '../models.gen'; +import { PanelOptionsEditorBuilder } from '@grafana/data'; + +export function addTooltipOptions(builder: PanelOptionsEditorBuilder) { + builder.addRadio({ + path: 'tooltip.mode', + name: 'Tooltip mode', + category: ['Legend'], + description: '', + defaultValue: 'single', + settings: { + options: [ + { value: 'single', label: 'Single' }, + { value: 'multi', label: 'All' }, + { value: 'none', label: 'Hidden' }, + ], + }, + }); +} diff --git a/packages/grafana-ui/src/options/models.gen.ts b/packages/grafana-ui/src/options/models.gen.ts index 6a378394f3c..00629aef64d 100644 --- a/packages/grafana-ui/src/options/models.gen.ts +++ b/packages/grafana-ui/src/options/models.gen.ts @@ -1,6 +1,6 @@ // TODO: this should be generated with cue -import { VizLegendOptions } from '../components'; +import { VizLegendOptions, VizTooltipOptions } from '../components'; /** * @alpha @@ -8,3 +8,7 @@ import { VizLegendOptions } from '../components'; export interface OptionsWithLegend { legend: VizLegendOptions; } + +export interface OptionsWithTooltip { + tooltip: VizTooltipOptions; +} diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap index a0cab9cfe22..3d36ea0fbc3 100644 --- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap +++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap @@ -92,7 +92,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -228,7 +228,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -334,7 +334,7 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -462,7 +462,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -598,7 +598,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -704,7 +704,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -814,7 +814,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], diff --git a/public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap b/public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap index 637c7b1f19e..7d476fda810 100644 --- a/public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap +++ b/public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap @@ -244,7 +244,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -505,7 +505,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -766,7 +766,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], @@ -1027,7 +1027,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = ` ], "refresh": undefined, "revision": undefined, - "schemaVersion": 29, + "schemaVersion": 30, "snapshot": undefined, "style": "dark", "tags": Array [], diff --git a/public/app/features/dashboard/state/DashboardMigrator.test.ts b/public/app/features/dashboard/state/DashboardMigrator.test.ts index 018b94083f0..e6454af8978 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.test.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.test.ts @@ -162,7 +162,7 @@ describe('DashboardModel', () => { }); it('dashboard schema version should be set to latest', () => { - expect(model.schemaVersion).toBe(29); + expect(model.schemaVersion).toBe(30); }); it('graph thresholds should be migrated', () => { @@ -1068,6 +1068,43 @@ describe('DashboardModel', () => { expect(model.templating.list[13].refresh).toBeUndefined(); }); }); + + describe('when migrating tooltipOptions to tooltip', () => { + it('should rename options.tooltipOptions to options.tooltip', () => { + const model = new DashboardModel({ + panels: [ + { + type: 'timeseries', + legend: true, + options: { + tooltipOptions: { mode: 'multi' }, + }, + }, + { + type: 'xychart', + legend: true, + options: { + tooltipOptions: { mode: 'single' }, + }, + }, + ], + }); + expect(model.panels[0].options).toMatchInlineSnapshot(` + Object { + "tooltip": Object { + "mode": "multi", + }, + } + `); + expect(model.panels[1].options).toMatchInlineSnapshot(` + Object { + "tooltip": Object { + "mode": "single", + }, + } + `); + }); + }); }); function createRow(options: any, panelDescriptions: any[]) { diff --git a/public/app/features/dashboard/state/DashboardMigrator.ts b/public/app/features/dashboard/state/DashboardMigrator.ts index ccc45478094..f0a71adb8a7 100644 --- a/public/app/features/dashboard/state/DashboardMigrator.ts +++ b/public/app/features/dashboard/state/DashboardMigrator.ts @@ -45,7 +45,7 @@ export class DashboardMigrator { let i, j, k, n; const oldVersion = this.dashboard.schemaVersion; const panelUpgrades = []; - this.dashboard.schemaVersion = 29; + this.dashboard.schemaVersion = 30; if (oldVersion === this.dashboard.schemaVersion) { return; @@ -610,6 +610,10 @@ export class DashboardMigrator { } } + if (oldVersion < 30) { + panelUpgrades.push(migrateTooltipOptions); + } + if (panelUpgrades.length === 0) { return; } @@ -885,3 +889,15 @@ function migrateSinglestat(panel: PanelModel) { panel.changePlugin(statPanelPlugin); } } + +function migrateTooltipOptions(panel: PanelModel) { + if (panel.type === 'timeseries' || panel.type === 'xychart') { + if (panel.options.tooltipOptions) { + panel.options = { + ...panel.options, + tooltip: panel.options.tooltipOptions, + }; + delete panel.options.tooltipOptions; + } + } +} diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index bf676206a56..0ed68b0730e 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -59,21 +59,9 @@ export const plugin = new PanelPlugin(PieChartPanel) { value: PieChartLabels.Value, label: 'Value' }, ], }, - }) - .addRadio({ - name: 'Tooltip mode', - path: 'tooltip.mode', - description: '', - defaultValue: 'single', - settings: { - options: [ - { value: 'single', label: 'Single' }, - { value: 'multi', label: 'All' }, - { value: 'none', label: 'Hidden' }, - ], - }, }); + commonOptionsBuilder.addTooltipOptions(builder); commonOptionsBuilder.addLegendOptions(builder, false); builder.addMultiSelect({ diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts index 9f5b077d42d..407c634704f 100644 --- a/public/app/plugins/panel/piechart/types.ts +++ b/public/app/plugins/panel/piechart/types.ts @@ -1,4 +1,4 @@ -import { SingleStatBaseOptions, VizLegendOptions, VizTooltipOptions } from '@grafana/ui'; +import { OptionsWithTooltip, SingleStatBaseOptions, VizLegendOptions } from '@grafana/ui'; /** * @beta @@ -32,9 +32,8 @@ export interface PieChartLegendOptions extends VizLegendOptions { values: PieChartLegendValues[]; } -export interface PieChartOptions extends SingleStatBaseOptions { +export interface PieChartOptions extends SingleStatBaseOptions, OptionsWithTooltip { pieType: PieChartType; displayLabels: PieChartLabels[]; legend: PieChartLegendOptions; - tooltip: VizTooltipOptions; } diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index d1eed5c0808..c59b50c546f 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx @@ -5,13 +5,12 @@ import React from 'react'; import { AnnotationsPlugin } from './plugins/AnnotationsPlugin'; import { ContextMenuPlugin } from './plugins/ContextMenuPlugin'; import { ExemplarsPlugin } from './plugins/ExemplarsPlugin'; -import { Options } from './types'; +import { TimeSeriesOptions } from './types'; -interface TimeSeriesPanelProps extends PanelProps {} +interface TimeSeriesPanelProps extends PanelProps {} export const TimeSeriesPanel: React.FC = ({ data, - id, timeRange, timeZone, width, @@ -51,7 +50,7 @@ export const TimeSeriesPanel: React.FC = ({ > | any, + panel: PanelModel> | any, prevPluginId: string, prevOptions: any ) => { @@ -47,7 +47,7 @@ export const graphPanelChangedHandler = ( return {}; }; -export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSource; options: Options } { +export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSource; options: TimeSeriesOptions } { const overrides: ConfigOverrideRule[] = angular.fieldConfig?.overrides ?? []; const yaxes = angular.yaxes ?? []; let y1 = getFieldConfigFromOldAxis(yaxes[0]); @@ -286,13 +286,13 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour y1.custom = omitBy(graph, isNil); y1.nullValueMode = angular.nullPointMode as NullValueMode; - const options: Options = { + const options: TimeSeriesOptions = { legend: { displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [], }, - tooltipOptions: { + tooltip: { mode: TooltipDisplayMode.Single, }, }; diff --git a/public/app/plugins/panel/timeseries/module.tsx b/public/app/plugins/panel/timeseries/module.tsx index bf8a753459b..fa08e647799 100644 --- a/public/app/plugins/panel/timeseries/module.tsx +++ b/public/app/plugins/panel/timeseries/module.tsx @@ -2,28 +2,14 @@ import { PanelPlugin } from '@grafana/data'; import { GraphFieldConfig, commonOptionsBuilder } from '@grafana/ui'; import { TimeSeriesPanel } from './TimeSeriesPanel'; import { graphPanelChangedHandler } from './migrations'; -import { Options } from './types'; +import { TimeSeriesOptions } from './types'; import { defaultGraphConfig, getGraphFieldConfig } from './config'; -export const plugin = new PanelPlugin(TimeSeriesPanel) +export const plugin = new PanelPlugin(TimeSeriesPanel) .setPanelChangeHandler(graphPanelChangedHandler) .useFieldConfig(getGraphFieldConfig(defaultGraphConfig)) .setPanelOptions((builder) => { - builder.addRadio({ - path: 'tooltipOptions.mode', - name: 'Tooltip mode', - category: ['Legend'], - description: '', - defaultValue: 'single', - settings: { - options: [ - { value: 'single', label: 'Single' }, - { value: 'multi', label: 'All' }, - { value: 'none', label: 'Hidden' }, - ], - }, - }); - + commonOptionsBuilder.addTooltipOptions(builder); commonOptionsBuilder.addLegendOptions(builder); }) .setDataSupport({ annotations: true, alertStates: true }); diff --git a/public/app/plugins/panel/timeseries/types.ts b/public/app/plugins/panel/timeseries/types.ts index 4e852f0ace5..50d051c0d96 100644 --- a/public/app/plugins/panel/timeseries/types.ts +++ b/public/app/plugins/panel/timeseries/types.ts @@ -1,4 +1,3 @@ -import { VizTooltipOptions, OptionsWithLegend } from '@grafana/ui'; -export interface Options extends OptionsWithLegend { - tooltipOptions: VizTooltipOptions; -} +import { OptionsWithLegend, OptionsWithTooltip } from '@grafana/ui'; + +export interface TimeSeriesOptions extends OptionsWithLegend, OptionsWithTooltip {} diff --git a/public/app/plugins/panel/xychart/XYChartPanel.tsx b/public/app/plugins/panel/xychart/XYChartPanel.tsx index 077c0f26d1b..560efac724d 100644 --- a/public/app/plugins/panel/xychart/XYChartPanel.tsx +++ b/public/app/plugins/panel/xychart/XYChartPanel.tsx @@ -59,7 +59,7 @@ export const XYChartPanel: React.FC = ({ ); diff --git a/public/app/plugins/panel/xychart/module.tsx b/public/app/plugins/panel/xychart/module.tsx index 714c0cbf42c..9003dde7d92 100644 --- a/public/app/plugins/panel/xychart/module.tsx +++ b/public/app/plugins/panel/xychart/module.tsx @@ -13,26 +13,12 @@ export const plugin = new PanelPlugin(XYChartPanel) }) ) .setPanelOptions((builder) => { - builder - .addCustomEditor({ - id: 'xyPlotConfig', - path: 'dims', - name: 'Data', - editor: XYDimsEditor, - }) - .addRadio({ - path: 'tooltipOptions.mode', - name: 'Tooltip mode', - description: '', - defaultValue: 'single', - settings: { - options: [ - { value: 'single', label: 'Single' }, - { value: 'multi', label: 'All' }, - { value: 'none', label: 'Hidden' }, - ], - }, - }); - + builder.addCustomEditor({ + id: 'xyPlotConfig', + path: 'dims', + name: 'Data', + editor: XYDimsEditor, + }); + commonOptionsBuilder.addTooltipOptions(builder); commonOptionsBuilder.addLegendOptions(builder); }); diff --git a/public/app/plugins/panel/xychart/types.ts b/public/app/plugins/panel/xychart/types.ts index a02f5d4e2f1..1819749714d 100644 --- a/public/app/plugins/panel/xychart/types.ts +++ b/public/app/plugins/panel/xychart/types.ts @@ -1,11 +1,10 @@ -import { VizTooltipOptions, OptionsWithLegend } from '@grafana/ui'; +import { OptionsWithTooltip, OptionsWithLegend } from '@grafana/ui'; export interface XYDimensionConfig { frame: number; x?: string; // name | first exclude?: string[]; // all other numbers except } -export interface Options extends OptionsWithLegend { +export interface Options extends OptionsWithLegend, OptionsWithTooltip { dims: XYDimensionConfig; - tooltipOptions: VizTooltipOptions; }