How to use @hpcc-js/graph - 10 common examples
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 / packages / marshaller / src / ddl2 / graphadapter.ts View on Github 
createSubgraph(id: string, label: string, data?: VertexData): Subgraph {
let retVal: Subgraph = this.subgraphMap[id];
if (!retVal) {
retVal = new Subgraph()
// .classed({ subgraph: true })
// .showIcon(false)
.columns(["DS"])
.data([[data]])
;
this.subgraphMap[id] = retVal;
}
this.vertices.push(retVal);
retVal.title(`${label}`);
retVal.getBBox(true);
return retVal;
}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;
});
}
}
});.weight(50)
);
}, graph2);
graph2.data({ vertices: vertices2, edges: edges2 });
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", () => {rawData2.links.forEach(function (link, idx) {
edges2.push(
new Edge()
.sourceVertex(vertices2[link.source])
.targetVertex(vertices2[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(50)
);
}, graph2);describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("graph", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Edge:
const graph = new Graph();
const vertices: any[] = [];
const edges: any[] = [];
const palette = Palette.ordinal("dark2");
const rawData = data.simple;
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")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);edges2.push(
new Edge()
.sourceVertex(vertices2[link.source])
.targetVertex(vertices2[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(50)
);
}, graph2);
graph2.data({ vertices: vertices2, edges: edges2 });
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" },.targetVertex(vertices2[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(50)
);
}, graph2);
graph2.data({ vertices: vertices2, edges: edges2 });
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" }
]).targetVertex(vertices[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("Hello!")
.strokeDasharray(idx === 0 ? "15, 10, 5, 10, 15" : "")
.strokeColor(idx === 0 ? "cyan" : "")
.weight(50)
)
;
}, graph);
graph.data({ vertices, edges });
render(graph);
break;
case AdjacencyGraph:
render(new AdjacencyGraph()
.columns(["uid", "label", "links"])
.data([
[1, "AdjacencyGraph 1", [[2], [3], [4]]],
[2, "AdjacencyGraph 2", []],
[3, "AdjacencyGraph 3", []],
[4, "AdjacencyGraph 4", []]
] as any)
);
break;
case Graph:
const graph2 = new Graph();
const vertices2: any[] = [];
const edges2: any[] = [];
const palette2 = Palette.ordinal("dark2");
const rawData2 = data.simple;rawData.links.forEach(function (link, idx) {
edges.push(
new Edge()
.sourceVertex(vertices[link.source])
.targetVertex(vertices[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(link.value)
)
;
});
