@centreon/ui 24.5.12 → 24.5.13

package/src/Graph/Tree/Tree.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useMemo } from 'react';
+
+import { Group } from '@visx/group';
+import { hierarchy, Tree as VisxTree } from '@visx/hierarchy';
+import { isNil } from 'ramda';
+
+import { useDeepCompare } from '../../utils';
+
+import { 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,
+  tree,
+  node,
+  treeLink = {},
+  changeTree,
+  children
+}: TreeProps<TData>): JSX.Element => {
+  const formattedTree: Node<TData> = useMemo(
+    () => ({
+      ...tree,
+      isExpanded: true
+    }),
+    useDeepCompare([tree])
+  );
+
+  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 => {
+      changeTree?.(
+        toggleTreeNodesExpanded({ currentTree: formattedTree, targetNode })
+      );
+    },
+    [formattedTree]
+  );
+
+  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}>
+      <VisxTree
+        left={0}
+        nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}
+        root={hierarchy(formattedTree, getExpanded)}
+        separation={() => 1}
+        size={[containerWidth, containerHeight]}
+        top={0}
+      >
+        {(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: 90, 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,55 @@
+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 type Link = 'curve' | 'line' | 'step';
+
+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;
+  };
+  onMouseDown: (e) => void;
+  onMouseUp: (callback) => (e) => void;
+}
+
+export interface TreeProps<TData> {
+  changeTree?: (newTree: Node<TData>) => void;
+  children: (props: ChildrenProps<TData>) => JSX.Element;
+  containerHeight: number;
+  containerWidth: number;
+  contentHeight?: number;
+  contentWidth?: number;
+  node: {
+    height: number;
+    isDefaultExpanded?: (data: TData) => boolean;
+    width: number;
+  };
+  tree: Node<TData>;
+  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;
+    type?: Link;
+  };
+}

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

@@ -0,0 +1,164 @@
+import { always, cond, equals, has, T } from 'ramda';
+
+import { Avatar, Paper, Typography, useTheme } from '@mui/material';
+import SpaIcon from '@mui/icons-material/Spa';
+
+import { ChildrenProps } from '..';
+
+import { ComplexData, SimpleData } from './datas';
+
+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 (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+        >
+          {node.data.name}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        cursor: node.children ? 'pointer' : 'default',
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+      onClick={() => {
+        expandCollapseNode(node);
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+      {node.children && (
+        <Typography>{isExpanded ? 'Expanded' : 'Collapsed'}</Typography>
+      )}
+    </Paper>
+  );
+};
+
+export const ComplexContent = ({
+  node,
+  depth,
+  nodeSize,
+  expandCollapseNode,
+  onMouseDown,
+  onMouseUp
+}: ChildrenProps<ComplexData>): 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 (
+      <Paper
+        sx={{
+          alignItems: 'center',
+          backgroundColor: fillColor,
+          display: 'flex',
+          flexDirection: 'column',
+          height: nodeSize.height,
+          justifyContent: 'center',
+          p: 1,
+          position: 'relative',
+          width: nodeSize.width
+        }}
+      >
+        <Typography>{node.data.name}</Typography>
+      </Paper>
+    );
+  }
+
+  if (has('count', node.data)) {
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%'
+        }}
+      >
+        <Avatar
+          sx={{
+            backgroundColor: fillColor,
+            color: theme.palette.text.primary,
+            cursor: 'pointer'
+          }}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp(() => expandCollapseNode(node))}
+        >
+          {node.data.count}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <Paper
+      sx={{
+        alignItems: 'center',
+        backgroundColor: fillColor,
+        display: 'flex',
+        flexDirection: 'column',
+        height: nodeSize.height,
+        justifyContent: 'center',
+        p: 1,
+        position: 'relative',
+        width: nodeSize.width
+      }}
+    >
+      {!node.children && (
+        <SpaIcon
+          fontSize="small"
+          sx={{ position: 'absolute', right: 8, top: 8 }}
+        />
+      )}
+      <Typography>{node.data.name}</Typography>
+    </Paper>
+  );
+};

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

@@ -0,0 +1,305 @@
+import { Node } from '../models';
+
+export interface SimpleData {
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export interface ComplexData {
+  count?: number;
+  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'
+  }
+};
+
+export const complexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        { data: { id: 6, name: 'Indicator 2', status: 'ok' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 2', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 4', status: 'ok' }
+        }
+      ],
+      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};
+
+export const moreComplexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 11, name: 'Indicator 11', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 3', status: 'ok' }
+        },
+        { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
+        { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
+        { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
+        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
+        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
+        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
+        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
+        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
+        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
+      ],
+      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};

package/src/Graph/Tree/utils.ts

@@ -0,0 +1,49 @@
+import { equals, omit } 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) &&
+    equals(tree.children, targetNode.children)
+  ) {
+    return {
+      ...tree,
+      ...callback(tree)
+    };
+  }
+
+  return {
+    ...tree,
+    children: tree.children?.map((child) =>
+      updateNodeFromTree({ callback, targetNode, tree: child })
+    )
+  };
+};
+
+export const cleanUpTree = <TData extends BaseProp>(
+  tree: Node<TData>
+): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  return {
+    ...omit(['isExpanded'], tree),
+    children: tree.children?.map((child) => cleanUpTree(child))
+  };
+};

package/src/Graph/common/margins.ts

@@ -0,0 +1 @@
+export const margins = { bottom: 20, left: 20, right: 20, top: 20 };