@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,138 @@
+import { equals, isNil } from 'ramda';
+
+import type { TimeValue } from '../../../../common/timeSeries/models';
+import { displayArea } from '../../../helpers/index';
+import {
+  type PatternThreshold,
+  ThresholdType,
+  type VariationThreshold
+} from '../../../models';
+
+import BasicThreshold from './BasicThreshold';
+import Circle from './Circle';
+import ThresholdWithPatternLines from './ThresholdWithPatternLines';
+import ThresholdWithVariation from './ThresholdWithVariation';
+import type { WrapperThresholdLinesModel } from './models';
+import useScaleThreshold from './useScaleThreshold';
+
+interface Props extends WrapperThresholdLinesModel {
+  curve: 'linear' | 'natural' | 'step';
+  graphHeight: number;
+  timeSeries: Array<TimeValue>;
+}
+
+const WrapperThresholdLines = ({
+  areaThresholdLines,
+  graphHeight,
+  lines,
+  timeSeries,
+  xScale,
+  curve,
+  yScalesPerUnit
+}: Props): JSX.Element | null => {
+  const data = useScaleThreshold({
+    areaThresholdLines,
+    lines,
+    xScale,
+    yScalesPerUnit
+  });
+
+  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) => {
+    const { type, id } = item;
+
+    if (equals(type, ThresholdType.basic)) {
+      return [
+        {
+          Component: BasicThreshold,
+          key: id,
+          props: { ...commonProps, getY0, getY1, id }
+        }
+      ];
+    }
+    if (equals(type, ThresholdType.variation)) {
+      const dataVariation = item as VariationThreshold;
+      if (!rest?.getY0Variation || !rest.getY1Variation || !rest.getYOrigin) {
+        return null;
+      }
+
+      return [
+        {
+          Component: ThresholdWithVariation,
+          key: dataVariation.id,
+          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, index) => ({
+        Component: ThresholdWithPatternLines,
+        key: index,
+        props: {
+          data: element,
+          graphHeight,
+          key: index,
+          orientation: dataPattern?.orientation,
+          xScale,
+          yScalesPerUnit
+        }
+      }));
+    }
+
+    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={props?.id ?? key} key={key} />
+        ))
+      )}
+    </g>
+  );
+};
+
+export default WrapperThresholdLines;

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

@@ -0,0 +1,104 @@
+import type { ScaleLinear } from 'd3-scale';
+import { equals, reject } from 'ramda';
+
+import type { Line, TimeValue } from '../../../../common/timeSeries/models';
+import { type GlobalAreaLines, ThresholdType } from '../../../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'];
+  lines: Array<Line>;
+  xScale: ScaleLinear<number, number>;
+  yScalesPerUnit: Record<string, 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.metric, originMetric), lines);
+};
+
+export const canDisplayThreshold = (
+  areaThresholdLines: GlobalAreaLines['areaThresholdLines']
+): boolean =>
+  !!areaThresholdLines?.find((item) => item && item.type in ThresholdType);

package/src/Graph/Chart/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/Chart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -0,0 +1,159 @@
+import { equals, isNil, prop } from 'ramda';
+
+import { getTime, getYScale } from '../../../../common/timeSeries';
+import { TimeValue } from '../../../../common/timeSeries/models';
+import { displayArea } from '../../../helpers/index';
+import { ThresholdType, VariationThreshold } from '../../../models';
+
+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,
+  yScalesPerUnit,
+  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 {
+    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({
+    invert: invertY1,
+    unit: unitY1,
+    yScalesPerUnit
+  });
+
+  const y0Scale = getYScale({
+    invert: invertY0,
+    unit: unitY0,
+    yScalesPerUnit
+  });
+
+  const yScale = getYScale({
+    invert: invertYOrigin,
+    unit: unitYOrigin,
+    yScalesPerUnit
+  });
+
+  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;

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

@@ -0,0 +1,262 @@
+import type { MutableRefObject } from 'react';
+
+import type { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import {
+  getDates,
+  getTimeSeriesForLines,
+  getYScale
+} from '../../../common/timeSeries';
+import type { Line, TimeValue } from '../../../common/timeSeries/models';
+import { getPointRadius } from '../../../common/utils';
+import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
+import RegularAnchorPoint, {
+  getYAnchorPoint
+} from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
+import { displayArea } from '../../helpers/index';
+import type { DisplayAnchor, GlobalAreaLines } from '../../models';
+
+import Point from './Point';
+import RegularLine from './RegularLines';
+import useRegularLines from './RegularLines/useRegularLines';
+import StackedLines from './StackedLines';
+import useStackedLines from './StackedLines/useStackedLines';
+import WrapperThresholdLines from './Threshold';
+import {
+  canDisplayThreshold,
+  requiredNumberLinesThreshold
+} from './Threshold/models';
+
+interface Props extends GlobalAreaLines {
+  areaTransparency?: number;
+  curve: 'linear' | 'step' | 'natural';
+  dashLength?: number;
+  dashOffset?: number;
+  displayAnchor?: DisplayAnchor;
+  displayedLines: Array<Line>;
+  dotOffset?: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  height: number;
+  lineWidth?: number;
+  scale?: 'linear' | 'logarithmic';
+  scaleLogarithmicBase?: number;
+  showArea?: boolean;
+  showPoints?: boolean;
+  timeSeries: Array<TimeValue>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+  yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
+}
+
+const Lines = ({
+  areaTransparency,
+  height,
+  graphSvgRef,
+  width,
+  displayAnchor,
+  curve,
+  yScalesPerUnit,
+  xScale,
+  timeSeries,
+  displayedLines,
+  areaThresholdLines,
+  areaStackedLines,
+  areaRegularLines,
+  showArea,
+  showPoints,
+  lineWidth,
+  dotOffset,
+  dashLength,
+  dashOffset,
+  scale,
+  scaleLogarithmicBase
+}: Props): JSX.Element => {
+  const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
+    lines: displayedLines,
+    timeSeries
+  });
+
+  const { regularLines } = useRegularLines({ lines: displayedLines });
+
+  const displayThresholdArea =
+    displayedLines?.length >= requiredNumberLinesThreshold &&
+    canDisplayThreshold(areaThresholdLines);
+
+  const displayAreaRegularLines =
+    (areaRegularLines?.display ?? true) && displayArea(regularLines);
+
+  const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
+  const commonStackedLinesProps = {
+    areaTransparency,
+    curve,
+    dashLength,
+    dashOffset,
+    displayAnchor: displayGuidingLines,
+    dotOffset,
+    graphHeight: height,
+    graphSvgRef,
+    graphWidth: width,
+    lineWidth,
+    showArea,
+    showPoints,
+    xScale
+  };
+
+  return (
+    <g>
+      {displayGuidingLines && (
+        <GuidingLines
+          graphHeight={height}
+          graphWidth={width}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
+      {(areaStackedLines?.display ?? true) && (
+        <>
+          {Object.entries(stackedLinesData).map(
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                key={`stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={yScalesPerUnit[unit]}
+                {...commonStackedLinesProps}
+              />
+            )
+          )}
+          {Object.entries(invertedStackedLinesData).map(
+            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
+              <StackedLines
+                key={`invert-stacked-${unit}`}
+                lines={lines}
+                timeSeries={stackedTimeSeries}
+                yScale={getYScale({
+                  invert: '1',
+                  scale,
+                  scaleLogarithmicBase,
+                  unit,
+                  yScalesPerUnit
+                })}
+                {...commonStackedLinesProps}
+              />
+            )
+          )}
+        </>
+      )}
+
+      {displayThresholdArea && (
+        <WrapperThresholdLines
+          areaThresholdLines={areaThresholdLines}
+          graphHeight={height}
+          lines={displayedLines}
+          timeSeries={timeSeries}
+          xScale={xScale}
+          yScalesPerUnit={yScalesPerUnit}
+        />
+      )}
+
+      {displayAreaRegularLines
+        ? regularLines.map(
+            ({
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
+              unit,
+              highlight,
+              invert,
+              metric_id,
+              ...rest
+            }) => {
+              const yScale = getYScale({
+                invert,
+                scale,
+                scaleLogarithmicBase,
+                unit,
+                yScalesPerUnit
+              });
+              const relatedTimeSeries = getTimeSeriesForLines({
+                invert,
+                lines: [
+                  {
+                    areaColor,
+                    filled,
+                    highlight,
+                    invert,
+                    lineColor,
+                    metric_id,
+                    transparency,
+                    unit,
+                    ...rest
+                  }
+                ],
+                timeSeries
+              });
+
+              return (
+                <g key={metric_id}>
+                  {displayGuidingLines && (
+                    <RegularAnchorPoint
+                      areaColor={areaColor || lineColor}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      timeSeries={relatedTimeSeries}
+                      transparency={transparency}
+                      xScale={xScale}
+                      yScale={yScale}
+                    />
+                  )}
+                  {showPoints &&
+                    getDates(relatedTimeSeries).map((timeTick) => (
+                      <Point
+                        key={timeTick.toString()}
+                        lineColor={lineColor}
+                        metric_id={metric_id}
+                        radius={getPointRadius(lineWidth)}
+                        timeSeries={relatedTimeSeries}
+                        timeTick={timeTick}
+                        xScale={xScale}
+                        yPoint={getYAnchorPoint({
+                          metric_id,
+                          timeSeries: relatedTimeSeries,
+                          timeTick,
+                          yScale
+                        })}
+                        yScale={yScale}
+                      />
+                    ))}
+                  <RegularLine
+                    areaColor={areaColor || lineColor}
+                    curve={curve}
+                    dashLength={dashLength}
+                    dashOffset={dashOffset}
+                    dotOffset={dotOffset}
+                    filled={isNil(showArea) ? filled : showArea}
+                    graphHeight={height}
+                    highlight={highlight}
+                    lineColor={lineColor}
+                    lineWidth={lineWidth}
+                    metric_id={metric_id}
+                    timeSeries={relatedTimeSeries}
+                    transparency={
+                      isNil(areaTransparency)
+                        ? transparency || 80
+                        : areaTransparency
+                    }
+                    unit={unit}
+                    xScale={xScale}
+                    yScale={yScale}
+                  />
+                </g>
+              );
+            }
+          )
+        : null}
+    </g>
+  );
+};
+
+export default Lines;