working foundation d3 chart w temp data transfer

Author: gpanciera

src/app/components/PerfView.jsx

@@ -13,25 +13,40 @@ import { addNewSnapshots } from '../actions/actions';
 
 // const chartData = {
 //   name: 'App',
-//   actualDuration: 35000,
-//   value: 17010,
 //   children: [
-//    { name: 'DisplayPanel', actualDuration: 35000, value: 17010 },
-//    { name: 'AltDisplay', actualDuration: 35000, value: 5842 },
-//    { name: 'MarketSContainer', actualDuration: 35000, value: 1041 },
-//    { name: 'MainSlider', actualDuration: 35000, value: 5176 },
+//    { name: 'DisplayPanel', componentData: { actualDuration: 5000 } },
+//    { name: 'AltDisplay', componentData: { actualDuration: 2000 } },
+//    { name: 'MarketSContainer', componentData: { actualDuration: 4000 } },
+//    { name: 'MainSlider', componentData: { actualDuration: 3000 } },
 //   ],
 //  };
 
+const moveCompData = node => {
+  if (node === null) return node;
+
+  if (node.componentData.actualDuration) {
+    node.val = node.componentData.actualDuration;
+  }
+  else {
+    node.val = 1;
+  }
+  if(node.children.length > 0) {
+    node.children.forEach(elem => copyToProp(elem));
+  }
+  else {
+    return;
+  }
+};
+
 const PerfView = ({
   width = 200,
   height = 200,
   snapshots
 }) => {
-  // const chartData = snapshots;
-  console.log("snapshots", snapshots);
+  console.log('snapshots', snapshots);
   const chartData = snapshots[snapshots.length - 1].children[0];
-  console.log("chartData", chartData);
+  moveCompData(chartData);
+  console.log('chartData', chartData);
 
   const svgRef = useRef(null);
 
@@ -45,8 +60,13 @@ const PerfView = ({
   const packFunc = data => d3.pack()
     .size([width, height])
     .padding(3)(d3.hierarchy(data)
-      .sum(d => d.componentData.actualDuration)
-      .sort((a, b) => b.componentData.actualDuration - a.componentData.actualDuration));
+      .sum(d => {
+        console.log('in pack func. d=', d);
+        return d.val;
+      })
+      .sort((a, b) => b.val - a.val));
+
+  console.log('packFunc', packFunc);
 
   useEffect(() => {
     const packedRoot = packFunc(chartData);
@@ -59,8 +79,8 @@ const PerfView = ({
 
     const node = svg.append('g')
       .selectAll('circle')
-      .data(packedRoot.descendants().slice(1))  
-      // .join('circle')
+      .data(packedRoot.descendants().slice(1))
+
       .enter()
       .append('circle')
       .attr('fill', d => (d.children ? color(d.depth) : 'white'))
@@ -69,20 +89,20 @@ const PerfView = ({
       .on('mouseout', function () { d3.select(this).attr('stroke', null); })
       .on('click', d => focus !== d && (zoom(d), d3.event.stopPropagation()));
 
+    console.log('PerfView -> node', node);
+
     const label = svg.append('g')
       .style('font', '11px sans-serif')
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')
       .selectAll('text')
       .data(packedRoot.descendants())
-      // .join('text')
       .enter()
       .append('text')
       .style('fill-opacity', d => (d.parent === packedRoot ? 1 : 0))
       .style('display', d => (d.parent === packedRoot ? 'inline' : 'none'))
-      .text(d => `${d.data.name}: ${Number.parseFloat(d.data.actualDuration).toFixed(2)}ms`);
+      .text(d => `${d.data.name}: ${Number.parseFloat(d.data.val).toFixed(2)}ms`);
 
-    console.log('PerfView -> node', node);
     zoomTo([packedRoot.x, packedRoot.y, packedRoot.r * 2]);
 
     function zoomTo(v) {