@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.2 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.2",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -117,10 +117,11 @@
     "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
+    "@visx/hierarchy": "^3.3.0",
     "@visx/legend": "^3.5.0",
     "@visx/pattern": "^3.3.0",
     "@visx/scale": "^3.5.0",
-    "@visx/shape": "^2.12.2",
+    "@visx/shape": "^2.18.0",
     "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",

package/src/Graph/Tree/DescendantNodes.tsx

@@ -0,0 +1,51 @@
+import { HierarchyPointNode } from '@visx/hierarchy/lib/types';
+import { Group } from '@visx/group';
+import { 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> => {
+  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}>
+        {children({
+          ancestors: pluck('data', node.ancestors()),
+          depth: node.depth,
+          expandCollapseNode,
+          isExpanded: !!getExpanded(node.data),
+          node: node.data,
+          nodeSize
+        })}
+      </Group>
+    );
+  });
+};
+
+export default DescendantNodes;

package/src/Graph/Tree/Links.tsx

@@ -0,0 +1,64 @@
+import { LinkHorizontal } from '@visx/shape';
+import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
+
+import { useTheme } from '@mui/material';
+
+import { TreeProps, Node, BaseProp } from './models';
+
+interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
+  links: Array<HierarchyPointLink<Node<TData>>>;
+}
+
+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 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
+        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,16 @@
+import { ParentSize } from '../..';
+
+import { BaseProp, TreeProps } from './models';
+import { Tree } from './Tree';
+
+export const StandaloneTree = <TData extends BaseProp>(
+  props: Omit<TreeProps<TData>, 'containerHeight' | 'containerWidth'>
+): JSX.Element => (
+  <ParentSize>
+    {({ width, height }) => (
+      <svg height={height} width={width}>
+        <Tree {...props} containerHeight={height} containerWidth={width} />
+      </svg>
+    )}
+  </ParentSize>
+);

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

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { equals } from 'ramda';
+
+import { SimpleData, simpleData } from './stories/datas';
+import { SimpleContent } from './stories/contents';
+
+import { StandaloneTree } from '.';
+
+const meta: Meta<typeof StandaloneTree> = {
+  component: StandaloneTree
+};
+
+export default meta;
+type Story = StoryObj<typeof StandaloneTree>;
+
+const StandaloneTreeTemplate = (args): JSX.Element => (
+  <div style={{ height: '90vh', width: '100%' }}>
+    <StandaloneTree<SimpleData> {...args} />
+  </div>
+);
+
+export const DefaultStandaloneTree: Story = {
+  args: {
+    children: SimpleContent,
+    data: simpleData,
+    node: {
+      height: 90,
+      width: 90
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const WithDefaultExpandFilter: Story = {
+  args: {
+    children: SimpleContent,
+    data: simpleData,
+    node: {
+      height: 90,
+      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status),
+      width: 90
+    }
+  },
+  render: StandaloneTreeTemplate
+};
+
+export const WithCustomLinks: Story = {
+  args: {
+    children: SimpleContent,
+    data: simpleData,
+    node: {
+      height: 90,
+      width: 90
+    },
+    treeLink: {
+      getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
+      getStrokeDasharray: ({ target }) =>
+        target.status === 'ok' ? '5,5' : '0',
+      getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+    }
+  },
+  render: StandaloneTreeTemplate
+};

package/src/Graph/Tree/Tree.tsx

@@ -0,0 +1,108 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { Group } from '@visx/group';
+import { hierarchy, Tree as VisxTree } from '@visx/hierarchy';
+import { isNil } from 'ramda';
+
+import { useDeepCompare } from '../../utils';
+
+import { margins, nodeMargins } from './constants';
+import { BaseProp, Node, TreeProps } from './models';
+import { updateNodeFromTree } from './utils';
+import Links from './Links';
+import DescendantNodes from './DescendantNodes';
+
+export const Tree = <TData extends BaseProp>({
+  containerHeight,
+  containerWidth,
+  data,
+  node,
+  treeLink = {},
+  children
+}: TreeProps<TData>): JSX.Element => {
+  const formattedData: Node<TData> = useMemo(
+    () => ({
+      ...data,
+      isExpanded: true
+    }),
+    useDeepCompare([data])
+  );
+
+  const [tree, setTree] = useState(formattedData);
+
+  const toggleTreeNodesExpanded = useCallback(
+    ({ currentTree, targetNode }): Node<TData> => {
+      return updateNodeFromTree({
+        callback: (subTree) => {
+          if (isNil(subTree.isExpanded) && isNil(node.isDefaultExpanded)) {
+            return {
+              isExpanded: false
+            };
+          }
+
+          return {
+            isExpanded: isNil(subTree.isExpanded)
+              ? !node.isDefaultExpanded?.(subTree.data)
+              : !subTree.isExpanded || false
+          };
+        },
+        targetNode,
+        tree: currentTree
+      });
+    },
+    [node.isDefaultExpanded]
+  );
+
+  const expandCollapseNode = useCallback((targetNode: Node<TData>): void => {
+    setTree((currentTree) => {
+      return toggleTreeNodesExpanded({ currentTree, targetNode });
+    });
+  }, []);
+
+  const getExpanded = useCallback(
+    (d: Node<TData>): Array<Node<TData>> | undefined | null => {
+      if (isNil(d.isExpanded) && isNil(node.isDefaultExpanded)) {
+        return d.children;
+      }
+      if (isNil(d.isExpanded)) {
+        return node.isDefaultExpanded?.(d.data) ? d.children : null;
+      }
+
+      return d.isExpanded ? d.children : null;
+    },
+    [node.isDefaultExpanded]
+  );
+
+  const origin = useMemo(
+    () => ({ x: 0, y: containerHeight / 2 }),
+    [containerHeight]
+  );
+
+  return (
+    <Group left={node.width / 2} top={margins.top}>
+      <VisxTree
+        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        root={hierarchy(tree, getExpanded)}
+        separation={() => 1}
+        size={[containerWidth, containerHeight]}
+      >
+        {(subTree) => (
+          <Group left={origin.x} top={origin.y}>
+            <Links links={subTree.links()} treeLink={treeLink} />
+            <DescendantNodes
+              descendants={subTree.descendants()}
+              expandCollapseNode={expandCollapseNode}
+              getExpanded={getExpanded}
+              nodeSize={{
+                height: node.height,
+                width: node.width
+              }}
+            >
+              {children}
+            </DescendantNodes>
+          </Group>
+        )}
+      </VisxTree>
+    </Group>
+  );
+};

package/src/Graph/Tree/constants.ts

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

package/src/Graph/Tree/index.ts

@@ -0,0 +1,4 @@
+export { Tree } from './Tree';
+export { StandaloneTree } from './StandaloneTree';
+export * from './utils';
+export type { Node, TreeProps, ChildrenProps } from './models';

package/src/Graph/Tree/models.ts

@@ -0,0 +1,47 @@
+export interface Node<T> {
+  children?: Array<Node<T>>;
+  data: T;
+  isExpanded?: boolean;
+}
+
+export interface LinkProps<T> {
+  source: T;
+  target: T;
+}
+
+export interface BaseProp {
+  id: number;
+  name: string;
+}
+
+export interface ChildrenProps<TData> {
+  ancestors: Array<Node<TData>>;
+  depth: number;
+  expandCollapseNode: (targetNode: Node<TData>) => void;
+  isExpanded: boolean;
+  node: Node<TData>;
+  nodeSize: {
+    height: number;
+    width: number;
+  };
+}
+
+export interface TreeProps<TData> {
+  children: (props: ChildrenProps<TData>) => JSX.Element;
+  containerHeight: number;
+  containerWidth: number;
+  data: Node<TData>;
+  node: {
+    height: number;
+    isDefaultExpanded?: (data: TData) => boolean;
+    width: number;
+  };
+  treeLink: {
+    getStroke?: (props: LinkProps<TData>) => string | undefined;
+    getStrokeDasharray?: (
+      props: LinkProps<TData>
+    ) => string | number | undefined;
+    getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
+    getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
+  };
+}

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

@@ -0,0 +1,80 @@
+import { always, cond, equals, T } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { ChildrenProps } from '..';
+
+import { SimpleData } from './datas';
+
+const symbol = (
+  <symbol id="SpaIcon" viewBox="0 0 24 24">
+    <path d="M8.55 12c-1.07-.71-2.25-1.27-3.53-1.61 1.28.34 2.46.9 3.53 1.61m10.43-1.61c-1.29.34-2.49.91-3.57 1.64 1.08-.73 2.28-1.3 3.57-1.64" />
+    <path d="M15.49 9.63c-.18-2.79-1.31-5.51-3.43-7.63-2.14 2.14-3.32 4.86-3.55 7.63 1.28.68 2.46 1.56 3.49 2.63 1.03-1.06 2.21-1.94 3.49-2.63m-6.5 2.65c-.14-.1-.3-.19-.45-.29.15.11.31.19.45.29m6.42-.25c-.13.09-.27.16-.4.26.13-.1.27-.17.4-.26M12 15.45C9.85 12.17 6.18 10 2 10c0 5.32 3.36 9.82 8.03 11.49.63.23 1.29.4 1.97.51.68-.12 1.33-.29 1.97-.51C18.64 19.82 22 15.32 22 10c-4.18 0-7.85 2.17-10 5.45" />
+  </symbol>
+);
+
+export const SimpleContent = ({
+  node,
+  depth,
+  isExpanded,
+  nodeSize,
+  expandCollapseNode
+}: ChildrenProps<SimpleData>): JSX.Element => {
+  const theme = useTheme();
+  const fillColor = cond([
+    [equals('critical'), always(theme.palette.error.main)],
+    [equals('warning'), always(theme.palette.warning.main)],
+    [T, always(theme.palette.success.main)]
+  ])(node.data.status);
+
+  if (equals(depth, 0)) {
+    return (
+      <>
+        <circle fill={fillColor} r={nodeSize.width / 2} />
+        <text textAnchor="middle">{node.data.name}</text>
+        <text alignmentBaseline="text-before-edge" textAnchor="middle">
+          {isExpanded ? 'Expanded' : 'Collapsed'}
+        </text>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {symbol}
+      <rect
+        fill={fillColor}
+        height={nodeSize.height}
+        rx={10}
+        width={nodeSize.width}
+        x={-nodeSize.width / 2}
+        y={-nodeSize.height / 2}
+      />
+      <text textAnchor="middle">{node.data.name}</text>
+      {node.children ? (
+        <text textAnchor="middle" y={nodeSize.height / 2.5}>
+          {isExpanded ? 'Expanded' : 'Collapsed'}
+        </text>
+      ) : (
+        <use
+          fill="black"
+          height="24"
+          href="#SpaIcon"
+          width="24"
+          x={nodeSize.width / 5}
+          y={-nodeSize.height / 2.2}
+        />
+      )}
+      <rect
+        fill="transparent"
+        height={nodeSize.height}
+        rx={10}
+        style={{ cursor: node.children ? 'pointer' : 'default' }}
+        width={nodeSize.width}
+        x={-nodeSize.width / 2}
+        y={-nodeSize.height / 2}
+        onClick={() => expandCollapseNode(node)}
+      />
+    </>
+  );
+};

package/src/Graph/Tree/stories/datas.ts

@@ -0,0 +1,60 @@
+import { Node } from '../models';
+
+export interface SimpleData {
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export const simpleData: Node<SimpleData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'A1', status: 'ok' } },
+        { data: { id: 3, name: 'A2', status: 'ok' } },
+        { data: { id: 4, name: 'A3', status: 'critical' } },
+        {
+          children: [
+            {
+              data: { id: 10, name: 'C1', status: 'warning' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 11, name: 'D1', status: 'ok' }
+                },
+                {
+                  data: { id: 12, name: 'D2', status: 'ok' }
+                },
+                {
+                  data: { id: 13, name: 'D3', status: 'ok' }
+                }
+              ],
+              data: { id: 14, name: 'D', status: 'ok' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 21, name: 'E1', status: 'critical' }
+                }
+              ],
+              data: { id: 20, name: 'E', status: 'critical' }
+            }
+          ],
+          data: { id: 3, name: 'C', status: 'critical' }
+        }
+      ],
+      data: { id: 6273286320, name: 'A', status: 'critical' }
+    },
+    { data: { id: 1, name: 'Z', status: 'ok' } },
+    {
+      children: [{ data: { id: 50, name: 'B1', status: 'warning' } }],
+      data: { id: 2, name: 'B', status: 'warning' }
+    }
+  ],
+  data: {
+    id: 0,
+    name: 'T',
+    status: 'critical'
+  }
+};

package/src/Graph/Tree/utils.ts

@@ -0,0 +1,33 @@
+import { equals } from 'ramda';
+
+import { BaseProp, Node } from './models';
+
+interface UpdateNodeFromTreeProps<TData> {
+  callback: (tree: Node<TData>) => Partial<Node<TData>>;
+  targetNode: Node<TData>;
+  tree: Node<TData>;
+}
+
+export const updateNodeFromTree = <TData extends BaseProp>({
+  tree,
+  targetNode,
+  callback
+}: UpdateNodeFromTreeProps<TData>): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  if (equals(tree.data, targetNode.data)) {
+    return {
+      ...tree,
+      ...callback(tree)
+    };
+  }
+
+  return {
+    ...tree,
+    children: tree.children?.map((child) =>
+      updateNodeFromTree({ callback, targetNode, tree: child })
+    )
+  };
+};

package/src/Graph/index.ts

@@ -6,3 +6,4 @@ export { Text as GraphText } from './Text';
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
+export * from './Tree';