@centreon/ui 25.11.6 → 25.11.8

package/package.json

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

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -32,6 +32,7 @@ import {
   getYScalePerUnit
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
+import { useMarginTop } from '../common/useMarginTop';
 import { useTooltipStyles } from '../common/useTooltipStyles';
 import { computPixelsToShiftMouse } from '../common/utils';
 import BarGroup from './BarGroup';
@@ -128,7 +129,9 @@ const ResponsiveBarChart = ({
       legendDisplay: legend?.display,
       legendPlacement: legend?.placement,
       width,
-      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
+      title,
+      units: allUnits
     });
 
   const thresholdValues = flatten([
@@ -211,6 +214,8 @@ const ResponsiveBarChart = ({
     [axis?.showGridLines]
   );
 
+  const marginTop = useMarginTop({ title, units: allUnits });
+
   if (!isInViewport && !skipIntersectionObserver) {
     return (
       <Skeleton
@@ -282,6 +287,7 @@ const ResponsiveBarChart = ({
             xScale={xScale}
             maxAxisCharacters={maxLeftAxisCharacters}
             hasSecondUnit={Boolean(secondUnit)}
+            title={title}
           >
             <>
               {isApplyingZoom && (
@@ -292,7 +298,7 @@ const ResponsiveBarChart = ({
                     lines={displayedLines}
                     orientation={isHorizontal ? 'horizontal' : 'vertical'}
                     size={
-                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                      isHorizontal ? graphHeight - marginTop - 5 : graphWidth
                     }
                     timeSeries={timeSeries}
                     xScale={xScale}
@@ -312,7 +318,7 @@ const ResponsiveBarChart = ({
                       thresholdUnit={thresholdUnit}
                       thresholds={thresholds as ThresholdsModel}
                       width={
-                        isHorizontal ? graphWidth : graphHeight - margin.top
+                        isHorizontal ? graphWidth : graphHeight - marginTop
                       }
                       yScalesPerUnit={yScalesPerUnit}
                     />
@@ -348,7 +354,7 @@ const ResponsiveBarChart = ({
                     lines={displayedLines}
                     orientation={isHorizontal ? 'horizontal' : 'vertical'}
                     size={
-                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                      isHorizontal ? graphHeight - marginTop - 5 : graphWidth
                     }
                     timeSeries={timeSeries}
                     xScale={xScale}
@@ -368,7 +374,7 @@ const ResponsiveBarChart = ({
                       thresholdUnit={thresholdUnit}
                       thresholds={thresholds as ThresholdsModel}
                       width={
-                        isHorizontal ? graphWidth : graphHeight - margin.top
+                        isHorizontal ? graphWidth : graphHeight - marginTop
                       }
                       yScalesPerUnit={yScalesPerUnit}
                     />

package/src/Graph/BarChart/useBarStack.ts

@@ -72,15 +72,15 @@ export const useBarStack = ({
 
   const commonBarStackProps = isHorizontal
     ? {
-      x: (d) => d.timeTick,
-      xScale,
-      yScale
-    }
+        x: (d) => d.timeTick,
+        xScale,
+        yScale
+      }
     : {
-      xScale: yScale,
-      y: (d) => d.timeTick,
-      yScale: xScale
-    };
+        xScale: yScale,
+        y: (d) => d.timeTick,
+        yScale: xScale
+      };
 
   const hoverBar = useCallback(
     ({ highlightedMetric, barIndex }: HoverBarProps) =>

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -154,7 +154,7 @@ const initializeCustomUnits = ({
 const checkGraphWidth = (): void => {
   cy.findByTestId('graph-interaction-zone')
     .should('have.attr', 'height')
-    .and('equal', '387');
+    .and('equal', '392');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
     expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1170);
@@ -176,12 +176,12 @@ describe('Line chart', () => {
       cy.contains('connTime').should('be.visible');
       cy.contains('Min: 70.31').should('be.visible');
 
-      cy.findByTestId('graph-interaction-zone').realMouseMove(250, 70);
+      cy.findByTestId('graph-interaction-zone').realMouseMove(240, 70);
 
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.4 s').should('be.visible');
-      cy.contains('75.64%').should('be.visible');
+      cy.contains('73.65%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -452,7 +452,7 @@ describe('Line chart', () => {
 
       cy.contains(':00 AM').should('be.visible');
 
-      cy.get('text[transform="rotate(-35, -2, 204.60871164646406)"]').should(
+      cy.get('text[transform="rotate(-35, -2, 187.52600691899028)"]').should(
         'be.visible'
       );
 
@@ -534,7 +534,7 @@ describe('Line chart', () => {
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
       cy.get('circle[cx="248.33333333333334"]').should('be.visible');
-      cy.get('circle[cy="225.07536552649066"]').should('be.visible');
+      cy.get('circle[cy="267.9948393443889"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -748,10 +748,10 @@ describe('Lines and bars', () => {
     checkGraphWidth();
 
     cy.get(
-      'path[d="M7.501377410468319,286.2259761383722 h56.51239669421488 h1v1 v98.77402386162782 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-98.77402386162782 v-1h1z"]'
+      'path[d="M7.501377410468319,289.92398616599974 h56.51239669421488 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
     ).should('be.visible');
     cy.get(
-      'path[d="M24.05509641873278,232.36514618046195 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v18.753391941381302 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-18.753391941381302 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+      'path[d="M24.05509641873278,73.57899638721061 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v137.44495707537567 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-137.44495707537567 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();

package/src/Graph/Chart/Chart.tsx

@@ -27,6 +27,7 @@ import {
   getYScalePerUnit
 } from '../common/timeSeries';
 import type { Line } from '../common/timeSeries/models';
+import { useMarginTop } from '../common/useMarginTop';
 import Lines from './BasicComponents/Lines';
 import {
   canDisplayThreshold,
@@ -155,6 +156,8 @@ const Chart = ({
       secondUnit
     });
 
+  const allUnits = getUnits(linesGraph);
+
   const { legendRef, graphWidth, graphHeight, titleRef } =
     useComputeBaseChartDimensions({
       hasSecondUnit: Boolean(secondUnit),
@@ -163,7 +166,9 @@ const Chart = ({
       legendHeight: legend?.height,
       legendPlacement: legend?.placement,
       width,
-      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters
+      maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
+      title,
+      units: allUnits
     });
 
   const xScale = useMemo(
@@ -227,8 +232,6 @@ const Chart = ({
     [displayedLines]
   );
 
-  const allUnits = getUnits(linesGraph);
-
   useEffect(
     () => {
       setLinesGraph(
@@ -254,6 +257,8 @@ const Chart = ({
 
   const hasSecondUnit = useMemo(() => Boolean(secondUnit), [secondUnit]);
 
+  const marginTop = useMarginTop({ title, units: allUnits });
+
   if ((!isInViewport && !skipIntersectionObserver) || !height) {
     return (
       <Skeleton
@@ -320,7 +325,7 @@ const Chart = ({
                       isTooltipHidden={false}
                       lines={linesDisplayedAsBar}
                       orientation="horizontal"
-                      size={graphHeight - margin.top - 5}
+                      size={graphHeight - marginTop - 5}
                       timeSeries={timeSeries}
                       xScale={xScaleBand}
                       yScalesPerUnit={yScalesPerUnit}
@@ -332,7 +337,7 @@ const Chart = ({
                       displayAnchor={displayAnchor}
                       displayedLines={linesDisplayedAsLine}
                       graphSvgRef={graphSvgRef}
-                      height={graphHeight - margin.top}
+                      height={graphHeight - marginTop}
                       scale={axis?.scale}
                       scaleLogarithmicBase={axis?.scaleLogarithmicBase}
                       timeSeries={timeSeries}

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/useZoomPreview.ts

@@ -2,7 +2,7 @@ import { RefObject, useEffect, useState } from 'react';
 
 import { Event } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { equals, gte, isNil, lt } from 'ramda';
 import { Interval } from '../../models';
 import {
@@ -37,10 +37,10 @@ const useZoomPreview = ({
   graphMarginLeft
 }: Props): ZoomPreview => {
   const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
+  const [isApplyingZoom, setApplyingZoom] = useAtom(applyingZoomAtomAtom);
   const eventMouseDown = useAtomValue(eventMouseDownAtom);
   const eventMouseUp = useAtomValue(eventMouseUpAtom);
   const mousePosition = useAtomValue(mousePositionAtom);
-  const setApplyingZoom = useSetAtom(applyingZoomAtomAtom);
 
   const mousePointDown =
     eventMouseDown && graphSvgRef.current
@@ -86,7 +86,6 @@ const useZoomPreview = ({
     }
     applyZoom();
     setApplyingZoom(false);
-    setZoomBoundaries(null);
   }, [eventMouseUp]);
 
   useEffect(() => {
@@ -99,6 +98,13 @@ const useZoomPreview = ({
     setApplyingZoom(true);
   }, [zoomBoundaries]);
 
+  useEffect(() => {
+    if (isApplyingZoom) {
+      return;
+    }
+    setZoomBoundaries(null);
+  }, [isApplyingZoom]);
+
   const zoomBarWidth = Math.abs(
     (zoomBoundaries?.end || 0) - (zoomBoundaries?.start || 0)
   );

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

@@ -1,8 +1,13 @@
-import { type MutableRefObject, ReactElement, useMemo } from 'react';
+import {
+  MouseEvent,
+  type MutableRefObject,
+  ReactElement,
+  useMemo
+} from 'react';
 
 import { Event } from '@visx/visx';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
-import { useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import {
   all,
   equals,
@@ -48,6 +53,7 @@ import type { TimelineEvent } from './Annotations/models';
 import Bar from './Bar';
 import TimeShiftZones from './TimeShiftZones';
 import ZoomPreview from './ZoomPreview';
+import { applyingZoomAtomAtom } from './ZoomPreview/zoomPreviewAtoms';
 import {
   type MousePosition,
   changeMousePositionDerivedAtom,
@@ -103,6 +109,7 @@ const InteractionWithGraph = ({
 }: Props): ReactElement => {
   const { classes } = useStyles();
 
+  const [isApplyingZoom, setIsApplyingZoom] = useAtom(applyingZoomAtomAtom);
   const setEventMouseDown = useSetAtom(eventMouseDownAtom);
   const setEventMouseUp = useSetAtom(eventMouseUpAtom);
   const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
@@ -136,7 +143,7 @@ const InteractionWithGraph = ({
     setEventMouseDown(null);
   };
 
-  const mouseMove = (event): void => {
+  const mouseMove = (event: MouseEvent): void => {
     const mousePoint = Event.localPoint(
       graphSvgRef?.current as SVGSVGElement,
       event
@@ -150,6 +157,15 @@ const InteractionWithGraph = ({
     ]);
   };
 
+  const mouseEnter = (event: MouseEvent): void => {
+    if (event.buttons === 1 && isApplyingZoom) {
+      mouseDown(event);
+    }
+    if (event.buttons === 0 && isApplyingZoom) {
+      setIsApplyingZoom(false);
+    }
+  };
+
   const mouseDown = (event): void => {
     setEventMouseDown(event);
   };
@@ -336,6 +352,7 @@ const InteractionWithGraph = ({
         onMouseLeave={mouseLeave}
         onMouseMove={mouseMove}
         onMouseUp={mouseUp}
+        onMouseEnter={mouseEnter}
       />
     </g>
   );

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

@@ -81,17 +81,17 @@ const MainLegend = ({
 
   const contextMenuClick =
     (metricId: number) =>
-      (event: MouseEvent): void => {
-        if (!secondaryClick) {
-          return;
-        }
-        event.preventDefault();
-        secondaryClick({
-          element: event.target,
-          metricId,
-          position: [event.pageX, event.pageY]
-        });
-      };
+    (event: MouseEvent): void => {
+      if (!secondaryClick) {
+        return;
+      }
+      event.preventDefault();
+      secondaryClick({
+        element: event.target,
+        metricId,
+        position: [event.pageX, event.pageY]
+      });
+    };
 
   const selectMetric = ({
     event,

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -1,14 +1,14 @@
-import { MutableRefObject } from 'react';
+import { MutableRefObject, ReactElement } from 'react';
 
 import { Group } from '@visx/visx';
 import { equals } from 'ramda';
-
-import { margin } from '../../Chart/common';
 import { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
+import { useMarginTop } from '../useMarginTop';
 import { computeGElementMarginLeft } from '../utils';
+import { margin } from '../../Chart/common';
 
 interface Props {
   allUnits: Array<string>;
@@ -28,6 +28,7 @@ interface Props {
   xScale;
   maxAxisCharacters?: number;
   hasSecondUnit?: boolean;
+  title?: string;
 }
 
 const ChartSvgWrapper = ({
@@ -47,14 +48,17 @@ const ChartSvgWrapper = ({
   orientation = 'horizontal',
   allUnits,
   maxAxisCharacters = 0,
-  hasSecondUnit
-}: Props): JSX.Element => {
+  hasSecondUnit,
+  title
+}: Props): ReactElement => {
   const isHorizontal = equals(orientation, 'horizontal');
 
+  const marginTop = useMarginTop({ title, units: allUnits });
+
   return (
     <svg
       aria-label="graph"
-      height={graphHeight + margin.top}
+      height={graphHeight + marginTop}
       ref={svgRef}
       width="100%"
     >
@@ -63,12 +67,12 @@ const ChartSvgWrapper = ({
           maxCharacters: maxAxisCharacters,
           hasSecondUnit
         })}
-        top={margin.top}
+        top={marginTop}
       >
         {showGridLines && (
           <Grids
             gridLinesType={gridLinesType}
-            height={graphHeight - margin.top}
+            height={graphHeight - margin.bottom}
             leftScale={isHorizontal ? leftScale : xScale}
             width={graphWidth}
             xScale={isHorizontal ? xScale : leftScale}

package/src/Graph/common/BaseChart/useComputeBaseChartDimensions.ts

@@ -5,6 +5,7 @@ import { equals, isNil } from 'ramda';
 import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
 import { margins } from '../margins';
+import { useMarginTop } from '../useMarginTop';
 
 export const extraMargin = 10;
 
@@ -16,6 +17,8 @@ interface UseComputeBaseChartDimensionsProps {
   legendPlacement?: string;
   width: number;
   maxAxisCharacters: number;
+  title?: string;
+  units: Array<string>;
 }
 
 interface UseComputeBaseChartDimensionsState {
@@ -32,7 +35,9 @@ export const useComputeBaseChartDimensions = ({
   legendPlacement,
   hasSecondUnit,
   legendHeight,
-  maxAxisCharacters
+  maxAxisCharacters,
+  units,
+  title
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
   const {
     ref: legendRef,
@@ -43,31 +48,29 @@ export const useComputeBaseChartDimensions = ({
 
   const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
+  const marginTop = useMarginTop({ title, units });
+
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
-    (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
+      (isNil(legendPlacement) || equals(legendPlacement, 'bottom'))
       ? currentLegendHeight
       : 0;
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
-    (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
+      (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
       ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
     width > 0
       ? width -
-        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
-        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
-        legendBoundingWidth
+      (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+      (hasSecondUnit ? margins.left * 0.8 : margin.left) -
+      legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) -
-        margin.top -
-        legendBoundingHeight -
-        (titleRefHeight || 0) -
-        5
+      ? (height || 0) - marginTop - legendBoundingHeight - (titleRefHeight || 0)
       : 0;
 
   return {

package/src/Graph/common/useMarginTop.ts

@@ -0,0 +1,17 @@
+import { identity } from 'ramda';
+import { useMemo } from 'react';
+import { margin } from '../Chart/common';
+
+export const useMarginTop = ({
+  title,
+  units
+}: { title?: string; units: Array<string> }): number => {
+  const hasUnits = useMemo(() => units.some(identity), [units]);
+
+  const marginTop = useMemo(
+    () => (title || hasUnits ? margin.top : 4),
+    [title, hasUnits]
+  );
+
+  return marginTop;
+};