@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.20 → 23.10.18-MON-17793-create-graph-component-centreon-ui.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.20",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.22",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

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

@@ -3,6 +3,7 @@ import { MutableRefObject } from 'react';
 import { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
 
+import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
 import RegularAnchorPoint from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
 import { displayArea } from '../../helpers/index';
 import { GlobalAreaLines } from '../../models';
@@ -107,6 +108,15 @@ const Lines = ({
         />
       )}
 
+      {displayAnchor && (
+        <GuidingLines
+          graphHeight={height}
+          graphWidth={width}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
       {displayAreaRegularLines
         ? regularLines.map(
             ({
@@ -136,8 +146,6 @@ const Lines = ({
                   {displayAnchor && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
-                      graphHeight={height}
-                      graphWidth={width}
                       lineColor={lineColor}
                       metric={metric}
                       timeSeries={timeSeries}

package/src/Graph/{icons → Icons}/Downtime.tsx

@@ -1,6 +1,6 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-import { ReactComponent as IconDowntime } from './downtime.icon.svg';
+import { ReactComponent as IconDowntime } from '../../@assets/icons/downtime.icon.svg';
 
 const Downtime = (props: SvgIconProps): JSX.Element => (
   <SvgIcon component={IconDowntime} {...props} />

package/src/Graph/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -0,0 +1,39 @@
+import { Shape } from '@visx/visx';
+
+import { grey } from '@mui/material/colors';
+
+import useTickGraph from './useTickGraph';
+import { GuidingLines } from './models';
+
+const GuidingLines = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  graphWidth
+}: GuidingLines): JSX.Element => {
+  const { positionX, positionY } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  return (
+    <>
+      <Shape.Line
+        from={{ x: positionX, y: 0 }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </>
+  );
+};
+
+export default GuidingLines;

package/src/Graph/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -5,19 +5,15 @@ import { bisectDate, getDates } from '../../timeSeries';
 import { TimeValue } from '../../timeSeries/models';
 
 import useTickGraph from './useTickGraph';
+import { GetYAnchorPoint } from './models';
 
 import AnchorPoint from '.';
 
 interface Props {
   areaColor: string;
-  graphHeight: number;
-  graphWidth: number;
   lineColor: string;
   metric: string;
-  positionX?: number;
-  positionY?: number;
   timeSeries: Array<TimeValue>;
-  timeTick?: Date;
   transparency: number;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -28,7 +24,7 @@ const getYAnchorPoint = ({
   timeSeries,
   yScale,
   metric
-}: Pick<Props, 'timeTick' | 'timeSeries' | 'yScale' | 'metric'>): number => {
+}: GetYAnchorPoint): number => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
@@ -42,10 +38,9 @@ const RegularAnchorPoint = ({
   timeSeries,
   areaColor,
   transparency,
-  lineColor,
-  ...rest
+  lineColor
 }: Props): JSX.Element | null => {
-  const { timeTick, positionX, positionY } = useTickGraph({
+  const { timeTick } = useTickGraph({
     timeSeries,
     xScale
   });
@@ -71,12 +66,9 @@ const RegularAnchorPoint = ({
     <AnchorPoint
       areaColor={areaColor}
       lineColor={lineColor}
-      positionX={positionX}
-      positionY={positionY}
       transparency={transparency}
       x={xAnchorPoint}
       y={yAnchorPoint}
-      {...rest}
     />
   );
 };

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

@@ -1,14 +1,6 @@
-import { Shape } from '@visx/visx';
-
-import { grey } from '@mui/material/colors';
-
 interface Props {
   areaColor: string;
-  graphHeight: number;
-  graphWidth: number;
   lineColor: string;
-  positionX?: number;
-  positionY?: number;
   transparency: number;
   x: number;
   y: number;
@@ -19,37 +11,17 @@ const Point = ({
   lineColor,
   transparency,
   x,
-  y,
-  ...rest
+  y
 }: Props): JSX.Element => {
-  const { positionX, positionY, graphHeight, graphWidth } = rest;
-
   return (
-    <g>
-      <circle
-        cx={x}
-        cy={y}
-        fill={areaColor}
-        fillOpacity={(1 - transparency * 0.01).toString()}
-        r={3}
-        stroke={lineColor}
-      />
-
-      <Shape.Line
-        from={{ x: positionX, y: 0 }}
-        pointerEvents="none"
-        stroke={grey[400]}
-        strokeWidth={1}
-        to={{ x: positionX, y: graphHeight }}
-      />
-      <Shape.Line
-        from={{ x: 0, y: positionY }}
-        pointerEvents="none"
-        stroke={grey[400]}
-        strokeWidth={1}
-        to={{ x: graphWidth, y: positionY }}
-      />
-    </g>
+    <circle
+      cx={x}
+      cy={y}
+      fill={areaColor}
+      fillOpacity={(1 - transparency * 0.01).toString()}
+      r={3}
+      stroke={lineColor}
+    />
   );
 };
 

package/src/Graph/InteractiveComponents/AnchorPoint/models.ts

@@ -23,3 +23,17 @@ export interface StackData {
   data: TimeValue;
 }
 export type StackValue = [number, number, StackData];
+
+export interface GuidingLines {
+  graphHeight: number;
+  graphWidth: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+export interface GetYAnchorPoint {
+  metric: string;
+  timeSeries: Array<TimeValue>;
+  timeTick: Date;
+  yScale: ScaleLinear<number, number>;
+}

package/src/Graph/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useTheme } from '@mui/material';
 
-import IconDowntime from '../../../icons/Downtime';
+import IconDowntime from '../../../Icons/Downtime';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
 import { Args } from '../models';

package/src/Graph/index.stories.tsx

@@ -50,7 +50,7 @@ interface Random {
 
 const Threshold = (args): JSX.Element => {
   const [currentFactorMultiplication, setCurrentFactorMultiplication] =
-    useState<number>();
+    useState<number>(2.5);
   const [countedCircles, setCountedCircles] = useState<number>();
 
   const getRandomInt = ({ min, max }: Random): number => {
@@ -122,7 +122,7 @@ const GraphAndCLS = (args): JSX.Element => {
     setTimeout(() => {
       setLoading(false);
       setData(dataLastDay as unknown as GraphData);
-    }, 1000);
+    }, 100000);
   }, []);
 
   return (
@@ -257,7 +257,7 @@ const GraphAndTimePeriod = (args): JSX.Element => {
 const GraphAndExclusionPeriod = (args): JSX.Element => {
   const [dataExclusionPeriods, setDataExclusionPeriods] = useState<
     Array<GraphData>
-  >([]);
+  >([exclusionPeriodFirstPeriod as unknown as GraphData]);
 
   const handleClick = (data): void => {
     setDataExclusionPeriods([...dataExclusionPeriods, data]);
@@ -270,14 +270,11 @@ const GraphAndExclusionPeriod = (args): JSX.Element => {
         aria-label="outlined primary button group"
         variant="contained"
       >
-        <Button onClick={(): void => handleClick(exclusionPeriodFirstPeriod)}>
-          first
-        </Button>
         <Button onClick={(): void => handleClick(exclusionPeriodSecondPeriod)}>
-          second
+          first
         </Button>
         <Button onClick={(): void => handleClick(exclusionPeriodThirdPeriod)}>
-          third
+          second
         </Button>
       </ButtonGroup>
       <WrapperGraph

package/src/api/useRequest/index.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 import 'ulog';
 import axios from 'axios';
-import { pathOr, defaultTo, path, includes } from 'ramda';
+import { pathOr, defaultTo, path, includes, or } from 'ramda';
 import anylogger from 'anylogger';
 import { JsonDecoder } from 'ts.data.json';
 
@@ -42,12 +42,15 @@ const useRequest = <TResult>({
 
   const showRequestErrorMessage = (error): void => {
     log.error(error);
-    const message = defaultTo(
-      pathOr(defaultFailureMessage, ['response', 'data', 'message']),
-      getErrorMessage
-    )(error);
 
-    showErrorMessage(message);
+    const message = or(
+      pathOr(undefined, ['response', 'data', 'message'], error),
+      pathOr(defaultFailureMessage, ['response', 'data'], error)
+    );
+
+    const errorMessage = defaultTo(message, getErrorMessage?.(error));
+
+    showErrorMessage(errorMessage as string);
   };
 
   const sendRequest = (params): Promise<TResult> => {