@centreon/ui 23.10.85 → 23.10.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.85",
+  "version": "23.10.86",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

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

@@ -18,10 +18,9 @@ export const useStyles = makeStyles<MakeStylesProps>()(
     },
     items: {
       display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
-      justifyContent: 'center',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, max-content))',
       marginLeft: theme.spacing(0.5),
-      maxHeight: limitLegendRows ? theme.spacing(19) : 'unset',
+      maxHeight: limitLegendRows ? theme.spacing(14) : 'unset',
       overflowY: 'auto',
       width: '100%'
     },
@@ -40,6 +39,7 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       display: 'flex',
       flexDirection: 'row',
       justifyContent: 'start',
+      marginRight: theme.spacing(0.5),
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     },

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

@@ -1,6 +1,6 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 
-import { slice } from 'ramda';
+import { prop, slice, sortBy } from 'ramda';
 import { useAtomValue } from 'jotai';
 
 import { Box, alpha, useTheme } from '@mui/material';
@@ -58,9 +58,11 @@ const MainLegend = ({
     xScale
   });
 
+  const sortedData = sortBy(prop('metric_id'), lines);
+
   const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, lines)
-    : lines;
+    ? slice(0, maxLinesDisplayedLegend, sortedData)
+    : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
     formatMetricValue({

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

@@ -8,10 +8,8 @@ import {
   isNil,
   map,
   pipe,
-  prop,
   propEq,
-  reject,
-  sortBy
+  reject
 } from 'ramda';
 
 import { Line } from '../../common/timeSeries/models';
@@ -49,9 +47,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       { ...getLineByMetric(metric_id), highlight: true }
     ];
 
-    const sortedData = sortBy(prop('metric_id'), data);
-
-    setLinesGraph(sortedData);
+    setLinesGraph(data);
   };
 
   const clearHighlight = (): void => {