// 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 }
});