@centreon/ui 23.10.121 → 24.4.1-0

package/src/Graph/LineChart/LineChart.tsx

@@ -1,24 +1,23 @@
 import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
 import { Group, Tooltip } from '@visx/visx';
-import { flatten, isNil, pluck } from 'ramda';
+import { flatten, gt, isNil, lte, pluck, reduce } from 'ramda';
 
 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';
@@ -33,6 +32,8 @@ import {
 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;
 
@@ -42,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;
@@ -60,7 +61,6 @@ const LineChart = ({
   shapeLines,
   axis,
   displayAnchor,
-  loading,
   zoomPreview,
   graphInterval,
   timeShiftZones,
@@ -70,9 +70,9 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -100,8 +100,7 @@ const LineChart = ({
     (height || 0) > 0
       ? (height || 0) -
         margin.top -
-        margin.bottom -
-        marginBottom -
+        5 -
         (legendRef.current?.getBoundingClientRect().height || 0)
       : 0;
 
@@ -161,6 +160,15 @@ const LineChart = ({
   const displayLegend = legend?.display ?? true;
   const displayTooltip = !isNil(tooltip?.renderComponent);
 
+  const legendItemsWidth = reduce(
+    (acc) => acc + legendWidth * 8 + 24,
+    0,
+    displayedLines
+  );
+
+  const shouldDisplayLegendInCompactMode =
+    lte(graphWidth, 808) && gt(legendItemsWidth, graphWidth);
+
   if (!isInViewport) {
     return (
       <Skeleton
@@ -173,129 +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}
-            timeSeries={timeSeries}
-            xScale={xScale}
+            shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
           />
         </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/helpers/doc.ts

@@ -69,21 +69,24 @@ export const getDescription = ({ sections }: Description): string => {
       })}<br></details>`;
     }
 
-    const formattedProps = props.reduce((accumulator, currentValue, index) => {
-      const key = Object.keys(currentValue)[0];
-      const { description, type } = currentValue[key];
-      const body = `${accumulator} ${getBodyDescription({
-        description,
-        key,
-        type
-      })}`;
+    const formattedProps = props.reduce(
+      (accumulator, currentValue, index) => {
+        const key = Object.keys(currentValue)[0];
+        const { description, type } = currentValue[key];
+        const body = `${accumulator} ${getBodyDescription({
+          description,
+          key,
+          type
+        })}`;
 
-      if (!equals(index, props.length - 1)) {
-        return body;
-      }
+        if (!equals(index, props.length - 1)) {
+          return body;
+        }
 
-      return `${body}</details>`;
-    }, getInitialValue({ section: name, type: item?.type }));
+        return `${body}</details>`;
+      },
+      getInitialValue({ section: name, type: item?.type })
+    );
 
     return formattedProps as string;
   });

package/src/Graph/LineChart/helpers/index.ts

@@ -14,7 +14,7 @@ import { LineChartData } from '../../common/models';
 export const adjustGraphData = (graphData: LineChartData): LinesData => {
   const lines = getLineData(graphData);
   const sortedLines = sortBy(prop('name'), lines);
-  const displayedLines = reject(propEq('display', false), sortedLines);
+  const displayedLines = reject(propEq(false, 'display'), sortedLines);
 
   const timeSeries = getTimeSeries(graphData);
 

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

@@ -34,13 +34,13 @@ import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
 import dataLastDay from './mockedData/lastDay.json';
+import dataCurvesSameColor from './mockedData/curvesWithSameColor.json';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
 
 const meta: Meta<typeof WrapperLineChart> = {
-  component: WrapperLineChart,
-  tags: ['autodocs']
+  component: WrapperLineChart
 };
 export default meta;
 
@@ -353,6 +353,9 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
+  },
+  parameters: {
+    chromatic: { diffThreshold: 0.1 }
   }
 };
 
@@ -476,3 +479,15 @@ export const thresholdsRange: Story = {
     />
   )
 };
+
+export const LineChartWithSameColorCurves: Story = {
+  ...Template,
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataCurvesSameColor as unknown as LineChartData}
+    />
+  )
+};

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}