4.8 Icons
The Graph Visualization Toolkit supports Redwood as native icon library.
Consider the following example using the icon library:
// 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 }
});
The resulting graph visualization is as shown:
Figure 4-12 Using Redwood Icons in Graph Visualization
Parent topic: Usage Examples