Merge branch 'staging' into master

Author: Theqwertypusher

package-lock.json

@@ -106,13 +106,16 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@visx/glyph": "^1.0.0",
-    "@visx/gradient": "^1.0.0",
-    "@visx/group": "^1.0.0",
-    "@visx/hierarchy": "^1.0.0",
+    "@visx/axis": "^1.0.0",
+    "@visx/grid": "^1.0.0",
     "@visx/legend": "^1.0.0",
     "@visx/responsive": "^1.0.0",
     "@visx/scale": "^1.0.0",
+    "@visx/tooltip": "^1.0.0",
+    "@visx/gradient": "^1.0.0",
+    "@visx/group": "^1.0.0",
+    "@visx/hierarchy": "^1.0.0",
+    "@visx/glyph": "^1.0.0",
     "@visx/shape": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",

package.json

@@ -31,10 +31,30 @@ interface PerfViewProps {
 }
 
 const PerfView = (props: PerfViewProps) => {
+
+  // ------------- CIRCLES ----------------------
   const { viewIndex, width, height, setNoRenderData } = props;
   let { snapshots } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
+
+  console.log(snapshots)
+
+  // const performances = []  
+  // snapshot = {
+  //   component1: 10,
+  //   component2: 24,
+  //   component3: 35,
+  //   others: 32
+  // }
+
+  const performances = snapshots.reduce((acc,cur)=>{
+    const snapshot = {};
+    while (snapshot.keys.lenght 
+  }, []
+  // iterate snapshots array
+    // if i.children exists
+      // 
 
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
@@ -85,7 +105,7 @@ const PerfView = (props: PerfViewProps) => {
   }, [indexToDisplay, svgRef]);
 
   useEffect(() => {
-    // Error, no App-level component present
+    // Error, no App-level component presentnpm r
     if (snapshots[indexToDisplay].children.length < 1) return;
 
     // Generate tree with our data
@@ -228,6 +248,9 @@ const PerfView = (props: PerfViewProps) => {
     handleNoRenderData,
   ]);
 
+  // ------------- CIRCLES ----------------------
+  
+
   return (
     <div className="perf-d3-container">
       <svg className="perf-d3-svg" ref={svgRef} />