@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,148 @@
+import { userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import Timeline from './Timeline';
+import { Tooltip } from './models';
+
+const data = [
+  {
+    start: '2024-09-09T10:57:42+02:00',
+    end: '2024-09-09T11:15:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T11:15:00+02:00',
+    end: '2024-09-09T11:30:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T11:30:00+02:00',
+    end: '2024-09-09T11:45:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T11:45:00+02:00',
+    end: '2024-09-09T12:00:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T12:00:00+02:00',
+    end: '2024-09-09T12:20:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T12:20:00+02:00',
+    end: '2024-09-09T12:40:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T12:40:00+02:00',
+    end: '2024-09-09T12:57:42+02:00',
+    color: 'green'
+  }
+];
+
+const startDate = '2024-09-09T10:57:42+02:00';
+const endDate = '2024-09-09T12:57:42+02:00';
+
+const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
+  <div
+    data-testid="tooltip-content"
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '10px',
+      padding: '5px'
+    }}
+  >
+    <span>{start}</span>
+    <span>{end}</span>
+    <span>{color}</span>
+    <span>{duration}</span>
+  </div>
+);
+
+const store = createStore();
+store.set(userAtom, { timezone: 'Europe/Paris', locale: 'en' });
+
+const initialize = (displayDefaultTooltip = true): void => {
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <div
+          style={{
+            height: '100px',
+            width: '70%'
+          }}
+        >
+          <Timeline
+            data={data}
+            startDate={startDate}
+            endDate={endDate}
+            TooltipContent={displayDefaultTooltip ? undefined : TooltipContent}
+          />
+        </div>
+      </Provider>
+    )
+  });
+};
+
+describe('Timeline', () => {
+  it('checks that the correct number of bars are rendered', () => {
+    initialize();
+
+    cy.get('path').should('have.length', data.length);
+
+    cy.makeSnapshot();
+  });
+
+  it('checks that each bar has the correct color', () => {
+    initialize();
+
+    data.forEach(({ color }, index) => {
+      cy.get('path').eq(index).should('have.attr', 'fill', color);
+    });
+  });
+
+  it('displays tooltip with correct information when hovered over a bar', () => {
+    initialize(false);
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[data-testid="tooltip-content"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM').should('be.visible');
+      cy.contains('09/09/2024 11:15 AM').should('be.visible');
+      cy.contains('green').should('be.visible');
+      cy.contains('17 minutes').should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default tooltip with correct information when hovered over a bar', () => {
+    initialize();
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[role="tooltip"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('09/09/2024 11:15 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('17 minutes')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays correct tick labels on the x-axis', () => {
+    initialize();
+
+    cy.get('.visx-axis-bottom .visx-axis-tick').first().contains('11:00');
+  });
+});

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,14 @@
+import { ParentSize } from '../..';
+
+import ResponsiveTimeline from './ResponsiveTimeline';
+import type { TimelineProps } from './models';
+
+const Timeline = (props: TimelineProps): JSX.Element => (
+  <ParentSize>
+    {({ width, height }) => (
+      <ResponsiveTimeline {...props} 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/DescendantNodes.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+
+import { Group } from '@visx/group';
+import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import { gt, isNil, pluck } from 'ramda';
+
+import { BaseProp, Node, TreeProps } from './models';
+
+interface Props<TData> extends Pick<TreeProps<TData>, 'children'> {
+  descendants: Array<HierarchyPointNode<Node<TData>>>;
+  expandCollapseNode: (targetNode: Node<TData>) => void;
+  getExpanded: (d: Node<TData>) => Array<Node<TData>> | undefined;
+  nodeSize: {
+    height: number;
+    width: number;
+  };
+}
+
+const DescendantNodes = <TData extends BaseProp>({
+  descendants,
+  children,
+  expandCollapseNode,
+  getExpanded,
+  nodeSize
+}: Props<TData>): Array<JSX.Element> => {
+  const [pressEventTimeStamp, setPressEventTimeStamp] = useState<number | null>(
+    null
+  );
+
+  const mouseDown = (e: MouseEvent): void => {
+    setPressEventTimeStamp(e.timeStamp);
+  };
+
+  const mouseUp =
+    (callback) =>
+    (e: MouseEvent): void => {
+      if (isNil(pressEventTimeStamp)) {
+        callback();
+
+        return;
+      }
+
+      const diffTimeStamp = e.timeStamp - pressEventTimeStamp;
+
+      if (gt(diffTimeStamp, 120)) {
+        return;
+      }
+
+      callback();
+    };
+
+  return descendants.map((node) => {
+    const top = node.x;
+    const left = node.y;
+    const ancestorIds = node
+      .ancestors()
+      .map((ancestor) => ancestor.data.data.id);
+    const descendantIds = node
+      .descendants()
+      .map((ancestor) => ancestor.data.data.id);
+
+    const key = `${node.data.data.id}-${node.data.data.name}-${ancestorIds.toString()}-${descendantIds.toString()}`;
+
+    return (
+      <Group key={key} left={left} top={top}>
+        <foreignObject
+          height={nodeSize.height}
+          style={{ userSelect: 'none' }}
+          width={nodeSize.width}
+          x={-nodeSize.width / 2}
+          y={-nodeSize.height / 2}
+        >
+          {children({
+            ancestors: pluck('data', node.ancestors()),
+            depth: node.depth,
+            expandCollapseNode,
+            isExpanded: !!getExpanded(node.data),
+            node: node.data,
+            nodeSize,
+            onMouseDown: mouseDown,
+            onMouseUp: mouseUp
+          })}
+        </foreignObject>
+      </Group>
+    );
+  });
+};
+
+export default DescendantNodes;

package/src/Graph/Tree/Links.tsx

@@ -0,0 +1,77 @@
+import { 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 { BaseProp, Node, TreeProps } from './models';
+
+interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
+  links: Array<HierarchyPointLink<Node<TData>>>;
+}
+
+const getLinkComponent = cond([
+  [equals('line'), always(LinkHorizontalLine)],
+  [equals('step'), always(LinkHorizontalStep)],
+  [T, always(LinkHorizontal)]
+]);
+
+const Links = <TData extends BaseProp>({
+  links,
+  treeLink
+}: Props<TData>): Array<JSX.Element> => {
+  const theme = useTheme();
+
+  return links.map((link) => {
+    const ancestorIds = link.target
+      .ancestors()
+      .map((ancestor) => ancestor.data.data.id);
+
+    const descendantIds = link.target
+      .descendants()
+      .map((ancestor) => ancestor.data.data.id);
+
+    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}`;
+
+    return (
+      <LinkComponent
+        data={link}
+        data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
+        fill="none"
+        key={key}
+        stroke={
+          treeLink?.getStroke?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || theme.palette.text.primary
+        }
+        strokeDasharray={
+          treeLink?.getStrokeDasharray?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || '0'
+        }
+        strokeOpacity={
+          treeLink?.getStrokeOpacity?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || 1
+        }
+        strokeWidth={
+          treeLink?.getStrokeWidth?.({
+            source: link.source.data.data,
+            target: link.target.data.data
+          }) || '2'
+        }
+      />
+    );
+  });
+};
+
+export default Links;

package/src/Graph/Tree/StandaloneTree.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { ParentSize } from '../..';
+
+import { Tree } from './Tree';
+import { BaseProp, TreeProps } from './models';
+
+export const StandaloneTree = <TData extends BaseProp>({
+  tree,
+  ...props
+}: Omit<
+  TreeProps<TData>,
+  'containerHeight' | 'containerWidth'
+>): JSX.Element => {
+  const [currentTree, setTree] = useState(tree);
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <svg height={height} width={width}>
+          <Tree
+            {...props}
+            changeTree={setTree}
+            containerHeight={height}
+            containerWidth={width}
+            tree={currentTree}
+          />
+        </svg>
+      )}
+    </ParentSize>
+  );
+};