Drawing tree chart from real data
diff --git a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
index 88d1388..8206194 100644
--- a/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
+++ b/gui/ngXosViews/serviceTopology/src/js/topologyCanvas.js
@@ -9,7 +9,7 @@
bindToController: true,
controllerAs: 'vm',
templateUrl: 'templates/topology_canvas.tpl.html',
- controller: function($element, $window, d3, serviceTopologyConfig){
+ controller: function($element, $window, d3, serviceTopologyConfig, ServiceRelation){
// count the mas depth of an object
const depthOf = (obj) => {
@@ -25,6 +25,11 @@
return 1 + depth
};
+ ServiceRelation.get()
+ .then(res => {
+ //console.log(res);
+ });
+
const treeData = [
{
'name': 'Top Level',
@@ -68,14 +73,13 @@
.append('g')
.attr("transform", "translate(" + serviceTopologyConfig.widthMargin+ "," + serviceTopologyConfig.heightMargin + ")");;
- const resizeCanvas = () => {
- var targetSize = svg.node().getBoundingClientRect();
-
- d3.select(self.frameElement)
- .attr('width', `${targetSize.width}px`)
- .attr('height', `${targetSize.height}px`)
- };
-
+ //const resizeCanvas = () => {
+ // var targetSize = svg.node().getBoundingClientRect();
+ //
+ // d3.select(self.frameElement)
+ // .attr('width', `${targetSize.width}px`)
+ // .attr('height', `${targetSize.height}px`)
+ //};
//d3.select(window)
// .on('load', () => {
// resizeCanvas();
@@ -85,15 +89,17 @@
// resizeCanvas();
// update(root);
// });
-
- var root = treeData[0];
- root.x0 = $window.innerHeight / 2;
- root.y0 = 0;
-
+ var root;
var i = 0;
var duration = 750;
- update(root);
+ const draw = (tree) => {
+ root = tree;
+ root.x0 = $window.innerHeight / 2;
+ root.y0 = 0;
+
+ update(root);
+ };
function update(source) {
@@ -194,6 +200,13 @@
d.y0 = d.y;
});
}
+
+ ServiceRelation.get()
+ .then((tree) => {
+ console.log(tree);
+ draw(tree);
+ });
+ //draw(treeData[0]);
}
}
});