@centreon/ui 26.3.14 → 26.3.16

package/package.json

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

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -2,6 +2,7 @@ import type { ScaleLinear } from 'd3-scale';
 import { isNil } from 'ramda';
 import type { MutableRefObject } from 'react';
 
+import { Axis, AxisYRight } from '../../../common/Axes/models';
 import {
   getDates,
   getTimeSeriesForLines,
@@ -40,6 +41,12 @@ interface Props extends GlobalAreaLines {
   lineStyle: LineStyle | Array<LineStyle>;
   hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
+  firstUnit?: string;
+  secondUnit?: string;
+  axis?: {
+    axisYLeft?: Axis;
+    axisYRight?: AxisYRight;
+  };
 }
 
 const Lines = ({
@@ -58,7 +65,10 @@ const Lines = ({
   scaleLogarithmicBase,
   lineStyle,
   hasSecondUnit,
-  maxLeftAxisCharacters
+  maxLeftAxisCharacters,
+  firstUnit,
+  secondUnit,
+  axis
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -84,6 +94,15 @@ const Lines = ({
     maxLeftAxisCharacters,
     xScale
   };
+  const leftScale = yScalesPerUnit[axis?.axisYLeft?.unit ?? firstUnit];
+  const rightScale = yScalesPerUnit[axis?.axisYRight?.unit ?? secondUnit];
+  const hasUnitDisplayed =
+    Boolean(firstUnit || secondUnit) ||
+    Boolean(
+      axis?.axisYLeft?.unit ||
+        axis?.axisYLeft?.displayUnit ||
+        (axis?.axisYRight?.unit && axis?.axisYRight?.displayUnit)
+    );
 
   return (
     <g>
@@ -91,6 +110,12 @@ const Lines = ({
         <GuidingLines
           graphHeight={height}
           graphWidth={width}
+          hasSecondUnit={hasSecondUnit}
+          hasUnit={hasUnitDisplayed}
+          leftScale={leftScale}
+          lines={displayedLines}
+          maxLeftAxisCharacters={maxLeftAxisCharacters}
+          rightScale={rightScale}
           timeSeries={timeSeries}
           xScale={xScale}
         />

package/src/Graph/Chart/Chart.tsx

@@ -339,8 +339,10 @@ const Chart = ({
                 )}
                 {!isEmpty(linesDisplayedAsLine) && (
                   <Lines
+                    axis={axis}
                     displayAnchor={displayAnchor}
                     displayedLines={linesDisplayedAsLine}
+                    firstUnit={firstUnit}
                     graphSvgRef={graphSvgRef}
                     hasSecondUnit={hasSecondUnit}
                     height={graphHeight - marginTop}
@@ -348,6 +350,7 @@ const Chart = ({
                     maxLeftAxisCharacters={maxLeftAxisCharacters}
                     scale={axis?.scale}
                     scaleLogarithmicBase={axis?.scaleLogarithmicBase}
+                    secondUnit={secondUnit}
                     timeSeries={timeSeries}
                     width={graphWidth}
                     xScale={xScale}

package/src/Graph/Chart/InteractiveComponents/AnchorPoint/GuidingLines.tsx

@@ -1,6 +1,7 @@
 import { grey } from '@mui/material/colors';
 
 import { Shape } from '@visx/visx';
+import { ReactElement } from 'react';
 
 import type { GuidingLines as GuidingLinesModel } from './models';
 import useTickGraph from './useTickGraph';
@@ -9,9 +10,21 @@ const GuidingLines = ({
   timeSeries,
   xScale,
   graphHeight,
-  graphWidth
-}: GuidingLinesModel): JSX.Element | null => {
-  const { positionX, positionY, guidingLinesRef } = useTickGraph({
+  graphWidth,
+  maxLeftAxisCharacters,
+  hasSecondUnit,
+  lines,
+  leftScale,
+  rightScale,
+  hasUnit
+}: GuidingLinesModel): ReactElement | null => {
+  const { positionX, positionY } = useTickGraph({
+    hasSecondUnit,
+    hasUnit,
+    leftScale,
+    lines,
+    maxLeftAxisCharacters,
+    rightScale,
     timeSeries,
     xScale
   });
@@ -20,7 +33,7 @@ const GuidingLines = ({
   }
 
   return (
-    <g ref={guidingLinesRef}>
+    <>
       <Shape.Line
         fill="dotted"
         from={{ x: positionX, y: 0 }}
@@ -38,7 +51,7 @@ const GuidingLines = ({
         strokeWidth={1}
         to={{ x: graphWidth, y: positionY }}
       />
-    </g>
+    </>
   );
 };
 

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

@@ -29,6 +29,12 @@ export interface GuidingLines {
   graphWidth: number;
   timeSeries: Array<TimeValue>;
   xScale: ScaleLinear<number, number>;
+  maxLeftAxisCharacters: number;
+  hasSecondUnit?: boolean;
+  leftScale?: ScaleLinear<number, number>;
+  lines: Array<Line>;
+  rightScale?: ScaleLinear<number, number>;
+  hasUnit?: boolean;
 }
 
 export interface GetYAnchorPoint {

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

@@ -1,12 +1,6 @@
 import type { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
-import {
-  type MutableRefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import { type MutableRefObject, useEffect, useState } from 'react';
 
 import useAxisY from '../../../common/Axes/useAxisY';
 import { getTimeValue } from '../../../common/timeSeries';
@@ -15,7 +9,6 @@ import {
   computeGElementMarginLeft,
   computPixelsToShiftMouse
 } from '../../../common/utils';
-import { margin } from '../../common';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
 
 interface AnchorPointResult {
@@ -36,6 +29,7 @@ interface Props {
   xScale: ScaleLinear<number, number>;
   hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
+  hasUnit?: boolean;
 }
 
 const useTickGraph = ({
@@ -46,9 +40,9 @@ const useTickGraph = ({
   lines = [],
   baseAxis = 1000,
   hasSecondUnit,
-  maxLeftAxisCharacters
+  maxLeftAxisCharacters,
+  hasUnit
 }: Props): AnchorPointResult => {
-  const guidingLinesRef = useRef<SVGGElement | null>(null);
   const [tickAxisBottom, setTickAxisBottom] = useState<Date | null>(null);
   const [tickAxisLeft, setTickAxisLeft] = useState<string | null>(null);
   const [tickAxisRight, setTickAxisRight] = useState<string | null>(null);
@@ -57,19 +51,16 @@ const useTickGraph = ({
 
   const mousePosition = useAtomValue(mousePositionAtom);
 
-  const paddingLeftString = useMemo(
-    () =>
-      (
-        guidingLinesRef.current?.parentElement?.parentElement?.attributes
-          ?.transform.value || ''
-      ).match(/translate\(([0-9.]+), ([0-9.]+)\)/)?.[1] || '0',
-    []
-  );
-
   const positionX = mousePosition
-    ? mousePosition[0] - Number(paddingLeftString) - 1
+    ? mousePosition[0] -
+      computeGElementMarginLeft({
+        hasSecondUnit,
+        maxCharacters: maxLeftAxisCharacters
+      })
+    : undefined;
+  const positionY = mousePosition
+    ? mousePosition[1] - (hasUnit ? 29 : 4)
     : undefined;
-  const positionY = mousePosition ? mousePosition[1] - margin.top : undefined;
 
   useEffect(() => {
     if (!mousePosition) {
@@ -113,7 +104,6 @@ const useTickGraph = ({
   }, [mousePosition]);
 
   return {
-    guidingLinesRef,
     positionX,
     positionY,
     tickAxisBottom,

package/src/Graph/common/timeSeries/index.ts

@@ -395,7 +395,7 @@ const getScale = ({
           : getMin(graphValues),
         !isEmpty(stackedValues) &&
           !equals(stackedValues, [0]) &&
-          getMin(stackedValues),
+          getMin([0, ...stackedValues]),
         Math.min(...thresholds)
       ]);
   const minValue = Math.min(...sanitizedValuesForMinimum.filter(isNotNil));

package/src/utils/useViewportIntersection.ts

@@ -18,6 +18,11 @@ export const useViewportIntersection = (
   const [element, setElement] = useState<HTMLElement | null>(null);
 
   const observer = useRef<IntersectionObserver | null>(null);
+  
+  const sanitizedOptions = {
+    ...options,
+    root: options?.root instanceof HTMLElement ? `${options.root.tagName}_${options.root.className}` : null
+  }
 
   useEffect(() => {
     if (observer.current) {
@@ -36,7 +41,7 @@ export const useViewportIntersection = (
     return (): void => {
       observer.current?.disconnect();
     };
-  }, [element, options]);
+  }, [element, JSON.stringify(sanitizedOptions)]);
 
   return {
     isInViewport: entry?.isIntersecting ?? true,