Merge pull request #14 from oslabs-beta/staging

Added visx legend component and stylized visx performance chart

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

@@ -34,9 +34,8 @@ const filterHooks = (data: any[]) => {
  * @method maked3Tree :Creates a new D3 Tree
  */
 
-export default function History(props) {
+function History(props) {
   let { hierarchy } = props;
-  console.log('hierarchy is', hierarchy);
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
   let HistoryRef = React.createRef(root); //React.createRef(root);
@@ -251,9 +250,12 @@ export default function History(props) {
       return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
     }
   };
+
   return (
     <>
       <div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
     </>
   );
 }
+
+export default History;

src/app/components/History.tsx

@@ -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} />