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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.19",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.20",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -104,8 +104,10 @@
     "lexical": "0.8.0",
     "notistack": "^2.0.8",
     "react-grid-layout": "^1.3.4",
+    "react-html-parser": "^2.0.2",
     "react-resizable": "^3.0.5",
     "react-transition-group": "^4.4.5",
+    "sanitize-html": "^2.10.0",
     "ulog": "^2.0.0-beta.19"
   },
   "peerDependencies": {

package/src/Button/Save/index.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Theme } from '@mui/material';
@@ -13,7 +13,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
   }
 }));
 
-export default {
+const meta = {
   argTypes: {
     labelLoading: { control: 'text' },
     labelSave: { control: 'text' },
@@ -26,8 +26,13 @@ export default {
 
   component: ButtonSave,
 
+  parameters: {
+    chromatic: { delay: 300 }
+  },
   title: 'Button/Save'
-} as ComponentMeta<typeof ButtonSave>;
+};
+
+export default meta;
 
 const TemplateButtonSave: ComponentStory<typeof ButtonSave> = (args) => (
   <ButtonSave {...args} />
@@ -42,7 +47,7 @@ export const loading = (): JSX.Element => <ButtonSave loading />;
 export const succeeded = (): JSX.Element => <ButtonSave succeeded />;
 
 export const normalWithText = (): JSX.Element => (
-  <ButtonSave labelSave="Save" />
+  <ButtonSave labelSave="Save" size="medium" />
 );
 
 export const largeWithText = (): JSX.Element => (
@@ -50,7 +55,7 @@ export const largeWithText = (): JSX.Element => (
 );
 
 export const loadingWithTextAndMediumSize = (): JSX.Element => (
-  <ButtonSave loading labelLoading="Loading" />
+  <ButtonSave loading labelLoading="Loading" size="medium" />
 );
 
 export const succeededWithText = (): JSX.Element => (

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

@@ -43,7 +43,7 @@ const RegularLine = ({
     curve: Curve.curveLinear,
     data: timeSeries,
     defined: (value): boolean => !isNil(value[metric]),
-    opacity: highlight === false ? 0.3 : 1,
+    opacity: !highlight ? 0.7 : 1,
     stroke: lineColor,
     strokeWidth: isHighlighted,
     unit,

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

@@ -1,5 +1,4 @@
 import { curveBasis } from '@visx/curve';
-import { ScaleLinear } from 'd3-scale';
 import { Threshold } from '@visx/threshold';
 
 import { TimeValue } from '../../../timeSeries/models';
@@ -8,11 +7,11 @@ interface Props {
   fillAboveArea: string;
   fillBelowArea: string;
   fillOpacity?: number;
-  getX: ScaleLinear<number, number>;
-  getY0: ScaleLinear<number, number>;
-  getY1: ScaleLinear<number, number>;
+  getX: (timeValue: TimeValue) => number;
+  getY0: (timeValue: TimeValue) => number;
+  getY1: (timeValue: TimeValue) => number;
   graphHeight: number;
-  id?: string;
+  id: string;
   timeSeries: Array<TimeValue>;
 }
 
@@ -23,7 +22,7 @@ const BasicThreshold = ({
   graphHeight,
   timeSeries,
   fillOpacity = 0.1,
-  id = 'threshold',
+  id,
   fillAboveArea,
   fillBelowArea
 }: Props): JSX.Element => {

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

@@ -5,22 +5,20 @@ import { Circle } from './models';
 import useCoordinateCircle from './useCoordinateCircle';
 
 const Circle = ({
-  dataY0,
-  dataY1,
-  dataYOrigin,
-  xScale,
-  factors,
+  getY0Variation,
+  getY1Variation,
+  getYOrigin,
   timeSeries,
+  getX,
   getCountDisplayedCircles
 }: Circle): JSX.Element | null => {
   const coordinates = useCoordinateCircle({
-    dataY0,
-    dataY1,
-    dataYOrigin,
-    factors,
     getCountDisplayedCircles,
-    timeSeries,
-    xScale
+    getX,
+    getY0Variation,
+    getY1Variation,
+    getYOrigin,
+    timeSeries
   });
 
   if (isEmpty(coordinates) || isNil(coordinates)) {

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

@@ -1,22 +1,20 @@
 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 { GraphData, PatternOrientation } from '../../../models';
 
 import BasicThreshold from './BasicThreshold';
-import useDataThreshold from './useDataThreshold';
+import useScaleThreshold from './useScaleThreshold';
 
 interface Props {
   data: GraphData;
-  display: boolean;
   graphHeight: number;
+  id: string;
   leftScale: ScaleLinear<number, number>;
+  orientation?: Array<PatternOrientation>;
   rightScale: ScaleLinear<number, number>;
   xScale: ScaleLinear<number, number>;
 }
@@ -24,35 +22,27 @@ interface Props {
 const ThresholdWithPatternLines = ({
   graphHeight,
   data,
-  display,
+  orientation = ['diagonal'],
   leftScale,
   rightScale,
-  xScale
+  xScale,
+  id
 }: Props): JSX.Element | null => {
   const theme = useTheme();
 
   const { lines, timeSeries } = adjustGraphData(data);
 
-  const { dataY0, dataY1, displayThreshold } = useDataThreshold({
-    display,
+  const result = useScaleThreshold({
     leftScale,
     lines,
-    rightScale
+    rightScale,
+    xScale
   });
-
-  if (!dataY0 || !dataY1 || !displayThreshold) {
+  if (!result) {
     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;
+  const { getX, getY0, getY1 } = result;
 
   return (
     <>
@@ -64,13 +54,14 @@ const ThresholdWithPatternLines = ({
         getY0={getY0}
         getY1={getY1}
         graphHeight={graphHeight}
+        id={id}
         timeSeries={timeSeries}
       />
       <PatternLines
         data-testid="patternLinesExclusionPeriods"
         height={5}
         id="lines"
-        orientation={['diagonal']}
+        orientation={orientation}
         stroke={theme.palette.text.primary}
         strokeWidth={1}
         width={5}

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

@@ -1,72 +1,59 @@
 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;
+  getX: (timeValue: TimeValue) => number;
+  getY0Variation: (timeValue: TimeValue) => number;
+  getY1Variation: (timeValue: TimeValue) => number;
   graphHeight: number;
+  lineColorY0: string;
+  lineColorY1: string;
   timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
 }
 
 const ThresholdWithVariation = ({
-  dataY0,
-  dataY1,
   timeSeries,
-  xScale,
+  getX,
+  getY0Variation,
+  getY1Variation,
   graphHeight,
-  factors
+  lineColorY1,
+  lineColorY0
 }: 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,
+    strokeOpacity: 0.9,
     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]
-  });
+  return (
+    <>
+      <BasicThreshold
+        fillAboveArea={lineColorY1}
+        fillBelowArea={lineColorY0}
+        getX={getX}
+        getY0={getY0Variation}
+        getY1={getY1Variation}
+        graphHeight={graphHeight}
+        id="ThresholdWithVariation"
+        timeSeries={timeSeries}
+      />
+
+      <LinePath {...props} y={getY0Variation} />
+      <LinePath {...props} y={getY1Variation} />
+    </>
+  );
 };
 
 export default ThresholdWithVariation;

package/src/Graph/BasicComponents/Lines/Threshold/helpers/index.ts

@@ -1,17 +1,11 @@
-import { isNil, prop } from 'ramda';
-import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
 
 import {
   ArePointsOnline,
-  Data,
-  FactorsVariation,
-  GetEnvelopeVariation,
+  EnvelopeVariationFormula,
   Online,
-  Point,
-  Result
+  Point
 } from '../models';
-import { TimeValue } from '../../../../timeSeries/models';
-import { getTime } from '../../../../timeSeries/index';
 
 export const checkArePointsOnline = ({
   pointOrigin,
@@ -58,65 +52,18 @@ export const checkArePointsOnline = ({
   return !arePointsOnline && arePointsDefined ? pointOrigin : null;
 };
 
-interface Props {
-  dataY0: Data;
-  dataY1: Data;
-  factors: FactorsVariation;
-  xScale: ScaleLinear<number, number>;
-}
+export const envelopeVariationFormula = ({
+  upperRealValue,
+  lowerRealValue,
+  factorsData
+}: EnvelopeVariationFormula): number => {
+  const { currentFactorMultiplication, simulatedFactorMultiplication } =
+    factorsData;
 
-export const getVariationEnvelopThresholdData = ({
-  dataY0,
-  dataY1,
-  factors,
-  xScale
-}: Props): Result => {
-  const { lineColor: lineColorY0, metric: metricY0, yScale: y0Scale } = dataY0;
-  const { lineColor: lineColorY1, metric: metricY1, yScale: y1Scale } = dataY1;
+  const variation = upperRealValue - lowerRealValue;
 
-  const getEnvelopeVariation = ({
-    metricUpper,
-    metricLower,
-    timeValue,
-    factorsData
-  }: GetEnvelopeVariation): number => {
-    const upperRealValue = prop(metricUpper, timeValue);
-    const lowerRealValue = prop(metricLower, timeValue);
+  const factor =
+    1 - simulatedFactorMultiplication / currentFactorMultiplication;
 
-    const { currentFactorMultiplication, simulatedFactorMultiplication } =
-      factorsData;
-
-    const variation = upperRealValue - lowerRealValue;
-
-    const factor =
-      1 - simulatedFactorMultiplication / currentFactorMultiplication;
-
-    return (variation / 2) * factor;
-  };
-
-  const getX = (timeValue: TimeValue): number =>
-    xScale(getTime(timeValue)) as number;
-
-  const getY0 = (timeValue: TimeValue): number => {
-    const variation = getEnvelopeVariation({
-      factorsData: factors,
-      metricLower: metricY0,
-      metricUpper: metricY1,
-      timeValue
-    });
-
-    return y0Scale(prop(metricY0, timeValue) + variation) ?? null;
-  };
-  const getY1 = (timeValue: TimeValue): number => {
-    const variation = getEnvelopeVariation({
-      factorsData: factors,
-      metricLower: metricY0,
-      metricUpper: metricY1,
-      timeValue
-    });
-
-    return y1Scale(prop(metricY1, timeValue) - variation) ?? null;
-  };
-
-  return { getX, getY0, getY1, lineColorY0, lineColorY1 };
+  return (variation / 2) * factor;
 };

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

@@ -1,40 +1,138 @@
-import { prop } from 'ramda';
+import { equals, isNil } from 'ramda';
 
-import { getTime } from '../../../timeSeries/index';
+import { displayArea } from '../../../helpers/index';
+import {
+  PatternThreshold,
+  ThresholdType,
+  VariationThreshold
+} from '../../../models';
 import { TimeValue } from '../../../timeSeries/models';
 
 import BasicThreshold from './BasicThreshold';
-import { ThresholdLinesModel } from './models';
+import Circle from './Circle';
+import ThresholdWithPatternLines from './ThresholdWithPatternLines';
+import ThresholdWithVariation from './ThresholdWithVariation';
+import { WrapperThresholdLinesModel } from './models';
+import useScaleThreshold from './useScaleThreshold';
 
-const ThresholdLines = ({
-  dataY0,
-  dataY1,
+interface Props extends WrapperThresholdLinesModel {
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+}
+
+const WrapperThresholdLines = ({
+  areaThresholdLines,
+  graphHeight,
+  leftScale,
+  lines,
+  rightScale,
   timeSeries,
-  xScale,
-  graphHeight
-}: ThresholdLinesModel): JSX.Element => {
-  const { lineColor: lineColorY0, metric: metricY0, yScale: y0Scale } = dataY0;
-  const { lineColor: lineColorY1, metric: metricY1, yScale: y1Scale } = dataY1;
+  xScale
+}: Props): JSX.Element | null => {
+  const data = useScaleThreshold({
+    areaThresholdLines,
+    leftScale,
+    lines,
+    rightScale,
+    xScale
+  });
+
+  if (!data) {
+    return null;
+  }
+
+  const { getX, getY0, getY1, lineColorY0, lineColorY1, ...rest } = data;
+
+  const commonProps = {
+    fillAboveArea: lineColorY0,
+    fillBelowArea: lineColorY1,
+    getX,
+    graphHeight,
+    timeSeries
+  };
+
+  const thresholdLines = areaThresholdLines?.map((item, index) => {
+    const { type } = item;
+
+    if (equals(type, ThresholdType.basic)) {
+      return [
+        {
+          Component: BasicThreshold,
+          key: index,
+          props: { ...commonProps, getY0, getY1 }
+        }
+      ];
+    }
+    if (equals(type, ThresholdType.variation)) {
+      const dataVariation = item as VariationThreshold;
+      if (!rest?.getY0Variation || !rest.getY1Variation || !rest.getYOrigin) {
+        return null;
+      }
+
+      return [
+        {
+          Component: ThresholdWithVariation,
+          key: index,
+          props: {
+            factors: dataVariation.factors,
+            ...commonProps,
+            ...rest
+          }
+        },
+        {
+          Component: Circle,
+          key: 'circle',
+          props: {
+            ...rest,
+            getCountDisplayedCircles: dataVariation?.getCountDisplayedCircles,
+            getX,
+            timeSeries
+          }
+        }
+      ];
+    }
+    if (equals(type, ThresholdType.pattern)) {
+      const dataPattern = item as PatternThreshold;
+
+      if (!displayArea(dataPattern?.data)) {
+        return null;
+      }
+
+      const { data: pattern } = dataPattern;
+
+      return pattern.map((element, ind) => ({
+        Component: ThresholdWithPatternLines,
+        key: ind,
+        props: {
+          data: element,
+          graphHeight,
+          key: ind,
+          leftScale,
+          orientation: dataPattern?.orientation,
+          rightScale,
+          xScale
+        }
+      }));
+    }
+
+    return null;
+  });
 
-  const getX = (timeValue: TimeValue): number =>
-    xScale(getTime(timeValue)) as number;
+  const filteredThresholdLines = thresholdLines?.filter((item) => !isNil(item));
 
-  const getY0 = (timeValue: TimeValue): number =>
-    y0Scale(prop(metricY0, timeValue)) ?? null;
-  const getY1 = (timeValue: TimeValue): number =>
-    y1Scale(prop(metricY1, timeValue)) ?? null;
+  if (!filteredThresholdLines) {
+    return null;
+  }
 
   return (
-    <BasicThreshold
-      fillAboveArea={lineColorY1}
-      fillBelowArea={lineColorY0}
-      getX={getX}
-      getY0={getY0}
-      getY1={getY1}
-      graphHeight={graphHeight}
-      timeSeries={timeSeries}
-    />
+    <g>
+      {filteredThresholdLines.map((element) =>
+        element?.map(({ Component, props, key }) => (
+          <Component {...props} id={key} key={key} />
+        ))
+      )}
+    </g>
   );
 };
 
-export default ThresholdLines;
+export default WrapperThresholdLines;