@centreon/ui 24.7.2 → 24.7.4

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

@@ -1,84 +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 / 2;
-
-  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 (
-    <>
-      <TimeShiftZone
-        direction={TimeShiftDirection.backward}
-        directionHovered={directionHovered}
-        onDirectionHover={setDirectionHovered}
-        {...commonData}
-      />
-      <TimeShiftZone
-        direction={TimeShiftDirection.forward}
-        directionHovered={directionHovered}
-        onDirectionHover={setDirectionHovered}
-        {...commonData}
-      />
-      {displayIcon && (
-        <TimeShiftIcon
-          Icon={Icon}
-          ariaLabel={ariaLabelIcon}
-          directionHovered={directionHovered}
-          xIcon={xIcon}
-          yIcon={yIcon}
-        />
-      )}
-    </>
-  );
-};
-
-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,73 +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;
-}
-
-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

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