1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103 | // This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';
const vertices = [
{
id: 1,
properties: {
label: 'blue',
name: 'Hello'
}
},
{
id: 2,
properties: {
label: 'blue',
name: 'World'
}
},
{
id: 3,
properties: {
name: 'Some Name'
}
}
];
const edges = [
{
id: 1,
source: 1,
target: 2
},
{
id: 2,
source: 2,
target: 3
}
];
const settings = {};
settings.baseStyles = {
// Style applies for all the vertices
vertex: {
size: 12,
label: '${properties.name}',
color: 'red',
icon: 'oj-ux-ico-user-not-available',
},
"vertex:hover": {
size: '${previous + 4}'
},
// Style applies for all the edges
"edge": {
label: '${id}',
color: '#FF8080'
}
};
settings.ruleBasedStyles = [
{
component: 'vertex',
target: 'target',
conditions: {
conditions: [
{
property: 'name',
operator: '=',
value: 'Hello'
}
],
operator: 'and'
},
style: {
color: 'green'
},
stylingEnabled: true,
},
{
component: 'vertex',
target: 'target',
conditions: {
conditions: [
{
rule: 'id % 3 === 0'
}
],
operator: 'and'
},
style: {
color: 'gray',
icon: { class: 'oj-ux-ico-user-available' }
},
stylingEnabled: true,
legendTitle: 'advanced conditions'
}
];
new GraphVisualization({
target: document.body,
props: { data: { vertices, edges }, settings }
});
|
