@centreon/ui 24.8.2 → 24.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.8.2",
+  "version": "24.8.3",
   "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"
@@ -52,23 +52,20 @@
     "@cypress/webpack-dev-server": "^3.10.0",
     "@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",
     "@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.7",
+    "@storybook/addon-docs": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-themes": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/manager-api": "^8.2.7",
     "@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.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.5",
+    "@storybook/theming": "^8.2.7",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -94,7 +91,7 @@
     "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.7",
     "storybook-addon-mock": "^5.0.0",
     "storybook-dark-mode": "^4.0.2",
     "style-dictionary": "^4.0.1",

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,19 +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.findByTestId('stacked-bar-3-0-0.08644').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -147,19 +133,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 +150,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 +165,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 +179,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 +205,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 +214,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 +229,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 +250,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 +265,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 +278,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) {

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,34 +1,32 @@
 import { memo, useMemo } from 'react';
 
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
-import { difference, equals, isEmpty, keys, omit, pick } from 'ramda';
+import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { Group } from '@visx/group';
+import { ScaleLinear } from 'd3-scale';
 
 import { useDeepMemo } from '../../utils';
 import { Line, TimeValue } from '../common/timeSeries/models';
 import {
   getSortedStackedLines,
   getTime,
-  getTimeSeriesForLines
+  getTimeSeriesForLines,
+  getUnits
 } from '../common/timeSeries';
 
-import SingleBar from './SingleBar';
 import BarStack from './BarStack';
 import { BarStyle } from './models';
 
 interface Props {
   barStyle: BarStyle;
-  isCenteredZero?: boolean;
   isTooltipHidden: boolean;
-  leftScale;
   lines: Array<Line>;
   orientation: 'horizontal' | 'vertical';
-  rightScale;
-  secondUnit?: string;
   size: number;
   timeSeries: Array<TimeValue>;
   xScale;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
 }
 
 const BarGroup = ({
@@ -37,44 +35,50 @@ const BarGroup = ({
   size,
   lines,
   xScale,
-  leftScale,
-  rightScale,
-  secondUnit,
-  isCenteredZero,
+  yScalesPerUnit,
   isTooltipHidden,
   barStyle
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
+  const [firstUnit] = getUnits(lines);
+
   const BarComponent = useMemo(
     () => (isHorizontal ? VisxBarGroup : BarGroupHorizontal),
     [isHorizontal]
   );
 
   const stackedLines = getSortedStackedLines(lines);
+  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
 
-  const stackLinesRight = stackedLines.filter(({ unit }) =>
-    equals(unit, secondUnit)
+  const stackedKeys = stackedUnits.reduce(
+    (acc, unit) => ({
+      ...acc,
+      [`stacked-${unit}`]: null
+    }),
+    {}
   );
-  const stackLinesLeft = stackedLines.filter(
-    ({ unit }) => !equals(unit, secondUnit)
+  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
+    (acc, stackedUnit) => {
+      const relatedLines = stackedLines.filter(({ unit }) =>
+        equals(unit, stackedUnit)
+      );
+
+      return {
+        ...acc,
+        [stackedUnit]: {
+          lines: relatedLines,
+          timeSeries: getTimeSeriesForLines({
+            lines: relatedLines,
+            timeSeries
+          })
+        }
+      };
+    },
+    {}
   );
-  const hasStackedLinesRight = !isEmpty(stackLinesRight)
-    ? { stackedRight: null }
-    : {};
-  const hasStackedLinesLeft = !isEmpty(stackLinesLeft)
-    ? { stackedLeft: null }
-    : {};
-
-  const stackedTimeSeriesRight = getTimeSeriesForLines({
-    lines: stackLinesRight,
-    timeSeries
-  });
-  const stackedTimeSeriesLeft = getTimeSeriesForLines({
-    lines: stackLinesLeft,
-    timeSeries
-  });
+
   const notStackedTimeSeries = getTimeSeriesForLines({
     lines: notStackedLines,
     timeSeries
@@ -82,8 +86,7 @@ const BarGroup = ({
 
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
-    ...hasStackedLinesRight,
-    ...hasStackedLinesLeft
+    ...stackedKeys
   }));
 
   const lineKeys = useDeepMemo({
@@ -119,6 +122,8 @@ const BarGroup = ({
     [...lineKeys, xScale.bandwidth()]
   );
 
+  const placeholderScale = yScalesPerUnit[firstUnit];
+
   const barComponentBaseProps = useMemo(
     () =>
       isHorizontal
@@ -126,15 +131,15 @@ const BarGroup = ({
             x0: getTime,
             x0Scale: xScale,
             x1Scale: metricScale,
-            yScale: leftScale
+            yScale: placeholderScale
           }
         : {
-            xScale: leftScale,
+            xScale: placeholderScale,
             y0: getTime,
             y0Scale: xScale,
             y1Scale: metricScale
           },
-    [isHorizontal, leftScale, rightScale, xScale, metricScale]
+    [isHorizontal, placeholderScale, xScale, metricScale]
   );
 
   return (
@@ -152,49 +157,48 @@ const BarGroup = ({
             left={barGroup.x0}
             top={barGroup.y0}
           >
-            {barGroup.bars.map((bar) => (
-              <>
-                <SingleBar
-                  bar={bar}
+            {barGroup.bars.map((bar) => {
+              const isStackedBar = bar.key.startsWith('stacked-');
+              const linesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .lines
+                : (notStackedLines.find(({ metric_id }) =>
+                    equals(metric_id, Number(bar.key))
+                  ) as Line);
+              const timeSeriesBar = isStackedBar
+                ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
+                    .timeSeries
+                : notStackedTimeSeries.map((timeSerie) => ({
+                    timeTick: timeSerie.timeTick,
+                    [bar.key]: timeSerie[Number(bar.key)]
+                  }));
+
+              return isStackedBar ? (
+                <BarStack
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
                   barStyle={barStyle}
-                  isCenteredZero={isCenteredZero}
+                  barWidth={isHorizontal ? bar.width : bar.height}
                   isHorizontal={isHorizontal}
                   isTooltipHidden={isTooltipHidden}
-                  key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                  leftScale={leftScale}
-                  lines={lines}
-                  rightScale={rightScale}
-                  secondUnit={secondUnit}
-                  size={size}
+                  lines={linesBar}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
                 />
-                {equals(bar.key, 'stackedRight') && (
-                  <BarStack
-                    barIndex={barGroup.index}
-                    barPadding={isHorizontal ? bar.x : bar.y}
-                    barStyle={barStyle}
-                    barWidth={isHorizontal ? bar.width : bar.height}
-                    isHorizontal={isHorizontal}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={stackLinesRight}
-                    timeSeries={stackedTimeSeriesRight}
-                    yScale={rightScale}
-                  />
-                )}
-                {equals(bar.key, 'stackedLeft') && (
-                  <BarStack
-                    barIndex={barGroup.index}
-                    barPadding={isHorizontal ? bar.x : bar.y}
-                    barStyle={barStyle}
-                    barWidth={isHorizontal ? bar.width : bar.height}
-                    isHorizontal={isHorizontal}
-                    isTooltipHidden={isTooltipHidden}
-                    lines={stackLinesLeft}
-                    timeSeries={stackedTimeSeriesLeft}
-                    yScale={leftScale}
-                  />
-                )}
-              </>
-            ))}
+              ) : (
+                <BarStack
+                  barIndex={barGroup.index}
+                  barPadding={isHorizontal ? bar.x : bar.y}
+                  barStyle={barStyle}
+                  barWidth={isHorizontal ? bar.width : bar.height}
+                  isHorizontal={isHorizontal}
+                  isTooltipHidden={isTooltipHidden}
+                  lines={[linesBar]}
+                  timeSeries={timeSeriesBar}
+                  yScale={yScalesPerUnit[linesBar.unit]}
+                />
+              );
+            })}
           </Group>
         ))
       }
@@ -213,27 +217,13 @@ const propsToMemoize = [
 ];
 
 export default memo(BarGroup, (prevProps, nextProps) => {
-  const prevLeftScale = [
-    ...prevProps.leftScale.domain(),
-    ...prevProps.leftScale.range()
-  ];
-  const prevRightScale = [
-    ...prevProps.rightScale.domain(),
-    ...prevProps.rightScale.range()
-  ];
+  const prevYScale = prevProps.yScalesPerUnit;
   const prevXScale = [
     ...prevProps.xScale.domain(),
     ...prevProps.xScale.range()
   ];
 
-  const nextLeftScale = [
-    ...nextProps.leftScale.domain(),
-    ...nextProps.leftScale.range()
-  ];
-  const nextRightScale = [
-    ...nextProps.rightScale.domain(),
-    ...nextProps.rightScale.range()
-  ];
+  const nextYScale = nextProps.yScalesPerUnit;
   const nextXScale = [
     ...nextProps.xScale.domain(),
     ...nextProps.xScale.range()
@@ -241,8 +231,7 @@ export default memo(BarGroup, (prevProps, nextProps) => {
 
   return (
     equals(pick(propsToMemoize, prevProps), pick(propsToMemoize, nextProps)) &&
-    equals(prevLeftScale, nextLeftScale) &&
-    equals(prevRightScale, nextRightScale) &&
+    equals(prevYScale, nextYScale) &&
     equals(prevXScale, nextXScale)
   );
 });