@centreon/ui 26.7.8 → 26.9.1

package/package.json

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

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

@@ -70,19 +70,8 @@ const initialize = ({
   cy.viewport('macbook-13');
 };
 
-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');
+const checkWidth = (): void => {
+  cy.get('g[class*="visx-rows"] > line').eq(0).should('have.attr', 'x2');
 };
 
 describe('Bar chart', () => {
@@ -91,7 +80,7 @@ describe('Bar chart', () => {
       orientation: 'horizontal'
     });
 
-    checkWidth('horizontal');
+    checkWidth();
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -117,7 +106,7 @@ describe('Bar chart', () => {
       }
     });
 
-    checkWidth('horizontal');
+    checkWidth();
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -147,7 +136,7 @@ describe('Bar chart', () => {
       const userData = renderHook(() => useAtomValue(userAtom));
       userData.result.current.locale = 'en';
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -160,7 +149,7 @@ describe('Bar chart', () => {
     it(`displays the bar chart ${orientation}ly centered in zero`, () => {
       initialize({ axis: { isCenteredZero: true }, orientation });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -173,7 +162,7 @@ describe('Bar chart', () => {
     it(`displays the stacked bar chart ${orientation}ly`, () => {
       initialize({ data: dataPingServiceStacked, orientation });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -186,7 +175,7 @@ describe('Bar chart', () => {
     it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
       initialize({ data: dataPingServiceMixedStacked, orientation });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -201,7 +190,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -216,7 +205,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -231,7 +220,7 @@ describe('Bar chart', () => {
         orientation
       });
 
-      checkWidth(orientation);
+      checkWidth();
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
@@ -250,7 +239,7 @@ describe('Bar chart', () => {
       }
     });
 
-    checkWidth('horizontal');
+    checkWidth();
     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,6 +91,9 @@ const ResponsiveBarChart = ({
   zoomPreview,
   annotationEvent
 }: Props): ReactElement => {
+  const maxLeftAxisCharactersRef = useRef(0);
+  const maxRightAxisCharactersRef = useRef(0);
+
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
@@ -111,23 +114,14 @@ 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,
-      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
+      maxLeftAxisCharacters: maxLeftAxisCharactersRef.current,
+      maxRightAxisCharacters: maxRightAxisCharactersRef.current,
       title,
       units: allUnits,
       width
@@ -202,6 +196,22 @@ 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(
@@ -286,9 +296,8 @@ const ResponsiveBarChart = ({
             graphHeight={graphHeight}
             graphWidth={graphWidth - (isHorizontal ? 0 : margin.left - 15)}
             gridLinesType={axis?.gridLinesType}
-            hasSecondUnit={Boolean(secondUnit)}
             leftScale={leftScale}
-            maxAxisCharacters={maxLeftAxisCharacters}
+            maxLeftAxisCharacters={maxLeftAxisCharacters}
             orientation={isHorizontal ? 'horizontal' : 'vertical'}
             rightScale={rightScale}
             showGridLines={showGridLines}

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

@@ -112,7 +112,6 @@ const Lines = ({
         <GuidingLines
           graphHeight={height}
           graphWidth={width}
-          hasSecondUnit={hasSecondUnit}
           hasUnit={hasUnitDisplayed}
           leftScale={leftScale}
           lines={displayedLines}
@@ -235,7 +234,6 @@ 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.44 s').should('be.visible');
-      cy.contains('75.19%').should('be.visible');
+      cy.contains('0.56 s').should('be.visible');
+      cy.contains('73.25%').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(1198, 100);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1205, 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', '1200');
+      .and('equal', '1230');
 
     cy.get('[data-icon="true"]')
       .eq(0)
@@ -530,8 +530,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="245.83333333333334"]').should('be.visible');
-      cy.get('circle[cy="256.7205013298516"]').should('be.visible');
+      cy.get('circle').should('have.length', 864);
 
       cy.makeSnapshot();
     });
@@ -589,7 +588,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle[cx="32.77777777777778"]').should('be.visible');
+      cy.get('circle').should('have.length', 288);
 
       cy.makeSnapshot();
     });
@@ -745,10 +744,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      '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"]'
+      '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"]'
     ).should('be.visible');
     cy.get(
-      '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"]'
+      '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"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/Chart.tsx

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

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

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

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

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

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

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

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

@@ -73,6 +73,10 @@ 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
@@ -82,7 +86,8 @@ const Axes = ({
         tickFormat={formatAxisTick}
         tickLabelProps={() => ({
           ...(axisLeft.tickLabelProps as () => Record<string, unknown>)(),
-          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -4)
+          dx: data?.axisX?.dx ?? (isHorizontal ? 16 : -12),
+          ...axisBottomProps
         })}
         top={isHorizontal ? height - margin.bottom : 0}
       />

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

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

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

@@ -2,7 +2,6 @@ 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';
 
@@ -15,7 +14,8 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
-  maxAxisCharacters: number;
+  maxLeftAxisCharacters: number;
+  maxRightAxisCharacters: number;
   title?: string;
   units: Array<string>;
 }
@@ -32,9 +32,9 @@ export const useComputeBaseChartDimensions = ({
   height,
   legendDisplay,
   legendPlacement,
-  hasSecondUnit,
   legendHeight,
-  maxAxisCharacters,
+  maxLeftAxisCharacters,
+  maxRightAxisCharacters,
   units,
   title
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
@@ -63,8 +63,8 @@ export const useComputeBaseChartDimensions = ({
   const graphWidth =
     width > 0
       ? width -
-        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+        (maxLeftAxisCharacters * 5 + maxRightAxisCharacters * 5) -
+        margins.left / 2 -
         legendBoundingWidth
       : 0;
   const graphHeight =

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

@@ -1,18 +1,21 @@
+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 type { Data } from '../Axes/models';
-import type { Thresholds } from '../models';
-import { getFormattedAxisValues } from '../utils';
+import useAxisY from '../Axes/useAxisY';
+import { Line } from '../timeSeries/models';
 
 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 {
@@ -21,71 +24,52 @@ interface UseComputteYAxisMaxCharactersState {
 }
 
 export const useComputeYAxisMaxCharacters = ({
-  thresholds,
-  firstUnit,
-  secondUnit,
-  graphData,
   axis,
-  thresholdUnit
+  base,
+  displayedLines,
+  graphWidth,
+  graphHeight,
+  isHorizontal,
+  leftScale,
+  rightScale
 }: UseComputeYAxisMaxCharactersProps): UseComputteYAxisMaxCharactersState => {
-  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
-    ]
-  );
-
-  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 { axisLeft, axisRight } = useAxisY({
+    data: {
+      baseAxis: base,
+      lines: displayedLines,
+      ...axis
+    },
+    graphHeight,
+    graphWidth,
+    isHorizontal
+  });
 
   // 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]
-  );
+  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 maxRightAxisCharacters = useMemo(() => {
+    if (!rightScale) {
+      return 0;
+    }
+
+    const ticks = getTicks(rightScale, axisRight.numTicks);
+    const formattedTicks = ticks.map(axisRight.tickFormat);
 
-  const maxRightAxisCharacters = useMemo(
-    () =>
-      isEmpty(maxRightValue)
-        ? 5
-        : Math.max(...maxRightValue.map((value) => value.length), 5) + 1,
-    [maxRightValue]
-  );
+    return isEmpty(formattedTicks)
+      ? 2
+      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
+  }, [rightScale, axisRight]);
 
   return {
     maxLeftAxisCharacters,

package/src/Graph/common/utils.ts

@@ -22,7 +22,6 @@ 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';
@@ -263,16 +262,8 @@ export const getFormattedAxisValues = ({
     .filter((v) => v) as Array<string>;
 };
 
-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 computeGElementMarginLeft = (maxLeftCharacters: number): number =>
+  maxLeftCharacters * 5;
 
 export const computPixelsToShiftMouse = (
   xScale: import('d3-scale').ScaleTime<number, number>

package/src/Icon/BusinessActivityIcon.tsx

@@ -1,12 +1,30 @@
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import type { SvgIconProps } from '@mui/material';
 
 import BaseIcon from './BaseIcon';
 
+const icon = (
+  <g>
+    <path
+      d="M6.94873 13.4287V19.1429L11.8975 22L16.8463 19.1429V13.4287L11.8975 10.5716L6.94873 13.4287Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M2 4.85709V10.5713L6.9488 13.4284L11.8976 10.5713V4.85709L6.9488 2L2 4.85709Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+    <path
+      d="M11.8975 4.85709V10.5713L16.8463 13.4284L21.7951 10.5713V4.85709L16.8463 2L11.8975 4.85709Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+  </g>
+);
+
 export const BusinessActivityIcon = (props: SvgIconProps): JSX.Element => (
-  <BaseIcon
-    dataTestId="BusinessActivityIcon"
-    Icon={AccountTreeIcon}
-    {...props}
-  />
+  <BaseIcon dataTestId="BusinessActivityIcon" Icon={icon} {...props} />
 );

package/src/Icon/HostIcon.tsx

@@ -1,8 +1,15 @@
-import { Dns } from '@mui/icons-material';
 import type { SvgIconProps } from '@mui/material';
 
+import { ReactElement } from 'react';
+
 import BaseIcon from './BaseIcon';
 
-export const HostIcon = (props: SvgIconProps): JSX.Element => (
-  <BaseIcon dataTestId="HostIcon" Icon={Dns} {...props} />
+const icon = (
+  <g>
+    <path d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H9C9.55 3 10.0208 3.19583 10.4125 3.5875C10.8042 3.97917 11 4.45 11 5V19C11 19.55 10.8042 20.0208 10.4125 20.4125C10.0208 20.8042 9.55 21 9 21H4ZM15 21C14.45 21 13.9792 20.8042 13.5875 20.4125C13.1958 20.0208 13 19.55 13 19V5C13 4.45 13.1958 3.97917 13.5875 3.5875C13.9792 3.19583 14.45 3 15 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H15ZM4 19H9V5H4V19ZM15 19H20V5H15V19ZM5 15H8V13H5V15ZM16 15H19V13H16V15ZM5 12H8V10H5V12ZM16 12H19V10H16V12ZM5 9H8V7H5V9ZM16 9H19V7H16V9Z" />
+  </g>
+);
+
+export const HostIcon = (props: SvgIconProps): ReactElement => (
+  <BaseIcon dataTestId="HostIcon" Icon={icon} {...props} />
 );

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,9 +1,9 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import type { SvgIcon } from '@mui/material';
+import type { SvgIconProps } from '@mui/material';
 import { Badge, ClickAwayListener } from '@mui/material';
 
-import { useEffect, useState } from 'react';
+import { ComponentType, useEffect, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
@@ -98,7 +98,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 interface TopCounterLayoutProps {
-  Icon: typeof SvgIcon;
+  Icon: ComponentType<SvgIconProps>;
   renderIndicators: () => JSX.Element;
   renderSubMenu: (params: { closeSubMenu: () => void }) => JSX.Element;
   showPendingBadge?: boolean;