@centreon/ui 24.6.1 → 24.6.3

package/package.json

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

package/src/Dashboard/Item.tsx

@@ -4,10 +4,12 @@ import {
   forwardRef,
   MouseEvent,
   ReactElement,
-  useEffect
+  useEffect,
+  useMemo
 } from 'react';
 
-import { isNil, prop } from 'ramda';
+import { equals, isNil, prop } from 'ramda';
+import { useAtomValue } from 'jotai';
 
 import { Card, useTheme } from '@mui/material';
 
@@ -15,6 +17,7 @@ import { useMemoComponent, useViewportIntersection } from '../utils';
 import LoadingSkeleton from '../LoadingSkeleton';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
+import { isResizingItemAtom } from './atoms';
 
 interface DashboardItemProps {
   additionalMemoProps?: Array<unknown>;
@@ -55,6 +58,18 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
     const { classes, cx } = useDashboardItemStyles({ hasHeader });
     const theme = useTheme();
 
+    const isResizingItem = useAtomValue(isResizingItemAtom);
+
+    const isResizing = useMemo(
+      () => equals(id, isResizingItem),
+      [isResizingItem, id]
+    );
+
+    const sanitizedReactGridLayoutClassName = useMemo(
+      () => (isResizing ? className : className?.replace(' resizing ', '')),
+      [className, isResizing]
+    );
+
     const listeners = {
       onMouseDown,
       onMouseUp,
@@ -75,7 +90,7 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
       Component: (
         <div
           {...cardContainerListeners}
-          className={className}
+          className={sanitizedReactGridLayoutClassName}
           ref={ref}
           style={{
             ...style,

package/src/Dashboard/Layout.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
+import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 
@@ -12,6 +13,7 @@ import {
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
 import Grid from './Grid';
+import { isResizingItemAtom } from './atoms';
 
 const ReactGridLayout = WidthProvider(GridLayout);
 
@@ -36,10 +38,20 @@ const DashboardLayout = <T extends Layout>({
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
 
+  const setIsResizingItem = useSetAtom(isResizingItemAtom);
+
   const resize = (): void => {
     setColumns(getColumnsFromScreenSize());
   };
 
+  const startResize = useCallback((_, __, newItem: T) => {
+    setIsResizingItem(newItem.i);
+  }, []);
+
+  const stopResize = useCallback(() => {
+    setIsResizingItem(null);
+  }, []);
+
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -66,6 +78,8 @@ const DashboardLayout = <T extends Layout>({
                 rowHeight={rowHeight}
                 width={width}
                 onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
               >
                 {children}
               </ReactGridLayout>

package/src/Dashboard/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isResizingItemAtom = atom<string | null>(null);

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

@@ -55,7 +55,7 @@ describe('Bar stack', () => {
   it('adjusts size based on the provided width and height', () => {
     initialize({ displayLegend: false, height: '300px', width: '300px' });
 
-    cy.findByTestId('barStack').should('have.css', 'height', '300px');
+    cy.findByTestId('barStack').should('have.css', 'height', '270px');
 
     cy.makeSnapshot();
   });

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -50,6 +50,10 @@ const Template = (args): JSX.Element => {
   return <ResponsiveBarStack height={300} width={500} {...args} />;
 };
 
+const SmallTemplate = (args): JSX.Element => {
+  return <ResponsiveBarStack height={120} width={120} {...args} />;
+};
+
 export const Vertical: Story = {
   args: { data, title: 'hosts' },
   render: Template
@@ -123,3 +127,14 @@ export const HorizontalWithoutLegend: Story = {
   },
   render: Template
 };
+
+export const SmallDisplay: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    title: 'hosts',
+    variant: 'horizontal'
+  },
+  render: SmallTemplate
+};

package/src/Graph/BarStack/BarStack.styles.ts

@@ -13,12 +13,16 @@ export const useBarStackStyles = makeStyles()((theme) => ({
     gap: theme.spacing(1.5),
     justifyContent: 'center'
   },
+  smallTitle: {
+    fontSize: theme.typography.body1.fontSize
+  },
   svgContainer: {
     alignItems: 'center',
     backgroundColor: theme.palette.background.panelGroups,
     borderRadius: theme.spacing(1.25),
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    padding: theme.spacing(1)
   },
   svgWrapper: {
     alignItems: 'center',

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -5,7 +5,7 @@ import { Group } from '@visx/group';
 import numeral from 'numeral';
 import { Text } from '@visx/text';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
+import { equals, lt } from 'ramda';
 
 import { Tooltip } from '../../components';
 import { LegendProps } from '../Legend/models';
@@ -36,7 +36,7 @@ const ResponsiveBarStack = ({
   legendDirection = 'column'
 }: BarStackProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
-  const { classes } = useBarStackStyles();
+  const { classes, cx } = useBarStackStyles();
 
   const titleRef = useRef(null);
   const legendRef = useRef(null);
@@ -50,7 +50,6 @@ const ResponsiveBarStack = ({
     total,
     xScale,
     yScale,
-    svgWrapperWidth,
     svgContainerSize,
     isVerticalBar
   } = useResponsiveBarStack({
@@ -68,24 +67,28 @@ const ResponsiveBarStack = ({
     ? BarStackVertical
     : BarStackHorizontal;
 
+  const isSmallHeight = isVerticalBar ? lt(height, 190) : lt(height, 100);
+  const isSmallWidth = isVerticalBar ? lt(width, 80) : lt(width, 350);
+  const mustDisplayLegend = isSmallWidth ? false : displayLegend;
+
   return (
-    <div className={classes.container} style={{ height, width }}>
-      <div
-        className={classes.svgWrapper}
-        style={{
-          minHeight: height,
-          width: svgWrapperWidth
-        }}
-      >
+    <div className={classes.container} style={{ width }}>
+      <div className={classes.svgWrapper}>
         {title && (
-          <div className={classes.title} data-testid="Title" ref={titleRef}>
+          <div
+            className={cx(classes.title, isSmallHeight && classes.smallTitle)}
+            data-testid="Title"
+            ref={titleRef}
+          >
             {`${numeral(total).format('0a').toUpperCase()} `} {t(title)}
           </div>
         )}
         <div
           className={classes.svgContainer}
           data-testid="barStack"
-          style={svgContainerSize}
+          style={{
+            width: svgContainerSize.width
+          }}
         >
           <svg
             data-variant={variant}
@@ -155,7 +158,7 @@ const ResponsiveBarStack = ({
                                 isVerticalBar ? bar.height - 1 : bar.height
                               }
                               key={`bar-stack-${barStack.index}-${bar.index}`}
-                              ry={10}
+                              ry={4}
                               width={isVerticalBar ? bar.width : bar.width - 1}
                               x={bar.x}
                               y={bar.y}
@@ -190,7 +193,7 @@ const ResponsiveBarStack = ({
           </svg>
         </div>
       </div>
-      {displayLegend && (
+      {mustDisplayLegend && (
         <div data-testid="Legend" ref={legendRef}>
           <Legend
             data={data}

package/src/Graph/BarStack/useResponsiveBarStack.ts

@@ -1,5 +1,5 @@
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { equals, pluck } from 'ramda';
+import { equals, gt, pluck } from 'ramda';
 
 import { getValueByUnit } from '../common/utils';
 import { LegendScale } from '../Legend/models';
@@ -29,7 +29,6 @@ interface useBarStackState {
   keys: Array<string>;
   legendScale: LegendScale;
   svgContainerSize: Size;
-  svgWrapperWidth: number;
   total: number;
   xScale;
   yScale;
@@ -53,17 +52,15 @@ const useResponsiveBarStack = ({
   const horizontalGap = widthOfLegend > 0 ? 12 : 0;
   const verticalGap = heightOfTitle > 0 ? 8 : 0;
 
-  const svgWrapperWidth = isVerticalBar
-    ? size + 36
-    : width - widthOfLegend - horizontalGap;
-
   const svgContainerSize = {
     height: isVerticalBar ? height - heightOfTitle - verticalGap : size,
     width: isVerticalBar ? size : width - widthOfLegend - horizontalGap
   };
 
   const barSize = {
-    height: svgContainerSize.height - 16,
+    height: gt(height / 2, svgContainerSize.height - 16)
+      ? svgContainerSize.height - 16
+      : svgContainerSize.height - 46,
     width: svgContainerSize.width - 16
   };
 
@@ -121,7 +118,6 @@ const useResponsiveBarStack = ({
     keys,
     legendScale,
     svgContainerSize,
-    svgWrapperWidth,
     total,
     xScale,
     yScale

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -85,7 +85,9 @@ const AnimatedPie = <Datum,>({
                   'label',
                   thresholds[thresholdType as 'warning' | 'critical']
                 ).map((label) => (
-                  <Typography key={label}>{label}</Typography>
+                  <Typography key={label} variant="body2">
+                    {label}
+                  </Typography>
                 ))}
               </div>
             ),

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -12,8 +12,16 @@ export default meta;
 type Story = StoryObj<typeof Gauge>;
 
 const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
-    <Gauge {...props} />
+  <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <div style={{ height: '500px', width: '500px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '100px', width: '120px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '300px', width: '200px' }}>
+      <Gauge {...props} />
+    </div>
   </div>
 );
 

package/src/Graph/Gauge/PieData.tsx

@@ -9,6 +9,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import { thresholdThickness } from './Thresholds';
 import AnimatedPie from './AnimatedPie';
 import { GaugeProps } from './models';
+import { angles } from './utils';
 
 const dataThickness = 45;
 
@@ -37,15 +38,19 @@ const PieData = ({
     range: [pieColor, 'transparent']
   });
 
+  const dataThicknessFactor = radius / dataThickness / 3;
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
   return (
     <Pie
+      {...angles}
       data={pieData}
-      endAngle={-Math.PI / 2}
-      innerRadius={radius - dataThickness}
-      outerRadius={radius - thresholdThickness * 1.3}
+      innerRadius={radius - dataThickness * dataThicknessFactor}
+      outerRadius={
+        radius - thresholdThickness * thresholdThicknessFactor * 1.25
+      }
       pieSortValues={() => -1}
       pieValue={identity}
-      startAngle={Math.PI / 2}
     >
       {(pie) => (
         <AnimatedPie<number>

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,15 +1,17 @@
 import { useRef } from 'react';
 
 import { Group } from '@visx/group';
-import { flatten, head, pluck } from 'ramda';
 import { Tooltip } from '@visx/visx';
+import { flatten, head, pluck } from 'ramda';
 
-import { Box, Fade, useTheme } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
 
 import { Metric } from '../common/timeSeries/models';
 import { formatMetricValueWithUnit } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { useTooltipStyles } from '../common/useTooltipStyles';
 
 import Thresholds from './Thresholds';
 import PieData from './PieData';
@@ -22,11 +24,6 @@ interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
   width: number;
 }
 
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
 const ResponsiveGauge = ({
   width,
   height,
@@ -35,24 +32,21 @@ const ResponsiveGauge = ({
   displayAsRaw,
   baseColor
 }: Props): JSX.Element => {
+  const { classes } = useTooltipStyles();
   const svgRef = useRef<SVGSVGElement>(null);
 
   const theme = useTheme();
 
-  const {
-    showTooltip,
-    hideTooltip,
-    tooltipOpen,
-    tooltipLeft,
-    tooltipTop,
-    tooltipData
-  } = Tooltip.useTooltip();
+  const { showTooltip, hideTooltip, tooltipOpen, tooltipData } =
+    Tooltip.useTooltip();
 
   const innerWidth = width - margins.left - margins.right;
   const innerHeight = height - margins.top - margins.bottom;
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
-  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const baseSize = Math.min(width, height);
+  const heightOverWidthRatio = height / width;
+  const radius = baseSize / (heightOverWidthRatio > 0.9 ? 2 : 1.8);
   const thresholdValues = thresholds.enabled
     ? flatten([
         pluck('value', thresholds.warning),
@@ -72,11 +66,6 @@ const ResponsiveGauge = ({
     thresholds
   });
 
-  const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
-  const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
-
-  const isSmallWidget = height < 240;
-
   const gaugeValue = formatMetricValueWithUnit({
     base: 1000,
     isRaw: displayAsRaw,
@@ -93,54 +82,51 @@ const ResponsiveGauge = ({
         width: '100%'
       }}
     >
-      <svg height={height} ref={svgRef} width={width}>
-        <Group left={centerX + margins.left} top={centerY + height / 6}>
-          <Thresholds
-            adaptedMaxValue={adaptedMaxValue}
-            hideTooltip={hideTooltip}
-            metric={metric}
-            radius={radius}
-            showTooltip={showTooltip}
-            thresholds={thresholds}
-          />
-          <PieData
-            adaptedMaxValue={adaptedMaxValue}
-            baseColor={baseColor}
-            metric={metric}
-            radius={radius}
-            thresholds={thresholds}
-          />
-        </Group>
-        <text
-          dominantBaseline="middle"
-          style={{
-            fill: pieColor,
-            ...theme.typography.h3,
-            fontSize:
-              Math.min(width, height) / 7 -
-              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
-          }}
-          textAnchor="middle"
-          x="50%"
-          y={isSmallWidget ? 130 : height - height / 2.3}
-        >
-          {gaugeValue}
-        </text>
-      </svg>
-      <Fade in={tooltipOpen && thresholds.enabled}>
-        <Tooltip.Tooltip
-          left={(tooltipLeft || 0) - svgLeft}
-          style={{
-            ...baseStyles,
-            backgroundColor: theme.palette.background.paper,
-            color: theme.palette.text.primary,
-            transform: 'translate(-50%, -24px)'
-          }}
-          top={(tooltipTop || 0) - svgTop + 20}
-        >
-          {tooltipData}
-        </Tooltip.Tooltip>
-      </Fade>
+      <MuiTooltip
+        classes={{
+          tooltip: classes.tooltip
+        }}
+        label={tooltipData}
+        open={thresholds.enabled && tooltipOpen}
+        placement="top"
+      >
+        <svg height={height} ref={svgRef} width={width}>
+          <Group
+            left={centerX + margins.left}
+            top={centerY + margins.top + baseSize / 8}
+          >
+            <Thresholds
+              adaptedMaxValue={adaptedMaxValue}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              radius={radius}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+            <PieData
+              adaptedMaxValue={adaptedMaxValue}
+              baseColor={baseColor}
+              metric={metric}
+              radius={radius}
+              thresholds={thresholds}
+            />
+            <text
+              dominantBaseline="middle"
+              style={{
+                fill: pieColor,
+                ...theme.typography.h3,
+                fontSize:
+                  Math.min(width, height) / (gaugeValue?.length || 1) + 3
+              }}
+              textAnchor="middle"
+              x="0%"
+              y="0%"
+            >
+              {gaugeValue}
+            </text>
+          </Group>
+        </svg>
+      </MuiTooltip>
     </Box>
   );
 };

package/src/Graph/Gauge/Thresholds.tsx

@@ -6,6 +6,7 @@ import { useTheme } from '@mui/material';
 
 import AnimatedPie from './AnimatedPie';
 import { GaugeProps } from './models';
+import { angles } from './utils';
 
 export const thresholdThickness = 12;
 
@@ -83,18 +84,19 @@ const Thresholds = ({
     }
   ];
 
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
   return (
     <>
       {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
         <Pie
+          {...angles}
           data={thresholdArc}
-          endAngle={-Math.PI / 2}
-          innerRadius={radius - thresholdThickness}
+          innerRadius={radius - thresholdThickness * thresholdThicknessFactor}
           key={`arc-${thresholdArc[0].name}`}
           outerRadius={radius}
           pieSortValues={() => -1}
           pieValue={(d) => d.value}
-          startAngle={Math.PI / 2}
         >
           {(pie) => (
             <AnimatedPie<{ name: string; value: number }>

package/src/Graph/Gauge/utils.ts

@@ -0,0 +1,4 @@
+export const angles = {
+  endAngle: -(2 * Math.PI) / 3,
+  startAngle: (2 * Math.PI) / 3
+};

package/src/Graph/HeatMap/HeatMap.tsx

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

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -21,8 +21,12 @@ const ResponsiveHeatMap = <TData,>({
   arrowClassName,
   tooltipContent,
   tileSizeFixed,
-  displayTooltipCondition = T
-}: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
+  displayTooltipCondition = T,
+  height
+}: HeatMapProps<TData> & {
+  height: number;
+  width: number;
+}): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
 
   const tileSize = useMemo(() => {
@@ -40,7 +44,11 @@ const ResponsiveHeatMap = <TData,>({
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
 
-    if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
+    if (
+      (lt(height, maxTileSize) ||
+        (lt(width, 680) && gt(maxTotalTilesWidth, width))) &&
+      !tileSizeFixed
+    ) {
       return smallestTileSize;
     }
 
@@ -49,7 +57,7 @@ const ResponsiveHeatMap = <TData,>({
     }
 
     return tileSizeFixed ? maxTileSize : tileWidth;
-  }, [width, tiles]);
+  }, [width, tiles, height]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
 

package/src/Graph/LineChart/Header/index.tsx

@@ -2,7 +2,7 @@ import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { useStyles } from '../LineChart.styles';
+import { useLineChartStyles } from '../LineChart.styles';
 import { LineChartHeader } from '../models';
 
 interface Props {
@@ -11,7 +11,7 @@ interface Props {
 }
 
 const Header = ({ title, header }: Props): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes } = useLineChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 
-import useAxisY from '../../BasicComponents/Axes/useAxisY';
+import useAxisY from '../../../common/Axes/useAxisY';
 import { margin } from '../../common';
 import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -7,7 +7,8 @@ import {
   isNil,
   prop,
   reverse,
-  sortBy
+  sortBy,
+  T
 } from 'ramda';
 
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
@@ -29,7 +30,7 @@ export const useGraphValueTooltip = ({
   const { toDate, toTime } = useLocaleDateTimeFormat();
   const graphTooltipData = useAtomValue(graphTooltipDataAtom);
 
-  if (isNil(graphTooltipData)) {
+  if (isNil(graphTooltipData) || isNil(graphTooltipData.metrics)) {
     return null;
   }
 
@@ -48,7 +49,8 @@ export const useGraphValueTooltip = ({
     [
       equals('descending'),
       always(reverse(sortBy(prop('value'), filteredMetrics)))
-    ]
+    ],
+    [T, always(filteredMetrics)]
   ])(sortOrder);
 
   return {