Merge pull request #47 from oslabs-beta/staging

crperezt · web-flow · commit b1196930da3b · 2020-07-08T10:53:39.000-07:00
Staging
diff --git a/src/app/components/Chart.jsx b/src/app/components/Chart.jsx
@@ -14,7 +14,7 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
 
-const colors = ['#2C4870','#519331','#AA5039','#8B2F5F','#C5B738','#858DFF', '#FF8D02','#FFCD51','#ACDAE6','#FC997E','#CF93AD','#AA3939','#AA6C39','#226666',]
+const colors = ['#2C4870', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02', '#FFCD51', '#ACDAE6', '#FC997E', '#CF93AD', '#AA3939', '#AA6C39', '#226666'];
 
 let root = {};
 class Chart extends Component {
@@ -34,7 +34,7 @@ class Chart extends Component {
   componentDidUpdate() {
     const { hierarchy } = this.props;
     root = JSON.parse(JSON.stringify(hierarchy));
-    console.log("Chart -> componentDidUpdate -> hierarchy", hierarchy);
+    console.log('Chart -> componentDidUpdate -> hierarchy', hierarchy);
     this.maked3Tree();
   }
 
@@ -46,16 +46,15 @@ class Chart extends Component {
   }
 
   maked3Tree() {
-
     this.removed3Tree();
-    const margin = {
-      top: 0,
-      right: 60,
-      bottom: 200,
-      left: 120,
-    };
-    const width = 600 - margin.right - margin.left;
-    const height = 700 - margin.top - margin.bottom;
+    // const margin = {
+    //   top: 0,
+    //   right: 60,
+    //   bottom: 200,
+    //   left: 120,
+    // };
+    const width = 600; // - margin.right - margin.left;
+    const height = 600; // 700 - margin.top - margin.bottom;
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -76,9 +75,9 @@ class Chart extends Component {
     const tree = d3.tree()
       // this assigns width of tree to be 2pi
       // .size([2 * Math.PI, radius / 1.3])
-      .nodeSize([width/10, height/10])
+      .nodeSize([width / 10, height / 10])
       // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
-      .separation(function (a, b) { return (a.parent == b.parent ? 2 : 2)});
+      .separation(function (a, b) { return (a.parent == b.parent ? 2 : 2); });
 
     const d3root = tree(hierarchy);
 
@@ -92,9 +91,7 @@ class Chart extends Component {
       .append('path')
       .attr('class', 'link')
       .attr('d', d3.linkRadial()
-        .angle(d => {
-          return d.x
-        })
+        .angle(d => d.x)
         .radius(d => d.y));
 
     const node = g.selectAll('.node')
@@ -103,15 +100,14 @@ class Chart extends Component {
       .enter()
       .append('g')
       .style('fill', function (d) {
-        if(d.data.branch < colors.length){
-          return colors[d.data.branch]
-        } else {
-          let indexColors = d.data.branch - colors.length;
-          while(indexColors > colors.length){
-            indexColors = indexColors - colors.length;
-          }
-          return colors[indexColors]
+        if (d.data.branch < colors.length) {
+          return colors[d.data.branch];
+        }
+        let indexColors = d.data.branch - colors.length;
+        while (indexColors > colors.length) {
+          indexColors -= colors.length;
         }
+        return colors[indexColors];
       })
       .attr('class', 'node--internal')
       // })
@@ -176,7 +172,7 @@ class Chart extends Component {
 
     chartContainer.call(d3.zoom()
       .extent([[0, 0], [width, height]])
-      .scaleExtent([0, 8]) //scaleExtent([minimum scale factor, maximum scale factor])
+      .scaleExtent([0, 8]) // scaleExtent([minimum scale factor, maximum scale factor])
       .on('zoom', zoomed));
 
     function dragstarted() {
@@ -207,7 +203,11 @@ class Chart extends Component {
   }
 
   render() {
-    return <div ref={this.chartRef} className="d3Container" />;
+    return (
+      <div className="history-d3-container">
+        <div ref={this.chartRef} className="history-d3-div" />
+      </div>
+    );
   }
 }
 
diff --git a/src/app/components/ErrorHandler.jsx b/src/app/components/ErrorHandler.jsx
@@ -12,7 +12,7 @@ class ErrorHandler extends React.Component {
   }
 
   render() {
-    return this.state.errorOccurred ? <h1>An error occurred</h1> : this.props.children
+    return this.state.errorOccurred ? <div margin="8px">Unexpected Error</div> : this.props.children
   }
 }
 
diff --git a/src/app/components/PerfView.jsx b/src/app/components/PerfView.jsx
@@ -42,9 +42,10 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
   const packFunc = useCallback(data => {
     return d3.pack()
     .size([width, height])
+    // .radius(d => { return d.r; })
     .padding(3)(d3.hierarchy(data)
-      .sum(d => { return d.componentData.actualDuration || 0; })
-      .sort((a, b) => { return b.value - a.value; }));
+                    .sum(d => { return d.componentData.actualDuration || 0; })
+                    .sort((a, b) => { return b.value - a.value; }));
   }, [width, height]);
 
   // If indexToDisplay changes, clear old tree nodes
@@ -56,13 +57,14 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
   }, [indexToDisplay, svgRef]);
 
   useEffect(() => {
-    // console.log(`***** useEffect - MAIN -> snapshots[${indexToDisplay}]`, snapshots[indexToDisplay]);
-    
+    console.log(`***** useEffect - MAIN -> snapshots[${indexToDisplay}]`, snapshots[indexToDisplay]);
+
     // Error, no App-level component present
     if (snapshots[indexToDisplay].children.length < 1) return;
 
     // Generate tree with our data
     const packedRoot = packFunc(snapshots[indexToDisplay]);
+    console.log('PerfView -> packedRoot', packedRoot);
 
     // Set initial focus to root node
     let curFocus = packedRoot;
@@ -82,13 +84,12 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
       .enter().append('circle')
         .attr('fill', d => (d.children ? colorScale(d.depth) : 'white'))
         .attr('pointer-events', d => (!d.children ? 'none' : null))
-        .on('mouseover', () => d3.select(this).attr('stroke', '#000'))
-        .on('mouseout', () => d3.select(this).attr('stroke', null))
+        .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
+        .on('mouseout', function () { d3.select(this).attr('stroke', null); })
         .on('click', d => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
 
     // Generate text labels. Set (only) root to visible initially
     const label = svg.append('g')
-        // .style('fill', 'rgb(231, 231, 231)')
         .attr('class', 'perf-chart-labels')
       .selectAll('text')
       .data(packedRoot.descendants())
@@ -107,8 +108,10 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
 
     // Zoom/relocated nodes and labels based on dimensions given [x, y, r]
     function zoomViewArea(newXYR) {
-      console.log("zoomTo -> newXYR", newXYR);
-      const k = width / newXYR[2];
+      // console.log('zoomTo -> newXYR', newXYR);
+      // if (!newXYR.every(val => Number.isNaN(val))) { console.log('NaN'); return; }
+
+      const k = (width / newXYR[2]);
       view = newXYR;
       label.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
       node.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
@@ -137,11 +140,16 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
     }
   }, [colorScale, packFunc, width, height, indexToDisplay, snapshots]);
 
-  return <svg className="perfContainer" ref={svgRef} />;
+  return (
+    <div className="perf-d3-container">
+      <svg className="perf-d3-svg" ref={svgRef} />
+      {/* <span>TEST</span> */}
+    </div>
+    );
 };
 
 export default PerfView;
 
 
     // d3.quantize(d3.interpolateHcl('#60c96e', '#4d4193'), 10);
-        // const colorScale = d3.scaleOrdinal(colorScheme);
+        // const colorScale = d3.scaleOrdinal(colorScheme);
diff --git a/src/app/styles/components/d3graph.css b/src/app/styles/components/d3graph.css
@@ -93,22 +93,31 @@ div.tooltip {
   left: 0;
 }
 
-.perfContainer {
-  display: block;
-  /* margin: 0 -14px;
-  background-color: hsl(152,80%,80%); */
+.history-d3-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 70px);
   /* border: 2px solid red; */
 }
 
-.d3divContainer {
-  /* display: flex;
+.perf-d3-container {
+  display: flex;
   flex-direction: column;
-  justify-content: space-between; */
+  justify-content: space-between;
+  height: calc(100% - 70px);
+  /* border: 2px solid red; */
+}
+
+.perf-d3-svg {
+  display: block;
 }
 
 .perf-chart-labels {
-  font: 15px sans-serif;
-  color: white;
+  font: 12px sans-serif;
+  /* color: white; */
+  /* fill: rgb(231, 231, 231); */
+  fill: #2a2f3a;
   pointer-events: none;
   text-anchor: middle;
 };

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ class ErrorHandler extends React.Component {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`render() {`
`15`		`- return this.state.errorOccurred ? <h1>An error occurred</h1> : this.props.children`
	`15`	`+ return this.state.errorOccurred ? <div margin="8px">Unexpected Error</div> : this.props.children`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`