@centreon/ui 25.5.4 → 25.5.5

package/package.json

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

package/src/Graph/Gauge/Gauge.tsx

@@ -1,23 +1,28 @@
-import { ParentSize } from '../..';
+import { Box } from '@mui/material';
 import { LineChartData, Thresholds } from '../common/models';
 import { getMetricWithLatestData } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
 
 import ResponsiveGauge from './ResponsiveGauge';
+import { useResizeObserver } from './useResizeObserver';
 
 export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;
   thresholds: Thresholds;
+  max?: number;
 }
 
 export const Gauge = ({
   thresholds,
   data,
   displayAsRaw,
-  baseColor
+  baseColor,
+  max
 }: Props): JSX.Element | null => {
+  const { width, height, ref } = useResizeObserver();
+
   if (!data) {
     return null;
   }
@@ -25,17 +30,16 @@ export const Gauge = ({
   const metric = getMetricWithLatestData(data) as Metric;
 
   return (
-    <ParentSize>
-      {({ width, height }) => (
-        <ResponsiveGauge
-          baseColor={baseColor}
-          displayAsRaw={displayAsRaw}
-          height={height}
-          metric={metric}
-          thresholds={thresholds}
-          width={width}
-        />
-      )}
-    </ParentSize>
+    <Box sx={{ width: '100%', height: '100%' }} ref={ref}>
+      <ResponsiveGauge
+        baseColor={baseColor}
+        displayAsRaw={displayAsRaw}
+        height={height}
+        metric={metric}
+        thresholds={thresholds}
+        width={width}
+        max={max}
+      />
+    </Box>
   );
 };

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -22,6 +22,7 @@ interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
   height: number;
   metric: Metric;
   width: number;
+  max?: number;
 }
 
 const ResponsiveGauge = ({
@@ -30,7 +31,8 @@ const ResponsiveGauge = ({
   thresholds,
   metric,
   displayAsRaw,
-  baseColor
+  baseColor,
+  max
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const svgRef = useRef<SVGSVGElement>(null);
@@ -53,11 +55,13 @@ const ResponsiveGauge = ({
         pluck('value', thresholds.critical)
       ])
     : [0];
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
+  const adaptedMaxValue =
+    max ||
+    Math.max(
+      metric.maximum_value || 0,
+      Math.max(...thresholdValues) * 1.1,
+      head(metric.data) as number
+    );
 
   const pieColor = getColorFromDataAndTresholds({
     baseColor,

package/src/Graph/Gauge/useResizeObserver.ts

@@ -0,0 +1,68 @@
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+interface UseResizeObserverState {
+  width: number;
+  height: number;
+  ref: RefObject<HTMLDivElement | null>;
+}
+
+export const useResizeObserver = (): UseResizeObserverState => {
+  const [elementResolved, setElementResolved] = useState(false);
+  const [size, setSize] = useState([0, 0]);
+  const targetRef = useRef<HTMLDivElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const resize = useCallback((entries: Array<ResizeObserverEntry>): void => {
+    setSize([entries[0].contentRect.width, entries[0].contentRect.height]);
+  }, []);
+
+  const observeElement = useCallback(() => {
+    if (!targetRef.current) {
+      return;
+    }
+
+    observerRef.current = new ResizeObserver(resize);
+    observerRef.current?.observe(targetRef.current);
+  }, [resize, targetRef.current]);
+
+  const unobserveElement = useCallback((): void => {
+    if (!targetRef.current) {
+      return;
+    }
+
+    observerRef.current?.unobserve(targetRef.current);
+    observerRef.current = null;
+    setElementResolved(false);
+  }, []);
+
+  useEffect(() => {
+    if (elementResolved) {
+      return;
+    }
+    setElementResolved(!!targetRef.current?.tagName);
+  });
+
+  useEffect(() => {
+    if (!elementResolved) {
+      return;
+    }
+
+    observeElement();
+
+    return () => {
+      unobserveElement();
+    };
+  }, [elementResolved]);
+
+  return {
+    width: size[0],
+    height: size[1],
+    ref: targetRef
+  };
+};

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -4,7 +4,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { Group, Tooltip } from '@visx/visx';
-import { equals, flatten, head, lt, pluck } from 'ramda';
+import { clamp, equals, flatten, head, lt, pluck } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -35,7 +35,8 @@ const ResponsiveSingleBar = ({
   displayAsRaw,
   baseColor,
   size = 'medium',
-  showLabels = true
+  showLabels = true,
+  max
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const theme = useTheme();
@@ -51,11 +52,13 @@ const ResponsiveSingleBar = ({
       ])
     : [0];
 
-  const adaptedMaxValue = Math.max(
-    metric.maximum_value || 0,
-    Math.max(...thresholdValues) * 1.1,
-    head(metric.data) as number
-  );
+  const adaptedMaxValue =
+    max ||
+    Math.max(
+      metric.maximum_value || 0,
+      Math.max(...thresholdValues) * 1.1,
+      head(metric.data) as number
+    );
 
   const { showTooltip, hideTooltip, tooltipOpen, tooltipData } =
     Tooltip.useTooltip();
@@ -72,7 +75,7 @@ const ResponsiveSingleBar = ({
     [latestMetricData, thresholds, theme]
   );
 
-  const isSmall = equals(size, 'small') || isSmallHeight;
+  const isSmall = equals(size, 'small');
 
   const textStyle = isSmall ? theme.typography.h6 : theme.typography.h4;
 
@@ -118,14 +121,15 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barHeight = isSmallHeight ? barHeights.small : barHeights[size];
-
   const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
 
-  const realBarHeight =
-    !isSmall && textHeight + barHeight > height
-      ? height - textHeight - 2 * margins.top
-      : barHeight;
+  const realBarHeight = !isSmall
+    ? clamp(
+        barHeights.small,
+        barHeights.medium,
+        height - textHeight - 2 * margins.top
+      )
+    : barHeights.small;
 
   return (
     <div

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -66,12 +66,12 @@ export const ThresholdLine = ({
         x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 6
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 2
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
       />
@@ -83,12 +83,12 @@ export const ThresholdLine = ({
         x2={scaledValue + 1}
         y1={
           isSmall
-            ? groupMargin - lineMargin + 5
+            ? groupMargin - lineMargin
             : groupMargin + lineMargin + margins.top
         }
         y2={
           isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top + 5
+            ? barHeight + groupMargin - lineMargin + margins.top - 6
             : barHeight + groupMargin + lineMargin + 2 * margins.top
         }
         onMouseEnter={onMouseEnter}

package/src/Graph/SingleBar/models.ts

@@ -7,4 +7,5 @@ export interface SingleBarProps {
   showLabels?: boolean;
   size?: 'medium' | 'small';
   thresholds: Thresholds;
+  max?: number;
 }

package/src/Graph/Text/Text.styles.ts

@@ -11,8 +11,11 @@ export const useTextStyles = makeStyles()((theme) => ({
     gap: theme.spacing(1),
     justifyContent: 'center'
   },
-  threshold: {
-    textAlign: 'center'
+  thresholdRight: {
+    textAlign: 'start'
+  },
+  thresholdLeft: {
+    textAlign: 'end'
   },
   thresholds: {
     display: 'flex',

package/src/Graph/Text/Text.tsx

@@ -21,6 +21,7 @@ export interface Props {
     warning: string;
   };
   thresholds: Thresholds;
+  prefThresholds?: number;
 }
 
 export const Text = ({
@@ -28,7 +29,8 @@ export const Text = ({
   data,
   displayAsRaw,
   labels,
-  baseColor
+  baseColor,
+  prefThresholds = 14
 }: Props): JSX.Element | null => {
   const theme = useTheme();
   const { classes, cx } = useTextStyles();
@@ -66,7 +68,7 @@ export const Text = ({
     <div className={classes.graphText}>
       <FluidTypography
         max="40px"
-        pref={16}
+        pref={14}
         sx={{ color, fontWeight: 'bold', textAlign: 'center' }}
         text={
           formatMetricValueWithUnit({
@@ -80,16 +82,16 @@ export const Text = ({
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.warning)}
+            containerClassName={cx(classes.thresholdLeft, classes.warning)}
             max="30px"
-            pref={14}
+            pref={prefThresholds}
             text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
             variant="h5"
           />
           <FluidTypography
-            containerClassName={cx(classes.threshold, classes.critical)}
+            containerClassName={cx(classes.thresholdRight, classes.critical)}
             max="30px"
-            pref={14}
+            pref={prefThresholds}
             text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
             variant="h5"
           />