root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

Unify tooltip options across visualizations (#33892) 

* Unify tooltip options across visualizations

* Update tests

* use addTooltipOptions in piechart

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>
This commit is contained in:
Dominik Prokop 2021-05-11 15:46:12 +02:00 committed by GitHub
parent 752a0f3a65
commit deeef321d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 244 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
devenv/dev-dashboards/datasource-testdata/new_features_in_v74.json
View File

@ -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"
}
},

12
devenv/dev-dashboards/panel-graph/graph-ng-gradient-area.json
View File

@ -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"
}
},

18
devenv/dev-dashboards/panel-graph/graph-ng-hue-gradients.json
View File

@ -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"
}
},

18
devenv/dev-dashboards/panel-graph/graph-ng-nulls.json
View File

@ -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"
}
},

36
devenv/dev-dashboards/panel-graph/graph-ng-soft-limits.json
View File

@ -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"
}
},

16
devenv/dev-dashboards/panel-graph/graph-ng-stacking.json
View File

@ -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"
}
},

14
devenv/dev-dashboards/panel-graph/graph-ng-thresholds.json
View File

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

12
devenv/dev-dashboards/panel-graph/graph-ng-time.json
View File

@ -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"
}
},

18
devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json
View File

@ -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"
}
},

48
devenv/dev-dashboards/panel-graph/graph-ng.json
View File

@ -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"
}
},

10
devenv/dev-dashboards/panel-graph/graph-shared-tooltip-cursor-position.json
View File

@ -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"
}
},

10
devenv/dev-dashboards/panel-graph/graph-shared-tooltips.json
View File

@ -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"
}
},

1
packages/grafana-ui/src/options/builder/index.ts
View File

@ -1,3 +1,4 @@
export * from './axis';
export * from './hideSeries';
export * from './legend';
export * from './tooltip';

19
packages/grafana-ui/src/options/builder/tooltip.tsx Normal file
View File

@ -0,0 +1,19 @@
import { OptionsWithTooltip } from '../models.gen';
import { PanelOptionsEditorBuilder } from '@grafana/data';
export function addTooltipOptions<T extends OptionsWithTooltip>(builder: PanelOptionsEditorBuilder<T>) {
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' },
],
},
});
}

6
packages/grafana-ui/src/options/models.gen.ts
View File

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

14
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
View File

@ -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 [],

8
public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap
View File

@ -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 [],

39
public/app/features/dashboard/state/DashboardMigrator.test.ts
View File

@ -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[]) {

18
public/app/features/dashboard/state/DashboardMigrator.ts
View File

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

14
public/app/plugins/panel/piechart/module.tsx
View File

@ -59,21 +59,9 @@ export const plugin = new PanelPlugin<PieChartOptions>(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({

5
public/app/plugins/panel/piechart/types.ts
View File

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

7
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

@ -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<Options> {}
interface TimeSeriesPanelProps extends PanelProps<TimeSeriesOptions> {}
export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
data,
id,
timeRange,
timeZone,
width,
@ -51,7 +50,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
<TooltipPlugin
data={alignedDataFrame}
config={config}
mode={sync === DashboardCursorSync.Tooltip ? TooltipDisplayMode.Multi : options.tooltipOptions.mode}
mode={sync === DashboardCursorSync.Tooltip ? TooltipDisplayMode.Multi : options.tooltip.mode}
timeZone={timeZone}
/>
<ContextMenuPlugin

14
public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap
View File

@ -46,7 +46,7 @@ Object {
"displayMode": "table",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -72,7 +72,7 @@ Object {
"displayMode": "list",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -159,7 +159,7 @@ Object {
"displayMode": "table",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -216,7 +216,7 @@ Object {
"displayMode": "table",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -255,7 +255,7 @@ Object {
"displayMode": "table",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -302,7 +302,7 @@ Object {
"displayMode": "list",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},
@ -382,7 +382,7 @@ Object {
"displayMode": "list",
"placement": "bottom",
},
"tooltipOptions": Object {
"tooltip": Object {
"mode": "single",
},
},

10
public/app/plugins/panel/timeseries/migrations.ts
View File

@ -25,7 +25,7 @@ import {
StackingMode,
TooltipDisplayMode,
} from '@grafana/ui';
import { Options } from './types';
import { TimeSeriesOptions } from './types';
import { omitBy, isNil, isNumber, isString } from 'lodash';
import { defaultGraphConfig } from './config';
@ -33,7 +33,7 @@ import { defaultGraphConfig } from './config';
* This is called when the panel changes from another panel
*/
export const graphPanelChangedHandler = (
panel: PanelModel<Partial<Options>> | any,
panel: PanelModel<Partial<TimeSeriesOptions>> | 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,
},
};

20
public/app/plugins/panel/timeseries/module.tsx
View File

@ -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<Options, GraphFieldConfig>(TimeSeriesPanel)
export const plugin = new PanelPlugin<TimeSeriesOptions, GraphFieldConfig>(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 });

7
public/app/plugins/panel/timeseries/types.ts
View File

@ -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 {}

2
public/app/plugins/panel/xychart/XYChartPanel.tsx
View File

@ -59,7 +59,7 @@ export const XYChartPanel: React.FC<XYChartPanelProps> = ({
<TooltipPlugin
config={config}
data={alignedDataFrame}
mode={options.tooltipOptions.mode as any}
mode={options.tooltip.mode as any}
timeZone={timeZone}
/>
);

28
public/app/plugins/panel/xychart/module.tsx
View File

@ -13,26 +13,12 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(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);
});

5
public/app/plugins/panel/xychart/types.ts
View File

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