@centreon/ui 24.4.19 → 24.4.21

package/src/Graph/LineChart/InteractiveComponents/Annotations/useAnnotation.ts

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

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

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

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

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