@centreon/ui 24.6.3 → 24.6.5

package/src/Graph/LineChart/LineChart.tsx

@@ -1,7 +1,7 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Tooltip } from '@visx/visx';
-import { equals, flatten, isNil, pluck } from 'ramda';
+import { equals, flatten, isNil, pluck, reject } from 'ramda';
 
 import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
@@ -18,18 +18,22 @@ import { useTooltipStyles } from '../common/useTooltipStyles';
 import BaseChart from '../common/BaseChart/BaseChart';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
+import Thresholds from '../common/Thresholds/Thresholds';
+import { useDeepCompare } from '../../utils';
 
 import Lines from './BasicComponents/Lines';
-import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import useFilterLines from './BasicComponents/useFilterLines';
-import Header from './Header';
+import {
+  canDisplayThreshold,
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './BasicComponents/Lines/Threshold/models';
 import InteractionWithGraph from './InteractiveComponents';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
 import { margin } from './common';
 import { Data, GlobalAreaLines, GraphInterval, LineChartProps } from './models';
 import { useIntersection } from './useLineChartIntersection';
-import Thresholds from './BasicComponents/Thresholds';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import { useLineChartStyles } from './LineChart.styles';
 
@@ -48,6 +52,23 @@ const baseStyles = {
   textAlign: 'center'
 };
 
+const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
+  if (!displayThreshold) {
+    return lines;
+  }
+  const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
+
+  const findLinesUpperLower = lines.map((line) =>
+    equals(line.name, lowerLineName) || equals(line.name, upperLineName)
+      ? line
+      : null
+  );
+
+  const linesUpperLower = reject((element) => !element, findLinesUpperLower);
+
+  return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
+};
+
 const LineChart = ({
   graphData,
   height = 500,
@@ -73,7 +94,11 @@ const LineChart = ({
 
   const theme = useTheme();
 
-  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
+  const { title, timeSeries, baseAxis, lines } = graphData;
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line>>(
+    filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+  );
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
@@ -87,21 +112,12 @@ const LineChart = ({
     showTooltip: showThresholdTooltip
   } = Tooltip.useTooltip();
 
-  const { title, timeSeries, baseAxis, lines } = graphData;
-
   const thresholdValues = flatten([
     pluck('value', thresholds?.warning || []),
     pluck('value', thresholds?.critical || [])
   ]);
 
-  const { displayedLines } = useFilterLines({
-    displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines,
-    linesGraph,
-    setLinesGraph
-  });
-
-  const [, secondUnit] = getUnits(displayedLines);
+  const [, secondUnit] = getUnits(linesGraph);
 
   const { legendRef, graphWidth, graphHeight } = useComputeBaseChartDimensions({
     hasSecondUnit: Boolean(secondUnit),
@@ -120,6 +136,11 @@ const LineChart = ({
     [timeSeries, graphWidth]
   );
 
+  const displayedLines = useMemo(
+    () => linesGraph.filter(({ display }) => display),
+    [linesGraph]
+  );
+
   const leftScale = useMemo(
     () =>
       getLeftScale({
@@ -165,6 +186,15 @@ const LineChart = ({
     ]
   );
 
+  useEffect(
+    () => {
+      setLinesGraph(
+        filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+      );
+    },
+    useDeepCompare([lines])
+  );
+
   const graphTooltipData = useGraphTooltip({
     graphWidth,
     timeSeries,
@@ -190,134 +220,131 @@ const LineChart = ({
   }
 
   return (
-    <>
-      <Header header={header} title={title} />
-      <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
-        <>
-          <BaseChart
-            base={baseAxis}
-            graphWidth={graphWidth}
-            height={height}
-            legend={{
-              displayLegend,
-              mode: legend?.mode,
-              placement: legend?.placement,
-              renderExtraComponent: legend?.renderExtraComponent
+    <ClickAwayListener onClickAway={graphTooltipData?.hideTooltip}>
+      <>
+        <BaseChart
+          base={baseAxis}
+          graphWidth={graphWidth}
+          header={header}
+          height={height}
+          legend={{
+            displayLegend,
+            mode: legend?.mode,
+            placement: legend?.placement,
+            renderExtraComponent: legend?.renderExtraComponent
+          }}
+          legendRef={legendRef}
+          limitLegend={limitLegend}
+          lines={linesGraph}
+          setLines={setLinesGraph}
+          title={title}
+        >
+          <MuiTooltip
+            classes={{
+              tooltip: cx(
+                tooltipClasses.tooltip,
+                tooltipClasses.tooltipDisablePadding
+              )
             }}
-            legendRef={legendRef}
-            limitLegend={limitLegend}
-            lines={displayedLines}
-            setLines={setLinesGraph}
+            placement="top-start"
+            title={
+              equals('hidden', tooltip?.mode) ? null : (
+                <GraphValueTooltip
+                  base={baseAxis}
+                  isSingleMode={equals('single', tooltip?.mode)}
+                  sortOrder={tooltip?.sortOrder}
+                />
+              )
+            }
           >
-            <MuiTooltip
-              classes={{
-                tooltip: cx(
-                  tooltipClasses.tooltip,
-                  tooltipClasses.tooltipDisablePadding
-                )
-              }}
-              placement="top-start"
-              title={
-                equals('hidden', tooltip?.mode) ? null : (
-                  <GraphValueTooltip
-                    base={baseAxis}
-                    isSingleMode={equals('single', tooltip?.mode)}
-                    sortOrder={tooltip?.sortOrder}
+            <div className={classes.tooltipChildren}>
+              <ChartSvgWrapper
+                axis={axis}
+                base={baseAxis}
+                displayedLines={displayedLines}
+                graphHeight={graphHeight}
+                graphWidth={graphWidth}
+                gridLinesType={axis?.gridLinesType}
+                leftScale={leftScale}
+                rightScale={rightScale}
+                showGridLines={showGridLines}
+                svgRef={graphSvgRef}
+                timeSeries={timeSeries}
+                xScale={xScale}
+              >
+                <>
+                  <Lines
+                    areaTransparency={lineStyle?.areaTransparency}
+                    curve={lineStyle?.curve || 'linear'}
+                    dashLength={lineStyle?.dashLength}
+                    dashOffset={lineStyle?.dashOffset}
+                    displayAnchor={displayAnchor}
+                    displayedLines={displayedLines}
+                    dotOffset={lineStyle?.dotOffset}
+                    graphSvgRef={graphSvgRef}
+                    height={graphHeight - margin.top}
+                    leftScale={leftScale}
+                    lineWidth={lineStyle?.lineWidth}
+                    rightScale={rightScale}
+                    showArea={lineStyle?.showArea}
+                    showPoints={lineStyle?.showPoints}
+                    timeSeries={timeSeries}
+                    width={graphWidth}
+                    xScale={xScale}
+                    {...shapeLines}
                   />
-                )
-              }
-            >
-              <div className={classes.tooltipChildren}>
-                <ChartSvgWrapper
-                  axis={axis}
-                  base={baseAxis}
-                  displayedLines={displayedLines}
-                  graphHeight={graphHeight}
-                  graphWidth={graphWidth}
-                  gridLinesType={axis?.gridLinesType}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  showGridLines={showGridLines}
-                  svgRef={graphSvgRef}
-                  timeSeries={timeSeries}
-                  xScale={xScale}
-                >
-                  <>
-                    <Lines
-                      areaTransparency={lineStyle?.areaTransparency}
-                      curve={lineStyle?.curve || 'linear'}
-                      dashLength={lineStyle?.dashLength}
-                      dashOffset={lineStyle?.dashOffset}
-                      displayAnchor={displayAnchor}
+                  <InteractionWithGraph
+                    annotationData={{ ...annotationEvent }}
+                    commonData={{
+                      graphHeight,
+                      graphSvgRef,
+                      graphWidth,
+                      leftScale,
+                      lines: linesGraph,
+                      rightScale,
+                      timeSeries,
+                      xScale
+                    }}
+                    timeShiftZonesData={{
+                      ...timeShiftZones,
+                      graphInterval
+                    }}
+                    zoomData={{ ...zoomPreview }}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
                       displayedLines={displayedLines}
-                      dotOffset={lineStyle?.dotOffset}
-                      graphSvgRef={graphSvgRef}
-                      height={graphHeight - margin.top}
+                      hideTooltip={hideThresholdTooltip}
                       leftScale={leftScale}
-                      lineWidth={lineStyle?.lineWidth}
                       rightScale={rightScale}
-                      showArea={lineStyle?.showArea}
-                      showPoints={lineStyle?.showPoints}
-                      timeSeries={timeSeries}
+                      showTooltip={showThresholdTooltip}
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
                       width={graphWidth}
-                      xScale={xScale}
-                      {...shapeLines}
                     />
-                    <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}
-                      />
-                    )}
-                  </>
-                </ChartSvgWrapper>
-              </div>
-            </MuiTooltip>
-          </BaseChart>
-          {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>
-        </>
-      </ClickAwayListener>
-    </>
+                  )}
+                </>
+              </ChartSvgWrapper>
+            </div>
+          </MuiTooltip>
+        </BaseChart>
+        {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>
+      </>
+    </ClickAwayListener>
   );
 };
 

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

@@ -11,8 +11,18 @@ import { useLocaleDateTimeFormat } from '@centreon/ui';
 
 import TimePeriod from '../../TimePeriods';
 import { LineChartData } from '../common/models';
+import annotationData from '../mockedData/annotationData.json';
+import exclusionPeriodFirstPeriod from '../mockedData/exclusionPeriodFirstPeriod.json';
+import exclusionPeriodSecondPeriod from '../mockedData/exclusionPeriodSecondPeriod.json';
+import exclusionPeriodThirdPeriod from '../mockedData/exclusionPeriodThirdPeriod.json';
+import dataLastDayForword from '../mockedData/lastDayForward.json';
+import dataLastDayThreshold from '../mockedData/lastDayThreshold.json';
+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 { dateTimeFormat } from './common';
 import {
   argTypes,
   args as argumentsData,
@@ -23,17 +33,7 @@ import {
   lastDayForwardDate,
   zoomPreviewDate
 } from './helpers/doc';
-import annotationData from './mockedData/annotationData.json';
-import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.json';
-import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
-import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
-import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDayThreshold from './mockedData/lastDayThreshold.json';
-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 { dateTimeFormat } from './common';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';

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

@@ -1,4 +1,4 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 import {
   criticalThresholds,
   rangedThresholds,

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 
 import { SingleBar } from '.';
 

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

@@ -1,4 +1,4 @@
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 import {
   criticalThresholds,
   rangedThresholds,

package/src/Graph/Text/Text.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import dataLastWeek from '../mockedData/lastWeek.json';
 
 import { Text } from '.';
 

package/src/Graph/common/Axes/index.tsx

@@ -1,6 +1,6 @@
 import { Axis } from '@visx/visx';
 import { ScaleLinear } from 'd3-scale';
-import { isNil } from 'ramda';
+import { equals, isNil } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '@centreon/ui';
 
@@ -15,6 +15,7 @@ interface Props {
   data: Data;
   height: number;
   leftScale: ScaleLinear<number, number>;
+  orientation: 'horizontal' | 'vertical';
   rightScale: ScaleLinear<number, number>;
   width: number;
   xScale: ScaleLinear<number, number>;
@@ -26,7 +27,8 @@ const Axes = ({
   data,
   rightScale,
   leftScale,
-  xScale
+  xScale,
+  orientation
 }: Props): JSX.Element => {
   const { format } = useLocaleDateTimeFormat();
   const { lines, showBorder, yAxisTickLabelRotation } = data;
@@ -50,47 +52,72 @@ const Axes = ({
   const hasMoreThanTwoUnits = !isNil(thirdUnit);
   const displayAxisRight = !isNil(secondUnit) && !hasMoreThanTwoUnits;
 
+  const isHorizontal = equals(orientation, 'horizontal');
+
+  const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
+  const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;
+  const AxisRight = isHorizontal ? Axis.AxisRight : Axis.AxisBottom;
+
   return (
     <g>
-      <Axis.AxisBottom
+      <AxisBottom
         numTicks={xTickCount}
         scale={xScale}
         strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={formatAxisTick}
-        top={height - 5}
+        tickLabelProps={() => ({
+          ...axisLeft.tickLabelProps(),
+          dx: isHorizontal ? 16 : -4
+        })}
+        top={isHorizontal ? height - 5 : 0}
       />
 
-      {axisLeft.displayUnit && <UnitLabel unit={firstUnit} x={-4} />}
+      {axisLeft.displayUnit && (
+        <UnitLabel
+          unit={firstUnit}
+          x={isHorizontal ? -8 : width + 8}
+          y={isHorizontal ? 16 : 0}
+        />
+      )}
 
-      <Axis.AxisLeft
+      <AxisLeft
         numTicks={axisLeft?.numTicks}
-        orientation="left"
         scale={leftScale}
         strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
         tickFormat={axisLeft.tickFormat}
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
-          angle: yAxisTickLabelRotation
+          angle: yAxisTickLabelRotation,
+          dx: isHorizontal ? -8 : 2,
+          dy: isHorizontal ? 4 : -4
         })}
         tickLength={2}
       />
 
       {displayAxisRight && (
-        <Axis.AxisRight
-          left={width}
+        <AxisRight
+          left={isHorizontal ? width : 0}
           numTicks={axisRight?.numTicks}
-          orientation="right"
           scale={rightScale}
           strokeWidth={!isNil(showBorder) && !showBorder ? 0 : 1}
           tickFormat={axisRight.tickFormat}
           tickLabelProps={() => ({
             ...axisRight.tickLabelProps(),
-            angle: yAxisTickLabelRotation
+            angle: yAxisTickLabelRotation,
+            dx: isHorizontal ? 4 : -8,
+            dy: 4
           })}
           tickLength={2}
+          top={isHorizontal ? 0 : height}
+        />
+      )}
+      {axisRight.displayUnit && (
+        <UnitLabel
+          unit={secondUnit}
+          x={width + 8}
+          y={isHorizontal ? 16 : -(height + 8)}
         />
       )}
-      {axisRight.displayUnit && <UnitLabel unit={secondUnit} x={width} />}
     </g>
   );
 };

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -15,22 +15,29 @@ import { legendWidth } from '../../LineChart/Legend/Legend.styles';
 import { Line } from '../timeSeries/models';
 
 import { useBaseChartStyles } from './useBaseChartStyles';
+import Header from './Header';
+import { LineChartHeader } from './Header/models';
 
 interface Props {
   base?: number;
   children: JSX.Element;
   graphWidth: number;
+  header?: LineChartHeader;
   height: number | null;
+  isHorizontal?: boolean;
   legend: {
     displayLegend: boolean;
-    mode: 'grid' | 'list';
-    placement: string;
+    mode?: 'grid' | 'list';
+    placement?: 'left' | 'right' | 'bottom';
     renderExtraComponent?: ReactNode;
   };
   legendRef: MutableRefObject<HTMLDivElement | null>;
   limitLegend?: number | false;
   lines: Array<Line>;
-  setLines: Dispatch<SetStateAction<Array<Line> | null>>;
+  setLines:
+    | Dispatch<SetStateAction<Array<Line> | null>>
+    | Dispatch<SetStateAction<Array<Line>>>;
+  title: string;
 }
 
 const BaseChart = ({
@@ -42,9 +49,12 @@ const BaseChart = ({
   limitLegend = false,
   setLines,
   children,
-  legendRef
+  legendRef,
+  title,
+  header,
+  isHorizontal = true
 }: Props): JSX.Element => {
-  const { classes } = useBaseChartStyles();
+  const { classes, cx } = useBaseChartStyles();
 
   const legendItemsWidth = useMemo(
     () => reduce((acc) => acc + legendWidth * 8 + 24, 0, lines),
@@ -66,6 +76,7 @@ const BaseChart = ({
 
   return (
     <>
+      <Header header={header} title={title} />
       <div className={classes.container}>
         <Stack
           direction={equals(legend?.placement, 'left') ? 'row' : 'row-reverse'}
@@ -73,7 +84,15 @@ const BaseChart = ({
           {legend.displayLegend &&
             (equals(legend?.placement, 'left') ||
               equals(legend?.placement, 'right')) && (
-              <div ref={legendRef} style={{ maxWidth: '60%' }}>
+              <div
+                className={cx(
+                  classes.legendContainer,
+                  equals(legend?.placement, 'right') &&
+                    !isHorizontal &&
+                    classes.legendContainerVerticalSide
+                )}
+                ref={legendRef}
+              >
                 <Legend
                   base={base}
                   height={height}