@centreon/ui 23.10.107 → 23.10.109

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

@@ -1,189 +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 '../../../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

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

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

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

@@ -1,77 +0,0 @@
-import { equals, isNil } from 'ramda';
-
-import { getUnits, getYScale } from '../../common/timeSeries';
-import { Line } from '../../common/timeSeries/models';
-import { Thresholds } 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: Thresholds;
-  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

@@ -1,62 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
-import { compose, equals, prop, propEq, reject, sortBy, toLower } 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('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) {
-      setLinesGraph(lines);
-
-      return;
-    }
-
-    const sortedLines = sortBy(compose(toLower, prop('name')), filteredLines);
-
-    setLinesGraph(sortedLines);
-  }, [lines, displayThreshold]);
-
-  return { displayedLines, newLines: linesGraph ?? lines };
-};
-
-export default useFilterLines;

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

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

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

@@ -1,45 +0,0 @@
-import { Shape } from '@visx/visx';
-
-import { grey } from '@mui/material/colors';
-
-import { GuidingLines } from './models';
-import useTickGraph from './useTickGraph';
-
-const GuidingLines = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  graphWidth
-}: GuidingLines): 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

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