@centreon/ui 26.3.4 → 26.3.6

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -1,12 +1,11 @@
-import { useMemo, useRef } from 'react';
+import { alpha, Box, useTheme } from '@mui/material';
 
 import { animated, useSpring } from '@react-spring/web';
 import { scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { Group, Tooltip } from '@visx/visx';
 import { clamp, equals, flatten, head, pluck } from 'ramda';
-
-import { Box, alpha, useTheme } from '@mui/material';
+import { useMemo, useRef } from 'react';
 
 import { Tooltip as MuiTooltip } from '../../components/Tooltip';
 import { margins } from '../common/margins';
@@ -14,13 +13,12 @@ import {
   formatMetricValueWithUnit,
   getMetricWithLatestData
 } 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 { barHeights } from './ThresholdLine';
+import type { SingleBarProps } from './models';
+import { barHeights, lineMargins } from './ThresholdLine';
 import Thresholds, { groupMargin } from './Thresholds';
-import { SingleBarProps } from './models';
 
 interface Props extends SingleBarProps {
   height: number;
@@ -36,7 +34,9 @@ const ResponsiveSingleBar = ({
   baseColor,
   size = 'medium',
   showLabels = true,
-  max
+  max,
+  direction = 'column',
+  textWidth
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const theme = useTheme();
@@ -70,7 +70,7 @@ const ResponsiveSingleBar = ({
         theme,
         thresholds
       }),
-    [latestMetricData, thresholds, theme]
+    [latestMetricData, thresholds, theme, baseColor]
   );
 
   const isSmall = equals(size, 'small');
@@ -79,16 +79,26 @@ const ResponsiveSingleBar = ({
 
   const textHeight = isSmall ? 46 : 27;
 
+  const textY = useMemo(() => {
+    if (direction === 'row' && isSmall) {
+      return 2;
+    }
+    if (direction === 'row' && !isSmall) {
+      return 22;
+    }
+    return isSmall ? 10 : 25;
+  }, [direction, isSmall]);
+
   const text = showLabels && (
     <text
-      dominantBaseline="middle"
+      dominantBaseline={direction === 'row' ? 'hanging' : 'middle'}
       style={{
         fill: barColor,
         ...textStyle
       }}
-      textAnchor="middle"
-      x="50%"
-      y={isSmall ? 10 : 25}
+      textAnchor={direction === 'row' ? 'start' : 'middle'}
+      x={direction === 'row' ? 0 : '50%'}
+      y={textY}
     >
       {formatMetricValueWithUnit({
         base: 1000,
@@ -99,13 +109,18 @@ const ResponsiveSingleBar = ({
     </text>
   );
 
+  const widthMargin = useMemo(
+    () => (direction === 'row' && textWidth) || 0,
+    [direction, textWidth]
+  );
+
   const xScale = useMemo(
     () =>
       scaleLinear<number>({
         domain: [0, adaptedMaxValue],
-        range: [0, width - 10 || 0]
+        range: [0, width - widthMargin - 10 || 0]
       }),
-    [width, adaptedMaxValue]
+    [width, adaptedMaxValue, widthMargin]
   );
 
   const metricBarWidth = useMemo(
@@ -119,7 +134,10 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
+  const barY =
+    direction === 'row'
+      ? lineMargins[size] / 2
+      : groupMargin + (isSmall ? 0 : 2 * margins.top);
 
   const realBarHeight = !isSmall
     ? clamp(
@@ -153,6 +171,7 @@ const ResponsiveSingleBar = ({
           placement="top"
         >
           <svg height={height} ref={svgRef} width={width}>
+            <title>single bar</title>
             <Group.Group>
               {text}
               <animated.rect
@@ -161,7 +180,7 @@ const ResponsiveSingleBar = ({
                 height={realBarHeight}
                 rx={4}
                 style={springStyle}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               <Bar
@@ -171,16 +190,18 @@ const ResponsiveSingleBar = ({
                 ry={4}
                 stroke={alpha(theme.palette.text.primary, 0.3)}
                 width={maxBarWidth}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               {thresholds.enabled && (
                 <Thresholds
                   barHeight={realBarHeight}
+                  direction={direction}
                   hideTooltip={hideTooltip}
                   isSmall={isSmall}
                   showTooltip={showTooltip}
                   size={size}
+                  textWidth={textWidth}
                   thresholds={thresholds}
                   xScale={xScale}
                 />

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

@@ -5,9 +5,8 @@ import {
   warningThresholds
 } from '../common/testUtils';
 import dataLastWeek from '../mockedData/lastWeek.json';
-
+import type { SingleBarProps } from './models';
 import SingleBar from './SingleBar';
-import { SingleBarProps } from './models';
 
 const initialize = (
   args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
@@ -118,4 +117,29 @@ describe('Single bar', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the value on the left of the bar when the corresponding prop is set', () => {
+    initialize({
+      direction: 'row',
+      textWidth: 100,
+      thresholds: successThresholds
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value on the left of the bar when the corresponding prop is set and the size is mall', () => {
+    initialize({
+      direction: 'row',
+      size: 'small',
+      textWidth: 70,
+      thresholds: criticalThresholds
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/SingleBar/SingleBar.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 { SingleBar } from '.';
 
 const meta: Meta<typeof SingleBar> = {
@@ -12,7 +11,7 @@ export default meta;
 type Story = StoryObj<typeof SingleBar>;
 
 const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
+  <div style={{ height: '500px', width: '200px' }}>
     <SingleBar {...props} />
   </div>
 );
@@ -230,3 +229,52 @@ export const smallDisplay: Story = {
   },
   render: SmallTemplate
 };
+
+export const RowDirection: Story = {
+  args: {
+    data: dataLastWeek,
+    direction: 'row',
+    textWidth: 100,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RowDirectionSmall: Story = {
+  args: {
+    data: dataLastWeek,
+    direction: 'row',
+    size: 'small',
+    textWidth: 70,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

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,9 +1,10 @@
-import { equals } from 'ramda';
-
 import { useTheme } from '@mui/material';
 
-import { margins } from '../common/margins';
+import { equals } from 'ramda';
+import { useMemo } from 'react';
 
+import { margins } from '../common/margins';
+import { SingleBarProps } from './models';
 import { groupMargin } from './Thresholds';
 
 export const barHeights = {
@@ -12,12 +13,12 @@ export const barHeights = {
 };
 export const margin = 40;
 
-const lineMargins = {
+export const lineMargins = {
   medium: 10,
   small: 5
 };
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -27,6 +28,7 @@ interface Props {
   thresholdType: string;
   value: number;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 export const ThresholdLine = ({
@@ -38,11 +40,13 @@ export const ThresholdLine = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => {
   const theme = useTheme();
 
-  const scaledValue = xScale(value) || 0;
+  const scaledValue = xScale(value) + (textWidth || 0) || 0;
 
   const lineMargin = lineMargins[size];
 
@@ -55,45 +59,50 @@ export const ThresholdLine = ({
     ? theme.palette.warning.main
     : theme.palette.error.main;
 
+  const lineY1 = useMemo(() => {
+    if (direction === 'row') {
+      return 0;
+    }
+    return isSmall
+      ? groupMargin - lineMargin
+      : groupMargin + lineMargin + margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
+  const lineY2 = useMemo(() => {
+    if (direction === 'row') {
+      return barHeight + lineMargin;
+    }
+    return isSmall
+      ? barHeight + groupMargin - lineMargin + margins.top - 6
+      : barHeight + groupMargin + lineMargin + 2 * margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
   return (
     <>
       <line
         data-testid={`${thresholdType}-line-${value}`}
         stroke={lineColor}
-        strokeDasharray="6, 6"
+        strokeDasharray="6, 5"
         strokeWidth={2}
         x1={scaledValue}
         x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
-      />
-      <line
-        data-testid={`${thresholdType}-line-${value}-tooltip`}
-        stroke="transparent"
-        strokeWidth={5}
-        x1={scaledValue}
-        x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={hideTooltip}
+        y1={lineY1}
+        y2={lineY2}
       />
+      {
+        // 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,10 +1,10 @@
-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;
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -12,6 +12,7 @@ interface Props {
   size: 'small' | 'medium';
   thresholds: ThresholdsModel;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 const Thresholds = ({
@@ -21,18 +22,22 @@ const Thresholds = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => (
   <>
     {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}
@@ -41,12 +46,14 @@ const Thresholds = ({
     {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}

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;
@@ -8,4 +8,6 @@ export interface SingleBarProps {
   size?: 'medium' | 'small';
   thresholds: Thresholds;
   max?: number;
+  direction?: 'column' | 'row';
+  textWidth?: number; // Applied only when the direction is row
 }

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>
   );