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

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -76,11 +76,12 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       border: 'none',
       borderRadius: theme.spacing(1),
       height: '100%',
-      paddingBottom: theme.spacing(4),
       width: '100%'
     },
     widgetContent: {
-      height: '100%'
+      height: hasHeader
+        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
+        : `calc(100% - ${theme.spacing(3.5)})`
     },
     widgetHeader: {
       '&:hover': {
@@ -92,19 +93,17 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(2.5, 2.5, 0.5),
+      padding: theme.spacing(0, 1.5),
       position: 'relative'
     },
     widgetHeaderDraggable: {
       height: '100%',
-      left: 0,
       position: 'absolute',
-      top: 0,
-      width: '100%'
+      width: '95%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2.5, 3) : theme.spacing(1, 2)
+      padding: theme.spacing(0.5, 1.5, 1.5)
     }
   })
 );

package/src/Graph/LineChart/BasicComponents/ThresholdLine.tsx

@@ -2,6 +2,8 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
+import { margin } from '../common';
+
 interface Props {
   hideTooltip: () => void;
   label: string;
@@ -28,7 +30,7 @@ export const ThresholdLine = ({
   const onMouseEnter = (): void =>
     showTooltip({
       tooltipData: label,
-      tooltipLeft: 0,
+      tooltipLeft: -(margin.left + margin.right),
       tooltipTop: scaledValue
     });
 

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

@@ -70,7 +70,6 @@ interface CommonData {
 
 interface TimeShiftZonesData extends InteractedZone {
   graphInterval: GraphInterval;
-  loading: boolean;
 }
 
 interface Props {
@@ -234,7 +233,7 @@ const InteractionWithGraph = ({
           value: timeValue?.[metric_id]
         }),
         linesData
-      ).filter(({ value }) => value)
+      ).filter(({ value }) => !isNil(value))
     });
   };
 

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

@@ -6,7 +6,7 @@ interface MakeStylesProps {
   limitLegendRows?: boolean;
 }
 
-export const legendWidth = 25;
+export const legendWidth = 21;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
@@ -28,10 +28,11 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       columnGap: theme.spacing(3),
       display: 'grid',
       gridAutoRows: theme.spacing(legendItemHeight),
-      gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(legendWidth)})`,
+      gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(legendWidth)}, 1fr))`,
       maxHeight: limitLegendRows
         ? theme.spacing(legendItemHeight * 2 + 1)
         : 'unset',
+      overflowX: 'hidden',
       overflowY: 'auto',
       rowGap: theme.spacing(1),
       width: '100%'
@@ -62,6 +63,9 @@ interface StylesProps {
 
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
+    container: {
+      width: '100%'
+    },
     disabled: {
       color: theme.palette.text.disabled
     },
@@ -72,6 +76,9 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       minWidth: theme.spacing(1.5),
       width: theme.spacing(1.5)
     },
+    legendName: {
+      maxWidth: '95%'
+    },
     markerAndLegendName: {
       alignItems: 'center',
       display: 'flex',
@@ -85,7 +92,8 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
-      fontWeight: theme.typography.fontWeightBold,
+      fontSize: '0.75rem',
+      fontWeight: theme.typography.fontWeightMedium,
       lineHeight: 1
     }
   })

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

@@ -29,52 +29,52 @@ const LegendHeader = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
-  const { unit, name, legend } = line;
+  const { name, legend } = line;
 
   const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
-  const unitName = `(${unit})`;
 
   return (
-    <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 className={classes.container}>
+      <Tooltip
+        followCursor={false}
+        label={
+          minMaxAvg ? (
+            <div>
+              <Typography>{legendName}</Typography>
+              <div className={classes.minMaxAvgContainer}>
+                {minMaxAvg.map(({ label, value: subValue }) => (
+                  <LegendContent
+                    data={formatMetricValue({
+                      unit: line.unit,
+                      value: subValue
+                    })}
+                    key={label}
+                    label={label}
+                  />
+                ))}
+              </div>
             </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>
+          ) : (
+            legendName
+          )
+        }
+        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>
+    </div>
   );
 };
 

package/src/Graph/LineChart/LineChart.tsx

@@ -14,7 +14,6 @@ import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import LoadingProgress from './BasicComponents/LoadingProgress';
 import useFilterLines from './BasicComponents/useFilterLines';
 import { useStyles } from './LineChart.styles';
 import Header from './Header';
@@ -45,7 +44,6 @@ interface Props extends LineChartProps {
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   limitLegend?: false | number;
-  marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
@@ -63,7 +61,6 @@ const LineChart = ({
   shapeLines,
   axis,
   displayAnchor,
-  loading,
   zoomPreview,
   graphInterval,
   timeShiftZones,
@@ -73,7 +70,6 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -104,8 +100,7 @@ const LineChart = ({
     (height || 0) > 0
       ? (height || 0) -
         margin.top -
-        margin.bottom -
-        marginBottom -
+        5 -
         (legendRef.current?.getBoundingClientRect().height || 0)
       : 0;
 
@@ -196,11 +191,6 @@ const LineChart = ({
           title={<GraphValueTooltip base={baseAxis} />}
         >
           <div className={classes.container}>
-            <LoadingProgress
-              display={loading}
-              height={graphHeight}
-              width={width}
-            />
             <svg
               height={graphHeight + margin.top}
               ref={graphSvgRef}
@@ -259,8 +249,7 @@ const LineChart = ({
                   }}
                   timeShiftZonesData={{
                     ...timeShiftZones,
-                    graphInterval,
-                    loading
+                    graphInterval
                   }}
                   zoomData={{ ...zoomPreview }}
                 />

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -13,8 +13,8 @@ const useSkeletonStyles = makeStyles<Props>()(
       display: 'grid',
       gridGap: theme.spacing(1),
       gridTemplateRows: `${
-        displayTitleSkeleton ? '1fr' : ''
-      } ${graphHeight}px ${theme.spacing(7)}`,
+        displayTitleSkeleton ? '0.8fr' : ''
+      } ${graphHeight}px ${theme.spacing(2)}`,
       height: '100%'
     },
     loadingSkeletonLine: {

package/src/Graph/LineChart/index.tsx

@@ -30,7 +30,6 @@ interface Props extends Partial<LineChartProps> {
   legend: LegendModel;
   limitLegend?: false | number;
   loading: boolean;
-  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
   thresholdUnit?: string;
@@ -54,7 +53,6 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -65,7 +63,7 @@ const WrapperLineChart = ({
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? true}
+        displayTitleSkeleton={header?.displayTitle ?? false}
         graphHeight={height || 200}
       />
     );
@@ -78,7 +76,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
+      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({
@@ -98,8 +96,6 @@ const WrapperLineChart = ({
               height={height || responsiveHeight}
               legend={legend}
               limitLegend={limitLegend}
-              loading={loading}
-              marginBottom={marginBottom}
               shapeLines={shapeLines}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}

package/src/Graph/LineChart/models.ts

@@ -88,7 +88,6 @@ export interface LineChartProps {
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;
-  loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;

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

@@ -1,6 +1,9 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useTextStyles = makeStyles()((theme) => ({
+  critical: {
+    color: theme.palette.error.main
+  },
   graphText: {
     alignItems: 'center',
     display: 'flex',
@@ -9,9 +12,17 @@ export const useTextStyles = makeStyles()((theme) => ({
     height: '100%',
     justifyContent: 'center'
   },
+  threshold: {
+    textAlign: 'center'
+  },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5)
+    gap: theme.spacing(5),
+    whiteSpace: 'nowrap',
+    width: '100%'
+  },
+  warning: {
+    color: theme.palette.warning.main
   }
 }));

package/src/Graph/Text/Text.tsx

@@ -2,6 +2,7 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
+import FluidTypography from '../../Typography/FluidTypography';
 import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValueWithUnit,
@@ -30,7 +31,7 @@ export const Text = ({
   baseColor
 }: Props): JSX.Element | null => {
   const theme = useTheme();
-  const { classes } = useTextStyles();
+  const { classes, cx } = useTextStyles();
 
   if (isNil(data)) {
     return null;
@@ -74,16 +75,20 @@ export const Text = ({
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
-          <Typography sx={{ color: 'warning.main' }} variant="h5">
-            {labels.warning}
-            {': '}
-            {warningThresholdLabels.join(' - ')}
-          </Typography>
-          <Typography sx={{ color: 'error.main' }} variant="h5">
-            {labels.critical}
-            {': '}
-            {criticalThresholdLabels.join(' - ')}
-          </Typography>
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.warning)}
+            max="30px"
+            pref={14}
+            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.critical)}
+            max="30px"
+            pref={14}
+            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
         </div>
       )}
     </div>

package/src/ThemeProvider/index.tsx

@@ -283,7 +283,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       fontSize: '0.75rem'
     },
     button: {
-      fontSize: '0.8125rem',
       textTransform: 'none'
     },
     caption: {

package/src/components/Button/Button.styles.ts

@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme) => ({
         paddingLeft: theme.spacing(2),
         paddingRight: theme.spacing(2)
       },
-      fontSize: theme.typography.button.fontSize,
+      fontSize: '14px',
       height: 'unset',
       lineHeight: '22px'
     },
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({
       color: theme.palette.primary.main
     },
 
-    textWrap: 'nowrap',
+    textWrap: 'noWrap',
     transition: 'unset'
   }
 }));