public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VizTooltip: Add option to hide zeros when all series are shown (#97986)

Browse Source 
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
This commit is contained in:
Kristina
2025-01-10 17:23:50 -06:00
committed by GitHub
co-authored by Leon Sorokin Isabel Matwawana
parent d73bb12b99
commit 0029f92ac3
19 changed files with 101 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/panels-visualizations/configure-tooltips/index.md
+4
View File
@@ -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.
docs/sources/shared/visualizations/tooltip-options-1.md
+11 -11
View File
@@ -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.
docs/sources/shared/visualizations/tooltip-options-2.md
+8 -7
View File
@@ -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
packages/grafana-schema/src/common/common.gen.ts
+1
View File
@@ -679,6 +679,7 @@ export enum BarGaugeSizing {
* TODO docs
*/
export interface VizTooltipOptions {
hideZeros?: boolean;
maxHeight?: number;
maxWidth?: number;
mode: TooltipDisplayMode;
packages/grafana-schema/src/common/mudball.cue
+1
View File
@@ -264,6 +264,7 @@ VizTooltipOptions: {
sort: SortOrder
maxWidth?: number
maxHeight?: number
hideZeros?: bool
} @cuetsy(kind="interface")
Labels: {
packages/grafana-ui/src/components/VizTooltip/utils.test.ts
+33
View File
@@ -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', () => {
packages/grafana-ui/src/components/VizTooltip/utils.ts
+3 -2
View File
@@ -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;
}
packages/grafana-ui/src/options/builder/index.ts
+1 -1
View File
@@ -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';
packages/grafana-ui/src/options/builder/tooltip.tsx
+17
View File
@@ -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<T extends OptionsWithTooltip>(
builder: PanelOptionsEditorBuilder<T>,
singleOnly = false,
@@ -44,6 +53,14 @@ export function addTooltipOptions<T extends OptionsWithTooltip>(
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) {
public/app/plugins/panel/barchart/BarChartPanel.tsx
+1
View File
@@ -173,6 +173,7 @@ export const BarChartPanel = (props: PanelProps<Options>) => {
maxHeight={options.tooltip.maxHeight}
replaceVariables={replaceVariables}
dataLinks={dataLinks}
hideZeros={options.tooltip.hideZeros}
/>
);
}}
public/app/plugins/panel/barchart/module.tsx
+2 -1
View File
@@ -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<Options, FieldConfig>(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);
})
public/app/plugins/panel/candlestick/module.tsx
+1 -2
View File
@@ -72,7 +72,6 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(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<Options, GraphFieldConfig>(CandlestickPane
},
});
commonOptionsBuilder.addTooltipOptions(builder, false, true, opts);
commonOptionsBuilder.addTooltipOptions(builder, false, true);
commonOptionsBuilder.addLegendOptions(builder);
})
.setDataSupport({ annotations: true, alertStates: true })
public/app/plugins/panel/piechart/PieChart.tsx
+6 -2
View File
@@ -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 {
public/app/plugins/panel/piechart/module.tsx
+2 -1
View File
@@ -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<Options, FieldConfig>(PieChartPanel)
},
});
commonOptionsBuilder.addTooltipOptions(builder);
commonOptionsBuilder.addTooltipOptions(builder, false, false, optsWithHideZeros);
commonOptionsBuilder.addLegendOptions(builder, false);
builder.addMultiSelect({
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+1
View File
@@ -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}
public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
+4 -1
View File
@@ -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) => {
public/app/plugins/panel/timeseries/module.tsx
+2 -1
View File
@@ -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<Options, FieldConfig>(TimeSeriesPanel)
.setPanelChangeHandler(graphPanelChangedHandler)
.useFieldConfig(getGraphFieldConfig(defaultGraphConfig))
.setPanelOptions((builder) => {
commonOptionsBuilder.addTooltipOptions(builder, false, true);
commonOptionsBuilder.addTooltipOptions(builder, false, true, optsWithHideZeros);
commonOptionsBuilder.addLegendOptions(builder);
builder.addCustomEditor({
public/app/plugins/panel/trend/TrendPanel.tsx
+1
View File
@@ -134,6 +134,7 @@ export const TrendPanel = ({
maxHeight={options.tooltip.maxHeight}
replaceVariables={replaceVariables}
dataLinks={dataLinks}
hideZeros={options.tooltip.hideZeros}
/>
);
}}
public/app/plugins/panel/trend/module.tsx
+2 -1
View File
@@ -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<Options, FieldConfig>(TrendPanel)
},
});
commonOptionsBuilder.addTooltipOptions(builder, false, true);
commonOptionsBuilder.addTooltipOptions(builder, false, true, optsWithHideZeros);
commonOptionsBuilder.addLegendOptions(builder);
})
.setSuggestionsSupplier(new TrendSuggestionsSupplier());