@centreon/ui 25.6.10 → 25.6.12

package/package.json

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

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 { clamp, equals, flatten, head, lt, pluck } from 'ramda';
+import { clamp, equals, flatten, head, pluck } from 'ramda';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
@@ -41,8 +41,6 @@ const ResponsiveSingleBar = ({
   const { classes } = useTooltipStyles();
   const theme = useTheme();
 
-  const isSmallHeight = lt(height, 150);
-
   const metric = getMetricWithLatestData(data) as Metric;
   const latestMetricData = head(metric.data) as number;
   const thresholdValues = thresholds.enabled

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

@@ -11,16 +11,13 @@ export const useTextStyles = makeStyles()((theme) => ({
     gap: theme.spacing(1),
     justifyContent: 'center'
   },
-  thresholdRight: {
-    textAlign: 'start'
-  },
-  thresholdLeft: {
-    textAlign: 'end'
+  thresholdLabel: {
+    textAlign: 'center'
   },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5),
+    gap: theme.spacing(1),
     whiteSpace: 'nowrap',
     width: '100%'
   },

package/src/Graph/Text/Text.tsx

@@ -10,6 +10,8 @@ import {
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 
+import { type ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { useTextStyles } from './Text.styles';
 
 export interface Props {
@@ -22,6 +24,7 @@ export interface Props {
   };
   thresholds: Thresholds;
   prefThresholds?: number;
+  minThresholds?: string;
 }
 
 export const Text = ({
@@ -30,10 +33,12 @@ export const Text = ({
   displayAsRaw,
   labels,
   baseColor,
-  prefThresholds = 14
-}: Props): JSX.Element | null => {
+  prefThresholds = 14,
+  minThresholds
+}: Props): ReactElement | null => {
   const theme = useTheme();
   const { classes, cx } = useTextStyles();
+  const { ref, width = 0 } = useResizeObserver();
 
   if (isNil(data)) {
     return null;
@@ -64,8 +69,12 @@ export const Text = ({
     })
   );
 
+  const canDisplayThresholdLabel = width > 150;
+  const warningLabel = canDisplayThresholdLabel ? `${labels.warning}: ` : '';
+  const criticalLabel = canDisplayThresholdLabel ? `${labels.critical}: ` : '';
+
   return (
-    <div className={classes.graphText}>
+    <div className={classes.graphText} ref={ref}>
       <FluidTypography
         max="40px"
         pref={14}
@@ -82,18 +91,20 @@ export const Text = ({
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <FluidTypography
-            containerClassName={cx(classes.thresholdLeft, classes.warning)}
+            containerClassName={cx(classes.thresholdLabel, classes.warning)}
             max="30px"
             pref={prefThresholds}
-            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            text={`${warningLabel}${warningThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
           <FluidTypography
-            containerClassName={cx(classes.thresholdRight, classes.critical)}
+            containerClassName={cx(classes.thresholdLabel, classes.critical)}
             max="30px"
             pref={prefThresholds}
-            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            text={`${criticalLabel}${criticalThresholdLabels.join(' - ')}`}
             variant="h5"
+            min={minThresholds}
           />
         </div>
       )}

package/src/Graph/index.ts

@@ -12,7 +12,7 @@ export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
 export { Timeline } from './Timeline';
 export * from './Tree';
-export type { LineChartData } from './common/models';
+export type { LineChartData, Threshold, Thresholds } from './common/models';
 export * from './common/timeSeries';
 export type { Metric } from './common/timeSeries/models';
 export * from './Chart/models';

package/src/ThemeProvider/palettes.ts

@@ -295,7 +295,9 @@ export const lightPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#000',
-    main: '#FD9B27'
+    main: '#FD9B27',
+    light: '#FCC481',
+    dark: '#FC7E00',
   }
 };
 

package/src/ThemeProvider/tailwindcss.css

@@ -92,6 +92,8 @@
   --color-text-primary: #000000;
   --color-text-secondary: #666666;
   --color-warning-main: #fd9b27;
+  --color-warning-light: #fcc481;
+  --color-warning-dark: #fc7e00;
   --color-white: #ffffff;
   --color-black: #000000;
 }

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { TabContext } from '@mui/lab';
-import { Tab, Tabs as MuiTabs, TabsProps } from '@mui/material';
+import { Tabs as MuiTabs, Tab, TabsProps } from '@mui/material';
 
 import { useTabsStyles } from './Tab.styles';