# ra-graph

**Repository Path**: easysuccess/ra-graph

## Basic Information

- **Project Name**: ra-graph
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-01-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ra-graph

## 功能描述
由UXDF数据根据配置生成 __力图__ 展示，支持切换选中数据模式、拖拽移动数据位置、右键点击查看数据实例详情、清空图展示，刷新力图
查看UXDF数据详情

## 配置说明
1. LINK\_PROPS ：配置 _右键点击_ 查看关系实例时显示实例的属性配置，例如：
```
{
	"BELONG_TO":[// 关系名称
		{
			"name": "__id",		// 属性名称
			"label":"数据标识"	 // 属性显示名称
		}
	]
}
```
1. NODE\_PROPS ： 配置 _右键点击_ 查看节点实例时显示实例的属性配置，例如：
```
{
	"MetadataTable": [ // 节点实例名称
		{
			"name": "__id", 	// 属性名称
			"label":"数据标识"	 // 属性显示名称
		},
		{
			"name": "tableName",
			"label":"表名"
		}
	]
}
```
1. dataMapping ： 配置数据映射规则
```
{
	queryRelations: // 可配置多组查询参数，结果展示多个查询的集合
			[
				{
					'nodeName':'MetadataTable',	// 主 Node
					'chains':['MetadataTable-BELONG_TO>*','MetadataTable<BELONG_TO-*'], // 指定关系
					'attachRelation':true,		// 关联定义
					'attachRelationData':true	// 关联实体
				}
			],
	showSdNames:  // 配置展示哪些 SD
		{
			"node": ["MetadataTable","MetadataField","BusinessSystem"], // 要展示 node 的 sd 名称
			"event":["BELONG_TO"]	// 要展示 event 的 sd 名称
		},
	styleMappings: { // 配置SD展示样式
		"MetadataTable": {	// Node SD名称
			"style": {		// 指定mapping样式
				"text": {	// 显示文本样式
					"opacity": 1,			// 文本不透明度
					"stroke": "#000",		// 笔触颜色
					"strokeWidth": "0",		// 笔触宽度
					"strokeDasharray": 0	// 笔触间隔，是否连续
				},
				"icon":{	// SD展示图标
					"key": "table",			// 图标唯一标识
					"href": "image/table.png",// 图标位置，需要将图标图片放置到指定位置
					"width": 32,			// 图标宽度
					"height": 32			// 图标高度
				},
				"opacity": 1,				// 不透明度
				"stroke": "#000",			// 笔触颜色
				"strokeWidth": "0",			// 笔触宽度
				"strokeDasharray": 0,		// 笔触间隔，是否连续
				"width": 32,				// 宽度
				"height": 32,				// 高度
				"radius": 0,				// 圆角大小
				"fill": "#03A9F4"			// 填充颜色
			}
		},
		"BELONG_TO": {	// Event SD 名称
			"style": {  // 指定mapping样式
				"text":{// 显示文本样式
					"opacity": 0,			// 文本不透明度
					"stroke":"#000",		// 笔触颜色
					"strokeDasharray":0		// 笔触间隔，是否连续
				},
				"opacity" : 0,				// 线不透明度
				"stroke":"#FFAB00",			// 笔触颜色
				"strokeWidth":"2px",		// 笔触宽度
				"strokeDasharray":0,		// 笔触间隔，是否连续
				"fill": "#FFAB00"			// 填充颜色
			}
		}
	},
	dataTitleProps: {	// 配置需要直接在Graph上展示哪些属性值的配置
		"MetadataTable": // SD名称
			["tableName"]	// SD属性名称，允许多个
	}
}
```

## 运行
1. npm install
1. 调试启动 npm run start
1. 在浏览器中访问 http://127.0.0.1:8080/dist
1. 打开控制台输入： raReady.update({})