@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/Chart/Chart.tsx

@@ -1,17 +1,16 @@
+import { ClickAwayListener, Skeleton } from '@mui/material';
+
+import { useAtom } from 'jotai';
+import { equals, flatten, isEmpty, isNil, pluck, reject } from 'ramda';
 import {
   type MutableRefObject,
-  ReactElement,
+  type ReactElement,
   useEffect,
   useMemo,
   useRef,
   useState
 } from 'react';
 
-import { useAtom } from 'jotai';
-import { equals, flatten, isEmpty, isNil, pluck, reject } from 'ramda';
-
-import { ClickAwayListener, Skeleton } from '@mui/material';
-
 import { useDeepCompare } from '../../utils';
 import BarGroup from '../BarChart/BarGroup';
 import AdditionalLine from '../common/BaseChart/AdditionalLine';
@@ -19,8 +18,8 @@ import BaseChart from '../common/BaseChart/BaseChart';
 import ChartSvgWrapper from '../common/BaseChart/ChartSvgWrapper';
 import { useComputeBaseChartDimensions } from '../common/BaseChart/useComputeBaseChartDimensions';
 import { useComputeYAxisMaxCharacters } from '../common/BaseChart/useComputeYAxisMaxCharacters';
-import Thresholds from '../common/Thresholds/Thresholds';
 import type { Thresholds as ThresholdsModel } from '../common/models';
+import Thresholds from '../common/Thresholds/Thresholds';
 import {
   getUnits,
   getXScale,
@@ -37,12 +36,12 @@ import {
   upperLineName
 } from './BasicComponents/Lines/Threshold/models';
 import { useChartStyles } from './Chart.styles';
+import { margin } from './common';
+import { thresholdTooltipAtom } from './graphAtoms';
 import InteractionWithGraph from './InteractiveComponents';
 import GraphValueTooltip from './InteractiveComponents/GraphValueTooltip/GraphValueTooltip';
 import GraphTooltip from './InteractiveComponents/Tooltip';
 import useGraphTooltip from './InteractiveComponents/Tooltip/useGraphTooltip';
-import { margin } from './common';
-import { thresholdTooltipAtom } from './graphAtoms';
 import type {
   Data,
   GlobalAreaLines,
@@ -149,12 +148,12 @@ const Chart = ({
 
   const { maxLeftAxisCharacters, maxRightAxisCharacters } =
     useComputeYAxisMaxCharacters({
-      graphData,
-      thresholds,
-      thresholdUnit,
       axis,
       firstUnit,
-      secondUnit
+      graphData,
+      secondUnit,
+      thresholds,
+      thresholdUnit
     });
 
   const allUnits = getUnits(linesGraph);
@@ -166,10 +165,10 @@ const Chart = ({
       legendDisplay: legend?.display,
       legendHeight: legend?.height,
       legendPlacement: legend?.placement,
-      width,
       maxAxisCharacters: maxRightAxisCharacters || maxLeftAxisCharacters,
       title,
-      units: allUnits
+      units: allUnits,
+      width
     });
 
   const xScale = useMemo(
@@ -187,24 +186,24 @@ const Chart = ({
         dataTime: timeSeries,
         valueWidth: graphWidth
       }),
-    [timeSeries, graphWidth, graphHeight]
+    [timeSeries, graphWidth]
   );
 
   const yScalesPerUnit = useMemo(
     () =>
       getYScalePerUnit({
+        boundariesUnit,
         dataLines: linesGraph,
         dataTimeSeries: timeSeries,
         isCenteredZero: axis?.isCenteredZero,
+        isFilled: lineStyle?.showArea,
+        max,
+        min,
         scale: axis?.scale,
         scaleLogarithmicBase: axis?.scaleLogarithmicBase,
-        thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
-        valueGraphHeight: graphHeight - margin.bottom,
-        min,
-        max,
-        boundariesUnit,
-        isFilled: lineStyle?.showArea
+        thresholdUnit,
+        valueGraphHeight: graphHeight - margin.bottom
       }),
     [
       linesGraph,
@@ -214,7 +213,12 @@ const Chart = ({
       thresholds?.enabled,
       axis?.isCenteredZero,
       axis?.scale,
-      axis?.scaleLogarithmicBase
+      axis?.scaleLogarithmicBase,
+      boundariesUnit,
+      lineStyle?.showArea,
+      max,
+      min,
+      thresholdUnit
     ]
   );
 
@@ -234,14 +238,15 @@ const Chart = ({
     [displayedLines]
   );
 
-  useEffect(
-    () => {
-      setLinesGraph(
-        filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
-      );
-    },
-    useDeepCompare([lines, shapeLines?.areaThresholdLines])
-  );
+  useEffect(() => {
+    setLinesGraph(
+      filterLines(lines, canDisplayThreshold(shapeLines?.areaThresholdLines))
+    );
+  }, [
+    ...useDeepCompare([lines, shapeLines?.areaThresholdLines]),
+    lines,
+    shapeLines?.areaThresholdLines
+  ]);
 
   const graphTooltipData = useGraphTooltip({
     graphWidth,
@@ -276,6 +281,7 @@ const Chart = ({
       <div className={classes.baseWrapper}>
         <BaseChart
           base={baseAxis}
+          graphHeight={graphHeight}
           graphWidth={graphWidth}
           header={header}
           height={height}
@@ -286,8 +292,8 @@ const Chart = ({
             mode: legend?.mode,
             placement: legend?.placement,
             renderExtraComponent: legend?.renderExtraComponent,
-            showCalculations: legend?.showCalculations,
-            secondaryClick: legend?.secondaryClick
+            secondaryClick: legend?.secondaryClick,
+            showCalculations: legend?.showCalculations
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}
@@ -295,7 +301,6 @@ const Chart = ({
           setLines={setLinesGraph}
           title={title}
           titleRef={titleRef}
-          graphHeight={graphHeight}
         >
           <GraphValueTooltip
             baseAxis={baseAxis}
@@ -311,90 +316,88 @@ const Chart = ({
                 graphHeight={graphHeight}
                 graphWidth={graphWidth}
                 gridLinesType={axis?.gridLinesType}
+                hasSecondUnit={hasSecondUnit}
                 leftScale={leftScale}
+                maxAxisCharacters={maxLeftAxisCharacters}
                 rightScale={rightScale}
                 showGridLines={showGridLines}
                 svgRef={graphSvgRef}
                 timeSeries={timeSeries}
                 xScale={xScale}
-                maxAxisCharacters={maxLeftAxisCharacters}
-                hasSecondUnit={hasSecondUnit}
               >
-                <>
-                  {!isEmpty(linesDisplayedAsBar) && (
-                    <BarGroup
-                      barStyle={barStyle}
-                      isTooltipHidden={false}
-                      lines={linesDisplayedAsBar}
-                      orientation="horizontal"
-                      size={graphHeight - marginTop - 5}
-                      timeSeries={timeSeries}
-                      xScale={xScaleBand}
-                      yScalesPerUnit={yScalesPerUnit}
-                    />
-                  )}
-                  {!isEmpty(linesDisplayedAsLine) && (
-                    <Lines
-                      lineStyle={lineStyle}
-                      displayAnchor={displayAnchor}
-                      displayedLines={linesDisplayedAsLine}
-                      graphSvgRef={graphSvgRef}
-                      height={graphHeight - marginTop}
-                      scale={axis?.scale}
-                      scaleLogarithmicBase={axis?.scaleLogarithmicBase}
-                      timeSeries={timeSeries}
-                      width={graphWidth}
-                      xScale={xScale}
-                      yScalesPerUnit={yScalesPerUnit}
-                      hasSecondUnit={hasSecondUnit}
-                      maxLeftAxisCharacters={maxLeftAxisCharacters}
-                      {...shapeLines}
-                    />
-                  )}
-                  {additionalLines?.map((additionalLine) => (
-                    <AdditionalLine
-                      key={additionalLine.yValue}
-                      {...additionalLine}
-                      graphWidth={graphWidth}
-                      yScale={yScalesPerUnit[additionalLine.unit]}
-                    />
-                  ))}
-                  <InteractionWithGraph
-                    annotationData={{ ...annotationEvent }}
-                    commonData={{
-                      graphHeight,
-                      graphSvgRef,
-                      graphWidth,
-                      lines: displayedLines,
-                      timeSeries,
-                      xScale,
-                      yScalesPerUnit
-                    }}
-                    timeShiftZonesData={{
-                      ...timeShiftZones,
-                      graphInterval
-                    }}
-                    zoomData={{ ...zoomPreview }}
-                    transformMatrix={transformMatrix}
+                {!isEmpty(linesDisplayedAsBar) && (
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={false}
+                    lines={linesDisplayedAsBar}
+                    orientation="horizontal"
+                    size={graphHeight - marginTop - 5}
+                    timeSeries={timeSeries}
+                    xScale={xScaleBand}
+                    yScalesPerUnit={yScalesPerUnit}
+                  />
+                )}
+                {!isEmpty(linesDisplayedAsLine) && (
+                  <Lines
+                    displayAnchor={displayAnchor}
+                    displayedLines={linesDisplayedAsLine}
+                    graphSvgRef={graphSvgRef}
                     hasSecondUnit={hasSecondUnit}
+                    height={graphHeight - marginTop}
+                    lineStyle={lineStyle}
                     maxLeftAxisCharacters={maxLeftAxisCharacters}
+                    scale={axis?.scale}
+                    scaleLogarithmicBase={axis?.scaleLogarithmicBase}
+                    timeSeries={timeSeries}
+                    width={graphWidth}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    {...shapeLines}
+                  />
+                )}
+                {additionalLines?.map((additionalLine) => (
+                  <AdditionalLine
+                    key={additionalLine.yValue}
+                    {...additionalLine}
+                    graphWidth={graphWidth}
+                    yScale={yScalesPerUnit[additionalLine.unit]}
+                  />
+                ))}
+                <InteractionWithGraph
+                  annotationData={{ ...annotationEvent }}
+                  commonData={{
+                    graphHeight,
+                    graphSvgRef,
+                    graphWidth,
+                    lines: displayedLines,
+                    timeSeries,
+                    xScale,
+                    yScalesPerUnit
+                  }}
+                  hasSecondUnit={hasSecondUnit}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
+                  timeShiftZonesData={{
+                    ...timeShiftZones,
+                    graphInterval
+                  }}
+                  transformMatrix={transformMatrix}
+                  zoomData={{ ...zoomPreview }}
+                />
+                {thresholds?.enabled && (
+                  <Thresholds
+                    displayedLines={displayedLines}
+                    hideTooltip={() => setThresholdTooltip(null)}
+                    showTooltip={({ tooltipData: thresholdLabel }) =>
+                      setThresholdTooltip({
+                        thresholdLabel
+                      })
+                    }
+                    thresholds={thresholds as ThresholdsModel}
+                    thresholdUnit={thresholdUnit}
+                    width={graphWidth}
+                    yScalesPerUnit={yScalesPerUnit}
                   />
-                  {thresholds?.enabled && (
-                    <Thresholds
-                      displayedLines={displayedLines}
-                      hideTooltip={() => setThresholdTooltip(null)}
-                      showTooltip={({ tooltipData: thresholdLabel }) =>
-                        setThresholdTooltip({
-                          thresholdLabel
-                        })
-                      }
-                      thresholdUnit={thresholdUnit}
-                      thresholds={thresholds as ThresholdsModel}
-                      width={graphWidth}
-                      yScalesPerUnit={yScalesPerUnit}
-                    />
-                  )}
-                </>
+                )}
               </ChartSvgWrapper>
             </div>
           </GraphValueTooltip>

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

@@ -1,8 +1,8 @@
-import { Shape } from '@visx/visx';
-
 import { grey } from '@mui/material/colors';
 
-import { GuidingLines as GuidingLinesModel } from './models';
+import { Shape } from '@visx/visx';
+
+import type { GuidingLines as GuidingLinesModel } from './models';
 import useTickGraph from './useTickGraph';
 
 const GuidingLines = ({

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

@@ -1,13 +1,11 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { isNil, prop } from 'ramda';
 
 import { bisectDate, getDates } from '../../../common/timeSeries';
-import { TimeValue } from '../../../common/timeSeries/models';
-
-import { GetYAnchorPoint } from './models';
-import useTickGraph from './useTickGraph';
-
+import type { TimeValue } from '../../../common/timeSeries/models';
 import AnchorPoint from '.';
+import type { GetYAnchorPoint } from './models';
+import useTickGraph from './useTickGraph';
 
 interface Props {
   lineColor: string;
@@ -45,10 +43,10 @@ const RegularAnchorPoint = ({
   hasSecondUnit
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
-    timeSeries,
-    xScale,
+    hasSecondUnit,
     maxLeftAxisCharacters,
-    hasSecondUnit
+    timeSeries,
+    xScale
   });
 
   if (isNil(timeTick)) {

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

@@ -1,13 +1,11 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { isNil, map, pipe } from 'ramda';
 
 import { bisectDate } from '../../../common/timeSeries';
-import { TimeValue } from '../../../common/timeSeries/models';
-
-import { StackValue } from './models';
-import useTickGraph from './useTickGraph';
-
+import type { TimeValue } from '../../../common/timeSeries/models';
 import AnchorPoint from '.';
+import type { StackValue } from './models';
+import useTickGraph from './useTickGraph';
 
 interface Props {
   lineColor: string;
@@ -59,10 +57,10 @@ const StackedAnchorPoint = ({
   maxLeftAxisCharacters
 }: Props): JSX.Element | null => {
   const { tickAxisBottom: timeTick } = useTickGraph({
-    timeSeries,
-    xScale,
     hasSecondUnit,
-    maxLeftAxisCharacters
+    maxLeftAxisCharacters,
+    timeSeries,
+    xScale
   });
 
   if (isNil(timeTick)) {

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

@@ -1,6 +1,6 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { Line, TimeValue } from '../../../common/timeSeries/models';
+import type { Line, TimeValue } from '../../../common/timeSeries/models';
 
 interface AnchorPoint {
   areaColor: string;

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

@@ -1,14 +1,19 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
-
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { useAtomValue } from 'jotai';
+import {
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 
 import useAxisY from '../../../common/Axes/useAxisY';
 import { getTimeValue } from '../../../common/timeSeries';
-import { Line, TimeValue } from '../../../common/timeSeries/models';
+import type { Line, TimeValue } from '../../../common/timeSeries/models';
 import {
-  computPixelsToShiftMouse,
-  computeGElementMarginLeft
+  computeGElementMarginLeft,
+  computPixelsToShiftMouse
 } from '../../../common/utils';
 import { margin } from '../../common';
 import { mousePositionAtom } from '../interactionWithGraphAtoms';
@@ -57,11 +62,8 @@ const useTickGraph = ({
       (
         guidingLinesRef.current?.parentElement?.parentElement?.attributes
           ?.transform.value || ''
-      ).match(/translate\(([0-9\.]+), ([0-9\.]+)\)/)?.[1] || '0',
-    [
-      guidingLinesRef.current?.parentElement?.parentElement?.attributes
-        ?.transform.value
-    ]
+      ).match(/translate\(([0-9.]+), ([0-9.]+)\)/)?.[1] || '0',
+    []
   );
 
   const positionX = mousePosition
@@ -80,13 +82,13 @@ const useTickGraph = ({
     const pixelToShift = computPixelsToShiftMouse(xScale);
     const mousePositionTimeTick = mousePosition
       ? getTimeValue({
+          marginLeft: computeGElementMarginLeft({
+            hasSecondUnit,
+            maxCharacters: maxLeftAxisCharacters
+          }),
           timeSeries,
           x: mousePosition[0] - pixelToShift,
-          xScale,
-          marginLeft: computeGElementMarginLeft({
-            maxCharacters: maxLeftAxisCharacters,
-            hasSecondUnit
-          })
+          xScale
         })?.timeTick
       : 0;
     const timeTickValue = mousePosition
@@ -111,12 +113,12 @@ const useTickGraph = ({
   }, [mousePosition]);
 
   return {
+    guidingLinesRef,
     positionX,
     positionY,
     tickAxisBottom,
     tickAxisLeft,
-    tickAxisRight,
-    guidingLinesRef
+    tickAxisRight
   };
 };
 export default useTickGraph;

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/Area.tsx

@@ -1,19 +1,22 @@
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
 import { Shape } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
 import { useAtom, useAtomValue } from 'jotai';
 import { max, pick, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
-
 import { labelFrom, labelTo } from '../../../translatedLabels';
 import {
   annotationHoveredAtom,
   getFillColorDerivedAtom,
   getIconColorDerivedAtom
 } from '../annotationsAtoms';
-
-import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
+import Annotation, {
+  type Props as AnnotationProps,
+  iconSize,
+  yMargin
+} from '.';
 
 type Props = {
   Icon: (props) => JSX.Element | null;
@@ -64,9 +67,6 @@ const AreaAnnotation = ({
     <Shape.Bar
       fill={getFillColor({ annotation, color })}
       height={graphHeight + iconSize / 2}
-      width={xEnd - xStart}
-      x={xStart}
-      y={yMargin + iconSize + 2}
       onMouseEnter={(): void =>
         setAnnotationHovered(() => ({
           annotation,
@@ -74,6 +74,9 @@ const AreaAnnotation = ({
         }))
       }
       onMouseLeave={(): void => setAnnotationHovered(() => undefined)}
+      width={xEnd - xStart}
+      x={xStart}
+      y={yMargin + iconSize + 2}
     />
   );
 

package/src/Graph/Chart/InteractiveComponents/Annotations/Annotation/Line.tsx

@@ -1,19 +1,22 @@
+import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
+
 import { Shape } from '@visx/visx';
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
 import { useAtomValue } from 'jotai';
 import { pick } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { useLocaleDateTimeFormat, useMemoComponent } from '@centreon/ui';
-
 import {
   annotationHoveredAtom,
   getIconColorDerivedAtom,
   getStrokeOpacityDerivedAtom,
   getStrokeWidthDerivedAtom
 } from '../annotationsAtoms';
-
-import Annotation, { Props as AnnotationProps, yMargin, iconSize } from '.';
+import Annotation, {
+  type Props as AnnotationProps,
+  iconSize,
+  yMargin
+} from '.';
 
 type Props = {
   Icon: (props) => JSX.Element | null;

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

@@ -1,13 +1,13 @@
+import { Paper, Tooltip, Typography } from '@mui/material';
+
 import { useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { Paper, Tooltip, Typography } from '@mui/material';
-
 import { truncate } from '../../../helpers';
 import { labelBy } from '../../../translatedLabels';
 import { annotationHoveredAtom } from '../annotationsAtoms';
-import { TimelineEvent } from '../models';
+import type { TimelineEvent } from '../models';
 
 const yMargin = -32;
 const iconSize = 20;
@@ -60,14 +60,15 @@ const Annotation = ({
       >
         <svg
           height={iconSize}
-          width={iconSize}
-          x={xIcon}
-          y={yMargin}
           onMouseEnter={(): void =>
             setAnnotationHovered(() => ({ annotationHoveredId, event }))
           }
           onMouseLeave={(): void => setAnnotationHovered(() => undefined)}
+          width={iconSize}
+          x={xIcon}
+          y={yMargin}
         >
+          <title>Annotation</title>
           <rect fill="transparent" height={iconSize} width={iconSize} />
           {icon}
         </svg>

package/src/Graph/Chart/InteractiveComponents/Annotations/Area/Downtime.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'react-i18next';
-
 import { useTheme } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { DowntimeIcon } from '../../../../../Icon';
 import { labelDowntime } from '../../../translatedLabels';
 import EventAnnotations from '../EventAnnotations';
-import { Args } from '../models';
+import type { Args } from '../models';
 
 const DowntimeAnnotations = (props: Args): JSX.Element => {
   const { t } = useTranslation();
@@ -15,9 +15,9 @@ const DowntimeAnnotations = (props: Args): JSX.Element => {
 
   return (
     <EventAnnotations
-      Icon={DowntimeIcon}
       ariaLabel={t(labelDowntime)}
       color={color}
+      Icon={DowntimeIcon}
       type="downtime"
       {...props}
     />

package/src/Graph/Chart/InteractiveComponents/Annotations/EventAnnotations.tsx

@@ -1,9 +1,9 @@
-import { ScaleTime } from 'd3-scale';
+import type { ScaleTime } from 'd3-scale';
 import { filter, isNil, propEq } from 'ramda';
 
 import AreaAnnotation from './Annotation/Area';
 import LineAnnotation from './Annotation/Line';
-import { TimelineEvent } from './models';
+import type { TimelineEvent } from './models';
 
 interface Props {
   Icon: (props) => JSX.Element | null;
@@ -32,12 +32,12 @@ const EventAnnotations = ({
     <>
       {events.map((event) => {
         const props = {
-          Icon,
           annotationHoveredId,
           ariaLabel,
           color,
           event,
           graphHeight,
+          Icon,
           xScale
         };