-
Notifications
You must be signed in to change notification settings - Fork 56
/
entityGraph.html
72 lines (68 loc) · 8.13 KB
/
entityGraph.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entity graph</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<link href="https://unpkg.com/vis-network/styles/vis-network.min.css" rel="stylesheet" type="text/css" />
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script>
const nodes = new vis.DataSet([{id: 1, image: 'data:image/svg+xml;charset=utf-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22300px%22%20height%3D%22100px%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A12px%3B%20width%3A%20300px%3B%20height%3A%20100px%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border%3A%201px%20solid%20black%3B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%22%3E%20%20%3Ctr%3E%3Ctd%20colspan%3D%222%22%20style%3D%22border%3A%201px%20solid%20black%3B%20text-align%3A%20center%3B%22%3E%3Cb%3EAgreement%20Contract%3C%2Fb%3E%3C%2Ftd%3E%3C%2Ftr%3E%20%20%3Ctr%3E%3Ctd%3EDate%3C%2Ftd%3E%3Ctd%3E2020-01-01%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3EClient%3C%2Ftd%3E%3Ctd%3ECompany%20A%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3EService%20Provider%3C%2Ftd%3E%3Ctd%3ECompany%20B%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%0A%20%20%20%20%3C%2Fsvg%3E', shape: 'image'},
{id: 2, image: 'data:image/svg+xml;charset=utf-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22300px%22%20height%3D%22100px%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A12px%3B%20width%3A%20300px%3B%20height%3A%20100px%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border%3A%201px%20solid%20black%3B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%22%3E%20%20%3Ctr%3E%3Ctd%20colspan%3D%222%22%20style%3D%22border%3A%201px%20solid%20black%3B%20text-align%3A%20center%3B%22%3E%3Cb%3EScope%20of%20Work%3C%2Fb%3E%3C%2Ftd%3E%3C%2Ftr%3E%20%20%3Ctr%3E%3Ctd%3EProduct%20Delivery%3C%2Ftd%3E%3Ctd%3E2020-01-31%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%0A%20%20%20%20%3C%2Fsvg%3E', shape: 'image'},
{id: 3, image: 'data:image/svg+xml;charset=utf-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22300px%22%20height%3D%22100px%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A12px%3B%20width%3A%20300px%3B%20height%3A%20100px%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border%3A%201px%20solid%20black%3B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%22%3E%20%20%3Ctr%3E%3Ctd%20colspan%3D%222%22%20style%3D%22border%3A%201px%20solid%20black%3B%20text-align%3A%20center%3B%22%3E%3Cb%3EPayment%20Terms%3C%2Fb%3E%3C%2Ftd%3E%3C%2Ftr%3E%20%20%3Ctr%3E%3Ctd%3ETotal%20Payment%3C%2Ftd%3E%3Ctd%3E%2450%2C000%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3EInitial%20Payment%3C%2Ftd%3E%3Ctd%3E%2410%2C000%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3EFinal%20Payment%3C%2Ftd%3E%3Ctd%3E2020-02-15%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%0A%20%20%20%20%3C%2Fsvg%3E', shape: 'image'},
{id: 4, image: 'data:image/svg+xml;charset=utf-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22300px%22%20height%3D%22100px%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A12px%3B%20width%3A%20300px%3B%20height%3A%20100px%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border%3A%201px%20solid%20black%3B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%22%3E%20%20%3Ctr%3E%3Ctd%20colspan%3D%222%22%20style%3D%22border%3A%201px%20solid%20black%3B%20text-align%3A%20center%3B%22%3E%3Cb%3EConfidentiality%3C%2Fb%3E%3C%2Ftd%3E%3C%2Ftr%3E%20%20%3Ctr%3E%3Ctd%3EConfidentiality%20Duration%3C%2Ftd%3E%3Ctd%3E2020-05-15%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%0A%20%20%20%20%3C%2Fsvg%3E', shape: 'image'},
{id: 5, image: 'data:image/svg+xml;charset=utf-8,%0A%20%20%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3CforeignObject%20x%3D%220%22%20y%3D%220%22%20width%3D%22300px%22%20height%3D%22100px%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22font-size%3A12px%3B%20width%3A%20300px%3B%20height%3A%20100px%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20justify-content%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border%3A%201px%20solid%20black%3B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%22%3E%20%20%3Ctr%3E%3Ctd%20colspan%3D%222%22%20style%3D%22border%3A%201px%20solid%20black%3B%20text-align%3A%20center%3B%22%3E%3Cb%3ETermination%3C%2Fb%3E%3C%2Ftd%3E%3C%2Ftr%3E%20%20%3Ctr%3E%3Ctd%3ETermination%20Notice%3C%2Ftd%3E%3Ctd%3E30%20days%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3EOutstanding%20Obligations%3C%2Ftd%3E%3Ctd%3E2020-02-01%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%0A%20%20%20%20%3C%2Fsvg%3E', shape: 'image'}]);
const edges = new vis.DataSet([{from: 2, to: 1},
{from: 3, to: 1},
{from: 4, to: 3},
{from: 5, to: 2}]);
const options = {
scale: 2.0,
edges: {
smooth: true,
arrows: {
to: { enabled: true, scaleFactor: 0.3, type: 'arrow' }
},
color: "black"
},
layout: {
hierarchical: {
enabled: true,
levelSeparation: 75,
nodeSpacing: 600,
treeSpacing: 200,
direction: 'DU',
shakeTowards: 'roots'
}
},
physics: {
enabled: false
}
};
const container = document.getElementById('mynetwork');
const graphData = {
nodes: nodes,
edges: edges
};
const network = new vis.Network(container, graphData, options);
network.moveTo({
scale: 2
});
</script>
</body>
</html>