@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.12 → 24.4.1-MON-38245-ba-tree-widget.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.12",
+  "version": "24.4.1-MON-38245-ba-tree-widget.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Tree/Links.tsx

@@ -1,5 +1,10 @@
-import { LinkHorizontal } from '@visx/shape';
+import {
+  LinkHorizontal,
+  LinkHorizontalStep,
+  LinkHorizontalLine
+} from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -9,6 +14,12 @@ 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
@@ -24,10 +35,12 @@ const Links = <TData extends BaseProp>({
       .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 (
-      <LinkHorizontal
+      <LinkComponent
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

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

@@ -168,4 +168,28 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the tree with step links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'step'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the tree with line links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        type: 'line'
+      }
+    });
+
+    cy.contains('T').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,6 +82,21 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
+export const WithStepLink: Story = {
+  args: {
+    children: SimpleContent,
+    node: {
+      height: 90,
+      width: 90
+    },
+    tree: simpleData,
+    treeLink: {
+      type: 'step'
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -95,7 +110,8 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
+      type: 'line'
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,6 +14,8 @@ export interface BaseProp {
   name: string;
 }
 
+export type Link = 'curve' | 'line' | 'step';
+
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -48,5 +50,6 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+    type?: Link;
   };
 }