@centreon/ui 25.11.3 → 25.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.11.3",
+  "version": "25.11.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -75,7 +75,7 @@
     "@storybook/test": "^8.6.3",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.3",
-    "@tailwindcss/cli": "^4.1.7",
+    "@tailwindcss/cli": "^4.1.17",
     "@tailwindcss/postcss": "^4.1.7",
     "@tailwindcss/vite": "^4.1.7",
     "@testing-library/cypress": "^10.0.3",
@@ -106,7 +106,7 @@
     "storybook-dark-mode": "^4.0.2",
     "storybook-react-rsbuild": "^1.0.1",
     "style-dictionary": "^4.3.3",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
     "vite": "^6.3.5",
@@ -142,6 +142,7 @@
     "@visx/visx": "3.12.0",
     "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
+    "chromatic": "^13.3.3",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.13",
     "highlight.js": "^11.11.1",

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

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

@@ -11,6 +11,7 @@ import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.j
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 import dataPingServiceLinesStackKeys from '../mockedData/pingServiceWithStackedKeys.json';
 
+import { labelAvg, labelMax, labelMin } from '../Chart/translatedLabels';
 import BarChart, { BarChartProps } from './BarChart';
 
 const defaultStart = new Date(
@@ -331,4 +332,24 @@ describe('Bar chart', () => {
 
     cy.makeSnapshot();
   });
+
+  it('does not displays corresponding calculations when props are set', () => {
+    initialize({
+      data: dataLastWeek,
+      orientation: 'horizontal',
+      legend: {
+        placement: 'bottom',
+        mode: 'grid',
+        showCalculations: {
+          min: true,
+          max: false,
+          avg: false
+        }
+      }
+    });
+
+    cy.contains(labelMin).should('be.visible');
+    cy.contains(labelMax).should('not.exist');
+    cy.contains(labelAvg).should('not.exist');
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import dayjs from 'dayjs';
+import '../../ThemeProvider/tailwindcss.css';
 
 import { LineChartData } from '../common/models';
 import dataPingService from '../mockedData/pingService.json';
@@ -45,6 +46,11 @@ export const withCenteredZero: Story = {
     ...defaultArgs,
     axis: {
       isCenteredZero: true
+    },
+    legend: {
+      showCalculations: { avg: true, max: false, min: false },
+      mode: 'grid',
+      placement: 'bottom'
     }
   },
   render: Template
@@ -310,3 +316,15 @@ export const stackKey: Story = {
   },
   render: Template
 };
+
+export const withControlledCalculations: Story = {
+  args: {
+    ...defaultArgs,
+    legend: {
+      showCalculations: { avg: true, max: false, min: false },
+      mode: 'grid',
+      placement: 'bottom'
+    }
+  },
+  render: Template
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -61,7 +61,16 @@ const BarChart = ({
   height = 500,
   tooltip,
   axis,
-  legend,
+  legend = {
+    display: true,
+    mode: 'grid',
+    placement: 'bottom',
+    showCalculations: {
+      min: true,
+      max: true,
+      avg: true
+    }
+  },
   loading,
   limitLegend,
   thresholdUnit,

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -235,7 +235,8 @@ const ResponsiveBarChart = ({
         mode: legend?.mode,
         placement: legend?.placement,
         renderExtraComponent: legend?.renderExtraComponent,
-        secondaryClick: legend?.secondaryClick
+        secondaryClick: legend?.secondaryClick,
+        showCalculations: legend?.showCalculations
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}
@@ -243,6 +244,7 @@ const ResponsiveBarChart = ({
       setLines={setLinesGraph}
       title={title}
       titleRef={titleRef}
+      graphHeight={graphHeight}
     >
       <Tooltip
         classes={{

package/src/Graph/BarChart/useBarStack.ts

@@ -72,15 +72,15 @@ export const useBarStack = ({
 
   const commonBarStackProps = isHorizontal
     ? {
-        x: (d) => d.timeTick,
-        xScale,
-        yScale
-      }
+      x: (d) => d.timeTick,
+      xScale,
+      yScale
+    }
     : {
-        xScale: yScale,
-        y: (d) => d.timeTick,
-        yScale: xScale
-      };
+      xScale: yScale,
+      y: (d) => d.timeTick,
+      yScale: xScale
+    };
 
   const hoverBar = useCallback(
     ({ highlightedMetric, barIndex }: HoverBarProps) =>
@@ -96,7 +96,7 @@ export const useBarStack = ({
           index: barIndex
         });
       },
-    []
+    [lines, timeSeries]
   );
 
   const exitBar = useCallback((): void => {

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

@@ -18,6 +18,7 @@ import { args as argumentsData } from './helpers/doc';
 import { LineChartProps } from './models';
 
 import WrapperChart from '.';
+import { labelAvg, labelMin } from './translatedLabels';
 
 interface Props
   extends Pick<
@@ -153,7 +154,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '376');
+    .and('equal', '387');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -295,23 +296,23 @@ describe('Line chart', () => {
       .should('have.attr', 'width')
       .and('equal', '1200');
 
-    cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(0)
       .should('have.css', 'background-color', 'rgb(41, 175, 238)');
-    cy.findByLabelText('Centreon-Server_5: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(1)
       .should('have.css', 'background-color', 'rgb(83, 191, 241)');
-    cy.findByLabelText('Centreon-Server_4: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(2)
       .should('have.css', 'background-color', 'rgb(8, 34, 47)');
-    cy.findByLabelText('Centreon-Server_3: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(3)
       .should('have.css', 'background-color', 'rgb(16, 70, 95)');
-    cy.findByLabelText('Centreon-Server_2: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(4)
       .should('have.css', 'background-color', 'rgb(24, 105, 142)');
-    cy.findByLabelText('Centreon-Server_1: Round-Trip Average Time')
-      .find('[data-icon="true"]')
+    cy.get('[data-icon="true"]')
+      .eq(5)
       .should('have.css', 'background-color', 'rgb(32, 140, 190)');
 
     cy.get('[data-metric="1"]').should(
@@ -451,7 +452,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 274.47726401277305)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 204.60871164646406)"]').should(
         'be.visible'
       );
 
@@ -533,7 +534,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="248.33333333333334"]').should('be.visible');
-      cy.get('circle[cy="251.79089393069725"]').should('be.visible');
+      cy.get('circle[cy="225.07536552649066"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -747,10 +748,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
+      'path[d="M7.501377410468319,286.2259761383722 h56.51239669421488 h1v1 v98.77402386162782 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-98.77402386162782 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M24.05509641873278,232.36514618046195 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v18.753391941381302 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-18.753391941381302 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();
@@ -833,4 +834,23 @@ describe('Lines and bars', () => {
     cy.contains('Packet Loss').rightclick();
     cy.get('@secondaryClick').should('have.been.called');
   });
+
+  it('does not displays corresponding calculations when props are set', () => {
+    initialize({
+      data: dataPingServiceLines,
+      legend: {
+        placement: 'bottom',
+        mode: 'grid',
+        showCalculations: {
+          min: true,
+          max: false,
+          avg: false
+        }
+      }
+    });
+
+    cy.contains(labelMin).should('be.visible');
+    cy.contains(/^Max$/).should('not.exist');
+    cy.contains(labelAvg).should('not.exist');
+  });
 });

package/src/Graph/Chart/Chart.stories.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
+import '../../ThemeProvider/tailwindcss.css';
 
 import { Button, Menu } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -800,3 +801,23 @@ export const stackedKey: Story = {
     data: dataPingServiceLinesStackKeys
   }
 };
+
+export const WithControlledCalculations: Story = {
+  ...Template,
+  argTypes,
+  args: {
+    ...argumentsData,
+    lineStyle: {
+      curve: 'step'
+    },
+    legend: {
+      mode: 'grid',
+      placement: 'bottom',
+      showCalculations: {
+        avg: true,
+        max: true,
+        min: false
+      }
+    }
+  }
+};

package/src/Graph/Chart/Chart.tsx

@@ -273,11 +273,13 @@ const Chart = ({
           header={header}
           height={height}
           legend={{
+            ...legend,
             displayLegend,
             legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
             renderExtraComponent: legend?.renderExtraComponent,
+            showCalculations: legend?.showCalculations,
             secondaryClick: legend?.secondaryClick
           }}
           legendRef={legendRef}
@@ -286,6 +288,7 @@ const Chart = ({
           setLines={setLinesGraph}
           title={title}
           titleRef={titleRef}
+          graphHeight={graphHeight}
         >
           <GraphValueTooltip
             baseAxis={baseAxis}

package/src/Graph/Chart/Legend/Legend.styles.ts

@@ -1,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { equals, lt } from 'ramda';
-import { margin } from '../common';
 import type { LegendModel } from '../models';
 
 interface MakeStylesProps {
@@ -14,20 +12,8 @@ export const legendWidth = 21;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
-const getLegendMaxHeight = ({ placement, height }) => {
-  if (!equals(placement, 'bottom')) {
-    return height || 0;
-  }
-
-  if (lt(height || 0, 220)) {
-    return 40;
-  }
-
-  return 90;
-};
-
 export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows, placement, height = 0 }) => ({
+  (theme, { limitLegendRows }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
@@ -54,21 +40,6 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       rowGap: theme.spacing(1),
       width: '100%'
     },
-    legend: {
-      '&[data-display-side="false"]': {
-        marginLeft: margin.left,
-        marginRight: margin.right
-      },
-      '&[data-display-side="true"]': {
-        height: '100%',
-        marginTop: `${margin.top / 2}px`
-      },
-      maxHeight: limitLegendRows
-        ? theme.spacing(legendItemHeight * 2 + 1)
-        : getLegendMaxHeight({ placement, height }),
-      overflowY: 'auto',
-      overflowX: 'hidden'
-    },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),
       display: 'grid',

package/src/Graph/Chart/Legend/LegendContent.tsx

@@ -15,7 +15,7 @@ const LegendContent = ({ data, label }: Props): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <div className={classes.text} data-testid={label}>
+    <div className="leading-[1.2]" data-testid={label}>
       <Typography className={classes.text} component="span" variant="caption">
         {t(label)}:{' '}
         <Typography

package/src/Graph/Chart/Legend/LegendHeader.tsx

@@ -8,13 +8,11 @@ import {
 import { Tooltip } from '../../../components';
 import { Line } from '../../common/timeSeries/models';
 
-import { useLegendHeaderStyles } from './Legend.styles';
+import { ReactElement } from 'react';
 import LegendContent from './LegendContent';
 import { LegendDisplayMode } from './models';
 
 interface Props {
-  color: string;
-  disabled?: boolean;
   isDisplayedOnSide: boolean;
   isListMode: boolean;
   line: Line;
@@ -25,16 +23,12 @@ interface Props {
 
 const LegendHeader = ({
   line,
-  color,
-  disabled,
   value,
   minMaxAvg,
   isListMode,
   isDisplayedOnSide,
   unit
-}: Props): JSX.Element => {
-  const { classes, cx } = useLegendHeaderStyles({ color });
-
+}: Props): ReactElement => {
   const { name, legend } = line;
 
   const metricName = formatMetricName({ legend, name });
@@ -42,16 +36,14 @@ const LegendHeader = ({
   const legendName = legend || name;
 
   return (
-    <div
-      className={cx(!isListMode ? classes.container : classes.containerList)}
-    >
+    <div className={isListMode ? 'w-fit' : 'w-full'}>
       <Tooltip
         followCursor={false}
         label={
           minMaxAvg ? (
             <div>
               <Typography>{legendName}</Typography>
-              <div className={classes.minMaxAvgContainer}>
+              <div className="flex flex-wrap gap-1 whitespace-nowrap">
                 {minMaxAvg.map(({ label, value: subValue }) => (
                   <LegendContent
                     data={formatMetricValue({
@@ -70,18 +62,10 @@ const LegendHeader = ({
         }
         placement={isListMode ? 'right' : 'top'}
       >
-        <div className={classes.markerAndLegendName}>
-          <div
-            data-icon
-            className={cx(classes.icon, { [classes.disabled]: disabled })}
-          />
+        <div className="flex items-center gap-1">
           <EllipsisTypography
-            className={classes.text}
-            containerClassname={cx(
-              !isListMode && classes.legendName,
-              isListMode && !isDisplayedOnSide && classes.textListBottom,
-              isListMode && isDisplayedOnSide && classes.legendName
-            )}
+            className="text-xs leading-[1.2] font-medium"
+            containerClassname={`w-auto ${(!isListMode || (isListMode && isDisplayedOnSide)) && 'max-w-[166px]'}`}
             data-mode={
               value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
             }

package/src/Graph/Chart/Legend/index.tsx

@@ -1,8 +1,16 @@
-import { Dispatch, ReactNode, SetStateAction, useMemo } from 'react';
+import {
+  Dispatch,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  SetStateAction,
+  useMemo
+} from 'react';
 
 import { equals, prop, slice, sortBy } from 'ramda';
 
-import { Box, alpha, useTheme } from '@mui/material';
+import { alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
@@ -10,14 +18,13 @@ import { formatMetricValue } from '../../common/timeSeries';
 import { Line } from '../../common/timeSeries/models';
 import { LegendModel } from '../models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
-
-import { useStyles } from './Legend.styles';
 import LegendContent from './LegendContent';
 import LegendHeader from './LegendHeader';
 import { GetMetricValueProps, LegendDisplayMode } from './models';
 import useLegend from './useLegend';
 
-interface Props extends Pick<LegendModel, 'placement' | 'mode'> {
+interface Props
+  extends Pick<LegendModel, 'placement' | 'mode' | 'showCalculations'> {
   base: number;
   height: number | null;
   limitLegend?: false | number;
@@ -31,6 +38,7 @@ interface Props extends Pick<LegendModel, 'placement' | 'mode'> {
     metricId: number | string;
     position: [number, number];
   }) => void;
+  graphHeight: number;
 }
 
 const MainLegend = ({
@@ -42,15 +50,15 @@ const MainLegend = ({
   setLinesGraph,
   shouldDisplayLegendInCompactMode,
   placement,
-  height,
   mode,
-  secondaryClick
-}: Props): JSX.Element => {
-  const { classes, cx } = useStyles({
-    limitLegendRows: Boolean(limitLegend),
-    placement,
-    height
-  });
+  showCalculations = {
+    min: true,
+    max: true,
+    avg: true
+  },
+  secondaryClick,
+  graphHeight
+}: Props): ReactElement => {
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -73,22 +81,25 @@ const MainLegend = ({
 
   const contextMenuClick =
     (metricId: number) =>
-    (event: MouseEvent): void => {
-      if (!secondaryClick) {
-        return;
-      }
-      event.preventDefault();
-      secondaryClick({
-        element: event.target,
-        metricId,
-        position: [event.pageX, event.pageY]
-      });
-    };
+      (event: MouseEvent): void => {
+        if (!secondaryClick) {
+          return;
+        }
+        event.preventDefault();
+        secondaryClick({
+          element: event.target,
+          metricId,
+          position: [event.pageX, event.pageY]
+        });
+      };
 
   const selectMetric = ({
     event,
     metric_id
-  }: { event: MouseEvent; metric_id: number }): void => {
+  }: {
+    event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>;
+    metric_id: number;
+  }): void => {
     if (!toggable) {
       return;
     }
@@ -109,83 +120,90 @@ const MainLegend = ({
 
   return (
     <div
-      className={classes.legend}
+      className={`overflow-x-hidden overflow-y-auto ${!equals(placement, 'bottom') ? 'h-full mt-[15px]' : 'ml-[50px] mr-[40px]'} legend`}
       data-display-side={!equals(placement, 'bottom')}
     >
-      <div
-        className={classes.items}
+      <ul
+        className={`list-none flex gap-3 w-full ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${isListMode || !equals(placement, 'bottom') ? 'flex-col h-full w-fit' : ''} ${equals(placement, 'bottom') ? 'max-h-17' : 'max-h-0'}`}
+        style={{
+          height: equals(placement, 'bottom') ? 'auto' : `${graphHeight}px`
+        }}
         data-as-list={isListMode || !equals(placement, 'bottom')}
         data-mode={itemMode}
       >
         {displayedLines.map((line) => {
-          const { color, display, highlight, metric_id, unit } = line;
+          const { color, display, metric_id, unit } = line;
 
           const markerColor = display
             ? color
             : alpha(theme.palette.text.disabled, 0.2);
 
           const minMaxAvg = [
-            {
+            showCalculations.min && {
               label: labelMin,
               value: line.minimum_value
             },
-            {
+            showCalculations.max && {
               label: labelMax,
               value: line.maximum_value
             },
-            {
+            showCalculations.avg && {
               label: labelAvg,
               value: line.average_value
             }
-          ];
+          ].filter(Boolean);
 
           return (
-            <Box
-              className={cx(
-                classes.item,
-                highlight ? classes.highlight : classes.normal,
-                toggable && classes.toggable
-              )}
+            <li
+              className={`${!display ? 'text-text-disabled' : 'text-text-primary'} flex gap-1 ${toggable && 'cursor-pointer'}`}
               key={metric_id}
               onClick={(event): void => selectMetric({ event, metric_id })}
+              onKeyUp={(event) =>
+                event.key === 'Enter' && selectMetric({ event, metric_id })
+              }
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
               onContextMenu={contextMenuClick(metric_id)}
             >
-              <LegendHeader
-                color={markerColor}
-                disabled={!display}
-                isDisplayedOnSide={!equals(placement, 'bottom')}
-                isListMode={isListMode}
-                line={line}
-                minMaxAvg={
-                  shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
-                }
-                unit={unit}
+              <div
+                className="h-full rounded-sm w-1 min-h-5"
+                style={{ backgroundColor: markerColor }}
+                data-icon
               />
-              {!shouldDisplayLegendInCompactMode && !isListMode && (
-                <div>
-                  <div className={classes.minMaxAvgContainer}>
-                    {minMaxAvg.map(({ label, value }) => (
-                      <LegendContent
-                        data={getMetricValue({ unit: line.unit, value })}
-                        key={label}
-                        label={label}
-                      />
-                    ))}
+              <div>
+                <LegendHeader
+                  isDisplayedOnSide={!equals(placement, 'bottom')}
+                  isListMode={isListMode}
+                  line={line}
+                  minMaxAvg={
+                    shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
+                  }
+                  unit={unit}
+                />
+                {!shouldDisplayLegendInCompactMode && !isListMode && (
+                  <div>
+                    <div className="flex flex-wrap gap-1 whitespace-nowrap">
+                      {minMaxAvg.map(({ label, value }) => (
+                        <LegendContent
+                          data={getMetricValue({ unit: line.unit, value })}
+                          key={label}
+                          label={label}
+                        />
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
-            </Box>
+                )}
+              </div>
+            </li>
           );
         })}
-      </div>
+      </ul>
       {renderExtraComponent}
     </div>
   );
 };
 
-const Legend = (props: Props): JSX.Element => {
+const Legend = (props: Props): ReactElement => {
   const {
     toggable,
     limitLegend,

package/src/Graph/Chart/index.tsx

@@ -59,7 +59,12 @@ const WrapperChart = ({
   legend = {
     display: true,
     mode: 'grid',
-    placement: 'bottom'
+    placement: 'bottom',
+    showCalculations: {
+      min: true,
+      max: true,
+      avg: true
+    }
   },
   header,
   lineStyle,

package/src/Graph/Chart/models.ts

@@ -175,6 +175,11 @@ export interface LegendModel {
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
+  showCalculations?: {
+    min: boolean;
+    max: boolean;
+    avg: boolean;
+  };
   secondaryClick?: (props: {
     element: EventTarget | null;
     metricId: number | string;

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -21,7 +21,11 @@ interface Props {
   isHorizontal?: boolean;
   legend: Pick<
     LegendModel,
-    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
+    | 'renderExtraComponent'
+    | 'placement'
+    | 'mode'
+    | 'secondaryClick'
+    | 'showCalculations'
   > & {
     displayLegend: boolean;
     legendHeight?: number;
@@ -31,9 +35,10 @@ interface Props {
   limitLegend?: number | false;
   lines: Array<Line>;
   setLines:
-    | Dispatch<SetStateAction<Array<Line> | null>>
-    | Dispatch<SetStateAction<Array<Line>>>;
+  | Dispatch<SetStateAction<Array<Line> | null>>
+  | Dispatch<SetStateAction<Array<Line>>>;
   title: string;
+  graphHeight: number;
 }
 
 const BaseChart = ({
@@ -49,7 +54,8 @@ const BaseChart = ({
   titleRef,
   title,
   header,
-  isHorizontal = true
+  isHorizontal = true,
+  graphHeight
 }: Props): JSX.Element => {
   const { classes, cx } = useBaseChartStyles();
 
@@ -87,8 +93,8 @@ const BaseChart = ({
                 className={cx(
                   classes.legendContainer,
                   equals(legend?.placement, 'right') &&
-                    !isHorizontal &&
-                    classes.legendContainerVerticalSide
+                  !isHorizontal &&
+                  classes.legendContainerVerticalSide
                 )}
                 ref={legendRef}
               >
@@ -104,7 +110,9 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
+                  showCalculations={legend?.showCalculations}
                   secondaryClick={legend?.secondaryClick}
+                  graphHeight={graphHeight}
                 />
               </div>
             )}
@@ -127,6 +135,8 @@ const BaseChart = ({
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
             secondaryClick={legend?.secondaryClick}
+            showCalculations={legend?.showCalculations}
+            graphHeight={graphHeight}
           />
         </div>
       )}