@centreon/ui 23.10.121 → 24.4.1-0

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

@@ -1,43 +1,82 @@
-import { includes, isEmpty, split } from 'ramda';
-
-import { Tooltip, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
+import {
+  EllipsisTypography,
+  formatMetricName,
+  formatMetricValue
+} from '../../..';
 import { Line } from '../../common/timeSeries/models';
+import { Tooltip } from '../../../components';
 
-import { useStyles } from './Legend.styles';
+import { useLegendHeaderStyles } from './Legend.styles';
+import { LegendDisplayMode } from './models';
+import LegendContent from './LegendContent';
 
 interface Props {
+  color: string;
+  disabled?: boolean;
   line: Line;
+  minMaxAvg?;
+  value?: string | null;
 }
 
-const LegendHeader = ({ line }: Props): JSX.Element => {
-  const { classes } = useStyles({});
-  const { unit, name, legend } = line;
+const LegendHeader = ({
+  line,
+  color,
+  disabled,
+  value,
+  minMaxAvg
+}: Props): JSX.Element => {
+  const { classes, cx } = useLegendHeaderStyles({ color });
+
+  const { name, legend } = line;
+
+  const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
-  const unitName = ` (${unit})`;
-  const metricName = includes('#', legendName)
-    ? split('#')(legendName)[1]
-    : legendName;
 
   return (
-    <div className={classes.legendName}>
-      <Tooltip placement="top" title={legendName + unitName}>
-        <Typography
-          className={classes.legendName}
-          component="p"
-          variant="caption"
-        >
-          {metricName}
-        </Typography>
-      </Tooltip>
-      <Typography
-        className={classes.legendUnit}
-        component="p"
-        variant="caption"
+    <div className={classes.container}>
+      <Tooltip
+        followCursor={false}
+        label={
+          minMaxAvg ? (
+            <div>
+              <Typography>{legendName}</Typography>
+              <div className={classes.minMaxAvgContainer}>
+                {minMaxAvg.map(({ label, value: subValue }) => (
+                  <LegendContent
+                    data={formatMetricValue({
+                      unit: line.unit,
+                      value: subValue
+                    })}
+                    key={label}
+                    label={label}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : (
+            legendName
+          )
+        }
+        placement="top"
       >
-        {!isEmpty(line?.unit) && `(${line.unit})`}
-      </Typography>
+        <div className={classes.markerAndLegendName}>
+          <div
+            data-icon
+            className={cx(classes.icon, { [classes.disabled]: disabled })}
+          />
+          <EllipsisTypography
+            className={cx(classes.text, classes.legendName)}
+            data-mode={
+              value ? LegendDisplayMode.Compact : LegendDisplayMode.Normal
+            }
+          >
+            {metricName}
+          </EllipsisTypography>
+        </div>
+      </Tooltip>
     </div>
   );
 };

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

@@ -1,67 +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 LegendMarker from './Marker';
-import { GetMetricValueProps } from './models';
-import useInteractiveValues from './useInteractiveValues';
+import { GetMetricValueProps, LegendDisplayMode } from './models';
 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>>;
-  timeSeries: Array<TimeValue>;
+  shouldDisplayLegendInCompactMode: boolean;
   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 =>
@@ -85,9 +68,13 @@ const MainLegend = ({
     selectMetricLine(metric_id);
   };
 
+  const mode = shouldDisplayLegendInCompactMode
+    ? LegendDisplayMode.Compact
+    : LegendDisplayMode.Normal;
+
   return (
     <div className={classes.legend}>
-      <div className={classes.items}>
+      <div className={classes.items} data-mode={mode}>
         {displayedLines.map((line) => {
           const { color, display, highlight, metric_id } = line;
 
@@ -95,10 +82,6 @@ const MainLegend = ({
             ? color
             : alpha(theme.palette.text.disabled, 0.2);
 
-          const interactiveValue = displayAnchor
-            ? getFormattedValue(line)
-            : null;
-
           const minMaxAvg = [
             {
               label: labelMin,
@@ -126,11 +109,16 @@ const MainLegend = ({
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
             >
-              <LegendMarker color={markerColor} disabled={!display} />
-              <div className={classes.legendData}>
-                <LegendHeader line={line} />
-                {displayAnchor && <InteractiveValue value={interactiveValue} />}
-                {!interactiveValue && (
+              <LegendHeader
+                color={markerColor}
+                disabled={!display}
+                line={line}
+                minMaxAvg={
+                  shouldDisplayLegendInCompactMode ? minMaxAvg : undefined
+                }
+              />
+              {!shouldDisplayLegendInCompactMode && (
+                <div>
                   <div className={classes.minMaxAvgContainer}>
                     {minMaxAvg.map(({ label, value }) => (
                       <LegendContent
@@ -140,8 +128,8 @@ const MainLegend = ({
                       />
                     ))}
                   </div>
-                )}
-              </div>
+                </div>
+              )}
             </Box>
           );
         })}
@@ -152,20 +140,22 @@ const MainLegend = ({
 };
 
 const Legend = (props: Props): JSX.Element => {
-  const { toggable, limitLegendRows, timeSeries, lines, base, displayAnchor } =
-    props;
-  const timeValue = useAtomValue(timeValueAtom);
+  const {
+    toggable,
+    limitLegend,
+    lines,
+    base,
+    shouldDisplayLegendInCompactMode
+  } = props;
 
   return useMemoComponent({
     Component: <MainLegend {...props} />,
     memoProps: [
-      timeValue,
-      timeSeries,
       lines,
       base,
       toggable,
-      limitLegendRows,
-      displayAnchor
+      limitLegend,
+      shouldDisplayLegendInCompactMode
     ]
   });
 };

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

@@ -9,3 +9,8 @@ export interface GetMetricValueProps {
   unit: string;
   value: number | null;
 }
+
+export enum LegendDisplayMode {
+  Compact = 'compact',
+  Normal = 'normal'
+}

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

@@ -27,25 +27,24 @@ interface Props {
 }
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
-  const displayedLines = reject(propEq('display', false), lines);
+  const displayedLines = reject(propEq(false, 'display'), lines);
   const getLineByMetric = (metric_id: number): Line =>
-    find(propEq('metric_id', metric_id), lines) as Line;
+    find(propEq(metric_id, 'metric_id'), lines) as Line;
 
   const toggleMetricLine = (metric_id): void => {
-    const line = getLineByMetric(metric_id);
+    const data = lines.map((line) => ({
+      ...line,
+      display: equals(line.metric_id, metric_id) ? !line.display : line.display
+    }));
 
-    setLinesGraph([
-      ...reject(propEq('metric_id', metric_id), lines),
-      { ...line, display: !line.display }
-    ]);
+    setLinesGraph(data);
   };
 
   const highlightLine = (metric_id): void => {
-    const fadedLines = map((line) => ({ ...line, highlight: false }), lines);
-    const data = [
-      ...reject(propEq('metric_id', metric_id), fadedLines),
-      { ...getLineByMetric(metric_id), highlight: true }
-    ];
+    const data = lines.map((line) => ({
+      ...line,
+      highlight: equals(line.metric_id, metric_id)
+    }));
 
     setLinesGraph(data);
   };
@@ -93,7 +92,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
+      display: find(propEq(line.metric_id, 'metric_id'), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

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

@@ -0,0 +1,144 @@
+import { LineChartData } from '../common/models';
+
+import dataLastDay from './mockedData/lastDay.json';
+import dataLastDayWithNullValues from './mockedData/lastDayWithNullValues.json';
+import dataLastDayWithIncompleteValues from './mockedData/lastDayWithIncompleteValues.json';
+import dataCurvesWithSameColor from './mockedData/curvesWithSameColor.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();
+    });
+  });
+
+  it('displays the curves with different shades when curves have same color', () => {
+    initialize(dataCurvesWithSameColor);
+
+    cy.findByLabelText('Centreon-Server: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(41, 175, 238)');
+    cy.findByLabelText('Centreon-Server_5: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(83, 191, 241)');
+    cy.findByLabelText('Centreon-Server_4: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(8, 34, 47)');
+    cy.findByLabelText('Centreon-Server_3: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(16, 70, 95)');
+    cy.findByLabelText('Centreon-Server_2: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(24, 105, 142)');
+    cy.findByLabelText('Centreon-Server_1: Round-Trip Average Time')
+      .find('[data-icon="true"]')
+      .should('have.css', 'background-color', 'rgb(32, 140, 190)');
+
+    cy.get('[data-metric="1"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(41, 175, 238)'
+    );
+    cy.get('[data-metric="21"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(32, 140, 190)'
+    );
+    cy.get('[data-metric="17"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(24, 105, 142)'
+    );
+    cy.get('[data-metric="13"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(16, 70, 95)'
+    );
+    cy.get('[data-metric="9"]').should('have.attr', 'stroke', 'rgb(8, 34, 47)');
+    cy.get('[data-metric="5"]').should(
+      'have.attr',
+      'stroke',
+      'rgb(83, 191, 241)'
+    );
+
+    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',