@centreon/ui 24.5.12 → 24.5.13

package/src/Graph/LineChart/InteractiveComponents/TimeShiftZones/useTimeShiftZones.ts

@@ -0,0 +1,73 @@
+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;
+}
+
+export 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;
+};

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,283 @@
+import { MutableRefObject } from 'react';
+
+import { Event } from '@visx/visx';
+import { ScaleTime } from 'd3-scale';
+import { useSetAtom } from 'jotai';
+import {
+  all,
+  equals,
+  find,
+  isEmpty,
+  isNil,
+  keys,
+  map,
+  pick,
+  pipe,
+  pluck,
+  reduce,
+  toPairs,
+  values
+} from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+import {
+  AnnotationEvent,
+  GraphInterval,
+  InteractedZone,
+  InteractedZone as ZoomPreviewModel
+} from '../models';
+import {
+  formatMetricName,
+  getLineForMetric,
+  getLinesForMetrics,
+  getTimeValue,
+  getUnits,
+  getYScale
+} from '../../common/timeSeries';
+import { Line, TimeValue } from '../../common/timeSeries/models';
+import { margin } from '../common';
+
+import Annotations from './Annotations';
+import { TimelineEvent } from './Annotations/models';
+import Bar from './Bar';
+import TimeShiftZones from './TimeShiftZones';
+import ZoomPreview from './ZoomPreview';
+import {
+  MousePosition,
+  changeMousePositionDerivedAtom,
+  eventMouseDownAtom,
+  eventMouseLeaveAtom,
+  eventMouseUpAtom,
+  graphTooltipDataAtom
+} from './interactionWithGraphAtoms';
+
+const useStyles = makeStyles()(() => ({
+  overlay: {
+    cursor: 'crosshair'
+  }
+}));
+
+interface CommonData {
+  graphHeight: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+  leftScale;
+  lines;
+  rightScale;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number>;
+}
+
+interface TimeShiftZonesData extends InteractedZone {
+  graphInterval: GraphInterval;
+}
+
+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 changeMousePosition = useSetAtom(changeMousePositionDerivedAtom);
+  const setGraphTooltipData = useSetAtom(graphTooltipDataAtom);
+
+  const {
+    graphHeight,
+    graphWidth,
+    graphSvgRef,
+    xScale,
+    timeSeries,
+    leftScale,
+    rightScale,
+    lines
+  } = 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);
+    setGraphTooltipData(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)) {
+      changeMousePosition({
+        position: null
+      });
+      setGraphTooltipData(null);
+
+      return;
+    }
+    const timeValue = getTimeValue({
+      timeSeries,
+      x: pointPosition[0],
+      xScale
+    });
+
+    if (isNil(timeValue)) {
+      changeMousePosition({
+        position: null
+      });
+      setGraphTooltipData(null);
+
+      return;
+    }
+
+    const date = timeValue.timeTick;
+    const displayedMetricIds = pluck('metric_id', lines);
+    const filteredMetricsValue = pick(displayedMetricIds, timeValue);
+    const [, secondUnit, thirdUnit] = getUnits(lines as Array<Line>);
+    const areAllValuesEmpty = pipe(values, all(isNil))(filteredMetricsValue);
+
+    const linesData = getLinesForMetrics({
+      lines,
+      metricIds: keys(filteredMetricsValue).map(Number)
+    });
+
+    if (areAllValuesEmpty) {
+      changeMousePosition({ position: pointPosition });
+      setGraphTooltipData(null);
+
+      return;
+    }
+
+    const distanceWithPointPositionPerMetric = reduce(
+      (acc, [metricId, value]) => {
+        if (isNil(value)) {
+          return acc;
+        }
+
+        const lineData = getLineForMetric({
+          lines,
+          metric_id: Number(metricId)
+        });
+        const yScale = getYScale({
+          hasMoreThanTwoUnits: Boolean(thirdUnit),
+          invert: (lineData as Line).invert,
+          leftScale,
+          rightScale,
+          secondUnit,
+          unit: (lineData as Line).unit
+        });
+
+        const y0 = yScale(value);
+
+        const diffBetweenY0AndPointPosition = Math.abs(
+          y0 + margin.top - pointPosition[1]
+        );
+
+        return {
+          ...acc,
+          [metricId]: diffBetweenY0AndPointPosition
+        };
+      },
+      {},
+      Object.entries(filteredMetricsValue)
+    );
+
+    const nearestY0 = Math.min(...values(distanceWithPointPositionPerMetric));
+
+    const nearestLine = pipe(
+      toPairs,
+      find(([, y0]) => equals(y0, nearestY0)) as () => [string, number]
+    )(distanceWithPointPositionPerMetric);
+
+    changeMousePosition({ position: pointPosition });
+    setGraphTooltipData({
+      date,
+      highlightedMetricId: Number(nearestLine[0]),
+      metrics: map(
+        ({ metric_id, color, unit, legend, name }) => ({
+          color,
+          id: metric_id,
+          name: formatMetricName({ legend, name }),
+          unit,
+          value: timeValue?.[metric_id]
+        }),
+        linesData
+      ).filter(({ value }) => !isNil(value))
+    });
+  };
+
+  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}
+        data-testid="graph-interaction-zone"
+        fill="transparent"
+        height={graphHeight - margin.bottom}
+        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,32 @@
+import { atom } from 'jotai';
+import { isNil } from 'ramda';
+
+import { TimeValue } from '../../common/timeSeries/models';
+import { GraphTooltipData } from '../models';
+
+export const eventMouseDownAtom = atom<null | MouseEvent>(null);
+export const eventMouseUpAtom = atom<null | MouseEvent>(null);
+export const eventMouseLeaveAtom = atom<null | MouseEvent>(null);
+export const graphTooltipDataAtom = atom<GraphTooltipData | null>(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 Position {
+  position: MousePosition;
+}
+
+export const changeMousePositionDerivedAtom = atom(
+  null,
+  (_, set, { position }: Position): void => {
+    if (isNil(position)) {
+      set(mousePositionAtom, null);
+
+      return;
+    }
+
+    set(mousePositionAtom, position);
+  }
+);