@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

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

@@ -0,0 +1,94 @@
+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 '../../timeSeries';
+import { Line, TimeValue } from '../../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;

package/src/Graph/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -0,0 +1,107 @@
+import { useEffect } from 'react';
+
+import { Tooltip } from '@visx/visx';
+import { isNil } from 'ramda';
+
+import { useLocaleDateTimeFormat } from '@centreon/ui';
+
+import { margin, timeFormat } from '../../common/index';
+
+import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
+import useTickGraph from './useTickGraph';
+
+const useTooltipAnchorPoint = ({
+  timeSeries,
+  xScale,
+  graphHeight,
+  leftScale,
+  rightScale,
+  graphWidth,
+  lines,
+  baseAxis
+}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
+  const { format } = useLocaleDateTimeFormat();
+
+  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
+    useTickGraph({
+      baseAxis,
+      leftScale,
+      lines,
+      rightScale,
+      timeSeries,
+      xScale
+    });
+
+  const {
+    showTooltip: showTooltipAxisYLeft,
+    tooltipData: tooltipDataAxisYLeft,
+    tooltipLeft: tooltipLeftAxisYLeft,
+    tooltipTop: tooltipTopAxisYLeft
+  } = Tooltip.useTooltip();
+  const {
+    showTooltip: showTooltipAxisX,
+    tooltipData: tooltipDataAxisX,
+    tooltipLeft: tooltipLeftAxisX,
+    tooltipTop: tooltipTopAxisX
+  } = Tooltip.useTooltip();
+
+  const {
+    showTooltip: showTooltipAxisYRight,
+    tooltipData: tooltipDataAxisYRight,
+    tooltipLeft: tooltipLeftAxisYRight,
+    tooltipTop: tooltipTopAxisYRight
+  } = Tooltip.useTooltip();
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisBottom) {
+      return;
+    }
+
+    const dataAxisX = format({
+      date: tickAxisBottom,
+      formatString: timeFormat
+    });
+
+    showTooltipAxisX({
+      tooltipData: dataAxisX,
+      tooltipLeft: positionX + margin.left,
+      tooltipTop: graphHeight + margin.top
+    });
+  }, [positionX, positionY, tickAxisBottom]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisLeft) {
+      return;
+    }
+    showTooltipAxisYLeft({
+      tooltipData: tickAxisLeft,
+      tooltipLeft: margin.left,
+      tooltipTop: positionY + margin.top
+    });
+  }, [tickAxisLeft, positionX, positionY]);
+
+  useEffect(() => {
+    if (!positionX || !positionY || !tickAxisRight) {
+      return;
+    }
+    showTooltipAxisYRight({
+      tooltipData: tickAxisRight,
+      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
+      tooltipTop: positionY + margin.top
+    });
+  }, [positionX, positionY, tickAxisRight]);
+
+  return {
+    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
+    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
+    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
+    tooltipLeftAxisX,
+    tooltipLeftAxisYLeft,
+    tooltipLeftAxisYRight,
+    tooltipTopAxisX,
+    tooltipTopAxisYLeft,
+    tooltipTopAxisYRight
+  } as UseTooltipAnchorPointResult;
+};
+
+export default useTooltipAnchorPoint;

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

@@ -0,0 +1,114 @@
+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/InteractiveComponents/Annotations/Annotation/Line.tsx

@@ -0,0 +1,103 @@
+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/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -0,0 +1,81 @@
+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/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -0,0 +1,27 @@
+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/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -0,0 +1,61 @@
+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/InteractiveComponents/Annotations/Line/Acknowledgement.tsx

@@ -0,0 +1,27 @@
+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/InteractiveComponents/Annotations/Line/Comments.tsx

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