Skip to content

Commit 0581708

Browse files
gpancieragpanciera
committed
working graph functional comp
1 parent 219c9aa commit 0581708

File tree

2 files changed

+105
-99
lines changed

2 files changed

+105
-99
lines changed

‎src/app/components/PerfView.jsx

Lines changed: 95 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
/* eslint-disable class-methods-use-this */
2+
// eslint-disable-next-line object-curly-newline
3+
/* eslint-disable comma-dangle */
14
/* eslint-disable indent */
25
/* eslint-disable react/destructuring-assignment */
36
/* eslint-disable react/prop-types */
47
/* eslint-disable no-console */
58
import React, { useEffect, useRef } from 'react';
69
import * as d3 from 'd3';
710

8-
9-
// let root = {};
1011
const chartData = {
1112
name: 'App',
1213
children: [
@@ -38,8 +39,7 @@ const chartData = {
3839
],
3940
};
4041

41-
42-
const PerfView = ({ width, height }) => {
42+
const PerfView = ({ width=200, height=200 }) => {
4343
const svgRef = useRef(null);
4444
// returns color scale function
4545
const color = d3.scaleLinear()
@@ -50,9 +50,7 @@ const PerfView = ({ width, height }) => {
5050
// returns a function that formats numbers
5151
const numFormat = d3.format(',d');
5252

53-
const margin = {
54-
top: 0, right: 60, bottom: 200, left: 120,
55-
};
53+
const margin = { top: 0, right: 60, bottom: 200, left: 120, };
5654

5755
// create a new circle packing layout function
5856
const packFunc = data => d3.pack()
@@ -140,112 +138,120 @@ const PerfView = ({ width, height }) => {
140138
return <svg ref={svgRef} />;
141139
};
142140

143-
export default PerfView;
144-
145-
146141
// class PerfView extends React.Component {
147142
// constructor(props) {
148143
// super(props);
149-
// this.svgRef = React.createRef();
150-
144+
// this.svgRef = React.createRef(null);
151145
// // returns color scale function
152146
// this.color = d3.scaleLinear()
153147
// .domain([0, 5])
154148
// .range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
155149
// .interpolate(d3.interpolateHcl);
156-
150+
151+
// // returns a function that formats numbers
152+
// this.numFormat = d3.format(',d');
153+
154+
// this.margin = { top: 0, right: 60, bottom: 200, left: 120, };
155+
157156
// // create a new circle packing layout function
158-
// this.pack = data => d3.pack()
157+
// this.packFunc = data => d3.pack()
159158
// .size([this.props.width, this.props.height])
160159
// .padding(3)(d3.hierarchy(data)
161-
// .sum(d => d.value)
162-
// .sort((a, b) => b.value - a.value));
163-
164-
// // this.drawChart = this.drawChart.bind(this);
160+
// .sum(d => d.value)
161+
// .sort((a, b) => b.value - a.value));
162+
163+
// this.drawChart = this.drawChart.bind(this);
165164
// }
166165

167166
// componentDidMount() {
168-
// const { width, height } = this.props;
169-
170-
// const hierarchy = d3.hierarchy(chartData);
171-
// console.log('PerfView -> hierarchy', hierarchy);
172-
// // const dataRoot = pack(chartData);
173-
// const dataRoot = d3.pack(hierarchy);
174-
// console.log('PerfView -> dataRoot', dataRoot);
167+
// this.drawChart();
168+
// }
169+
170+
// componentDidUpdate() {
171+
// this.drawChart();
172+
// }
175173

176-
// const focus = dataRoot;
174+
// drawChart() {
175+
// console.log("PerfView -> drawChart -> chartData", chartData)
176+
// console.log("PerfView -> drawChart -> this.props.width", this.props.width)
177+
// const packedRoot = this.packFunc(chartData);
178+
// // console.log('** PerfView -> packedRoot', packedRoot);
179+
// let focus = packedRoot;
177180
// let view;
181+
// console.log('packedRoot.descendents().slice(1)', packedRoot.descendants().slice(1));
178182

179-
// const svg = d3.select(this.svgRef.current);
180-
// svg
183+
// const svg = d3.select(this.svgRef.current)
181184
// .attr('class', 'd3Container')
182-
// .attr('viewBox', `-${width / 2} -${height / 2} ${width} ${height}`)
185+
// .attr('viewBox', `-${this.props.width / 2} -${this.props.height / 2} ${this.props.width} ${this.props.height}`)
183186
// .style('display', 'block')
184187
// .style('margin', '0 -14px')
185188
// .style('background', this.color(0))
186-
// .style('cursor', 'pointer');
187-
// // .on("click", () => zoom(root));
189+
// .style('cursor', 'pointer')
190+
// .on('click', () => zoom(packedRoot));
191+
192+
193+
// const node = svg.append('g')
194+
// .selectAll('circle')
195+
// .data(packedRoot.descendants().slice(1))
196+
// // .join('circle')
197+
// .enter()
198+
// .append('circle')
199+
// .attr('fill', d => (d.children ? this.color(d.depth) : 'white'))
200+
// .attr('pointer-events', d => (!d.children ? 'none' : null))
201+
// .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
202+
// .on('mouseout', function () { d3.select(this).attr('stroke', null); })
203+
// .on('click', d => focus !== d && (zoom(d), d3.event.stopPropagation()));
204+
205+
// const label = svg.append('g')
206+
// .style('font', '10px sans-serif')
207+
// .attr('pointer-events', 'none')
208+
// .attr('text-anchor', 'middle')
209+
// .selectAll('text')
210+
// .data(packedRoot.descendants())
211+
// // .join('text')
212+
// .enter()
213+
// .append('text')
214+
// .style('fill-opacity', d => (d.parent === packedRoot ? 1 : 0))
215+
// .style('display', d => (d.parent === packedRoot ? 'inline' : 'none'))
216+
// .text(d => d.data.name);
217+
218+
// console.log('PerfView -> node', node);
219+
220+
// zoomTo([packedRoot.x, packedRoot.y, packedRoot.r * 2], this.props.width);
221+
222+
// function zoomTo(v, width) {
223+
// const k = width / v[2];
224+
// view = v;
225+
226+
// label.attr('transform', d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
227+
// node.attr('transform', d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
228+
// node.attr('r', d => d.r * k);
229+
// }
230+
231+
// function zoom(d) {
232+
// const focus0 = focus;
233+
234+
// focus = d;
235+
236+
// const transition = svg.transition()
237+
// .duration(d3.event.altKey ? 7500 : 750)
238+
// .tween('zoom', d => {
239+
// const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
240+
// return t => zoomTo(i(t));
241+
// });
242+
243+
// label
244+
// .filter(function (d) { return d.parent === focus || this.style.display === 'inline'; })
245+
// .transition(transition)
246+
// .style('fill-opacity', d => (d.parent === focus ? 1 : 0))
247+
// .on('start', function (d) { if (d.parent === focus) this.style.display = 'inline'; })
248+
// .on('end', function (d) { if (d.parent !== focus) this.style.display = 'none'; });
249+
// }
188250
// }
189251

190-
// componentDidUpdate() {
191-
// const svg = d3.select(this.ref.current);
192-
// }
193-
194-
// // drawChart() {
195-
// // // const hierarchy = d3.hierarchy(chartData);
196-
// // // const dataRoot = this.pack(hierarchy);
197-
198-
// // d3.create("svg").attr("viewBox", );
199-
200-
// // }
201-
202252
// render() {
203-
// return (
204-
// <svg ref={this.svgRef} />
205-
// );
253+
// return <svg ref={this.svgRef} />;
206254
// }
207255
// }
208256

209-
/* eslint-disable indent */
210-
211-
212-
// const data = {
213-
// type,
214-
// elementType,
215-
// children,
216-
// pendingProps,
217-
// memoizedProps,
218-
// stateNode,
219-
// memoizedState,
220-
// actualDuration,
221-
// actualStartTime,
222-
// selfBaseDuration,
223-
// treeBaseDuration
224-
// }
225-
226-
// const dataMax = d3.max(props.data);
227-
228-
// const yScale = d3.scaleLinear()
229-
// .domain([0, dataMax])
230-
// .range([0, props.size[1]]);
231-
232-
// d3.select(thisRef.current)
233-
// .selectAll('rect')
234-
// .data(props.data)
235-
// .enter()
236-
// .append('rect');
237-
238-
// d3.select(thisRef.current)
239-
// .selectAll('rect')
240-
// .data(props.data)
241-
// .exit()
242-
// .remove();
243-
244-
// d3.select(thisRef.current)
245-
// .selectAll('rect')
246-
// .data(props.data)
247-
// .style('fill', '#fe9922')
248-
// .attr('x', (d, i) => i * 25)
249-
// .attr('y', d => props.size[1] - yScale(d))
250-
// .attr('height', d => yScale(d))
251-
// .attr('width', 25);
257+
export default PerfView;

‎src/app/components/StateRoute.jsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,16 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
1111
// eslint-disable-next-line react/prop-types
1212

1313
const StateRoute = ({ snapshot, hierarchy }) => {
14-
// const windowRef = useRef(null);
15-
// const winWidth = null;
16-
// const winHeight = null;
14+
const windowRef = useRef(null);
15+
const winWidth = null;
16+
const winHeight = null;
1717

18-
// useEffect(() => {
19-
// if (windowRef.current) {
20-
// winWidth = windowRef.current.offsetHeight;
21-
// winHeight = windowRef.current.offsetWidth;
22-
// }
23-
// }, [windowRef]);
18+
useEffect(() => {
19+
if (windowRef.current) {
20+
winWidth = windowRef.current.offsetHeight;
21+
winHeight = windowRef.current.offsetWidth;
22+
}
23+
}, [windowRef]);
2424

2525
// gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart
2626
const renderChart = () => {
@@ -40,7 +40,7 @@ const StateRoute = ({ snapshot, hierarchy }) => {
4040

4141
const renderPerfView = () => {
4242
if (snapshot) {
43-
return <PerfView width={500} height={500} />;
43+
return <PerfView width={600} height={600} />; // ref={windowRef}
4444
}
4545
return <div className="noState">{NO_STATE_MSG}</div>;
4646
};

0 commit comments

Comments
 (0)