@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,183 @@
+import { ScaleTime } from 'd3-scale';
+import { atom } from 'jotai';
+import {
+  Pred,
+  T,
+  __,
+  always,
+  both,
+  cond,
+  dec,
+  equals,
+  find,
+  gte,
+  inc,
+  isNil,
+  last,
+  lte,
+  not,
+  or,
+  pipe
+} 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/Chart/InteractiveComponents/Annotations/index.tsx

@@ -0,0 +1,49 @@
+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/Chart/InteractiveComponents/Annotations/models.ts

@@ -0,0 +1,25 @@
+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/Chart/InteractiveComponents/Annotations/useAnnotation.ts

@@ -0,0 +1,56 @@
+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/Chart/InteractiveComponents/Bar.tsx

@@ -0,0 +1,21 @@
+import { AddSVGProps } from '@visx/shape/lib/types';
+import { Shape } from '@visx/visx';
+
+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/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltip.tsx

@@ -0,0 +1,61 @@
+import { equals } from 'ramda';
+
+import { Typography } from '@mui/material';
+
+import { Tooltip as MuiTooltip } from '../../../../components/Tooltip';
+import { useTooltipStyles } from '../../../common/useTooltipStyles';
+import { ThresholdTooltip, Tooltip } from '../../models';
+
+import GraphValueTooltipContent from './GraphValueTooltipContent';
+
+interface Props {
+  baseAxis: number;
+  children: JSX.Element;
+  thresholdTooltip: ThresholdTooltip | null;
+  tooltip?: Tooltip;
+}
+
+const GraphValueTooltip = ({
+  children,
+  tooltip,
+  baseAxis,
+  thresholdTooltip
+}: Props): JSX.Element => {
+  const { classes, cx } = useTooltipStyles();
+
+  if (thresholdTooltip) {
+    return (
+      <MuiTooltip
+        classes={{
+          tooltip: classes.tooltip
+        }}
+        placement="top-start"
+        title={<Typography>{thresholdTooltip?.thresholdLabel}</Typography>}
+      >
+        {children}
+      </MuiTooltip>
+    );
+  }
+
+  return (
+    <MuiTooltip
+      classes={{
+        tooltip: cx(classes.tooltip, classes.tooltipDisablePadding)
+      }}
+      placement="top-start"
+      title={
+        equals('hidden', tooltip?.mode) ? null : (
+          <GraphValueTooltipContent
+            base={baseAxis}
+            isSingleMode={equals('single', tooltip?.mode)}
+            sortOrder={tooltip?.sortOrder}
+          />
+        )
+      }
+    >
+      {children}
+    </MuiTooltip>
+  );
+};
+
+export default GraphValueTooltip;

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx

@@ -0,0 +1,74 @@
+import { useAtomValue } from 'jotai';
+import { equals, isNil } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import { formatMetricValueWithUnit } from '../../../common/timeSeries';
+import { Tooltip } from '../../models';
+import { mousePositionAtom } from '../interactionWithGraphAtoms';
+
+import { useGraphValueTooltip } from './useGraphValueTooltip';
+import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
+
+interface Props extends Pick<Tooltip, 'sortOrder'> {
+  base: number;
+  isSingleMode: boolean;
+}
+
+const GraphValueTooltipContent = ({
+  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 GraphValueTooltipContent;

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

@@ -0,0 +1,61 @@
+import { useAtomValue } from 'jotai';
+import {
+  T,
+  always,
+  cond,
+  equals,
+  filter,
+  isNil,
+  prop,
+  reverse,
+  sortBy
+} from 'ramda';
+
+import { useLocaleDateTimeFormat } from '../../../../utils';
+import { GraphTooltipData, Tooltip } from '../../models';
+import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
+
+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/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltipStyles.ts

@@ -0,0 +1,31 @@
+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/Chart/InteractiveComponents/TimeShiftZones/TimeShiftIcon.tsx

@@ -0,0 +1,62 @@
+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/Chart/InteractiveComponents/TimeShiftZones/TimeShiftZone.tsx

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