@centreon/ui 24.7.2 → 24.7.4

package/src/Graph/LineChart/InteractiveComponents/Annotations/Line/Acknowledgement.tsx

@@ -1,27 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import IconAcknowledge from '@mui/icons-material/Person';
-import { useTheme } from '@mui/material';
-
-import { labelAcknowledgement } from '../../../translatedLabels';
-import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
-
-const AcknowledgementAnnotations = (props: Args): JSX.Element => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const color = theme.palette.action.acknowledged;
-
-  return (
-    <EventAnnotations
-      Icon={IconAcknowledge}
-      ariaLabel={t(labelAcknowledgement)}
-      color={color}
-      type="acknowledgement"
-      {...props}
-    />
-  );
-};
-
-export default AcknowledgementAnnotations;

package/src/Graph/LineChart/InteractiveComponents/Annotations/Line/Comments.tsx

@@ -1,25 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { useTheme } from '@mui/material';
-import IconComment from '@mui/icons-material/Comment';
-
-import { labelComment } from '../../../translatedLabels';
-import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
-
-const CommentAnnotations = (props: Args): JSX.Element => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  return (
-    <EventAnnotations
-      Icon={IconComment}
-      ariaLabel={t(labelComment)}
-      color={theme.palette.primary.main}
-      type="comment"
-      {...props}
-    />
-  );
-};
-
-export default CommentAnnotations;

package/src/Graph/LineChart/InteractiveComponents/Annotations/annotationsAtoms.ts

@@ -1,183 +0,0 @@
-import { ScaleTime } from 'd3-scale';
-import { atom } from 'jotai';
-import {
-  always,
-  both,
-  cond,
-  dec,
-  equals,
-  find,
-  gte,
-  inc,
-  isNil,
-  last,
-  lte,
-  not,
-  or,
-  pipe,
-  Pred,
-  T,
-  __
-} from 'ramda';
-
-import { alpha } from '@mui/material';
-
-import { TimelineEvent } from './models';
-
-interface ChangeAnnotationHoveredProps {
-  annotationHoveredId: number;
-  graphWidth: number;
-  mouseX: number;
-  timeline: Array<TimelineEvent> | undefined;
-  xScale: ScaleTime<number, number>;
-}
-
-interface GetIsBetweenProps {
-  end: number;
-  start: number;
-}
-
-interface AnnotationColor {
-  annotation: AnnotationAtom;
-  color: string;
-}
-
-interface AnnotationAtom {
-  annotationHoveredId: number;
-  event?: TimelineEvent;
-}
-
-interface AnnotationWithHoveredState {
-  annotation: AnnotationAtom | undefined;
-  hoveredAnnotation: AnnotationAtom | undefined;
-}
-
-export const annotationHoveredAtom = atom<AnnotationAtom | undefined>(
-  undefined
-);
-
-export const getIsBetween = ({ start, end }: GetIsBetweenProps): Pred => {
-  const gteX = gte(__, start);
-  const lteX = lte(__, end);
-
-  return both(gteX, lteX);
-};
-
-export const changeAnnotationHoveredDerivedAtom = atom(
-  null,
-  (
-    _,
-    set,
-    {
-      xScale,
-      mouseX,
-      timeline,
-      graphWidth,
-      annotationHoveredId
-    }: ChangeAnnotationHoveredProps
-  ) => {
-    const isWithinErrorMargin = getIsBetween({
-      end: inc(mouseX),
-      start: dec(mouseX)
-    });
-
-    const annotationHovered = find(
-      ({ startDate, endDate, date }: TimelineEvent) => {
-        if (isNil(startDate)) {
-          return isWithinErrorMargin(xScale(new Date(date)));
-        }
-
-        const isBetweenStartAndEndDate = getIsBetween({
-          end: xScale(
-            endDate ? new Date(endDate) : last(xScale.domain()) || graphWidth
-          ),
-          start: xScale(new Date(startDate as string))
-        });
-
-        return isBetweenStartAndEndDate(mouseX);
-      },
-      timeline ?? []
-    );
-
-    set(annotationHoveredAtom, {
-      annotationHoveredId,
-      event: annotationHovered
-    });
-  }
-);
-
-const getIsNotHoveredOrNil = ({
-  hoveredAnnotation,
-  annotation
-}: AnnotationWithHoveredState): boolean =>
-  or(
-    isNil(hoveredAnnotation?.event),
-    not(
-      equals(
-        hoveredAnnotation?.annotationHoveredId,
-        annotation?.annotationHoveredId
-      )
-    )
-  );
-
-export const getStrokeWidthDerivedAtom = atom(
-  (get) =>
-    (annotation: AnnotationAtom | undefined): number =>
-      cond<AnnotationAtom | undefined, number>([
-        [
-          (hoveredAnnotation): boolean =>
-            getIsNotHoveredOrNil({ annotation, hoveredAnnotation }),
-          always(1)
-        ],
-        [equals(annotation), always(3)],
-        [T, always(1)]
-      ])(get(annotationHoveredAtom)) as number
-);
-
-export const getStrokeOpacityDerivedAtom = atom(
-  (get) =>
-    (annotation: AnnotationAtom | undefined): number =>
-      cond<AnnotationAtom | undefined, number>([
-        [
-          (hoveredAnnotation): boolean =>
-            getIsNotHoveredOrNil({ annotation, hoveredAnnotation }),
-          always(0.5)
-        ],
-        [equals(annotation), always(0.7)],
-        [T, always(0.2)]
-      ])(get(annotationHoveredAtom)) as number
-);
-
-export const getFillColorDerivedAtom = atom(
-  (get) =>
-    ({ color, annotation }: AnnotationColor): string =>
-      cond<AnnotationAtom | undefined, string>([
-        [
-          (hoveredAnnotation): boolean =>
-            getIsNotHoveredOrNil({ annotation, hoveredAnnotation }),
-          always(alpha(color, 0.3))
-        ],
-        [
-          equals<AnnotationAtom | undefined>(annotation),
-          always(alpha(color, 0.5))
-        ],
-        [T, always(alpha(color, 0.1))]
-      ])(get(annotationHoveredAtom)) as string
-);
-
-export const getIconColorDerivedAtom = atom(
-  (get) =>
-    ({ color, annotation }: AnnotationColor): string =>
-      cond<AnnotationAtom | undefined, string>([
-        [
-          (hoveredAnnotation): boolean =>
-            getIsNotHoveredOrNil({ annotation, hoveredAnnotation }),
-          always(color)
-        ],
-        [
-          pipe(equals<AnnotationAtom | undefined>(annotation), not),
-          always(alpha(color, 0.2))
-        ],
-        [T, always(color)]
-      ])(get(annotationHoveredAtom)) as string
-);

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

@@ -1,49 +0,0 @@
-import { MutableRefObject } from 'react';
-
-import { ScaleTime } from 'd3-scale';
-
-import DowntimeAnnotations from './Area/Downtime';
-import AcknowledgementAnnotations from './Line/Acknowledgement';
-import CommentAnnotations from './Line/Comments';
-import { TimelineEvent } from './models';
-import useAnnotation from './useAnnotation';
-
-export interface Props {
-  data: Array<TimelineEvent>;
-  graphHeight: number;
-  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
-  graphWidth: number;
-  xScale: ScaleTime<number, number>;
-}
-
-const Annotations = ({
-  xScale,
-  data,
-  graphHeight,
-  graphWidth,
-  graphSvgRef
-}: Props): JSX.Element => {
-  const annotationHoveredId = useAnnotation({
-    data,
-    graphSvgRef,
-    graphWidth,
-    xScale
-  });
-
-  const props = {
-    annotationHoveredId,
-    data,
-    graphHeight,
-    xScale
-  };
-
-  return (
-    <g>
-      <CommentAnnotations {...props} />
-      <AcknowledgementAnnotations {...props} />
-      <DowntimeAnnotations {...props} />
-    </g>
-  );
-};
-
-export default Annotations;

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

@@ -1,25 +0,0 @@
-import { Props } from '.';
-
-export interface Status {
-  name: string;
-  severity_code: number;
-}
-
-export interface WithName {
-  name: string;
-}
-export interface TimelineEvent {
-  contact?: WithName;
-  content: string;
-  date: string;
-  endDate?: string;
-  id: number;
-  startDate?: string;
-  status?: Status;
-  tries?: number;
-  type: string;
-}
-
-export interface Args extends Omit<Props, 'graphWidth' | 'graphSvgRef'> {
-  annotationHoveredId: number;
-}

package/src/Graph/LineChart/InteractiveComponents/Annotations/useAnnotation.ts

@@ -1,56 +0,0 @@
-import { useEffect } from 'react';
-
-import { useAtomValue, useSetAtom } from 'jotai';
-
-import { margin } from '../../common';
-import {
-  eventMouseLeaveAtom,
-  mousePositionAtom
-} from '../interactionWithGraphAtoms';
-
-import {
-  annotationHoveredAtom,
-  changeAnnotationHoveredDerivedAtom
-} from './annotationsAtoms';
-
-import { Props } from '.';
-
-const useAnnotation = ({
-  graphWidth,
-  data,
-  xScale
-}: Omit<Props, 'graphHeight'>): number => {
-  const [annotationHoveredId] = crypto.getRandomValues(new Uint16Array(1));
-
-  const mousePosition = useAtomValue(mousePositionAtom);
-  const mouseLeaveEvent = useAtomValue(eventMouseLeaveAtom);
-
-  const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
-  const changeAnnotationHovered = useSetAtom(
-    changeAnnotationHoveredDerivedAtom
-  );
-
-  useEffect(() => {
-    if (!mousePosition) {
-      return;
-    }
-
-    const mousePositionX = mousePosition[0] - margin.left;
-
-    changeAnnotationHovered({
-      annotationHoveredId,
-      graphWidth,
-      mouseX: mousePositionX,
-      timeline: data,
-      xScale
-    });
-  }, [mousePosition]);
-
-  useEffect(() => {
-    setAnnotationHovered(undefined);
-  }, [mouseLeaveEvent]);
-
-  return annotationHoveredId;
-};
-
-export default useAnnotation;

package/src/Graph/LineChart/InteractiveComponents/Bar.tsx

@@ -1,21 +0,0 @@
-import { Shape } from '@visx/visx';
-import { AddSVGProps } from '@visx/shape/lib/types';
-
-interface BarProps {
-  className?: string;
-  innerRef?: React.Ref<SVGRectElement>;
-  open?: boolean;
-}
-
-const Bar = ({
-  open = true,
-  ...restProps
-}: AddSVGProps<BarProps, SVGRectElement>): JSX.Element | null => {
-  if (!open) {
-    return null;
-  }
-
-  return <Shape.Bar {...restProps} />;
-};
-
-export default Bar;

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -1,74 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { equals, isNil } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { mousePositionAtom } from '../interactionWithGraphAtoms';
-import { formatMetricValueWithUnit } from '../../../common/timeSeries';
-import { Tooltip } from '../../models';
-
-import { useGraphValueTooltip } from './useGraphValueTooltip';
-import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
-
-interface Props extends Pick<Tooltip, 'sortOrder'> {
-  base: number;
-  isSingleMode: boolean;
-}
-
-const GraphValueTooltip = ({
-  base,
-  isSingleMode,
-  sortOrder
-}: Props): JSX.Element | null => {
-  const { classes } = useGraphValueTooltipStyles();
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const graphValue = useGraphValueTooltip({ isSingleMode, sortOrder });
-
-  if (isNil(graphValue) || isNil(mousePosition)) {
-    return null;
-  }
-
-  return (
-    <div className={classes.tooltipContainer}>
-      <Typography fontWeight="bold">{graphValue.dateTime}</Typography>
-      <div className={classes.metrics}>
-        {graphValue.metrics.map(({ unit, color, id, value, name }) => {
-          const isMetricHighlighted = equals(
-            id,
-            graphValue.highlightedMetricId
-          );
-
-          return (
-            <div
-              className={classes.metric}
-              data-highlight={isMetricHighlighted}
-              data-metric={name}
-              key={id}
-            >
-              <Box
-                className={classes.metricColorBox}
-                sx={{ backgroundColor: color }}
-              />
-              <Typography
-                className={classes.metricName}
-                fontWeight={isMetricHighlighted ? 'bold' : undefined}
-              >
-                {name}
-              </Typography>
-              <Typography fontWeight={isMetricHighlighted ? 'bold' : undefined}>
-                {formatMetricValueWithUnit({
-                  base,
-                  unit,
-                  value
-                })}
-              </Typography>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default GraphValueTooltip;

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,61 +0,0 @@
-import { useAtomValue } from 'jotai';
-import {
-  always,
-  cond,
-  equals,
-  filter,
-  isNil,
-  prop,
-  reverse,
-  sortBy,
-  T
-} from 'ramda';
-
-import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
-import { useLocaleDateTimeFormat } from '../../../../utils';
-import { GraphTooltipData, Tooltip } from '../../models';
-
-interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
-  dateTime: string;
-}
-
-interface UseGraphValueTooltipProps extends Pick<Tooltip, 'sortOrder'> {
-  isSingleMode: boolean;
-}
-
-export const useGraphValueTooltip = ({
-  isSingleMode,
-  sortOrder
-}: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
-  const { toDate, toTime } = useLocaleDateTimeFormat();
-  const graphTooltipData = useAtomValue(graphTooltipDataAtom);
-
-  if (isNil(graphTooltipData) || isNil(graphTooltipData.metrics)) {
-    return null;
-  }
-
-  const formattedDateTime = `${toDate(graphTooltipData.date)} / ${toTime(graphTooltipData.date)}`;
-
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ id }) => equals(id, graphTooltipData.highlightedMetricId),
-        graphTooltipData.metrics
-      )
-    : graphTooltipData.metrics;
-
-  const sortedMetrics = cond([
-    [equals('name'), always(sortBy(prop('name'), filteredMetrics))],
-    [equals('ascending'), always(sortBy(prop('value'), filteredMetrics))],
-    [
-      equals('descending'),
-      always(reverse(sortBy(prop('value'), filteredMetrics)))
-    ],
-    [T, always(filteredMetrics)]
-  ])(sortOrder);
-
-  return {
-    dateTime: formattedDateTime,
-    highlightedMetricId: graphTooltipData.highlightedMetricId,
-    metrics: sortedMetrics
-  };
-};

package/src/Graph/LineChart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltipStyles.ts

@@ -1,31 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useGraphValueTooltipStyles = makeStyles()((theme) => ({
-  dateTimeLabel: {
-    fontSize: '1.1rem'
-  },
-  metric: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: theme.spacing(1),
-    weidth: '100%'
-  },
-  metricColorBox: {
-    borderRadius: theme.shape.borderRadius,
-    flexShrink: 0,
-    height: theme.spacing(1.5),
-    width: theme.spacing(1.5)
-  },
-  metricName: {
-    flexGrow: 1
-  },
-  metrics: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: theme.spacing(0.5),
-    width: '100%'
-  },
-  tooltipContainer: {
-    padding: theme.spacing(1)
-  }
-}));

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx

@@ -1,62 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
-
-import { useMemoComponent } from '@centreon/ui';
-
-import { TimeShiftDirection } from './models';
-
-export const timeShiftIconSize = 20;
-
-interface Props {
-  Icon: ReactNode;
-  ariaLabel: string;
-  directionHovered: TimeShiftDirection;
-  xIcon: number;
-  yIcon: number;
-}
-
-const useStyles = makeStyles()({
-  icon: {
-    cursor: 'pointer'
-  }
-});
-
-const TimeShiftIcon = ({
-  xIcon,
-  yIcon,
-  Icon,
-  ariaLabel,
-  directionHovered
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const svgProps = {
-    'aria-label': t(ariaLabel),
-    className: classes.icon,
-    height: timeShiftIconSize,
-    width: timeShiftIconSize,
-    x: xIcon,
-    y: yIcon
-  };
-
-  return useMemoComponent({
-    Component: (
-      <g>
-        <svg {...svgProps}>
-          <rect
-            fill="transparent"
-            height={timeShiftIconSize}
-            width={timeShiftIconSize}
-          />
-          {Icon}
-        </svg>
-      </g>
-    ),
-    memoProps: [xIcon, ariaLabel, directionHovered]
-  });
-};
-
-export default TimeShiftIcon;

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx

@@ -1,74 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-import { Shape } from '@visx/visx';
-import { equals, negate } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha, useTheme } from '@mui/material';
-
-import { GraphInterval, Interval } from '../../models';
-
-import { TimeShiftDirection } from './models';
-import { useTimeShiftZones } from './useTimeShiftZones';
-
-export const timeShiftZoneWidth = 30;
-
-const useStyles = makeStyles()({
-  translationZone: {
-    cursor: 'pointer'
-  }
-});
-
-interface Props {
-  direction: TimeShiftDirection;
-  directionHovered: TimeShiftDirection | null;
-  getInterval?: (args: Interval) => void;
-  graphHeight: number;
-  graphInterval: GraphInterval;
-  graphWidth: number;
-  onDirectionHover: Dispatch<SetStateAction<TimeShiftDirection | null>>;
-}
-
-const TimeShiftZone = ({
-  direction,
-  onDirectionHover,
-  directionHovered,
-  graphHeight,
-  graphWidth,
-  graphInterval,
-  getInterval
-}: Props): JSX.Element => {
-  const theme = useTheme();
-  const { classes } = useStyles();
-
-  const { end, start } = useTimeShiftZones({
-    direction,
-    graphInterval
-  });
-
-  const handleClick = (): void => getInterval?.({ end, start });
-
-  return (
-    <Shape.Bar
-      className={classes.translationZone}
-      fill={
-        equals(directionHovered, direction)
-          ? alpha(theme.palette.background.paper, 0.5)
-          : 'transparent'
-      }
-      height={graphHeight}
-      width={timeShiftZoneWidth}
-      x={
-        equals(direction, TimeShiftDirection.backward)
-          ? negate(timeShiftZoneWidth)
-          : graphWidth
-      }
-      y={0}
-      onClick={handleClick}
-      onMouseLeave={(): void => onDirectionHover(null)}
-      onMouseOver={(): void => onDirectionHover(direction)}
-    />
-  );
-};
-
-export default TimeShiftZone;