@centreon/ui 24.4.13 → 24.4.14

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/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 = 50;
-
-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.2)
-          : '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;

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

@@ -1,85 +0,0 @@
-import { useState } from 'react';
-
-import { equals, isNil, negate } from 'ramda';
-
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-import { GraphInterval, Interval } from '../../models';
-import { margin } from '../../common';
-
-import TimeShiftIcon, { timeShiftIconSize } from './TimeShiftIcon';
-import TimeShiftZone from './TimeShiftZone';
-import { TimeShiftDirection } from './models';
-
-interface Props {
-  getInterval?: (args: Interval) => void;
-  graphHeight: number;
-  graphInterval: GraphInterval;
-  graphWidth: number;
-}
-
-const TimeShiftZones = ({
-  graphHeight,
-  graphWidth,
-  getInterval,
-  graphInterval
-}: Props): JSX.Element => {
-  const [directionHovered, setDirectionHovered] =
-    useState<TimeShiftDirection | null>(null);
-
-  const marginLeft = margin.left;
-
-  const isBackward = equals(directionHovered, TimeShiftDirection.backward);
-  const displayIcon = !isNil(directionHovered);
-  const propsIcon = { color: 'primary' as const };
-
-  const xIcon = isBackward
-    ? negate(marginLeft)
-    : graphWidth + timeShiftIconSize;
-
-  const yIcon = graphHeight / 2 - timeShiftIconSize / 2;
-
-  const Icon = isBackward ? (
-    <ArrowBackIosIcon {...propsIcon} />
-  ) : (
-    <ArrowForwardIosIcon {...propsIcon} />
-  );
-  const ariaLabelIcon = isBackward ? 'labelBackward' : 'labelForward';
-
-  const commonData = {
-    getInterval,
-    graphHeight,
-    graphInterval,
-    graphWidth
-  };
-
-  return (
-    <>
-      {displayIcon && (
-        <TimeShiftIcon
-          Icon={Icon}
-          ariaLabel={ariaLabelIcon}
-          directionHovered={directionHovered}
-          xIcon={xIcon}
-          yIcon={yIcon}
-        />
-      )}
-
-      <TimeShiftZone
-        direction={TimeShiftDirection.backward}
-        directionHovered={directionHovered}
-        onDirectionHover={setDirectionHovered}
-        {...commonData}
-      />
-      <TimeShiftZone
-        direction={TimeShiftDirection.forward}
-        directionHovered={directionHovered}
-        onDirectionHover={setDirectionHovered}
-        {...commonData}
-      />
-    </>
-  );
-};
-
-export default TimeShiftZones;

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

@@ -1,12 +0,0 @@
-import { GraphInterval, GraphIntervalProperty } from '../../models';
-
-export enum TimeShiftDirection {
-  backward,
-  forward
-}
-
-export interface GetShiftDate {
-  property: GraphIntervalProperty;
-  timePeriod: GraphInterval;
-  timeShiftDirection: TimeShiftDirection;
-}

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts

@@ -1,72 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { add, equals, negate, prop } from 'ramda';
-
-import { GraphInterval, GraphIntervalProperty, Interval } from '../../models';
-
-import { GetShiftDate, TimeShiftDirection } from './models';
-
-interface Props {
-  direction: TimeShiftDirection;
-  graphInterval: GraphInterval;
-}
-
-const useTimeShiftZones = ({ graphInterval, direction }: Props): Interval => {
-  const shiftRatio = 2;
-
-  const [start, setStart] = useState<Date>();
-  const [end, setEnd] = useState<Date>();
-
-  const getShiftedDate = ({
-    property,
-    timeShiftDirection,
-    timePeriod
-  }: GetShiftDate): Date | null => {
-    if (!timePeriod?.end || !timePeriod?.start) {
-      return null;
-    }
-    const adjustTimePeriodProps =
-      (new Date(timePeriod.end).getTime() -
-        new Date(timePeriod.start).getTime()) /
-      shiftRatio;
-
-    const date = prop(property, timePeriod);
-
-    if (!date) {
-      return null;
-    }
-
-    return new Date(
-      add(
-        new Date(date).getTime(),
-        equals(timeShiftDirection, TimeShiftDirection.backward)
-          ? negate(adjustTimePeriodProps)
-          : adjustTimePeriodProps
-      )
-    );
-  };
-
-  useEffect(() => {
-    const endInterval = getShiftedDate({
-      property: GraphIntervalProperty.end,
-      timePeriod: graphInterval,
-      timeShiftDirection: direction
-    });
-
-    const startInterval = getShiftedDate({
-      property: GraphIntervalProperty.start,
-      timePeriod: graphInterval,
-      timeShiftDirection: direction
-    });
-
-    if (!endInterval || !startInterval) {
-      return;
-    }
-    setStart(startInterval);
-    setEnd(endInterval);
-  }, [graphInterval.end, graphInterval.start, direction]);
-
-  return { end, start } as Interval;
-};
-
-export default useTimeShiftZones;

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

@@ -1,59 +0,0 @@
-import { useEffect } from 'react';
-
-import { equals } from 'ramda';
-
-import { Paper } from '@mui/material';
-
-import { Tooltip } from '../../models';
-
-import { GraphTooltip as GraphTooltipModel, width } from './models';
-
-interface Props extends GraphTooltipModel, Tooltip {
-  [x: string]: unknown;
-}
-
-const GraphTooltip = ({
-  hideTooltip,
-  tooltipLeft,
-  tooltipTop,
-  tooltipData,
-  renderComponent,
-  tooltipOpen
-}: Props): JSX.Element | null => {
-  const hideTooltipOnEscapePress = (event: globalThis.KeyboardEvent): void => {
-    if (equals(event.key, 'Escape')) {
-      hideTooltip();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', hideTooltipOnEscapePress, false);
-
-    return (): void => {
-      document.removeEventListener('keydown', hideTooltipOnEscapePress, false);
-    };
-  }, []);
-
-  if (!tooltipOpen) {
-    return null;
-  }
-
-  return (
-    <Paper
-      style={{
-        left: tooltipLeft,
-        position: 'absolute',
-        top: tooltipTop,
-        width
-      }}
-    >
-      {renderComponent?.({
-        data: tooltipData,
-        hideTooltip,
-        tooltipOpen
-      })}
-    </Paper>
-  );
-};
-
-export default GraphTooltip;