Skip to content

Icons

The Graph Visualization Toolkit supports Redwood as native icon library Example: 

 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
// 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 styles = {
  // Style applies for all the vertices
  vertex: {
    size: 12,
    label: '${properties.name}',
    color: 'red',
    icon: 'oj-ux-ico-user-not-available',
    legend: '${properties.label}',
  },
  // You can also specify conditions using the usual operators
  "vertex[properties.name === 'Hello']": {
    color: 'green'
  },
  "vertex[id % 3 === 0]": {
    color: 'gray',
    icon: 'oj-ux-ico-user-available',
    border: {
      width: 3
    }
  },
  // style applies to the vertices with blue as label
  "vertex.blue": { 
    color: 'blue'
  },
  "vertex:hover": {
    size: '${previous + 4}'
  },
  // Style applies for all the edges
  "edge": {
    label: '${id}',
    color: '#FF8080'
  }
};

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, styles }
});

Graph Visualization