@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Gauge/useResizeObserver.ts

@@ -29,7 +29,7 @@ export const useResizeObserver = (): UseResizeObserverState => {
 
     observerRef.current = new ResizeObserver(resize);
     observerRef.current?.observe(targetRef.current);
-  }, [resize, targetRef.current]);
+  }, [resize]);
 
   const unobserveElement = useCallback((): void => {
     if (!targetRef.current) {
@@ -58,11 +58,11 @@ export const useResizeObserver = (): UseResizeObserverState => {
     return () => {
       unobserveElement();
     };
-  }, [elementResolved]);
+  }, [elementResolved, observeElement, unobserveElement]);
 
   return {
-    width: size[0],
     height: size[1],
-    ref: targetRef
+    ref: targetRef,
+    width: size[0]
   };
 };

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

@@ -1,12 +1,11 @@
-import { pluck } from 'ramda';
-
 import { Box, Typography } from '@mui/material';
 
-import EllipsisTypography from '../../Typography/EllipsisTypography';
+import { pluck } from 'ramda';
 
+import EllipsisTypography from '../../Typography/EllipsisTypography';
 import HeatMap from './HeatMap';
 import heatMapData from './HeatMapData.json';
-import { HeatMapProps } from './model';
+import type { HeatMapProps } from './model';
 
 const dataIds = pluck('id', heatMapData);
 

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -1,11 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { makeStyles } from 'tss-react/mui';
-
 import { Box, Typography } from '@mui/material';
 
-import heatMapData from './HeatMapData.json';
+import type { Meta, StoryObj } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
 
 import { HeatMap } from '.';
+import heatMapData from './HeatMapData.json';
 
 interface Data {
   counter: number;

package/src/Graph/HeatMap/HeatMap.tsx

@@ -1,7 +1,6 @@
 import { ParentSize } from '../..';
-
+import type { HeatMapProps } from './model';
 import ResponsiveHeatMap from './ResponsiveHeatMap';
-import { HeatMapProps } from './model';
 
 const HeatMap = <TData,>(props: HeatMapProps<TData>): JSX.Element => (
   <ParentSize>

package/src/Graph/HeatMap/HeatMapData.json

@@ -1,137 +1,137 @@
 [
   {
-    "id": "Orbaxter",
     "backgroundColor": "#88B922",
     "data": {
+      "counter": 53,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 53
-    }
+      "service": "Service Counter"
+    },
+    "id": "Orbaxter"
   },
   {
-    "id": "Interfind",
     "backgroundColor": "#88B922",
     "data": {
+      "counter": 779,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 779
-    }
+      "service": "Service Counter"
+    },
+    "id": "Interfind"
   },
   {
-    "id": "Ecratic",
     "backgroundColor": "#E3E3E3",
     "data": {
+      "counter": 504,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 504
-    }
+      "service": "Service Counter"
+    },
+    "id": "Ecratic"
   },
   {
-    "id": "Earthwax",
     "backgroundColor": "#88B922",
     "data": {
+      "counter": 374,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 374
-    }
+      "service": "Service Counter"
+    },
+    "id": "Earthwax"
   },
   {
-    "id": "Cytrak",
     "backgroundColor": "#FF6666",
     "data": {
+      "counter": 957,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 957
-    }
+      "service": "Service Counter"
+    },
+    "id": "Cytrak"
   },
   {
-    "id": "Exiand",
     "backgroundColor": "#1EBEB3",
     "data": {
+      "counter": 281,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 281
-    }
+      "service": "Service Counter"
+    },
+    "id": "Exiand"
   },
   {
-    "id": "Ginkogene",
     "backgroundColor": "#FF6666",
     "data": {
+      "counter": 472,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 472
-    }
+      "service": "Service Counter"
+    },
+    "id": "Ginkogene"
   },
   {
-    "id": "Quailcom",
     "backgroundColor": "#88B922",
     "data": {
+      "counter": 770,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 770
-    }
+      "service": "Service Counter"
+    },
+    "id": "Quailcom"
   },
   {
-    "id": "Cormoran",
     "backgroundColor": "#FF6666",
     "data": {
+      "counter": 908,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 908
-    }
+      "service": "Service Counter"
+    },
+    "id": "Cormoran"
   },
   {
-    "id": "Emergent",
     "backgroundColor": "#1EBEB3",
     "data": {
+      "counter": 969,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 969
-    }
+      "service": "Service Counter"
+    },
+    "id": "Emergent"
   },
   {
-    "id": "Limozen",
     "backgroundColor": "#E3E3E3",
     "data": {
+      "counter": 33,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 33
-    }
+      "service": "Service Counter"
+    },
+    "id": "Limozen"
   },
   {
-    "id": "Gogol",
     "backgroundColor": "#1EBEB3",
     "data": {
+      "counter": 870,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 870
-    }
+      "service": "Service Counter"
+    },
+    "id": "Gogol"
   },
   {
-    "id": "Luxuria",
     "backgroundColor": "#FD9B27",
     "data": {
+      "counter": 270,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 270
-    }
+      "service": "Service Counter"
+    },
+    "id": "Luxuria"
   },
   {
-    "id": "Fossiel",
     "backgroundColor": "#1EBEB3",
     "data": {
+      "counter": 955,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 955
-    }
+      "service": "Service Counter"
+    },
+    "id": "Fossiel"
   },
   {
-    "id": "Hawkster",
     "backgroundColor": "#88B922",
     "data": {
+      "counter": 28,
       "host": "Server",
-      "service": "Service Counter",
-      "counter": 28
-    }
+      "service": "Service Counter"
+    },
+    "id": "Hawkster"
   }
 ]

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,14 +1,12 @@
-import { useMemo, useRef } from 'react';
+import { Box } from '@mui/material';
 
 import { scaleLinear } from '@visx/scale';
-import { T, equals, gt, lt } from 'ramda';
-
-import { Box } from '@mui/material';
+import { equals, gt, lt, T } from 'ramda';
+import { useMemo, useRef } from 'react';
 
 import { Tooltip } from '../../components';
-
 import { useHeatMapStyles } from './HeatMap.styles';
-import { HeatMapProps } from './model';
+import type { HeatMapProps } from './model';
 
 const gap = 8;
 const maxTileSize = 120;
@@ -66,7 +64,7 @@ const ResponsiveHeatMap = <TData,>({
     }
 
     return tileSizeFixed ? maxTileSize : tileWidth;
-  }, [width, tiles, height]);
+  }, [width, tiles, height, tileSizeFixed]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
   const isMediumSize = !isSmallestSize && lt(tileSize, 90);
@@ -92,13 +90,13 @@ const ResponsiveHeatMap = <TData,>({
           sx={{ backgroundColor }}
         >
           <Tooltip
-            hasCaret
             classes={{
               arrow: cx(classes.heatMapTooltipArrow, arrowClassName),
               tooltip: classes.heatMapTooltip
             }}
             data-testid={`tooltip-${data?.id}`}
             followCursor={false}
+            hasCaret
             label={
               displayTooltipCondition?.(data) &&
               tooltipContent?.({
@@ -115,9 +113,9 @@ const ResponsiveHeatMap = <TData,>({
                 backgroundColor,
                 data,
                 id,
+                isMediumSize,
                 isSmallestSize,
-                tileSize,
-                isMediumSize
+                tileSize
               })}
             </div>
           </Tooltip>

package/src/Graph/Legend/Legend.styles.ts

@@ -2,9 +2,9 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   container: {
-    padding: theme.spacing(1),
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
     width: 'fit-content'
   }
 }));

package/src/Graph/Legend/Legend.tsx

@@ -1,9 +1,9 @@
 import { LegendOrdinal } from '@visx/legend';
 import { scaleOrdinal } from '@visx/scale';
-
 import { equals } from 'ramda';
+
 import { useStyles } from './Legend.styles';
-import { LegendProps } from './models';
+import type { LegendProps } from './models';
 
 const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
   const { classes } = useStyles();
@@ -15,10 +15,10 @@ const Legend = ({ scale, direction = 'column' }: LegendProps): JSX.Element => {
 
   return (
     <LegendOrdinal
+      className={classes.container}
       direction={direction}
-      scale={legendScale}
       labelMargin={equals(direction, 'row') ? '0 12px 0 0' : '0 0 0 0'}
-      className={classes.container}
+      scale={legendScale}
     />
   );
 };

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

@@ -1,7 +1,7 @@
 import numeral from 'numeral';
 
+import type { ArcType, PieProps } from './models';
 import PieChart from './PieChart';
-import { ArcType, PieProps } from './models';
 
 const defaultData = [
   { color: '#88B922', label: 'Ok', value: 148 },

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import type { ArcType } from './models';
 import ResponsivePie from './ResponsivePie';
-import { ArcType } from './models';
 
 const data = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -122,9 +122,9 @@ const TooltipContent = ({ label, color, value }: ArcType): JSX.Element => {
 
 export const PieWithTooltip: Story = {
   args: {
-    TooltipContent,
     data,
     displayValues: true,
+    TooltipContent,
     unit: 'percentage'
   },
   render: Template
@@ -132,9 +132,9 @@ export const PieWithTooltip: Story = {
 
 export const DonutWithTooltip: Story = {
   args: {
-    TooltipContent,
     data,
     displayValues: true,
+    TooltipContent,
     variant: 'donut'
   },
   render: Template

package/src/Graph/PieChart/PieChart.tsx

@@ -1,7 +1,6 @@
 import { ParentSize } from '../..';
-
+import type { PieProps } from './models';
 import ResponsivePie from './ResponsivePie';
-import { PieProps } from './models';
 
 const PieChart = (props: PieProps): JSX.Element => (
   <ParentSize>

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -1,21 +1,19 @@
-import { useRef } from 'react';
+import { useTheme } from '@mui/material';
 
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import numeral from 'numeral';
 import { always, equals, gt, ifElse, lt } from 'ramda';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useTheme } from '@mui/material';
-
 import { Tooltip } from '../../components';
-import { Legend as LegendComponent } from '../Legend';
-import { LegendProps } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-
+import { Legend as LegendComponent } from '../Legend';
+import type { LegendProps } from '../Legend/models';
+import type { PieProps } from './models';
 import { usePieStyles } from './PieChart.styles';
-import { PieProps } from './models';
 import { useResponsivePie } from './useResponsivePie';
 
 const DefaultLegend = ({ scale, direction }: LegendProps): JSX.Element => (
@@ -124,6 +122,7 @@ const ResponsivePie = ({
             height={Math.ceil(svgSize)}
             width={Math.ceil(svgSize)}
           >
+            <title>pie chart</title>
             <Group left={half} top={half}>
               <Pie
                 cornerRadius={4}
@@ -161,11 +160,11 @@ const ResponsivePie = ({
 
                     return (
                       <Tooltip
-                        hasCaret
                         classes={{
                           tooltip: classes.pieChartTooltip
                         }}
                         followCursor={false}
+                        hasCaret
                         key={arc.data.label}
                         label={
                           TooltipContent && (
@@ -185,39 +184,42 @@ const ResponsivePie = ({
                           radianY: Math.sin(midAngle)
                         })}
                       >
-                        <g
-                          data-testid={arc.data.label}
-                          onClick={onClick}
-                          onKeyUp={() => undefined}
-                        >
-                          <path
-                            cursor="pointer"
-                            d={pie.path(arc) as string}
-                            fill={arc.data.color}
-                          />
-                          {displayValues &&
-                            !isContainsExactlyOneNonZeroValue &&
-                            angle > minAngle && (
-                              <Text
-                                data-testid="value"
-                                dy=".33em"
-                                fill="#000"
-                                fillOpacity={opacity}
-                                fontSize={12}
-                                fontWeight={600}
-                                pointerEvents="none"
-                                textAnchor="middle"
-                                x={x}
-                                y={y}
-                              >
-                                {getValueByUnit({
-                                  total,
-                                  unit,
-                                  value: arc.data.value
-                                })}
-                              </Text>
-                            )}
-                        </g>
+                        {
+                          // biome-ignore lint/a11y/noStaticElementInteractions: need it
+                          <g
+                            data-testid={arc.data.label}
+                            onClick={onClick}
+                            onKeyUp={() => undefined}
+                          >
+                            <path
+                              cursor="pointer"
+                              d={pie.path(arc) as string}
+                              fill={arc.data.color}
+                            />
+                            {displayValues &&
+                              !isContainsExactlyOneNonZeroValue &&
+                              angle > minAngle && (
+                                <Text
+                                  data-testid="value"
+                                  dy=".33em"
+                                  fill="#000"
+                                  fillOpacity={opacity}
+                                  fontSize={12}
+                                  fontWeight={600}
+                                  pointerEvents="none"
+                                  textAnchor="middle"
+                                  x={x}
+                                  y={y}
+                                >
+                                  {getValueByUnit({
+                                    total,
+                                    unit,
+                                    value: arc.data.value
+                                  })}
+                                </Text>
+                              )}
+                          </g>
+                        }
                       </Tooltip>
                     );
                   });

package/src/Graph/PieChart/useResponsivePie.ts

@@ -1,9 +1,8 @@
 import { equals, pluck, reject } from 'ramda';
 
-import { LegendScale } from '../Legend/models';
 import { getValueByUnit } from '../common/utils';
-
-import { ArcType } from './models';
+import type { LegendScale } from '../Legend/models';
+import type { ArcType } from './models';
 
 interface ResponsivePieProps {
   data: Array<ArcType>;