@centreon/ui 24.4.1-MON-154124.7 → 24.4.1-MON-154024.0

package/package.json

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

package/src/Graph/HeatMap/ResponsiveHeatMap.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { T, equals, gt, lt } from 'ramda';
@@ -13,7 +13,6 @@ import { useHeatMapStyles } from './HeatMap.styles';
 const gap = 8;
 const maxTileSize = 120;
 const smallestTileSize = 44;
-const toleratedRangeWidth = 10;
 
 const ResponsiveHeatMap = <TData,>({
   width,
@@ -25,7 +24,6 @@ const ResponsiveHeatMap = <TData,>({
   displayTooltipCondition = T
 }: HeatMapProps<TData> & { width: number }): JSX.Element | null => {
   const { classes, cx } = useHeatMapStyles();
-  const previousTileSize = useRef(0);
 
   const tileSize = useMemo(() => {
     const scaleWidth = scaleLinear({
@@ -41,12 +39,6 @@ const ResponsiveHeatMap = <TData,>({
       tilesLength * maxTileSize + (tilesLength - 1) * gap;
     const theoricalTotalTilesWidth =
       tilesLength * tileWidth + (tilesLength - 1) * gap;
-    const canUpdateTileSize =
-      Math.abs(tileWidth - previousTileSize.current) > toleratedRangeWidth;
-
-    if (!canUpdateTileSize) {
-      return previousTileSize.current;
-    }
 
     if (lt(width, 680) && gt(maxTotalTilesWidth, width) && !tileSizeFixed) {
       return smallestTileSize;
@@ -60,8 +52,6 @@ const ResponsiveHeatMap = <TData,>({
   }, [width, tiles]);
 
   const isSmallestSize = equals(tileSize, smallestTileSize);
-  const isMediumSize = !isSmallestSize && lt(tileSize, 90);
-  previousTileSize.current = tileSize;
 
   if (equals(width, 0)) {
     return null;
@@ -102,14 +92,7 @@ const ResponsiveHeatMap = <TData,>({
             position="right-start"
           >
             <div className={classes.heatMapTileContent}>
-              {children({
-                backgroundColor,
-                data,
-                id,
-                isMediumSize,
-                isSmallestSize,
-                tileSize
-              })}
+              {children({ backgroundColor, data, id, isSmallestSize })}
             </div>
           </Tooltip>
         </Box>

package/src/Graph/HeatMap/model.ts

@@ -10,9 +10,7 @@ interface ChildrenProps<TData> {
   backgroundColor: string;
   data: TData;
   id: string;
-  isMediumSize?: boolean;
   isSmallestSize: boolean;
-  tileSize?: number;
 }
 
 export interface HeatMapProps<TData> {
@@ -21,9 +19,7 @@ export interface HeatMapProps<TData> {
     backgroundColor,
     id,
     data,
-    isSmallestSize,
-    tileSize,
-    isMediumSize
+    isSmallestSize
   }: ChildrenProps<TData>) => ReactElement | boolean | null;
   displayTooltipCondition?: (data: TData) => boolean;
   tileSizeFixed?: boolean;

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

@@ -1,8 +1,10 @@
+import { lt } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { margin } from '../common';
 
 interface MakeStylesProps {
+  height?: number | null;
   limitLegendRows?: boolean;
 }
 
@@ -10,8 +12,16 @@ export const legendWidth = 21;
 const legendItemHeight = 5.25;
 const legendItemHeightCompact = 2;
 
+const getLegendMaxHeight = ({ height }): number => {
+  if (lt(height || 0, 220)) {
+    return 40;
+  }
+
+  return 90;
+};
+
 export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows }) => ({
+  (theme, { limitLegendRows, height = 0 }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
@@ -29,9 +39,6 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       display: 'grid',
       gridAutoRows: theme.spacing(legendItemHeight),
       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),
@@ -40,7 +47,11 @@ export const useStyles = makeStyles<MakeStylesProps>()(
     legend: {
       marginLeft: margin.left,
       marginRight: margin.right,
-      overflow: 'hidden'
+      maxHeight: limitLegendRows
+        ? theme.spacing(legendItemHeight * 2 + 1)
+        : getLegendMaxHeight({ height }),
+      overflowX: 'hidden',
+      overflowY: 'auto'
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),

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

@@ -11,13 +11,14 @@ import { Line } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
 
 import { useStyles } from './Legend.styles';
+import LegendContent from './LegendContent';
 import LegendHeader from './LegendHeader';
 import { GetMetricValueProps, LegendDisplayMode } from './models';
 import useLegend from './useLegend';
-import LegendContent from './LegendContent';
 
 interface Props {
   base: number;
+  height?: number | null;
   limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
@@ -33,9 +34,13 @@ const MainLegend = ({
   limitLegend = false,
   renderExtraComponent,
   setLinesGraph,
-  shouldDisplayLegendInCompactMode
+  shouldDisplayLegendInCompactMode,
+  height
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
+  const { classes, cx } = useStyles({
+    height,
+    limitLegendRows: Boolean(limitLegend)
+  });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -145,7 +150,8 @@ const Legend = (props: Props): JSX.Element => {
     limitLegend,
     lines,
     base,
-    shouldDisplayLegendInCompactMode
+    shouldDisplayLegendInCompactMode,
+    height
   } = props;
 
   return useMemoComponent({
@@ -155,7 +161,8 @@ const Legend = (props: Props): JSX.Element => {
       base,
       toggable,
       limitLegend,
-      shouldDisplayLegendInCompactMode
+      shouldDisplayLegendInCompactMode,
+      height
     ]
   });
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -5,35 +5,35 @@ import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { Thresholds as ThresholdsModel } from '../common/models';
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
-import { Thresholds as ThresholdsModel } from '../common/models';
-import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
+import { CurveType } from './BasicComponents/Lines/models';
+import Thresholds from './BasicComponents/Thresholds';
 import useFilterLines from './BasicComponents/useFilterLines';
-import { useStyles } from './LineChart.styles';
 import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
+import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import Legend from './Legend';
+import { legendWidth } from './Legend/Legend.styles';
+import { useStyles } from './LineChart.styles';
 import { margin } from './common';
 import {
   Data,
   GlobalAreaLines,
   GraphInterval,
-  LineChartProps,
-  LegendModel
+  LegendModel,
+  LineChartProps
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
-import { CurveType } from './BasicComponents/Lines/models';
-import Thresholds from './BasicComponents/Thresholds';
-import { legendWidth } from './Legend/Legend.styles';
-import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 
 const extraMargin = 10;
 
@@ -292,6 +292,7 @@ const LineChart = ({
         <div ref={legendRef}>
           <Legend
             base={baseAxis}
+            height={height}
             limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}

package/src/Graph/common/utils.ts

@@ -1,3 +1,4 @@
+import numeral from 'numeral';
 import {
   T,
   always,
@@ -6,14 +7,14 @@ import {
   gt,
   gte,
   head,
+  last,
   length,
   lt,
   lte,
   pluck
 } from 'ramda';
-import numeral from 'numeral';
 
-import { darken, getLuminance, lighten, Theme } from '@mui/material';
+import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
 import { Thresholds } from './models';