@centreon/ui 25.11.0 → 25.11.1

package/package.json

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

package/src/Graph/BarChart/BarChart.tsx

@@ -16,6 +16,7 @@ import { LineChartProps } from '../Chart/models';
 import useChartData from '../Chart/useChartData';
 import { LineChartData, Thresholds } from '../common/models';
 
+import { ReactElement } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import ResponsiveBarChart from './ResponsiveBarChart';
 import { BarStyle } from './models';
@@ -36,6 +37,9 @@ export interface BarChartProps
       | 'min'
       | 'max'
       | 'boundariesUnit'
+      | 'timeShiftZones'
+      | 'zoomPreview'
+      | 'annotationEvent'
     >
   > {
   barStyle?: BarStyle;
@@ -71,8 +75,11 @@ const BarChart = ({
   skipIntersectionObserver,
   min,
   max,
-  boundariesUnit
-}: BarChartProps): JSX.Element => {
+  boundariesUnit,
+  zoomPreview,
+  timeShiftZones,
+  annotationEvent
+}: BarChartProps): ReactElement => {
   const { adjustedData } = useChartData({ data, end, start, min, max });
   const { ref, width, height: responsiveHeight } = useResizeObserver();
 
@@ -109,6 +116,11 @@ const BarChart = ({
             min={min}
             max={max}
             boundariesUnit={boundariesUnit}
+            zoomPreview={zoomPreview}
+            timeShiftZones={timeShiftZones}
+            annotationEvent={annotationEvent}
+            start={start}
+            end={end}
           />
         )}
       </Box>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,12 +1,21 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
 
 import { Skeleton } from '@mui/material';
 
 import { Tooltip } from '../../components';
 import { useDeepCompare } from '../../utils';
+import InteractionWithGraph from '../Chart/InteractiveComponents';
+import { applyingZoomAtomAtom } from '../Chart/InteractiveComponents/ZoomPreview/zoomPreviewAtoms';
 import { margin } from '../Chart/common';
 import { Data, LineChartProps } from '../Chart/models';
 import { useIntersection } from '../Chart/useChartIntersection';
@@ -18,18 +27,29 @@ import Thresholds from '../common/Thresholds/Thresholds';
 import { Thresholds as ThresholdsModel } from '../common/models';
 import {
   getUnits,
+  getXScale,
   getXScaleBand,
   getYScalePerUnit
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
+import { computPixelsToShiftMouse } from '../common/utils';
 import BarGroup from './BarGroup';
 import BarChartTooltip from './Tooltip/BarChartTooltip';
 import { tooltipDataAtom } from './atoms';
 import { BarStyle } from './models';
 
 interface Props
-  extends Pick<LineChartProps, 'tooltip' | 'legend' | 'axis' | 'header'> {
+  extends Pick<
+    LineChartProps,
+    | 'tooltip'
+    | 'legend'
+    | 'axis'
+    | 'header'
+    | 'zoomPreview'
+    | 'timeShiftZones'
+    | 'annotationEvent'
+  > {
   barStyle: BarStyle;
   graphData: Data;
   graphRef: MutableRefObject<HTMLDivElement | null>;
@@ -43,6 +63,8 @@ interface Props
   min?: number;
   max?: number;
   boundariesUnit?: string;
+  start: string;
+  end: string;
 }
 
 const ResponsiveBarChart = ({
@@ -62,8 +84,13 @@ const ResponsiveBarChart = ({
   skipIntersectionObserver,
   min,
   max,
-  boundariesUnit
-}: Props): JSX.Element => {
+  boundariesUnit,
+  start,
+  end,
+  timeShiftZones,
+  zoomPreview,
+  annotationEvent
+}: Props): ReactElement => {
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
@@ -72,6 +99,7 @@ const ResponsiveBarChart = ({
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
+  const isApplyingZoom = useAtomValue(applyingZoomAtomAtom);
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
@@ -125,6 +153,15 @@ const ResponsiveBarChart = ({
     [timeSeries, graphWidth, isHorizontal, graphHeight]
   );
 
+  const xScaleLinear = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: isHorizontal ? graphWidth : graphHeight - 30
+      }),
+    [timeSeries, graphWidth, isHorizontal, graphHeight]
+  );
+
   const yScalesPerUnit = useMemo(
     () =>
       getYScalePerUnit({
@@ -158,6 +195,7 @@ const ResponsiveBarChart = ({
 
   const leftScale = yScalesPerUnit[firstUnit];
   const rightScale = yScalesPerUnit[secondUnit];
+  const pixelsToShift = computPixelsToShiftMouse(xScaleLinear);
 
   useEffect(
     () => {
@@ -244,33 +282,97 @@ const ResponsiveBarChart = ({
             hasSecondUnit={Boolean(secondUnit)}
           >
             <>
-              <BarGroup
-                barStyle={barStyle}
-                isTooltipHidden={isTooltipHidden}
-                lines={displayedLines}
-                orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
-                timeSeries={timeSeries}
-                xScale={xScale}
-                yScalesPerUnit={yScalesPerUnit}
-                scaleType={axis?.scale}
-              />
-              {thresholds?.enabled && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={() => setTooltipData(null)}
-                  isHorizontal={isHorizontal}
-                  showTooltip={({ tooltipData: thresholdLabel }) =>
-                    setTooltipData({
-                      thresholdLabel
-                    })
-                  }
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
-                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
-                  yScalesPerUnit={yScalesPerUnit}
+              {isApplyingZoom && (
+                <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={displayedLines}
+                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                    size={
+                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                    }
+                    timeSeries={timeSeries}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    scaleType={axis?.scale}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
+                      displayedLines={displayedLines}
+                      hideTooltip={() => setTooltipData(null)}
+                      isHorizontal={isHorizontal}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setTooltipData({
+                          thresholdLabel
+                        })
+                      }
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
+                      width={
+                        isHorizontal ? graphWidth : graphHeight - margin.top
+                      }
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                </>
+              )}
+              {isHorizontal && (
+                <InteractionWithGraph
+                  additionalZoomMargin={pixelsToShift}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
+                  commonData={{
+                    graphHeight,
+                    graphSvgRef,
+                    graphWidth,
+                    lines,
+                    xScale: xScaleLinear,
+                    timeSeries,
+                    yScalesPerUnit
+                  }}
+                  annotationData={{ ...annotationEvent }}
+                  zoomData={{ ...zoomPreview }}
+                  timeShiftZonesData={{
+                    ...timeShiftZones,
+                    graphInterval: { start, end }
+                  }}
                 />
               )}
+              {!isApplyingZoom && (
+                <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={displayedLines}
+                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                    size={
+                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                    }
+                    timeSeries={timeSeries}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    scaleType={axis?.scale}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
+                      displayedLines={displayedLines}
+                      hideTooltip={() => setTooltipData(null)}
+                      isHorizontal={isHorizontal}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setTooltipData({
+                          thresholdLabel
+                        })
+                      }
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
+                      width={
+                        isHorizontal ? graphWidth : graphHeight - margin.top
+                      }
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                </>
+              )}
             </>
           </ChartSvgWrapper>
         </div>

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

@@ -4,18 +4,29 @@ import { alpha, useTheme } from '@mui/system';
 
 import Bar from '../Bar';
 
+import { margin } from '../../common';
 import { ZoomPreviewData } from './models';
 import useZoomPreview from './useZoomPreview';
 
 const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
   const theme = useTheme();
 
-  const { graphHeight, xScale, graphWidth, getInterval, ...rest } = data;
+  const {
+    graphHeight,
+    xScale,
+    graphWidth,
+    getInterval,
+    graphSvgRef,
+    graphMarginLeft,
+    ...rest
+  } = data;
 
   const { zoomBarWidth, zoomBoundaries } = useZoomPreview({
     getInterval,
     graphWidth,
-    xScale
+    xScale,
+    graphSvgRef,
+    graphMarginLeft
   });
 
   const restData = omit(['enable'], { ...rest });
@@ -24,7 +35,7 @@ const ZoomPreview = (data: ZoomPreviewData): JSX.Element => {
     <g>
       <Bar
         fill={alpha(theme.palette.primary.main, 0.2)}
-        height={graphHeight}
+        height={graphHeight - margin.bottom}
         stroke={alpha(theme.palette.primary.main, 0.5)}
         width={zoomBarWidth}
         x={zoomBoundaries?.start || 0}

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

@@ -1,9 +1,12 @@
 import { ScaleTime } from 'd3-scale';
 
+import { RefObject } from 'react';
 import { InteractedZone } from '../../models';
 
 export interface ZoomPreviewData extends InteractedZone {
   graphHeight: number;
   graphWidth: number;
   xScale: ScaleTime<number, number>;
+  graphSvgRef: RefObject<SVGSVGElement | null>;
+  graphMarginLeft: number;
 }

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

@@ -1,18 +1,15 @@
-import { useEffect, useState } from 'react';
+import { RefObject, 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 { Interval } from '../../models';
 import {
   eventMouseDownAtom,
   eventMouseUpAtom,
   mousePositionAtom
 } from '../interactionWithGraphAtoms';
-
 import { applyingZoomAtomAtom } from './zoomPreviewAtoms';
 
 interface Boundaries {
@@ -28,12 +25,16 @@ interface Props {
   getInterval?: (args: Interval) => void;
   graphWidth: number;
   xScale: ScaleTime<number, number>;
+  graphSvgRef: RefObject<SVGSVGElement | null>;
+  graphMarginLeft: number;
 }
 
 const useZoomPreview = ({
   xScale,
   graphWidth,
-  getInterval
+  getInterval,
+  graphSvgRef,
+  graphMarginLeft
 }: Props): ZoomPreview => {
   const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
   const eventMouseDown = useAtomValue(eventMouseDownAtom);
@@ -41,16 +42,17 @@ const useZoomPreview = ({
   const mousePosition = useAtomValue(mousePositionAtom);
   const setApplyingZoom = useSetAtom(applyingZoomAtomAtom);
 
-  const mousePointDown = eventMouseDown
-    ? Event.localPoint(eventMouseDown)
-    : null;
+  const mousePointDown =
+    eventMouseDown && graphSvgRef.current
+      ? Event.localPoint(graphSvgRef.current, eventMouseDown)
+      : null;
 
   const mouseDownPositionX = mousePointDown
-    ? mousePointDown.x - margin.left
+    ? mousePointDown.x - graphMarginLeft
     : null;
 
   const movingMousePositionX = mousePosition
-    ? mousePosition[0] - margin.left
+    ? mousePosition[0] - graphMarginLeft
     : null;
 
   const applyZoom = (): void => {

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

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import { type MutableRefObject, ReactElement, useMemo } from 'react';
 
 import { Event } from '@visx/visx';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
@@ -88,6 +88,7 @@ interface Props {
   };
   hasSecondUnit?: boolean;
   maxLeftAxisCharacters: number;
+  additionalZoomMargin?: number;
 }
 
 const InteractionWithGraph = ({
@@ -97,8 +98,9 @@ const InteractionWithGraph = ({
   timeShiftZonesData,
   transformMatrix,
   hasSecondUnit,
-  maxLeftAxisCharacters
-}: Props): JSX.Element => {
+  maxLeftAxisCharacters,
+  additionalZoomMargin = 0
+}: Props): ReactElement => {
   const { classes } = useStyles();
 
   const setEventMouseDown = useSetAtom(eventMouseDownAtom);
@@ -152,6 +154,15 @@ const InteractionWithGraph = ({
     setEventMouseDown(event);
   };
 
+  const graphMarginLeft = useMemo(
+    () =>
+      computeGElementMarginLeft({
+        maxCharacters: maxLeftAxisCharacters,
+        hasSecondUnit
+      }) + additionalZoomMargin,
+    [additionalZoomMargin, maxLeftAxisCharacters, hasSecondUnit]
+  );
+
   const updateMousePosition = (pointPosition: MousePosition): void => {
     if (isNil(pointPosition)) {
       changeMousePosition({
@@ -166,10 +177,7 @@ const InteractionWithGraph = ({
       timeSeries,
       x: pointPosition[0] - pixelToShift,
       xScale,
-      marginLeft: computeGElementMarginLeft({
-        maxCharacters: maxLeftAxisCharacters,
-        hasSecondUnit
-      })
+      marginLeft: graphMarginLeft
     });
 
     if (isNil(timeValue)) {
@@ -296,6 +304,8 @@ const InteractionWithGraph = ({
           graphHeight={graphHeight}
           graphWidth={graphWidth}
           xScale={xScale}
+          graphSvgRef={graphSvgRef}
+          graphMarginLeft={graphMarginLeft}
         />
       )}
       {displayEventAnnotations && (