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

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>

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;

packages/grafana-schema/src/common/mudball.cue

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

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

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

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