@centreon/ui 24.4.21 → 24.4.22

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/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/LineChart/BasicComponents/ThresholdLine.tsx

@@ -0,0 +1,64 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+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: 0,
+      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,65 @@
+import { ScaleLinear } from 'd3-scale';
+import { isNil } from 'ramda';
+
+import Typography from '@mui/material/Typography';
+
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
+import { useStyles } from '../LineChart.styles';
+import useTickGraph from '../InteractiveComponents/AnchorPoint/useTickGraph';
+import { LineChartHeader } from '../models';
+import { TimeValue } from '../../common/timeSeries/models';
+
+interface Props {
+  displayTimeTick?: boolean;
+  header?: LineChartHeader;
+  timeSeries: Array<TimeValue>;
+  title: string;
+  xScale: ScaleLinear<number, number>;
+}
+
+const Header = ({
+  title,
+  displayTimeTick = true,
+  header,
+  timeSeries,
+  xScale
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { toDateTime } = useLocaleDateTimeFormat();
+
+  const { tickAxisBottom } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+  const time =
+    displayTimeTick && !isNil(tickAxisBottom)
+      ? toDateTime(tickAxisBottom)
+      : null;
+
+  const displayTitle = header?.displayTitle ?? true;
+
+  return useMemoComponent({
+    Component: (
+      <div className={classes.header}>
+        <div />
+        <div>
+          {displayTitle && (
+            <Typography align="center" variant="body1">
+              {title}
+            </Typography>
+          )}
+
+          <Typography align="center" style={{ height: 20 }} variant="body1">
+            {time}
+          </Typography>
+        </div>
+        {header?.extraComponent}
+      </div>
+    ),
+
+    memoProps: [time, timeSeries, xScale, displayTimeTick, title, header]
+  });
+};
+
+export default Header;

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

@@ -0,0 +1,9 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+import { ReactComponent as IconDowntime } from '../../../@assets/icons/downtime.icon.svg';
+
+const Downtime = (props: SvgIconProps): JSX.Element => (
+  <SvgIcon component={IconDowntime} {...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;

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

@@ -0,0 +1,66 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { isNil, prop } from 'ramda';
+
+import { bisectDate, getDates } from '../../../common/timeSeries';
+import { TimeValue } from '../../../common/timeSeries/models';
+
+import useTickGraph from './useTickGraph';
+import { GetYAnchorPoint } from './models';
+
+import AnchorPoint from '.';
+
+interface Props {
+  lineColor: string;
+  metric_id: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const getYAnchorPoint = ({
+  timeTick,
+  timeSeries,
+  yScale,
+  metric_id
+}: GetYAnchorPoint): number => {
+  const index = bisectDate(getDates(timeSeries), timeTick);
+  const timeValue = timeSeries[index];
+
+  return yScale(prop(metric_id, timeValue) as number);
+};
+
+const RegularAnchorPoint = ({
+  xScale,
+  yScale,
+  metric_id,
+  timeSeries,
+  lineColor
+}: Props): JSX.Element | null => {
+  const { tickAxisBottom: timeTick } = useTickGraph({
+    timeSeries,
+    xScale
+  });
+
+  if (isNil(timeTick)) {
+    return null;
+  }
+
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    metric_id,
+    timeSeries,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
+  );
+};
+
+export default RegularAnchorPoint;