@centreon/ui 24.10.16 → 24.10.17

package/package.json

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

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

@@ -60,15 +60,17 @@ const checkWidth = (orientation): void => {
   if (orientation === 'vertical') {
     cy.get('g[class*="visx-rows"] > line')
       .eq(0)
-      .should('have.attr', 'x2')
-      .and('equal', '1145');
+      .then((graph) => {
+        expect(Number(graph[0].attributes.x2.value)).to.be.greaterThan(1140);
+      });
 
     return;
   }
   cy.get('g[class*="visx-rows"] > line')
     .eq(0)
-    .should('have.attr', 'x2')
-    .and('equal', '1180');
+    .then((graph) => {
+      expect(Number(graph[0].attributes.x2.value)).to.be.greaterThan(1177);
+    });
 };
 
 describe('Bar chart', () => {

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -92,7 +92,10 @@ const ResponsiveBarChart = ({
     legendDisplay: legend?.display,
     legendPlacement: legend?.placement,
     width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    maxRightAxisCharacters,
+    maxLeftAxisCharacters,
+    title,
+    units: allUnits
   });
 
   const thresholdValues = flatten([

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

@@ -131,10 +131,10 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '393');
+    .and('equal', '398');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
-    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1150);
   });
 };
 
@@ -158,7 +158,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.45 s').should('be.visible');
-      cy.contains('73.65%').should('be.visible');
+      cy.contains('75.19%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -443,7 +443,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 227.55748987831032)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 290.537103928414)"]').should(
         'be.visible'
       );
 
@@ -521,7 +521,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="37.625"]').should('be.visible');
+      cy.get('circle[cx="37.375"]').should('be.visible');
 
       cy.makeSnapshot();
     });

package/src/Graph/Chart/Chart.tsx

@@ -137,6 +137,8 @@ const Chart = ({
       secondUnit
     });
 
+  const allUnits = getUnits(linesGraph);
+
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
     height,
@@ -144,7 +146,10 @@ const Chart = ({
     legendHeight: legend?.height,
     legendPlacement: legend?.placement,
     width,
-    maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+    maxLeftAxisCharacters,
+    maxRightAxisCharacters,
+    title,
+    units: allUnits
   });
 
   const xScale = useMemo(
@@ -205,8 +210,6 @@ const Chart = ({
     [displayedLines]
   );
 
-  const allUnits = getUnits(linesGraph);
-
   useEffect(
     () => {
       setLinesGraph(

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

@@ -4,7 +4,7 @@ import { equals, isNil } from 'ramda';
 
 import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
-import { margins } from '../margins';
+import { useMarginTop } from '../useMarginTop';
 
 export const extraMargin = 10;
 
@@ -15,7 +15,10 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
-  maxAxisCharacters: number;
+  maxLeftAxisCharacters: number;
+  maxRightAxisCharacters: number;
+  title?: string;
+  units: Array<string>;
 }
 
 interface UseComputeBaseChartDimensionsState {
@@ -32,17 +35,22 @@ export const useComputeBaseChartDimensions = ({
   legendPlacement,
   hasSecondUnit,
   legendHeight,
-  maxAxisCharacters
+  maxLeftAxisCharacters,
+  maxRightAxisCharacters,
+  units,
+  title
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const {
     ref: legendRef,
     width: legendRefWidth,
     height: legendRefHeight
   } = useResizeObserver();
-  const { height: titleRefHeight } = useResizeObserver();
+  const { ref: titleRef, height: titleRefHeight } = useResizeObserver();
 
   const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
+  const marginTop = useMarginTop({ title, units });
+
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
     (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
@@ -57,22 +65,19 @@ export const useComputeBaseChartDimensions = ({
   const graphWidth =
     width > 0
       ? width -
-        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+        (hasSecondUnit ? maxRightAxisCharacters * 2 : maxRightAxisCharacters) *
+          6 -
+        (hasSecondUnit ? maxLeftAxisCharacters * 6 : margin.left) -
         legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) -
-        margin.top -
-        legendBoundingHeight -
-        (titleRefHeight || 0) -
-        5
+      ? (height || 0) - marginTop - legendBoundingHeight - (titleRefHeight || 0)
       : 0;
-
   return {
     graphHeight,
     graphWidth,
-    legendRef
+    legendRef,
+    titleRef
   };
 };

package/src/Graph/common/useMarginTop.ts

@@ -0,0 +1,17 @@
+import { identity } from 'ramda';
+import { useMemo } from 'react';
+import { margin } from '../Chart/common';
+
+export const useMarginTop = ({
+  title,
+  units
+}: { title?: string; units: Array<string> }): number => {
+  const hasUnits = useMemo(() => units.some(identity), [units]);
+
+  const marginTop = useMemo(
+    () => (title || hasUnits ? margin.top : 4),
+    [title, hasUnits]
+  );
+
+  return marginTop;
+};