@centreon/ui 24.4.1-sync-release-34022.0 → 24.4.1-test-code-coverage.0

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

@@ -8,7 +8,7 @@ interface MakeStylesProps {
 
 export const legendWidth = 21;
 const legendItemHeight = 5.25;
-const legendItemHeightCompact = 1.75;
+const legendItemHeightCompact = 2;
 
 export const useStyles = makeStyles<MakeStylesProps>()(
   (theme, { limitLegendRows }) => ({
@@ -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%'
@@ -63,9 +64,6 @@ interface StylesProps {
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
     container: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
       width: '100%'
     },
     disabled: {
@@ -79,10 +77,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
+      maxWidth: '95%'
     },
     markerAndLegendName: {
       alignItems: 'center',
@@ -97,6 +92,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
+      fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium,
       lineHeight: 1
     }

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

@@ -1,8 +1,10 @@
-import { includes, isEmpty, split } 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';
 
@@ -27,22 +29,11 @@ const LegendHeader = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
-  const { unit, name, legend } = line;
-
-  const legendName = legend || name;
-  const hasUnit = !isEmpty(unit);
-  const unitName = `(${unit})`;
-  const metricName = includes('#', legendName)
-    ? split('#')(legendName)[1]
-    : legendName;
+  const { name, legend } = line;
 
-  const getEndText = (): string => {
-    if (value) {
-      return `${value}${hasUnit ? ` ${unit}` : ''}`;
-    }
+  const metricName = formatMetricName({ legend, name });
 
-    return hasUnit ? ` ${unitName}` : '';
-  };
+  const legendName = legend || name;
 
   return (
     <div className={classes.container}>
@@ -51,7 +42,7 @@ const LegendHeader = ({
         label={
           minMaxAvg ? (
             <div>
-              <Typography>{`${legendName} ${unitName}`}</Typography>
+              <Typography>{legendName}</Typography>
               <div className={classes.minMaxAvgContainer}>
                 {minMaxAvg.map(({ label, value: subValue }) => (
                   <LegendContent
@@ -66,7 +57,7 @@ const LegendHeader = ({
               </div>
             </div>
           ) : (
-            `${legendName} ${unitName}`
+            legendName
           )
         }
         placement="top"
@@ -83,9 +74,6 @@ const LegendHeader = ({
           </EllipsisTypography>
         </div>
       </Tooltip>
-      {hasUnit && (
-        <Typography className={classes.text}>{getEndText()}</Typography>
-      )}
     </div>
   );
 };

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

@@ -1,68 +1,50 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 
 import { prop, slice, sortBy } from 'ramda';
-import { useAtomValue } from 'jotai';
 
 import { Box, alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { maxLinesDisplayedLegend } from '../common';
 import { formatMetricValue } from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
+import { Line } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
-import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 
-import InteractiveValue from './InteractiveValue';
 import { useStyles } from './Legend.styles';
 import LegendHeader from './LegendHeader';
 import { GetMetricValueProps, LegendDisplayMode } from './models';
-import useInteractiveValues from './useInteractiveValues';
 import useLegend from './useLegend';
 import LegendContent from './LegendContent';
 
 interface Props {
   base: number;
-  displayAnchor?: boolean;
-  limitLegendRows?: boolean;
+  limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   shouldDisplayLegendInCompactMode: boolean;
-  timeSeries: Array<TimeValue>;
   toggable?: boolean;
-  xScale;
 }
 
 const MainLegend = ({
   lines,
-  timeSeries,
   base,
   toggable = true,
-  limitLegendRows = true,
+  limitLegend = false,
   renderExtraComponent,
-  displayAnchor = true,
   setLinesGraph,
-  xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows });
+  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
     useLegend({ lines, setLinesGraph });
 
-  const { getFormattedValue } = useInteractiveValues({
-    base,
-    lines,
-    timeSeries,
-    xScale
-  });
-
   const sortedData = sortBy(prop('metric_id'), lines);
 
-  const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, sortedData)
+  const displayedLines = limitLegend
+    ? slice(0, limitLegend, sortedData)
     : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
@@ -100,10 +82,6 @@ const MainLegend = ({
             ? color
             : alpha(theme.palette.text.disabled, 0.2);
 
-          const interactiveValue = displayAnchor
-            ? getFormattedValue(line)
-            : null;
-
           const minMaxAvg = [
             {
               label: labelMin,
@@ -138,28 +116,18 @@ const MainLegend = ({
                 minMaxAvg={
                   shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
                 }
-                value={
-                  shouldDisplayLegendInCompactMode
-                    ? interactiveValue
-                    : undefined
-                }
               />
               {!shouldDisplayLegendInCompactMode && (
                 <div>
-                  {displayAnchor && (
-                    <InteractiveValue value={interactiveValue} />
-                  )}
-                  {!interactiveValue && (
-                    <div className={classes.minMaxAvgContainer}>
-                      {minMaxAvg.map(({ label, value }) => (
-                        <LegendContent
-                          data={getMetricValue({ unit: line.unit, value })}
-                          key={label}
-                          label={label}
-                        />
-                      ))}
-                    </div>
-                  )}
+                  <div className={classes.minMaxAvgContainer}>
+                    {minMaxAvg.map(({ label, value }) => (
+                      <LegendContent
+                        data={getMetricValue({ unit: line.unit, value })}
+                        key={label}
+                        label={label}
+                      />
+                    ))}
+                  </div>
                 </div>
               )}
             </Box>
@@ -174,25 +142,19 @@ const MainLegend = ({
 const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
-    limitLegendRows,
-    timeSeries,
+    limitLegend,
     lines,
     base,
-    displayAnchor,
     shouldDisplayLegendInCompactMode
   } = props;
-  const timeValue = useAtomValue(timeValueAtom);
 
   return useMemoComponent({
     Component: <MainLegend {...props} />,
     memoProps: [
-      timeValue,
-      timeSeries,
       lines,
       base,
       toggable,
-      limitLegendRows,
-      displayAnchor,
+      limitLegend,
       shouldDisplayLegendInCompactMode
     ]
   });

package/src/Graph/LineChart/LineChart.cypress.spec.tsx

@@ -0,0 +1,91 @@
+import { LineChartData } from '../common/models';
+
+import dataLastDay from './mockedData/lastDay.json';
+import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
+import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
+import { args as argumentsData } from './helpers/doc';
+
+import WrapperLineChart from '.';
+
+const initialize = (data = dataLastDay): void => {
+  cy.mount({
+    Component: (
+      <WrapperLineChart
+        {...argumentsData}
+        data={data as unknown as LineChartData}
+      />
+    )
+  });
+};
+
+describe('Line chart', () => {
+  describe('Tooltip', () => {
+    it('displays a tooltip when the graph is hovered', () => {
+      initialize();
+
+      cy.contains('oracle-buffer-hit-ratio graph on srv-oracle-users').should(
+        'be.visible'
+      );
+      cy.contains('hitratio').should('be.visible');
+      cy.contains('querytime').should('be.visible');
+      cy.contains('connTime').should('be.visible');
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(250, 70);
+
+      cy.contains('06/18/2023').should('be.visible');
+
+      cy.contains('0.45 s').should('be.visible');
+      cy.contains('75.93%').should('be.visible');
+      cy.contains('0.43 s').should('be.visible');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays a metric highlighted when the graph is hovered and the metric is the nearest point', () => {
+      initialize();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should(
+        'have.attr',
+        'data-highlight',
+        'true'
+      );
+      cy.get('[data-metric="connTime"]').should(
+        'have.attr',
+        'data-highlight',
+        'false'
+      );
+
+      cy.makeSnapshot();
+    });
+
+    it('does not display the tooltip when null values are hovered', () => {
+      initialize(dataLastDayWithNullValues);
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1160, 100);
+
+      cy.get('[data-metric="querytime"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+
+    it('displays the tooltip with defined values whent the graph is hovered', () => {
+      initialize(dataLastDayWithIncompleteValues);
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(1150, 100);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="hitratio"]').should('not.exist');
+
+      cy.makeSnapshot();
+    });
+  });
+});

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

@@ -35,6 +35,14 @@ const useStyles = makeStyles()((theme) => ({
     fill: theme.palette.text.primary,
     position: 'relative'
   },
+  graphValueTooltip: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[3],
+    color: theme.palette.text.primary,
+    maxWidth: 'none',
+    padding: 0
+  },
   header: {
     display: 'grid',
     gridTemplateColumns: '0.4fr 1fr 0.4fr',