alternate snapshot data to fit new snapshot graph, fixed scaling of the graph.

Co-authored-by: OzairGh <https://github.com/OzairGh>
Co-authored-by: Khanh <https://github.com/AndyB909>

Author: d28601581

src/app/components/BarGraph.tsx

@@ -62,6 +62,7 @@ const tooltipStyles = {
 const BarGraph = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
+    maxHeight,
     width,
     height,
     data,
@@ -138,12 +139,20 @@ const BarGraph = props => {
   });
 
   // setting max dimensions and scale ranges
+
+  // if (snapshot !== 'All Snapshots') {
+  //   // let oldHeight = height
+  //   height = maxHeight * 50 * 2 + margin.top + 150;
+  // }
+
   const xMax = width - margin.left - margin.right;
-  const yMax = height - margin.top - 150;
   snapshotIdScale.rangeRound([0, xMax]);
+  const yMax = height - margin.top - 150;
   renderingScale.range([yMax, 0]);
 
-  // componentScale.rangeRound([0, xMax]);
+  console.log(height, '<--height');
+  console.log(yMax, '<--yMax');
+  console.log(maxHeight, '<--maxHeight');
 
   const toStorage = {
     currentTab,
@@ -156,7 +165,7 @@ const BarGraph = props => {
     for (let i = 0; i < saveButtons.length; i++) {
       if (tabs[currentTab].seriesSavedStatus === 'saved') {
         saveButtons[i].classList.add('animate');
-        console.log('checking saveButtons[i].classList', saveButtons[i].classList)
+        console.log('checking saveButtons[i].classList', saveButtons[i].classList);
         saveButtons[i].innerHTML = 'Saved!';
       } else {
         saveButtons[i].innerHTML = 'Save Series';
@@ -298,7 +307,15 @@ const BarGraph = props => {
                   onMouseMove={event => {
                     dispatch(onHover(data.componentData[bar.key].rtid));
                     if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                    const top = event.clientY - margin.top - bar.height;
+                    const top;
+                    if (snapshot === 'All Snapshots') {
+                      top = event.clientY - margin.top - bar.height;
+                    } else {
+                      top = event.clientY - margin.top;
+                    }
+                    console.log(event.clientY, '<-- event.clientY');
+                    console.log(bar.height, '<-- bar.height');
+                    console.log(top, '<-- top');
                     const left = bar.x + bar.width / 2;
                     showTooltip({
                       tooltipData: bar,
@@ -341,7 +358,7 @@ const BarGraph = props => {
           })}
         />
         <Text
-          x={-xMax / 2}
+          x={-yMax / 2 - 75}
           y="15"
           transform="rotate(-90)"
           fontSize={12}
@@ -350,9 +367,17 @@ const BarGraph = props => {
           Rendering Time (ms)
         </Text>
         <br />
-        <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
-          Snapshot ID
-        </Text>
+        {(snapshot === 'All Snapshots')
+          ? (
+            <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
+              Snapshot ID
+            </Text>
+          )
+          : (
+            <Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
+              Components
+            </Text>
+          )}
 
       </svg>
       {/* FOR HOVER OVER DISPLAY */}

src/app/components/PerformanceVisx.tsx

@@ -237,16 +237,20 @@ const PerformanceVisx = (props: BarStackProps) => {
 
   const allRoutes = [];
   const filteredSnapshots = [];
-
+  // loop through data.barStack
   for (let i = 0; i < data.barStack.length; i += 1) {
+    // set url variable to new route url
     const url = new URL(data.barStack[i].route);
+    // if all the routes do not have the pathname property on url then push it onto all routes array
     if (!allRoutes.includes(url.pathname)) {
       allRoutes.push(url.pathname);
     }
+    // if the route exists and it is equal to url.pathname then push data.barstack at i into filteredSnapshots array
     if (route && route === url.pathname) {
       filteredSnapshots.push(data.barStack[i]);
     }
   }
+  // if route does not equal to All Routes, set data.barstack to filteredSnapshots array
   if (route !== 'All Routes') {
     data.barStack = filteredSnapshots;
   }
@@ -256,6 +260,7 @@ const PerformanceVisx = (props: BarStackProps) => {
   // data.barStack[] // 0: 1.0 snapshot 1: 2.0 snapshot 2: 3.0 snapshot
   // data.barStack[{123123},{123123},12312,12312]
   // && data.barStack[parseInt(snapshot, 10) - 1]
+  
   if (snapshot !== 'All Snapshots') {
     // console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot');
     // const checkData = [];
@@ -274,9 +279,23 @@ const PerformanceVisx = (props: BarStackProps) => {
     //   if (comp.snapshotId === snapshot) return comp;
     // });
     const checkData = [data.barStack.find(comp => comp.snapshotId === snapshot)];
-    // checkData = checkData.filter(element => { return element !== undefined; })
-    // console.log(checkData, '<-- checkData');
-    if (checkData) data.barStack = checkData;
+    const holdData = [];
+    // maxheight is referring to the max height in render time to choose the scaling size for graph
+    let maxHeight = 0;
+    for (const key in checkData[0]) {
+      if (key !== 'route' && key !== 'snapshotId') {
+        if (maxHeight < checkData[0][key]) maxHeight = checkData[0][key];
+        const name = {};
+        name[key] = checkData[0][key];
+        holdData.push(name);
+        holdData[holdData.length - 1].route = checkData[0].route;
+        holdData[holdData.length - 1].snapshotId = key;
+      }
+    }
+    data.maxTotalRender = maxHeight * 1.15;
+    console.log(checkData, '<-- CheckData');
+    console.log(holdData, '<--holdData');
+    if (holdData) data.barStack = holdData;
   }
   // data.barStack = [
   //   {snapshot: 1.0,
@@ -297,6 +316,7 @@ const PerformanceVisx = (props: BarStackProps) => {
       return (
         <div>
           <BarGraph
+            maxHeight={maxHeight}
             data={data}
             width={width}
             height={height}

src/extension/build/panel.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Reactime 14.0</title>
+    <title>Reactime 15.0</title>
   </head>
 
   <body>