@centreon/ui 24.4.63 → 24.4.65

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

@@ -1,48 +1,38 @@
 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 { 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;
   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,
   limitLegend = false,
   renderExtraComponent,
-  displayAnchor = true,
   setLinesGraph,
-  xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
@@ -51,13 +41,6 @@ const MainLegend = ({
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
     useLegend({ lines, setLinesGraph });
 
-  const { getFormattedValue } = useInteractiveValues({
-    base,
-    lines,
-    timeSeries,
-    xScale
-  });
-
   const sortedData = sortBy(prop('metric_id'), lines);
 
   const displayedLines = limitLegend
@@ -99,10 +82,6 @@ const MainLegend = ({
             ? color
             : alpha(theme.palette.text.disabled, 0.2);
 
-          const interactiveValue = displayAnchor
-            ? getFormattedValue(line)
-            : null;
-
           const minMaxAvg = [
             {
               label: labelMin,
@@ -137,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,24 +143,18 @@ const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
     limitLegend,
-    timeSeries,
     lines,
     base,
-    displayAnchor,
     shouldDisplayLegendInCompactMode
   } = props;
-  const timeValue = useAtomValue(timeValueAtom);
 
   return useMemoComponent({
     Component: <MainLegend {...props} />,
     memoProps: [
-      timeValue,
-      timeSeries,
       lines,
       base,
       toggable,
       limitLegend,
-      displayAnchor,
       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',

package/src/Graph/LineChart/LineChart.tsx

@@ -8,6 +8,7 @@ import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { Thresholds as ThresholdsModel } from '../common/models';
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -18,7 +19,6 @@ import useFilterLines from './BasicComponents/useFilterLines';
 import { useStyles } from './LineChart.styles';
 import Header from './Header';
 import InteractionWithGraph from './InteractiveComponents';
-import TooltipAnchorPoint from './InteractiveComponents/AnchorPoint/TooltipAnchorPoint';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import Legend from './Legend';
@@ -34,6 +34,7 @@ import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
 import Thresholds from './BasicComponents/Thresholds';
 import { legendWidth } from './Legend/Legend.styles';
+import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 
 const extraMargin = 10;
 
@@ -185,131 +186,128 @@ const LineChart = ({
 
   return (
     <>
-      <Header
-        displayTimeTick={displayAnchor?.displayGuidingLines ?? true}
-        header={header}
-        timeSeries={timeSeries}
-        title={title}
-        xScale={xScale}
-      />
+      <Header header={header} title={title} />
       <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <div className={classes.container}>
-          <LoadingProgress
-            display={loading}
-            height={graphHeight}
-            width={width}
-          />
-          <svg height={graphHeight + margin.top} ref={graphSvgRef} width="100%">
-            <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
-              <Grids
-                height={graphHeight - margin.top}
-                leftScale={leftScale}
-                width={graphWidth}
-                xScale={xScale}
-              />
-              <Axes
-                data={{
-                  baseAxis,
-                  lines: displayedLines,
-                  timeSeries,
-                  ...axis
-                }}
-                graphInterval={graphInterval}
-                height={graphHeight - margin.top}
-                leftScale={leftScale}
-                rightScale={rightScale}
-                width={graphWidth}
-                xScale={xScale}
-              />
-
-              <Lines
-                curve={curve}
-                displayAnchor={displayAnchor}
-                displayedLines={displayedLines}
-                graphSvgRef={graphSvgRef}
-                height={graphHeight - margin.top}
-                leftScale={leftScale}
-                rightScale={rightScale}
-                timeSeries={timeSeries}
-                width={graphWidth}
-                xScale={xScale}
-                {...shapeLines}
-              />
-
-              <InteractionWithGraph
-                annotationData={{ ...annotationEvent }}
-                commonData={{
-                  graphHeight,
-                  graphSvgRef,
-                  graphWidth,
-                  timeSeries,
-                  xScale
-                }}
-                timeShiftZonesData={{
-                  ...timeShiftZones,
-                  graphInterval,
-                  loading
-                }}
-                zoomData={{ ...zoomPreview }}
-              />
+        <MuiTooltip
+          classes={{
+            tooltip: classes.graphValueTooltip
+          }}
+          placement="top-start"
+          title={<GraphValueTooltip base={baseAxis} />}
+        >
+          <div className={classes.container}>
+            <LoadingProgress
+              display={loading}
+              height={graphHeight}
+              width={width}
+            />
+            <svg
+              height={graphHeight + margin.top}
+              ref={graphSvgRef}
+              width="100%"
+            >
+              <Group.Group
+                left={margin.left + extraMargin / 2}
+                top={margin.top}
+              >
+                <Grids
+                  height={graphHeight - margin.top}
+                  leftScale={leftScale}
+                  width={graphWidth}
+                  xScale={xScale}
+                />
+                <Axes
+                  data={{
+                    baseAxis,
+                    lines: displayedLines,
+                    timeSeries,
+                    ...axis
+                  }}
+                  graphInterval={graphInterval}
+                  height={graphHeight - margin.top}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  width={graphWidth}
+                  xScale={xScale}
+                />
 
-              {thresholds?.enabled && (
-                <Thresholds
+                <Lines
+                  curve={curve}
+                  displayAnchor={displayAnchor}
                   displayedLines={displayedLines}
-                  hideTooltip={hideThresholdTooltip}
+                  graphSvgRef={graphSvgRef}
+                  height={graphHeight - margin.top}
                   leftScale={leftScale}
                   rightScale={rightScale}
-                  showTooltip={showThresholdTooltip}
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
+                  timeSeries={timeSeries}
                   width={graphWidth}
+                  xScale={xScale}
+                  {...shapeLines}
                 />
-              )}
-            </Group.Group>
-          </svg>
-          {displayTooltip && (
-            <GraphTooltip {...tooltip} {...graphTooltipData} />
-          )}
-          {(displayAnchor?.displayTooltipsGuidingLines ?? true) && (
-            <TooltipAnchorPoint
-              baseAxis={baseAxis}
-              graphHeight={graphHeight - 35}
-              graphWidth={graphWidth}
-              leftScale={leftScale}
-              lines={displayedLines}
-              rightScale={rightScale}
-              timeSeries={timeSeries}
-              xScale={xScale}
-            />
-          )}
-          <Fade in={thresholdTooltipOpen}>
-            <Tooltip.Tooltip
-              left={thresholdTooltipLeft}
-              style={{
-                ...baseStyles,
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.primary,
-                transform: `translate(${graphWidth / 2}px, -10px)`
-              }}
-              top={thresholdTooltipTop}
-            >
-              {thresholdTooltipData}
-            </Tooltip.Tooltip>
-          </Fade>
-        </div>
+
+                <InteractionWithGraph
+                  annotationData={{ ...annotationEvent }}
+                  commonData={{
+                    graphHeight,
+                    graphSvgRef,
+                    graphWidth,
+                    leftScale,
+                    lines: displayedLines,
+                    rightScale,
+                    timeSeries,
+                    xScale
+                  }}
+                  timeShiftZonesData={{
+                    ...timeShiftZones,
+                    graphInterval,
+                    loading
+                  }}
+                  zoomData={{ ...zoomPreview }}
+                />
+
+                {thresholds?.enabled && (
+                  <Thresholds
+                    displayedLines={displayedLines}
+                    hideTooltip={hideThresholdTooltip}
+                    leftScale={leftScale}
+                    rightScale={rightScale}
+                    showTooltip={showThresholdTooltip}
+                    thresholdUnit={thresholdUnit}
+                    thresholds={thresholds as ThresholdsModel}
+                    width={graphWidth}
+                  />
+                )}
+              </Group.Group>
+            </svg>
+            {displayTooltip && (
+              <GraphTooltip {...tooltip} {...graphTooltipData} />
+            )}
+            <Fade in={thresholdTooltipOpen}>
+              <Tooltip.Tooltip
+                left={thresholdTooltipLeft}
+                style={{
+                  ...baseStyles,
+                  backgroundColor: theme.palette.background.paper,
+                  color: theme.palette.text.primary,
+                  transform: `translate(${graphWidth / 2}px, -10px)`
+                }}
+                top={thresholdTooltipTop}
+              >
+                {thresholdTooltipData}
+              </Tooltip.Tooltip>
+            </Fade>
+          </div>
+        </MuiTooltip>
       </ClickAwayListener>
       {displayLegend && (
         <div ref={legendRef}>
           <Legend
             base={baseAxis}
-            displayAnchor={displayAnchor?.displayGuidingLines ?? true}
             limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-            timeSeries={timeSeries}
-            xScale={xScale}
           />
         </div>
       )}