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

package/src/Graph/LineChart/LineChart.tsx

@@ -8,17 +8,16 @@ 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';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import LoadingProgress from './BasicComponents/LoadingProgress';
 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 +33,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;
 
@@ -43,7 +43,7 @@ interface Props extends LineChartProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
-  marginBottom: number;
+  limitLegend?: false | number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
@@ -61,7 +61,6 @@ const LineChart = ({
   shapeLines,
   axis,
   displayAnchor,
-  loading,
   zoomPreview,
   graphInterval,
   timeShiftZones,
@@ -71,9 +70,9 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -101,8 +100,7 @@ const LineChart = ({
     (height || 0) > 0
       ? (height || 0) -
         margin.top -
-        margin.bottom -
-        marginBottom -
+        5 -
         (legendRef.current?.getBoundingClientRect().height || 0)
       : 0;
 
@@ -183,130 +181,122 @@ 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}>
+            <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
+                  }}
+                  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>
       )}

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -13,8 +13,8 @@ const useSkeletonStyles = makeStyles<Props>()(
       display: 'grid',
       gridGap: theme.spacing(1),
       gridTemplateRows: `${
-        displayTitleSkeleton ? '1fr' : ''
-      } ${graphHeight}px ${theme.spacing(7)}`,
+        displayTitleSkeleton ? '0.8fr' : ''
+      } ${graphHeight}px ${theme.spacing(2)}`,
       height: '100%'
     },
     loadingSkeletonLine: {

package/src/Graph/LineChart/index.tsx

@@ -28,8 +28,8 @@ interface Props extends Partial<LineChartProps> {
   data?: LineChartData;
   end: string;
   legend: LegendModel;
+  limitLegend?: false | number;
   loading: boolean;
-  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
   thresholdUnit?: string;
@@ -53,9 +53,9 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -63,7 +63,7 @@ const WrapperLineChart = ({
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? true}
+        displayTitleSkeleton={header?.displayTitle ?? false}
         graphHeight={height || 200}
       />
     );
@@ -76,7 +76,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', width: '100%' }}
+      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({
@@ -95,8 +95,7 @@ const WrapperLineChart = ({
               header={header}
               height={height || responsiveHeight}
               legend={legend}
-              loading={loading}
-              marginBottom={marginBottom}
+              limitLegend={limitLegend}
               shapeLines={shapeLines}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}