@centreon/ui 24.4.73 → 24.4.75

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;

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

@@ -0,0 +1,189 @@
+import { MutableRefObject } from 'react';
+
+import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import GuidingLines from '../../InteractiveComponents/AnchorPoint/GuidingLines';
+import RegularAnchorPoint from '../../InteractiveComponents/AnchorPoint/RegularAnchorPoint';
+import { displayArea } from '../../helpers/index';
+import { DisplayAnchor, GlobalAreaLines } from '../../models';
+import {
+  getStackedYScale,
+  getUnits,
+  getYScale
+} from '../../../common/timeSeries';
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+
+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';
+import { CurveType } from './models';
+
+interface Props extends GlobalAreaLines {
+  curve: CurveType;
+  displayAnchor?: DisplayAnchor;
+  displayedLines: Array<Line>;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  height: number;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  timeSeries: Array<TimeValue>;
+  width: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Lines = ({
+  height,
+  graphSvgRef,
+  width,
+  displayAnchor,
+  leftScale,
+  rightScale,
+  xScale,
+  timeSeries,
+  displayedLines,
+  areaThresholdLines,
+  areaStackedLines,
+  areaRegularLines,
+  curve
+}: 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 stackedYScale = getStackedYScale({
+    leftScale,
+    rightScale
+  });
+
+  const displayGuidingLines = displayAnchor?.displayGuidingLines ?? true;
+  const commonStackedLinesProps = {
+    curve,
+    displayAnchor: displayGuidingLines,
+    graphHeight: height,
+    graphSvgRef,
+    graphWidth: width,
+    xScale,
+    yScale: stackedYScale
+  };
+
+  return (
+    <g>
+      {displayGuidingLines && (
+        <GuidingLines
+          graphHeight={height}
+          graphWidth={width}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
+      {(areaStackedLines?.display ?? true) && (
+        <>
+          {displayArea(stackedLinesData.lines) && (
+            <StackedLines
+              lines={stackedLinesData.lines}
+              timeSeries={stackedLinesData.timeSeries}
+              {...commonStackedLinesProps}
+            />
+          )}
+
+          {displayArea(invertedStackedLinesData.lines) && (
+            <StackedLines
+              lines={invertedStackedLinesData.lines}
+              timeSeries={invertedStackedLinesData.timeSeries}
+              {...commonStackedLinesProps}
+            />
+          )}
+        </>
+      )}
+
+      {displayThresholdArea && (
+        <WrapperThresholdLines
+          areaThresholdLines={areaThresholdLines}
+          graphHeight={height}
+          leftScale={leftScale}
+          lines={displayedLines}
+          rightScale={rightScale}
+          timeSeries={timeSeries}
+          xScale={xScale}
+        />
+      )}
+
+      {displayAreaRegularLines
+        ? regularLines.map(
+            ({
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
+              unit,
+              highlight,
+              invert,
+              metric_id
+            }) => {
+              const [, secondUnit, thirdUnit] = getUnits(
+                regularLines as Array<Line>
+              );
+              const yScale = getYScale({
+                hasMoreThanTwoUnits: !isNil(thirdUnit),
+                invert,
+                leftScale,
+                rightScale,
+                secondUnit,
+                unit
+              });
+
+              return (
+                <g key={metric_id}>
+                  {displayGuidingLines && (
+                    <RegularAnchorPoint
+                      areaColor={areaColor}
+                      lineColor={lineColor}
+                      metric_id={metric_id}
+                      timeSeries={timeSeries}
+                      transparency={transparency}
+                      xScale={xScale}
+                      yScale={yScale}
+                    />
+                  )}
+                  <RegularLine
+                    areaColor={areaColor}
+                    curve={curve}
+                    filled={filled}
+                    graphHeight={height}
+                    highlight={highlight}
+                    lineColor={lineColor}
+                    metric_id={metric_id}
+                    timeSeries={timeSeries}
+                    transparency={transparency}
+                    unit={unit}
+                    xScale={xScale}
+                    yScale={yScale}
+                  />
+                </g>
+              );
+            }
+          )
+        : null}
+    </g>
+  );
+};
+
+export default Lines;

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

@@ -0,0 +1,45 @@
+import { ScaleLinear } from 'd3-scale';
+import { curveBasis } from '@visx/curve';
+
+import { Line, TimeValue } from '../../../common/timeSeries/models';
+import { LineChartData } from '../../../common/models';
+
+import { FactorsVariation } from './Threshold/models';
+
+export interface ShapeGraphData {
+  [x: string]: unknown;
+  display: boolean;
+  leftScale?: ScaleLinear<number, number>;
+  rightScale?: ScaleLinear<number, number>;
+  xScale?: ScaleLinear<number, number>;
+  yScale?: ScaleLinear<number, number>;
+}
+
+export interface LinesData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface AreaStackedLines extends ShapeGraphData {
+  invertedStackedLinesData: LinesData;
+  stackedLinesData: LinesData;
+}
+
+export interface AreaRegularLines extends ShapeGraphData {
+  lines: Array<Line>;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface AreaThreshold extends AreaRegularLines {
+  dataExclusionPeriods?: Array<LineChartData>;
+  factors?: FactorsVariation;
+  getCountDisplayedCircles?: (value: number) => void;
+}
+
+export interface Shape {
+  areaRegularLines: AreaRegularLines;
+  areaStackedLines: AreaStackedLines;
+  areaThreshold: AreaThreshold;
+}
+
+export type CurveType = typeof curveBasis;

package/src/Graph/LineChart/BasicComponents/ThresholdLine.tsx

@@ -0,0 +1,66 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { margin } from '../common';
+
+interface Props {
+  hideTooltip: () => void;
+  label: string;
+  showTooltip: (args) => void;
+  thresholdType: string;
+  value: number;
+  width: number;
+  yScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  yScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  width
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = yScale(value);
+
+  const onMouseEnter = (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: -(margin.left + margin.right),
+      tooltipTop: scaledValue
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="5,5"
+        strokeWidth={2}
+        x1={0}
+        x2={width}
+        y1={scaledValue}
+        y2={scaledValue}
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={0}
+        x2={width}
+        y1={scaledValue}
+        y2={scaledValue}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -0,0 +1,77 @@
+import { equals, isNil } from 'ramda';
+
+import { getUnits, getYScale } from '../../common/timeSeries';
+import { Line } from '../../common/timeSeries/models';
+import { Thresholds as ThresholdsModel } from '../../common/models';
+
+import { ThresholdLine } from './ThresholdLine';
+
+interface Props {
+  displayedLines: Array<Line>;
+  hideTooltip: () => void;
+  leftScale: (value: number) => number;
+  rightScale: (value: number) => number;
+  showTooltip: (props) => void;
+  thresholdUnit?: string;
+  thresholds: ThresholdsModel;
+  width: number;
+}
+
+const Thresholds = ({
+  thresholds,
+  leftScale,
+  rightScale,
+  width,
+  displayedLines,
+  thresholdUnit,
+  showTooltip,
+  hideTooltip
+}: Props): JSX.Element => {
+  const [firstUnit, secondUnit, thirdUnit] = getUnits(
+    displayedLines as Array<Line>
+  );
+
+  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
+
+  const yScale = shouldUseRightScale
+    ? rightScale
+    : getYScale({
+        hasMoreThanTwoUnits: !isNil(thirdUnit),
+        invert: null,
+        leftScale,
+        rightScale,
+        secondUnit,
+        unit: firstUnit
+      });
+
+  return (
+    <>
+      {thresholds.warning.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          key={`warning-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="warning"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
+      {thresholds.critical.map(({ value, label }) => (
+        <ThresholdLine
+          hideTooltip={hideTooltip}
+          key={`critical-${value}`}
+          label={label}
+          showTooltip={showTooltip}
+          thresholdType="critical"
+          value={value}
+          width={width}
+          yScale={yScale}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -0,0 +1,60 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+
+import { equals, propEq, reject } from 'ramda';
+
+import { Line } from '../../common/timeSeries/models';
+
+import {
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './Lines/Threshold/models';
+
+interface UseFilterLines {
+  displayThreshold?: boolean;
+  lines: Array<Line>;
+  linesGraph: Array<Line> | null;
+  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
+}
+
+interface Result {
+  displayedLines: Array<Line>;
+  newLines: Array<Line>;
+}
+
+const useFilterLines = ({
+  displayThreshold = false,
+  lines,
+  linesGraph,
+  setLinesGraph
+}: UseFilterLines): Result => {
+  const displayedLines = reject(propEq(false, 'display'), linesGraph ?? lines);
+  const filterLines = (): Array<Line> => {
+    const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
+
+    const findLinesUpperLower = lines.map((line) =>
+      equals(line.name, lowerLineName) || equals(line.name, upperLineName)
+        ? line
+        : null
+    );
+
+    const linesUpperLower = reject((element) => !element, findLinesUpperLower);
+
+    return [...lineOriginMetric, ...linesUpperLower] as Array<Line>;
+  };
+
+  useEffect(() => {
+    const filteredLines = filterLines();
+    if (!lines || !displayThreshold) {
+      setLinesGraph(lines);
+
+      return;
+    }
+
+    setLinesGraph(filteredLines);
+  }, [lines, displayThreshold]);
+
+  return { displayedLines, newLines: linesGraph ?? lines };
+};
+
+export default useFilterLines;

package/src/Graph/LineChart/Header/index.tsx

@@ -0,0 +1,37 @@
+import Typography from '@mui/material/Typography';
+
+import { useMemoComponent } from '@centreon/ui';
+
+import { useStyles } from '../LineChart.styles';
+import { LineChartHeader } from '../models';
+
+interface Props {
+  header?: LineChartHeader;
+  title: string;
+}
+
+const Header = ({ title, header }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const displayTitle = header?.displayTitle ?? true;
+
+  return useMemoComponent({
+    Component: (
+      <div className={classes.header}>
+        <div />
+        <div>
+          {displayTitle && (
+            <Typography align="center" variant="body1">
+              {title}
+            </Typography>
+          )}
+        </div>
+        {header?.extraComponent}
+      </div>
+    ),
+
+    memoProps: [title, header]
+  });
+};
+
+export default Header;

package/src/Graph/LineChart/Icons/Downtime.tsx

@@ -0,0 +1,9 @@
+import { SvgIconProps } from '@mui/material';
+
+import { DowntimeIcon } from '../../../Icon/DowntimeIcon';
+
+const Downtime = (props: SvgIconProps): JSX.Element => (
+  <DowntimeIcon {...props} />
+);
+
+export default Downtime;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -0,0 +1,45 @@
+import { Shape } from '@visx/visx';
+
+import { grey } from '@mui/material/colors';
+
+import { GuidingLines as GuidingLinesModel } from './models';
+import useTickGraph from './useTickGraph';
+
+const GuidingLines = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  graphWidth
+}: GuidingLinesModel): JSX.Element | null => {
+  const { positionX, positionY } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+  if (!positionX || !positionY) {
+    return null;
+  }
+
+  return (
+    <>
+      <Shape.Line
+        fill="dotted"
+        from={{ x: positionX, y: 0 }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeDasharray="2 4"
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </>
+  );
+};
+
+export default GuidingLines;