Merge pull request #13 from Umius-Brian/MVP-Features

MVP Features

Author: Umius-Brian

app/charts/route-trace.jsx

@@ -1,10 +1,20 @@
 import * as d3 from 'd3';
-class RouteTrace {
 
+let text = [{
+  t: 'reverseproxy',
+}, {
+  t: 'books',
+}, {
+  t: 'orders',
+}, {
+  t: 'customers'
+}]
+class RouteTrace {
   containerEl;
   props;
   svg;
-
+  
+  // creating D3 container for the nodes
   constructor(containerEl, props) {
     this.containerEl = containerEl;
     this.props = props;
@@ -17,38 +27,52 @@ class RouteTrace {
     this.updateDatapoints();
   }
 
+
   updateDatapoints = () => {
     const { svg, props: { data, width, height } } = this;
     console.log('data: ', data)
     console.log('nodes: ', data[0])
     console.log('links: ', data[1])
+    
+    console.log('1st data point: ', data[0][0])
+    console.log('4th data point: ', data[0][3])
 
 
     var simulation = d3.forceSimulation(data[0])
       .force('link', d3.forceLink())
       .force('charge', d3.forceManyBody())
       .force('center', d3.forceCenter(width / 2, height / 2))
-
+    
     const node = svg
-    .selectAll("circle")
-    .data(data[0])
-    .enter()
-    .append("circle")
-      .attr("r", 20)
-      .attr('cx', () => Math.random() * width)
-      .attr('cy', () => Math.random() * height)
-      .style("fill", "#00eda0")
-      .on('mouseup', (d, i, nodes) => this.setActiveDatapoint(d, nodes[i]));
+      .selectAll('circle')
+      .data(data[0])
+      .enter()
+      .append('circle')
+      .on('mouseover', () => d3.select(this).text(d.id))
+    
+    const circleAttr = node
+      .attr('r', 20)
+      .attr('cx', 200)
+      .attr('cy', 200)
+      .style('fill', '#00eda0')
+      .on('mouseup', (d, i, nodes) => this.setActiveDatapoint(d, nodes[i]))
 
-     node.append("title")
-     .text(function(d) { return d.id; });
+    const text = svg.selectAll('text')
+      .data(data[0]).enter().append('text')
+        
+    const textLabels = text
+      .attr('x', d => d.x)
+      .attr('y', d => d.y)
+      .attr('dx', 100)
+      .attr('dy','10em')
+      .text(d => d.id);
 
     const link = svg
-      .selectAll("line")
+      .selectAll('line')
       .data(data[1])
       .enter()
-      .append("line")
-      .style("stroke", "black")
+      .append('line')
+      .style('stroke', 'black')
 
     simulation
       .nodes(data[0])
@@ -57,19 +81,17 @@ class RouteTrace {
     simulation.force('link')
       .links(link);
 
-
     function ticked() {
       link
-        .attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
+        .attr('x1', function(d) { return d.source.x; })
+        .attr('y1', function(d) { return d.source.y; })
+        .attr('x2', function(d) { return d.target.x; })
+        .attr('y2', function(d) { return d.target.y; });
 
       node
-        .attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; });
+        .attr('cx', function(d) { return d.x; })
+        .attr('cy', function(d) { return d.y; });
     }
-  
   }
 
   setActiveDatapoint = (d, node) => {

app/containers/GraphsContainer.jsx

@@ -7,6 +7,7 @@ import TemperatureChart from '../charts/temperature-chart.jsx';
 import LatencyChart from '../charts/latency-chart.jsx';
 import MemoryChart from '../charts/memory-chart.jsx';
 import RouteTrace from '../charts/route-trace.jsx';
+// import RouteLocations from '../charts/route-copy.jsx';
 import MicroServiceTraffic from '../charts/microservice-traffic.jsx';
 import '../stylesheets/graphs.css';
 
@@ -55,11 +56,10 @@ const GraphsContainer = (props) => {
       vis = new RouteTrace(canvas.current, d3Props);
     }
   }
-
+  
   return (
     <div className="graphsGrid">
       <div className='routes'>
-        <div>{active}</div>
         <div ref={canvas} />
       </div>
       <SpeedChart service={service} />

package.json

@@ -17,7 +17,7 @@
       "@babel/preset-react"
     ],
     "plugins": [
-        "@babel/plugin-proposal-class-properties"
+      "@babel/plugin-proposal-class-properties"
     ]
   },
   "keywords": [],