@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.2 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.2",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -116,11 +116,14 @@
     "@react-spring/web": "^9.7.3",
     "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
+    "@visx/event": "^3.3.0",
     "@visx/group": "^3.3.0",
+    "@visx/hierarchy": "^3.3.0",
     "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.3.0",
+    "@visx/point": "^3.3.0",
     "@visx/scale": "^3.5.0",
-    "@visx/shape": "^2.12.2",
+    "@visx/shape": "^2.18.0",
     "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",

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

@@ -1,41 +1,17 @@
-import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
-
 import Typography from '@mui/material/Typography';
 
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+import { useMemoComponent } from '@centreon/ui';
 
 import { useStyles } from '../LineChart.styles';
-import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
 import { LineChartHeader } from '../models';
-import { TimeValue } from '../../common/timeSeries/models';
 
 interface Props {
-  displayTimeTick?: boolean;
   header?: LineChartHeader;
-  timeSeries: Array<TimeValue>;
   title: string;
-  xScale: ScaleLinear<number, number>;
 }
 
-const Header = ({
-  title,
-  displayTimeTick = true,
-  header,
-  timeSeries,
-  xScale
-}: Props): JSX.Element => {
+const Header = ({ title, header }: Props): JSX.Element => {
   const { classes } = useStyles();
-  const { toDateTime } = useLocaleDateTimeFormat();
-
-  const { tickAxisBottom } = useTickGraph({
-    timeSeries,
-    xScale
-  });
-  const time =
-    displayTimeTick && !isNil(tickAxisBottom)
-      ? toDateTime(tickAxisBottom)
-      : null;
 
   const displayTitle = header?.displayTitle ?? true;
 
@@ -49,16 +25,12 @@ const Header = ({
               {title}
             </Typography>
           )}
-
-          <Typography align="center" style={{ height: 20 }} variant="body1">
-            {time}
-          </Typography>
         </div>
         {header?.extraComponent}
       </div>
     ),
 
-    memoProps: [time, timeSeries, xScale, displayTimeTick, title, header]
+    memoProps: [title, header]
   });
 };
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -2,13 +2,12 @@ import { useEffect, useState } from 'react';
 
 import { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
-import { isEmpty, isNil, not } from 'ramda';
 
 import useAxisY from '../../BasicComponents/Axes/useAxisY';
 import { margin } from '../../common';
-import { getMetrics, getTimeValue } from '../../../common/timeSeries';
+import { getTimeValue } from '../../../common/timeSeries';
 import { Line, TimeValue } from '../../../common/timeSeries/models';
-import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {
   positionX?: number;
@@ -42,14 +41,13 @@ const useTickGraph = ({
   const { axisRight, axisLeft } = useAxisY({ data: { baseAxis, lines } });
 
   const mousePosition = useAtomValue(mousePositionAtom);
-  const timeValueData = useAtomValue(timeValueAtom);
 
-  const metrics = getMetrics(timeValueData as TimeValue);
-
-  const containsMetrics = not(isNil(metrics)) && not(isEmpty(metrics));
-
-  const positionX = mousePosition ? mousePosition[0] - margin.left : undefined;
-  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
+  const positionX = mousePosition
+    ? mousePosition[0] - margin.left - 4
+    : undefined;
+  const positionY = mousePosition
+    ? mousePosition[1] - margin.top + 2
+    : undefined;
 
   useEffect(() => {
     if (!mousePosition) {
@@ -62,7 +60,7 @@ const useTickGraph = ({
     const mousePositionTimeTick = mousePosition
       ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
       : 0;
-    const timeTickValue = containsMetrics
+    const timeTickValue = mousePosition
       ? new Date(mousePositionTimeTick)
       : null;
 

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/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,6 +61,9 @@ interface CommonData {
   graphHeight: number;
   graphSvgRef: MutableRefObject<SVGSVGElement | null>;
   graphWidth: number;
+  leftScale;
+  lines;
+  rightScale;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
 }
@@ -65,13 +91,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 +115,7 @@ const InteractionWithGraph = ({
     setEventMouseLeave(event);
     setEventMouseDown(null);
     updateMousePosition(null);
+    setGraphTooltipData(null);
   };
 
   const mouseUp = (event): void => {
@@ -107,10 +140,10 @@ const InteractionWithGraph = ({
 
   const updateMousePosition = (pointPosition: MousePosition): void => {
     if (isNil(pointPosition)) {
-      changeMousePositionAndTimeValue({
-        position: null,
-        timeValue: null
+      changeMousePosition({
+        position: null
       });
+      setGraphTooltipData(null);
 
       return;
     }
@@ -120,7 +153,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 }) => value)
+    });
   };
 
   return (
@@ -151,8 +266,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/LegendHeader.tsx

@@ -1,8 +1,12 @@
-import { includes, isEmpty, split } from 'ramda';
+import { isEmpty } from 'ramda';
 
 import { Typography } from '@mui/material';
 
-import { EllipsisTypography, formatMetricValue } from '../../..';
+import {
+  EllipsisTypography,
+  formatMetricName,
+  formatMetricValue
+} from '../../..';
 import { Line } from '../../common/timeSeries/models';
 import { Tooltip } from '../../../components';
 
@@ -29,12 +33,11 @@ const LegendHeader = ({
 
   const { unit, name, legend } = line;
 
+  const metricName = formatMetricName({ legend, name });
+
   const legendName = legend || name;
   const hasUnit = !isEmpty(unit);
   const unitName = `(${unit})`;
-  const metricName = includes('#', legendName)
-    ? split('#')(legendName)[1]
-    : legendName;
 
   const getEndText = (): string => {
     if (value) {