@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

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

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

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

@@ -0,0 +1,43 @@
+import { Shape } from '@visx/visx';
+import { isEmpty, isNil } from 'ramda';
+
+import { Circle } from './models';
+import useCoordinateCircle from './useCoordinateCircle';
+
+const Circle = ({
+  getY0Variation,
+  getY1Variation,
+  getYOrigin,
+  timeSeries,
+  getX,
+  getCountDisplayedCircles
+}: Circle): JSX.Element | null => {
+  const coordinates = useCoordinateCircle({
+    getCountDisplayedCircles,
+    getX,
+    getY0Variation,
+    getY1Variation,
+    getYOrigin,
+    timeSeries
+  });
+
+  if (isEmpty(coordinates) || isNil(coordinates)) {
+    return null;
+  }
+
+  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,73 @@
+import { PatternLines } from '@visx/pattern';
+import { ScaleLinear } from 'd3-scale';
+
+import { useTheme } from '@mui/material/styles';
+
+import { adjustGraphData } from '../../../helpers/index';
+import { GraphData, PatternOrientation } from '../../../models';
+
+import BasicThreshold from './BasicThreshold';
+import useScaleThreshold from './useScaleThreshold';
+
+interface Props {
+  data: GraphData;
+  graphHeight: number;
+  id: string;
+  leftScale: ScaleLinear<number, number>;
+  orientation?: Array<PatternOrientation>;
+  rightScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const ThresholdWithPatternLines = ({
+  graphHeight,
+  data,
+  orientation = ['diagonal'],
+  leftScale,
+  rightScale,
+  xScale,
+  id
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+
+  const { lines, timeSeries } = adjustGraphData(data);
+
+  const result = useScaleThreshold({
+    leftScale,
+    lines,
+    rightScale,
+    xScale
+  });
+  if (!result) {
+    return null;
+  }
+
+  const { getX, getY0, getY1 } = result;
+
+  return (
+    <>
+      <BasicThreshold
+        fillAboveArea={"url('#lines')"}
+        fillBelowArea={"url('#lines')"}
+        fillOpacity={0.8}
+        getX={getX}
+        getY0={getY0}
+        getY1={getY1}
+        graphHeight={graphHeight}
+        id={id}
+        timeSeries={timeSeries}
+      />
+      <PatternLines
+        data-testid="patternLinesExclusionPeriods"
+        height={5}
+        id="lines"
+        orientation={orientation}
+        stroke={theme.palette.text.primary}
+        strokeWidth={1}
+        width={5}
+      />
+    </>
+  );
+};
+
+export default ThresholdWithPatternLines;

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

@@ -0,0 +1,59 @@
+import { curveBasis } from '@visx/curve';
+import { LinePath } from '@visx/shape';
+
+import { useTheme } from '@mui/material/styles';
+
+import { TimeValue } from '../../../timeSeries/models';
+
+import BasicThreshold from './BasicThreshold';
+
+interface Props {
+  getX: (timeValue: TimeValue) => number;
+  getY0Variation: (timeValue: TimeValue) => number;
+  getY1Variation: (timeValue: TimeValue) => number;
+  graphHeight: number;
+  lineColorY0: string;
+  lineColorY1: string;
+  timeSeries: Array<TimeValue>;
+}
+
+const ThresholdWithVariation = ({
+  timeSeries,
+  getX,
+  getY0Variation,
+  getY1Variation,
+  graphHeight,
+  lineColorY1,
+  lineColorY0
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const props = {
+    curve: curveBasis,
+    data: timeSeries,
+    stroke: theme.palette.secondary.main,
+    strokeDasharray: 5,
+    strokeOpacity: 0.9,
+    x: getX
+  };
+
+  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

@@ -0,0 +1,69 @@
+import { isNil } from 'ramda';
+
+import {
+  ArePointsOnline,
+  EnvelopeVariationFormula,
+  Online,
+  Point
+} from '../models';
+
+export const checkArePointsOnline = ({
+  pointOrigin,
+  pointUpper,
+  pointLower
+}: ArePointsOnline): 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 const envelopeVariationFormula = ({
+  upperRealValue,
+  lowerRealValue,
+  factorsData
+}: EnvelopeVariationFormula): number => {
+  const { currentFactorMultiplication, simulatedFactorMultiplication } =
+    factorsData;
+
+  const variation = upperRealValue - lowerRealValue;
+
+  const factor =
+    1 - simulatedFactorMultiplication / currentFactorMultiplication;
+
+  return (variation / 2) * factor;
+};

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

@@ -0,0 +1,138 @@
+import { equals, isNil } from 'ramda';
+
+import { displayArea } from '../../../helpers/index';
+import {
+  PatternThreshold,
+  ThresholdType,
+  VariationThreshold
+} from '../../../models';
+import { TimeValue } from '../../../timeSeries/models';
+
+import BasicThreshold from './BasicThreshold';
+import Circle from './Circle';
+import ThresholdWithPatternLines from './ThresholdWithPatternLines';
+import ThresholdWithVariation from './ThresholdWithVariation';
+import { WrapperThresholdLinesModel } from './models';
+import useScaleThreshold from './useScaleThreshold';
+
+interface Props extends WrapperThresholdLinesModel {
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+}
+
+const WrapperThresholdLines = ({
+  areaThresholdLines,
+  graphHeight,
+  leftScale,
+  lines,
+  rightScale,
+  timeSeries,
+  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 filteredThresholdLines = thresholdLines?.filter((item) => !isNil(item));
+
+  if (!filteredThresholdLines) {
+    return null;
+  }
+
+  return (
+    <g>
+      {filteredThresholdLines.map((element) =>
+        element?.map(({ Component, props, key }) => (
+          <Component {...props} id={key} key={key} />
+        ))
+      )}
+    </g>
+  );
+};
+
+export default WrapperThresholdLines;

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

@@ -0,0 +1,105 @@
+import { ScaleLinear } from 'd3-scale';
+import { equals, reject } from 'ramda';
+
+import { GlobalAreaLines, ThresholdType } from '../../../models';
+import { Line, TimeValue } from '../../../timeSeries/models';
+
+export interface Data {
+  lineColor: string;
+  metric: string;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface ArePointsOnline {
+  pointLower: Point;
+  pointOrigin: Point;
+  pointUpper: Point;
+}
+export interface Online extends ArePointsOnline {
+  maxDistance?: number;
+}
+
+export interface FactorsVariation {
+  currentFactorMultiplication: number;
+  simulatedFactorMultiplication: number;
+}
+
+export interface Result {
+  getX: (timeValue: TimeValue) => number;
+  getY0: (timeValue: TimeValue) => number;
+  getY1: (timeValue: TimeValue) => number;
+  lineColorY0: string;
+  lineColorY1: string;
+}
+
+export interface EnvelopeVariationFormula {
+  factorsData: FactorsVariation;
+  lowerRealValue: number;
+  upperRealValue: number;
+}
+
+export interface ThresholdLinesModel {
+  dataY0: Data;
+  dataY1: Data;
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+export interface LinesThreshold {
+  lineLower: Line;
+  lineOrigin: Line;
+  lineUpper: Line;
+}
+
+export interface WrapperThresholdLinesModel {
+  areaThresholdLines?: GlobalAreaLines['areaThresholdLines'];
+  leftScale: ScaleLinear<number, number>;
+  lines: Array<Line>;
+  rightScale: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number>;
+}
+
+export interface ScaleVariationThreshold {
+  getY0Variation: (timeValue: TimeValue) => number;
+  getY1Variation: (timeValue: TimeValue) => number;
+  getYOrigin: (timeValue: TimeValue) => number;
+}
+
+export interface Circle extends ScaleVariationThreshold {
+  getCountDisplayedCircles?: (value: number) => void;
+  getX: (timeValue: TimeValue) => number;
+  timeSeries: Array<TimeValue>;
+}
+
+export const lowerLineName = 'Lower Threshold';
+export const upperLineName = 'Upper Threshold';
+
+// upper,lower and origin
+export const requiredNumberLinesThreshold = 3;
+
+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);
+};
+
+export const canDisplayThreshold = (
+  areaThresholdLines: GlobalAreaLines['areaThresholdLines']
+): boolean =>
+  !!areaThresholdLines?.find((item) => item && item.type in ThresholdType);

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

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { isNil } from 'ramda';
+
+import { checkArePointsOnline } from './helpers';
+import { Circle, Point } from './models';
+
+const useCoordinateCircle = ({
+  timeSeries,
+  getX,
+  getY0Variation,
+  getY1Variation,
+  getYOrigin,
+  getCountDisplayedCircles
+}: Circle): Array<Point> => {
+  const getCoordinate = (): Array<Point | null> => {
+    return timeSeries.map((timeValue) => {
+      const x = getX(timeValue);
+      const y = getYOrigin(timeValue);
+
+      const y0 = getY0Variation(timeValue);
+      const y1 = getY1Variation(timeValue);
+
+      return checkArePointsOnline({
+        pointLower: { x, y: y0 },
+        pointOrigin: { x, y },
+        pointUpper: { x, y: y1 }
+      });
+    });
+  };
+
+  const coordinates = getCoordinate()?.filter(
+    (element) => !isNil(element)
+  ) as Array<Point>;
+
+  useEffect(() => {
+    if (!coordinates) {
+      return;
+    }
+    getCountDisplayedCircles?.(coordinates.length);
+  }, [coordinates.length]);
+
+  return coordinates;
+};
+
+export default useCoordinateCircle;