@centreon/ui 23.10.42 → 23.10.44

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

@@ -1,171 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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 };