diff --git a/docs/sources/panels-visualizations/configure-tooltips/index.md b/docs/sources/panels-visualizations/configure-tooltips/index.md index 4c7ee9e11e6..1ab9584df57 100644 --- a/docs/sources/panels-visualizations/configure-tooltips/index.md +++ b/docs/sources/panels-visualizations/configure-tooltips/index.md @@ -128,6 +128,10 @@ When you set the **Tooltip mode** to **All**, the **Values sort order** option i - **Ascending** - Values in the tooltip are listed from smallest to largest. - **Descending** - Values in the tooltip are listed from largest to smallest. +### Hide zeros + +When you set the **Tooltip mode** to **All**, the **Hide zeros** option is displayed. This option controls whether or not series with `0` values are shown in the list in the tooltip. + ### Hover proximity Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. diff --git a/docs/sources/shared/visualizations/tooltip-options-1.md b/docs/sources/shared/visualizations/tooltip-options-1.md index 14f05508866..24d556dd127 100644 --- a/docs/sources/shared/visualizations/tooltip-options-1.md +++ b/docs/sources/shared/visualizations/tooltip-options-1.md @@ -8,13 +8,21 @@ comments: | Tooltip options control the information overlay that appears when you hover over data points in the visualization. +| Option | Description | +| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. | +| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. | +| Hide zeros | When you set the **Tooltip mode** to **All**, the **Hide zeros** option is displayed. This option controls whether or not series with `0` values are shown in the list in the tooltip. | +| Max width | Set the maximum width of the tooltip box. | +| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. | + ### Tooltip mode When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. -- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization. -- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. -- **Hidden -** Do not display the tooltip when you interact with the visualization. +- **Single** - The hover tooltip shows only a single series, the one that you are hovering over on the visualization. +- **All** - The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip. +- **Hidden** - Do not display the tooltip when you interact with the visualization. Use an override to hide individual series from the tooltip. @@ -25,11 +33,3 @@ When you set the **Tooltip mode** to **All**, the **Values sort order** option i - **None** - Grafana automatically sorts the values displayed in a tooltip. - **Ascending** - Values in the tooltip are listed from smallest to largest. - **Descending** - Values in the tooltip are listed from largest to smallest. - -### Max width - -Set the maximum width of the tooltip box. - -### Max height - -Set the maximum height of the tooltip box. The default is 600 pixels. diff --git a/docs/sources/shared/visualizations/tooltip-options-2.md b/docs/sources/shared/visualizations/tooltip-options-2.md index b32637f7ea7..a3bedc879ea 100644 --- a/docs/sources/shared/visualizations/tooltip-options-2.md +++ b/docs/sources/shared/visualizations/tooltip-options-2.md @@ -8,13 +8,14 @@ comments: | Tooltip options control the information overlay that appears when you hover over data points in the visualization. -| Option | Description | -| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. | -| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. | -| [Hover proximity](#hover-proximity) | Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. | -| Max width | Set the maximum width of the tooltip box. | -| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. | +| Option | Description | +| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Tooltip mode](#tooltip-mode) | When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave. | +| [Values sort order](#values-sort-order) | This option controls the order in which values are listed in a tooltip. | +| Hide zeros | When you set the **Tooltip mode** to **All**, the **Hide zeros** option is displayed. This option controls whether or not series with `0` values are shown in the list in the tooltip. | +| [Hover proximity](#hover-proximity) | Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display. | +| Max width | Set the maximum width of the tooltip box. | +| Max height | Set the maximum height of the tooltip box. The default is 600 pixels. | ### Tooltip mode diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts index 580ff15f40d..3ece6c59d7a 100644 --- a/packages/grafana-schema/src/common/common.gen.ts +++ b/packages/grafana-schema/src/common/common.gen.ts @@ -679,6 +679,7 @@ export enum BarGaugeSizing { * TODO docs */ export interface VizTooltipOptions { + hideZeros?: boolean; maxHeight?: number; maxWidth?: number; mode: TooltipDisplayMode; diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue index d131935c497..ed58696267e 100644 --- a/packages/grafana-schema/src/common/mudball.cue +++ b/packages/grafana-schema/src/common/mudball.cue @@ -264,6 +264,7 @@ VizTooltipOptions: { sort: SortOrder maxWidth?: number maxHeight?: number + hideZeros?: bool } @cuetsy(kind="interface") Labels: { diff --git a/packages/grafana-ui/src/components/VizTooltip/utils.test.ts b/packages/grafana-ui/src/components/VizTooltip/utils.test.ts index 5c4189012bb..99b72a8d926 100644 --- a/packages/grafana-ui/src/components/VizTooltip/utils.test.ts +++ b/packages/grafana-ui/src/components/VizTooltip/utils.test.ts @@ -247,6 +247,39 @@ describe('utils', () => { expect(rows.length).toBe(1); expect(rows[0].value).toBe('70'); }); + + it('filters out values when specified', () => { + const aField = { ...fields[1], values: [0, 3, 5] }; + const bField = { ...fields[2], values: [5, 0, 7] }; + + let rows = getContentItems( + [fields[0], aField, bField], + xField, + dataIdxs, + null, + TooltipDisplayMode.Multi, + SortOrder.Ascending, + undefined, + true + ); + + expect(rows.length).toBe(1); + expect(rows[0].value).toBe('3'); + + rows = getContentItems( + [fields[0], aField, bField], + xField, + [0, 0, 0], + null, + TooltipDisplayMode.Multi, + SortOrder.Ascending, + undefined, + true + ); + + expect(rows.length).toBe(1); + expect(rows[0].value).toBe('5'); + }); }); describe('it tests getContentItems with string values', () => { diff --git a/packages/grafana-ui/src/components/VizTooltip/utils.ts b/packages/grafana-ui/src/components/VizTooltip/utils.ts index 73910867d9b..e192340974f 100644 --- a/packages/grafana-ui/src/components/VizTooltip/utils.ts +++ b/packages/grafana-ui/src/components/VizTooltip/utils.ts @@ -79,7 +79,8 @@ export const getContentItems = ( seriesIdx: number | null | undefined, mode: TooltipDisplayMode, sortOrder: SortOrder, - fieldFilter = (field: Field) => true + fieldFilter = (field: Field) => true, + hideZeros = false ): VizTooltipItem[] => { let rows: VizTooltipItem[] = []; @@ -116,7 +117,7 @@ export const getContentItems = ( const v = fields[i].values[dataIdx]; - if (v == null && field.config.noValue == null) { + if ((v == null && field.config.noValue == null) || (hideZeros && v === 0)) { continue; } diff --git a/packages/grafana-ui/src/options/builder/index.ts b/packages/grafana-ui/src/options/builder/index.ts index e8f41207149..42dd18e4850 100644 --- a/packages/grafana-ui/src/options/builder/index.ts +++ b/packages/grafana-ui/src/options/builder/index.ts @@ -1,6 +1,6 @@ export * from './axis'; export * from './hideSeries'; export * from './legend'; -export * from './tooltip'; +export { addTooltipOptions } from './tooltip'; export * from './text'; export * from './stacking'; diff --git a/packages/grafana-ui/src/options/builder/tooltip.tsx b/packages/grafana-ui/src/options/builder/tooltip.tsx index 7c9a22d51f3..3679ac18df8 100644 --- a/packages/grafana-ui/src/options/builder/tooltip.tsx +++ b/packages/grafana-ui/src/options/builder/tooltip.tsx @@ -1,6 +1,15 @@ import { PanelOptionsEditorBuilder } from '@grafana/data'; import { OptionsWithTooltip, TooltipDisplayMode, SortOrder } from '@grafana/schema'; +/** @internal */ +export const optsWithHideZeros: OptionsWithTooltip = { + tooltip: { + mode: TooltipDisplayMode.Single, + sort: SortOrder.None, + hideZeros: false, + }, +}; + export function addTooltipOptions( builder: PanelOptionsEditorBuilder, singleOnly = false, @@ -44,6 +53,14 @@ export function addTooltipOptions( settings: { options: sortOptions, }, + }) + .addBooleanSwitch({ + path: 'tooltip.hideZeros', + name: 'Hide zeros', + category, + defaultValue: false, + showIf: (options: T) => + defaultOptions?.tooltip?.hideZeros !== undefined && options.tooltip?.mode === TooltipDisplayMode.Multi, }); if (setProximity) { diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index 5b03f0fbc50..dba432c57d0 100644 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -173,6 +173,7 @@ export const BarChartPanel = (props: PanelProps) => { maxHeight={options.tooltip.maxHeight} replaceVariables={replaceVariables} dataLinks={dataLinks} + hideZeros={options.tooltip.hideZeros} /> ); }} diff --git a/public/app/plugins/panel/barchart/module.tsx b/public/app/plugins/panel/barchart/module.tsx index 005ba87124d..35d1f095828 100644 --- a/public/app/plugins/panel/barchart/module.tsx +++ b/public/app/plugins/panel/barchart/module.tsx @@ -9,6 +9,7 @@ import { } from '@grafana/data'; import { GraphTransform, GraphThresholdsStyleMode, StackingMode, VisibilityMode } from '@grafana/schema'; import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui'; +import { optsWithHideZeros } from '@grafana/ui/src/options/builder/tooltip'; import { ThresholdsStyleEditor } from '../timeseries/ThresholdsStyleEditor'; @@ -225,7 +226,7 @@ export const plugin = new PanelPlugin(BarChartPanel) description: 'Use the color value for a sibling field to color each bar value.', }); - commonOptionsBuilder.addTooltipOptions(builder); + commonOptionsBuilder.addTooltipOptions(builder, false, false, optsWithHideZeros); commonOptionsBuilder.addLegendOptions(builder); commonOptionsBuilder.addTextSizeOptions(builder, false); }) diff --git a/public/app/plugins/panel/candlestick/module.tsx b/public/app/plugins/panel/candlestick/module.tsx index 793b60fda2e..596d288199b 100644 --- a/public/app/plugins/panel/candlestick/module.tsx +++ b/public/app/plugins/panel/candlestick/module.tsx @@ -72,7 +72,6 @@ export const plugin = new PanelPlugin(CandlestickPane .setPanelOptions((builder, context) => { const opts = context.options ?? defaultOptions; const info = prepareCandlestickFields(context.data, opts, config.theme2); - builder .addRadio({ path: 'mode', @@ -137,7 +136,7 @@ export const plugin = new PanelPlugin(CandlestickPane }, }); - commonOptionsBuilder.addTooltipOptions(builder, false, true, opts); + commonOptionsBuilder.addTooltipOptions(builder, false, true); commonOptionsBuilder.addLegendOptions(builder); }) .setDataSupport({ annotations: true, alertStates: true }) diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx index 75c10a7158e..8f8707a5ffa 100644 --- a/public/app/plugins/panel/piechart/PieChart.tsx +++ b/public/app/plugins/panel/piechart/PieChart.tsx @@ -321,8 +321,12 @@ function getTooltipData( if (tooltipOptions.mode === 'multi') { return pie.arcs .filter((pa) => { - const field = pa.data.field; - return field && !field.custom?.hideFrom?.tooltip && !field.custom?.hideFrom?.viz; + if (tooltipOptions.hideZeros && pa.value === 0) { + return false; + } + + const customConfig = pa.data.field.custom; + return !customConfig?.hideFrom?.tooltip && !customConfig?.hideFrom?.viz; }) .map((pieArc) => { return { diff --git a/public/app/plugins/panel/piechart/module.tsx b/public/app/plugins/panel/piechart/module.tsx index e90a8cdc670..efbdad05270 100644 --- a/public/app/plugins/panel/piechart/module.tsx +++ b/public/app/plugins/panel/piechart/module.tsx @@ -1,5 +1,6 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data'; import { commonOptionsBuilder } from '@grafana/ui'; +import { optsWithHideZeros } from '@grafana/ui/src/options/builder/tooltip'; import { addStandardDataReduceOptions } from '../stat/common'; @@ -56,7 +57,7 @@ export const plugin = new PanelPlugin(PieChartPanel) }, }); - commonOptionsBuilder.addTooltipOptions(builder); + commonOptionsBuilder.addTooltipOptions(builder, false, false, optsWithHideZeros); commonOptionsBuilder.addLegendOptions(builder, false); builder.addMultiSelect({ diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx index 9cd2ccf97a3..c83af4b2703 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx @@ -131,6 +131,7 @@ export const TimeSeriesPanel = ({ seriesIdx={seriesIdx} mode={viaSync ? TooltipDisplayMode.Multi : options.tooltip.mode} sortOrder={options.tooltip.sort} + hideZeros={options.tooltip.hideZeros} isPinned={isPinned} annotate={enableAnnotationCreation ? annotate : undefined} maxHeight={options.tooltip.maxHeight} diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx index 43efd330f17..e96f391a200 100644 --- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx +++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx @@ -38,6 +38,7 @@ export interface TimeSeriesTooltipProps { replaceVariables?: InterpolateFunction; dataLinks: LinkModel[]; + hideZeros?: boolean; } export const TimeSeriesTooltip = ({ @@ -52,6 +53,7 @@ export const TimeSeriesTooltip = ({ maxHeight, replaceVariables, dataLinks, + hideZeros, }: TimeSeriesTooltipProps) => { const xField = series.fields[0]; const xVal = formattedValueToString(xField.display!(xField.values[dataIdxs[0]!])); @@ -63,7 +65,8 @@ export const TimeSeriesTooltip = ({ seriesIdx, mode, sortOrder, - (field) => field.type === FieldType.number || field.type === FieldType.enum + (field) => field.type === FieldType.number || field.type === FieldType.enum, + hideZeros ); _rest?.forEach((field) => { diff --git a/public/app/plugins/panel/timeseries/module.tsx b/public/app/plugins/panel/timeseries/module.tsx index 4368a297151..5f4cdbac50d 100644 --- a/public/app/plugins/panel/timeseries/module.tsx +++ b/public/app/plugins/panel/timeseries/module.tsx @@ -1,5 +1,6 @@ import { PanelPlugin } from '@grafana/data'; import { commonOptionsBuilder } from '@grafana/ui'; +import { optsWithHideZeros } from '@grafana/ui/src/options/builder/tooltip'; import { TimeSeriesPanel } from './TimeSeriesPanel'; import { TimezonesEditor } from './TimezonesEditor'; @@ -12,7 +13,7 @@ export const plugin = new PanelPlugin(TimeSeriesPanel) .setPanelChangeHandler(graphPanelChangedHandler) .useFieldConfig(getGraphFieldConfig(defaultGraphConfig)) .setPanelOptions((builder) => { - commonOptionsBuilder.addTooltipOptions(builder, false, true); + commonOptionsBuilder.addTooltipOptions(builder, false, true, optsWithHideZeros); commonOptionsBuilder.addLegendOptions(builder); builder.addCustomEditor({ diff --git a/public/app/plugins/panel/trend/TrendPanel.tsx b/public/app/plugins/panel/trend/TrendPanel.tsx index c9175dfb246..67dcf81bb4e 100644 --- a/public/app/plugins/panel/trend/TrendPanel.tsx +++ b/public/app/plugins/panel/trend/TrendPanel.tsx @@ -134,6 +134,7 @@ export const TrendPanel = ({ maxHeight={options.tooltip.maxHeight} replaceVariables={replaceVariables} dataLinks={dataLinks} + hideZeros={options.tooltip.hideZeros} /> ); }} diff --git a/public/app/plugins/panel/trend/module.tsx b/public/app/plugins/panel/trend/module.tsx index e539ca6e3ee..5877167e46c 100644 --- a/public/app/plugins/panel/trend/module.tsx +++ b/public/app/plugins/panel/trend/module.tsx @@ -1,5 +1,6 @@ import { Field, FieldType, PanelPlugin } from '@grafana/data'; import { commonOptionsBuilder } from '@grafana/ui'; +import { optsWithHideZeros } from '@grafana/ui/src/options/builder/tooltip'; import { defaultGraphConfig, getGraphFieldConfig } from '../timeseries/config'; @@ -24,7 +25,7 @@ export const plugin = new PanelPlugin(TrendPanel) }, }); - commonOptionsBuilder.addTooltipOptions(builder, false, true); + commonOptionsBuilder.addTooltipOptions(builder, false, true, optsWithHideZeros); commonOptionsBuilder.addLegendOptions(builder); }) .setSuggestionsSupplier(new TrendSuggestionsSupplier());