How to use the @hpcc-js/graph.Vertex function in @hpcc-js/graph
To help you get started, we’ve selected a few @hpcc-js/graph examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / tests / test-graph / src / graph.spec.ts View on Github 
render(graph2);
break;
case Sankey:
render(new Sankey()
.columns(dataBreach.columns)
.data(dataBreach.data)
.mappings([new SankeyColumn().column("Covered Entity Type"), new SankeyColumn().column("Type of Breach")])
);
break;
case Subgraph:
render(new Subgraph()
.title("Hello and Welcome!")
);
break;
case Vertex:
render(new Vertex()
.faChar("\uf007")
.text("Hello and Welcome!")
.annotationIcons([
{ faChar: "\uf188", tooltip: "Test A", shape_colorFill: "white", image_colorFill: "red" },
{ faChar: "\uf0ad", tooltip: "Test B", shape_colorFill: "green", shape_colorStroke: "green", image_colorFill: "white" },
{ faChar: "\uf193", tooltip: "Test C", shape_colorFill: "navy", shape_colorStroke: "navy", image_colorFill: "white" }
])
);
break;
default:
it("Has render test", () => {
expect(false).to.be.true;
});
}
}
});rawData.nodes.forEach(function (node) {
vertices.push(
new Vertex()
.text(node.name)
.textbox_shape_colorStroke(palette(node.icon))
.textbox_shape_colorFill("whitesmoke")
.icon_diameter(60)
.icon_shape_colorStroke("transparent")
.icon_shape_colorFill("transparent")
.icon_image_colorFill("#333333")
.textbox_shape_colorStroke("transparent")
.textbox_shape_colorFill("transparent")
.textbox_text_colorFill("#333333")
.iconAnchor("middle")
.faChar(node.icon)
)
;
}, graph);createVertex(id: string, label: string, data?: VertexData, tooltip: string = "", fillColor: string = "#dcf1ff"): Vertex {
let retVal: Vertex = this.vertexMap[id];
if (!retVal) {
retVal = new Vertex()
.columns(["DS"])
.data([[data]])
.icon_diameter(0)
;
this.vertexMap[id] = retVal;
}
this.vertices.push(retVal);
retVal
.textbox_shape_colorFill(fillColor)
.text(tooltip ? `${label}\n${tooltip}` : `${label}`)
.tooltip(tooltip)
;
retVal.getBBox(true);
return retVal;
}createVertex(faChar: string) {
return new Vertex()
.icon_diameter(32)
.icon_shape_colorFill("none")
.icon_shape_colorStroke("none")
.icon_image_colorFill("darkgray")
.iconAnchor("middle")
.textbox_shape_colorFill("none")
.textbox_shape_colorStroke("none")
.textbox_text_colorFill("darkgray")
.faChar(faChar)
;
}rawData.nodes.forEach(function (node, idx) {
let dateStr = `${Math.floor(Math.random() * 27) + 1991}-01-01`;
graphData.vertices.push(new Vertex().text(node.name + ` (${dateStr})`).faChar(node.icon));
graphData.vertices[idx].date = new Date(dateStr).getTime();
}, graph);
rawData.links.forEach(function (link) {createVertex(faChar: string) {
return new Vertex()
.icon_diameter(32)
.icon_shape_colorFill("none")
.icon_shape_colorStroke("none")
.icon_image_colorFill("darkgray")
.iconAnchor("middle")
.textbox_shape_colorFill("none")
.textbox_shape_colorStroke("none")
.textbox_text_colorFill("darkgray")
.faChar(faChar)
;
}rawData.nodes.forEach(function (node, idx) {
vertices.push(
new Vertex()
.centroid(idx === 0)
.text(node.name)
.textbox_shape_colorStroke(palette(node.group))
.textbox_shape_colorFill("whitesmoke")
.icon_shape_colorStroke(palette(node.group))
.icon_shape_colorFill(palette(node.group))
.faChar(node.name[0])
)
;
});
