@centreon/ui 24.10.12 → 24.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.12",
+  "version": "24.11.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Chart/Chart.tsx

@@ -56,6 +56,10 @@ interface Props extends LineChartProps {
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const filterLines = (lines: Array<Line>, displayThreshold): Array<Line> => {
@@ -98,7 +102,8 @@ const Chart = ({
   thresholds,
   thresholdUnit,
   limitLegend,
-  skipIntersectionObserver
+  skipIntersectionObserver,
+  transformMatrix
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -320,6 +325,7 @@ const Chart = ({
                       graphInterval
                     }}
                     zoomData={{ ...zoomPreview }}
+                    transformMatrix={transformMatrix}
                   />
                   {thresholds?.enabled && (
                     <Thresholds

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/useTickGraph.ts

@@ -58,10 +58,10 @@ const useTickGraph = ({
       return;
     }
     const mousePositionTimeTick = mousePosition
-      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale }).timeTick
+      ? getTimeValue({ timeSeries, x: mousePosition[0], xScale })?.timeTick
       : 0;
     const timeTickValue = mousePosition
-      ? new Date(mousePositionTimeTick)
+      ? new Date(mousePositionTimeTick || 0)
       : null;
 
     setTickAxisBottom(timeTickValue);

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -76,13 +76,18 @@ interface Props {
   commonData: CommonData;
   timeShiftZonesData: TimeShiftZonesData;
   zoomData: ZoomPreviewModel;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const InteractionWithGraph = ({
   zoomData,
   commonData,
   annotationData,
-  timeShiftZonesData
+  timeShiftZonesData,
+  transformMatrix
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -127,7 +132,10 @@ const InteractionWithGraph = ({
     if (!mousePoint) {
       return;
     }
-    updateMousePosition([mousePoint.x, mousePoint.y]);
+    updateMousePosition([
+      transformMatrix?.fx?.(mousePoint.x) ?? mousePoint.x,
+      transformMatrix?.fy?.(mousePoint.y) ?? mousePoint.y
+    ]);
   };
 
   const mouseDown = (event): void => {

package/src/Graph/Chart/helpers/index.ts

@@ -2,15 +2,15 @@ import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
 import { gt, gte, isEmpty, isNil, prop, propEq, reject, sortBy } from 'ramda';
 
-import { LineChartData } from '../../common/models';
+import type { LineChartData } from '../../common/models';
 import {
   getLineData,
   getTimeSeries,
   getTimeValue
 } from '../../common/timeSeries';
-import { LinesData } from '../BasicComponents/Lines/models';
+import type { LinesData } from '../BasicComponents/Lines/models';
 import { dateFormat, timeFormat } from '../common';
-import { GetDate, GraphInterval } from '../models';
+import type { GetDate, GraphInterval } from '../models';
 
 dayjs.extend(durationPlugin);
 
@@ -56,11 +56,11 @@ export const displayArea = (data: unknown): boolean =>
   !isEmpty(data) && !isNil(data);
 
 export const getDate = ({ positionX, xScale, timeSeries }: GetDate): Date => {
-  const { timeTick } = getTimeValue({
+  const timeValue = getTimeValue({
     timeSeries,
     x: positionX,
     xScale
   });
 
-  return new Date(timeTick);
+  return new Date(timeValue?.timeTick || 0);
 };

package/src/Graph/Chart/index.tsx

@@ -34,6 +34,10 @@ interface Props extends Partial<LineChartProps> {
   thresholds?: Thresholds;
   getRef?: (ref: MutableRefObject<HTMLDivElement | null>) => void;
   containerStyle?: string;
+  transformMatrix?: {
+    fx?: (pointX: number) => number;
+    fy?: (pointY: number) => number;
+  }
 }
 
 const WrapperChart = ({
@@ -65,6 +69,7 @@ const WrapperChart = ({
   thresholdUnit,
   limitLegend,
   getRef,
+  transformMatrix,
   ...rest
 }: Props): JSX.Element | null => {
   const { classes, cx } = useChartStyles();
@@ -121,6 +126,7 @@ const WrapperChart = ({
               width={width ?? responsiveWidth}
               zoomPreview={zoomPreview}
               skipIntersectionObserver={rest.skipIntersectionObserver}
+              transformMatrix={transformMatrix}
             />
           );
         }}

package/src/components/Zoom/Zoom.tsx

@@ -3,10 +3,10 @@ import { Zoom as VisxZoom } from '@visx/zoom';
 import { ParentSize } from '../..';
 
 import ZoomContent from './ZoomContent';
-import { MinimapPosition } from './models';
+import type { MinimapPosition } from './models';
 
 export interface ZoomProps {
-  children: JSX.Element | (({ width, height }) => JSX.Element);
+  children: JSX.Element | (({ width, height, transformMatrix }) => JSX.Element);
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;

package/src/components/Zoom/ZoomContent.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
-import { ProvidedZoom } from '@visx/zoom/lib/types';
+import type { ProvidedZoom } from '@visx/zoom/lib/types';
 
 import ZoomInIcon from '@mui/icons-material/Add';
 import ZoomOutIcon from '@mui/icons-material/Remove';
@@ -12,7 +12,7 @@ import { IconButton } from '../Button';
 import Minimap from './Minimap';
 import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import { ChildrenProps, MinimapPosition, ZoomState } from './models';
+import type { ChildrenProps, MinimapPosition, ZoomState } from './models';
 import { useZoom } from './useZoom';
 
 export interface Props {

package/src/components/index.ts

@@ -12,5 +12,6 @@ export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
 export { default as Zoom } from './Zoom/Zoom';
+export type { ZoomState } from './Zoom/models';
 export * from './Tabs';
 export { default as CopyCommand } from './CopyCommand/CopyCommand';