Skip to content

Commit b119693

Browse files
crpereztcrperezt
authored
Merge pull request #47 from oslabs-beta/staging
Staging
2 parents c3ee9de + abe8175 commit b119693

File tree

4 files changed

+64
-47
lines changed

4 files changed

+64
-47
lines changed

‎src/app/components/Chart.jsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import React, { Component } from 'react';
1515
import * as d3 from 'd3';
1616

17-
const colors = ['#2C4870','#519331','#AA5039','#8B2F5F','#C5B738','#858DFF', '#FF8D02','#FFCD51','#ACDAE6','#FC997E','#CF93AD','#AA3939','#AA6C39','#226666',]
17+
const colors = ['#2C4870', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02', '#FFCD51', '#ACDAE6', '#FC997E', '#CF93AD', '#AA3939', '#AA6C39', '#226666'];
1818

1919
let root = {};
2020
class Chart extends Component {
@@ -34,7 +34,7 @@ class Chart extends Component {
3434
componentDidUpdate() {
3535
const { hierarchy } = this.props;
3636
root = JSON.parse(JSON.stringify(hierarchy));
37-
console.log("Chart -> componentDidUpdate -> hierarchy", hierarchy);
37+
console.log('Chart -> componentDidUpdate -> hierarchy', hierarchy);
3838
this.maked3Tree();
3939
}
4040

@@ -46,16 +46,15 @@ class Chart extends Component {
4646
}
4747

4848
maked3Tree() {
49-
5049
this.removed3Tree();
51-
const margin = {
52-
top: 0,
53-
right: 60,
54-
bottom: 200,
55-
left: 120,
56-
};
57-
const width = 600 - margin.right - margin.left;
58-
const height = 700 - margin.top - margin.bottom;
50+
// const margin = {
51+
// top: 0,
52+
// right: 60,
53+
// bottom: 200,
54+
// left: 120,
55+
// };
56+
const width = 600; // - margin.right - margin.left;
57+
const height = 600; // 700 - margin.top - margin.bottom;
5958
const chartContainer = d3.select(this.chartRef.current)
6059
.append('svg') // chartContainer is now pointing to svg
6160
.attr('width', width)
@@ -76,9 +75,9 @@ class Chart extends Component {
7675
const tree = d3.tree()
7776
// this assigns width of tree to be 2pi
7877
// .size([2 * Math.PI, radius / 1.3])
79-
.nodeSize([width/10, height/10])
78+
.nodeSize([width / 10, height / 10])
8079
// .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
81-
.separation(function (a, b) { return (a.parent == b.parent ? 2 : 2)});
80+
.separation(function (a, b) { return (a.parent == b.parent ? 2 : 2); });
8281

8382
const d3root = tree(hierarchy);
8483

@@ -92,9 +91,7 @@ class Chart extends Component {
9291
.append('path')
9392
.attr('class', 'link')
9493
.attr('d', d3.linkRadial()
95-
.angle(d => {
96-
return d.x
97-
})
94+
.angle(d => d.x)
9895
.radius(d => d.y));
9996

10097
const node = g.selectAll('.node')
@@ -103,15 +100,14 @@ class Chart extends Component {
103100
.enter()
104101
.append('g')
105102
.style('fill', function (d) {
106-
if(d.data.branch < colors.length){
107-
return colors[d.data.branch]
108-
} else {
109-
let indexColors = d.data.branch - colors.length;
110-
while(indexColors > colors.length){
111-
indexColors = indexColors - colors.length;
112-
}
113-
return colors[indexColors]
103+
if (d.data.branch < colors.length) {
104+
return colors[d.data.branch];
105+
}
106+
let indexColors = d.data.branch - colors.length;
107+
while (indexColors > colors.length) {
108+
indexColors -= colors.length;
114109
}
110+
return colors[indexColors];
115111
})
116112
.attr('class', 'node--internal')
117113
// })
@@ -176,7 +172,7 @@ class Chart extends Component {
176172

177173
chartContainer.call(d3.zoom()
178174
.extent([[0, 0], [width, height]])
179-
.scaleExtent([0, 8]) //scaleExtent([minimum scale factor, maximum scale factor])
175+
.scaleExtent([0, 8]) // scaleExtent([minimum scale factor, maximum scale factor])
180176
.on('zoom', zoomed));
181177

182178
function dragstarted() {
@@ -207,7 +203,11 @@ class Chart extends Component {
207203
}
208204

209205
render() {
210-
return <div ref={this.chartRef} className="d3Container" />;
206+
return (
207+
<div className="history-d3-container">
208+
<div ref={this.chartRef} className="history-d3-div" />
209+
</div>
210+
);
211211
}
212212
}
213213

‎src/app/components/ErrorHandler.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class ErrorHandler extends React.Component {
1212
}
1313

1414
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
1616
}
1717
}
1818

‎src/app/components/PerfView.jsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,10 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
4242
const packFunc = useCallback(data => {
4343
return d3.pack()
4444
.size([width, height])
45+
// .radius(d => { return d.r; })
4546
.padding(3)(d3.hierarchy(data)
46-
.sum(d => { return d.componentData.actualDuration || 0; })
47-
.sort((a, b) => { return b.value - a.value; }));
47+
.sum(d => { return d.componentData.actualDuration || 0; })
48+
.sort((a, b) => { return b.value - a.value; }));
4849
}, [width, height]);
4950

5051
// If indexToDisplay changes, clear old tree nodes
@@ -56,13 +57,14 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
5657
}, [indexToDisplay, svgRef]);
5758

5859
useEffect(() => {
59-
// console.log(`***** useEffect - MAIN -> snapshots[${indexToDisplay}]`, snapshots[indexToDisplay]);
60-
60+
console.log(`***** useEffect - MAIN -> snapshots[${indexToDisplay}]`, snapshots[indexToDisplay]);
61+
6162
// Error, no App-level component present
6263
if (snapshots[indexToDisplay].children.length < 1) return;
6364

6465
// Generate tree with our data
6566
const packedRoot = packFunc(snapshots[indexToDisplay]);
67+
console.log('PerfView -> packedRoot', packedRoot);
6668

6769
// Set initial focus to root node
6870
let curFocus = packedRoot;
@@ -82,13 +84,12 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
8284
.enter().append('circle')
8385
.attr('fill', d => (d.children ? colorScale(d.depth) : 'white'))
8486
.attr('pointer-events', d => (!d.children ? 'none' : null))
85-
.on('mouseover', () => d3.select(this).attr('stroke', '#000'))
86-
.on('mouseout', () => d3.select(this).attr('stroke', null))
87+
.on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
88+
.on('mouseout', function () { d3.select(this).attr('stroke', null); })
8789
.on('click', d => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
8890

8991
// Generate text labels. Set (only) root to visible initially
9092
const label = svg.append('g')
91-
// .style('fill', 'rgb(231, 231, 231)')
9293
.attr('class', 'perf-chart-labels')
9394
.selectAll('text')
9495
.data(packedRoot.descendants())
@@ -107,8 +108,10 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
107108

108109
// Zoom/relocated nodes and labels based on dimensions given [x, y, r]
109110
function zoomViewArea(newXYR) {
110-
console.log("zoomTo -> newXYR", newXYR);
111-
const k = width / newXYR[2];
111+
// console.log('zoomTo -> newXYR', newXYR);
112+
// if (!newXYR.every(val => Number.isNaN(val))) { console.log('NaN'); return; }
113+
114+
const k = (width / newXYR[2]);
112115
view = newXYR;
113116
label.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
114117
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 }) => {
137140
}
138141
}, [colorScale, packFunc, width, height, indexToDisplay, snapshots]);
139142

140-
return <svg className="perfContainer" ref={svgRef} />;
143+
return (
144+
<div className="perf-d3-container">
145+
<svg className="perf-d3-svg" ref={svgRef} />
146+
{/* <span>TEST</span> */}
147+
</div>
148+
);
141149
};
142150

143151
export default PerfView;
144152

145153

146154
// d3.quantize(d3.interpolateHcl('#60c96e', '#4d4193'), 10);
147-
// const colorScale = d3.scaleOrdinal(colorScheme);
155+
// const colorScale = d3.scaleOrdinal(colorScheme);

‎src/app/styles/components/d3graph.css‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -93,22 +93,31 @@ div.tooltip {
9393
left: 0;
9494
}
9595

96-
.perfContainer {
97-
display: block;
98-
/* margin: 0 -14px;
99-
background-color: hsl(152,80%,80%); */
96+
.history-d3-container {
97+
display: flex;
98+
flex-direction: column;
99+
justify-content: space-between;
100+
height: calc(100% - 70px);
100101
/* border: 2px solid red; */
101102
}
102103

103-
.d3divContainer {
104-
/* display: flex;
104+
.perf-d3-container {
105+
display: flex;
105106
flex-direction: column;
106-
justify-content: space-between; */
107+
justify-content: space-between;
108+
height: calc(100% - 70px);
109+
/* border: 2px solid red; */
110+
}
111+
112+
.perf-d3-svg {
113+
display: block;
107114
}
108115

109116
.perf-chart-labels {
110-
font: 15px sans-serif;
111-
color: white;
117+
font: 12px sans-serif;
118+
/* color: white; */
119+
/* fill: rgb(231, 231, 231); */
120+
fill: #2a2f3a;
112121
pointer-events: none;
113122
text-anchor: middle;
114123
};

0 commit comments

Comments
 (0)