✨ feat: add data flow demo

ant-design · Mar 27, 2024 · 82d4720 · 82d4720
1 parent 18a9ac5
commit 82d4720
Show file tree

Hide file tree

Showing 4 changed files with 374 additions and 0 deletions.
diff --git a/docs/caseShow/dataFlow.md b/docs/caseShow/dataFlow.md
@@ -0,0 +1,13 @@
+---
+nav: 案例展示
+order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 数据流程图
+description:
+---
+
+## 数据流程图
+
+<code src='./demos/dataflow/index.tsx'></code>
diff --git a/docs/caseShow/demos/dataflow/data.tsx b/docs/caseShow/demos/dataflow/data.tsx
@@ -0,0 +1,259 @@
+import { FlowViewEdge, FlowViewNode } from '@ant-design/pro-flow';
+import { Progress } from 'antd';
+import React from 'react';
+import useStyles from './styled';
+
+const ApiScore: React.FC<{ score: number }> = ({ score }) => {
+  return (
+    <Progress
+      style={{
+        fontSize: '6px',
+        textAlign: 'center',
+      }}
+      type="circle"
+      trailColor={'white'}
+      percent={score === 0 ? 1 : score * 20}
+      strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'}
+      format={() => `${score}`}
+      size={28}
+    />
+  );
+};
+
+const DangerLogo: React.FC = () => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.dangerLogo}>
+      <img
+        src={
+          'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*wkEJRbSowekAAAAAAAAAAAAADvuvAQ/original'
+        }
+        alt=""
+      />
+    </div>
+  );
+};
+
+export const nodes: FlowViewNode[] = [
+  {
+    id: 'a1',
+    label: '数据源',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddƒddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b1',
+    label: ' API',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'left',
+        value: <DangerLogo />,
+      },
+    },
+  },
+  {
+    id: 'b2',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'right',
+        value: <ApiScore score={4} />,
+      },
+    },
+  },
+  {
+    id: 'b3',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b4',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'c1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c2',
+    label: '产品',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c3',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd2',
+    type: 'BasicNodeGroup',
+    label: '用户',
+    data: [
+      {
+        id: 'a5',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a6',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a7',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a8',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a9',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a10',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a11',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+    ],
+  },
+  {
+    id: 'd3',
+    data: {
+      title: 'XXXX用户',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+];
+
+export const edges: FlowViewEdge[] = [
+  {
+    id: 'a1-b1',
+    source: 'a1',
+    target: 'b1',
+  },
+  {
+    id: 'a1-b2',
+    source: 'a1',
+    target: 'b2',
+  },
+  {
+    id: 'a1-b3',
+    source: 'a1',
+    target: 'b3',
+  },
+  {
+    id: 'a1-b4',
+    source: 'a1',
+    target: 'b4',
+  },
+
+  {
+    id: 'b2-c1',
+    source: 'b2',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b3-c1',
+    source: 'b3',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b1-c2',
+    source: 'b1',
+    target: 'c2',
+    type: 'radius',
+  },
+  {
+    id: 'c2-d2',
+    source: 'c2',
+    target: 'd2',
+    type: 'radius',
+  },
+  {
+    id: 'b4-c3',
+    source: 'b4',
+    target: 'c3',
+    type: 'radius',
+  },
+  {
+    id: 'c1-d1',
+    source: 'c1',
+    target: 'd1',
+    type: 'radius',
+  },
+  {
+    id: 'c3-d3',
+    source: 'c3',
+    target: 'd3',
+    type: 'radius',
+  },
+];
diff --git a/docs/caseShow/demos/dataflow/index.tsx b/docs/caseShow/demos/dataflow/index.tsx
@@ -0,0 +1,72 @@
+/**
+ * compact: true
+ */
+import {
+  FlowView,
+  FlowViewNode,
+  SelectType,
+  useEdgesState,
+  useNodesState,
+} from '@ant-design/pro-flow';
+import { edges, nodes } from './data';
+import useStyles from './styled';
+
+const ProFlowDemo = () => {
+  const { styles } = useStyles();
+  const [_nodes, setNodes, onNodesChange] = useNodesState([...nodes]);
+  const [_edges, setEdges, onEdgesChange] = useEdgesState([...edges]);
+
+  const handleHighlight = (node: FlowViewNode) => {
+    console.log('here');
+    _nodes.forEach((_node) => {
+      if (_node.id === node.id) {
+        _node.select = SelectType.SELECT;
+      }
+    });
+    setNodes(_nodes);
+    setEdges(
+      edges.map((edge) => {
+        if (edge.source === node.id || edge.target === node.id) {
+          edge.select = SelectType.SUB_SELECT;
+        }
+        return {
+          ...edge,
+        };
+      }),
+    );
+  };
+
+  const handleUnHighlight = () => {
+    console.log('here 2');
+
+    setNodes(
+      _nodes.map((_node) => {
+        _node.select = SelectType.DEFAULT;
+        return _node;
+      }),
+    );
+    setEdges(
+      edges.map((edge) => {
+        edge.select = SelectType.DEFAULT;
+        return edge;
+      }),
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onNodeDragStart={(e, node: any) => handleHighlight(node)}
+        onNodeClick={(e, node: any) => handleHighlight(node)}
+        onPaneClick={handleUnHighlight}
+        nodes={_nodes}
+        edges={_edges}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        stepLessZooming={true}
+      ></FlowView>
+    </div>
+  );
+};
+
+export default ProFlowDemo;
diff --git a/docs/caseShow/demos/dataflow/styled.ts b/docs/caseShow/demos/dataflow/styled.ts
@@ -0,0 +1,30 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    dangerLogo: {
+      width: '28px',
+      height: '16px',
+      background: '#ffeef1',
+      borderRadius: '7px',
+      marginTop: '3px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      img: { width: '8px', height: '9px' },
+    },
+    container: css`
+      width: 100%;
+      height: 600px;
+      .ant-progress-text {
+        text-align: center !important;
+      }
+    `,
+    CustomWrap: {
+      width: '300px',
+      height: '100px',
+      backgroundColor: 'red',
+    },
+  };
+});
+export default useStyles;