@centreon/ui 24.4.13 → 24.4.14

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

package/src/Graph/LineChart/Legend/InteractiveValue.tsx

@@ -1,22 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useLegendValueStyles } from './Legend.styles';
-
-interface Props {
-  value?: string | null;
-}
-
-const InteractiveValue = ({ value }: Props): JSX.Element | null => {
-  const { classes } = useLegendValueStyles({});
-  if (!value) {
-    return null;
-  }
-
-  return (
-    <Typography className={classes.text} variant="h6">
-      {value}
-    </Typography>
-  );
-};
-
-export default InteractiveValue;

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -1,117 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { margin } from '../common';
-
-interface MakeStylesProps {
-  limitLegendRows?: boolean;
-}
-
-export const legendWidth = 21;
-const legendItemHeight = 5.25;
-const legendItemHeightCompact = 1.75;
-
-export const useStyles = makeStyles<MakeStylesProps>()(
-  (theme, { limitLegendRows }) => ({
-    highlight: {
-      color: theme.typography.body1.color
-    },
-    item: {
-      minWidth: theme.spacing(legendWidth)
-    },
-    items: {
-      '&[data-mode="compact"]': {
-        gridAutoRows: theme.spacing(legendItemHeightCompact),
-        height: limitLegendRows
-          ? theme.spacing(legendItemHeightCompact * 2 + 1.5)
-          : 'unset'
-      },
-      columnGap: theme.spacing(3),
-      display: 'grid',
-      gridAutoRows: theme.spacing(legendItemHeight),
-      gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(legendWidth)})`,
-      maxHeight: limitLegendRows
-        ? theme.spacing(legendItemHeight * 2 + 1)
-        : 'unset',
-      overflowY: 'auto',
-      rowGap: theme.spacing(1),
-      width: '100%'
-    },
-    legend: {
-      marginLeft: margin.left,
-      marginRight: margin.right,
-      overflow: 'hidden'
-    },
-    minMaxAvgContainer: {
-      columnGap: theme.spacing(0.5),
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, min-content)',
-      whiteSpace: 'nowrap'
-    },
-    normal: {
-      color: theme.palette.text.primary
-    },
-    toggable: {
-      cursor: 'pointer'
-    }
-  })
-);
-
-interface StylesProps {
-  color?: string;
-}
-
-export const useLegendHeaderStyles = makeStyles<StylesProps>()(
-  (theme, { color }) => ({
-    container: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
-      width: '100%'
-    },
-    disabled: {
-      color: theme.palette.text.disabled
-    },
-    icon: {
-      backgroundColor: color,
-      borderRadius: theme.shape.borderRadius,
-      height: theme.spacing(1.5),
-      minWidth: theme.spacing(1.5),
-      width: theme.spacing(1.5)
-    },
-    legendName: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
-    },
-    markerAndLegendName: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5)
-    },
-    minMaxAvgContainer: {
-      columnGap: theme.spacing(0.5),
-      display: 'grid',
-      gridTemplateColumns: 'repeat(2, min-content)',
-      whiteSpace: 'nowrap'
-    },
-    text: {
-      fontWeight: theme.typography.fontWeightMedium,
-      lineHeight: 1
-    }
-  })
-);
-
-export const useLegendContentStyles = makeStyles()((theme) => ({
-  minMaxAvgValue: { fontWeight: theme.typography.fontWeightMedium },
-  text: {
-    lineHeight: 0.9
-  }
-}));
-
-export const useLegendValueStyles = makeStyles()({
-  text: {
-    lineHeight: 1.4
-  }
-});

package/src/Graph/LineChart/Legend/LegendContent.tsx

@@ -1,33 +0,0 @@
-import { useTranslation } from 'react-i18next';
-
-import { Typography } from '@mui/material';
-
-import { useLegendContentStyles } from './Legend.styles';
-
-interface Props {
-  data: string;
-  label: string;
-}
-
-const LegendContent = ({ data, label }: Props): JSX.Element => {
-  const { classes, cx } = useLegendContentStyles();
-
-  const { t } = useTranslation();
-
-  return (
-    <div className={classes.text} data-testid={label}>
-      <Typography className={classes.text} component="span" variant="caption">
-        {t(label)}:{' '}
-        <Typography
-          className={cx(classes.minMaxAvgValue, classes.text)}
-          component="span"
-          variant="caption"
-        >
-          {data}
-        </Typography>
-      </Typography>
-    </div>
-  );
-};
-
-export default LegendContent;