@centreon/ui 24.4.63 → 24.4.65

package/src/components/Zoom/localPoint.ts

@@ -0,0 +1,51 @@
+import type {
+  FocusEvent as ReactFocusEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent
+} from 'react';
+
+import { Point } from '@visx/point';
+
+type EventType =
+  | MouseEvent
+  | TouchEvent
+  | FocusEvent
+  | ReactFocusEvent
+  | ReactMouseEvent
+  | ReactTouchEvent;
+
+type PointCoords = Pick<Point, 'x' | 'y'>;
+
+const DEFAULT_POINT = { x: 0, y: 0 };
+
+const isTouchEvent = (event?: EventType): event is TouchEvent =>
+  !!event && 'changedTouches' in event;
+
+export const isMouseEvent = (event?: EventType): event is MouseEvent =>
+  !!event && 'clientX' in event;
+
+const getXAndYFromEvent = (event?: EventType): PointCoords => {
+  if (!event) return { ...DEFAULT_POINT };
+
+  if (isTouchEvent(event)) {
+    return event.changedTouches.length > 0
+      ? {
+          x: event.changedTouches[0].clientX,
+          y: event.changedTouches[0].clientY
+        }
+      : { ...DEFAULT_POINT };
+  }
+
+  if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  return { ...DEFAULT_POINT };
+};
+
+export const localPoint = (event: EventType): PointCoords | null => {
+  return getXAndYFromEvent(event);
+};

package/src/components/Zoom/models.ts

@@ -0,0 +1,25 @@
+export interface ZoomState {
+  transformMatrix: {
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    translateX: number;
+    translateY: number;
+  };
+}
+
+export type MinimapPosition =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export interface ChildrenProps extends ZoomState {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+  height: number;
+  width: number;
+}

package/src/components/Zoom/useMinimap.ts

@@ -0,0 +1,156 @@
+import { useCallback, useState } from 'react';
+
+import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, gt, isNil, pick } from 'ramda';
+import { Point } from '@visx/point';
+
+import { ZoomState } from './models';
+
+export interface UseMinimapProps {
+  height: number;
+  isDraggingFromContainer: boolean;
+  minimapScale: number;
+  scale: number;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+interface UseMinimapState {
+  dragEnd: (e) => void;
+  dragStart: (e) => void;
+  move: (e) => void;
+  transformTo: (e) => void;
+  zoomInOut: (e) => void;
+}
+
+export const useMinimap = ({
+  width,
+  height,
+  zoom,
+  minimapScale,
+  isDraggingFromContainer,
+  scale
+}: UseMinimapProps): UseMinimapState => {
+  const [startPoint, setStartPoint] = useState<Pick<Point, 'x' | 'y'> | null>(
+    null
+  );
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+
+  const getMatrixPoint = useCallback(
+    (event, newScale?: number): { x: number; y: number } => {
+      const hasScale = scale > 1;
+      const point = {
+        x: event.nativeEvent.offsetX * (1 / minimapScale),
+        y: event.nativeEvent.offsetY * (1 / minimapScale)
+      };
+
+      const dx = -(
+        point.x * (newScale || zoom.transformMatrix.scaleX) -
+        width / 2
+      );
+      const dy = -(
+        point.y * (newScale || zoom.transformMatrix.scaleY) -
+        height / 2
+      );
+
+      return {
+        x: !hasScale ? dx : dx * scale - width / 2,
+        y: !hasScale ? dy : dy * scale - height / 2
+      };
+    },
+    [zoom.transformMatrix, scale, width, height, minimapScale]
+  );
+
+  const transformTo = useCallback(
+    (e): void => {
+      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: x,
+        translateY: y
+      });
+    },
+    [zoom.transformMatrix, scale]
+  );
+
+  const dragStart = (e): void => {
+    if (
+      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
+      isDraggingFromContainer
+    ) {
+      return;
+    }
+    setStartPoint(getMatrixPoint(e));
+    setStartTranslate(pick(['translateX', 'translateY'], zoom.transformMatrix));
+  };
+
+  const dragEnd = (): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  };
+
+  const move = useCallback(
+    (e): void => {
+      if (!startPoint || !startTranslate) {
+        return;
+      }
+      const { x, y } = getMatrixPoint(e);
+
+      const diffX = startPoint.x - x;
+      const diffY = startPoint.y - y;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: startTranslate.translateX - diffX,
+        translateY: startTranslate.translateY - diffY
+      });
+    },
+
+    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
+  );
+
+  const zoomInOut = useCallback(
+    (e): void => {
+      const isZoomIn = gt(0, e.deltaY);
+
+      const newScaleX = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+
+      const newScaleY = isZoomIn
+        ? zoom.transformMatrix.scaleX + 0.1
+        : zoom.transformMatrix.scaleX - 0.1;
+      const { x, y } = getMatrixPoint(e, newScaleX);
+
+      const diffX = x - zoom.transformMatrix.translateX;
+      const diffY = y - zoom.transformMatrix.translateY;
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        scaleX: newScaleX,
+        scaleY: newScaleY,
+        translateX: zoom.transformMatrix.translateX + diffX / 4,
+        translateY: zoom.transformMatrix.translateY + diffY / 4
+      });
+    },
+    [
+      zoom.transformMatrix,
+      width,
+      height,
+      isDraggingFromContainer,
+      scale,
+      startPoint
+    ]
+  );
+
+  return {
+    dragEnd,
+    dragStart,
+    move,
+    transformTo,
+    zoomInOut
+  };
+};

package/src/components/Zoom/useZoom.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+
+import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
+import { equals, isNil } from 'ramda';
+
+import { localPoint } from './localPoint';
+import { ZoomState } from './models';
+
+const isLeftMouseButtonClicked = (e): boolean =>
+  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
+
+interface UseZoomState {
+  dragEnd: () => void;
+  dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+  isDragging: boolean;
+  move: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
+}
+
+export const useZoom = (): UseZoomState => {
+  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
+  const [startPoint, setStartPoint] = useState<Point | null>(null);
+
+  const dragStart = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!isLeftMouseButtonClicked(e)) {
+          return;
+        }
+        const { translateX, translateY } = zoom.transformMatrix;
+        setStartPoint(localPoint(e) || null);
+        setStartTranslate({ translateX, translateY });
+      },
+    []
+  );
+
+  const move = useCallback(
+    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
+      (e): void => {
+        if (!startPoint || !startTranslate) {
+          return;
+        }
+        const currentPoint = localPoint(e);
+        const dx = currentPoint
+          ? -(startPoint.x - currentPoint.x)
+          : -startPoint.x;
+        const dy = currentPoint
+          ? -(startPoint.y - currentPoint.y)
+          : -startPoint.y;
+
+        const translateX = startTranslate.translateX + dx;
+        const translateY = startTranslate.translateY + dy;
+        zoom.setTranslate({
+          translateX,
+          translateY
+        });
+      },
+    [startPoint, startTranslate]
+  );
+  const dragEnd = useCallback((): void => {
+    setStartPoint(null);
+    setStartTranslate(null);
+  }, []);
+
+  return {
+    dragEnd,
+    dragStart,
+    isDragging: Boolean(startPoint && startTranslate),
+    move
+  };
+};

package/src/components/Zoom/utils.ts

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+
+interface Props {
+  contentClientRect: {
+    height: number;
+    width: number;
+  } | null;
+}
+
+export const applyTranformStylesForZoom = ({
+  contentClientRect
+}: Props): CSSProperties => {
+  const contentRect = {
+    height: contentClientRect?.height || 1,
+    width: contentClientRect?.width || 1
+  };
+  const isPortrait = contentRect.height > contentRect.width;
+  const sizes = isPortrait ? ['width', 'height'] : ['height', 'width'];
+  const sizeScale = contentRect[sizes[0]] / contentRect[sizes[1]];
+
+  const lengthToUse = isPortrait
+    ? contentRect[sizes[1]] - contentRect[sizes[0]]
+    : contentRect[sizes[0]];
+
+  const t = sizeScale > 0.85 && isPortrait ? sizeScale * 4 : sizeScale / 2;
+  const xScaleFactor = sizeScale > 0.7 && !isPortrait ? 10 : 6;
+
+  return {
+    transform: `translate(-${isPortrait ? 0 : contentRect.width * (sizeScale / xScaleFactor)}px, -${lengthToUse * (isPortrait ? t + 0.08 : t / 2)}px)`
+  };
+};
+
+// DO NOT REMOVE: As the component is in work in progress, please this code in case we need
+// const getAdditionalPadding = (): number => {
+//   if (additionalScale > 0.05) {
+//     return 0;
+//   }
+
+//   const padding =
+//     additionalScale > 0.012
+//       ? (1 / additionalScale) * (1 / zoom.transformMatrix.scaleY)
+//       : 1 / additionalScale / zoom.transformMatrix.scaleY;
+
+//   if (additionalScale < 0.009) {
+//     const tweakScale = scaleLinear({
+//       clamp: true,
+//       domain: [0.009, 0.002],
+//       range: [1, 8]
+//     });
+
+//     return padding - padding / tweakScale(additionalScale);
+//   }
+
+//   return padding;
+// };

package/src/components/index.ts

@@ -11,3 +11,4 @@ export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
+export { default as Zoom } from './Zoom/Zoom';

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/TooltipAnchorPoint.tsx

@@ -1,96 +0,0 @@
-import { Tooltip } from '@visx/visx';
-
-import { Typography, useTheme } from '@mui/material';
-
-import useTooltipAnchorPoint from './useTooltipAnchorPoint';
-import { TooltipAnchorModel } from './models';
-
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
-const TooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): JSX.Element => {
-  const theme = useTheme();
-
-  const {
-    tooltipDataAxisX,
-    tooltipDataAxisYLeft,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipTopAxisYLeft,
-    tooltipDataAxisYRight,
-    tooltipTopAxisYRight,
-    tooltipLeftAxisYRight
-  } = useTooltipAnchorPoint({
-    baseAxis,
-    graphHeight,
-    graphWidth,
-    leftScale,
-    lines,
-    rightScale,
-    timeSeries,
-    xScale
-  });
-
-  const cardStyles = {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(0.25, 0.5)
-  };
-
-  return (
-    <>
-      {tooltipDataAxisX && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisX}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)'
-          }}
-          top={0}
-        >
-          <Typography variant="caption">{tooltipDataAxisX}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYLeft && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYLeft}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%) translateY(-100%)'
-          }}
-          top={tooltipTopAxisYLeft}
-        >
-          <Typography variant="caption">{tooltipDataAxisYLeft}</Typography>
-        </Tooltip.Tooltip>
-      )}
-      {tooltipDataAxisYRight && (
-        <Tooltip.Tooltip
-          left={tooltipLeftAxisYRight}
-          style={{
-            ...baseStyles,
-            ...cardStyles,
-            transform: 'translateX(-70%)  translateY(-80%)'
-          }}
-          top={tooltipTopAxisYRight}
-        >
-          <Typography variant="caption">{tooltipDataAxisYRight}</Typography>
-        </Tooltip.Tooltip>
-      )}
-    </>
-  );
-};
-
-export default TooltipAnchorPoint;

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/useTooltipAnchorPoint.ts

@@ -1,107 +0,0 @@
-import { useEffect } from 'react';
-
-import { Tooltip } from '@visx/visx';
-import { isNil } from 'ramda';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-
-import { margin, timeFormat } from '../../common/index';
-
-import { TooltipAnchorModel, UseTooltipAnchorPointResult } from './models';
-import useTickGraph from './useTickGraph';
-
-const useTooltipAnchorPoint = ({
-  timeSeries,
-  xScale,
-  graphHeight,
-  leftScale,
-  rightScale,
-  graphWidth,
-  lines,
-  baseAxis
-}: TooltipAnchorModel): UseTooltipAnchorPointResult => {
-  const { format } = useLocaleDateTimeFormat();
-
-  const { positionX, positionY, tickAxisBottom, tickAxisLeft, tickAxisRight } =
-    useTickGraph({
-      baseAxis,
-      leftScale,
-      lines,
-      rightScale,
-      timeSeries,
-      xScale
-    });
-
-  const {
-    showTooltip: showTooltipAxisYLeft,
-    tooltipData: tooltipDataAxisYLeft,
-    tooltipLeft: tooltipLeftAxisYLeft,
-    tooltipTop: tooltipTopAxisYLeft
-  } = Tooltip.useTooltip();
-  const {
-    showTooltip: showTooltipAxisX,
-    tooltipData: tooltipDataAxisX,
-    tooltipLeft: tooltipLeftAxisX,
-    tooltipTop: tooltipTopAxisX
-  } = Tooltip.useTooltip();
-
-  const {
-    showTooltip: showTooltipAxisYRight,
-    tooltipData: tooltipDataAxisYRight,
-    tooltipLeft: tooltipLeftAxisYRight,
-    tooltipTop: tooltipTopAxisYRight
-  } = Tooltip.useTooltip();
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisBottom) {
-      return;
-    }
-
-    const dataAxisX = format({
-      date: tickAxisBottom,
-      formatString: timeFormat
-    });
-
-    showTooltipAxisX({
-      tooltipData: dataAxisX,
-      tooltipLeft: positionX + margin.left,
-      tooltipTop: graphHeight + margin.top
-    });
-  }, [positionX, positionY, tickAxisBottom]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisLeft) {
-      return;
-    }
-    showTooltipAxisYLeft({
-      tooltipData: tickAxisLeft,
-      tooltipLeft: margin.left,
-      tooltipTop: positionY + margin.top
-    });
-  }, [tickAxisLeft, positionX, positionY]);
-
-  useEffect(() => {
-    if (!positionX || !positionY || !tickAxisRight) {
-      return;
-    }
-    showTooltipAxisYRight({
-      tooltipData: tickAxisRight,
-      tooltipLeft: graphWidth ? graphWidth + margin.left : 0,
-      tooltipTop: positionY + margin.top
-    });
-  }, [positionX, positionY, tickAxisRight]);
-
-  return {
-    tooltipDataAxisX: !isNil(tickAxisBottom) ? tooltipDataAxisX : null,
-    tooltipDataAxisYLeft: !isNil(tickAxisLeft) ? tooltipDataAxisYLeft : null,
-    tooltipDataAxisYRight: !isNil(tickAxisRight) ? tooltipDataAxisYRight : null,
-    tooltipLeftAxisX,
-    tooltipLeftAxisYLeft,
-    tooltipLeftAxisYRight,
-    tooltipTopAxisX,
-    tooltipTopAxisYLeft,
-    tooltipTopAxisYRight
-  } as UseTooltipAnchorPointResult;
-};
-
-export default useTooltipAnchorPoint;

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/useInteractiveValues.ts

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-
-import { useAtomValue } from 'jotai';
-import { equals, find, isNil } from 'ramda';
-
-import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
-import {
-  formatMetricValueWithUnit,
-  getLineForMetric,
-  getMetrics,
-  getTimeValue
-} from '../../common/timeSeries';
-import { Line, TimeValue } from '../../common/timeSeries/models';
-
-import { FormattedMetricData } from './models';
-
-interface InteractiveValues {
-  getFormattedValue: (line: Line) => string | null | undefined;
-}
-
-interface Props {
-  base: number;
-  lines: Array<Line>;
-  timeSeries: Array<TimeValue>;
-  xScale;
-}
-
-const useInteractiveValues = ({
-  timeSeries,
-  lines,
-  base,
-  xScale
-}: Props): InteractiveValues => {
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const timeValue = getTimeValue({
-    timeSeries,
-    x: mousePosition?.[0],
-    xScale
-  });
-
-  const graphTimeValue = timeSeries?.find((item) =>
-    equals(item.timeTick, timeValue?.timeTick)
-  );
-
-  const getMetricsToDisplay = (): Array<number> => {
-    if (isNil(graphTimeValue)) {
-      return [];
-    }
-    const metricsData = getMetrics(graphTimeValue as TimeValue);
-
-    const metricsToDisplay = metricsData.filter((metric_id) => {
-      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
-
-      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
-    });
-
-    return metricsToDisplay.map(Number);
-  };
-
-  const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
-
-  const getFormattedMetricData = (
-    metric_id: number
-  ): FormattedMetricData | null => {
-    if (isNil(graphTimeValue)) {
-      return null;
-    }
-    const value = graphTimeValue[metric_id] as number;
-
-    const { color, name, unit } = getLineForMetric({
-      lines,
-      metric_id
-    }) as Line;
-
-    const formattedValue = formatMetricValueWithUnit({
-      base,
-      unit,
-      value
-    });
-
-    return {
-      color,
-      formattedValue,
-      name,
-      unit
-    };
-  };
-
-  const getFormattedValue = (line: Line): string | undefined | null => {
-    const metric_id = find(equals(line.metric_id), metrics);
-
-    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
-  };
-
-  return { getFormattedValue };
-};
-
-export default useInteractiveValues;