@centreon/ui 24.4.21 → 24.4.23

package/src/Graph/LineChart/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/LineChart/InteractiveComponents/Bar.tsx

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

@@ -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/LineChart/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 = 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

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

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

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

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

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

@@ -0,0 +1,9 @@
+export interface GraphTooltip {
+  hideTooltip: () => void;
+  tooltipData: Date;
+  tooltipLeft: number;
+  tooltipOpen: boolean;
+  tooltipTop: number;
+}
+
+export const width = 165;

package/src/Graph/LineChart/InteractiveComponents/Tooltip/useGraphTooltip.ts

@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+
+import { Event, Tooltip } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { useAtomValue } from 'jotai';
+
+import { getDate } from '../../helpers/index';
+import { TimeValue } from '../../../common/timeSeries/models';
+import { applyingZoomAtomAtom } from '../ZoomPreview/zoomPreviewAtoms';
+import { eventMouseUpAtom } from '../interactionWithGraphAtoms';
+
+import { GraphTooltip, width } from './models';
+
+interface Props {
+  graphWidth: number;
+  timeSeries: Array<TimeValue>;
+  tooltipWidth?: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+const useGraphTooltip = ({
+  graphWidth,
+  tooltipWidth = width,
+  timeSeries,
+  xScale
+}: Props): GraphTooltip => {
+  const {
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+    tooltipData
+  } = Tooltip.useTooltip();
+
+  const mouseUpEvent = useAtomValue(eventMouseUpAtom);
+  const isZoomApplied = useAtomValue(applyingZoomAtomAtom);
+
+  useEffect(() => {
+    if (!mouseUpEvent || isZoomApplied) {
+      return;
+    }
+
+    const { x, y } = Event.localPoint(mouseUpEvent) || {
+      x: 0,
+      y: 0
+    };
+
+    const displayLeft = graphWidth - x < tooltipWidth;
+
+    showTooltip({
+      tooltipData: getDate({ positionX: x, timeSeries, xScale }),
+      tooltipLeft: displayLeft ? x - tooltipWidth : x,
+      tooltipTop: y
+    });
+  }, [mouseUpEvent]);
+
+  return {
+    hideTooltip,
+    tooltipData,
+    tooltipLeft,
+    tooltipOpen,
+    tooltipTop
+  } as GraphTooltip;
+};
+
+export default useGraphTooltip;

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

@@ -0,0 +1,38 @@
+import { omit } from 'ramda';
+
+import { alpha, useTheme } from '@mui/system';
+
+import Bar from '../Bar';
+
+import { ZoomPreviewData } from './models';
+import useZoomPreview from './useZoomPreview';
+
+const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
+  const theme = useTheme();
+
+  const { graphHeight, xScale, graphWidth, getInterval, ...rest } = data;
+
+  const { zoomBarWidth, zoomBoundaries } = useZoomPreview({
+    getInterval,
+    graphWidth,
+    xScale
+  });
+
+  const restData = omit(['enable'], { ...rest });
+
+  return (
+    <g>
+      <Bar
+        fill={alpha(theme.palette.primary.main, 0.2)}
+        height={graphHeight}
+        stroke={alpha(theme.palette.primary.main, 0.5)}
+        width={zoomBarWidth}
+        x={zoomBoundaries?.start || 0}
+        y={0}
+        {...restData}
+      />
+    </g>
+  );
+};
+
+export default ZoomPreview;

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

@@ -0,0 +1,9 @@
+import { ScaleTime } from 'd3-scale';
+
+import { InteractedZone } from '../../models';
+
+export interface ZoomPreviewData extends InteractedZone {
+  graphHeight: number;
+  graphWidth: number;
+  xScale: ScaleTime<number, number>;
+}

package/src/Graph/LineChart/InteractiveComponents/ZoomPreview/useZoomPreview.ts

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+
+import { Event } from '@visx/visx';
+import { ScaleTime } from 'd3-scale';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { equals, gte, isNil, lt } from 'ramda';
+
+import { margin } from '../../common';
+import { Interval } from '../../models';
+import {
+  eventMouseDownAtom,
+  eventMouseUpAtom,
+  mousePositionAtom
+} from '../interactionWithGraphAtoms';
+
+import { applyingZoomAtomAtom } from './zoomPreviewAtoms';
+
+interface Boundaries {
+  end: number;
+  start: number;
+}
+interface ZoomPreview {
+  zoomBarWidth: number;
+  zoomBoundaries: Boundaries | null;
+}
+
+interface Props {
+  getInterval?: (args: Interval) => void;
+  graphWidth: number;
+  xScale: ScaleTime<number, number>;
+}
+
+const useZoomPreview = ({
+  xScale,
+  graphWidth,
+  getInterval
+}: Props): ZoomPreview => {
+  const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
+  const eventMouseDown = useAtomValue(eventMouseDownAtom);
+  const eventMouseUp = useAtomValue(eventMouseUpAtom);
+  const mousePosition = useAtomValue(mousePositionAtom);
+  const setApplyingZoom = useSetAtom(applyingZoomAtomAtom);
+
+  const mousePointDown = eventMouseDown
+    ? Event.localPoint(eventMouseDown)
+    : null;
+
+  const mouseDownPositionX = mousePointDown
+    ? mousePointDown.x - margin.left
+    : null;
+
+  const movingMousePositionX = mousePosition
+    ? mousePosition[0] - margin.left
+    : null;
+
+  const applyZoom = (): void => {
+    getInterval?.({
+      end: xScale?.invert(zoomBoundaries?.end || graphWidth),
+      start: xScale?.invert(zoomBoundaries?.start || 0)
+    });
+  };
+
+  useEffect(() => {
+    if (isNil(mouseDownPositionX) || isNil(movingMousePositionX)) {
+      return;
+    }
+
+    setZoomBoundaries({
+      end: gte(movingMousePositionX, mouseDownPositionX)
+        ? movingMousePositionX
+        : mouseDownPositionX,
+      start: lt(movingMousePositionX, mouseDownPositionX)
+        ? movingMousePositionX
+        : mouseDownPositionX
+    });
+  }, [movingMousePositionX, mouseDownPositionX]);
+
+  useEffect(() => {
+    if (isNil(eventMouseUp) || isNil(zoomBoundaries)) {
+      return;
+    }
+    if (equals(zoomBoundaries.start, zoomBoundaries.end)) {
+      return;
+    }
+    applyZoom();
+    setApplyingZoom(false);
+    setZoomBoundaries(null);
+  }, [eventMouseUp]);
+
+  useEffect(() => {
+    if (isNil(zoomBoundaries)) {
+      return;
+    }
+    if (equals(zoomBoundaries.start, zoomBoundaries.end)) {
+      return;
+    }
+    setApplyingZoom(true);
+  }, [zoomBoundaries]);
+
+  const zoomBarWidth = Math.abs(
+    (zoomBoundaries?.end || 0) - (zoomBoundaries?.start || 0)
+  );
+
+  return { zoomBarWidth, zoomBoundaries };
+};
+
+export default useZoomPreview;

package/src/Graph/LineChart/InteractiveComponents/ZoomPreview/zoomPreviewAtoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const applyingZoomAtomAtom = atom<boolean>(false);