@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.7 → 23.10.18-MON-17793-create-graph-component-centreon-ui.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.7",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.8",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -92,6 +92,12 @@
     "@lexical/react": "0.8.0",
     "@lexical/selection": "0.8.0",
     "@lexical/utils": "0.8.0",
+    "@visx/curve": "^2.1.0",
+    "@visx/pattern": "^3.0.0",
+    "@visx/scale": "^3.0.0",
+    "@visx/shape": "^2.12.2",
+    "@visx/threshold": "^2.12.2",
+    "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",

package/src/Dashboard/Dashboard.styles.ts

@@ -2,67 +2,69 @@ import { makeStyles } from 'tss-react/mui';
 
 import { alpha } from '@mui/material';
 
-export const useDashboardLayoutStyles = makeStyles()((theme) => ({
-  container: {
-    '& .react-grid-item': {
-      borderRadius: theme.shape.borderRadius,
-      transition: theme.transitions.create('all', {
-        delay: 0,
-        duration: 100,
-        easing: theme.transitions.easing.easeOut
-      })
-    },
-    '& .react-grid-item.react-draggable-dragging': {
-      boxShadow: theme.shadows[3]
-    },
-    '& .react-grid-item.react-grid-placeholder': {
-      backgroundColor: alpha(theme.palette.primary.main, 0.7)
-    },
-    '& .react-grid-item.resizing': {
-      boxShadow: theme.shadows[3]
-    },
-    '& .react-resizable-handle': {
-      backgroundColor: theme.palette.action.focus,
-      backgroundImage: 'none',
-      borderRadius: theme.shape.borderRadius,
-      display: 'block',
-      opacity: 0,
-      position: 'absolute'
-    },
-    '& .react-resizable-handle.react-resizable-handle-e': {
-      cursor: 'ew-resize',
-      height: `calc(100% - ${theme.spacing(3)})`,
-      marginTop: 0,
-      right: 0,
-      top: 0,
-      transform: 'rotate(0deg)',
-      width: theme.spacing(1)
-    },
-    '& .react-resizable-handle.react-resizable-handle-s': {
-      bottom: 0,
-      cursor: 'ns-resize',
-      height: theme.spacing(1),
-      left: 0,
-      marginLeft: 0,
-      transform: 'rotate(0deg)',
-      width: `calc(100% - ${theme.spacing(3)})`
-    },
-    '& .react-resizable-handle.react-resizable-handle-se': {
-      bottom: 0,
-      cursor: 'nwse-resize',
-      height: theme.spacing(2),
-      right: 0,
-      transform: 'rotate(0deg)',
-      width: theme.spacing(2)
-    },
-    '& .react-resizable-handle::after': {
-      content: 'none'
-    },
-    '& .react-resizable-handle:hover': {
-      opacity: 1
+export const useDashboardLayoutStyles = makeStyles<boolean>()(
+  (theme, isStatic: boolean) => ({
+    container: {
+      '& .react-grid-item': {
+        borderRadius: theme.shape.borderRadius,
+        transition: theme.transitions.create('all', {
+          delay: 0,
+          duration: 100,
+          easing: theme.transitions.easing.easeOut
+        })
+      },
+      '& .react-grid-item.react-draggable-dragging': {
+        boxShadow: theme.shadows[3]
+      },
+      '& .react-grid-item.react-grid-placeholder': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.7)
+      },
+      '& .react-grid-item.resizing': {
+        boxShadow: theme.shadows[3]
+      },
+      '& .react-resizable-handle': {
+        backgroundColor: theme.palette.action.focus,
+        backgroundImage: 'none',
+        borderRadius: theme.shape.borderRadius,
+        display: isStatic ? 'none' : 'block',
+        opacity: 0,
+        position: 'absolute'
+      },
+      '& .react-resizable-handle.react-resizable-handle-e': {
+        cursor: 'ew-resize',
+        height: `calc(100% - ${theme.spacing(3)})`,
+        marginTop: 0,
+        right: 0,
+        top: 0,
+        transform: 'rotate(0deg)',
+        width: theme.spacing(1)
+      },
+      '& .react-resizable-handle.react-resizable-handle-s': {
+        bottom: 0,
+        cursor: 'ns-resize',
+        height: theme.spacing(1),
+        left: 0,
+        marginLeft: 0,
+        transform: 'rotate(0deg)',
+        width: `calc(100% - ${theme.spacing(3)})`
+      },
+      '& .react-resizable-handle.react-resizable-handle-se': {
+        bottom: 0,
+        cursor: 'nwse-resize',
+        height: theme.spacing(2),
+        right: 0,
+        transform: 'rotate(0deg)',
+        width: theme.spacing(2)
+      },
+      '& .react-resizable-handle::after': {
+        content: 'none'
+      },
+      '& .react-resizable-handle:hover': {
+        opacity: 1
+      }
     }
-  }
-}));
+  })
+);
 
 export const useDashboardItemStyles = makeStyles()((theme) => ({
   widgetContainer: {

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from 'react';
+import { useMemo, ReactElement } from 'react';
 
 import { Grid as VisxGrid } from '@visx/visx';
 import { scaleLinear } from '@visx/scale';

package/src/Dashboard/Item.tsx

@@ -18,7 +18,7 @@ interface DashboardItemProps {
   children: ReactElement;
   className?: string;
   header?: ReactElement;
-  key: string;
+  id: string;
   onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
   onTouchEnd?: (e) => void;
@@ -29,13 +29,13 @@ const Item = forwardRef(
   (
     {
       children,
-      key,
       style,
       className,
       header,
       onMouseDown,
       onMouseUp,
-      onTouchEnd
+      onTouchEnd,
+      id
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -55,14 +55,17 @@ const Item = forwardRef(
       Component: (
         <div
           className={className}
-          key={key}
           ref={ref}
           style={style}
           {...cardContainerListeners}
         >
           <Card className={classes.widgetContainer}>
             {header && (
-              <div {...listeners} className={classes.widgetHeader}>
+              <div
+                {...listeners}
+                className={classes.widgetHeader}
+                data-testid={`${id}_move_panel`}
+              >
                 {header}
               </div>
             )}
@@ -70,7 +73,7 @@ const Item = forwardRef(
           </Card>
         </div>
       ),
-      memoProps: [key, style, className, header]
+      memoProps: [style, className, header]
     });
   }
 );

package/src/Dialog/Confirm/index.tsx

@@ -1,12 +1,22 @@
-import DialogContentText from '@mui/material/DialogContentText';
+import { DialogContentText, Typography } from '@mui/material';
 
 import Dialog, { Props as DialogProps } from '..';
 
-type Props = DialogProps & { labelMessage?: string | null };
+type Props = DialogProps & {
+  labelMessage?: string | null;
+  labelSecondMessage?: string | null;
+};
 
-const Confirm = ({ labelMessage, ...rest }: Props): JSX.Element => (
+const Confirm = ({
+  labelMessage,
+  labelSecondMessage,
+  ...rest
+}: Props): JSX.Element => (
   <Dialog {...rest}>
-    {labelMessage && <DialogContentText>{labelMessage}</DialogContentText>}
+    <DialogContentText>
+      {labelMessage && <Typography>{labelMessage}</Typography>}
+      {labelSecondMessage && <Typography>{labelSecondMessage}</Typography>}
+    </DialogContentText>
   </Dialog>
 );
 

package/src/Dialog/index.tsx

@@ -35,6 +35,7 @@ export type Props = {
   confirmDisabled?: boolean;
   contentWidth?: number;
   dialogActionsClassName?: string;
+  dialogConfirmButtonClassName?: string;
   dialogContentClassName?: string;
   dialogPaperClassName?: string;
   dialogTitleClassName?: string;
@@ -65,6 +66,7 @@ const Dialog = ({
   dialogTitleClassName,
   dialogContentClassName,
   dialogActionsClassName,
+  dialogConfirmButtonClassName,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ contentWidth });
@@ -97,6 +99,7 @@ const Dialog = ({
         )}
         <Button
           aria-label={labelConfirm || ''}
+          className={dialogConfirmButtonClassName}
           color="primary"
           disabled={confirmDisabled}
           endIcon={submitting && <CircularProgress size={15} />}

package/src/Graph/BasicComponents/Lines/RegularLines/index.tsx

@@ -72,17 +72,13 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     timeSeries: prevTimeSeries,
     graphHeight: prevGraphHeight,
     highlight: prevHighlight,
-    xScale: prevXScale,
-    shapeLinePath: prevShapeLinePath,
-    shapeAreaClosed: prevShapeAreaClosed
+    xScale: prevXScale
   } = prevProps;
   const {
     timeSeries: nextTimeSeries,
     graphHeight: nextGraphHeight,
     highlight: nextHighlight,
-    xScale: nextXScale,
-    shapeLinePath: nextShapeLinePath,
-    shapeAreaClosed: nextShapeAreaClosed
+    xScale: nextXScale
   } = nextProps;
 
   const prevXScaleRange = prevXScale.range();
@@ -92,8 +88,6 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     equals(prevTimeSeries, nextTimeSeries) &&
     equals(prevGraphHeight, nextGraphHeight) &&
     equals(prevHighlight, nextHighlight) &&
-    equals(prevXScaleRange, nextXScaleRange) &&
-    equals(prevShapeAreaClosed, nextShapeAreaClosed) &&
-    equals(prevShapeLinePath, nextShapeLinePath)
+    equals(prevXScaleRange, nextXScaleRange)
   );
 });

package/src/Graph/BasicComponents/Lines/Threshold/BasicThreshold.tsx

@@ -5,12 +5,14 @@ import { Threshold } from '@visx/threshold';
 import { TimeValue } from '../../../timeSeries/models';
 
 interface Props {
+  fillAboveArea: string;
+  fillBelowArea: string;
+  fillOpacity?: number;
   getX: ScaleLinear<number, number>;
   getY0: ScaleLinear<number, number>;
   getY1: ScaleLinear<number, number>;
   graphHeight: number;
-  lineColorY0: string;
-  lineColorY1: string;
+  id?: string;
   timeSeries: Array<TimeValue>;
 }
 
@@ -18,26 +20,28 @@ const BasicThreshold = ({
   getX,
   getY0,
   getY1,
-  lineColorY0,
-  lineColorY1,
   graphHeight,
-  timeSeries
+  timeSeries,
+  fillOpacity = 0.1,
+  id = 'threshold',
+  fillAboveArea,
+  fillBelowArea
 }: Props): JSX.Element => {
   return (
     <Threshold
       aboveAreaProps={{
-        fill: lineColorY1,
-        fillOpacity: 0.1
+        fill: fillAboveArea,
+        fillOpacity
       }}
       belowAreaProps={{
-        fill: lineColorY0,
-        fillOpacity: 0.1
+        fill: fillBelowArea,
+        fillOpacity
       }}
       clipAboveTo={0}
       clipBelowTo={graphHeight}
       curve={curveBasis}
       data={timeSeries}
-      id="threshold"
+      id={id}
       x={getX}
       y0={getY0}
       y1={getY1}

package/src/Graph/BasicComponents/Lines/Threshold/Circle.tsx

@@ -1,51 +1,45 @@
 import { Shape } from '@visx/visx';
-import { isEmpty, isNil, prop } from 'ramda';
-import { ScaleLinear } from 'd3-scale';
+import { isEmpty, isNil } from 'ramda';
 
-import { getTime } from '../../../timeSeries/index';
-import { TimeValue } from '../../../timeSeries/models';
-
-import usePointsOnline from './usePointsOnline';
-import { Data } from './models';
-
-interface Circle {
-  dataY0: Data;
-  dataY1: Data;
-  dataYOrigin: Data;
-  timeValue: TimeValue;
-  variation: number;
-  xScale: ScaleLinear<number, number>;
-}
+import { Circle } from './models';
+import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({
-  timeValue,
   dataY0,
   dataY1,
   dataYOrigin,
   xScale,
-  variation
+  factors,
+  timeSeries,
+  getCountDisplayedCircles
 }: Circle): JSX.Element | null => {
-  const { metric: metricY0, yScale: y0Scale } = dataY0;
-  const { metric: metricY1, yScale: y1Scale } = dataY1;
-  const { metric: metricYOrigin, yScale } = dataYOrigin;
-
-  const x = xScale(getTime(timeValue));
-  const y = yScale(prop(metricYOrigin, timeValue));
-
-  const y0 = y0Scale(prop(metricY0, timeValue) + variation);
-
-  const y1 = y1Scale(prop(metricY1, timeValue) - variation);
-  const coordinate = usePointsOnline({
-    pointLower: { x, y: y0 },
-    pointOrigin: { x, y },
-    pointUpper: { x, y: y1 }
+  const coordinates = useCoordinateCircle({
+    dataY0,
+    dataY1,
+    dataYOrigin,
+    factors,
+    getCountDisplayedCircles,
+    timeSeries,
+    xScale
   });
 
-  if (isEmpty(coordinate) || isNil(coordinate)) {
+  if (isEmpty(coordinates) || isNil(coordinates)) {
     return null;
   }
 
-  return <Shape.Circle cx={coordinate.x} cy={coordinate.y} fill="red" r={2} />;
+  return (
+    <g>
+      {coordinates.map(({ x, y }) => (
+        <Shape.Circle
+          cx={x}
+          cy={y}
+          fill="red"
+          key={`${x.toString()}-${y.toString()}`}
+          r={2}
+        />
+      ))}
+    </g>
+  );
 };
 
 export default Circle;

package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithPatternLines.tsx

@@ -0,0 +1,82 @@
+import { PatternLines } from '@visx/pattern';
+import { ScaleLinear } from 'd3-scale';
+import { prop } from 'ramda';
+
+import { useTheme } from '@mui/material/styles';
+
+import { getTime } from '../../../timeSeries/index';
+import { TimeValue } from '../../../timeSeries/models';
+import { adjustGraphData } from '../../../helpers/index';
+import { GraphData } from '../../../models';
+
+import BasicThreshold from './BasicThreshold';
+import useDataThreshold from './useDataThreshold';
+
+interface Props {
+  data: GraphData;
+  display: boolean;
+  graphHeight: number;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const ThresholdWithPatternLines = ({
+  graphHeight,
+  data,
+  display,
+  leftScale,
+  rightScale,
+  xScale
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+
+  const { lines, timeSeries } = adjustGraphData(data);
+
+  const { dataY0, dataY1, displayThreshold } = useDataThreshold({
+    display,
+    leftScale,
+    lines,
+    rightScale
+  });
+
+  if (!dataY0 || !dataY1 || !displayThreshold) {
+    return null;
+  }
+  const { metric: metricY0, yScale: y0Scale } = dataY0;
+  const { metric: metricY1, yScale: y1Scale } = dataY1;
+
+  const getX = (timeValue: TimeValue): number => xScale(getTime(timeValue));
+
+  const getY0 = (timeValue: TimeValue): number =>
+    y0Scale(prop(metricY0, timeValue)) ?? null;
+
+  const getY1 = (timeValue: TimeValue): number =>
+    y1Scale(prop(metricY1, timeValue)) ?? null;
+
+  return (
+    <>
+      <BasicThreshold
+        fillAboveArea={"url('#lines')"}
+        fillBelowArea={"url('#lines')"}
+        fillOpacity={0.8}
+        getX={getX}
+        getY0={getY0}
+        getY1={getY1}
+        graphHeight={graphHeight}
+        timeSeries={timeSeries}
+      />
+      <PatternLines
+        data-testid="patternLinesExclusionPeriods"
+        height={5}
+        id="lines"
+        orientation={['diagonal']}
+        stroke={theme.palette.text.primary}
+        strokeWidth={1}
+        width={5}
+      />
+    </>
+  );
+};
+
+export default ThresholdWithPatternLines;

package/src/Graph/BasicComponents/Lines/Threshold/ThresholdWithVariation.tsx

@@ -0,0 +1,72 @@
+import { curveBasis } from '@visx/curve';
+import { LinePath } from '@visx/shape';
+import { ScaleLinear } from 'd3-scale';
+
+import { useTheme } from '@mui/material/styles';
+
+import { useMemoComponent } from '@centreon/ui';
+
+import { TimeValue } from '../../../timeSeries/models';
+
+import BasicThreshold from './BasicThreshold';
+import { Data, FactorsVariation } from './models';
+import { getVariationEnvelopThresholdData } from './helpers';
+
+interface Props {
+  dataY0: Data;
+  dataY1: Data;
+  factors: FactorsVariation;
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const ThresholdWithVariation = ({
+  dataY0,
+  dataY1,
+  timeSeries,
+  xScale,
+  graphHeight,
+  factors
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const { getX, getY0, getY1, lineColorY0, lineColorY1 } =
+    getVariationEnvelopThresholdData({
+      dataY0,
+      dataY1,
+      factors,
+      xScale
+    });
+
+  const props = {
+    curve: curveBasis,
+    data: timeSeries,
+    stroke: theme.palette.secondary.main,
+    strokeDasharray: 5,
+    strokeOpacity: 0.8,
+    x: getX
+  };
+
+  return useMemoComponent({
+    Component: (
+      <>
+        <BasicThreshold
+          fillAboveArea={lineColorY1}
+          fillBelowArea={lineColorY0}
+          getX={getX}
+          getY0={getY0}
+          getY1={getY1}
+          graphHeight={graphHeight}
+          timeSeries={timeSeries}
+        />
+
+        <LinePath {...props} y={getY0} />
+        <LinePath {...props} y={getY1} />
+      </>
+    ),
+    memoProps: [timeSeries, factors]
+  });
+};
+
+export default ThresholdWithVariation;