@centreon/ui 26.11.11 → 26.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.11",
+  "version": "26.11.13",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Form/Inputs/ExclusiveCheckboxGroup.cypress.spec.tsx

@@ -22,10 +22,12 @@ const ValueDisplay = (): JSX.Element => {
 
 const initialize = ({
   notificationOptions = [],
-  disabled = false
+  disabled = false,
+  variant
 }: {
   disabled?: boolean;
   notificationOptions?: Array<string> | null;
+  variant?: 'checkboxes' | 'chips';
 } = {}): void => {
   cy.mount({
     Component: (
@@ -38,7 +40,8 @@ const initialize = ({
               direction: 'horizontal',
               exclusiveLabel: 'No notifications',
               exclusiveOption: 'None',
-              options
+              options,
+              variant
             },
             fieldName: 'notificationOptions',
             getDisabled: () => disabled,
@@ -172,3 +175,62 @@ describe('Exclusive checkbox group', () => {
     expectValue(['Down']);
   });
 });
+
+describe('Exclusive checkbox group, as chips', () => {
+  const chip = (option: string): Cypress.Chainable =>
+    cy.findByTestId(`notification-options-${option}`);
+
+  it('displays the options as chips and the exclusive one as the toggle', () => {
+    initialize({ variant: 'chips' });
+
+    ['Down', 'Unreachable', 'Recovery'].forEach((option) => {
+      chip(option).should('have.attr', 'aria-pressed', 'false');
+    });
+    chip('None').should('not.exist');
+    toggle().should('not.be.checked');
+    cy.findByRole('checkbox', { name: 'Down' }).should('not.exist');
+  });
+
+  it('toggles a chip on and off', () => {
+    initialize({ variant: 'chips' });
+
+    chip('Down').click();
+    chip('Recovery').click();
+
+    expectValue(['Down', 'Recovery']);
+    chip('Down').should('have.attr', 'aria-pressed', 'true');
+
+    chip('Down').click();
+
+    expectValue(['Recovery']);
+  });
+
+  it('clears and disables the chips while the toggle is on', () => {
+    initialize({ notificationOptions: ['Down', 'Recovery'], variant: 'chips' });
+
+    toggle().click();
+
+    expectValue(['None']);
+    chip('Down')
+      .should('have.attr', 'aria-pressed', 'false')
+      .and('have.attr', 'aria-disabled', 'true');
+  });
+
+  it('leaves the chips empty and usable once the toggle is off', () => {
+    initialize({ notificationOptions: ['None'], variant: 'chips' });
+
+    toggle().click();
+
+    expectValue([]);
+    chip('Unreachable').click();
+
+    expectValue(['Unreachable']);
+  });
+
+  it('disables the chips and the toggle when the input is disabled', () => {
+    initialize({ disabled: true, variant: 'chips' });
+
+    chip('Down').should('have.attr', 'aria-disabled', 'true');
+    toggle().should('be.disabled');
+  });
+});

package/src/Form/Inputs/ExclusiveCheckboxGroup.tsx

@@ -1,8 +1,9 @@
-import { Box } from '@mui/material';
+import { Box, Chip } from '@mui/material';
 
 import { type FormikValues, useFormikContext } from 'formik';
 import { equals, includes, path, reject, split } from 'ramda';
 import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useMemoComponent } from '../..';
 import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
@@ -19,6 +20,7 @@ const ExclusiveCheckboxGroup = ({
   getDisabled,
   dataTestId
 }: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
   const { values, setFieldValue } = useFormikContext<FormikValues>();
 
   const fieldNamePath = split('.', fieldName);
@@ -53,10 +55,63 @@ const ExclusiveCheckboxGroup = ({
     );
   };
 
+  const toggleChip = (option: string) => (): void => {
+    setFieldValue(
+      fieldName,
+      includes(option, value)
+        ? reject(equals(option), value)
+        : [...value, option]
+    );
+  };
+
   const baseTestId = dataTestId || fieldName;
 
+  const isChips = equals(exclusiveCheckboxGroup?.variant, 'chips');
+
+  const exclusiveToggle = (
+    <Switch
+      change={changeToggle}
+      dataTestId={`${baseTestId}-exclusive`}
+      fieldName={fieldName}
+      getDisabled={() => disabled}
+      label={exclusiveCheckboxGroup?.exclusiveLabel as string}
+      switchInput={{
+        getChecked: (fieldValue) =>
+          includes(exclusiveOption, (fieldValue as Array<string>) ?? [])
+      }}
+      type={InputType.Switch}
+    />
+  );
+
   return useMemoComponent({
-    Component: (
+    Component: isChips ? (
+      <div
+        className="flex flex-wrap items-center gap-x-6 gap-y-3"
+        data-testid={baseTestId}
+      >
+        {options.map((option) => {
+          const isSelected = !isExclusive && includes(option, value);
+
+          return (
+            <Chip
+              aria-pressed={isSelected}
+              // The theme sizes chips for status badges, 12px or 20px tall.
+              className="h-6 rounded-3xl text-sm [&_.MuiChip-label]:px-3 [&_.MuiChip-label]:leading-[21px]"
+              clickable
+              color={isSelected ? 'primary' : 'default'}
+              data-testid={`${baseTestId}-${option}`}
+              disabled={disabled || isExclusive}
+              key={option}
+              label={t(option)}
+              onClick={toggleChip(option)}
+              size="small"
+              variant={isSelected ? 'filled' : 'outlined'}
+            />
+          );
+        })}
+        {exclusiveToggle}
+      </div>
+    ) : (
       <Box sx={{ alignItems: 'center', columnGap: 2, display: 'flex' }}>
         <CheckboxGroupComponent
           dataTestId={baseTestId}
@@ -67,18 +122,7 @@ const ExclusiveCheckboxGroup = ({
           options={options}
           values={isExclusive ? [] : value}
         />
-        <Switch
-          change={changeToggle}
-          dataTestId={`${baseTestId}-exclusive`}
-          fieldName={fieldName}
-          getDisabled={() => disabled}
-          label={exclusiveCheckboxGroup?.exclusiveLabel as string}
-          switchInput={{
-            getChecked: (fieldValue) =>
-              includes(exclusiveOption, (fieldValue as Array<string>) ?? [])
-          }}
-          type={InputType.Switch}
-        />
+        {exclusiveToggle}
       </Box>
     ),
     memoProps: [
@@ -88,7 +132,8 @@ const ExclusiveCheckboxGroup = ({
       exclusiveOption,
       exclusiveCheckboxGroup?.exclusiveLabel,
       exclusiveCheckboxGroup?.direction,
-      exclusiveCheckboxGroup?.labelPlacement
+      exclusiveCheckboxGroup?.labelPlacement,
+      exclusiveCheckboxGroup?.variant
     ]
   });
 };

package/src/Form/Inputs/LoadingSkeleton.tsx

@@ -12,6 +12,10 @@ const getSkeleton = cond<Array<InputType>, JSX.Element>([
     equals(InputType.Radio) as (b: InputType) => boolean,
     always(<LoadingSkeleton height={104} />)
   ],
+  [
+    equals(InputType.SegmentedButtons) as (b: InputType) => boolean,
+    always(<LoadingSkeleton height={56} />)
+  ],
   [
     equals(InputType.Text) as (b: InputType) => boolean,
     always(<LoadingSkeleton height={52} />)

package/src/Form/Inputs/SegmentedButtons.cypress.spec.tsx

@@ -0,0 +1,101 @@
+import { Typography } from '@mui/material';
+
+import { useFormikContext } from 'formik';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from './models';
+
+const options = [
+  { label: 'Yes', value: 'true' },
+  { label: 'No', value: 'false' },
+  { label: 'Default', value: 'use_default' }
+];
+
+const ValueDisplay = (): JSX.Element => {
+  const { values } = useFormikContext<{ enabled: string }>();
+
+  return (
+    <Typography data-testid="value">
+      {JSON.stringify(values.enabled)}
+    </Typography>
+  );
+};
+
+const initialize = ({
+  enabled = 'use_default',
+  disabled = false
+}: {
+  disabled?: boolean;
+  enabled?: string;
+} = {}): void => {
+  cy.mount({
+    Component: (
+      <Form
+        initialValues={{ enabled }}
+        inputs={[
+          {
+            dataTestId: 'enabled',
+            fieldName: 'enabled',
+            getDisabled: () => disabled,
+            group: '',
+            label: 'Notification Enabled',
+            segmentedButtons: { options },
+            type: InputType.SegmentedButtons
+          },
+          {
+            custom: { Component: ValueDisplay },
+            fieldName: 'value',
+            group: '',
+            label: 'value',
+            type: InputType.Custom
+          }
+        ]}
+        submit={cy.stub()}
+        validationSchema={object()}
+      />
+    )
+  });
+};
+
+const button = (label: string): Cypress.Chainable =>
+  cy.findByRole('button', { name: label });
+
+describe('Segmented buttons', () => {
+  it('displays every option and marks the current one', () => {
+    initialize();
+
+    cy.contains('Notification Enabled').should('be.visible');
+    button('Yes').should('have.attr', 'aria-pressed', 'false');
+    button('No').should('have.attr', 'aria-pressed', 'false');
+    button('Default').should('have.attr', 'aria-pressed', 'true');
+  });
+
+  it('stores the value of the clicked option as given', () => {
+    initialize();
+
+    button('Yes').click();
+
+    // A string, not the boolean the radio would store.
+    cy.findByTestId('value').should('have.text', '"true"');
+    button('Yes').should('have.attr', 'aria-pressed', 'true');
+    button('Default').should('have.attr', 'aria-pressed', 'false');
+
+    button('No').click();
+
+    cy.findByTestId('value').should('have.text', '"false"');
+  });
+
+  it('starts on the initial value', () => {
+    initialize({ enabled: 'false' });
+
+    button('No').should('have.attr', 'aria-pressed', 'true');
+  });
+
+  it('does not change when disabled', () => {
+    initialize({ disabled: true });
+
+    button('Yes').should('be.disabled');
+    cy.findByTestId('value').should('have.text', '"use_default"');
+  });
+});

package/src/Form/Inputs/SegmentedButtons.tsx

@@ -0,0 +1,71 @@
+import { Button, ButtonGroup, FormGroup, FormLabel } from '@mui/material';
+
+import { type FormikValues, useFormikContext } from 'formik';
+import { equals, path, split } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import { useMemoComponent } from '../..';
+import type { InputPropsWithoutGroup } from './models';
+
+const SegmentedButtons = ({
+  dataTestId,
+  fieldName,
+  label,
+  segmentedButtons,
+  getDisabled,
+  additionalMemoProps
+}: InputPropsWithoutGroup): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { values, setFieldValue, setFieldTouched } =
+    useFormikContext<FormikValues>();
+
+  const value = path(split('.', fieldName), values);
+
+  const disabled = getDisabled?.(values) || false;
+
+  const select = (optionValue: string) => (): void => {
+    setFieldTouched(fieldName, true, false);
+    setFieldValue(fieldName, optionValue);
+  };
+
+  return useMemoComponent({
+    Component: (
+      <FormGroup>
+        <FormLabel>{t(label)}</FormLabel>
+        <ButtonGroup
+          aria-label={t(label)}
+          // As wide as its column, up to what three labels need.
+          className="max-w-[412px]"
+          color="primary"
+          data-testid={dataTestId}
+          disabled={disabled}
+          fullWidth
+          size="small"
+        >
+          {segmentedButtons?.options.map(
+            ({ label: optionLabel, value: optionValue }) => {
+              const isSelected = equals(value, optionValue);
+
+              return (
+                <Button
+                  aria-pressed={isSelected}
+                  className="h-7 px-3 py-0 font-medium text-sm leading-[21px] normal-case"
+                  data-testid={`${dataTestId}-${optionValue}`}
+                  key={optionValue}
+                  onClick={select(optionValue)}
+                  variant={isSelected ? 'contained' : 'outlined'}
+                >
+                  {t(optionLabel)}
+                </Button>
+              );
+            }
+          )}
+        </ButtonGroup>
+      </FormGroup>
+    ),
+    memoProps: [value, disabled, segmentedButtons, additionalMemoProps]
+  });
+};
+
+export default SegmentedButtons;

package/src/Form/Inputs/index.tsx

@@ -48,6 +48,7 @@ import {
   InputType
 } from './models';
 import RadioInput from './Radio';
+import SegmentedButtons from './SegmentedButtons';
 import { SubgroupDivider } from './SubGroupDivider';
 import SwitchInput from './Switch';
 import TextInput from './Text';
@@ -89,6 +90,10 @@ export const getInput = cond<
     equals(InputType.ExclusiveCheckboxGroup) as (b: InputType) => boolean,
     always(ExclusiveCheckboxGroup)
   ],
+  [
+    equals(InputType.SegmentedButtons) as (b: InputType) => boolean,
+    always(SegmentedButtons)
+  ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
   [equals(InputType.File) as (b: InputType) => boolean, always(File)],
   [equals(InputType.Text) as (b: InputType) => boolean, always(TextInput)],

package/src/Form/Inputs/models.ts

@@ -51,7 +51,8 @@ export enum InputType {
   List = 13,
   File = 14,
   Divider = 15,
-  ExclusiveCheckboxGroup = 16
+  ExclusiveCheckboxGroup = 16,
+  SegmentedButtons = 17
 }
 
 interface FieldsTableGetRequiredProps {
@@ -111,6 +112,8 @@ export interface InputProps {
     exclusiveOption: string;
     labelPlacement?: LabelPlacement;
     options: Array<string>;
+    // The options as chips instead of checkboxes; the exclusive one stays a switch.
+    variant?: 'checkboxes' | 'chips';
   };
   file?: {
     multiple?: boolean;
@@ -167,6 +170,12 @@ export interface InputProps {
     row?: boolean;
   };
   required?: boolean;
+  segmentedButtons?: {
+    options: Array<{
+      label: string;
+      value: string;
+    }>;
+  };
   switchInput?: {
     getChecked?: (value: unknown) => boolean;
   };

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -3,6 +3,7 @@ import { userAtom } from '@centreon/ui-context';
 import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
+import { equals, update } from 'ramda';
 
 import { labelAvg, labelMax, labelMin } from '../Chart/translatedLabels';
 import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
@@ -19,6 +20,29 @@ const defaultStart = new Date(
 
 const defaultEnd = new Date(Date.now()).toISOString();
 
+const hoveredStackedBarIndex = 6;
+
+const dataPingServiceStackedWithUndefinedValues = {
+  ...dataPingServiceStacked,
+  metrics: dataPingServiceStacked.metrics.map((metric) => {
+    if (equals(metric.metric_id, 3)) {
+      return {
+        ...metric,
+        data: update(hoveredStackedBarIndex, null, metric.data)
+      };
+    }
+
+    if (equals(metric.metric_id, 4)) {
+      return {
+        ...metric,
+        data: update(hoveredStackedBarIndex, 0, metric.data)
+      };
+    }
+
+    return metric;
+  })
+};
+
 const defaultArgs = {
   end: defaultEnd,
   height: 500,
@@ -229,6 +253,63 @@ describe('Bar chart', () => {
     });
   });
 
+  it('displays only metrics with a defined value in the tooltip when the mode is set to defined', () => {
+    initialize({
+      data: dataPingServiceStackedWithUndefinedValues,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'defined',
+        sortOrder: 'name'
+      }
+    });
+
+    checkWidth();
+    cy.contains('0 ms').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.get('body').realMouseMove(0, 0);
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+
+    cy.get('[data-metric="Centreon-Server: Round-Trip Average Time"]').should(
+      'be.visible'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Maximum Time"]').should(
+      'not.exist'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Minimum Time"]').should(
+      'not.exist'
+    );
+  });
+
+  it('displays metrics with an undefined value in the tooltip when the mode is set to all', () => {
+    initialize({
+      data: dataPingServiceStackedWithUndefinedValues,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'name'
+      }
+    });
+
+    checkWidth();
+    cy.contains('0 ms').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.get('body').realMouseMove(0, 0);
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+
+    cy.get('[data-metric="Centreon-Server: Round-Trip Maximum Time"]').should(
+      'be.visible'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Minimum Time"]').should(
+      'be.visible'
+    );
+  });
+
   it('does not display a tooltip when a bar is hovered and a props is set', () => {
     initialize({
       data: dataPingServiceStacked,

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -5,7 +5,6 @@ import {
   always,
   cond,
   equals,
-  filter,
   gt,
   has,
   isNil,
@@ -20,6 +19,7 @@ import { useLocaleDateTimeFormat } from '../../../utils';
 import type { Tooltip } from '../../Chart/models';
 import { formatMetricValueWithUnit } from '../../common/timeSeries';
 import type { TimeValue } from '../../common/timeSeries/models';
+import { isMetricDisplayedInTooltip } from '../../common/utils';
 import { tooltipDataAtom } from '../atoms';
 import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
 
@@ -49,14 +49,13 @@ const BarChartTooltip = ({
   const date = timeSeries[tooltipData.index].timeTick;
   const formattedDateTime = format({ date, formatString: 'L LTS' });
 
-  const isSingleMode = equals(mode, 'single');
-
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ metric }) => equals(metric.metric_id, tooltipData.highlightedMetric),
-        tooltipData.data
-      )
-    : tooltipData.data;
+  const filteredMetrics = tooltipData.data.filter(({ metric, value }) =>
+    isMetricDisplayedInTooltip({
+      isHighlighted: equals(metric.metric_id, tooltipData.highlightedMetric),
+      mode,
+      value
+    })
+  );
 
   const displayHighLightedMetric = gt(filteredMetrics.length, 1);
 

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -1,6 +1,7 @@
 import { userAtom } from '@centreon/ui-context';
 
 import { createStore, Provider } from 'jotai';
+import { always, equals } from 'ramda';
 import { useState } from 'react';
 
 import type { LineChartData } from '../common/models';
@@ -17,6 +18,15 @@ import { args as argumentsData } from './helpers/doc';
 import type { LineChartProps } from './models';
 import { labelAvg, labelMin } from './translatedLabels';
 
+const dataLastDayWithZeroConnTime = {
+  ...dataLastDay,
+  metrics: dataLastDay.metrics.map((metric) =>
+    equals(metric.metric, 'connTime')
+      ? { ...metric, data: metric.data.map(always(0)) }
+      : metric
+  )
+};
+
 interface Props
   extends Pick<
     LineChartProps,
@@ -281,6 +291,38 @@ describe('Line chart', () => {
 
       cy.makeSnapshot();
     });
+
+    it('displays only metrics with a defined value when the mode is set to defined', () => {
+      initialize({
+        data: dataLastDayWithZeroConnTime,
+        tooltip: { mode: 'defined', sortOrder: 'name' }
+      });
+
+      checkGraphWidth();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('not.exist');
+    });
+
+    it('displays metrics with a zero value when the mode is set to all', () => {
+      initialize({
+        data: dataLastDayWithZeroConnTime,
+        tooltip: { mode: 'all', sortOrder: 'name' }
+      });
+
+      checkGraphWidth();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('be.visible');
+    });
   });
 
   it('displays the curves with different shades when curves have same color', () => {

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -48,7 +48,7 @@ const GraphValueTooltip = ({
         equals('hidden', tooltip?.mode) ? null : (
           <GraphValueTooltipContent
             base={baseAxis}
-            isSingleMode={equals('single', tooltip?.mode)}
+            mode={tooltip?.mode}
             // @ts-expect-error - suppressing pre-existing type mismatch
             sortOrder={tooltip?.sortOrder}
           />

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx

@@ -9,20 +9,21 @@ import { mousePositionAtom } from '../interactionWithGraphAtoms';
 import { useGraphValueTooltip } from './useGraphValueTooltip';
 import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
 
-interface Props extends Pick<Tooltip, 'sortOrder'> {
+interface Props
+  extends Pick<Tooltip, 'sortOrder'>,
+    Partial<Pick<Tooltip, 'mode'>> {
   base: number;
-  isSingleMode: boolean;
 }
 
 const GraphValueTooltipContent = ({
   base,
-  isSingleMode,
+  mode,
   sortOrder
 }: Props): JSX.Element | null => {
   const { classes } = useGraphValueTooltipStyles();
   const mousePosition = useAtomValue(mousePositionAtom);
 
-  const graphValue = useGraphValueTooltip({ isSingleMode, sortOrder });
+  const graphValue = useGraphValueTooltip({ mode, sortOrder });
 
   if (isNil(graphValue) || isNil(mousePosition)) {
     return null;

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,17 +1,8 @@
 import { useAtomValue } from 'jotai';
-import {
-  always,
-  cond,
-  equals,
-  filter,
-  isNil,
-  prop,
-  reverse,
-  sortBy,
-  T
-} from 'ramda';
+import { always, cond, equals, isNil, prop, reverse, sortBy, T } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '../../../../utils';
+import { isMetricDisplayedInTooltip } from '../../../common/utils';
 import type { GraphTooltipData, Tooltip } from '../../models';
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 
@@ -19,12 +10,12 @@ interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
   dateTime: string;
 }
 
-interface UseGraphValueTooltipProps extends Pick<Tooltip, 'sortOrder'> {
-  isSingleMode: boolean;
-}
+interface UseGraphValueTooltipProps
+  extends Pick<Tooltip, 'sortOrder'>,
+    Partial<Pick<Tooltip, 'mode'>> {}
 
 export const useGraphValueTooltip = ({
-  isSingleMode,
+  mode,
   sortOrder
 }: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
   const { format } = useLocaleDateTimeFormat();
@@ -34,12 +25,13 @@ export const useGraphValueTooltip = ({
     return null;
   }
 
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ id }) => equals(id, graphTooltipData.highlightedMetricId),
-        graphTooltipData.metrics
-      )
-    : graphTooltipData.metrics;
+  const filteredMetrics = graphTooltipData.metrics.filter(({ id, value }) =>
+    isMetricDisplayedInTooltip({
+      isHighlighted: equals(id, graphTooltipData.highlightedMetricId),
+      mode,
+      value
+    })
+  );
 
   const sortedMetrics = cond([
     [equals('name'), always(sortBy(prop('name'), filteredMetrics))],

package/src/Graph/Chart/models.ts

@@ -74,7 +74,7 @@ export interface ThresholdTooltip {
   thresholdLabel?: string;
 }
 export interface Tooltip {
-  mode: 'all' | 'single' | 'hidden';
+  mode: 'all' | 'single' | 'hidden' | 'defined';
   renderComponent?: (args: TooltipData) => ReactNode;
   sortOrder: 'name' | 'ascending' | 'descending';
 }

package/src/Graph/common/utils.ts

@@ -22,7 +22,7 @@ import {
 } from 'ramda';
 
 import type { BarStyle } from '../BarChart/models';
-import type { LineStyle } from '../Chart/models';
+import type { LineStyle, Tooltip } from '../Chart/models';
 import type { Threshold, Thresholds } from './models';
 import { formatMetricValueWithUnit } from './timeSeries';
 import type { Line, TimeValue } from './timeSeries/models';
@@ -278,3 +278,25 @@ export const computPixelsToShiftMouse = (
 
   return Math.round(8 / hoursDiffInGraph);
 };
+
+interface IsMetricDisplayedInTooltipProps
+  extends Partial<Pick<Tooltip, 'mode'>> {
+  isHighlighted: boolean;
+  value?: number | null;
+}
+
+export const isMetricDisplayedInTooltip = ({
+  mode,
+  isHighlighted,
+  value
+}: IsMetricDisplayedInTooltipProps): boolean => {
+  if (equals(mode, 'single')) {
+    return isHighlighted;
+  }
+
+  if (equals(mode, 'defined')) {
+    return Boolean(value);
+  }
+
+  return true;
+};