@centreon/ui 24.8.2 → 24.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.8.2",
+  "version": "24.8.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -12,7 +12,7 @@
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
     "test:ci": "jest --silent --reporter=jest-junit",
     "cypress:ui": "cypress open --component --browser=chrome",
-    "cypress:run:updateSnapshot": "cypress run --component --browser=electron --env updateSnapshots=true",
+    "cypress:run:updateSnapshots": "cypress run --component --browser=chrome --env updateSnapshots=true",
     "cypress:run:coverage": "cypress run --component --browser=chrome --env codeCoverageTasksRegistered=true",
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
@@ -49,28 +49,28 @@
   ],
   "devDependencies": {
     "@cypress/react": "^8.0.2",
-    "@cypress/webpack-dev-server": "^3.10.0",
+    "@cypress/webpack-dev-server": "^3.10.1",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.56.0",
-    "@modern-js/storybook": "^2.56.0",
+    "@modern-js/prod-server": "^2.58.1",
+    "@modern-js/storybook": "^2.58.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
-    "@storybook/addon-a11y": "^8.2.5",
-    "@storybook/addon-docs": "^8.2.5",
-    "@storybook/addon-essentials": "^8.2.5",
-    "@storybook/addon-interactions": "^8.2.5",
-    "@storybook/addon-themes": "^8.2.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/manager-api": "^8.2.5",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-docs": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/preview-api": "^8.2.5",
-    "@storybook/react": "^8.2.5",
-    "@storybook/react-vite": "^8.2.5",
-    "@storybook/test": "^8.2.5",
+    "@storybook/preview-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.5",
+    "@storybook/theming": "^8.2.9",
     "@testing-library/cypress": "^10.0.2",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
@@ -80,27 +80,25 @@
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "axios-mock-adapter": "^1.22.0",
     "chai": "^5.1.1",
-    "cypress": "^13.13.1",
+    "cypress": "^13.13.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "2.3.2",
+    "msw": "2.3.5",
     "msw-storybook-addon": "^2.0.3",
-    "puppeteer": "^22.13.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "speed-measure-vite-plugin": "^1.0.1",
-    "storybook": "^8.2.5",
+    "storybook": "^8.2.9",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
     "style-dictionary": "^4.0.1",
     "ts-node": "^10.9.2",
     "use-resize-observer": "^9.1.0",
-    "vite": "^5.3.4",
+    "vite": "^5.4.1",
     "vite-plugin-istanbul": "^6.0.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-plugin-turbosnap": "^1.0.3"
@@ -109,14 +107,14 @@
     "@centreon/ui-context": "file:../ui-context"
   },
   "dependencies": {
-    "@lexical/html": "^0.16.1",
-    "@lexical/link": "^0.16.1",
-    "@lexical/list": "^0.16.1",
-    "@lexical/react": "^0.16.1",
-    "@lexical/rich-text": "^0.16.1",
-    "@lexical/selection": "^0.16.1",
-    "@lexical/utils": "^0.16.1",
-    "@mui/material": "^5.16.4",
+    "@lexical/html": "^0.17.0",
+    "@lexical/link": "^0.17.0",
+    "@lexical/list": "^0.17.0",
+    "@lexical/react": "^0.17.0",
+    "@lexical/rich-text": "^0.17.0",
+    "@lexical/selection": "^0.17.0",
+    "@lexical/utils": "^0.17.0",
+    "@mui/material": "^5.16.7",
     "@react-spring/web": "^9.7.4",
     "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^3.3.0",
@@ -136,14 +134,14 @@
     "d3-array": "3.2.4",
     "dayjs": "^1.11.12",
     "humanize-duration": "^3.32.1",
-    "lexical": "^0.16.1",
+    "lexical": "^0.17.0",
     "notistack": "^3.0.1",
     "numeral": "^2.0.6",
     "ramda": "0.30.1",
     "react-grid-layout": "^1.4.4",
     "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.25.1",
+    "react-router-dom": "^6.26.1",
     "react-transition-group": "^4.4.5",
     "sanitize-html": "^2.13.0",
     "ulog": "^2.0.0-beta.19"

package/public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.2'
+const PACKAGE_VERSION = '2.3.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

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

@@ -1,7 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
 
 import { userAtom } from '@centreon/ui-context';
 
@@ -56,6 +55,21 @@ 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', '1135');
+
+    return;
+  }
+  cy.get('g[class*="visx-rows"] > line')
+    .eq(0)
+    .should('have.attr', 'x2')
+    .and('equal', '1170');
+};
+
 describe('Bar chart', () => {
   ['horizontal', 'vertical'].forEach((orientation) => {
     it(`displays the bar chart ${orientation}ly`, () => {
@@ -63,19 +77,12 @@ describe('Bar chart', () => {
       const userData = renderHook(() => useAtomValue(userAtom));
       userData.result.current.locale = 'en';
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '295');
-      } else {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '863');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -83,19 +90,12 @@ describe('Bar chart', () => {
     it(`displays the bar chart ${orientation}ly centered in zero`, () => {
       initialize({ axis: { isCenteredZero: true }, orientation });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '171');
-      } else {
-        cy.findByTestId('single-bar-3-2-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '432');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -103,19 +103,12 @@ describe('Bar chart', () => {
     it(`displays the stacked bar chart ${orientation}ly`, () => {
       initialize({ data: dataPingServiceStacked, orientation });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'height')
-          .should('equals', '187');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'width')
-          .should('equals', '546');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -123,21 +116,12 @@ describe('Bar chart', () => {
     it(`displays bar chart ${orientation}ly with a mix of stacked and non-stacked data`, () => {
       initialize({ data: dataPingServiceMixedStacked, orientation });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '265');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '773');
-      }
-
-      cy.makeSnapshot();
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
     });
 
     it(`displays the stacked bar chart ${orientation}ly centered in zero`, () => {
@@ -147,19 +131,12 @@ describe('Bar chart', () => {
         orientation
       });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'height')
-          .should('equals', '94');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-          .should('have.attr', 'width')
-          .should('equals', '273');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -171,19 +148,12 @@ describe('Bar chart', () => {
         orientation
       });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '133');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '387');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
     });
 
     it(`displays bar chart ${orientation}ly with a custom style`, () => {
@@ -193,19 +163,12 @@ describe('Bar chart', () => {
         orientation
       });
 
+      checkWidth(orientation);
       cy.contains('0 ms').should('be.visible');
       cy.contains('20').should('be.visible');
       cy.contains(':40 AM').should('be.visible');
 
-      if (equals(orientation, 'horizontal')) {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'height')
-          .should('equals', '265');
-      } else {
-        cy.findByTestId('stacked-bar-3-0-0.08644')
-          .should('have.attr', 'width')
-          .should('equals', '773');
-      }
+      cy.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
     });
   });
 
@@ -214,21 +177,18 @@ describe('Bar chart', () => {
       orientation: 'horizontal'
     });
 
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
 
-    cy.findByTestId('single-bar-3-2-0.11372').realHover();
+    cy.findByTestId('stacked-bar-10-0-7650.368581547736').realHover();
 
     cy.contains('06/19/2024').should('be.visible');
     cy.contains('Centreon-Server: Round-Trip Maximum Time').should(
       'be.visible'
     );
-    cy.contains('0.11 ms').should('be.visible');
-
-    cy.findByTestId('single-bar-3-2-0.08644')
-      .should('have.attr', 'height')
-      .should('equals', '295');
+    cy.contains('7.47 KB').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -243,6 +203,7 @@ describe('Bar chart', () => {
       }
     });
 
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -251,9 +212,7 @@ describe('Bar chart', () => {
 
     cy.contains('06/19/2024').should('not.exist');
 
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
+    cy.findByTestId('stacked-bar-3-0-0.12340000000000001').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -268,6 +227,7 @@ describe('Bar chart', () => {
       }
     });
 
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -288,9 +248,7 @@ describe('Bar chart', () => {
     cy.contains('0.02 ms').should('be.visible');
     cy.contains('0.11 ms').should('be.visible');
 
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
 
     cy.makeSnapshot();
   });
@@ -305,6 +263,7 @@ describe('Bar chart', () => {
       }
     });
 
+    checkWidth('horizontal');
     cy.contains('0 ms').should('be.visible');
     cy.contains('20').should('be.visible');
     cy.contains(':40 AM').should('be.visible');
@@ -317,9 +276,7 @@ describe('Bar chart', () => {
     );
     cy.contains('0.05 ms').should('be.visible');
 
-    cy.findByTestId('stacked-bar-3-0-0.12340000000000001')
-      .should('have.attr', 'height')
-      .should('equals', '187');
+    cy.findByTestId('stacked-bar-3-0-0.16196').should('be.visible');
 
     cy.makeSnapshot();
   });

package/src/Graph/BarChart/BarChart.tsx

@@ -12,11 +12,11 @@ import { Provider } from 'jotai';
 
 import { Box } from '@mui/material';
 
-import { LineChartProps } from '../LineChart/models';
+import { LineChartProps } from '../Chart/models';
 import { LineChartData, Thresholds } from '../common/models';
 import { ParentSize } from '../../ParentSize';
-import useLineChartData from '../LineChart/useLineChartData';
-import LoadingSkeleton from '../LineChart/LoadingSkeleton';
+import useChartData from '../Chart/useChartData';
+import LoadingSkeleton from '../Chart/LoadingSkeleton';
 
 import ResponsiveBarChart from './ResponsiveBarChart';
 import { BarStyle } from './models';
@@ -59,7 +59,7 @@ const BarChart = ({
     radius: 0.2
   }
 }: BarChartProps): JSX.Element => {
-  const { adjustedData } = useLineChartData({ data, end, start });
+  const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
   if (loading && !adjustedData) {