@centreon/ui 23.10.17 → 23.10.18-MON-17793-create-graph-component-centreon-ui.0

package/src/Graph/InteractionWithGraph/AnchorPoint/StackedAnchorPoint.tsx

@@ -0,0 +1,97 @@
+import { memo } from 'react';
+
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+import { equals, isNil, map, not, pipe } from 'ramda';
+
+import { bisectDate } from '../../timeSeries';
+
+import { StackValue } from './models';
+
+import AnchorPoint from '.';
+
+interface Props {
+  areaColor: string;
+  displayTimeValues: boolean;
+  graphHeight: number;
+  graphWidth: number;
+  lineColor: string;
+  positionX?: number;
+  positionY?: number;
+  stackValues: Array<StackValue>;
+  timeTick?: Date;
+  transparency: number;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+const key = 'data';
+
+const getStackedDates = (stackValues: Array<StackValue>): Array<Date> => {
+  const toTimeTick = (stackValue: StackValue): string => {
+    return key in stackValue ? stackValue[key].timeTick : '';
+  };
+  const toDate = (tick: string): Date => new Date(tick);
+
+  return pipe(map(toTimeTick), map(toDate))(stackValues);
+};
+
+const getYAnchorPoint = ({
+  timeTick,
+  stackValues,
+  yScale
+}: Pick<Props, 'timeTick' | 'stackValues' | 'yScale'>): number => {
+  const index = bisectDate(getStackedDates(stackValues), timeTick);
+  const timeValue = stackValues[index];
+
+  return yScale(timeValue[1] as number);
+};
+
+const StackedAnchorPoint = ({
+  xScale,
+  yScale,
+  stackValues,
+  timeTick,
+  areaColor,
+  transparency,
+  lineColor,
+  displayTimeValues,
+  ...rest
+}: Props): JSX.Element | null => {
+  if (isNil(timeTick) || not(displayTimeValues)) {
+    return null;
+  }
+  if (isNil(timeTick)) {
+    return null;
+  }
+  const xAnchorPoint = xScale(timeTick);
+
+  const yAnchorPoint = getYAnchorPoint({
+    stackValues,
+    timeTick,
+    yScale
+  });
+
+  if (isNil(yAnchorPoint)) {
+    return null;
+  }
+
+  return (
+    <AnchorPoint
+      areaColor={areaColor}
+      lineColor={lineColor}
+      transparency={transparency}
+      x={xAnchorPoint}
+      y={yAnchorPoint}
+      {...rest}
+    />
+  );
+};
+
+export default memo(
+  StackedAnchorPoint,
+  (prevProps, nextProps) =>
+    equals(prevProps.timeTick, nextProps.timeTick) &&
+    equals(prevProps.stackValues, nextProps.stackValues) &&
+    equals(prevProps.positionX, nextProps.positionX) &&
+    equals(prevProps.positionY, nextProps.positionY)
+);

package/src/Graph/InteractionWithGraph/AnchorPoint/index.tsx

@@ -0,0 +1,56 @@
+import { Shape } from '@visx/visx';
+
+import { grey } from '@mui/material/colors';
+
+interface Props {
+  areaColor: string;
+  graphHeight: number;
+  graphWidth: number;
+  lineColor: string;
+  positionX?: number;
+  positionY?: number;
+  transparency: number;
+  x: number;
+  y: number;
+}
+
+const Point = ({
+  areaColor,
+  lineColor,
+  transparency,
+  x,
+  y,
+  ...rest
+}: Props): JSX.Element => {
+  const { positionX, positionY, graphHeight, graphWidth } = rest;
+
+  return (
+    <g>
+      <circle
+        cx={x}
+        cy={y}
+        fill={areaColor}
+        fillOpacity={(1 - transparency * 0.01).toString()}
+        r={3}
+        stroke={lineColor}
+      />
+
+      <Shape.Line
+        from={{ x: positionX, y: 0 }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeWidth={1}
+        to={{ x: positionX, y: graphHeight }}
+      />
+      <Shape.Line
+        from={{ x: 0, y: positionY }}
+        pointerEvents="none"
+        stroke={grey[400]}
+        strokeWidth={1}
+        to={{ x: graphWidth, y: positionY }}
+      />
+    </g>
+  );
+};
+
+export default Point;

package/src/Graph/InteractionWithGraph/AnchorPoint/models.ts

@@ -0,0 +1,25 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+import { TimeValue } from '../../timeSeries/models';
+
+interface AnchorPoint {
+  areaColor: string;
+  lineColor: string;
+  transparency: number;
+  xScale: ScaleTime<number, number>;
+  yScale: ScaleLinear<number, number>;
+}
+
+export interface RegularLinesAnchorPoint extends AnchorPoint {
+  metric: string;
+  timeSeries: Array<TimeValue>;
+}
+
+export interface StackedAnchorPoint extends AnchorPoint {
+  stack;
+}
+
+export interface StackData {
+  data: TimeValue;
+}
+export type StackValue = [number, number, StackData];

package/src/Graph/InteractionWithGraph/AnchorPoint/useAnchorPoint.ts

@@ -0,0 +1,109 @@
+import { MutableRefObject, useEffect, useState } from 'react';
+
+import { Event } from '@visx/visx';
+import { ScaleLinear } from 'd3-scale';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { equals, isEmpty, isNil, not } from 'ramda';
+
+import { margin } from '../../common';
+import { getMetrics, getTimeValue } from '../../timeSeries';
+import { TimeValue } from '../../timeSeries/models';
+import {
+  MousePosition,
+  changeMousePositionAndTimeValueDerivedAtom,
+  mousePositionAtom,
+  timeValueAtom
+} from '../mouseTimeValueAtoms';
+import {
+  eventMouseDownAtom,
+  eventMouseMovingAtom
+} from '../interactionWithGraphAtoms';
+
+interface AnchorPointResult {
+  positionX?: number;
+  positionY?: number;
+  timeTick?: Date;
+}
+
+interface Props {
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleLinear<number, number>;
+}
+
+const useAnchorPoint = ({
+  graphSvgRef,
+  timeSeries,
+  xScale
+}: Props): AnchorPointResult => {
+  const [position, setPosition] = useState<null | MousePosition>(null);
+
+  const eventMouseMoving = useAtomValue(eventMouseMovingAtom);
+  const eventMouseDown = useAtomValue(eventMouseDownAtom);
+
+  const mousePosition = useAtomValue(mousePositionAtom);
+  const timeValueData = useAtomValue(timeValueAtom);
+
+  const changeMousePositionAndTimeValue = useSetAtom(
+    changeMousePositionAndTimeValueDerivedAtom
+  );
+
+  const metrics = getMetrics(timeValueData as TimeValue);
+
+  const containsMetrics = not(isNil(metrics)) && not(isEmpty(metrics));
+
+  const mousePositionTimeTick = position
+    ? getTimeValue({ timeSeries, x: position[0], xScale }).timeTick
+    : 0;
+  const timeTick = containsMetrics
+    ? new Date(mousePositionTimeTick)
+    : undefined;
+
+  const positionX = position ? position[0] - margin.left : undefined;
+  const positionY = position ? position[1] - margin.top : undefined;
+
+  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 });
+  };
+
+  useEffect(() => {
+    if (eventMouseDown) {
+      return;
+    }
+    const mousePoint = eventMouseMoving
+      ? Event.localPoint(
+          graphSvgRef?.current as SVGSVGElement,
+          eventMouseMoving
+        )
+      : null;
+    setPosition(mousePoint ? [mousePoint.x, mousePoint.y] : null);
+  }, [eventMouseDown, eventMouseMoving]);
+
+  useEffect(() => {
+    if (equals(position, mousePosition) && position) {
+      return;
+    }
+    updateMousePosition(position);
+  }, [position]);
+
+  return {
+    positionX,
+    positionY,
+    timeTick
+  };
+};
+export default useAnchorPoint;

package/src/Graph/InteractionWithGraph/Bar.tsx

@@ -0,0 +1,21 @@
+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/InteractionWithGraph/ZoomPreview/index.tsx

@@ -0,0 +1,38 @@
+import { omit } from 'ramda';
+
+import { alpha, useTheme } from '@mui/system';
+
+import Bar from '../Bar';
+
+import useZoomPreview from './useZoomPreview';
+import { ZoomPreviewData } from './models';
+
+const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
+  const theme = useTheme();
+
+  const { graphHeight, xScale, graphWidth, graphSvgRef, ...rest } = data;
+
+  const { zoomBarWidth, zoomBoundaries } = useZoomPreview({
+    graphSvgRef,
+    graphWidth,
+    xScale
+  });
+
+  const restData = omit(['display'], { ...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/InteractionWithGraph/ZoomPreview/models.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject } from 'react';
+
+import { ScaleTime } from 'd3-scale';
+
+import { ZoomPreview } from '../../models';
+
+export interface ZoomBoundaries {
+  end: string;
+  start: string;
+}
+
+export interface ZoomPreviewData extends ZoomPreview {
+  graphHeight: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+  xScale: ScaleTime<number, number>;
+}

package/src/Graph/InteractionWithGraph/ZoomPreview/useZoomPreview.ts

@@ -0,0 +1,101 @@
+import { MutableRefObject, 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 {
+  eventMouseDownAtom,
+  eventMouseMovingAtom,
+  eventMouseUpAtom
+} from '../interactionWithGraphAtoms';
+
+import { zoomParametersAtom } from './zoomPreviewAtoms';
+
+interface Boundaries {
+  end: number;
+  start: number;
+}
+interface ZoomPreview {
+  zoomBarWidth: number;
+  zoomBoundaries: Boundaries | null;
+}
+
+interface Props {
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+  xScale: ScaleTime<number, number>;
+}
+
+const useZoomPreview = ({
+  graphSvgRef,
+  xScale,
+  graphWidth
+}: Props): ZoomPreview => {
+  const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
+  const eventMouseMoving = useAtomValue(eventMouseMovingAtom);
+  const eventMouseDown = useAtomValue(eventMouseDownAtom);
+  const eventMouseUp = useAtomValue(eventMouseUpAtom);
+
+  const setZoomParameters = useSetAtom(zoomParametersAtom);
+
+  const mousePointDown = eventMouseDown
+    ? Event.localPoint(eventMouseDown)
+    : null;
+
+  const mouseDownPositionX = mousePointDown
+    ? mousePointDown.x - margin.left
+    : null;
+
+  const mousePositionMoving = eventMouseMoving
+    ? Event.localPoint(graphSvgRef.current as SVGSVGElement, eventMouseMoving)
+    : null;
+
+  const movingMousePositionX = mousePositionMoving
+    ? mousePositionMoving.x - margin.left
+    : null;
+
+  const applyZoom = (): void => {
+    if (equals(zoomBoundaries?.start, zoomBoundaries?.end)) {
+      return;
+    }
+
+    setZoomParameters({
+      end: xScale?.invert(zoomBoundaries?.end || graphWidth)?.toISOString(),
+      start: xScale?.invert(zoomBoundaries?.start || 0)?.toISOString()
+    });
+  };
+
+  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;
+    }
+    applyZoom();
+    setZoomBoundaries(null);
+  }, [eventMouseUp]);
+
+  const zoomBarWidth = Math.abs(
+    (zoomBoundaries?.end || 0) - (zoomBoundaries?.start || 0)
+  );
+
+  return { zoomBarWidth, zoomBoundaries };
+};
+
+export default useZoomPreview;

package/src/Graph/InteractionWithGraph/ZoomPreview/zoomPreviewAtoms.ts

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+
+import { ZoomBoundaries } from './models';
+
+export const zoomParametersAtom = atom<ZoomBoundaries | null>(null);

package/src/Graph/InteractionWithGraph/index.tsx

@@ -0,0 +1,93 @@
+import { MutableRefObject } from 'react';
+
+import { useSetAtom } from 'jotai';
+import { makeStyles } from 'tss-react/mui';
+import { ScaleTime } from 'd3-scale';
+
+import { ZoomPreview as ZoomPreviewModel } from '../models';
+
+import Bar from './Bar';
+import ZoomPreview from './ZoomPreview';
+import {
+  eventMouseDownAtom,
+  eventMouseMovingAtom,
+  eventMouseUpAtom
+} from './interactionWithGraphAtoms';
+
+const useStyles = makeStyles()(() => ({
+  overlay: {
+    cursor: 'crosshair'
+  }
+}));
+
+interface CommonData {
+  graphHeight: number;
+  graphSvgRef: MutableRefObject<SVGSVGElement | null>;
+  graphWidth: number;
+}
+
+interface ZoomData extends ZoomPreviewModel {
+  xScale: ScaleTime<number, number>;
+}
+
+interface Props {
+  commonData: CommonData;
+  zoomData: ZoomData;
+}
+
+const InteractionWithGraph = ({ zoomData, commonData }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const setEventMouseMoving = useSetAtom(eventMouseMovingAtom);
+  const setEventMouseDown = useSetAtom(eventMouseDownAtom);
+  const setEventMouseUp = useSetAtom(eventMouseUpAtom);
+
+  const { graphHeight, graphWidth, graphSvgRef } = commonData;
+
+  const displayZoomPreview = zoomData?.display ?? true;
+
+  const mouseLeave = (): void => {
+    setEventMouseMoving(null);
+    setEventMouseDown(null);
+  };
+
+  const mouseUp = (event): void => {
+    setEventMouseUp(event);
+    setEventMouseDown(null);
+  };
+
+  const mouseMove = (event): void => {
+    setEventMouseMoving(event);
+  };
+
+  const mouseDown = (event): void => {
+    setEventMouseDown(event);
+  };
+
+  return (
+    <g>
+      {displayZoomPreview && (
+        <ZoomPreview
+          {...zoomData}
+          graphHeight={graphHeight}
+          graphSvgRef={graphSvgRef}
+          graphWidth={graphWidth}
+        />
+      )}
+      <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/InteractionWithGraph/interactionWithGraphAtoms.ts

@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+
+export const eventMouseMovingAtom = atom<null | MouseEvent>(null);
+
+export const eventMouseDownAtom = atom<null | MouseEvent>(null);
+
+export const eventMouseUpAtom = atom<null | MouseEvent>(null);

package/src/Graph/InteractionWithGraph/mouseTimeValueAtoms.ts

@@ -0,0 +1,49 @@
+import { atom } from 'jotai';
+import { not, isNil } from 'ramda';
+
+import { TimeValue } from '../timeSeries/models';
+
+export type MousePosition = [number, number] | null;
+
+interface PositionTimeValue {
+  position: MousePosition;
+  timeValue: TimeValue | null;
+}
+
+interface NewTimeValueInViewportState {
+  isInViewport?: boolean;
+  newTimeValue: TimeValue | null;
+}
+
+export const timeValueAtom = atom<TimeValue | null>(null);
+export const mousePositionAtom = atom<MousePosition>(null);
+export const isListingGraphOpenAtom = atom(false);
+
+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);
+  }
+);