@centreon/ui 24.4.21 → 24.4.22

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

@@ -0,0 +1,63 @@
+import { curveBasis } from '@visx/curve';
+import { LinePath } from '@visx/shape';
+
+import { useTheme } from '@mui/material/styles';
+
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../models';
+
+import BasicThreshold from './BasicThreshold';
+
+interface Props {
+  curve: CurveType;
+  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,
+  curve
+}: 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
+        curve={curve}
+        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/LineChart/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/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -0,0 +1,143 @@
+import { equals, isNil } from 'ramda';
+
+import { displayArea } from '../../../helpers/index';
+import {
+  PatternThreshold,
+  ThresholdType,
+  VariationThreshold
+} from '../../../models';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { CurveType } from '../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 {
+  curve: CurveType;
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+}
+
+const WrapperThresholdLines = ({
+  areaThresholdLines,
+  graphHeight,
+  leftScale,
+  lines,
+  rightScale,
+  timeSeries,
+  xScale,
+  curve
+}: 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 = {
+    curve,
+    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/LineChart/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 '../../../../common/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/LineChart/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;

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -0,0 +1,171 @@
+import { equals, isNil, prop } from 'ramda';
+
+import { ThresholdType, VariationThreshold } from '../../../models';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { getTime, getUnits, getYScale } from '../../../../common/timeSeries';
+import { displayArea } from '../../../helpers/index';
+
+import { envelopeVariationFormula } from './helpers';
+import {
+  LinesThreshold,
+  ScaleVariationThreshold,
+  WrapperThresholdLinesModel,
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './models';
+
+interface Result extends Partial<ScaleVariationThreshold> {
+  getX: (timeValue: TimeValue) => number;
+  getY0: (timeValue: TimeValue) => number;
+  getY1: (timeValue: TimeValue) => number;
+  lineColorY0: string;
+  lineColorY1: string;
+}
+
+const useScaleThreshold = ({
+  lines,
+  areaThresholdLines,
+  leftScale,
+  rightScale,
+  xScale
+}: WrapperThresholdLinesModel): Result | null => {
+  const getLinesThreshold = (): LinesThreshold | null => {
+    const lineUpper = lines.find((line) => equals(line.name, upperLineName));
+
+    const lineLower = lines.find((line) => equals(line.name, lowerLineName));
+
+    const lineOrigin = findLineOfOriginMetricThreshold(lines)[0];
+    if (!lineLower || !lineOrigin || !lineUpper) {
+      return null;
+    }
+
+    return { lineLower, lineOrigin, lineUpper };
+  };
+
+  const linesThreshold = getLinesThreshold();
+  if (!linesThreshold) {
+    return null;
+  }
+
+  const { lineUpper, lineLower, lineOrigin } = linesThreshold;
+
+  const [, secondUnit, thirdUnit] = getUnits(lines);
+
+  const {
+    metric_id: metricY1,
+    unit: unitY1,
+    invert: invertY1,
+    lineColor: lineColorY1
+  } = lineUpper;
+
+  const {
+    metric_id: metricY0,
+    unit: unitY0,
+    invert: invertY0,
+    lineColor: lineColorY0
+  } = lineLower;
+
+  const {
+    metric_id: metricOrigin,
+    unit: unitYOrigin,
+    invert: invertYOrigin
+  } = lineOrigin;
+
+  const y1Scale = getYScale({
+    hasMoreThanTwoUnits: !isNil(thirdUnit),
+    invert: invertY1,
+    leftScale,
+    rightScale,
+    secondUnit,
+    unit: unitY1
+  });
+
+  const y0Scale = getYScale({
+    hasMoreThanTwoUnits: !isNil(thirdUnit),
+    invert: invertY0,
+    leftScale,
+    rightScale,
+    secondUnit,
+    unit: unitY0
+  });
+
+  const yScale = getYScale({
+    hasMoreThanTwoUnits: !isNil(thirdUnit),
+    invert: invertYOrigin,
+    leftScale,
+    rightScale,
+    secondUnit,
+    unit: unitYOrigin
+  });
+
+  const getX = (timeValue: TimeValue): number => {
+    return xScale(getTime(timeValue)) ?? null;
+  };
+
+  const getY0 = (timeValue: TimeValue): number => {
+    return y0Scale(prop(metricY0, timeValue)) ?? null;
+  };
+  const getY1 = (timeValue: TimeValue): number => {
+    return y1Scale(prop(metricY1, timeValue)) ?? null;
+  };
+
+  const commonResult = { getX, getY0, getY1, lineColorY0, lineColorY1 };
+
+  const isVariationType = !!areaThresholdLines?.find(
+    (item) => item && equals(item.type, ThresholdType.variation)
+  );
+  if (isVariationType) {
+    const data = areaThresholdLines?.find((item) =>
+      equals(item.type, ThresholdType.variation) ? item : null
+    ) as VariationThreshold;
+
+    const variationFactorsExist =
+      displayArea(data?.factors) &&
+      !isNil(data?.factors?.simulatedFactorMultiplication) &&
+      !isNil(data?.factors?.currentFactorMultiplication);
+
+    if (!variationFactorsExist) {
+      return commonResult;
+    }
+
+    const getY0Variation = (timeValue: TimeValue): number => {
+      const upperRealValue = prop(metricY1, timeValue);
+      const lowerRealValue = prop(metricY0, timeValue);
+
+      const variation = envelopeVariationFormula({
+        factorsData: data.factors,
+        lowerRealValue,
+        upperRealValue
+      });
+
+      return y0Scale(prop(metricY0, timeValue) + variation) ?? null;
+    };
+
+    const getY1Variation = (timeValue: TimeValue): number => {
+      const upperRealValue = prop(metricY1, timeValue);
+      const lowerRealValue = prop(metricY0, timeValue);
+
+      const variation = envelopeVariationFormula({
+        factorsData: data.factors,
+        lowerRealValue,
+        upperRealValue
+      });
+
+      return y1Scale(prop(metricY1, timeValue) - variation) ?? null;
+    };
+    const getYOrigin = (timeValue: TimeValue): number =>
+      yScale(prop(metricOrigin, timeValue));
+
+    return {
+      getY0Variation,
+      getY1Variation,
+      getYOrigin,
+      ...commonResult
+    };
+  }
+
+  return commonResult;
+};
+
+export default useScaleThreshold;