@centreon/ui 24.4.19 → 24.4.21

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/Area.tsx

@@ -1,114 +0,0 @@
-import { Shape } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
-import { max, pick, prop } from 'ramda';
-import { useAtom, useAtomValue } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
-
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
-
-import { labelFrom, labelTo } from '../../../translatedLabels';
-import {
-  annotationHoveredAtom,
-  getFillColorDerivedAtom,
-  getIconColorDerivedAtom
-} from '../annotationsAtoms';
-
-import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
-
-type Props = {
-  Icon: (props) => JSX.Element | null;
-  ariaLabel: string;
-  color: string;
-  endDate: string;
-  graphHeight: number;
-  startDate: string;
-  xScale: ScaleTime<number, number>;
-} & Omit<AnnotationProps, 'marker' | 'xIcon' | 'header' | 'icon'>;
-
-const useStyles = makeStyles()((theme) => ({
-  icon: {
-    transition: theme.transitions.create('color', {
-      duration: theme.transitions.duration.shortest
-    })
-  }
-}));
-
-const AreaAnnotation = ({
-  Icon,
-  ariaLabel,
-  color,
-  graphHeight,
-  xScale,
-  startDate,
-  endDate,
-  ...props
-}: Props): JSX.Element => {
-  const { toDateTime } = useLocaleDateTimeFormat();
-
-  const { classes } = useStyles();
-
-  const [annotationHovered, setAnnotationHovered] = useAtom(
-    annotationHoveredAtom
-  );
-  const getFillColor = useAtomValue(getFillColorDerivedAtom);
-  const getIconColor = useAtomValue(getIconColorDerivedAtom);
-
-  const xIconMargin = -iconSize / 2;
-
-  const xStart = max(xScale(new Date(startDate)), 0);
-  const xEnd = endDate ? xScale(new Date(endDate)) : xScale.range()[1];
-
-  const annotation = pick(['event', 'annotationHoveredId'], props);
-
-  const area = (
-    <Shape.Bar
-      fill={getFillColor({ annotation, color })}
-      height={graphHeight + iconSize / 2}
-      width={xEnd - xStart}
-      x={xStart}
-      y={yMargin + iconSize + 2}
-      onMouseEnter={(): void =>
-        setAnnotationHovered(() => ({
-          annotation,
-          annotationHoveredId: prop('annotationHoveredId', props)
-        }))
-      }
-      onMouseLeave={(): void => setAnnotationHovered(() => undefined)}
-    />
-  );
-
-  const from = `${labelFrom} ${toDateTime(startDate)}`;
-  const to = endDate ? ` ${labelTo} ${toDateTime(endDate)}` : '';
-
-  const header = `${from}${to}`;
-
-  const icon = (
-    <Icon
-      aria-label={ariaLabel}
-      className={classes.icon}
-      height={iconSize}
-      style={{
-        color: getIconColor({
-          annotation,
-          color
-        })
-      }}
-      width={iconSize}
-    />
-  );
-
-  return useMemoComponent({
-    Component: (
-      <Annotation
-        header={header}
-        icon={icon}
-        marker={area}
-        xIcon={xStart + (xEnd - xStart) / 2 + xIconMargin}
-        {...props}
-      />
-    ),
-    memoProps: [annotationHovered, xStart, xEnd]
-  });
-};
-
-export default AreaAnnotation;

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

@@ -1,103 +0,0 @@
-import { Shape } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
-import { pick } from 'ramda';
-import { useAtomValue } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
-
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
-
-import {
-  annotationHoveredAtom,
-  getIconColorDerivedAtom,
-  getStrokeOpacityDerivedAtom,
-  getStrokeWidthDerivedAtom
-} from '../annotationsAtoms';
-
-import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
-
-type Props = {
-  Icon: (props) => JSX.Element | null;
-  ariaLabel: string;
-  color: string;
-  date: string;
-  graphHeight: number;
-  xScale: ScaleTime<number, number>;
-} & Omit<
-  AnnotationProps,
-  'marker' | 'xIcon' | 'header' | 'icon' | 'setAnnotationHovered' | 'resourceId'
->;
-
-const useStyles = makeStyles()((theme) => ({
-  icon: {
-    transition: theme.transitions.create('color', {
-      duration: theme.transitions.duration.shortest
-    })
-  }
-}));
-
-const LineAnnotation = ({
-  color,
-  graphHeight,
-  xScale,
-  date,
-  Icon,
-  ariaLabel,
-  ...props
-}: Props): JSX.Element => {
-  const { toDateTime } = useLocaleDateTimeFormat();
-
-  const { classes } = useStyles();
-
-  const annotationHovered = useAtomValue(annotationHoveredAtom);
-  const getStrokeWidth = useAtomValue(getStrokeWidthDerivedAtom);
-  const getStrokeOpacity = useAtomValue(getStrokeOpacityDerivedAtom);
-  const getIconColor = useAtomValue(getIconColorDerivedAtom);
-
-  const xIconMargin = -iconSize / 2;
-
-  const xIcon = xScale(new Date(date));
-
-  const header = toDateTime(date);
-
-  const annotation = pick(['event', 'annotationHoveredId'], props);
-
-  const line = (
-    <Shape.Line
-      from={{ x: xIcon, y: yMargin + iconSize + 2 }}
-      stroke={color}
-      strokeOpacity={getStrokeOpacity(annotation)}
-      strokeWidth={getStrokeWidth(annotation)}
-      to={{ x: xIcon, y: graphHeight }}
-    />
-  );
-
-  const icon = (
-    <Icon
-      aria-label={ariaLabel}
-      className={classes.icon}
-      height={iconSize}
-      style={{
-        color: getIconColor({
-          annotation,
-          color
-        })
-      }}
-      width={iconSize}
-    />
-  );
-
-  return useMemoComponent({
-    Component: (
-      <Annotation
-        header={header}
-        icon={icon}
-        marker={line}
-        xIcon={xIcon + xIconMargin}
-        {...props}
-      />
-    ),
-    memoProps: [annotationHovered, xIcon]
-  });
-};
-
-export default LineAnnotation;

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

@@ -1,81 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useSetAtom } from 'jotai';
-import { makeStyles } from 'tss-react/mui';
-
-import { Tooltip, Paper, Typography } from '@mui/material';
-
-import { truncate } from '../../../helpers';
-import { labelBy } from '../../../translatedLabels';
-import { TimelineEvent } from '../models';
-import { annotationHoveredAtom } from '../annotationsAtoms';
-
-const yMargin = -32;
-const iconSize = 20;
-
-const useStyles = makeStyles()((theme) => ({
-  tooltip: {
-    backgroundColor: 'transparent'
-  },
-  tooltipContent: {
-    padding: theme.spacing(1)
-  }
-}));
-
-export interface Props {
-  annotationHoveredId: number;
-  event: TimelineEvent;
-  header: string;
-  icon: JSX.Element;
-  marker: JSX.Element;
-  xIcon: number;
-}
-
-const Annotation = ({
-  icon,
-  header,
-  event,
-  xIcon,
-  marker,
-  annotationHoveredId
-}: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
-
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
-    event.contact?.name
-  })`;
-
-  return (
-    <g>
-      <Tooltip
-        classes={{ tooltip: classes.tooltip }}
-        title={
-          <Paper className={classes.tooltipContent}>
-            <Typography variant="body2">{header}</Typography>
-            <Typography variant="caption">{content}</Typography>
-          </Paper>
-        }
-      >
-        <svg
-          height={iconSize}
-          width={iconSize}
-          x={xIcon}
-          y={yMargin}
-          onMouseEnter={(): void =>
-            setAnnotationHovered(() => ({ annotationHoveredId, event }))
-          }
-          onMouseLeave={(): void => setAnnotationHovered(() => undefined)}
-        >
-          <rect fill="transparent" height={iconSize} width={iconSize} />
-          {icon}
-        </svg>
-      </Tooltip>
-      {marker}
-    </g>
-  );
-};
-
-export default Annotation;
-export { yMargin, iconSize };

package/src/Graph/LineChart/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -1,27 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { useTheme } from '@mui/material';
-
-import IconDowntime from '../../../Icons/Downtime';
-import { labelDowntime } from '../../../translatedLabels';
-import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
-
-const DowntimeAnnotations = (props: Args): JSX.Element => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-
-  const color = theme.palette.action.inDowntime;
-
-  return (
-    <EventAnnotations
-      Icon={IconDowntime}
-      ariaLabel={t(labelDowntime)}
-      color={color}
-      type="downtime"
-      {...props}
-    />
-  );
-};
-
-export default DowntimeAnnotations;

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

@@ -1,61 +0,0 @@
-import { filter, propEq, isNil } from 'ramda';
-import { ScaleTime } from 'd3-scale';
-
-import { TimelineEvent } from './models';
-import LineAnnotation from './Annotation/Line';
-import AreaAnnotation from './Annotation/Area';
-
-interface Props {
-  Icon: (props) => JSX.Element | null;
-  annotationHoveredId: number;
-  ariaLabel: string;
-  color: string;
-  data: Array<TimelineEvent>;
-  graphHeight: number;
-  type: string;
-  xScale: ScaleTime<number, number>;
-}
-
-const EventAnnotations = ({
-  type,
-  xScale,
-  data,
-  graphHeight,
-  Icon,
-  ariaLabel,
-  color,
-  annotationHoveredId
-}: Props): JSX.Element => {
-  const events = filter(propEq('type', type), data);
-
-  return (
-    <>
-      {events.map((event) => {
-        const props = {
-          Icon,
-          annotationHoveredId,
-          ariaLabel,
-          color,
-          event,
-          graphHeight,
-          xScale
-        };
-
-        if (isNil(event.startDate) && isNil(event.endDate)) {
-          return <LineAnnotation date={event.date} key={event.id} {...props} />;
-        }
-
-        return (
-          <AreaAnnotation
-            endDate={event.endDate as string}
-            key={event.id}
-            startDate={event.startDate as string}
-            {...props}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-export default EventAnnotations;

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