@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,10 +1,3 @@
-import {
-  MouseEvent,
-  type MutableRefObject,
-  ReactElement,
-  useMemo
-} from 'react';
-
 import { Event } from '@visx/visx';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import { useAtom, useSetAtom } from 'jotai';
@@ -26,6 +19,12 @@ import {
   toPairs,
   values
 } from 'ramda';
+import {
+  type MouseEvent,
+  type MutableRefObject,
+  type ReactElement,
+  useMemo
+} from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -36,6 +35,10 @@ import {
   getYScale
 } from '../../common/timeSeries';
 import type { Line, TimeValue } from '../../common/timeSeries/models';
+import {
+  computeGElementMarginLeft,
+  computPixelsToShiftMouse
+} from '../../common/utils';
 import { margin } from '../common';
 import type {
   AnnotationEvent,
@@ -43,25 +46,20 @@ import type {
   InteractedZone,
   InteractedZone as ZoomPreviewModel
 } from '../models';
-
-import {
-  computPixelsToShiftMouse,
-  computeGElementMarginLeft
-} from '../../common/utils';
 import Annotations from './Annotations';
 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,
   eventMouseDownAtom,
   eventMouseLeaveAtom,
   eventMouseUpAtom,
-  graphTooltipDataAtom
+  graphTooltipDataAtom,
+  type MousePosition
 } from './interactionWithGraphAtoms';
+import TimeShiftZones from './TimeShiftZones';
+import ZoomPreview from './ZoomPreview';
+import { applyingZoomAtomAtom } from './ZoomPreview/zoomPreviewAtoms';
 
 const useStyles = makeStyles()(() => ({
   overlay: {
@@ -173,8 +171,8 @@ const InteractionWithGraph = ({
   const graphMarginLeft = useMemo(
     () =>
       computeGElementMarginLeft({
-        maxCharacters: maxLeftAxisCharacters,
-        hasSecondUnit
+        hasSecondUnit,
+        maxCharacters: maxLeftAxisCharacters
       }) + additionalZoomMargin,
     [additionalZoomMargin, maxLeftAxisCharacters, hasSecondUnit]
   );
@@ -190,10 +188,10 @@ const InteractionWithGraph = ({
     }
     const pixelToShift = computPixelsToShiftMouse(xScale);
     const timeValue = getTimeValue({
+      marginLeft: graphMarginLeft,
       timeSeries,
       x: pointPosition[0] - pixelToShift,
-      xScale,
-      marginLeft: graphMarginLeft
+      xScale
     });
 
     if (isNil(timeValue)) {
@@ -318,10 +316,10 @@ const InteractionWithGraph = ({
         <ZoomPreview
           {...zoomData}
           graphHeight={graphHeight}
+          graphMarginLeft={graphMarginLeft}
+          graphSvgRef={graphSvgRef}
           graphWidth={graphWidth}
           xScale={xScale}
-          graphSvgRef={graphSvgRef}
-          graphMarginLeft={graphMarginLeft}
         />
       )}
       {displayEventAnnotations && (
@@ -345,14 +343,14 @@ const InteractionWithGraph = ({
         data-testid="graph-interaction-zone"
         fill="transparent"
         height={graphHeight - margin.bottom}
-        width={graphWidth}
-        x={0}
-        y={0}
         onMouseDown={mouseDown}
+        onMouseEnter={mouseEnter}
         onMouseLeave={mouseLeave}
         onMouseMove={mouseMove}
         onMouseUp={mouseUp}
-        onMouseEnter={mouseEnter}
+        width={graphWidth}
+        x={0}
+        y={0}
       />
     </g>
   );

package/src/Graph/Chart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -1,8 +1,8 @@
 import { atom } from 'jotai';
 import { isNil } from 'ramda';
 
-import { TimeValue } from '../../common/timeSeries/models';
-import { GraphTooltipData } from '../models';
+import type { TimeValue } from '../../common/timeSeries/models';
+import type { GraphTooltipData } from '../models';
 
 export const eventMouseDownAtom = atom<null | MouseEvent>(null);
 export const eventMouseUpAtom = atom<null | MouseEvent>(null);

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

@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-
 import { Typography } from '@mui/material';
 
+import { useTranslation } from 'react-i18next';
+
 import { useLegendContentStyles } from './Legend.styles';
 
 interface Props {

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

@@ -1,14 +1,14 @@
 import { Typography } from '@mui/material';
 
+import type { ReactElement } from 'react';
+
 import {
   EllipsisTypography,
   formatMetricName,
   formatMetricValue
 } from '../../..';
 import { Tooltip } from '../../../components';
-import { Line } from '../../common/timeSeries/models';
-
-import { ReactElement } from 'react';
+import type { Line } from '../../common/timeSeries/models';
 import LegendContent from './LegendContent';
 import { LegendDisplayMode } from './models';
 

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

@@ -1,26 +1,25 @@
-import {
-  Dispatch,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  SetStateAction,
-  useMemo
-} from 'react';
-
-import { equals, prop, slice, sortBy } from 'ramda';
-
 import { alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
+import { equals, prop, slice, sortBy } from 'ramda';
+import {
+  type Dispatch,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type SetStateAction,
+  useMemo
+} from 'react';
+
 import { formatMetricValue } from '../../common/timeSeries';
-import { Line } from '../../common/timeSeries/models';
-import { LegendModel } from '../models';
+import type { Line } from '../../common/timeSeries/models';
+import type { LegendModel } from '../models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
 import LegendContent from './LegendContent';
 import LegendHeader from './LegendHeader';
-import { GetMetricValueProps, LegendDisplayMode } from './models';
+import { type GetMetricValueProps, LegendDisplayMode } from './models';
 import useLegend from './useLegend';
 
 interface Props
@@ -52,9 +51,9 @@ const MainLegend = ({
   placement,
   mode,
   showCalculations = {
-    min: true,
+    avg: true,
     max: true,
-    avg: true
+    min: true
   },
   secondaryClick,
   graphHeight
@@ -125,12 +124,12 @@ const MainLegend = ({
     >
       <ul
         className={`list-none flex gap-3 w-full overflow-y-auto ${!isListMode && equals(placement, 'bottom') && 'flex-wrap'} ${isListMode || !equals(placement, 'bottom') ? 'flex-col h-full w-fit' : ''} ${equals(placement, 'bottom') ? 'max-h-17' : 'max-h-fit'} ${!equals(placement, 'bottom') ? 'overflow-x-hidden' : ''}`}
+        data-as-list={isListMode || !equals(placement, 'bottom')}
+        data-legend
+        data-mode={itemMode}
         style={{
           height: equals(placement, 'bottom') ? 'auto' : `${graphHeight}px`
         }}
-        data-as-list={isListMode || !equals(placement, 'bottom')}
-        data-mode={itemMode}
-        data-legend
       >
         {displayedLines.map((line) => {
           const { color, display, metric_id, unit } = line;
@@ -159,17 +158,17 @@ const MainLegend = ({
               className={`${!display ? 'text-text-disabled' : 'text-text-primary'} flex gap-1 ${toggable && 'cursor-pointer'} ${!equals(placement, 'bottom') ? 'w-fit' : ''}`}
               key={metric_id}
               onClick={(event): void => selectMetric({ event, metric_id })}
+              onContextMenu={contextMenuClick(metric_id)}
               onKeyUp={(event) =>
                 event.key === 'Enter' && selectMetric({ event, metric_id })
               }
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
-              onContextMenu={contextMenuClick(metric_id)}
             >
               <div
                 className="h-full rounded-sm w-1 min-h-5"
-                style={{ backgroundColor: markerColor }}
                 data-icon
+                style={{ backgroundColor: markerColor }}
               />
               <div>
                 <LegendHeader

package/src/Graph/Chart/Legend/useLegend.ts

@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-
 import {
   equals,
   find,
@@ -11,8 +9,9 @@ import {
   propEq,
   reject
 } from 'ramda';
+import { type Dispatch, type SetStateAction, useEffect } from 'react';
 
-import { Line } from '../../common/timeSeries/models';
+import type { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
   clearHighlight: () => void;
@@ -96,7 +95,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
     }));
 
     setLinesGraph(newLines);
-  }, [lines]);
+  }, [JSON.stringify(lines), setLinesGraph]);
 
   return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
 };

package/src/Graph/Chart/LoadingSkeleton.tsx

@@ -1,7 +1,7 @@
-import { makeStyles } from 'tss-react/mui';
-
 import { Skeleton } from '@mui/material';
 
+import { makeStyles } from 'tss-react/mui';
+
 interface Props {
   displayTitleSkeleton: boolean;
   graphHeight: number;

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

@@ -1,7 +1,7 @@
-import { always, cond, equals, isNil } from 'ramda';
-
 import { alpha } from '@mui/material';
+
 import { curveCatmullRom, curveLinear, curveStep } from '@visx/curve';
+import { always, cond, equals, isNil } from 'ramda';
 
 const commonTickLabelProps = {
   fontFamily: 'Roboto, sans-serif',

package/src/Graph/Chart/graphAtoms.ts

@@ -1,6 +1,6 @@
 import { atom } from 'jotai';
 
-import { ThresholdTooltip } from './models';
+import type { ThresholdTooltip } from './models';
 
 export const timeTickGraphAtom = atom<Date | null>(null);
 export const thresholdTooltipAtom = atom<ThresholdTooltip | null>(null);

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

@@ -41,7 +41,10 @@ export const getXAxisTickFormat = (graphInterval: GraphInterval): string => {
 export const truncate = ({
   content,
   maxLength = 180
-}: { content?: string; maxLength?: number }): string => {
+}: {
+  content?: string;
+  maxLength?: number;
+}): string => {
   if (isNil(content)) {
     return '';
   }

package/src/Graph/Chart/index.tsx

@@ -1,20 +1,22 @@
-import dayjs from "dayjs";
-import { memo, useRef } from "react";
-import "dayjs/locale/en";
-import "dayjs/locale/es";
-import "dayjs/locale/fr";
-import "dayjs/locale/pt";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import timezonePlugin from "dayjs/plugin/timezone";
-import utcPlugin from "dayjs/plugin/utc";
-import useResizeObserver from "use-resize-observer";
-import Loading from "../../LoadingSkeleton";
-import type { LineChartData, Thresholds } from "../common/models";
-import Chart from "./Chart";
-import { useChartStyles } from "./Chart.styles";
-import LoadingSkeleton from "./LoadingSkeleton";
-import type { GlobalAreaLines, LineChartProps } from "./models";
-import useChartData from "./useChartData";
+import dayjs from 'dayjs';
+import { memo, useRef } from 'react';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/pt';
+
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import useResizeObserver from 'use-resize-observer';
+
+import Loading from '../../LoadingSkeleton';
+import type { LineChartData, Thresholds } from '../common/models';
+import Chart from './Chart';
+import { useChartStyles } from './Chart.styles';
+import LoadingSkeleton from './LoadingSkeleton';
+import type { GlobalAreaLines, LineChartProps } from './models';
+import useChartData from './useChartData';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utcPlugin);
@@ -50,19 +52,19 @@ const WrapperChart = ({
   loading,
   timeShiftZones,
   tooltip = {
-    mode: "all",
-    sortOrder: "name",
+    mode: 'all',
+    sortOrder: 'name'
   },
   annotationEvent,
   legend = {
     display: true,
-    mode: "grid",
-    placement: "bottom",
+    mode: 'grid',
+    placement: 'bottom',
     showCalculations: {
-      min: true,
-      max: true,
       avg: true,
-    },
+      max: true,
+      min: true
+    }
   },
   header,
   lineStyle,
@@ -87,7 +89,7 @@ const WrapperChart = ({
   const {
     ref: resizeObserverRef,
     width: responsiveWidth,
-    height: responsiveHeight,
+    height: responsiveHeight
   } = useResizeObserver();
 
   const combinedRef = (element: HTMLDivElement | null) => {
@@ -100,7 +102,6 @@ const WrapperChart = ({
     resizeObserverRef(element);
   };
 
-
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
@@ -116,16 +117,18 @@ const WrapperChart = ({
 
   return (
     <div
-      ref={combinedRef}
       className={cx(classes.wrapperContainer, rest?.containerStyle)}
+      ref={combinedRef}
     >
       {!responsiveHeight ? (
-        <Loading height={height || "100%"} width={width} />
+        <Loading height={height || '100%'} width={width} />
       ) : (
         <Chart
+          additionalLines={additionalLines}
           annotationEvent={annotationEvent}
           axis={axis}
           barStyle={barStyle}
+          boundariesUnit={boundariesUnit}
           displayAnchor={displayAnchor}
           graphData={adjustedData}
           graphInterval={{ end, start }}
@@ -135,19 +138,17 @@ const WrapperChart = ({
           legend={legend}
           limitLegend={limitLegend}
           lineStyle={lineStyle}
+          max={max}
+          min={min}
           shapeLines={shapeLines}
-          thresholdUnit={thresholdUnit}
+          skipIntersectionObserver={rest.skipIntersectionObserver}
           thresholds={thresholds}
+          thresholdUnit={thresholdUnit}
           timeShiftZones={timeShiftZones}
           tooltip={tooltip}
+          transformMatrix={transformMatrix}
           width={width || responsiveWidth || 0}
           zoomPreview={zoomPreview}
-          skipIntersectionObserver={rest.skipIntersectionObserver}
-          additionalLines={additionalLines}
-          transformMatrix={transformMatrix}
-          min={min}
-          max={max}
-          boundariesUnit={boundariesUnit}
         />
       )}
     </div>

package/src/Graph/Chart/models.ts

@@ -1,6 +1,5 @@
-import type { ReactNode } from 'react';
-
 import type { ScaleLinear } from 'd3-scale';
+import type { ReactNode } from 'react';
 
 import type { BarStyle } from '../BarChart/models';
 import type {
@@ -10,12 +9,11 @@ import type {
 } from '../common/Axes/models';
 import type { AdditionalLineProps, LineChartData } from '../common/models';
 import type { Line, TimeValue } from '../common/timeSeries/models';
-
-import type { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
 import type {
   AreaRegularLines,
   AreaStackedLines
 } from './BasicComponents/Lines/models';
+import type { FactorsVariation } from './BasicComponents/Lines/Threshold/models';
 import type { TimelineEvent } from './InteractiveComponents/Annotations/models';
 
 export interface LineChartEndpoint {

package/src/Graph/Chart/useChartData.ts

@@ -1,5 +1,3 @@
-import { useCallback, useMemo, useRef } from 'react';
-
 import {
   compose,
   flatten,
@@ -13,10 +11,10 @@ import {
   sortBy,
   toLower
 } from 'ramda';
+import { useCallback, useMemo, useRef } from 'react';
 
 import type { LineChartData } from '../common/models';
 import { emphasizeCurveColor } from '../common/utils';
-
 import { adjustGraphData } from './helpers';
 import type { Data } from './models';
 
@@ -32,7 +30,7 @@ interface Props {
 
 const getBoolean = (value) => Boolean(Number(value));
 
-const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
+const useGraphData = ({ data }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
 
   const dataWithAdjustedMetricsColor = useMemo(() => {
@@ -54,8 +52,8 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
           ...item,
           ds_data: {
             ...item?.ds_data,
-            ds_invert: getBoolean(item?.ds_data?.ds_invert),
-            ds_filled: getBoolean(item?.ds_data?.ds_filled)
+            ds_filled: getBoolean(item?.ds_data?.ds_filled),
+            ds_invert: getBoolean(item?.ds_data?.ds_invert)
           }
         }));
 
@@ -96,7 +94,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       timeSeries,
       title
     };
-  }, [dataWithAdjustedMetricsColor, end, start]);
+  }, [dataWithAdjustedMetricsColor]);
 
   prepareData();
 

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -1,10 +1,10 @@
+import { Typography } from '@mui/material';
+
 import { animated, to, useTransition } from '@react-spring/web';
-import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
+import type { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
 import { equals, includes, isNil, pluck } from 'ramda';
 
-import { Typography } from '@mui/material';
-
-import { Thresholds } from '../common/models';
+import type { Thresholds } from '../common/models';
 
 type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
 

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

@@ -5,8 +5,7 @@ import {
   warningThresholds
 } from '../common/testUtils';
 import dataLastWeek from '../mockedData/lastWeek.json';
-
-import { Gauge, Props } from './Gauge';
+import { Gauge, type Props } from './Gauge';
 
 const initialize = (
   args: Omit<Props, 'data' | 'labels' | 'baseColor'>

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -1,7 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import dataLastWeek from '../mockedData/lastWeek.json';
-
 import { Gauge } from './Gauge';
 
 const meta: Meta<typeof Gauge> = {

package/src/Graph/Gauge/Gauge.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@mui/material';
-import { LineChartData, Thresholds } from '../common/models';
-import { getMetricWithLatestData } from '../common/timeSeries';
-import { Metric } from '../common/timeSeries/models';
 
+import type { LineChartData, Thresholds } from '../common/models';
+import { getMetricWithLatestData } from '../common/timeSeries';
+import type { Metric } from '../common/timeSeries/models';
 import ResponsiveGauge from './ResponsiveGauge';
 import { useResizeObserver } from './useResizeObserver';
 
@@ -30,15 +30,15 @@ export const Gauge = ({
   const metric = getMetricWithLatestData(data) as Metric;
 
   return (
-    <Box sx={{ width: '100%', height: '100%' }} ref={ref}>
+    <Box ref={ref} sx={{ height: '100%', width: '100%' }}>
       <ResponsiveGauge
         baseColor={baseColor}
         displayAsRaw={displayAsRaw}
         height={height}
+        max={max}
         metric={metric}
         thresholds={thresholds}
         width={width}
-        max={max}
       />
     </Box>
   );

package/src/Graph/Gauge/PieData.tsx

@@ -1,14 +1,13 @@
+import { useTheme } from '@mui/material';
+
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
 import { identity } from 'ramda';
 
-import { useTheme } from '@mui/material';
-
 import { getColorFromDataAndTresholds } from '../common/utils';
-
 import AnimatedPie from './AnimatedPie';
+import type { GaugeProps } from './models';
 import { thresholdThickness } from './Thresholds';
-import { GaugeProps } from './models';
 import { getAngles } from './utils';
 
 const dataThickness = 45;

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,21 +1,19 @@
-import { useRef } from 'react';
+import { Box, useTheme } from '@mui/material';
 
 import { Group } from '@visx/group';
 import { Tooltip } from '@visx/visx';
 import { flatten, head, pluck } from 'ramda';
-
-import { Box, useTheme } from '@mui/material';
+import { useRef } from 'react';
 
 import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 import { margins } from '../common/margins';
 import { formatMetricValueWithUnit } from '../common/timeSeries';
-import { Metric } from '../common/timeSeries/models';
+import type { Metric } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
 import { getColorFromDataAndTresholds } from '../common/utils';
-
+import type { GaugeProps } from './models';
 import PieData from './PieData';
 import Thresholds from './Thresholds';
-import { GaugeProps } from './models';
 
 interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
   displayAsRaw?: boolean;
@@ -95,6 +93,7 @@ const ResponsiveGauge = ({
         placement="top"
       >
         <svg height={height} ref={svgRef} width={width}>
+          <title>gauge</title>
           <Group
             left={centerX + margins.left}
             top={centerY + margins.top + baseSize / 8}

package/src/Graph/Gauge/Thresholds.tsx

@@ -1,11 +1,11 @@
+import { useTheme } from '@mui/material';
+
 import { scaleOrdinal } from '@visx/scale';
 import { Pie } from '@visx/shape';
 import { equals, pluck } from 'ramda';
 
-import { useTheme } from '@mui/material';
-
 import AnimatedPie from './AnimatedPie';
-import { GaugeProps } from './models';
+import type { GaugeProps } from './models';
 import { getAngles } from './utils';
 
 export const thresholdThickness = 12;

package/src/Graph/Gauge/models.ts

@@ -1,5 +1,5 @@
-import { Thresholds } from '../common/models';
-import { Metric } from '../common/timeSeries/models';
+import type { Thresholds } from '../common/models';
+import type { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;