@centreon/ui 26.9.1 → 26.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.9.1",
+  "version": "26.10.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -162,7 +162,7 @@
     "ramda": "0.30.1",
     "react-grid-layout": "^2.2.2",
     "react-resizable": "^3.0.5",
-    "react-router": "7.12.0",
+    "react-router": "7.14.2",
     "react-transition-group": "^4.4.5",
     "sanitize-html": "^2.14.0",
     "ulog": "^2.0.0-beta.19"

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

@@ -70,8 +70,19 @@ const initialize = ({
   cy.viewport('macbook-13');
 };
 
-const checkWidth = (): void => {
-  cy.get('g[class*="visx-rows"] > line').eq(0).should('have.attr', 'x2');
+const checkWidth = (orientation): void => {
+  if (orientation === 'vertical') {
+    cy.get('g[class*="visx-rows"] > line')
+      .eq(0)
+      .should('have.attr', 'x2')
+      .and('equal', '1133');
+
+    return;
+  }
+  cy.get('g[class*="visx-rows"] > line')
+    .eq(0)
+    .should('have.attr', 'x2')
+    .and('equal', '1168');
 };
 
 describe('Bar chart', () => {
@@ -80,7 +91,7 @@ describe('Bar chart', () => {
       orientation: 'horizontal'
     });
 
-    checkWidth();
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -106,7 +117,7 @@ describe('Bar chart', () => {
       }
     });
 
-    checkWidth();
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -136,7 +147,7 @@ describe('Bar chart', () => {
       const userData = renderHook(() => useAtomValue(userAtom));
       userData.result.current.locale = 'en';
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -149,7 +160,7 @@ describe('Bar chart', () => {
     it(`displays the bar chart ${orientation}ly centered in zero`, () => {
       initialize({ axis: { isCenteredZero: true }, orientation });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -162,7 +173,7 @@ describe('Bar chart', () => {
     it(`displays the stacked bar chart ${orientation}ly`, () => {
       initialize({ data: dataPingServiceStacked, orientation });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -175,7 +186,7 @@ describe('Bar chart', () => {
     it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
       initialize({ data: dataPingServiceMixedStacked, orientation });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -190,7 +201,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -205,7 +216,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -220,7 +231,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth();
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -239,7 +250,7 @@ describe('Bar chart', () => {
       }
     });
 
-    checkWidth();
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -91,9 +91,6 @@ const ResponsiveBarChart = ({
   zoomPreview,
   annotationEvent
 }: Props): ReactElement => {
-  const maxLeftAxisCharactersRef = useRef(0);
-  const maxRightAxisCharactersRef = useRef(0);
-
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
@@ -114,14 +111,23 @@ const ResponsiveBarChart = ({
   const [firstUnit, secondUnit] = getUnits(displayedLines);
   const allUnits = getUnits(lines || []);
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      axis,
+      firstUnit,
+      graphData,
+      secondUnit,
+      thresholds,
+      thresholdUnit
+    });
+
   const { legendRef, graphWidth, graphHeight, titleRef } =
     useComputeBaseChartDimensions({
       hasSecondUnit: Boolean(secondUnit),
       height,
       legendDisplay: legend?.display,
       legendPlacement: legend?.placement,
-      maxLeftAxisCharacters: maxLeftAxisCharactersRef.current,
-      maxRightAxisCharacters: maxRightAxisCharactersRef.current,
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
       title,
       units: allUnits,
       width
@@ -196,22 +202,6 @@ const ResponsiveBarChart = ({
 
   const leftScale = yScalesPerUnit[firstUnit ?? allUnits[0]];
   const rightScale = yScalesPerUnit[secondUnit ?? allUnits[1]];
-
-  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
-    useComputeYAxisMaxCharacters({
-      axis,
-      base: baseAxis,
-      displayedLines,
-      graphHeight,
-      graphWidth,
-      isHorizontal,
-      leftScale,
-      rightScale
-    });
-
-  maxRightAxisCharactersRef.current = maxRightAxisCharacters;
-  maxLeftAxisCharactersRef.current = maxLeftAxisCharacters;
-
   const pixelsToShift = computPixelsToShiftMouse(xScaleLinear);
 
   useEffect(
@@ -296,8 +286,9 @@ const ResponsiveBarChart = ({
             graphHeight={graphHeight}
             graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
             gridLinesType={axis?.gridLinesType}
+            hasSecondUnit={Boolean(secondUnit)}
             leftScale={leftScale}
-            maxLeftAxisCharacters={maxLeftAxisCharacters}
+            maxAxisCharacters={maxLeftAxisCharacters}
             orientation={isHorizontal ? 'horizontal' : 'vertical'}
             rightScale={rightScale}
             showGridLines={showGridLines}

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -112,6 +112,7 @@ const Lines = ({
         <GuidingLines
           graphHeight={height}
           graphWidth={width}
+          hasSecondUnit={hasSecondUnit}
           hasUnit={hasUnitDisplayed}
           leftScale={leftScale}
           lines={displayedLines}
@@ -234,6 +235,7 @@ const Lines = ({
                 <g key={metric_id}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
+                      hasSecondUnit={hasSecondUnit}
                       lineColor={lineColor}
                       maxLeftAxisCharacters={maxLeftAxisCharacters}
                       metric_id={metric_id}

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

@@ -177,8 +177,8 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.56 s').should('be.visible');
-      cy.contains('73.25%').should('be.visible');
+      cy.contains('0.44 s').should('be.visible');
+      cy.contains('75.19%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -218,7 +218,7 @@ describe('Line chart', () => {
 
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(1205, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1198, 100);
 
       cy.get('[data-metric="querytime"]').should('not.exist');
 
@@ -291,7 +291,7 @@ describe('Line chart', () => {
 
     cy.findByTestId('graph-interaction-zone')
       .should('have.attr', 'width')
-      .and('equal', '1230');
+      .and('equal', '1200');
 
     cy.get('[data-icon="true"]')
       .eq(0)
@@ -530,7 +530,8 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle').should('have.length', 864);
+      cy.get('circle[cx="245.83333333333334"]').should('be.visible');
+      cy.get('circle[cy="256.7205013298516"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -588,7 +589,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle').should('have.length', 288);
+      cy.get('circle[cx="32.77777777777778"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -744,10 +745,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.473829201101932,289.92398616599974 h56.26446280991734 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-56.26446280991734 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
+      'path[d="M7.435261707988982,289.92398616599974 h55.91735537190083 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-55.91735537190083 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M23.953168044077135,235.36727985204413 h23.305785123966935 a17.479338842975203,17.479338842975203 0 0 1 17.479338842975203,17.479338842975203 v19.598028628005196 v17.479338842975203h-17.479338842975203 h-23.305785123966935 h-17.479338842975203v-17.479338842975203 v-19.598028628005196 a17.479338842975203,17.479338842975203 0 0 1 17.479338842975203,-17.479338842975203z"]'
+      'path[d="M23.81046831955923,235.36727985204413 h23.166942148760334 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,17.37520661157025 v19.806293090815103 v17.37520661157025h-17.37520661157025 h-23.166942148760334 h-17.37520661157025v-17.37520661157025 v-19.806293090815103 a17.37520661157025,17.37520661157025 0 0 1 17.37520661157025,-17.37520661157025z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/Chart.tsx

@@ -119,8 +119,6 @@ const Chart = ({
   boundariesUnit
 }: Props): ReactElement => {
   const { classes } = useChartStyles();
-  const maxLeftAxisCharactersRef = useRef(0);
-  const maxRightAxisCharactersRef = useRef(0);
 
   const { title, timeSeries, baseAxis, lines } = graphData;
 
@@ -148,6 +146,16 @@ const Chart = ({
     [displayedLines]
   );
 
+  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
+    useComputeYAxisMaxCharacters({
+      axis,
+      firstUnit,
+      graphData,
+      secondUnit,
+      thresholds,
+      thresholdUnit
+    });
+
   const allUnits = getUnits(linesGraph);
 
   const { legendRef, graphWidth, graphHeight, titleRef } =
@@ -157,8 +165,7 @@ const Chart = ({
       legendDisplay: legend?.display,
       legendHeight: legend?.height,
       legendPlacement: legend?.placement,
-      maxLeftAxisCharacters: maxLeftAxisCharactersRef.current,
-      maxRightAxisCharacters: maxRightAxisCharactersRef.current,
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
       title,
       units: allUnits,
       width
@@ -223,21 +230,6 @@ const Chart = ({
   const leftScale = yScalesPerUnit[fallbackLeftUnit];
   const rightScale = yScalesPerUnit[fallbackRightUnit];
 
-  const { maxLeftAxisCharacters, maxRightAxisCharacters } =
-    useComputeYAxisMaxCharacters({
-      axis,
-      base: baseAxis,
-      displayedLines,
-      graphHeight,
-      graphWidth,
-      isHorizontal: false,
-      leftScale,
-      rightScale
-    });
-
-  maxRightAxisCharactersRef.current = maxRightAxisCharacters;
-  maxLeftAxisCharactersRef.current = maxLeftAxisCharacters;
-
   const linesDisplayedAsLine = useMemo(
     () =>
       displayedLines.filter(
@@ -333,8 +325,9 @@ const Chart = ({
                 graphHeight={graphHeight}
                 graphWidth={graphWidth}
                 gridLinesType={axis?.gridLinesType}
+                hasSecondUnit={hasSecondUnit}
                 leftScale={leftScale}
-                maxLeftAxisCharacters={maxLeftAxisCharacters}
+                maxAxisCharacters={maxLeftAxisCharacters}
                 rightScale={rightScale}
                 showGridLines={showGridLines}
                 svgRef={graphSvgRef}
@@ -395,6 +388,7 @@ const Chart = ({
                     xScale,
                     yScalesPerUnit
                   }}
+                  hasSecondUnit={hasSecondUnit}
                   maxLeftAxisCharacters={maxLeftAxisCharacters}
                   timeShiftZonesData={{
                     ...timeShiftZones,

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -12,12 +12,14 @@ const GuidingLines = ({
   graphHeight,
   graphWidth,
   maxLeftAxisCharacters,
+  hasSecondUnit,
   lines,
   leftScale,
   rightScale,
   hasUnit
 }: GuidingLinesModel): ReactElement | null => {
   const { positionX, positionY } = useTickGraph({
+    hasSecondUnit,
     hasUnit,
     leftScale,
     lines,

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -13,6 +13,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
 }
 
@@ -38,9 +39,11 @@ const RegularAnchorPoint = ({
   metric_id,
   timeSeries,
   lineColor,
-  maxLeftAxisCharacters
+  maxLeftAxisCharacters,
+  hasSecondUnit
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
+    hasSecondUnit,
     maxLeftAxisCharacters,
     timeSeries,
     xScale

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/StackedAnchorPoint.tsx

@@ -13,6 +13,7 @@ interface Props {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
+  hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
 }
 
@@ -58,9 +59,11 @@ const StackedAnchorPoint = ({
   stackValues,
   timeSeries,
   lineColor,
+  hasSecondUnit,
   maxLeftAxisCharacters
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
+    hasSecondUnit,
     maxLeftAxisCharacters,
     timeSeries,
     xScale

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/models.ts

@@ -30,6 +30,7 @@ export interface GuidingLines {
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   maxLeftAxisCharacters: number;
+  hasSecondUnit?: boolean;
   leftScale?: ScaleLinear<number, number>;
   lines: Array<Line>;
   rightScale?: ScaleLinear<number, number>;

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -27,6 +27,7 @@ interface Props {
   rightScale?: ScaleLinear<number, number>;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
+  hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
   hasUnit?: boolean;
 }
@@ -38,6 +39,7 @@ const useTickGraph = ({
   rightScale,
   lines = [],
   baseAxis = 1000,
+  hasSecondUnit,
   maxLeftAxisCharacters,
   hasUnit
 }: Props): AnchorPointResult => {
@@ -51,7 +53,11 @@ const useTickGraph = ({
   const mousePosition = useAtomValue(mousePositionAtom);
 
   const positionX = mousePosition
-    ? mousePosition[0] - computeGElementMarginLeft(maxLeftAxisCharacters)
+    ? mousePosition[0] -
+      computeGElementMarginLeft({
+        hasSecondUnit,
+        maxCharacters: maxLeftAxisCharacters
+      })
     : undefined;
   const positionY = mousePosition
     ? mousePosition[1] - (hasUnit ? 29 : 4)
@@ -68,7 +74,10 @@ const useTickGraph = ({
     const pixelToShift = computPixelsToShiftMouse(xScale);
     const mousePositionTimeTick = mousePosition
       ? getTimeValue({
-          marginLeft: computeGElementMarginLeft(maxLeftAxisCharacters),
+          marginLeft: computeGElementMarginLeft({
+            hasSecondUnit,
+            maxCharacters: maxLeftAxisCharacters
+          }),
           timeSeries,
           x: mousePosition[0] - pixelToShift,
           xScale

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

@@ -90,6 +90,7 @@ interface Props {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
   };
+  hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
   additionalZoomMargin?: number;
 }
@@ -100,6 +101,7 @@ const InteractionWithGraph = ({
   annotationData,
   timeShiftZonesData,
   transformMatrix,
+  hasSecondUnit,
   maxLeftAxisCharacters,
   additionalZoomMargin = 0
 }: Props): ReactElement => {
@@ -168,8 +170,11 @@ const InteractionWithGraph = ({
 
   const graphMarginLeft = useMemo(
     () =>
-      computeGElementMarginLeft(maxLeftAxisCharacters) + additionalZoomMargin,
-    [additionalZoomMargin, maxLeftAxisCharacters]
+      computeGElementMarginLeft({
+        hasSecondUnit,
+        maxCharacters: maxLeftAxisCharacters
+      }) + additionalZoomMargin,
+    [additionalZoomMargin, maxLeftAxisCharacters, hasSecondUnit]
   );
 
   const updateMousePosition = (pointPosition: MousePosition): void => {

package/src/Graph/common/Axes/index.tsx

@@ -73,10 +73,6 @@ const Axes = ({
   const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
   const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
 
-  const axisBottomProps = isHorizontal
-    ? {}
-    : ({ angle: 90, textAnchor: 'middle' } as const);
-
   return (
     <g>
       <AxisBottom
@@ -86,8 +82,7 @@ const Axes = ({
         tickFormat={formatAxisTick}
         tickLabelProps={() => ({
           ...(axisLeft.tickLabelProps as () => Record<string, unknown>)(),
-          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -12),
-          ...axisBottomProps
+          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -4)
         })}
         top={isHorizontal ? height - margin.bottom : 0}
       />

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

@@ -30,7 +30,8 @@ interface Props {
     | ScaleTime<number, number>
     | ScaleLinear<number, number>
     | ScaleBand<number>;
-  maxLeftAxisCharacters?: number;
+  maxAxisCharacters?: number;
+  hasSecondUnit?: boolean;
   title?: string;
 }
 
@@ -50,7 +51,8 @@ const ChartSvgWrapper = ({
   children,
   orientation = 'horizontal',
   allUnits,
-  maxLeftAxisCharacters = 0,
+  maxAxisCharacters = 0,
+  hasSecondUnit,
   title
 }: Props): ReactElement => {
   const isHorizontal = equals(orientation, 'horizontal');
@@ -71,7 +73,10 @@ const ChartSvgWrapper = ({
     >
       <title>chart</title>
       <Group.Group
-        left={computeGElementMarginLeft(maxLeftAxisCharacters)}
+        left={computeGElementMarginLeft({
+          hasSecondUnit,
+          maxCharacters: maxAxisCharacters
+        })}
         top={marginTop}
       >
         {showGridLines && (canRenderGridRows || canRenderGridColumns) && (

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -2,6 +2,7 @@ import { equals, isNil } from 'ramda';
 import type { RefCallback } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
+import { margin } from '../../Chart/common';
 import { margins } from '../margins';
 import { useMarginTop } from '../useMarginTop';
 
@@ -14,8 +15,7 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
-  maxLeftAxisCharacters: number;
-  maxRightAxisCharacters: number;
+  maxAxisCharacters: number;
   title?: string;
   units: Array<string>;
 }
@@ -32,9 +32,9 @@ export const useComputeBaseChartDimensions = ({
   height,
   legendDisplay,
   legendPlacement,
+  hasSecondUnit,
   legendHeight,
-  maxLeftAxisCharacters,
-  maxRightAxisCharacters,
+  maxAxisCharacters,
   units,
   title
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
@@ -63,8 +63,8 @@ export const useComputeBaseChartDimensions = ({
   const graphWidth =
     width > 0
       ? width -
-        (maxLeftAxisCharacters * 5 + maxRightAxisCharacters * 5) -
-        margins.left / 2 -
+        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
         legendBoundingWidth
       : 0;
   const graphHeight =

package/src/Graph/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -1,21 +1,18 @@
-import { getTicks } from '@visx/scale';
-import { ScaleLinear } from 'd3-scale';
 import { isEmpty } from 'ramda';
 import { useMemo } from 'react';
 
 import type { ChartAxis } from '../../Chart/models';
-import useAxisY from '../Axes/useAxisY';
-import { Line } from '../timeSeries/models';
+import type { Data } from '../Axes/models';
+import type { Thresholds } from '../models';
+import { getFormattedAxisValues } from '../utils';
 
 interface UseComputeYAxisMaxCharactersProps {
+  firstUnit: string;
+  secondUnit: string;
+  thresholdUnit?: string;
+  thresholds?: Thresholds;
+  graphData: Data;
   axis?: ChartAxis;
-  base: number;
-  displayedLines: Array<Line>;
-  graphWidth: number;
-  graphHeight: number;
-  isHorizontal: boolean;
-  leftScale: ScaleLinear<number, number, never>;
-  rightScale: ScaleLinear<number, number, never>;
 }
 
 interface UseComputteYAxisMaxCharactersState {
@@ -24,52 +21,71 @@ interface UseComputteYAxisMaxCharactersState {
 }
 
 export const useComputeYAxisMaxCharacters = ({
+  thresholds,
+  firstUnit,
+  secondUnit,
+  graphData,
   axis,
-  base,
-  displayedLines,
-  graphWidth,
-  graphHeight,
-  isHorizontal,
-  leftScale,
-  rightScale
+  thresholdUnit
 }: UseComputeYAxisMaxCharactersProps): UseComputteYAxisMaxCharactersState => {
-  const { axisLeft, axisRight } = useAxisY({
-    data: {
-      baseAxis: base,
-      lines: displayedLines,
-      ...axis
-    },
-    graphHeight,
-    graphWidth,
-    isHorizontal
-  });
+  const maxLeftValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        axisUnit: axis?.axisYLeft?.unit ?? firstUnit,
+        base: graphData?.baseAxis,
+        lines: graphData?.lines ?? [],
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData?.timeSeries ?? []
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYLeft?.unit,
+      firstUnit,
+      graphData?.timeSeries,
+      thresholdUnit,
+      graphData?.lines,
+      graphData?.baseAxis
+    ]
+  );
 
-  // Always add a character space in case the algorithm does not compute the displayed value in axis.
-  const maxLeftAxisCharacters = useMemo(() => {
-    if (!leftScale) {
-      return 0;
-    }
-
-    const ticks = getTicks(leftScale, axisLeft.numTicks);
-    const formattedTicks = ticks.map(axisLeft.tickFormat);
-
-    return isEmpty(formattedTicks)
-      ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
-  }, [leftScale, axisLeft]);
+  const maxRightValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        axisUnit: axis?.axisYRight?.unit ?? secondUnit,
+        base: graphData.baseAxis,
+        lines: graphData.lines ?? [],
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData.timeSeries ?? []
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYRight?.unit,
+      secondUnit,
+      graphData.timeSeries,
+      thresholdUnit,
+      graphData.lines,
+      graphData.baseAxis
+    ]
+  );
 
-  const maxRightAxisCharacters = useMemo(() => {
-    if (!rightScale) {
-      return 0;
-    }
-
-    const ticks = getTicks(rightScale, axisRight.numTicks);
-    const formattedTicks = ticks.map(axisRight.tickFormat);
+  // Always add a character space in case the algorithm does not compute the displayed value in axis.
+  const maxLeftAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxLeftValue)
+        ? 2
+        : Math.max(...maxLeftValue.map((value) => value.length), 2) + 1,
+    [maxLeftValue]
+  );
 
-    return isEmpty(formattedTicks)
-      ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
-  }, [rightScale, axisRight]);
+  const maxRightAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxRightValue)
+        ? 5
+        : Math.max(...maxRightValue.map((value) => value.length), 5) + 1,
+    [maxRightValue]
+  );
 
   return {
     maxLeftAxisCharacters,

package/src/Graph/common/utils.ts

@@ -22,6 +22,7 @@ import {
 } from 'ramda';
 
 import type { BarStyle } from '../BarChart/models';
+import { margin } from '../Chart/common';
 import type { LineStyle } from '../Chart/models';
 import type { Threshold, Thresholds } from './models';
 import { formatMetricValueWithUnit } from './timeSeries';
@@ -262,8 +263,16 @@ export const getFormattedAxisValues = ({
     .filter((v) => v) as Array<string>;
 };
 
-export const computeGElementMarginLeft = (maxLeftCharacters: number): number =>
-  maxLeftCharacters * 5;
+interface ComputeGElementMarginLeftProps {
+  maxCharacters: number;
+  hasSecondUnit?: boolean;
+}
+
+export const computeGElementMarginLeft = ({
+  maxCharacters,
+  hasSecondUnit
+}: ComputeGElementMarginLeftProps): number =>
+  maxCharacters * 5 + (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6);
 
 export const computPixelsToShiftMouse = (
   xScale: import('d3-scale').ScaleTime<number, number>