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

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

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

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

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

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

@@ -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/InteractionWithGraph/ZoomPreview/index.tsx

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

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

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

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

package/src/Graph/InteractionWithGraph/index.tsx

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

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

@@ -1,49 +0,0 @@
-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);
-  }
-);