D3 Implementation

Author: Umius-Brian

app/charts/route-trace.jsx

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
-class RouteTrace {
 
+class RouteTrace {
   containerEl;
   props;
   svg;
@@ -24,8 +24,8 @@ class RouteTrace {
       .enter()
       .append('circle')
       .style('fill', 'red')
-      .attr('cx', 20)
-      .attr('cy', 200)
+      .attr('cx', () => Math.random() * width)
+      .attr('cy', () => Math.random() * height)
       .attr('r', 20)
       .on('mouseup', (d, i, nodes) => this.setActiveDatapoint(d, nodes[i]));
   }

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';
 
@@ -16,10 +17,10 @@ const GraphsContainer = (props) => {
   const { service } = props;
   const initialData = {
     nodes: [
-      { id: 'reverse-proxy' },
-      { id: 'books' },
-      { id: 'customers' },
-      { id: 'orders' },
+      { id1: 'reverse-proxy' },
+      { id2: 'books' },
+      { id3: 'customers' },
+      { id4: 'orders' },
     ],
     links: [
       { source: 'reverse-proxy', target: 'books' },
@@ -56,7 +57,7 @@ const GraphsContainer = (props) => {
       vis = new RouteTrace(canvas.current, d3Props);
     }
   }
-
+  
   return (
     <div className="graphsGrid">
       <div ref={canvas}/>