added files
This commit is contained in:
parent
fdcb949f19
commit
670432e96e
46
dynamic_usage_example.html
Executable file
46
dynamic_usage_example.html
Executable file
@ -0,0 +1,46 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>JsNetworkx Custom Element</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="https://d3js.org/d3.v3.js"></script>
|
||||||
|
<script src="jsnetworkx.js"></script>
|
||||||
|
<script src="widget.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<net-graph id="graph2" weighted="true" style="border-style: dotted; width:800px; height:600px;">
|
||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
[ 1, { "radius": 5, "color": "yellow"} ],
|
||||||
|
[ 2, { "radius": 15, "color": "green"} ],
|
||||||
|
[ 3, { "radius": 25, "color": "red"} ]
|
||||||
|
],
|
||||||
|
"edges": [
|
||||||
|
[1, 2, {"color": "red"}]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</net-graph>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<net-graph id="graph" weighted="true" style="border-style: dotted; width:800px; height:600px;" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let ele = document.getElementById("graph");
|
||||||
|
|
||||||
|
let i = 10;
|
||||||
|
setInterval(()=>{
|
||||||
|
ele.G.addNode(i, { "radius": Math.floor(Math.random() * 30), "color": "red"} );
|
||||||
|
|
||||||
|
ele.G.addEdge(i - 1, i);
|
||||||
|
|
||||||
|
if(i > 20) i = -10;
|
||||||
|
|
||||||
|
i += 1;
|
||||||
|
},1000);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
216
jira_graph.twig
Normal file
216
jira_graph.twig
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Jira Graph</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="https://d3js.org/d3.v3.js"></script>
|
||||||
|
<script src="jsnetworkx.js"></script>
|
||||||
|
<script>
|
||||||
|
function simulateClick(control) {
|
||||||
|
if (document.all) {
|
||||||
|
control.click();
|
||||||
|
} else {
|
||||||
|
var evObj = document.createEvent('MouseEvents');
|
||||||
|
evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
|
||||||
|
control.dispatchEvent(evObj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body style="font-family: Arial; background-color: black; color: white; height: 890px;">
|
||||||
|
|
||||||
|
{% for k, v in issues.items() %}
|
||||||
|
<div id="{{ k }}_state" style="display: none;">{{ v['state'] }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for k, v in issues.items() %}
|
||||||
|
<div id="{{ k }}_summary" style="display: none;">{{ v['summary'] }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for k, v in issues.items() %}
|
||||||
|
<div id="{{ k }}_description" style="display: none;">{{ v['description'] }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% for k, v in issues.items() %}
|
||||||
|
<div id="{{ k }}_type" style="display: none;">{{ v['type'] }}</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<div style="width: 450px; float: right;">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type="text" id="search">
|
||||||
|
<button onclick="simulateClick(document.getElementById('node-' + document.getElementById('search').value));">Search</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
|
<table style="table-layout: fixed">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Issue type(Nodes)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for k, v in issue_colors.items() %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ k }}</td>
|
||||||
|
<td style="width: 20px; background-color:{{ v }};" title="{{ v }}">
|
||||||
|
<!--<input type="color" value="{{ v }}">-->
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table style="table-layout: fixed; float: right;">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Link type(Edges)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for k, v in link_colors.items() %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ k }}</td>
|
||||||
|
<td style="width: 20px; background-color:{{ v }};" title="{{ v }}"></td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
<div style="width:300px; height: 350px;">
|
||||||
|
<b><span id="issue_type"></span>:<span id="issue_nr"></span>(<span style="font-size: 11pt;" id="issue_state"></span>)</b>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<b>Summary</b>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div id="summary"></div>
|
||||||
|
<br>
|
||||||
|
<b>Description</b>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<div id="description"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="graph" style="background-color: darkblue; height: 100%; width: 1400px;"></div>
|
||||||
|
<script>
|
||||||
|
let G = new jsnx.MultiDiGraph();
|
||||||
|
G.addNodesFrom([
|
||||||
|
{% for k, v in issues.items() %}
|
||||||
|
[ {{ k }}, { radius: {{ v['radius'] }}, color: "{{ v['color'] }}"} ],
|
||||||
|
{% endfor %}
|
||||||
|
], {color: 'black'} );
|
||||||
|
G.addEdgesFrom([
|
||||||
|
{% for d in connections %}
|
||||||
|
[{{ d['start'] }}, {{ d['end'] }}, {color: "{{d['color']}}"}],
|
||||||
|
{% endfor %}
|
||||||
|
], {color: 'black'} );
|
||||||
|
|
||||||
|
jsnx.draw(G, {
|
||||||
|
element: '#graph',
|
||||||
|
//weighted: true,
|
||||||
|
withLabels: true,
|
||||||
|
labelStyle: {fill: 'white'},
|
||||||
|
|
||||||
|
edgeStyle: {
|
||||||
|
'stroke-width': 5,
|
||||||
|
fill: function(d) {
|
||||||
|
//stroke: function(d) {
|
||||||
|
//console.log(d.data.color);
|
||||||
|
//console.log(d.data[0]);
|
||||||
|
return d.data[0].color;// || 'red';
|
||||||
|
//return d.data.color
|
||||||
|
//return "red";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
nodeStyle: {
|
||||||
|
fill: function(d) {
|
||||||
|
//hsl({link_hue_values[link.type.name]},100%,50%)
|
||||||
|
return d.data.color;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nodeAttr: {
|
||||||
|
r: function(d) {
|
||||||
|
// `d` has the properties `node`, `data` and `G`
|
||||||
|
return d.data.radius | 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//add ids
|
||||||
|
d3.selectAll('.node').each(function(d, i){
|
||||||
|
d3.select(this).attr('id', "node-" + d.node);
|
||||||
|
});
|
||||||
|
d3.selectAll('.edge').each(function(d, i){
|
||||||
|
d3.select(this).attr('id', "edge-" + d.edge[0] + "-" + d.edge[1]);
|
||||||
|
});
|
||||||
|
|
||||||
|
function highlight_nodes(d, on, active_color="#f00", ignore_color="#000") {
|
||||||
|
let node = d.node;
|
||||||
|
let neighbours = d.G.neighbors(d.node);
|
||||||
|
|
||||||
|
let n = d3.select('#node-' + node);
|
||||||
|
let circle_ele = n[0][0].children[0];
|
||||||
|
circle_ele.style["fill"] = on ? active_color : d.data.color;
|
||||||
|
|
||||||
|
d.G.nodes(true).forEach(function(t) {
|
||||||
|
let[node2, data] = t;
|
||||||
|
if(node !== node2){
|
||||||
|
let n = d3.select('#node-' + node2);
|
||||||
|
let circle_ele = n[0][0].children[0];
|
||||||
|
circle_ele.style["fill"] = on ? ignore_color : data.color;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
d.G.edges(true).forEach(function(t) {
|
||||||
|
let[a, b, data] = t;
|
||||||
|
let n = d3.select('#edge-' + a + "-" + b);
|
||||||
|
let circle_ele = n[0][0].children[0];
|
||||||
|
circle_ele.style["fill"] = on ? ignore_color : data.color;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// bind event handlers
|
||||||
|
//d3.selectAll('.node').on('mouseover', function(d) {
|
||||||
|
//highlight_nodes(d.G.neighbors(d.node).concat(d.node), true);
|
||||||
|
//console.log("("+d.node+")");
|
||||||
|
//});
|
||||||
|
|
||||||
|
//d3.selectAll('.node').on('mouseout', function(d) {
|
||||||
|
//highlight_nodes(d.G.neighbors(d.node).concat(d.node), false);
|
||||||
|
//});
|
||||||
|
|
||||||
|
let focus_node = null;
|
||||||
|
d3.selectAll('.node').on('click', function(d) {
|
||||||
|
if(focus_node === d.node){
|
||||||
|
highlight_nodes(d, false);
|
||||||
|
focus_node = null;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
highlight_nodes(d, true);
|
||||||
|
focus_node = d.node;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("issue_nr").innerHTML = `<a style="color:lightblue;" target="_blank" rel="noopener noreferrer" href="https://team.breuer-gmbh.de/browse/DW-${d.node}">${d.node}</a>`;
|
||||||
|
document.getElementById("issue_type").innerHTML = document.getElementById(d.node+"_type").innerHTML;
|
||||||
|
document.getElementById("issue_state").innerHTML = document.getElementById(d.node+"_state").innerHTML;
|
||||||
|
document.getElementById("summary").innerHTML = document.getElementById(d.node+"_summary").innerHTML;
|
||||||
|
document.getElementById("description").innerHTML = document.getElementById(d.node+"_description").innerHTML;
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
jsnetworkx.js
Normal file
8
jsnetworkx.js
Normal file
File diff suppressed because one or more lines are too long
27
usage_example.html
Executable file
27
usage_example.html
Executable file
@ -0,0 +1,27 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My Custom Element</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="https://d3js.org/d3.v3.js"></script>
|
||||||
|
<script src="jsnetworkx.js"></script>
|
||||||
|
<script src="widget.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<net-graph style="border-style: dotted; width:800px; height:600px;">
|
||||||
|
{
|
||||||
|
"nodes": [
|
||||||
|
[ 1, { "radius": 5, "color": "yellow"} ],
|
||||||
|
[ 2, { "radius": 15, "color": "green"} ],
|
||||||
|
[ 3, { "radius": 25, "color": "red"} ]
|
||||||
|
],
|
||||||
|
"edges": [
|
||||||
|
|
||||||
|
[1, 2, {"color": "red"}]
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</net-graph>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
89
widget.js
Executable file
89
widget.js
Executable file
@ -0,0 +1,89 @@
|
|||||||
|
|
||||||
|
class NetGraphElement extends HTMLElement {
|
||||||
|
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ['G'];
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({mode: 'open'});
|
||||||
|
this.content_div = document.createElement('div');
|
||||||
|
this.shadowRoot.appendChild(this.content_div);
|
||||||
|
this.slot_ele = document.createElement('slot');
|
||||||
|
this.shadowRoot.appendChild(this.slot_ele);
|
||||||
|
this.G = new jsnx.MultiDiGraph();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(){
|
||||||
|
let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
|
||||||
|
let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false;
|
||||||
|
let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true;
|
||||||
|
|
||||||
|
this.content_div.style = style;
|
||||||
|
let that = this;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
jsnx.draw(that.G, {
|
||||||
|
element: that.content_div,
|
||||||
|
weighted,
|
||||||
|
withLabels,
|
||||||
|
labelStyle: {fill: 'white'},
|
||||||
|
edgeStyle: {
|
||||||
|
'stroke-width': 5,
|
||||||
|
fill: d => d.data[0].color
|
||||||
|
},
|
||||||
|
nodeStyle: {
|
||||||
|
fill: d => d.data.color
|
||||||
|
},
|
||||||
|
nodeAttr: {
|
||||||
|
r: d => d.data.radius | 10
|
||||||
|
}
|
||||||
|
}, true); //true ensures redrawing
|
||||||
|
|
||||||
|
|
||||||
|
this.slot_ele.addEventListener('slotchange', e => {
|
||||||
|
try{
|
||||||
|
let text = that.innerText.trim();
|
||||||
|
let{nodes, edges} = JSON.parse(text);
|
||||||
|
that.G.addNodesFrom(nodes, {color: 'black'} );
|
||||||
|
that.G.addEdgesFrom(edges, {color: 'black'} );
|
||||||
|
}
|
||||||
|
catch(e){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
jsnx.draw(that.G, {
|
||||||
|
element: that.content_div,
|
||||||
|
weighted,
|
||||||
|
withLabels,
|
||||||
|
labelStyle: {fill: 'white'},
|
||||||
|
edgeStyle: {
|
||||||
|
'stroke-width': 5,
|
||||||
|
fill: d => d.data[0].color
|
||||||
|
},
|
||||||
|
nodeStyle: {
|
||||||
|
fill: d => d.data.color
|
||||||
|
},
|
||||||
|
nodeAttr: {
|
||||||
|
r: d => d.data.radius | 10
|
||||||
|
}
|
||||||
|
}, true); //true ensures redrawing
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
that.slot_ele.style.display = "none";
|
||||||
|
that.content_div.children[0].setAttribute("width", that.content_div.style.width);
|
||||||
|
that.content_div.children[0].setAttribute("height", that.content_div.style.height);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('net-graph', NetGraphElement);
|
||||||
Loading…
x
Reference in New Issue
Block a user