Skip to content

Commit 4990221

Browse files
CorvusYeCorvusYe
committed
feat: add legend in graph.
1 parent dc0dc02 commit 4990221

File tree

7 files changed

+89
-32
lines changed

7 files changed

+89
-32
lines changed

‎README-CN.md

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,22 @@
66
-->
77

88
# Flutter Graph View
9+
10+
<p align="center">
11+
<a title="Pub" href="https://flame-engine.org" >
12+
<img src="https://img.shields.io/badge/Powered%20by-%F0%9F%94%A5-orange.svg" />
13+
</a>
14+
<a title="Powered by Flame" href="https://pub.dev/packages/flutter_graph_view" >
15+
<img src="https://img.shields.io/badge/Pub-v0.0.1+x-red?style=popout" />
16+
</a>
17+
<a href="https://github.com/dudu-ltd/flutter_graph_view/stargazers">
18+
<img src="https://img.shields.io/github/stars/dudu-ltd/flutter_graph_view" alt="GitHub stars" />
19+
</a>
20+
<a href="https://github.com/dudu-ltd/flutter_graph_view/network/members">
21+
<img src="https://img.shields.io/github/forks/dudu-ltd/flutter_graph_view" alt="GitHub forks" />
22+
</a>
23+
</p>
24+
925
致力于图数据的可视化组件
1026

1127
![demo](https://foruda.gitee.com/images/1674684822685415888/5033481e_1043207.png)
@@ -19,7 +35,7 @@ TODO:
1935
- [x] 力导向图法，雏形已实现
2036
- [x] 节点碰撞检测
2137
- [x] 提供数据面板的嵌入
22-
- [ ] 提供样式配置
38+
- [x] 提供样式配置
2339
- [ ] 提供更多交互能力
2440

2541
## Getting started
@@ -49,7 +65,7 @@ void main() {
4965
'id': 'node$i',
5066
'tag': 'tag${r.nextInt(9)}',
5167
'tags': [
52-
'tag${r.nextInt(4)}',
68+
'tag${r.nextInt(9)}',
5369
if (r.nextBool()) 'tag${r.nextInt(4)}',
5470
if (r.nextBool()) 'tag${r.nextInt(8)}'
5571
],
@@ -90,13 +106,20 @@ void main() {
90106
options: Options()
91107
..graphStyle = (GraphStyle()
92108
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
93-
..tagColor = {'tag3': Colors.purple}
109+
..tagColor = {'tag8': Colors.orangeAccent.shade200}
94110
..tagColorByIndex = [
95-
Colors.blue,
96-
Colors.red,
97-
Colors.green,
98-
Colors.yellow,
111+
Colors.red.shade200,
112+
Colors.orange.shade200,
113+
Colors.yellow.shade200,
114+
Colors.green.shade200,
115+
Colors.blue.shade200,
116+
Colors.blueAccent.shade200,
117+
Colors.purple.shade200,
118+
Colors.pink.shade200,
119+
Colors.blueGrey.shade200,
120+
Colors.deepOrange.shade200,
99121
])
122+
..useLegend = true // default true
100123
..edgePanelBuilder = edgePanelBuilder
101124
..vertexPanelBuilder = vertexPanelBuilder
102125
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎README.md

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,28 @@
44
This source code is licensed under Apache 2.0 License.
55
-->
66

7-
# Flutter Graph View
7+
<h1 align="center"> Flutter Graph View </h1>
8+
9+
10+
<p align="center">
11+
<a title="Pub" href="https://flame-engine.org" >
12+
<img src="https://img.shields.io/badge/Powered%20by-%F0%9F%94%A5-orange.svg" />
13+
</a>
14+
<a title="Powered by Flame" href="https://pub.dev/packages/flutter_graph_view" >
15+
<img src="https://img.shields.io/badge/Pub-v0.0.1+x-red?style=popout" />
16+
</a>
17+
<a href="https://github.com/dudu-ltd/flutter_graph_view/stargazers">
18+
<img src="https://img.shields.io/github/stars/dudu-ltd/flutter_graph_view" alt="GitHub stars" />
19+
</a>
20+
<a href="https://github.com/dudu-ltd/flutter_graph_view/network/members">
21+
<img src="https://img.shields.io/github/forks/dudu-ltd/flutter_graph_view" alt="GitHub forks" />
22+
</a>
23+
</p>
24+
825
Widgets for beautiful graphic data structures, such as force-oriented diagrams. (Under development.)
926

10-
![image](https://user-images.githubusercontent.com/15630211/214703510-17ccfe4d-e3f6-49b9-9bc1-6ce84bd825a8.png)
27+
![image](https://user-images.githubusercontent.com/15630211/216155004-0d6dc826-c589-41cf-bf7c-a51685582c05.png)
28+
1129

1230
https://user-images.githubusercontent.com/15630211/214360687-93a3683c-0935-46bd-9584-5cb997d518b8.mp4
1331

@@ -19,7 +37,7 @@ TODO:
1937
- [x] Force directed algorithm.
2038
- [x] Random algorithm (In example folder).
2139
- [x] Data panel embedding.
22-
- [ ] Style configuration.
40+
- [x] Style configuration.
2341
- [ ] More graphical interactions.
2442

2543
## Getting started
@@ -49,7 +67,7 @@ void main() {
4967
'id': 'node$i',
5068
'tag': 'tag${r.nextInt(9)}',
5169
'tags': [
52-
'tag${r.nextInt(4)}',
70+
'tag${r.nextInt(9)}',
5371
if (r.nextBool()) 'tag${r.nextInt(4)}',
5472
if (r.nextBool()) 'tag${r.nextInt(8)}'
5573
],
@@ -90,13 +108,20 @@ void main() {
90108
options: Options()
91109
..graphStyle = (GraphStyle()
92110
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
93-
..tagColor = {'tag3': Colors.purple}
111+
..tagColor = {'tag8': Colors.orangeAccent.shade200}
94112
..tagColorByIndex = [
95-
Colors.blue,
96-
Colors.red,
97-
Colors.green,
98-
Colors.yellow,
113+
Colors.red.shade200,
114+
Colors.orange.shade200,
115+
Colors.yellow.shade200,
116+
Colors.green.shade200,
117+
Colors.blue.shade200,
118+
Colors.blueAccent.shade200,
119+
Colors.purple.shade200,
120+
Colors.pink.shade200,
121+
Colors.blueGrey.shade200,
122+
Colors.deepOrange.shade200,
99123
])
124+
..useLegend = true // default true
100125
..edgePanelBuilder = edgePanelBuilder
101126
..vertexPanelBuilder = vertexPanelBuilder
102127
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎example/lib/main.dart

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ void main() {
1616
'id': 'node$i',
1717
'tag': 'tag${r.nextInt(9)}',
1818
'tags': [
19-
'tag${r.nextInt(4)}',
19+
'tag${r.nextInt(9)}',
2020
if (r.nextBool()) 'tag${r.nextInt(4)}',
2121
if (r.nextBool()) 'tag${r.nextInt(8)}'
2222
],
@@ -57,13 +57,20 @@ void main() {
5757
options: Options()
5858
..graphStyle = (GraphStyle()
5959
// tagColor is prior to tagColorByIndex. use vertex.tags to get color
60-
..tagColor = {'tag3': Colors.purple}
60+
..tagColor = {'tag8': Colors.orangeAccent.shade200}
6161
..tagColorByIndex = [
62-
Colors.blue,
63-
Colors.red,
64-
Colors.green,
65-
Colors.yellow,
62+
Colors.red.shade200,
63+
Colors.orange.shade200,
64+
Colors.yellow.shade200,
65+
Colors.green.shade200,
66+
Colors.blue.shade200,
67+
Colors.blueAccent.shade200,
68+
Colors.purple.shade200,
69+
Colors.pink.shade200,
70+
Colors.blueGrey.shade200,
71+
Colors.deepOrange.shade200,
6672
])
73+
..useLegend = true // default true
6774
..edgePanelBuilder = edgePanelBuilder
6875
..vertexPanelBuilder = vertexPanelBuilder
6976
..edgeShape = EdgeLineShape() // default is EdgeLineShape.

‎example/pubspec.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ packages:
7676
path: ".."
7777
relative: true
7878
source: path
79-
version: "0.0.1+8"
79+
version: "0.0.1+9"
8080
flutter_lints:
8181
dependency: "direct dev"
8282
description:

‎lib/core/options.dart

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,9 @@ class Options {
3737
);
3838

3939
GraphStyle graphStyle = GraphStyle();
40+
41+
/// if render legend in canvas.
42+
///
43+
/// 是否展示图例
44+
bool useLegend = true;
4045
}

‎lib/widgets/graph_component.dart

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,19 +114,16 @@ class GraphComponent extends FlameGame
114114
}
115115

116116
void createLegend() {
117+
if (!options.useLegend) return;
118+
var graphStyle = options.graphStyle;
117119
for (var i = 0; i < graph.allTags.length; i++) {
118120
var tag = graph.allTags[i];
119121

120122
add(
121123
RectangleComponent.fromRect(
122-
Rect.fromLTWH(
123-
40,
124-
50.0 + 30 * i,
125-
30,
126-
18,
127-
),
128-
paint: Paint()
129-
..color = options.graphStyle.colorByTag(tag, graph.allTags)!),
124+
Rect.fromLTWH(40, 50.0 + 30 * i, 30, 18),
125+
paint: Paint()..color = graphStyle.colorByTag(tag, graph.allTags)!,
126+
),
130127
);
131128

132129
add(TextComponent(text: tag, position: Vector2(40 + 40, 44.0 + 30 * i)));

‎pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: flutter_graph_view
22
description: Widgets for beautiful graphic data structures, such as force-oriented diagrams.
3-
version: 0.0.1+8
3+
version: 0.0.1+9
44
homepage: https://github.com/dudu-ltd/flutter_graph_view
55

66
environment:

0 commit comments

Comments
 (0)