@centreon/ui 24.11.13 → 24.11.14

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

@@ -1,148 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/src/Graph/Timeline/models.ts

@@ -1,20 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

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