@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/Graph/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/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 '../../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/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/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/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/InteractiveComponents/ZoomPreview/zoomPreviewAtoms.ts

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

package/src/Graph/InteractiveComponents/index.tsx

@@ -0,0 +1,168 @@
+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 '../timeSeries';
+import { TimeValue } from '../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/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -0,0 +1,51 @@
+import { atom } from 'jotai';
+import { not, isNil } from 'ramda';
+
+import { TimeValue } from '../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/Legend/InteractiveValue.tsx

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

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

@@ -0,0 +1,71 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { margin } from '../common';
+
+interface MakeStylesProps {
+  limitLegendRows?: boolean;
+}
+
+export const useStyles = makeStyles<MakeStylesProps>()(
+  (theme, { limitLegendRows }) => ({
+    highlight: {
+      color: theme.typography.body1.color
+    },
+    item: {
+      display: 'grid',
+      gridTemplateColumns: 'min-content minmax(50px, 1fr)',
+      marginBottom: theme.spacing(1)
+    },
+    items: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
+      justifyContent: 'center',
+      marginLeft: theme.spacing(0.5),
+      maxHeight: limitLegendRows ? theme.spacing(19) : 'unset',
+      overflowY: 'auto',
+      width: '100%'
+    },
+    legend: {
+      marginLeft: margin.left,
+      marginRight: margin.right,
+      maxHeight: theme.spacing(24),
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    },
+    legendData: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    legendName: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'start',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    legendUnit: {
+      justifyContent: 'start',
+      marginLeft: 'auto',
+      marginRight: theme.spacing(0.5),
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    legendValue: {
+      fontWeight: theme.typography.body1.fontWeight
+    },
+    minMaxAvgContainer: {
+      columnGap: theme.spacing(0.5),
+      display: 'grid',
+      gridAutoRows: theme.spacing(2),
+      gridTemplateColumns: 'repeat(2, min-content)',
+      whiteSpace: 'nowrap'
+    },
+    minMaxAvgValue: { fontWeight: 600 },
+    normal: {
+      color: theme.palette.text.primary
+    },
+    toggable: {
+      cursor: 'pointer'
+    }
+  })
+);

package/src/Graph/Legend/LegendContent.tsx

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

package/src/Graph/Legend/LegendHeader.tsx

@@ -0,0 +1,45 @@
+import { includes, isEmpty, split } from 'ramda';
+
+import { Tooltip, Typography } from '@mui/material';
+
+import { Line } from '../timeSeries/models';
+
+import { useStyles } from './Legend.styles';
+
+interface Props {
+  line: Line;
+}
+
+const LegendHeader = ({ line }: Props): JSX.Element => {
+  const { classes } = useStyles({});
+  const { unit, name, legend } = line;
+
+  const legendName = legend || name;
+  const unitName = ` (${unit})`;
+  const metricName = includes('#', legendName)
+    ? split('#')(legendName)[1]
+    : legendName;
+
+  return (
+    <div className={classes.legendName}>
+      <Tooltip placement="top" title={legendName + unitName}>
+        <Typography
+          className={classes.legendName}
+          component="p"
+          variant="caption"
+        >
+          {metricName}
+        </Typography>
+      </Tooltip>
+      <Typography
+        className={classes.legendUnit}
+        component="p"
+        variant="caption"
+      >
+        {!isEmpty(line?.unit) && `(${line.unit})`}
+      </Typography>
+    </div>
+  );
+};
+
+export default LegendHeader;

package/src/Graph/Legend/Marker.tsx

@@ -0,0 +1,43 @@
+import { equals } from 'ramda';
+import { makeStyles } from 'tss-react/mui';
+
+export enum LegendMarkerVariant {
+  'dot',
+  'bar'
+}
+
+interface StylesProps {
+  color?: string;
+  variant: LegendMarkerVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()((theme, { color, variant }) => ({
+  disabled: {
+    color: theme.palette.text.disabled
+  },
+  icon: {
+    backgroundColor: color,
+    borderRadius: equals(LegendMarkerVariant.dot, variant) ? '50%' : 0,
+    height: equals(LegendMarkerVariant.dot, variant) ? 9 : '100%',
+    marginRight: theme.spacing(0.5),
+    width: 9
+  }
+}));
+
+interface Props {
+  color: string;
+  disabled?: boolean;
+  variant?: LegendMarkerVariant;
+}
+
+const LegendMarker = ({
+  disabled,
+  color,
+  variant = LegendMarkerVariant.bar
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ color, variant });
+
+  return <div className={cx(classes.icon, { [classes.disabled]: disabled })} />;
+};
+
+export default LegendMarker;