@centreon/ui 24.10.12 → 24.10.13

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

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

package/src/Graph/Timeline/Timeline.tsx

@@ -0,0 +1,28 @@
+import { ParentSize } from '../..';
+
+import ResponsiveTimeline from './ResponsiveTimeline';
+
+const Timeline = ({
+  data,
+  startDate,
+  endDate,
+  TooltipContent,
+  tooltipClassName,
+  ...rest
+}): JSX.Element => (
+  <ParentSize {...rest}>
+    {({ width, height }) => (
+      <ResponsiveTimeline
+        data={data}
+        startDate={startDate}
+        endDate={endDate}
+        TooltipContent={TooltipContent}
+        tooltipClassName={tooltipClassName}
+        height={height}
+        width={width}
+      />
+    )}
+  </ParentSize>
+);
+
+export default Timeline;

package/src/Graph/Timeline/index.ts

@@ -0,0 +1 @@
+export { default as Timeline } from './Timeline';

package/src/Graph/Timeline/models.ts

@@ -0,0 +1,20 @@
+export interface Data {
+  start: string;
+  end: string;
+  color: string;
+}
+
+export interface Tooltip {
+  start: string;
+  end: string;
+  color: string;
+  duration: string;
+}
+
+export interface TimelineProps {
+  data: Array<Data>;
+  startDate: string;
+  endDate: string;
+  TooltipContent?: (props: Tooltip) => JSX.Element;
+  tooltipClassName?: string;
+}

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

@@ -0,0 +1,11 @@
+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'
+  }
+}));

package/src/Graph/Timeline/translatedLabel.ts

@@ -0,0 +1,6 @@
+export const labelYear = 'year';
+export const labelMonth = 'month';
+export const labelDay = 'day';
+export const labelHour = 'hour';
+export const labelMinutes = 'minutes';
+export const labelMinute = 'minute';

package/src/Graph/Timeline/useTimeline.ts

@@ -0,0 +1,90 @@
+import dayjs, { Dayjs } from 'dayjs';
+
+import { usePluralizedTranslation } from '@centreon/ui';
+import { lt } from 'ramda';
+import { useCallback } from 'react';
+import {
+  labelDay,
+  labelHour,
+  labelMinute,
+  labelMonth,
+  labelYear
+} from './translatedLabel';
+
+interface StartEndProps {
+  start: Dayjs;
+  end: Dayjs;
+}
+
+interface GetWidthProps extends StartEndProps {
+  timezone: string;
+  xScale;
+}
+
+interface UseTimelineState {
+  getTimeDifference: (props: StartEndProps) => string;
+  getWidth: (props: GetWidthProps) => number;
+}
+
+export const useTimeline = (): UseTimelineState => {
+  const { pluralizedT } = usePluralizedTranslation();
+
+  const getTimeDifference = useCallback(
+    ({ start, end }: StartEndProps): string => {
+      const diffInMilliseconds = end.diff(start);
+      const diffDuration = dayjs.duration(diffInMilliseconds);
+
+      const timeUnits = [
+        {
+          value: diffDuration.years(),
+          unit: pluralizedT({ label: labelYear, count: diffDuration.years() })
+        },
+        {
+          value: diffDuration.months(),
+          unit: pluralizedT({ label: labelMonth, count: diffDuration.months() })
+        },
+        {
+          value: diffDuration.days(),
+          unit: pluralizedT({ label: labelDay, count: diffDuration.days() })
+        },
+        {
+          value: diffDuration.hours(),
+          unit: pluralizedT({ label: labelHour, count: diffDuration.hours() })
+        },
+        {
+          value: diffDuration.minutes(),
+          unit: pluralizedT({
+            label: labelMinute,
+            count: diffDuration.minutes()
+          })
+        }
+      ];
+
+      const readableUnits = timeUnits
+        .filter((unit) => unit.value > 0)
+        .map((unit) => `${unit.value} ${unit.unit}`);
+
+      return readableUnits.slice(0, 2).join(', ');
+    },
+    []
+  );
+
+  const getWidth = useCallback(
+    ({ start, end, timezone, xScale }: GetWidthProps): number => {
+      const baseWidth =
+        xScale(dayjs(end).tz(timezone)) - xScale(dayjs(start).tz(timezone));
+
+      if (Number.isNaN(baseWidth) || lt(baseWidth, 0)) {
+        return 0;
+      }
+
+      return baseWidth;
+    },
+    []
+  );
+
+  return {
+    getTimeDifference,
+    getWidth
+  };
+};

package/src/Graph/Tree/Links.tsx

@@ -26,7 +26,7 @@ const Links = <TData extends BaseProp>({
 }: Props<TData>): Array<JSX.Element> => {
   const theme = useTheme();
 
-  return links.map((link) => {
+  return links.map((link, idx) => {
     const ancestorIds = link.target
       .ancestors()
       .map((ancestor) => ancestor.data.data.id);
@@ -37,7 +37,7 @@ const Links = <TData extends BaseProp>({
 
     const LinkComponent = getLinkComponent(treeLink?.type);
 
-    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
+    const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}-${idx}`;
 
     return (
       <LinkComponent

package/src/Graph/Tree/Tree.tsx

@@ -84,10 +84,10 @@ export const Tree = <TData extends BaseProp>({
   );
 
   return (
-    <Group left={node.width}>
+    <Group left={node.width / 2}>
       <VisxTree
         left={0}
-        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        nodeSize={[node.height + nodeMargins.x, node.height + node.width]}
         root={hierarchy(formattedTree, getExpanded)}
         separation={() => 1}
         size={[containerWidth, containerHeight]}

package/src/Graph/Tree/constants.ts

@@ -1,2 +1,2 @@
 export const margins = { bottom: 30, left: 30, right: 30, top: 30 };
-export const nodeMargins = { x: 90, y: 16 };
+export const nodeMargins = { x: 2 };

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

@@ -97,7 +97,7 @@ const Axes = ({
         tickLabelProps={() => ({
           ...axisLeft.tickLabelProps(),
           angle: yAxisTickLabelRotation,
-          dx: isHorizontal ? -8 : 4,
+          dx: isHorizontal ? -4 : 4,
           dy: isHorizontal ? 4 : -6
         })}
         tickLength={2}

package/src/Graph/common/Axes/useAxisY.ts

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 
-import { Axis } from '@visx/visx';
+import type { Axis } from '@visx/visx';
 import { isNil } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
-import { formatMetricValue, getUnits } from '../timeSeries';
+import { formatMetricValueWithUnit, getUnits } from '../timeSeries';
 import { commonTickLabelProps } from '../utils';
 
-import { Data, LabelProps } from './models';
+import type { Data, LabelProps } from './models';
 
 interface AxisYData {
   displayUnit: boolean;
@@ -69,7 +69,11 @@ const useAxisY = ({
         return '';
       }
 
-      return formatMetricValue({ base: data.baseAxis, unit, value }) as string;
+      return formatMetricValueWithUnit({
+        base: data.baseAxis,
+        unit,
+        value
+      }) as string;
     };
 
   const labelProps = ({

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

@@ -1,10 +1,4 @@
-import {
-  Dispatch,
-  MutableRefObject,
-  ReactNode,
-  SetStateAction,
-  useMemo
-} from 'react';
+import { Dispatch, MutableRefObject, SetStateAction, useMemo } from 'react';
 
 import { equals, gt, isNil, lte, reduce } from 'ramda';
 
@@ -12,8 +6,8 @@ import { Stack } from '@mui/material';
 
 import Legend from '../../Chart/Legend';
 import { legendWidth } from '../../Chart/Legend/Legend.styles';
+import { LegendModel } from '../../Chart/models';
 import { Line } from '../timeSeries/models';
-
 import Header from './Header';
 import { LineChartHeader } from './Header/models';
 import { useBaseChartStyles } from './useBaseChartStyles';
@@ -25,12 +19,9 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: {
+  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
     displayLegend: boolean;
     legendHeight?: number;
-    mode?: 'grid' | 'list';
-    placement?: 'left' | 'right' | 'bottom';
-    renderExtraComponent?: ReactNode;
   };
   legendRef: MutableRefObject<HTMLDivElement | null>;
   limitLegend?: number | false;

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

@@ -9,8 +9,6 @@ import Axes from '../Axes';
 import Grids from '../Grids';
 import { Line, TimeValue } from '../timeSeries/models';
 
-import { extraMargin } from './useComputeBaseChartDimensions';
-
 interface Props {
   allUnits: Array<string>;
   axis?: ChartAxis;
@@ -27,6 +25,8 @@ interface Props {
   svgRef: MutableRefObject<SVGSVGElement | null>;
   timeSeries: Array<TimeValue>;
   xScale;
+  maxAxisCharacters?: number;
+  hasSecondUnit?: boolean;
 }
 
 const ChartSvgWrapper = ({
@@ -44,7 +44,9 @@ const ChartSvgWrapper = ({
   axis,
   children,
   orientation = 'horizontal',
-  allUnits
+  allUnits,
+  maxAxisCharacters = 0,
+  hasSecondUnit
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
 
@@ -55,7 +57,13 @@ const ChartSvgWrapper = ({
       ref={svgRef}
       width="100%"
     >
-      <Group.Group left={margin.left + extraMargin / 2} top={margin.top}>
+      <Group.Group
+        left={
+          maxAxisCharacters * 5 +
+          (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6)
+        }
+        top={margin.top}
+      >
         {showGridLines && (
           <Grids
             gridLinesType={gridLinesType}

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
@@ -10,7 +12,7 @@ interface Props {
   title: string;
 }
 
-const Header = ({ title, header }: Props): JSX.Element => {
+const Header = ({ title, header }: Props): ReactElement => {
   const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;

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

@@ -1,8 +1,10 @@
-import { MutableRefObject, useRef } from 'react';
+import { RefCallback } from 'react';
 
 import { equals, isNil } from 'ramda';
 
+import useResizeObserver from 'use-resize-observer';
 import { margin } from '../../Chart/common';
+import { margins } from '../margins';
 
 export const extraMargin = 10;
 
@@ -13,12 +15,14 @@ interface UseComputeBaseChartDimensionsProps {
   legendHeight?: number;
   legendPlacement?: string;
   width: number;
+  maxAxisCharacters: number;
 }
 
 interface UseComputeBaseChartDimensionsState {
   graphHeight: number;
   graphWidth: number;
-  legendRef: MutableRefObject<HTMLDivElement | null>;
+  legendRef: RefCallback<Element>;
+  titleRef: RefCallback<Element>;
 }
 
 export const useComputeBaseChartDimensions = ({
@@ -27,12 +31,17 @@ export const useComputeBaseChartDimensions = ({
   legendDisplay,
   legendPlacement,
   hasSecondUnit,
-  legendHeight
+  legendHeight,
+  maxAxisCharacters
 }: UseComputeBaseChartDimensionsProps): UseComputeBaseChartDimensionsState => {
-  const legendRef = useRef<HTMLDivElement | null>(null);
+  const {
+    ref: legendRef,
+    width: legendRefWidth,
+    height: legendRefHeight
+  } = useResizeObserver();
+  const { height: titleRefHeight } = useResizeObserver();
 
-  const currentLegendHeight =
-    legendHeight ?? (legendRef.current?.getBoundingClientRect().height || 0);
+  const currentLegendHeight = legendHeight ?? (legendRefHeight || 0);
 
   const legendBoundingHeight =
     !equals(legendDisplay, false) &&
@@ -42,20 +51,23 @@ export const useComputeBaseChartDimensions = ({
   const legendBoundingWidth =
     !equals(legendDisplay, false) &&
     (equals(legendPlacement, 'left') || equals(legendPlacement, 'right'))
-      ? legendRef.current?.getBoundingClientRect().width || 0
+      ? legendRefWidth || 0
       : 0;
 
   const graphWidth =
     width > 0
       ? width -
-        margin.left -
-        (hasSecondUnit ? margin.right : 8) -
-        extraMargin -
+        (hasSecondUnit ? maxAxisCharacters * 2 : maxAxisCharacters) * 6 -
+        (hasSecondUnit ? margins.left * 0.8 : margin.left) -
         legendBoundingWidth
       : 0;
   const graphHeight =
     (height || 0) > 0
-      ? (height || 0) - margin.top - 5 - legendBoundingHeight
+      ? (height || 0) -
+        margin.top -
+        legendBoundingHeight -
+        (titleRefHeight || 0) -
+        5
       : 0;
 
   return {

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

@@ -0,0 +1,92 @@
+import { isEmpty } from 'ramda';
+import { useMemo } from 'react';
+import { ChartAxis } from '../../Chart/models';
+import { Data } from '../Axes/models';
+import { Thresholds } from '../models';
+import { getFormattedAxisValues } from '../utils';
+
+interface UseComputeYAxisMaxCharactersProps {
+  firstUnit: string;
+  secondUnit: string;
+  thresholdUnit?: string;
+  thresholds?: Thresholds;
+  graphData: Data;
+  axis?: ChartAxis;
+}
+
+interface UseComputteYAxisMaxCharactersState {
+  maxLeftAxisCharacters: number;
+  maxRightAxisCharacters: number;
+}
+
+export const useComputeYAxisMaxCharacters = ({
+  thresholds,
+  firstUnit,
+  secondUnit,
+  graphData,
+  axis,
+  thresholdUnit
+}: UseComputeYAxisMaxCharactersProps): UseComputteYAxisMaxCharactersState => {
+  const maxLeftValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        threshold: thresholds?.critical ?? [],
+        axisUnit: axis?.axisYLeft?.unit ?? firstUnit,
+        timeSeries: graphData?.timeSeries ?? [],
+        thresholdUnit,
+        lines: graphData?.lines ?? [],
+        base: graphData?.baseAxis
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYLeft?.unit,
+      firstUnit,
+      graphData?.timeSeries,
+      thresholdUnit,
+      graphData?.lines,
+      graphData?.baseAxis
+    ]
+  );
+
+  const maxRightValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        threshold: thresholds?.critical ?? [],
+        axisUnit: axis?.axisYRight?.unit ?? secondUnit,
+        timeSeries: graphData.timeSeries ?? [],
+        thresholdUnit,
+        lines: graphData.lines ?? [],
+        base: graphData.baseAxis
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYRight?.unit,
+      secondUnit,
+      graphData.timeSeries,
+      thresholdUnit,
+      graphData.lines,
+      graphData.baseAxis
+    ]
+  );
+
+  const maxLeftAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxLeftValue)
+        ? 2
+        : Math.max(...maxLeftValue.map((value) => value.length), 2),
+    [maxLeftValue]
+  );
+
+  const maxRightAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxRightValue)
+        ? 5
+        : Math.max(...maxRightValue.map((value) => value.length), 5),
+    [maxRightValue]
+  );
+
+  return {
+    maxLeftAxisCharacters,
+    maxRightAxisCharacters
+  };
+};

package/src/Graph/common/models.ts

@@ -6,14 +6,13 @@ export interface LineChartData {
   times: Array<string>;
 }
 
+export interface Threshold {
+  label: string;
+  value: number;
+}
+
 export interface Thresholds {
-  critical: Array<{
-    label: string;
-    value: number;
-  }>;
+  critical: Array<Threshold>;
   enabled: boolean;
-  warning: Array<{
-    label: string;
-    value: number;
-  }>;
+  warning: Array<Threshold>;
 }

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

@@ -567,7 +567,7 @@ describe('Format value with unit', () => {
 
     if (unit === 'ms') {
       return {
-        expectedResult: '34.23 seconds',
+        expectedResult: '34.23k ms',
         unit,
         value: 34232
       };