Drawing logical layer
diff --git a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
index a15b017..56d1f56 100644
--- a/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
+++ b/views/ngXosViews/diagnostic/src/js/logicTopologyHelper.js
@@ -100,6 +100,153 @@
createSubscriber(container, subscriber, hStep, vStep * (i + 1));
})
}
+
+ var diagonal, nodes, links, i = 0, svgWidth, svgHeight, layout;
+
+ const baseData = {
+ name: 'Router',
+ type: 'router',
+ children: [
+ {
+ name: 'WAN',
+ type: 'network',
+ children: [
+ {
+ name: 'Rack',
+ type: 'rack',
+ children: [
+ {
+ name: 'LAN',
+ type: 'network',
+ children: [] //subscribers goes here
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ };
+
+ const computeLayout = (data) => {
+ let nodes = layout.nodes(data);
+
+ // Normalize for fixed-depth.
+ nodes.forEach(function(d) {
+ // position the child node horizontally
+ const step = ((svgWidth - (serviceTopologyConfig.widthMargin * 2)) / 7);
+ d.y = (6 - d.depth) * step;
+ });
+
+ let links = layout.links(nodes);
+ console.log(nodes.length, links.length);
+ return [nodes, links];
+ };
+
+ const drawNodes = (svg, nodes) => {
+ // Update the nodes…
+ var node = svg.selectAll('g.node')
+ .data(nodes, d => {return d.id || (d.id = `tree-${i++}`)});
+
+ // Enter any new nodes at the parent's previous position.
+ var nodeEnter = node.enter().append('g')
+ .attr({
+ class: d => `node ${d.type}`,
+ transform: `translate(${svgWidth / 2}, ${svgHeight / 2})`
+ });
+
+ nodeEnter.append('circle')
+ .attr('r', 10)
+ .style('fill', d => d._children ? 'lightsteelblue' : '#fff');
+
+ nodeEnter.append('text')
+ .attr({
+ x: d => d.children ? serviceTopologyConfig.circle.selectedRadius + 3 : -serviceTopologyConfig.circle.selectedRadius - 3,
+ dy: '.35em',
+ transform: d => {
+ if (d.children && d.parent){
+ if(d.parent.x < d.x){
+ return 'rotate(-30)';
+ }
+ return 'rotate(30)';
+ }
+ },
+ 'text-anchor': d => d.children ? 'start' : 'end'
+ })
+ .text(d => d.name);
+
+ // Transition nodes to their new position.
+ var nodeUpdate = node.transition()
+ .duration(serviceTopologyConfig.duration)
+ .attr({
+ 'transform': d => `translate(${d.y},${d.x})`
+ });
+
+ // TODO handle node remove
+ };
+
+ const drawLinks = (svg, links) => {
+
+ diagonal = d3.svg.diagonal()
+ .projection(d => [d.y, d.x]);
+
+ // Update the links…
+ var link = svg.selectAll('path.link')
+ .data(links, d => {
+ return d.target.id
+ });
+
+ // Enter any new links at the parent's previous position.
+ link.enter().insert('path', 'g')
+ .attr('class', d => `link ${d.target.type}`)
+ .attr('d', function(d) {
+ var o = {x: svgHeight / 2, y: svgWidth / 2};
+ return diagonal({source: o, target: o});
+ });
+
+ // Transition links to their new position.
+ link.transition()
+ .duration(serviceTopologyConfig.duration)
+ .attr('d', diagonal);
+ };
+
+ this.drawTree = (svg) => {
+
+
+ svgWidth = svg.node().getBoundingClientRect().width;
+ svgHeight = svg.node().getBoundingClientRect().height;
+
+ const width = svgWidth - (serviceTopologyConfig.widthMargin * 2);
+ const height = svgHeight - (serviceTopologyConfig.heightMargin * 2);
+
+ layout = d3.layout.tree()
+ .size([height, width]);
+
+ // Compute the new tree layout.
+ [nodes, links] = computeLayout(baseData);
+
+ drawNodes(svg, nodes);
+ drawLinks(svg, links);
+
+ };
+
+ this.addSubscribers = (svg, subscribers) => {
+
+ console.log(subscribers);
+
+ subscribers.map((subscriber) => {
+ subscriber.children = subscriber.devices;
+ });
+
+ // add subscriber to data tree
+ baseData.children[0].children[0].children[0].children = subscribers;
+
+ console.log(baseData);
+
+ [nodes, links] = computeLayout(baseData);
+
+ drawNodes(svg, nodes);
+ drawLinks(svg, links);
+ }
});
}());
\ No newline at end of file