Skip to content

Commit

Permalink
✨ feat: new sence demo (#96)
Browse files Browse the repository at this point in the history 
* ✨ feat: add data flow demo

* ✨ feat: data flow high light

* ✨ feat: work flow

* ✨ feat: work flow demo

* ✨ feat: pipeline

* ✨ feat: new params for flowview

* ✨ feat: pipe line demo

* ✨ feat: pipe line position

* ✨ feat: tech pipe line drag

* ✨ feat: demo

* ✨ fix: bug

* 🐛 fix: bug

---------

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
  • Loading branch information
@ModestFun
ModestFun and jiangchu committed Mar 31, 2024
1 parent 18a9ac5 commit a7ee2ec
Show file tree
Hide file tree
Showing 36 changed files with 1,776 additions and 290 deletions.
2 changes: 1 addition & 1 deletion docs/caseShow/cicdPipeLine.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ description:

## Default

<code src="./demos/pipelineDemo.tsx" ></code>
<code src="./demos/pipeline/multiPipe/pipelineDemo.tsx" ></code>
25 changes: 25 additions & 0 deletions docs/caseShow/dataFlow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
nav:
title: 案例展示
order: 100
group:
title: 场景展示
order: 1
title: 数据流程图
order: 1
description:
---

## 数据流程图

案例特点：

- 点击选中节点，自动高亮相关链路
- 无级缩放的 label
- 节点拖拽
- Danger 节点链路高亮
- 选中节点唤起抽屉
- 点击画布或其他节点重置选中态
- 初始化自动布局

<code src='./demos/dataflow/index.tsx'></code>
261 changes: 261 additions & 0 deletions docs/caseShow/demos/dataflow/data.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
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: {
isDanger: true,
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: {
isDanger: true,
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',
},
];
Loading

0 comments on commit a7ee2ec

Please sign in to comment.