@centreon/ui 26.3.5 → 26.3.7

package/src/Graph/SingleBar/SingleBar.tsx

@@ -1,8 +1,8 @@
 import { Skeleton } from '@mui/material';
-import { ParentSize } from '../..';
 
+import { ParentSize } from '../..';
+import type { SingleBarProps } from './models';
 import ResponsiveSingleBar from './ResponsiveSingleBar';
-import { SingleBarProps } from './models';
 
 const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
   if (!data) {

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -1,12 +1,11 @@
-import { equals } from 'ramda';
-
 import { useTheme } from '@mui/material';
 
-import { margins } from '../common/margins';
-
+import { equals } from 'ramda';
 import { useMemo } from 'react';
-import { groupMargin } from './Thresholds';
+
+import { margins } from '../common/margins';
 import { SingleBarProps } from './models';
+import { groupMargin } from './Thresholds';
 
 export const barHeights = {
   medium: 72,
@@ -90,17 +89,20 @@ export const ThresholdLine = ({
         y1={lineY1}
         y2={lineY2}
       />
-      <line
-        data-testid={`${thresholdType}-line-${value}-tooltip`}
-        stroke="transparent"
-        strokeWidth={5}
-        x1={scaledValue}
-        x2={scaledValue + 1}
-        y1={lineY1}
-        y2={lineY2}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={hideTooltip}
-      />
+      {
+        // biome-ignore lint/a11y/noStaticElementInteractions: need it
+        <line
+          data-testid={`${thresholdType}-line-${value}-tooltip`}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={hideTooltip}
+          stroke="transparent"
+          strokeWidth={5}
+          x1={scaledValue}
+          x2={scaledValue + 1}
+          y1={lineY1}
+          y2={lineY2}
+        />
+      }
     </>
   );
 };

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,6 +1,5 @@
-import { Thresholds as ThresholdsModel } from '../common/models';
+import type { Thresholds as ThresholdsModel } from '../common/models';
 import { SingleBarProps } from './models';
-
 import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
@@ -31,33 +30,33 @@ const Thresholds = ({
     {thresholds.warning.map(({ value, label }) => (
       <ThresholdLine
         barHeight={barHeight}
+        direction={direction}
         hideTooltip={hideTooltip}
         isSmall={isSmall}
         key={`warning-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}
         size={size}
+        textWidth={textWidth}
         thresholdType="warning"
         value={value}
         xScale={xScale}
-        direction={direction}
-        textWidth={textWidth}
       />
     ))}
     {thresholds.critical.map(({ value, label }) => (
       <ThresholdLine
         barHeight={barHeight}
+        direction={direction}
         hideTooltip={hideTooltip}
         isSmall={isSmall}
         key={`critical-${value.toString()}`}
         label={label}
         showTooltip={showTooltip}
         size={size}
+        textWidth={textWidth}
         thresholdType="critical"
         value={value}
         xScale={xScale}
-        direction={direction}
-        textWidth={textWidth}
       />
     ))}
   </>

package/src/Graph/SingleBar/models.ts

@@ -1,4 +1,4 @@
-import { LineChartData, Thresholds } from '../common/models';
+import type { LineChartData, Thresholds } from '../common/models';
 
 export interface SingleBarProps {
   baseColor?: string;

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

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

package/src/Graph/Text/Text.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 { Text } from '.';
 
 const meta: Meta<typeof Text> = {

package/src/Graph/Text/Text.tsx

@@ -1,17 +1,16 @@
-import { isNil } from 'ramda';
-
 import { useTheme } from '@mui/material';
 
+import { isNil } from 'ramda';
+import type { ReactElement } from 'react';
+import useResizeObserver from 'use-resize-observer';
+
 import FluidTypography from '../../Typography/FluidTypography';
-import { LineChartData, Thresholds } from '../common/models';
+import type { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValueWithUnit,
   getMetricWithLatestData
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
-
-import { type ReactElement } from 'react';
-import useResizeObserver from 'use-resize-observer';
 import { useTextStyles } from './Text.styles';
 
 export interface Props {
@@ -93,18 +92,18 @@ export const Text = ({
           <FluidTypography
             containerClassName={cx(classes.thresholdLabel, classes.warning)}
             max="30px"
+            min={minThresholds}
             pref={prefThresholds}
             text={`${warningLabel}${warningThresholdLabels.join(' - ')}`}
             variant="h5"
-            min={minThresholds}
           />
           <FluidTypography
             containerClassName={cx(classes.thresholdLabel, classes.critical)}
             max="30px"
+            min={minThresholds}
             pref={prefThresholds}
             text={`${criticalLabel}${criticalThresholdLabels.join(' - ')}`}
             variant="h5"
-            min={minThresholds}
           />
         </div>
       )}

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -1,23 +1,22 @@
+import { Typography, useTheme } from '@mui/material';
+
 import {
   dateTimeFormat,
   getXAxisTickFormat,
   useLocaleDateTimeFormat
 } from '@centreon/ui';
-
-import { Typography, useTheme } from '@mui/material';
-
-import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-
 import { userAtom } from '@centreon/ui-context';
-import { Axis } from '@visx/visx';
 
 import { scaleTime } from '@visx/scale';
 import { BarRounded } from '@visx/shape';
+import { Axis } from '@visx/visx';
+import dayjs from 'dayjs';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { useAtomValue } from 'jotai';
 import { equals } from 'ramda';
 import { useCallback } from 'react';
+
 import { Tooltip } from '../../components';
 import { margins } from '../common/margins';
 import type { TimelineProps } from './models';
@@ -49,9 +48,9 @@ const Timeline = ({
   const theme = useTheme();
 
   const xScale = scaleTime({
+    clamp: true,
     domain: [new Date(startDate), new Date(endDate)],
-    range: [margins.left, width - margins.right],
-    clamp: true
+    range: [margins.left, width - margins.right]
   });
 
   const numTicks = Math.min(Math.ceil(width / 82), 12);
@@ -64,7 +63,7 @@ const Timeline = ({
         date: dayjs(start).tz(timezone).toDate(),
         formatString: dateTimeFormat
       }),
-    [dateTimeFormat, timezone]
+    [timezone, format]
   );
 
   const getFormattedEnd = useCallback(
@@ -73,34 +72,35 @@ const Timeline = ({
         date: dayjs(end).tz(timezone).toDate(),
         formatString: dateTimeFormat
       }),
-    [dateTimeFormat, timezone]
+    [timezone, format]
   );
 
   return (
-    <svg width={width} height={height + axisPadding}>
+    <svg height={height + axisPadding} width={width}>
+      <title>timeline</title>
       {data.map(({ start, end, color }, idx) => (
         <Tooltip
-          hasCaret
           classes={{
             tooltip: cx(classes.tooltip, tooltipClassName)
           }}
           followCursor={false}
+          hasCaret
           key={`rect-${start}--${end}`}
           label={
             TooltipContent ? (
               <TooltipContent
-                start={getFormattedStart(start)}
-                end={getFormattedEnd(end)}
                 color={color}
                 duration={getTimeDifference({
-                  start: dayjs(start),
-                  end: dayjs(end)
+                  end: dayjs(end),
+                  start: dayjs(start)
                 })}
+                end={getFormattedEnd(end)}
+                start={getFormattedStart(start)}
               />
             ) : (
               <div style={{ color }}>
                 <Typography variant="body2">
-                  {getTimeDifference({ start: dayjs(start), end: dayjs(end) })}
+                  {getTimeDifference({ end: dayjs(end), start: dayjs(start) })}
                 </Typography>
                 <Typography variant="body2">{`${format({ date: start, formatString: 'L LT' })} - ${format({ date: end, formatString: 'L LT' })}`}</Typography>
               </div>
@@ -110,39 +110,42 @@ const Timeline = ({
         >
           <g>
             <BarRounded
-              x={xScale(dayjs(start).tz(timezone))}
-              y={0}
-              width={
-                xScale(dayjs(end).tz(timezone)) -
-                xScale(dayjs(start).tz(timezone))
-              }
-              height={height - margins.bottom}
               fill={color}
+              height={height - margins.bottom}
               left={equals(idx, 0)}
               radius={4}
               right={equals(idx, data.length - 1)}
+              width={
+                xScale(dayjs(end).tz(timezone)) -
+                xScale(dayjs(start).tz(timezone))
+              }
+              x={xScale(dayjs(start).tz(timezone))}
+              y={0}
             />
           </g>
         </Tooltip>
       ))}
 
       <Axis.AxisBottom
-        top={height - margins.bottom + axisPadding}
-        scale={xScale}
         numTicks={numTicks}
+        scale={xScale}
+        stroke={theme.palette.text.primary}
         tickFormat={(value) =>
           format({
             date: new Date(value),
-            formatString: getXAxisTickFormat({ end: endDate, start: startDate })
+            formatString: getXAxisTickFormat({
+              end: endDate,
+              start: startDate
+            })
           })
         }
-        stroke={theme.palette.text.primary}
-        tickStroke={theme.palette.text.primary}
         tickLabelProps={() => ({
           fill: theme.palette.text.primary,
           fontSize: theme.typography.caption.fontSize,
           textAnchor: 'middle'
         })}
+        tickStroke={theme.palette.text.primary}
+        top={height - margins.bottom + axisPadding}
       />
     </svg>
   );

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

@@ -1,43 +1,45 @@
 import { userAtom } from '@centreon/ui-context';
-import { Provider, createStore } from 'jotai';
+
+import { createStore, Provider } from 'jotai';
+
+import type { Tooltip } from './models';
 import Timeline from './Timeline';
-import { Tooltip } from './models';
 
 const data = [
   {
-    start: '2024-09-09T10:57:42+02:00',
+    color: 'green',
     end: '2024-09-09T11:15:00+02:00',
-    color: 'green'
+    start: '2024-09-09T10:57:42+02:00'
   },
   {
-    start: '2024-09-09T11:15:00+02:00',
+    color: 'red',
     end: '2024-09-09T11:30:00+02:00',
-    color: 'red'
+    start: '2024-09-09T11:15:00+02:00'
   },
   {
-    start: '2024-09-09T11:30:00+02:00',
+    color: 'gray',
     end: '2024-09-09T11:45:00+02:00',
-    color: 'gray'
+    start: '2024-09-09T11:30:00+02:00'
   },
   {
-    start: '2024-09-09T11:45:00+02:00',
+    color: 'green',
     end: '2024-09-09T12:00:00+02:00',
-    color: 'green'
+    start: '2024-09-09T11:45:00+02:00'
   },
   {
-    start: '2024-09-09T12:00:00+02:00',
+    color: 'red',
     end: '2024-09-09T12:20:00+02:00',
-    color: 'red'
+    start: '2024-09-09T12:00:00+02:00'
   },
   {
-    start: '2024-09-09T12:20:00+02:00',
+    color: 'gray',
     end: '2024-09-09T12:40:00+02:00',
-    color: 'gray'
+    start: '2024-09-09T12:20:00+02:00'
   },
   {
-    start: '2024-09-09T12:40:00+02:00',
+    color: 'green',
     end: '2024-09-09T12:57:42+02:00',
-    color: 'green'
+    start: '2024-09-09T12:40:00+02:00'
   }
 ];
 
@@ -48,11 +50,11 @@ const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
   <div
     data-testid="tooltip-content"
     style={{
+      alignItems: 'center',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
       gap: '10px',
+      justifyContent: 'center',
       padding: '5px'
     }}
   >
@@ -64,7 +66,7 @@ const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
 );
 
 const store = createStore();
-store.set(userAtom, { timezone: 'Europe/Paris', locale: 'en' });
+store.set(userAtom, { locale: 'en', timezone: 'Europe/Paris' });
 
 const initialize = (displayDefaultTooltip = true): void => {
   cy.mount({
@@ -78,8 +80,8 @@ const initialize = (displayDefaultTooltip = true): void => {
         >
           <Timeline
             data={data}
-            startDate={startDate}
             endDate={endDate}
+            startDate={startDate}
             TooltipContent={displayDefaultTooltip ? undefined : TooltipContent}
           />
         </div>

package/src/Graph/Timeline/Timeline.stories.tsx

@@ -1,23 +1,24 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Typography } from '@mui/material';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
 import Timeline from './Timeline';
 
 const data = [
   {
-    start: '2024-09-25T21:00:42+01:00',
+    color: 'gray',
     end: '2024-09-25T21:15:00+01:00',
-    color: 'gray'
+    start: '2024-09-25T21:00:42+01:00'
   },
   {
-    start: '2024-09-25T21:15:00+01:00',
+    color: 'green',
     end: '2024-09-25T21:54:00+01:00',
-    color: 'green'
+    start: '2024-09-25T21:15:00+01:00'
   },
   {
-    start: '2024-09-25T21:54:00+01:00',
+    color: 'red',
     end: '2024-09-25T22:30:00+01:00',
-    color: 'red'
+    start: '2024-09-25T21:54:00+01:00'
   }
 ];
 
@@ -26,7 +27,7 @@ const endDate = '2024-09-25T22:30:00+01:00';
 
 const Template = (args): JSX.Element => {
   return (
-    <div style={{ width: '700px', height: '100px' }}>
+    <div style={{ height: '100px', width: '700px' }}>
       <Timeline {...args} />
     </div>
   );
@@ -48,40 +49,40 @@ type Story = StoryObj<typeof Timeline>;
 export const Normal: Story = {
   args: {
     data,
-    startDate,
-    endDate
+    endDate,
+    startDate
   }
 };
 
 export const WithoutData: Story = {
   args: {
     data: [],
-    startDate,
-    endDate
+    endDate,
+    startDate
   }
 };
 
 export const WithSmallerTimeRangeThanData: Story = {
   args: {
     data,
-    startDate,
-    endDate: '2024-09-25T22:00:00+01:00'
+    endDate: '2024-09-25T22:00:00+01:00',
+    startDate
   }
 };
 
 export const WithCustomTooltip: Story = {
   args: {
     data,
-    startDate,
     endDate,
+    startDate,
     TooltipContent: ({ duration, color }) => (
       <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
         <div
           style={{
             backgroundColor: color,
-            width: '20px',
+            borderRadius: '4px',
             height: '20px',
-            borderRadius: '4px'
+            width: '20px'
           }}
         />
         <Typography>{duration}</Typography>

package/src/Graph/Timeline/Timeline.tsx

@@ -1,8 +1,8 @@
 import type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
-import { ParentSize } from '../..';
 
-import ResponsiveTimeline from './ResponsiveTimeline';
+import { ParentSize } from '../..';
 import type { TimelineProps } from './models';
+import ResponsiveTimeline from './ResponsiveTimeline';
 
 interface Props extends ParentSizeProps, TimelineProps {}
 
@@ -18,11 +18,11 @@ const Timeline = ({
     {({ width, height }) => (
       <ResponsiveTimeline
         data={data}
-        startDate={startDate}
         endDate={endDate}
+        height={height}
+        startDate={startDate}
         TooltipContent={TooltipContent}
         tooltipClassName={tooltipClassName}
-        height={height}
         width={width}
       />
     )}

package/src/Graph/Timeline/timeline.styles.ts

@@ -3,9 +3,9 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()((theme) => ({
   tooltip: {
     backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(1),
     boxShadow: theme.shadows[3],
-    maxWidth: 'none'
+    color: theme.palette.text.primary,
+    maxWidth: 'none',
+    padding: theme.spacing(1)
   }
 }));

package/src/Graph/Timeline/useTimeline.ts

@@ -1,8 +1,9 @@
-import dayjs, { Dayjs } from 'dayjs';
-
 import { usePluralizedTranslation } from '@centreon/ui';
+
+import dayjs, { type Dayjs } from 'dayjs';
 import { lt } from 'ramda';
 import { useCallback } from 'react';
+
 import {
   labelDay,
   labelHour,
@@ -36,27 +37,30 @@ export const useTimeline = (): UseTimelineState => {
 
       const timeUnits = [
         {
-          value: diffDuration.years(),
-          unit: pluralizedT({ label: labelYear, count: diffDuration.years() })
+          unit: pluralizedT({ count: diffDuration.years(), label: labelYear }),
+          value: diffDuration.years()
         },
         {
-          value: diffDuration.months(),
-          unit: pluralizedT({ label: labelMonth, count: diffDuration.months() })
+          unit: pluralizedT({
+            count: diffDuration.months(),
+            label: labelMonth
+          }),
+          value: diffDuration.months()
         },
         {
-          value: diffDuration.days(),
-          unit: pluralizedT({ label: labelDay, count: diffDuration.days() })
+          unit: pluralizedT({ count: diffDuration.days(), label: labelDay }),
+          value: diffDuration.days()
         },
         {
-          value: diffDuration.hours(),
-          unit: pluralizedT({ label: labelHour, count: diffDuration.hours() })
+          unit: pluralizedT({ count: diffDuration.hours(), label: labelHour }),
+          value: diffDuration.hours()
         },
         {
-          value: diffDuration.minutes(),
           unit: pluralizedT({
-            label: labelMinute,
-            count: diffDuration.minutes()
-          })
+            count: diffDuration.minutes(),
+            label: labelMinute
+          }),
+          value: diffDuration.minutes()
         }
       ];
 
@@ -66,7 +70,7 @@ export const useTimeline = (): UseTimelineState => {
 
       return readableUnits.slice(0, 2).join(', ');
     },
-    []
+    [pluralizedT]
   );
 
   const getWidth = useCallback(

package/src/Graph/Tree/DescendantNodes.tsx

@@ -1,10 +1,9 @@
-import { useState } from 'react';
-
 import { Group } from '@visx/group';
-import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import type { HierarchyPointNode } from '@visx/hierarchy/lib/types';
 import { gt, isNil, pluck } from 'ramda';
+import { useState } from 'react';
 
-import { BaseProp, Node, TreeProps } from './models';
+import type { BaseProp, Node, TreeProps } from './models';
 
 interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
   descendants: Array<HierarchyPointNode<Node<TData>>>;

package/src/Graph/Tree/Links.tsx

@@ -1,14 +1,14 @@
-import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+import { useTheme } from '@mui/material';
+
+import type { HierarchyPointLink } from '@visx/hierarchy/lib/types';
 import {
   LinkHorizontal,
   LinkHorizontalLine,
   LinkHorizontalStep
 } from '@visx/shape';
-import { T, always, cond, equals } from 'ramda';
-
-import { useTheme } from '@mui/material';
+import { always, cond, equals, T } from 'ramda';
 
-import { BaseProp, Node, TreeProps } from './models';
+import type { BaseProp, Node, TreeProps } from './models';
 
 interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;

package/src/Graph/Tree/StandaloneTree.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 
 import { ParentSize } from '../..';
-
+import type { BaseProp, TreeProps } from './models';
 import { Tree } from './Tree';
-import { BaseProp, TreeProps } from './models';
 
 export const StandaloneTree = <TData extends BaseProp>({
   tree,
@@ -18,6 +17,7 @@ export const StandaloneTree = <TData extends BaseProp>({
     <ParentSize>
       {({ width, height }) => (
         <svg height={height} width={width}>
+          <title>Tree</title>
           <Tree
             {...props}
             changeTree={setTree}