@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,15 +1,19 @@
-import { Dispatch, MutableRefObject, SetStateAction, useMemo } from 'react';
+import { Stack } from '@mui/material';
 
 import { equals, gt, isNil, lte, reduce } from 'ramda';
-
-import { Stack } from '@mui/material';
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useMemo
+} from 'react';
 
 import Legend from '../../Chart/Legend';
 import { legendWidth } from '../../Chart/Legend/Legend.styles';
-import { LegendModel } from '../../Chart/models';
-import { Line } from '../timeSeries/models';
+import type { LegendModel } from '../../Chart/models';
+import type { Line } from '../timeSeries/models';
 import Header from './Header';
-import { LineChartHeader } from './Header/models';
+import type { LineChartHeader } from './Header/models';
 import { useBaseChartStyles } from './useBaseChartStyles';
 
 interface Props {
@@ -80,7 +84,7 @@ const BaseChart = ({
   return (
     <>
       <div ref={titleRef}>
-        <Header header={header} title={title} ref={titleRef} />
+        <Header header={header} ref={titleRef} title={title} />
       </div>
       <div className={classes.container}>
         <Stack
@@ -100,19 +104,19 @@ const BaseChart = ({
               >
                 <Legend
                   base={base}
+                  graphHeight={graphHeight}
                   height={height}
                   limitLegend={limitLegend}
                   lines={lines}
                   mode={legend?.mode}
                   placement="left"
                   renderExtraComponent={legend?.renderExtraComponent}
+                  secondaryClick={legend?.secondaryClick}
                   setLinesGraph={setLines}
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
                   showCalculations={legend?.showCalculations}
-                  secondaryClick={legend?.secondaryClick}
-                  graphHeight={graphHeight}
                 />
               </div>
             )}
@@ -126,17 +130,17 @@ const BaseChart = ({
         >
           <Legend
             base={base}
+            graphHeight={graphHeight}
             height={height}
             limitLegend={limitLegend}
             lines={lines}
             mode={legend.mode}
             placement="bottom"
             renderExtraComponent={legend.renderExtraComponent}
+            secondaryClick={legend?.secondaryClick}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-            secondaryClick={legend?.secondaryClick}
             showCalculations={legend?.showCalculations}
-            graphHeight={graphHeight}
           />
         </div>
       )}

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

@@ -1,12 +1,12 @@
-import { MutableRefObject, ReactElement } from 'react';
-
 import { Group } from '@visx/visx';
 import { equals } from 'ramda';
+import type { MutableRefObject, ReactElement } from 'react';
+
 import { margin } from '../../Chart/common';
-import { ChartAxis } from '../../Chart/models';
+import type { ChartAxis } from '../../Chart/models';
 import Axes from '../Axes';
 import Grids from '../Grids';
-import { Line, TimeValue } from '../timeSeries/models';
+import type { Line, TimeValue } from '../timeSeries/models';
 import { useMarginTop } from '../useMarginTop';
 import { computeGElementMarginLeft } from '../utils';
 
@@ -62,10 +62,11 @@ const ChartSvgWrapper = ({
       ref={svgRef}
       width="100%"
     >
+      <title>chart</title>
       <Group.Group
         left={computeGElementMarginLeft({
-          maxCharacters: maxAxisCharacters,
-          hasSecondUnit
+          hasSecondUnit,
+          maxCharacters: maxAxisCharacters
         })}
         top={marginTop}
       >

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,10 +1,10 @@
-import { ReactElement } from 'react';
-
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { LineChartHeader } from './models';
+import type { ReactElement } from 'react';
+
+import type { LineChartHeader } from './models';
 import { ussHeaderChartStyles } from './useHeaderStyles';
 
 interface Props {
@@ -22,7 +22,7 @@ const Header = ({ title, header }: Props): ReactElement => {
       <div className={classes.header}>
         <div />
         {displayTitle && (
-          <Typography align="center" variant="body1" className={classes.title}>
+          <Typography align="center" className={classes.title} variant="body1">
             {title}
           </Typography>
         )}

package/src/Graph/common/BaseChart/Header/useHeaderStyles.ts

@@ -7,7 +7,7 @@ export const ussHeaderChartStyles = makeStyles()({
     width: '100%'
   },
   title: {
-    whiteSpace: 'pre-wrap',
-    lineHeight: '1.2'
+    lineHeight: '1.2',
+    whiteSpace: 'pre-wrap'
   }
 });

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

@@ -1,8 +1,7 @@
-import { RefCallback } from 'react';
-
 import { equals, isNil } from 'ramda';
-
+import type { RefCallback } from 'react';
 import useResizeObserver from 'use-resize-observer';
+
 import { margin } from '../../Chart/common';
 import { margins } from '../margins';
 import { useMarginTop } from '../useMarginTop';

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

@@ -1,8 +1,9 @@
 import { isEmpty } from 'ramda';
 import { useMemo } from 'react';
-import { ChartAxis } from '../../Chart/models';
-import { Data } from '../Axes/models';
-import { Thresholds } from '../models';
+
+import type { ChartAxis } from '../../Chart/models';
+import type { Data } from '../Axes/models';
+import type { Thresholds } from '../models';
 import { getFormattedAxisValues } from '../utils';
 
 interface UseComputeYAxisMaxCharactersProps {
@@ -30,12 +31,12 @@ export const useComputeYAxisMaxCharacters = ({
   const maxLeftValue = useMemo(
     () =>
       getFormattedAxisValues({
-        threshold: thresholds?.critical ?? [],
         axisUnit: axis?.axisYLeft?.unit ?? firstUnit,
-        timeSeries: graphData?.timeSeries ?? [],
-        thresholdUnit,
+        base: graphData?.baseAxis,
         lines: graphData?.lines ?? [],
-        base: graphData?.baseAxis
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData?.timeSeries ?? []
       }),
     [
       thresholds?.critical,
@@ -51,12 +52,12 @@ export const useComputeYAxisMaxCharacters = ({
   const maxRightValue = useMemo(
     () =>
       getFormattedAxisValues({
-        threshold: thresholds?.critical ?? [],
         axisUnit: axis?.axisYRight?.unit ?? secondUnit,
-        timeSeries: graphData.timeSeries ?? [],
-        thresholdUnit,
+        base: graphData.baseAxis,
         lines: graphData.lines ?? [],
-        base: graphData.baseAxis
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData.timeSeries ?? []
       }),
     [
       thresholds?.critical,

package/src/Graph/common/Grids/index.tsx

@@ -1,10 +1,9 @@
-import { useMemo } from 'react';
-
 import { Grid } from '@visx/visx';
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { includes } from 'ramda';
+import { useMemo } from 'react';
 
-import { ChartAxis } from '../../Chart/models';
+import type { ChartAxis } from '../../Chart/models';
 
 interface Props extends Pick<ChartAxis, 'gridLinesType'> {
   height: number;

package/src/Graph/common/Thresholds/ThresholdLine.tsx

@@ -1,7 +1,7 @@
-import { equals } from 'ramda';
-
 import { useTheme } from '@mui/material';
 
+import { equals } from 'ramda';
+
 import { margin } from '../../Chart/common';
 
 interface Props {
@@ -63,14 +63,17 @@ export const ThresholdLine = ({
         strokeWidth={2}
         {...coordinates}
       />
-      <line
-        data-testid={`${thresholdType}-line-${value}-tooltip`}
-        stroke="transparent"
-        strokeWidth={5}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={hideTooltip}
-        {...coordinates}
-      />
+      {
+        // biome-ignore lint/a11y/noStaticElementInteractions: need it
+        <line
+          data-testid={`${thresholdType}-line-${value}-tooltip`}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={hideTooltip}
+          stroke="transparent"
+          strokeWidth={5}
+          {...coordinates}
+        />
+      }
     </>
   );
 };

package/src/Graph/common/Thresholds/Thresholds.tsx

@@ -1,10 +1,9 @@
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { equals } from 'ramda';
 
-import { Thresholds as ThresholdsModel } from '../models';
+import type { Thresholds as ThresholdsModel } from '../models';
 import { getUnits, getYScale } from '../timeSeries';
-import { Line } from '../timeSeries/models';
-
+import type { Line } from '../timeSeries/models';
 import { ThresholdLine } from './ThresholdLine';
 
 interface Props {

package/src/Graph/common/models.ts

@@ -1,4 +1,4 @@
-import { Metric } from './timeSeries/models';
+import type { Metric } from './timeSeries/models';
 
 export interface LineChartData {
   global;

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

@@ -1,3 +1,4 @@
+import type { LineChartData } from '../models';
 import {
   formatMetricValue,
   formatMetricValueWithUnit,
@@ -5,9 +6,9 @@ import {
   getInvertedStackedLines,
   getLineData,
   getLineForMetric,
+  getMetrics,
   getMetricValuesForLines,
   getMetricValuesForUnit,
-  getMetrics,
   getNotInvertedStackedLines,
   getSortedStackedLines,
   getStackedMetricValues,
@@ -16,7 +17,6 @@ import {
   getUnits,
   hasUnitStackedLines
 } from '.';
-import { LineChartData } from '../models';
 
 type TestCase = [number | null, string, 1000 | 1024, string | null];
 
@@ -381,14 +381,11 @@ describe('timeSeries', () => {
       [null, 'B', 1024, null]
     ];
 
-    it.each(cases)(
-      'formats the given value to a human readable form according to the given unit and base',
-      (value, unit, base, formattedResult) => {
-        expect(formatMetricValue({ base, unit, value })).toEqual(
-          formattedResult
-        );
-      }
-    );
+    it.each(
+      cases
+    )('formats the given value to a human readable form according to the given unit and base', (value, unit, base, formattedResult) => {
+      expect(formatMetricValue({ base, unit, value })).toEqual(formattedResult);
+    });
   });
 
   describe('getSortedStackedLines', () => {
@@ -626,31 +623,33 @@ describe('Format value with unit', () => {
   });
 
   describe('Format the value as human readable', () => {
-    it.each(humanReadableTestCases)(
-      'formats the value with $unit',
-      ({ value, unit, expectedResult }) => {
-        expect(
-          formatMetricValueWithUnit({
-            unit,
-            value
-          })
-        ).toEqual(expectedResult);
-      }
-    );
+    it.each(humanReadableTestCases)('formats the value with $unit', ({
+      value,
+      unit,
+      expectedResult
+    }) => {
+      expect(
+        formatMetricValueWithUnit({
+          unit,
+          value
+        })
+      ).toEqual(expectedResult);
+    });
   });
 
   describe('Format the value as raw', () => {
-    it.each(rawTestCases)(
-      'formats the value with $unit',
-      ({ value, unit, expectedResult }) => {
-        expect(
-          formatMetricValueWithUnit({
-            isRaw: true,
-            unit,
-            value
-          })
-        ).toEqual(expectedResult);
-      }
-    );
+    it.each(rawTestCases)('formats the value with $unit', ({
+      value,
+      unit,
+      expectedResult
+    }) => {
+      expect(
+        formatMetricValueWithUnit({
+          isRaw: true,
+          unit,
+          value
+        })
+      ).toEqual(expectedResult);
+    });
   });
 });

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

@@ -1,10 +1,8 @@
 import { Scale } from '@visx/visx';
 import { bisector } from 'd3-array';
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import numeral from 'numeral';
 import {
-  path,
-  T,
   add,
   addIndex,
   always,
@@ -26,6 +24,7 @@ import {
   lt,
   map,
   negate,
+  path,
   pipe,
   pluck,
   prop,
@@ -34,13 +33,13 @@ import {
   reject,
   sortBy,
   split,
+  T,
   uniq
 } from 'ramda';
 
 import { margin } from '../../Chart/common';
-import { LineChartData } from '../models';
-
-import {
+import type { LineChartData } from '../models';
+import type {
   AxeScale,
   FormatMetricValueProps,
   Line,
@@ -137,11 +136,11 @@ const toLine = ({
   metric_id,
   minimum_value,
   name: legend,
+  stackKey: ds_data.ds_stack_key || null,
   stackOrder:
     equals(ds_data.ds_stack, '1') || equals(ds_data.ds_stack, true)
       ? Number.parseInt(ds_data.ds_order || '0', 10)
       : null,
-  stackKey: ds_data.ds_stack_key || null,
   transparency: ds_data.ds_transparency,
   unit
 });
@@ -441,9 +440,9 @@ const getScale = ({
 
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
+      clamp: min || max,
       domain: [-greatestValue, greatestValue],
-      range: isHorizontal ? range : range.reverse(),
-      clamp: min || max
+      range: isHorizontal ? range : range.reverse()
     });
   }
 
@@ -451,9 +450,9 @@ const getScale = ({
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
+    clamp: min || max,
     domain,
-    range: isHorizontal ? range : range.reverse(),
-    clamp: min || max
+    range: isHorizontal ? range : range.reverse()
   });
 };
 
@@ -549,12 +548,12 @@ const getYScaleUnit = ({
     invert,
     isCenteredZero,
     isHorizontal,
+    max: boundaryToApplyToUnit({ boundariesUnit, boundary: max, unit }),
+    min: boundaryToApplyToUnit({ boundariesUnit, boundary: min, unit }),
     scale,
     scaleLogarithmicBase,
     stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : [],
-    min: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: min }),
-    max: boundaryToApplyToUnit({ unit, boundariesUnit, boundary: max })
+    thresholds: shouldApplyThresholds ? thresholds : []
   });
 };
 
@@ -598,24 +597,24 @@ const getYScalePerUnit = ({
     return {
       ...acc,
       [unit]: getYScaleUnit({
+        boundariesUnit,
         dataLines,
         dataTimeSeries,
         invert: dataLines.some(
           ({ unit: lineUnit, invert }) => equals(lineUnit, unit) && invert
         ),
+        isBarChart,
         isCenteredZero,
+        isFilled,
         isHorizontal,
+        max,
+        min,
         scale,
         scaleLogarithmicBase,
-        thresholdUnit,
         thresholds,
+        thresholdUnit,
         unit,
-        valueGraphHeight,
-        min,
-        max,
-        isBarChart,
-        boundariesUnit,
-        isFilled
+        valueGraphHeight
       })
     };
   }, {});
@@ -631,7 +630,7 @@ const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime({ value, unit: 'ms' });
+        return formatTime({ unit: 'ms', value });
       },
       regexps: {
         format: /(ms)/,
@@ -652,7 +651,7 @@ const registerSecondsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'seconds', {
       format: (value) => {
-        return formatTime({ value, unit: 's' });
+        return formatTime({ unit: 's', value });
       },
       regexps: {
         format: /(s)/,
@@ -853,9 +852,9 @@ export const getStackedLinesTimeSeriesPerStackAndUnit = ({
         [stackedKey]: {
           lines: relatedLines,
           timeSeries: getTimeSeriesForLines({
+            invert,
             lines: relatedLines,
-            timeSeries,
-            invert
+            timeSeries
           })
         }
       };
@@ -864,11 +863,11 @@ export const getStackedLinesTimeSeriesPerStackAndUnit = ({
   );
 
   return {
+    stackedKeys,
     stackedLinesTimeSeriesPerStackKeyAndUnit: {
       ...stackedLinesTimeSeriesPerStackKey,
       ...stackedLinesTimeSeriesPerUnit
-    },
-    stackedKeys
+    }
   };
 };
 

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

@@ -1,6 +1,6 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleLinear, ScaleTime } from 'd3-scale';
 
-import { ChartAxis } from '../../Chart/models';
+import type { ChartAxis } from '../../Chart/models';
 
 interface DsData {
   ds_color_area: string;

package/src/Graph/common/useMarginTop.ts

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

package/src/Graph/common/utils.ts

@@ -1,6 +1,8 @@
+import { darken, getLuminance, lighten, type Theme } from '@mui/material';
+
+import dayjs from 'dayjs';
 import numeral from 'numeral';
 import {
-  T,
   always,
   cond,
   equals,
@@ -15,18 +17,16 @@ import {
   lt,
   lte,
   pluck,
+  T,
   type
 } from 'ramda';
 
-import { Theme, darken, getLuminance, lighten } from '@mui/material';
-
-import dayjs from 'dayjs';
-import { BarStyle } from '../BarChart/models';
+import type { BarStyle } from '../BarChart/models';
 import { margin } from '../Chart/common';
-import { LineStyle } from '../Chart/models';
-import { Threshold, Thresholds } from './models';
+import type { LineStyle } from '../Chart/models';
+import type { Threshold, Thresholds } from './models';
 import { formatMetricValueWithUnit } from './timeSeries';
-import { Line, TimeValue } from './timeSeries/models';
+import type { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
   baseColor?: string;
@@ -235,9 +235,9 @@ export const getFormattedAxisValues = ({
   const formattedData = metricIds.map((metricId) =>
     timeSeries.map((data) =>
       formatMetricValueWithUnit({
-        value: data[metricId],
+        base,
         unit: axisUnit,
-        base
+        value: data[metricId]
       })
     )
   );
@@ -247,9 +247,9 @@ export const getFormattedAxisValues = ({
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
         formatMetricValueWithUnit({
-          value,
+          base,
           unit: axisUnit,
-          base
+          value
         })
       ) || []
     : [];

package/src/Graph/index.ts

@@ -1,20 +1,20 @@
 export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
+
+export { default as BarChart } from './BarChart/BarChart';
+export { BarStack } from './BarStack';
 export { default as LineChart } from './Chart';
 export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
+export * from './Chart/models';
 export { default as useLineChartData } from './Chart/useChartData';
-export { default as BarChart } from './BarChart/BarChart';
-export { Gauge } from './Gauge';
-export { SingleBar } from './SingleBar';
-export { Text as GraphText } from './Text';
 export { default as Header } from './common/BaseChart/Header';
-
-export { HeatMap } from './HeatMap';
-export { BarStack } from './BarStack';
-export { PieChart } from './PieChart';
-export { Timeline } from './Timeline';
-export * from './Tree';
 export type { LineChartData, Threshold, Thresholds } from './common/models';
 export * from './common/timeSeries';
 export type { Metric } from './common/timeSeries/models';
-export * from './Chart/models';
+export { Gauge } from './Gauge';
+export { HeatMap } from './HeatMap';
+export { PieChart } from './PieChart';
 export * from './PieChart/models';
+export { SingleBar } from './SingleBar';
+export { Text as GraphText } from './Text';
+export { Timeline } from './Timeline';
+export * from './Tree';