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

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

@@ -0,0 +1,171 @@
+import { equals, isNil, prop } from 'ramda';
+
+import { ThresholdType, VariationThreshold } from '../../../models';
+import { TimeValue } from '../../../timeSeries/models';
+import { getTime, getUnits, getYScale } from '../../../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: metricY1,
+    unit: unitY1,
+    invert: invertY1,
+    lineColor: lineColorY1
+  } = lineUpper;
+
+  const {
+    metric: metricY0,
+    unit: unitY0,
+    invert: invertY0,
+    lineColor: lineColorY0
+  } = lineLower;
+
+  const {
+    metric: 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/BasicComponents/Lines/index.tsx

@@ -0,0 +1,180 @@
+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 '../../timeSeries';
+import { Line, TimeValue } from '../../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';
+
+interface Props extends GlobalAreaLines {
+  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
+}: 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 = {
+    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(
+            ({
+              metric,
+              areaColor,
+              transparency,
+              lineColor,
+              filled,
+              unit,
+              highlight,
+              invert
+            }) => {
+              const [, secondUnit, thirdUnit] = getUnits(
+                regularLines as Array<Line>
+              );
+              const yScale = getYScale({
+                hasMoreThanTwoUnits: !isNil(thirdUnit),
+                invert,
+                leftScale,
+                rightScale,
+                secondUnit,
+                unit
+              });
+
+              return (
+                <g key={metric}>
+                  {displayGuidingLines && (
+                    <RegularAnchorPoint
+                      areaColor={areaColor}
+                      lineColor={lineColor}
+                      metric={metric}
+                      timeSeries={timeSeries}
+                      transparency={transparency}
+                      xScale={xScale}
+                      yScale={yScale}
+                    />
+                  )}
+                  <RegularLine
+                    areaColor={areaColor}
+                    filled={filled}
+                    graphHeight={height}
+                    highlight={highlight}
+                    lineColor={lineColor}
+                    metric={metric}
+                    timeSeries={timeSeries}
+                    transparency={transparency}
+                    unit={unit}
+                    xScale={xScale}
+                    yScale={yScale}
+                  />
+                </g>
+              );
+            }
+          )
+        : null}
+    </g>
+  );
+};
+
+export default Lines;

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

@@ -0,0 +1,42 @@
+import { ScaleLinear } from 'd3-scale';
+
+import { GraphData } from '../../models';
+import { Line, TimeValue } from '../../timeSeries/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<GraphData>;
+  factors?: FactorsVariation;
+  getCountDisplayedCircles?: (value: number) => void;
+}
+
+export interface Shape {
+  areaRegularLines: AreaRegularLines;
+  areaStackedLines: AreaStackedLines;
+  areaThreshold: AreaThreshold;
+}

package/src/Graph/BasicComponents/LoadingProgress.tsx

@@ -0,0 +1,46 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { CircularProgress, alpha } from '@mui/material';
+
+interface StyleProps {
+  height: number;
+  width: number;
+}
+
+const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
+  graphLoader: {
+    alignItems: 'center',
+    backgroundColor: alpha(theme.palette.common.white, 0.5),
+    display: 'flex',
+    height,
+    justifyContent: 'center',
+    position: 'absolute',
+    width
+  }
+}));
+
+interface LoadingProgress {
+  display: boolean;
+  height: number;
+  width: number;
+}
+
+const LoadingProgress = ({
+  display,
+  height,
+  width
+}: LoadingProgress): JSX.Element | null => {
+  const { classes } = useStyles({ height, width });
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <div className={classes.graphLoader}>
+      <CircularProgress />
+    </div>
+  );
+};
+
+export default LoadingProgress;

package/src/Graph/BasicComponents/useFilterLines.ts

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+
+import { useAtom } from 'jotai';
+import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
+
+import { linesGraphAtom } from '../graphAtoms';
+import { Line } from '../timeSeries/models';
+
+import {
+  findLineOfOriginMetricThreshold,
+  lowerLineName,
+  upperLineName
+} from './Lines/Threshold/models';
+
+interface UseFilterLines {
+  displayThreshold?: boolean;
+  lines: Array<Line>;
+}
+
+interface Result {
+  displayedLines: Array<Line>;
+  newLines: Array<Line>;
+}
+
+const useFilterLines = ({
+  displayThreshold = false,
+  lines
+}: UseFilterLines): Result => {
+  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
+
+  const displayedLines = reject(propEq('display', false), 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 || filteredLines.length <= 0) {
+      return;
+    }
+
+    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
+
+    setLinesGraph(sortedLines);
+  }, [lines, displayThreshold]);
+
+  return { displayedLines, newLines: linesGraph ?? lines };
+};
+
+export default useFilterLines;

package/src/Graph/Graph.styles.ts

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  container: {
+    '& .visx-axis-bottom': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        },
+        text: {
+          fill: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-axis-line': {
+      stroke: theme.palette.text.primary
+    },
+    '& .visx-axis-right': {
+      '& .visx-axis-tick': {
+        '& .visx-line': {
+          stroke: theme.palette.text.primary
+        }
+      }
+    },
+    '& .visx-columns': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    '& .visx-rows': {
+      '& .visx-line': {
+        stroke: theme.palette.divider
+      }
+    },
+    fill: theme.palette.text.primary,
+    position: 'relative'
+  },
+  header: {
+    display: 'grid',
+    gridTemplateColumns: '0.4fr 1fr 0.4fr',
+    width: '100%'
+  }
+}));
+
+export { useStyles };