@centreon/ui 23.10.1-MON-20799-fe-implement-new-visualization.12 → 23.10.1-MON-21149-implement-time-periods-thresholds-refresh-interval.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-20799-fe-implement-new-visualization.12",
+  "version": "23.10.1-MON-21149-implement-time-periods-thresholds-refresh-interval.16",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -0,0 +1,119 @@
+import { always, cond, equals, isNil } from 'ramda';
+
+import { Theme, useTheme } from '@mui/material';
+
+import { getUnits, getYScale } from '../../common/timeSeries';
+import { Line } from '../../common/timeSeries/models';
+
+interface Props {
+  displayedLines: Array<Line>;
+  hideTooltip: () => void;
+  leftScale: (value: number) => number;
+  rightScale: (value: number) => number;
+  showTooltip: (props) => void;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
+  width: number;
+}
+
+interface GetColorProps {
+  index: number;
+  theme: Theme;
+}
+
+const getColor = ({ index, theme }: GetColorProps): string => {
+  return cond([
+    [equals(0), always(theme.palette.warning.main)],
+    [equals(1), always(theme.palette.error.main)]
+  ])(index);
+};
+
+const Thresholds = ({
+  thresholds,
+  leftScale,
+  rightScale,
+  width,
+  displayedLines,
+  thresholdUnit,
+  showTooltip,
+  hideTooltip,
+  thresholdLabels
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+
+  if (!thresholds) {
+    return null;
+  }
+
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(
+    displayedLines as Array<Line>
+  );
+
+  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
+
+  const yScale = shouldUseRightScale
+    ? rightScale
+    : getYScale({
+        hasMoreThanTwoUnits: !isNil(thirdUnit),
+        invert: null,
+        leftScale,
+        rightScale,
+        secondUnit,
+        unit: firstUnit
+      });
+
+  const thresholdScaledValues = thresholds
+    .sort()
+    .map((threshold) => yScale(threshold));
+
+  return (
+    <>
+      {thresholdScaledValues.map((threshold, index) => {
+        return (
+          <line
+            data-testid={`threshold-${threshold}`}
+            key={`threshold-${thresholdLabels?.[index]}-${threshold}`}
+            stroke={getColor({
+              index,
+              theme
+            })}
+            strokeDasharray="5,5"
+            strokeWidth={2}
+            x1={0}
+            x2={width}
+            y1={threshold}
+            y2={threshold}
+          />
+        );
+      })}
+      {thresholdScaledValues.map((threshold, index) => {
+        return (
+          <line
+            data-testid={`threshold-${threshold}-tooltip`}
+            key={`threshold-${thresholdLabels?.[index]}-${threshold}-tooltip`}
+            stroke="transparent"
+            strokeWidth={4}
+            x1={0}
+            x2={width}
+            y1={threshold}
+            y2={threshold}
+            onMouseEnter={(): void => {
+              if (!thresholdLabels?.[index]) {
+                return;
+              }
+              showTooltip({
+                tooltipData: thresholdLabels?.[index],
+                tooltipLeft: 0,
+                tooltipTop: threshold
+              });
+            }}
+            onMouseLeave={hideTooltip}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,9 +1,7 @@
-import { useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { useAtom } from 'jotai';
 import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
-import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 import {
@@ -15,6 +13,8 @@ import {
 interface UseFilterLines {
   displayThreshold?: boolean;
   lines: Array<Line>;
+  linesGraph: Array<Line> | null;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
 interface Result {
@@ -24,10 +24,10 @@ interface Result {
 
 const useFilterLines = ({
   displayThreshold = false,
-  lines
+  lines,
+  linesGraph,
+  setLinesGraph
 }: UseFilterLines): Result => {
-  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
-
   const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
@@ -45,7 +45,9 @@ const useFilterLines = ({
 
   useEffect(() => {
     const filteredLines = filterLines();
-    if (!lines || !displayThreshold || filteredLines.length <= 0) {
+    if (!lines || !displayThreshold) {
+      setLinesGraph(lines);
+
       return;
     }
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/index.tsx

@@ -8,14 +8,12 @@ interface Props {
 
 const Point = ({ lineColor, x, y }: Props): JSX.Element => (
   <circle
+    cx={x}
+    cy={y}
     fill={alpha(lineColor, 0.5)}
     r={4}
     stroke={lineColor}
     strokeWidth={2}
-    style={{
-      transform: `translate(${x}px, ${y}px)`,
-      transition: 'transform 0.08s ease-out'
-    }}
   />
 );
 

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -44,6 +44,7 @@ export const changeMousePositionAndTimeValueDerivedAtom = atom(
 
       return;
     }
+
     set(mousePositionAtom, position);
 
     set(timeValueAtom, timeValue);

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 
 import { slice } from 'ramda';
 import { useAtomValue } from 'jotai';
@@ -28,8 +28,10 @@ interface Props {
   limitLegendRows?: boolean;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
+  xScale;
 }
 
 const MainLegend = ({
@@ -39,18 +41,21 @@ const MainLegend = ({
   toggable = true,
   limitLegendRows = true,
   renderExtraComponent,
-  displayAnchor = true
+  displayAnchor = true,
+  setLinesGraph,
+  xScale
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines });
+    useLegend({ lines, setLinesGraph });
 
   const { getFormattedValue } = useInteractiveValues({
     base,
     lines,
-    timeSeries
+    timeSeries,
+    xScale
   });
 
   const displayedLines = limitLegendRows

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

@@ -3,11 +3,12 @@ import { useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { equals, find, isNil } from 'ramda';
 
-import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
+import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
   formatMetricValue,
   getLineForMetric,
-  getMetrics
+  getMetrics,
+  getTimeValue
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 
@@ -21,14 +22,22 @@ interface Props {
   base: number;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
+  xScale;
 }
 
 const useInteractiveValues = ({
   timeSeries,
   lines,
-  base
+  base,
+  xScale
 }: Props): InteractiveValues => {
-  const timeValue = useAtomValue(timeValueAtom);
+  const mousePosition = useAtomValue(mousePositionAtom);
+
+  const timeValue = getTimeValue({
+    timeSeries,
+    x: mousePosition?.[0],
+    xScale
+  });
 
   const graphTimeValue = timeSeries?.find((item) =>
     equals(item.timeTick, timeValue?.timeTick)

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

@@ -1,6 +1,5 @@
-import { useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect } from 'react';
 
-import { useSetAtom } from 'jotai';
 import {
   equals,
   find,
@@ -17,7 +16,6 @@ import {
   toLower
 } from 'ramda';
 
-import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
@@ -29,11 +27,10 @@ interface LegendActions {
 
 interface Props {
   lines: Array<Line>;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
-const useLegend = ({ lines }: Props): LegendActions => {
-  const setLines = useSetAtom(linesGraphAtom);
-
+const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const displayedLines = reject(propEq('display', false), lines);
   const getLineByMetric = (metric: string): Line =>
     find(propEq('metric', metric), lines) as Line;
@@ -41,7 +38,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
   const toggleMetricLine = (metric): void => {
     const line = getLineByMetric(metric);
 
-    setLines([
+    setLinesGraph([
       ...reject(propEq('metric', metric), lines),
       { ...line, display: !line.display }
     ]);
@@ -56,11 +53,11 @@ const useLegend = ({ lines }: Props): LegendActions => {
 
     const sortedData = sortBy(compose(toLower, prop('name')), data);
 
-    setLines(sortedData);
+    setLinesGraph(sortedData);
   };
 
   const clearHighlight = (): void => {
-    setLines(map((line) => ({ ...line, highlight: undefined }), lines));
+    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
   };
 
   const selectMetricLine = (metric: string): void => {
@@ -71,7 +68,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
       equals(displayedLines.length, 1) && isLineDisplayed;
 
     if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
-      setLines(
+      setLinesGraph(
         map(
           (line) => ({
             ...line,
@@ -84,7 +81,7 @@ const useLegend = ({ lines }: Props): LegendActions => {
       return;
     }
 
-    setLines(
+    setLinesGraph(
       map(
         (line) => ({
           ...line,
@@ -105,8 +102,8 @@ const useLegend = ({ lines }: Props): LegendActions => {
       display: find(propEq('name', line.name), lines)?.display ?? true
     }));
 
-    setLines(newLines);
-  }, []);
+    setLinesGraph(newLines);
+  }, [lines]);
 
   return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,11 +1,12 @@
-import { MutableRefObject, useMemo, useRef } from 'react';
+import { MutableRefObject, useMemo, useRef, useState } from 'react';
 
-import { Group } from '@visx/visx';
+import { Group, Tooltip } from '@visx/visx';
 import { isNil } from 'ramda';
 
-import { ClickAwayListener, Skeleton } from '@mui/material';
+import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
 
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
+import { Line } from '../common/timeSeries/models';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -30,17 +31,27 @@ import {
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
+import Thresholds from './BasicComponents/Thresholds';
 
 interface Props extends LineChartProps {
   curve: CurveType;
+  disabledThresholds?: boolean;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
 }
 
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
 const LineChart = ({
   graphData,
   height = 500,
@@ -58,15 +69,32 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom
+  marginBottom,
+  thresholds,
+  thresholdUnit,
+  thresholdLabels,
+  disabledThresholds
 }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const theme = useTheme();
+
+  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
-  const { classes } = useStyles();
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const legendRef = useRef<HTMLDivElement | null>(null);
 
+  const {
+    tooltipOpen: thresholdTooltipOpen,
+    tooltipLeft: thresholdTooltipLeft,
+    tooltipTop: thresholdTooltipTop,
+    tooltipData: thresholdTooltipData,
+    hideTooltip: hideThresholdTooltip,
+    showTooltip: showThresholdTooltip
+  } = Tooltip.useTooltip();
+
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight =
     (height || 0) > 0
@@ -81,7 +109,9 @@ const LineChart = ({
 
   const { displayedLines, newLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines
+    lines,
+    linesGraph,
+    setLinesGraph
   });
 
   const xScale = useMemo(
@@ -98,6 +128,8 @@ const LineChart = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [displayedLines, timeSeries, graphHeight]
@@ -108,6 +140,8 @@ const LineChart = ({
       getRightScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
+        thresholdUnit,
+        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
@@ -201,6 +235,20 @@ const LineChart = ({
                 }}
                 zoomData={{ ...zoomPreview }}
               />
+
+              {!disabledThresholds && (
+                <Thresholds
+                  displayedLines={displayedLines}
+                  hideTooltip={hideThresholdTooltip}
+                  leftScale={leftScale}
+                  rightScale={rightScale}
+                  showTooltip={showThresholdTooltip}
+                  thresholdLabels={thresholdLabels}
+                  thresholdUnit={thresholdUnit}
+                  thresholds={thresholds}
+                  width={graphWidth}
+                />
+              )}
             </Group.Group>
           </svg>
           {displayTooltip && (
@@ -218,6 +266,20 @@ const LineChart = ({
               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>
       </ClickAwayListener>
       {displayLegend && (
@@ -227,7 +289,9 @@ const LineChart = ({
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
+            setLinesGraph={setLinesGraph}
             timeSeries={timeSeries}
+            xScale={xScale}
           />
         </div>
       )}

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,6 +1,3 @@
 import { atom } from 'jotai';
 
-import { Line } from '../common/timeSeries/models';
-
-export const linesGraphAtom = atom<Array<Line> | null>(null);
 export const timeTickGraphAtom = atom<Date | null>(null);

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

@@ -29,10 +29,11 @@ import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.
 import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
 import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
 import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDay from './mockedData/lastDayThreshold.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 { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -75,7 +76,7 @@ const Threshold = (args): JSX.Element => {
 
       <WrapperLineChart
         {...args}
-        data={dataLastDay}
+        data={dataLastDayThreshold}
         shapeLines={{
           areaThresholdLines: [
             { type: ThresholdType.basic },
@@ -123,7 +124,7 @@ const LineChartAndCLS = (args): JSX.Element => {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      setData(dataLastDay as unknown as LineChartData);
+      setData(dataLastDayThreshold as unknown as LineChartData);
     }, 100000);
   }, []);
 
@@ -187,7 +188,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
     }
 
     if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDay as unknown as LineChartData);
+      setCurrentData(dataLastDayThreshold as unknown as LineChartData);
 
       return;
     }
@@ -281,7 +282,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
       </ButtonGroup>
       <WrapperLineChart
         {...args}
-        data={dataLastDay as unknown as LineChartData}
+        data={dataLastDayThreshold as unknown as LineChartData}
         shapeLines={{
           areaThresholdLines: [
             {
@@ -303,7 +304,7 @@ const Template: Story = {
   render: (args) => (
     <WrapperLineChart
       {...args}
-      data={dataLastDay as unknown as LineChartData}
+      data={dataLastDayThreshold as unknown as LineChartData}
       shapeLines={{
         areaThresholdLines: [
           {
@@ -381,3 +382,33 @@ export const withCLS: Story = {
     start: defaultStart
   }
 };
+
+export const withThresholds: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    thresholdLabels: ['threshold 1', 'threshold 2'],
+    thresholds: [300, 350]
+  },
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataLastDay as unknown as LineChartData}
+    />
+  )
+};
+
+export const withThresholdsAndUnit: Story = {
+  argTypes,
+  args: {
+    ...argumentsData,
+    thresholdUnit: '%',
+    thresholds: [65, 79]
+  },
+  render: (args) => (
+    <WrapperLineChart
+      {...args}
+      data={dataLastDay as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/LineChart/index.tsx

@@ -25,12 +25,16 @@ dayjs.extend(timezonePlugin);
 interface Props extends Partial<LineChartProps> {
   curve?: CurveType;
   data?: LineChartData;
+  disabledThresholds?: boolean;
   end: string;
   legend: LegendModel;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
+  thresholdLabels?: Array<string>;
+  thresholdUnit?: string;
+  thresholds?: Array<number>;
 }
 
 const WrapperLineChart = ({
@@ -50,12 +54,16 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0
+  marginBottom = 0,
+  thresholds,
+  thresholdUnit,
+  thresholdLabels,
+  disabledThresholds
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
-  if (loading || !adjustedData) {
+  if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
@@ -64,6 +72,10 @@ const WrapperLineChart = ({
     );
   }
 
+  if (!adjustedData) {
+    return null;
+  }
+
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
@@ -79,6 +91,7 @@ const WrapperLineChart = ({
               annotationEvent={annotationEvent}
               axis={axis}
               curve={curve}
+              disabledThresholds={disabledThresholds}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -89,6 +102,9 @@ const WrapperLineChart = ({
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}
+              thresholdLabels={thresholdLabels}
+              thresholdUnit={thresholdUnit}
+              thresholds={thresholds}
               timeShiftZones={timeShiftZones}
               tooltip={tooltip}
               width={width ?? responsiveWidth}