@centreon/ui 23.10.121 → 24.4.1-0

package/src/Graph/LineChart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -26,7 +26,7 @@ const EventAnnotations = ({
   color,
   annotationHoveredId
 }: Props): JSX.Element => {
-  const events = filter(propEq('type', type), data);
+  const events = filter(propEq(type, 'type'), data);
 
   return (
     <>

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

@@ -0,0 +1,68 @@
+import { useAtomValue } from 'jotai';
+import { equals, isNil } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
+import { formatMetricValueWithUnit } from '../../../common/timeSeries';
+
+import { useGraphValueTooltip } from './useGraphValueTooltip';
+import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
+
+interface Props {
+  base: number;
+}
+
+const GraphValueTooltip = ({ base }: Props): JSX.Element | null => {
+  const { classes } = useGraphValueTooltipStyles();
+  const mousePosition = useAtomValue(mousePositionAtom);
+
+  const graphValue = useGraphValueTooltip();
+
+  if (isNil(graphValue) || isNil(mousePosition)) {
+    return null;
+  }
+
+  return (
+    <div className={classes.tooltipContainer}>
+      <Typography fontWeight="bold">{graphValue.dateTime}</Typography>
+      <div className={classes.metrics}>
+        {graphValue.metrics.map(({ unit, color, id, value, name }) => {
+          const isMetricHighlighted = equals(
+            id,
+            graphValue.highlightedMetricId
+          );
+
+          return (
+            <div
+              className={classes.metric}
+              data-highlight={isMetricHighlighted}
+              data-metric={name}
+              key={id}
+            >
+              <Box
+                className={classes.metricColorBox}
+                sx={{ backgroundColor: color }}
+              />
+              <Typography
+                className={classes.metricName}
+                fontWeight={isMetricHighlighted ? 'bold' : undefined}
+              >
+                {name}
+              </Typography>
+              <Typography fontWeight={isMetricHighlighted ? 'bold' : undefined}>
+                {formatMetricValueWithUnit({
+                  base,
+                  unit,
+                  value
+                })}
+              </Typography>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default GraphValueTooltip;

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -0,0 +1,27 @@
+import { useAtomValue } from 'jotai';
+import { isNil } from 'ramda';
+
+import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
+import { useLocaleDateTimeFormat } from '../../../../utils';
+import { GraphTooltipData } from '../../models';
+
+interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
+  dateTime: string;
+}
+
+export const useGraphValueTooltip = (): UseGraphValueTooltipState | null => {
+  const { toDate, toTime } = useLocaleDateTimeFormat();
+  const graphTooltipData = useAtomValue(graphTooltipDataAtom);
+
+  if (isNil(graphTooltipData)) {
+    return null;
+  }
+
+  const formattedDateTime = `${toDate(graphTooltipData.date)} / ${toTime(graphTooltipData.date)}`;
+
+  return {
+    dateTime: formattedDateTime,
+    highlightedMetricId: graphTooltipData.highlightedMetricId,
+    metrics: graphTooltipData.metrics
+  };
+};

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltipStyles.ts

@@ -0,0 +1,31 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useGraphValueTooltipStyles = makeStyles()((theme) => ({
+  dateTimeLabel: {
+    fontSize: '1.1rem'
+  },
+  metric: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1),
+    weidth: '100%'
+  },
+  metricColorBox: {
+    borderRadius: theme.shape.borderRadius,
+    flexShrink: 0,
+    height: theme.spacing(1.5),
+    width: theme.spacing(1.5)
+  },
+  metricName: {
+    flexGrow: 1
+  },
+  metrics: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: theme.spacing(0.5),
+    width: '100%'
+  },
+  tooltipContainer: {
+    padding: theme.spacing(1)
+  }
+}));

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

@@ -1,6 +1,7 @@
 import { omit } from 'ramda';
 
-import { alpha, useTheme } from '@mui/system';
+import { useTheme } from '@mui/material';
+import { alpha } from '@mui/system';
 
 import Bar from '../Bar';
 

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

@@ -3,7 +3,21 @@ import { MutableRefObject } from 'react';
 import { Event } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
 import { useSetAtom } from 'jotai';
-import { isEmpty, isNil } from 'ramda';
+import {
+  all,
+  equals,
+  find,
+  isEmpty,
+  isNil,
+  keys,
+  map,
+  pick,
+  pipe,
+  pluck,
+  reduce,
+  toPairs,
+  values
+} from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -12,8 +26,16 @@ import {
   InteractedZone,
   InteractedZone as ZoomPreviewModel
 } from '../models';
-import { getTimeValue } from '../../common/timeSeries';
-import { TimeValue } from '../../common/timeSeries/models';
+import {
+  formatMetricName,
+  getLineForMetric,
+  getLinesForMetrics,
+  getTimeValue,
+  getUnits,
+  getYScale
+} from '../../common/timeSeries';
+import { Line, TimeValue } from '../../common/timeSeries/models';
+import { margin } from '../common';
 
 import Annotations from './Annotations';
 import { TimelineEvent } from './Annotations/models';
@@ -22,10 +44,11 @@ import TimeShiftZones from './TimeShiftZones';
 import ZoomPreview from './ZoomPreview';
 import {
   MousePosition,
-  changeMousePositionAndTimeValueDerivedAtom,
+  changeMousePositionDerivedAtom,
   eventMouseDownAtom,
   eventMouseLeaveAtom,
-  eventMouseUpAtom
+  eventMouseUpAtom,
+  graphTooltipDataAtom
 } from './interactionWithGraphAtoms';
 
 const useStyles = makeStyles()(() => ({
@@ -38,13 +61,15 @@ interface CommonData {
   graphHeight: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   graphWidth: number;
+  leftScale;
+  lines;
+  rightScale;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
 }
 
 interface TimeShiftZonesData extends InteractedZone {
   graphInterval: GraphInterval;
-  loading: boolean;
 }
 
 interface Props {
@@ -65,13 +90,19 @@ const InteractionWithGraph = ({
   const setEventMouseDown = useSetAtom(eventMouseDownAtom);
   const setEventMouseUp = useSetAtom(eventMouseUpAtom);
   const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
+  const changeMousePosition = useSetAtom(changeMousePositionDerivedAtom);
+  const setGraphTooltipData = useSetAtom(graphTooltipDataAtom);
 
-  const changeMousePositionAndTimeValue = useSetAtom(
-    changeMousePositionAndTimeValueDerivedAtom
-  );
-
-  const { graphHeight, graphWidth, graphSvgRef, xScale, timeSeries } =
-    commonData;
+  const {
+    graphHeight,
+    graphWidth,
+    graphSvgRef,
+    xScale,
+    timeSeries,
+    leftScale,
+    rightScale,
+    lines
+  } = commonData;
 
   const displayZoomPreview = zoomData?.enable ?? true;
 
@@ -83,6 +114,7 @@ const InteractionWithGraph = ({
     setEventMouseLeave(event);
     setEventMouseDown(null);
     updateMousePosition(null);
+    setGraphTooltipData(null);
   };
 
   const mouseUp = (event): void => {
@@ -107,10 +139,10 @@ const InteractionWithGraph = ({
 
   const updateMousePosition = (pointPosition: MousePosition): void => {
     if (isNil(pointPosition)) {
-      changeMousePositionAndTimeValue({
-        position: null,
-        timeValue: null
+      changeMousePosition({
+        position: null
       });
+      setGraphTooltipData(null);
 
       return;
     }
@@ -120,7 +152,89 @@ const InteractionWithGraph = ({
       xScale
     });
 
-    changeMousePositionAndTimeValue({ position: pointPosition, timeValue });
+    if (isNil(timeValue)) {
+      changeMousePosition({
+        position: null
+      });
+      setGraphTooltipData(null);
+
+      return;
+    }
+
+    const date = timeValue.timeTick;
+    const displayedMetricIds = pluck('metric_id', lines);
+    const filteredMetricsValue = pick(displayedMetricIds, timeValue);
+    const [, secondUnit, thirdUnit] = getUnits(lines as Array<Line>);
+    const areAllValuesEmpty = pipe(values, all(isNil))(filteredMetricsValue);
+
+    const linesData = getLinesForMetrics({
+      lines,
+      metricIds: keys(filteredMetricsValue).map(Number)
+    });
+
+    if (areAllValuesEmpty) {
+      changeMousePosition({ position: pointPosition });
+      setGraphTooltipData(null);
+
+      return;
+    }
+
+    const distanceWithPointPositionPerMetric = reduce(
+      (acc, [metricId, value]) => {
+        if (isNil(value)) {
+          return acc;
+        }
+
+        const lineData = getLineForMetric({
+          lines,
+          metric_id: Number(metricId)
+        });
+        const yScale = getYScale({
+          hasMoreThanTwoUnits: Boolean(thirdUnit),
+          invert: (lineData as Line).invert,
+          leftScale,
+          rightScale,
+          secondUnit,
+          unit: (lineData as Line).unit
+        });
+
+        const y0 = yScale(value);
+
+        const diffBetweenY0AndPointPosition = Math.abs(
+          y0 + margin.top - pointPosition[1]
+        );
+
+        return {
+          ...acc,
+          [metricId]: diffBetweenY0AndPointPosition
+        };
+      },
+      {},
+      Object.entries(filteredMetricsValue)
+    );
+
+    const nearestY0 = Math.min(...values(distanceWithPointPositionPerMetric));
+
+    const nearestLine = pipe(
+      toPairs,
+      find(([, y0]) => equals(y0, nearestY0)) as () => [string, number]
+    )(distanceWithPointPositionPerMetric);
+
+    changeMousePosition({ position: pointPosition });
+    setGraphTooltipData({
+      date,
+      highlightedMetricId: Number(nearestLine[0]),
+      metrics: map(
+        ({ metric_id, color, unit, legend, name }) => ({
+          color,
+          id: metric_id,
+          name: formatMetricName({ legend, name }),
+          unit,
+          value: timeValue?.[metric_id]
+        }),
+        linesData
+      ).filter(({ value }) => !isNil(value))
+    });
   };
 
   return (
@@ -151,8 +265,9 @@ const InteractionWithGraph = ({
       )}
       <Bar
         className={classes.overlay}
+        data-testid="graph-interaction-zone"
         fill="transparent"
-        height={graphHeight}
+        height={graphHeight - margin.bottom}
         width={graphWidth}
         x={0}
         y={0}

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -1,52 +1,32 @@
 import { atom } from 'jotai';
-import { not, isNil } from 'ramda';
+import { isNil } from 'ramda';
 
 import { TimeValue } from '../../common/timeSeries/models';
+import { GraphTooltipData } from '../models';
 
 export const eventMouseDownAtom = atom<null | MouseEvent>(null);
 export const eventMouseUpAtom = atom<null | MouseEvent>(null);
 export const eventMouseLeaveAtom = atom<null | MouseEvent>(null);
+export const graphTooltipDataAtom = atom<GraphTooltipData | null>(null);
 
 export const timeValueAtom = atom<TimeValue | null>(null);
 export const mousePositionAtom = atom<MousePosition>(null);
 export const isListingGraphOpenAtom = atom(false);
 export type MousePosition = [number, number] | null;
 
-interface PositionTimeValue {
+interface Position {
   position: MousePosition;
-  timeValue: TimeValue | null;
 }
 
-interface NewTimeValueInViewportState {
-  isInViewport?: boolean;
-  newTimeValue: TimeValue | null;
-}
-export const changeTimeValueDerivedAtom = atom(
-  null,
-  (
-    _,
-    set,
-    { newTimeValue, isInViewport }: NewTimeValueInViewportState
-  ): void => {
-    if (not(isInViewport)) {
-      return;
-    }
-    set(timeValueAtom, newTimeValue);
-  }
-);
-
-export const changeMousePositionAndTimeValueDerivedAtom = atom(
+export const changeMousePositionDerivedAtom = atom(
   null,
-  (_, set, { position, timeValue }: PositionTimeValue): void => {
-    if (isNil(position) || isNil(timeValue)) {
+  (_, set, { position }: Position): void => {
+    if (isNil(position)) {
       set(mousePositionAtom, null);
-      set(timeValueAtom, null);
 
       return;
     }
 
     set(mousePositionAtom, position);
-
-    set(timeValueAtom, timeValue);
   }
 );

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

@@ -6,61 +6,48 @@ interface MakeStylesProps {
   limitLegendRows?: boolean;
 }
 
+export const legendWidth = 21;
+const legendItemHeight = 5.25;
+const legendItemHeightCompact = 2;
+
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({
     highlight: {
       color: theme.typography.body1.color
     },
     item: {
-      display: 'grid',
-      gridTemplateColumns: 'min-content minmax(50px, 1fr)',
-      marginBottom: theme.spacing(1)
+      minWidth: theme.spacing(legendWidth)
     },
     items: {
+      '&[data-mode="compact"]': {
+        gridAutoRows: theme.spacing(legendItemHeightCompact),
+        height: limitLegendRows
+          ? theme.spacing(legendItemHeightCompact * 2 + 1.5)
+          : 'unset'
+      },
+      columnGap: theme.spacing(3),
       display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, max-content))',
-      marginLeft: theme.spacing(0.5),
-      maxHeight: limitLegendRows ? theme.spacing(14) : 'unset',
+      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),
       width: '100%'
     },
     legend: {
       marginLeft: margin.left,
       marginRight: margin.right,
-      maxHeight: theme.spacing(24),
-      overflowX: 'hidden',
-      overflowY: 'auto'
-    },
-    legendData: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    legendName: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'start',
-      marginRight: theme.spacing(0.5),
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    legendUnit: {
-      justifyContent: 'start',
-      marginLeft: 'auto',
-      marginRight: theme.spacing(0.5),
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
-    legendValue: {
-      fontWeight: theme.typography.body1.fontWeight
+      overflow: 'hidden'
     },
     minMaxAvgContainer: {
       columnGap: theme.spacing(0.5),
       display: 'grid',
-      gridAutoRows: theme.spacing(2),
       gridTemplateColumns: 'repeat(2, min-content)',
       whiteSpace: 'nowrap'
     },
-    minMaxAvgValue: { fontWeight: 600 },
     normal: {
       color: theme.palette.text.primary
     },
@@ -69,3 +56,58 @@ export const useStyles = makeStyles<MakeStylesProps>()(
     }
   })
 );
+
+interface StylesProps {
+  color?: string;
+}
+
+export const useLegendHeaderStyles = makeStyles<StylesProps>()(
+  (theme, { color }) => ({
+    container: {
+      width: '100%'
+    },
+    disabled: {
+      color: theme.palette.text.disabled
+    },
+    icon: {
+      backgroundColor: color,
+      borderRadius: theme.shape.borderRadius,
+      height: theme.spacing(1.5),
+      minWidth: theme.spacing(1.5),
+      width: theme.spacing(1.5)
+    },
+    legendName: {
+      maxWidth: '95%'
+    },
+    markerAndLegendName: {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.spacing(0.5)
+    },
+    minMaxAvgContainer: {
+      columnGap: theme.spacing(0.5),
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, min-content)',
+      whiteSpace: 'nowrap'
+    },
+    text: {
+      fontSize: '0.75rem',
+      fontWeight: theme.typography.fontWeightMedium,
+      lineHeight: 1
+    }
+  })
+);
+
+export const useLegendContentStyles = makeStyles()((theme) => ({
+  minMaxAvgValue: { fontWeight: theme.typography.fontWeightMedium },
+  text: {
+    lineHeight: 0.9
+  }
+}));
+
+export const useLegendValueStyles = makeStyles()({
+  text: {
+    lineHeight: 1.4
+  }
+});

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

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Typography } from '@mui/material';
 
-import { useStyles } from './Legend.styles';
+import { useLegendContentStyles } from './Legend.styles';
 
 interface Props {
   data: string;
@@ -10,15 +10,21 @@ interface Props {
 }
 
 const LegendContent = ({ data, label }: Props): JSX.Element => {
-  const { classes } = useStyles({});
+  const { classes, cx } = useLegendContentStyles();
 
   const { t } = useTranslation();
 
   return (
-    <div data-testid={label}>
-      <Typography variant="caption">{t(label)}: </Typography>
-      <Typography className={classes.minMaxAvgValue} variant="caption">
-        {data}
+    <div className={classes.text} data-testid={label}>
+      <Typography className={classes.text} component="span" variant="caption">
+        {t(label)}:{' '}
+        <Typography
+          className={cx(classes.minMaxAvgValue, classes.text)}
+          component="span"
+          variant="caption"
+        >
+          {data}
+        </Typography>
       </Typography>
     </div>
   );