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

package/package.json

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

package/src/Graph/BasicComponents/Lines/{useDataRegularLines.ts → RegularLines/useDataRegularLines.ts}

@@ -1,9 +1,8 @@
 import { ScaleLinear } from 'd3-scale';
 
-import { Line, TimeValue } from '../../timeSeries/models';
-import { displayArea } from '../../helpers/index';
-
-import { AreaRegularLines } from './models';
+import { Line, TimeValue } from '../../../timeSeries/models';
+import { displayArea } from '../../../helpers/index';
+import { AreaRegularLines } from '../models';
 
 interface RegularLinesData {
   display: boolean;

package/src/Graph/BasicComponents/Lines/{useDataStackLines.ts → StackedLines/useDataStackLines.ts}

@@ -1,10 +1,9 @@
 import { ScaleLinear } from 'd3-scale';
 
-import { getStackedYScale } from '../../timeSeries';
-import { displayArea } from '../../helpers/index';
-import { Line, TimeValue } from '../../timeSeries/models';
-
-import { AreaStackedLines } from './models';
+import { getStackedYScale } from '../../../timeSeries';
+import { displayArea } from '../../../helpers/index';
+import { Line, TimeValue } from '../../../timeSeries/models';
+import { AreaStackedLines } from '../models';
 
 interface StackedLinesData {
   displayAreaInvertedStackedLines: boolean;

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

@@ -0,0 +1,48 @@
+import { curveBasis } from '@visx/curve';
+import { ScaleLinear } from 'd3-scale';
+import { Threshold } from '@visx/threshold';
+
+import { TimeValue } from '../../../timeSeries/models';
+
+interface Props {
+  getX: ScaleLinear<number, number>;
+  getY0: ScaleLinear<number, number>;
+  getY1: ScaleLinear<number, number>;
+  graphHeight: number;
+  lineColorY0: string;
+  lineColorY1: string;
+  timeSeries: Array<TimeValue>;
+}
+
+const BasicThreshold = ({
+  getX,
+  getY0,
+  getY1,
+  lineColorY0,
+  lineColorY1,
+  graphHeight,
+  timeSeries
+}: Props): JSX.Element => {
+  return (
+    <Threshold
+      aboveAreaProps={{
+        fill: lineColorY1,
+        fillOpacity: 0.1
+      }}
+      belowAreaProps={{
+        fill: lineColorY0,
+        fillOpacity: 0.1
+      }}
+      clipAboveTo={0}
+      clipBelowTo={graphHeight}
+      curve={curveBasis}
+      data={timeSeries}
+      id="threshold"
+      x={getX}
+      y0={getY0}
+      y1={getY1}
+    />
+  );
+};
+
+export default BasicThreshold;

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

@@ -0,0 +1,51 @@
+import { Shape } from '@visx/visx';
+import { isEmpty, isNil, prop } from 'ramda';
+import { ScaleLinear } from 'd3-scale';
+
+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>;
+}
+
+const Circle = ({
+  timeValue,
+  dataY0,
+  dataY1,
+  dataYOrigin,
+  xScale,
+  variation
+}: 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 }
+  });
+
+  if (isEmpty(coordinate) || isNil(coordinate)) {
+    return null;
+  }
+
+  return <Shape.Circle cx={coordinate.x} cy={coordinate.y} fill="red" r={2} />;
+};
+
+export default Circle;

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

@@ -1,11 +1,14 @@
 import { curveBasis } from '@visx/curve';
-import { Threshold } from '@visx/threshold';
+import { LinePath } from '@visx/shape';
 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 BasicThreshold from './BasicThreshold';
 import { Data } from './models';
 
 interface Props {
@@ -13,6 +16,7 @@ interface Props {
   dataY1: Data;
   graphHeight: number;
   timeSeries: Array<TimeValue>;
+  variation?: number;
   xScale: ScaleLinear<number, number>;
 }
 
@@ -21,30 +25,66 @@ const ThresholdLines = ({
   dataY1,
   timeSeries,
   xScale,
-  graphHeight
+  graphHeight,
+  variation
 }: Props): JSX.Element => {
+  const theme = useTheme();
+
   const { lineColor: lineColorY0, metric: metricY0, yScale: y0Scale } = dataY0;
   const { lineColor: lineColorY1, metric: metricY1, yScale: y1Scale } = dataY1;
 
+  const getX = (timeValue: TimeValue): number =>
+    xScale(getTime(timeValue)) as number;
+
+  if (!variation) {
+    const getY0 = (timeValue: TimeValue): number =>
+      y0Scale(prop(metricY0, timeValue)) ?? null;
+    const getY1 = (timeValue: TimeValue): number =>
+      y1Scale(prop(metricY1, timeValue)) ?? null;
+
+    return (
+      <BasicThreshold
+        getX={getX}
+        getY0={getY0}
+        getY1={getY1}
+        graphHeight={graphHeight}
+        lineColorY0={lineColorY0}
+        lineColorY1={lineColorY1}
+        timeSeries={timeSeries}
+      />
+    );
+  }
+
+  const getY0 = (timeValue: TimeValue): number =>
+    y0Scale(prop(metricY0, timeValue) + variation) ?? null;
+
+  const getY1 = (timeValue: TimeValue): number =>
+    y1Scale(prop(metricY1, timeValue) - variation) ?? null;
+
+  const props = {
+    curve: curveBasis,
+    data: timeSeries,
+    stroke: theme.palette.secondary.main,
+    strokeDasharray: 5,
+    strokeOpacity: 0.8,
+    x: getX
+  };
+
   return (
-    <Threshold
-      aboveAreaProps={{
-        fill: lineColorY1,
-        fillOpacity: 0.1
-      }}
-      belowAreaProps={{
-        fill: lineColorY0,
-        fillOpacity: 0.1
-      }}
-      clipAboveTo={0}
-      clipBelowTo={graphHeight}
-      curve={curveBasis}
-      data={timeSeries}
-      id="threshold"
-      x={(timeValue: TimeValue): number => xScale(getTime(timeValue)) as number}
-      y0={(timeValue): number => y0Scale(prop(metricY0, timeValue)) ?? null}
-      y1={(timeValue): number => y1Scale(prop(metricY1, timeValue)) ?? null}
-    />
+    <>
+      <BasicThreshold
+        getX={getX}
+        getY0={getY0}
+        getY1={getY1}
+        graphHeight={graphHeight}
+        lineColorY0={lineColorY0}
+        lineColorY1={lineColorY1}
+        timeSeries={timeSeries}
+      />
+
+      <LinePath {...props} y={getY0} />
+      <LinePath {...props} y={getY1} />
+    </>
   );
 };
 

package/src/Graph/BasicComponents/Lines/Threshold/models.ts

@@ -5,3 +5,17 @@ export interface Data {
   metric: string;
   yScale: ScaleLinear<number, number>;
 }
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Props {
+  pointLower: Point;
+  pointOrigin: Point;
+  pointUpper: Point;
+}
+export interface Online extends Props {
+  maxDistance?: number;
+}

package/src/Graph/BasicComponents/Lines/{useDataThreshold.ts → Threshold/useDataThreshold.ts}

@@ -1,26 +1,32 @@
 import { equals, isNil } from 'ramda';
 import { ScaleLinear } from 'd3-scale';
 
-import { lowerLineName, upperLineName } from '../../helpers/index';
-import { getUnits, getYScale } from '../../timeSeries/index';
-import { Line } from '../../timeSeries/models';
+import {
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from '../../../helpers/index';
+import { getUnits, getYScale } from '../../../timeSeries/index';
+import { Line } from '../../../timeSeries/models';
 
-import { Data } from './Threshold/models';
+import { Data } from './models';
 
 interface DataThreshold {
   dataY0?: Data;
   dataY1?: Data;
+  dataYOrigin?: Data;
   displayThreshold: boolean;
 }
 
 interface Props {
+  display: boolean;
   leftScale: ScaleLinear<number, number>;
   lines: Array<Line>;
   rightScale: ScaleLinear<number, number>;
 }
 
 const useDataThreshold = (areaThreshold: Props): DataThreshold => {
-  const { lines, leftScale, rightScale } = areaThreshold;
+  const { lines, leftScale, rightScale, display } = areaThreshold;
 
   const dataMetricUpper = lines.find((line) =>
     equals(line.name, upperLineName)
@@ -30,10 +36,21 @@ const useDataThreshold = (areaThreshold: Props): DataThreshold => {
     equals(line.name, lowerLineName)
   );
 
-  const displayThreshold = !isNil(dataMetricLower) && !isNil(dataMetricUpper);
+  const dataMetricOrigin = findLineOfOriginMetricThreshold(lines);
+
+  const displayThreshold =
+    !isNil(dataMetricLower) &&
+    !isNil(dataMetricUpper) &&
+    display &&
+    !isNil(dataMetricOrigin[0]);
 
   if (!displayThreshold) {
-    return { dataY0: undefined, dataY1: undefined, displayThreshold };
+    return {
+      dataY0: undefined,
+      dataY1: undefined,
+      dataYOrigin: undefined,
+      displayThreshold
+    };
   }
 
   const [, secondUnit, thirdUnit] = getUnits(lines);
@@ -52,6 +69,13 @@ const useDataThreshold = (areaThreshold: Props): DataThreshold => {
     lineColor: lineColorY0
   } = dataMetricLower;
 
+  const {
+    metric: metricOrigin,
+    unit: unitYOrigin,
+    invert: invertYOrigin,
+    lineColor: lineColorYOrigin
+  } = dataMetricOrigin[0];
+
   const y1Scale = getYScale({
     hasMoreThanTwoUnits: !isNil(thirdUnit),
     invert: invertY1,
@@ -70,9 +94,19 @@ const useDataThreshold = (areaThreshold: Props): DataThreshold => {
     unit: unitY0
   });
 
+  const yScale = getYScale({
+    hasMoreThanTwoUnits: !isNil(thirdUnit),
+    invert: invertYOrigin,
+    leftScale,
+    rightScale,
+    secondUnit,
+    unit: unitYOrigin
+  });
+
   return {
     dataY0: { lineColor: lineColorY0, metric: metricY0, yScale: y0Scale },
     dataY1: { lineColor: lineColorY1, metric: metricY1, yScale: y1Scale },
+    dataYOrigin: { lineColor: lineColorYOrigin, metric: metricOrigin, yScale },
     displayThreshold
   };
 };

package/src/Graph/BasicComponents/Lines/Threshold/usePointsOnline.ts

@@ -0,0 +1,50 @@
+import { isNil } from 'ramda';
+
+import { Online, Point, Props } from './models';
+
+const usePointsOnline = ({
+  pointOrigin,
+  pointUpper,
+  pointLower
+}: Props): Point | null => {
+  const isPointDefined = ({ x, y }: Point): boolean => !isNil(x) && !isNil(y);
+
+  const arePointsDefined =
+    isPointDefined(pointOrigin) &&
+    isPointDefined(pointUpper) &&
+    isPointDefined(pointLower);
+
+  const isOnLine = ({
+    pointOrigin: origin,
+    pointLower: firstPoint,
+    pointUpper: secondPoint,
+    maxDistance = 0
+  }: Online): boolean => {
+    const { x, y } = origin;
+    const { x: x1, y: y1 } = firstPoint;
+    const { x: x2, y: y2 } = secondPoint;
+
+    const dxL = x2 - x1;
+    const dyL = y2 - y1;
+    const dxP = x - x1;
+    const dyP = y - y1;
+
+    const squareLen = dxL * dxL + dyL * dyL;
+    const dotProd = dxP * dxL + dyP * dyL;
+    const crossProd = dyP * dxL - dxP * dyL;
+
+    const distance = Math.abs(crossProd) / Math.sqrt(squareLen);
+
+    return distance <= maxDistance && dotProd >= 0 && dotProd <= squareLen;
+  };
+
+  const arePointsOnline = isOnLine({
+    pointLower,
+    pointOrigin,
+    pointUpper
+  });
+
+  return !arePointsOnline && arePointsDefined ? pointOrigin : null;
+};
+
+export default usePointsOnline;

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

@@ -10,13 +10,14 @@ import { getUnits, getYScale } from '../../timeSeries';
 import { Line } from '../../timeSeries/models';
 
 import RegularLine from './RegularLines';
+import useDataRegularLines from './RegularLines/useDataRegularLines';
 import StackedLines from './StackedLines';
+import useDataStackedLines from './StackedLines/useDataStackLines';
 import ThresholdLines from './Threshold';
-import { Shape } from './models';
-import useDataRegularLines from './useDataRegularLines';
-import useDataStackedLines from './useDataStackLines';
-import useDataThreshold from './useDataThreshold';
+import AwesomeCircles from './Threshold/Circle';
 import { Data } from './Threshold/models';
+import useDataThreshold from './Threshold/useDataThreshold';
+import { Shape } from './models';
 
 interface AnchorPoint {
   renderRegularLinesAnchorPoint: (args: RegularLinesAnchorPoint) => ReactNode;
@@ -33,7 +34,8 @@ const Lines = ({ height, shape, anchorPoint }: Props): JSX.Element => {
   const { areaRegularLines, areaStackedLines, areaThreshold } = shape;
   const { renderRegularLinesAnchorPoint, renderStackedAnchorPoint } =
     anchorPoint;
-  const { lines, leftScale, rightScale, timeSeries, xScale } = areaThreshold;
+  const { lines, leftScale, rightScale, timeSeries, xScale, display } =
+    areaThreshold;
 
   const {
     displayAreaInvertedStackedLines,
@@ -55,7 +57,8 @@ const Lines = ({ height, shape, anchorPoint }: Props): JSX.Element => {
     lines: regularLines
   } = useDataRegularLines(areaRegularLines);
 
-  const { dataY0, dataY1, displayThreshold } = useDataThreshold({
+  const { dataY0, dataY1, dataYOrigin, displayThreshold } = useDataThreshold({
+    display,
     leftScale,
     lines,
     rightScale
@@ -83,13 +86,35 @@ const Lines = ({ height, shape, anchorPoint }: Props): JSX.Element => {
       )}
 
       {displayThreshold && (
-        <ThresholdLines
-          dataY0={dataY0 as Data}
-          dataY1={dataY1 as Data}
-          graphHeight={height}
-          timeSeries={timeSeries}
-          xScale={xScale}
-        />
+        <>
+          <ThresholdLines
+            dataY0={dataY0 as Data}
+            dataY1={dataY1 as Data}
+            graphHeight={height}
+            timeSeries={timeSeries}
+            xScale={xScale}
+          />
+          <ThresholdLines
+            dataY0={dataY0 as Data}
+            dataY1={dataY1 as Data}
+            graphHeight={height}
+            timeSeries={timeSeries}
+            variation={areaThreshold?.variation}
+            xScale={xScale}
+          />
+          {areaThreshold?.variation &&
+            timeSeries.map((timeValue) => (
+              <AwesomeCircles
+                dataY0={dataY0 as Data}
+                dataY1={dataY1 as Data}
+                dataYOrigin={dataYOrigin as Data}
+                key={timeValue.timeTick}
+                timeValue={timeValue}
+                variation={areaThreshold?.variation as number}
+                xScale={xScale}
+              />
+            ))}
+        </>
       )}
 
       {displayAreaRegularLines

package/src/Graph/BasicComponents/Lines/models.ts

@@ -26,8 +26,12 @@ export interface AreaRegularLines extends ShapeGraphData {
   timeSeries: Array<TimeValue>;
 }
 
+export interface AreaThreshold extends AreaRegularLines {
+  variation?: number;
+}
+
 export interface Shape {
   areaRegularLines: AreaRegularLines;
   areaStackedLines: AreaStackedLines;
-  areaThreshold: AreaRegularLines;
+  areaThreshold: AreaThreshold;
 }

package/src/Graph/BasicComponents/useFilterLines.ts

@@ -4,7 +4,11 @@ import { useAtom } from 'jotai';
 import { equals, propEq, reject } from 'ramda';
 
 import { linesGraphAtom } from '../graphAtoms';
-import { lowerLineName, upperLineName } from '../helpers';
+import {
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from '../helpers';
 import { Line } from '../timeSeries/models';
 
 interface UseFilterLines {
@@ -25,20 +29,7 @@ const useFilterLines = ({
 
   const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
-    const metrics = lines.map((line) => {
-      const { metric } = line;
-
-      return metric.includes('_upper_thresholds')
-        ? metric.replace('_upper_thresholds', '')
-        : null;
-    });
-
-    const originMetric = metrics.find((element) => element);
-
-    const lineOriginMetric = reject(
-      (line: Line) => !equals(line.name, originMetric),
-      lines
-    );
+    const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 
     const findLinesUpperLower = lines.map((line) =>
       equals(line.name, lowerLineName) || equals(line.name, upperLineName)

package/src/Graph/Graph.tsx

@@ -113,7 +113,6 @@ const Graph = ({
   });
 
   const commonLinesProps = {
-    display: true,
     leftScale,
     rightScale,
     xScale
@@ -122,21 +121,23 @@ const Graph = ({
   const areaThreshold = {
     lines: displayedLines,
     timeSeries,
-    ...commonLinesProps
+    ...commonLinesProps,
+    ...shapeLines?.areaThresholdLines,
+    display: shapeLines?.areaThresholdLines?.display ?? true
   };
 
   const areaRegularLines = {
+    display: shapeLines?.areaRegularLines?.display ?? true,
     lines: regularLines,
     timeSeries,
-    ...commonLinesProps,
-    ...shapeLines?.areaRegularLines
+    ...commonLinesProps
   };
 
   const areaStackedLines = {
+    display: shapeLines?.areaStackedLines?.display ?? true,
     invertedStackedLinesData,
     stackedLinesData,
-    ...commonLinesProps,
-    ...shapeLines?.areaStackedLines
+    ...commonLinesProps
   };
 
   const displayRegularLinesAnchorPoint =

package/src/Graph/helpers/index.ts

@@ -1,10 +1,21 @@
-import { gte, isNil, prop, propEq, reject, sortBy, gt, isEmpty } from 'ramda';
+import {
+  gte,
+  isNil,
+  prop,
+  propEq,
+  reject,
+  sortBy,
+  gt,
+  isEmpty,
+  equals
+} from 'ramda';
 import dayjs from 'dayjs';
 
 import { getLineData, getTimeSeries } from '../timeSeries';
 import { LinesData } from '../BasicComponents/Lines/models';
 import { GraphData, GraphInterval } from '../models';
 import { dateFormat, timeFormat } from '../common';
+import { Line } from '../timeSeries/models';
 
 export const adjustGraphData = (graphData: GraphData): LinesData => {
   const lines = getLineData(graphData);
@@ -49,3 +60,19 @@ export const displayArea = (data: unknown): boolean =>
 
 export const lowerLineName = 'Lower Threshold';
 export const upperLineName = 'Upper Threshold';
+
+export const findLineOfOriginMetricThreshold = (
+  lines: Array<Line>
+): Array<Line> => {
+  const metrics = lines.map((line) => {
+    const { metric } = line;
+
+    return metric.includes('_upper_thresholds')
+      ? metric.replace('_upper_thresholds', '')
+      : null;
+  });
+
+  const originMetric = metrics.find((element) => element);
+
+  return reject((line: Line) => !equals(line.name, originMetric), lines);
+};

package/src/Graph/index.stories.tsx

@@ -165,7 +165,7 @@ const GraphAndTimePeriod = (args): JSX.Element => {
         annotationEvent={annotationEventData}
         end={end}
         loading={false}
-        shapeLines={{ areaThresholdLines: { display: true } }}
+        shapeLines={{ areaThresholdLines: { display: true, variation: 1.5 } }}
         start={start}
         timeShiftZones={{ enable: true, getInterval }}
         tooltip={{

package/src/Graph/models.ts

@@ -98,8 +98,12 @@ export interface Area {
   display: boolean;
 }
 
+export interface ThresholdArea extends Area {
+  variation?: number;
+}
+
 export interface GlobalAreaLines {
   areaRegularLines: Area;
   areaStackedLines: Area;
-  areaThresholdLines: Area;
+  areaThresholdLines: ThresholdArea;
 }

package/src/Graph/timeSeries/models.ts

@@ -22,10 +22,11 @@ export interface Metric {
   unit: string;
 }
 
-export interface TimeValue {
-  [field: string]: string | number;
-  timeTick: string;
-}
+type TimeSeries = { timeTick: string };
+
+export type TimeValue = TimeSeries & {
+  [field: string]: number;
+};
 
 export interface Line {
   areaColor: string;