@centreon/ui 24.4.13 → 24.4.14

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 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

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

@@ -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 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

@@ -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;

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

@@ -1,76 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { isNil, map, pipe } from 'ramda';
-
-import { bisectDate } from '../../../common/timeSeries';
-import { TimeValue } from '../../../common/timeSeries/models';
-
-import { StackValue } from './models';
-import useTickGraph from './useTickGraph';
-
-import AnchorPoint from '.';
-
-interface Props {
-  lineColor: string;
-  stackValues: Array<StackValue>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-interface GetYAnchorPoint {
-  stackValues: Array<StackValue>;
-  timeTick: Date | null;
-  yScale: ScaleTime<number, number>;
-}
-
-const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
-  const toTimeTick = (stackValue): string => stackValue?.data?.timeTick;
-
-  const toDate = (tick: string): Date => new Date(tick);
-
-  return pipe(map(toTimeTick), map(toDate))(stackValues);
-};
-
-const getYAnchorPoint = ({
-  timeTick,
-  stackValues,
-  yScale
-}: GetYAnchorPoint): number => {
-  const index = bisectDate(getStackedDates(stackValues), timeTick);
-  const timeValue = stackValues[index];
-
-  return yScale(timeValue[1] as number);
-};
-
-const StackedAnchorPoint = ({
-  xScale,
-  yScale,
-  stackValues,
-  timeSeries,
-  lineColor
-}: Props): JSX.Element | null => {
-  const { tickAxisBottom: timeTick } = useTickGraph({
-    timeSeries,
-    xScale
-  });
-
-  if (isNil(timeTick)) {
-    return null;
-  }
-  const xAnchorPoint = xScale(timeTick);
-
-  const yAnchorPoint = getYAnchorPoint({
-    stackValues,
-    timeTick,
-    yScale
-  });
-
-  if (isNil(yAnchorPoint)) {
-    return null;
-  }
-
-  return (
-    <AnchorPoint lineColor={lineColor} x={xAnchorPoint} y={yAnchorPoint} />
-  );
-};
-
-export default StackedAnchorPoint;

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

@@ -1,96 +0,0 @@
-import { Tooltip } from '@visx/visx';
-
-import { Typography, useTheme } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { TooltipAnchorModel } from './models';
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const theme = useTheme();
-
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-
-  const cardStyles = {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(0.25, 0.5)
-  };
-
-  return (
-    <>
-      {tooltipDataAxisX && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisX}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)'
-          }}
-          top={0}
-        >
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYLeft && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYLeft}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%) translateY(-100%)'
-          }}
-          top={tooltipTopAxisYLeft}
-        >
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYRight && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYRight}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)  translateY(-80%)'
-          }}
-          top={tooltipTopAxisYRight}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Tooltip.Tooltip>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

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

@@ -1,20 +0,0 @@
-import { alpha } from '@mui/system';
-
-interface Props {
-  lineColor: string;
-  x: number;
-  y: number;
-}
-
-const Point = ({ lineColor, x, y }: Props): JSX.Element => (
-  <circle
-    cx={x}
-    cy={y}
-    fill={alpha(lineColor, 0.5)}
-    r={4}
-    stroke={lineColor}
-    strokeWidth={2}
-  />
-);
-
-export default Point;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/models.ts

@@ -1,62 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-
-import { Line, TimeValue } from '../../../common/timeSeries/models';
-
-interface AnchorPoint {
-  areaColor: string;
-  lineColor: string;
-  transparency: number;
-  xScale: ScaleTime<number, number>;
-  yScale: ScaleLinear<number, number>;
-}
-
-export interface RegularLinesAnchorPoint extends AnchorPoint {
-  metric: string;
-  timeSeries: Array<TimeValue>;
-}
-
-export interface StackedAnchorPoint extends AnchorPoint {
-  stack;
-}
-
-export interface StackData {
-  data: TimeValue;
-}
-export type StackValue = [number, number, StackData];
-
-export interface GuidingLines {
-  graphHeight: number;
-  graphWidth: number;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
-}
-
-export interface GetYAnchorPoint {
-  metric_id: number;
-  timeSeries: Array<TimeValue>;
-  timeTick: Date;
-  yScale: ScaleLinear<number, number>;
-}
-
-export interface UseTooltipAnchorPointResult {
-  tooltipDataAxisX?: string | null;
-  tooltipDataAxisYLeft?: number | null;
-  tooltipDataAxisYRight?: number | null;
-  tooltipLeftAxisX?: number;
-  tooltipLeftAxisYLeft?: number;
-  tooltipLeftAxisYRight?: number;
-  tooltipTopAxisX?: number;
-  tooltipTopAxisYLeft?: number;
-  tooltipTopAxisYRight?: number;
-}
-
-export interface TooltipAnchorModel {
-  baseAxis: number;
-  graphHeight: number;
-  graphWidth?: number;
-  leftScale?: ScaleLinear<number, number>;
-  lines: Array<Line>;
-  rightScale?: ScaleLinear<number, number>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
-}

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -1,94 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { ScaleLinear } from 'd3-scale';
-import { useAtomValue } from 'jotai';
-import { isEmpty, isNil, not } from 'ramda';
-
-import useAxisY from '../../BasicComponents/Axes/useAxisY';
-import { margin } from '../../common';
-import { getMetrics, getTimeValue } from '../../../common/timeSeries';
-import { Line, TimeValue } from '../../../common/timeSeries/models';
-import { mousePositionAtom, timeValueAtom } from '../interactionWithGraphAtoms';
-
-interface AnchorPointResult {
-  positionX?: number;
-  positionY?: number;
-  tickAxisBottom: Date | null;
-  tickAxisLeft: string | null;
-  tickAxisRight: string | null;
-}
-
-interface Props {
-  baseAxis?: number;
-  leftScale?: ScaleLinear<number, number>;
-  lines?: Array<Line>;
-  rightScale?: ScaleLinear<number, number>;
-  timeSeries: Array<TimeValue>;
-  xScale: ScaleLinear<number, number>;
-}
-
-const useTickGraph = ({
-  timeSeries,
-  xScale,
-  leftScale,
-  rightScale,
-  lines = [],
-  baseAxis = 1000
-}: Props): AnchorPointResult => {
-  const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
-  const [tickAxisLeft, setTickAxisLeft] = useState<string | null>(null);
-  const [tickAxisRight, setTickAxisRight] = useState<string | null>(null);
-
-  const { axisRight, axisLeft } = useAxisY({ data: { baseAxis, lines } });
-
-  const mousePosition = useAtomValue(mousePositionAtom);
-  const timeValueData = useAtomValue(timeValueAtom);
-
-  const metrics = getMetrics(timeValueData as TimeValue);
-
-  const containsMetrics = not(isNil(metrics)) && not(isEmpty(metrics));
-
-  const positionX = mousePosition ? mousePosition[0] - margin.left : undefined;
-  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
-
-  useEffect(() => {
-    if (!mousePosition) {
-      setTickAxisBottom(null);
-      setTickAxisLeft(null);
-      setTickAxisRight(null);
-
-      return;
-    }
-    const mousePositionTimeTick = mousePosition
-      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
-      : 0;
-    const timeTickValue = containsMetrics
-      ? new Date(mousePositionTimeTick)
-      : null;
-
-    setTickAxisBottom(timeTickValue);
-
-    const valueTickAxisLeft = leftScale?.invert(positionY);
-    const formattedTickAxisLeft = axisLeft?.tickFormat?.(valueTickAxisLeft);
-
-    setTickAxisLeft(formattedTickAxisLeft);
-
-    if (!axisRight.display) {
-      setTickAxisRight(null);
-
-      return;
-    }
-    const valueTickAxisRight = rightScale?.invert(positionY);
-    const formattedTickAxisRight = axisRight?.tickFormat?.(valueTickAxisRight);
-    setTickAxisRight(formattedTickAxisRight);
-  }, [mousePosition]);
-
-  return {
-    positionX,
-    positionY,
-    tickAxisBottom,
-    tickAxisLeft,
-    tickAxisRight
-  };
-};
-export default useTickGraph;