@centreon/ui 24.4.21 → 24.4.22

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

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

@@ -0,0 +1,168 @@
+import { MutableRefObject } from 'react';
+
+import { Event } from '@visx/visx';
+import { ScaleTime } from 'd3-scale';
+import { useSetAtom } from 'jotai';
+import { isEmpty, isNil } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import {
+  AnnotationEvent,
+  GraphInterval,
+  InteractedZone,
+  InteractedZone as ZoomPreviewModel
+} from '../models';
+import { getTimeValue } from '../../common/timeSeries';
+import { TimeValue } from '../../common/timeSeries/models';
+
+import Annotations from './Annotations';
+import { TimelineEvent } from './Annotations/models';
+import Bar from './Bar';
+import TimeShiftZones from './TimeShiftZones';
+import ZoomPreview from './ZoomPreview';
+import {
+  MousePosition,
+  changeMousePositionAndTimeValueDerivedAtom,
+  eventMouseDownAtom,
+  eventMouseLeaveAtom,
+  eventMouseUpAtom
+} from './interactionWithGraphAtoms';
+
+const useStyles = makeStyles()(() => ({
+  overlay: {
+    cursor: 'crosshair'
+  }
+}));
+
+interface CommonData {
+  graphHeight: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+}
+
+interface TimeShiftZonesData extends InteractedZone {
+  graphInterval: GraphInterval;
+  loading: boolean;
+}
+
+interface Props {
+  annotationData?: AnnotationEvent;
+  commonData: CommonData;
+  timeShiftZonesData: TimeShiftZonesData;
+  zoomData: ZoomPreviewModel;
+}
+
+const InteractionWithGraph = ({
+  zoomData,
+  commonData,
+  annotationData,
+  timeShiftZonesData
+}: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const setEventMouseDown = useSetAtom(eventMouseDownAtom);
+  const setEventMouseUp = useSetAtom(eventMouseUpAtom);
+  const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
+
+  const changeMousePositionAndTimeValue = useSetAtom(
+    changeMousePositionAndTimeValueDerivedAtom
+  );
+
+  const { graphHeight, graphWidth, graphSvgRef, xScale, timeSeries } =
+    commonData;
+
+  const displayZoomPreview = zoomData?.enable ?? true;
+
+  const displayEventAnnotations =
+    !isNil(annotationData?.data) && !isEmpty(annotationData?.data);
+  const displayTimeShiftZones = timeShiftZonesData?.enable ?? true;
+
+  const mouseLeave = (event): void => {
+    setEventMouseLeave(event);
+    setEventMouseDown(null);
+    updateMousePosition(null);
+  };
+
+  const mouseUp = (event): void => {
+    setEventMouseUp(event);
+    setEventMouseDown(null);
+  };
+
+  const mouseMove = (event): void => {
+    const mousePoint = Event.localPoint(
+      graphSvgRef?.current as SVGSVGElement,
+      event
+    );
+    if (!mousePoint) {
+      return;
+    }
+    updateMousePosition([mousePoint.x, mousePoint.y]);
+  };
+
+  const mouseDown = (event): void => {
+    setEventMouseDown(event);
+  };
+
+  const updateMousePosition = (pointPosition: MousePosition): void => {
+    if (isNil(pointPosition)) {
+      changeMousePositionAndTimeValue({
+        position: null,
+        timeValue: null
+      });
+
+      return;
+    }
+    const timeValue = getTimeValue({
+      timeSeries,
+      x: pointPosition[0],
+      xScale
+    });
+
+    changeMousePositionAndTimeValue({ position: pointPosition, timeValue });
+  };
+
+  return (
+    <g>
+      {displayZoomPreview && (
+        <ZoomPreview
+          {...zoomData}
+          graphHeight={graphHeight}
+          graphWidth={graphWidth}
+          xScale={xScale}
+        />
+      )}
+      {displayEventAnnotations && (
+        <Annotations
+          data={annotationData?.data as Array<TimelineEvent>}
+          graphHeight={graphHeight}
+          graphSvgRef={graphSvgRef}
+          graphWidth={graphWidth}
+          xScale={xScale}
+        />
+      )}
+      {displayTimeShiftZones && (
+        <TimeShiftZones
+          graphHeight={graphHeight}
+          graphWidth={graphWidth}
+          {...timeShiftZonesData}
+        />
+      )}
+      <Bar
+        className={classes.overlay}
+        fill="transparent"
+        height={graphHeight}
+        width={graphWidth}
+        x={0}
+        y={0}
+        onMouseDown={mouseDown}
+        onMouseLeave={mouseLeave}
+        onMouseMove={mouseMove}
+        onMouseUp={mouseUp}
+      />
+    </g>
+  );
+};
+
+export default InteractionWithGraph;

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -0,0 +1,52 @@
+import { atom } from 'jotai';
+import { not, isNil } from 'ramda';
+
+import { TimeValue } from '../../common/timeSeries/models';
+
+export const eventMouseDownAtom = atom<null | MouseEvent>(null);
+export const eventMouseUpAtom = atom<null | MouseEvent>(null);
+export const eventMouseLeaveAtom = atom<null | MouseEvent>(null);
+
+export const timeValueAtom = atom<TimeValue | null>(null);
+export const mousePositionAtom = atom<MousePosition>(null);
+export const isListingGraphOpenAtom = atom(false);
+export type MousePosition = [number, number] | null;
+
+interface PositionTimeValue {
+  position: MousePosition;
+  timeValue: TimeValue | null;
+}
+
+interface NewTimeValueInViewportState {
+  isInViewport?: boolean;
+  newTimeValue: TimeValue | null;
+}
+export const changeTimeValueDerivedAtom = atom(
+  null,
+  (
+    _,
+    set,
+    { newTimeValue, isInViewport }: NewTimeValueInViewportState
+  ): void => {
+    if (not(isInViewport)) {
+      return;
+    }
+    set(timeValueAtom, newTimeValue);
+  }
+);
+
+export const changeMousePositionAndTimeValueDerivedAtom = atom(
+  null,
+  (_, set, { position, timeValue }: PositionTimeValue): void => {
+    if (isNil(position) || isNil(timeValue)) {
+      set(mousePositionAtom, null);
+      set(timeValueAtom, null);
+
+      return;
+    }
+
+    set(mousePositionAtom, position);
+
+    set(timeValueAtom, timeValue);
+  }
+);