@centreon/ui 23.10.108 → 23.10.109

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-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);
-  }
-);