@centreon/ui 24.4.1-MON-38194-widgets-display-optimizations.1 → 24.4.1-MON-38194-widgets-display-optimizations.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-38194-widgets-display-optimizations.1",
+  "version": "24.4.1-MON-38194-widgets-display-optimizations.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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

@@ -6,7 +6,7 @@ interface MakeStylesProps {
   limitLegendRows?: boolean;
 }
 
-export const legendWidth = 21;
+export const legendWidth = 25;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
@@ -62,12 +62,6 @@ interface StylesProps {
 
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
-    container: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
-      width: '100%'
-    },
     disabled: {
       color: theme.palette.text.disabled
     },
@@ -78,12 +72,6 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       minWidth: theme.spacing(1.5),
       width: theme.spacing(1.5)
     },
-    legendName: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
-    },
     markerAndLegendName: {
       alignItems: 'center',
       display: 'flex',
@@ -97,7 +85,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightBold,
       lineHeight: 1
     }
   })

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -1,5 +1,3 @@
-import { isEmpty } from 'ramda';
-
 import { Typography } from '@mui/material';
 
 import {
@@ -36,60 +34,47 @@ const LegendHeader = ({
   const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
-  const hasUnit = !isEmpty(unit);
   const unitName = `(${unit})`;
 
-  const getEndText = (): string => {
-    if (value) {
-      return value;
-    }
-
-    return hasUnit ? ` ${unitName}` : '';
-  };
-
   return (
-    <div className={classes.container}>
-      <Tooltip
-        followCursor={false}
-        label={
-          minMaxAvg ? (
-            <div>
-              <Typography>{`${legendName} ${unitName}`}</Typography>
-              <div className={classes.minMaxAvgContainer}>
-                {minMaxAvg.map(({ label, value: subValue }) => (
-                  <LegendContent
-                    data={formatMetricValue({
-                      unit: line.unit,
-                      value: subValue
-                    })}
-                    key={label}
-                    label={label}
-                  />
-                ))}
-              </div>
+    <Tooltip
+      followCursor={false}
+      label={
+        minMaxAvg ? (
+          <div>
+            <Typography>{`${legendName} ${unitName}`}</Typography>
+            <div className={classes.minMaxAvgContainer}>
+              {minMaxAvg.map(({ label, value: subValue }) => (
+                <LegendContent
+                  data={formatMetricValue({
+                    unit: line.unit,
+                    value: subValue
+                  })}
+                  key={label}
+                  label={label}
+                />
+              ))}
             </div>
-          ) : (
-            `${legendName} ${unitName}`
-          )
-        }
-        placement="top"
-      >
-        <div className={classes.markerAndLegendName}>
-          <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
-          <EllipsisTypography
-            className={cx(classes.text, classes.legendName)}
-            data-mode={
-              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
-            }
-          >
-            {metricName}
-          </EllipsisTypography>
-        </div>
-      </Tooltip>
-      {hasUnit && (
-        <Typography className={classes.text}>{getEndText()}</Typography>
-      )}
-    </div>
+          </div>
+        ) : (
+          `${legendName} ${unitName}`
+        )
+      }
+      placement="top"
+    >
+      <div className={classes.markerAndLegendName}>
+        <div className={cx(classes.icon, { [classes.disabled]: disabled })} />
+        <EllipsisTypography
+          className={classes.text}
+          data-mode={
+            value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
+          }
+          variant="body2"
+        >
+          {metricName}
+        </EllipsisTypography>
+      </div>
+    </Tooltip>
   );
 };