Skip to content

Commit 881dbe8

Browse files
mcnuttandrewmcnuttandrew
authored
Update problematic showcase examples to use hooks (#1345)
* Update problematic showcase examples to use hooks * respond to requested changes
1 parent c74aadc commit 881dbe8

File tree

6 files changed

+323
-399
lines changed

6 files changed

+323
-399
lines changed

‎packages/showcase/examples/force-directed-graph/force-directed-example.js‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,36 +18,30 @@
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1919
// THE SOFTWARE.
2020

21-
import React from 'react';
21+
import React, {useState} from 'react';
2222
import LesMisData from './les-mis-data.json';
2323

2424
import './force-directed.scss';
2525
import ForceDirectedGraph from './force-directed-graph';
2626

27-
export default class ForceDirectedExample extends React.Component {
28-
state = {
29-
strength: Math.random() * 60 - 30
30-
};
31-
32-
render() {
33-
const {strength} = this.state;
34-
return (
35-
<div className="force-directed-example">
36-
<button
37-
className="showcase-button"
38-
onClick={() => this.setState({strength: Math.random() * 60 - 30})}
39-
>
40-
{' '}
41-
REWEIGHT{' '}
42-
</button>
43-
<ForceDirectedGraph
44-
data={LesMisData}
45-
height={500}
46-
width={500}
47-
animation
48-
strength={strength}
49-
/>
50-
</div>
51-
);
52-
}
27+
const makeStrength = () => Math.random() * 60 - 30;
28+
export default function ForceDirectedExample() {
29+
const [strength, setStrength] = useState(makeStrength);
30+
return (
31+
<div className="force-directed-example">
32+
<button
33+
className="showcase-button"
34+
onClick={() => setStrength(makeStrength())}
35+
>
36+
REWEIGHT
37+
</button>
38+
<ForceDirectedGraph
39+
data={LesMisData}
40+
height={500}
41+
width={500}
42+
animation
43+
strength={strength}
44+
/>
45+
</div>
46+
);
5347
}

‎packages/showcase/examples/force-directed-graph/force-directed-graph.js‎

Lines changed: 48 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
1919
// THE SOFTWARE.
2020

21-
import React from 'react';
22-
import PropTypes from 'prop-types';
21+
import React, {useState, useEffect} from 'react';
2322
import {forceSimulation, forceLink, forceManyBody, forceCenter} from 'd3-force';
2423

2524
import {XYPlot, MarkSeriesCanvas, LineSeriesCanvas} from 'react-vis';
@@ -44,7 +43,6 @@ const colors = [
4443
/**
4544
* Create the list of nodes to render.
4645
* @returns {Array} Array of nodes.
47-
* @private
4846
*/
4947
function generateSimulation(props) {
5048
const {data, height, width, maxSteps, strength} = props;
@@ -54,7 +52,7 @@ function generateSimulation(props) {
5452
// copy the data
5553
const nodes = data.nodes.map(d => ({...d}));
5654
const links = data.links.map(d => ({...d}));
57-
// build the simuatation
55+
// build the simulation
5856
const simulation = forceSimulation(nodes)
5957
.force(
6058
'link',
@@ -76,71 +74,51 @@ function generateSimulation(props) {
7674
return {nodes, links};
7775
}
7876

79-
class ForceDirectedGraph extends React.Component {
80-
static get defaultProps() {
81-
return {
82-
className: '',
83-
data: {nodes: [], links: []},
84-
maxSteps: 50
85-
};
86-
}
87-
88-
static get propTypes() {
89-
return {
90-
className: PropTypes.string,
91-
data: PropTypes.object.isRequired,
92-
height: PropTypes.number.isRequired,
93-
width: PropTypes.number.isRequired,
94-
steps: PropTypes.number
95-
};
96-
}
77+
export default function ForceDirectedGraph(props) {
78+
const {
79+
className = '',
80+
height,
81+
width,
82+
animation,
83+
data = {
84+
nodes: [],
85+
links: []
86+
},
87+
maxSteps = 50,
88+
strength
89+
} = props;
90+
const [{nodes, links}, setData] = useState({
91+
nodes: [],
92+
links: []
93+
});
94+
useEffect(() => {
95+
setData(generateSimulation({data, height, width, maxSteps, strength}));
96+
}, [data, height, width, maxSteps, strength]);
9797

98-
constructor(props) {
99-
super(props);
100-
this.state = {
101-
data: generateSimulation(props)
102-
};
103-
}
104-
105-
UNSAFE_componentWillReceiveProps(nextProps) {
106-
this.setState({
107-
data: generateSimulation(nextProps)
108-
});
109-
}
110-
111-
render() {
112-
const {className, height, width, animation} = this.props;
113-
const {data} = this.state;
114-
const {nodes, links} = data;
115-
return (
116-
<XYPlot width={width} height={height} className={className}>
117-
{links.map(({source, target}, index) => {
118-
return (
119-
<LineSeriesCanvas
120-
animation={animation}
121-
color={'#B3AD9E'}
122-
key={`link-${index}`}
123-
opacity={0.3}
124-
data={[
125-
{...source, color: null},
126-
{...target, color: null}
127-
]}
128-
/>
129-
);
130-
})}
131-
<MarkSeriesCanvas
132-
data={nodes}
133-
animation={animation}
134-
colorType={'category'}
135-
stroke={'#ddd'}
136-
strokeWidth={2}
137-
colorRange={colors}
138-
/>
139-
</XYPlot>
140-
);
141-
}
98+
return (
99+
<XYPlot width={width} height={height} className={className}>
100+
{links.map(({source, target}, index) => {
101+
return (
102+
<LineSeriesCanvas
103+
animation={animation}
104+
color={'#B3AD9E'}
105+
key={`link-${index}`}
106+
opacity={0.3}
107+
data={[
108+
{...source, color: null},
109+
{...target, color: null}
110+
]}
111+
/>
112+
);
113+
})}
114+
<MarkSeriesCanvas
115+
data={nodes}
116+
animation={animation}
117+
colorType={'category'}
118+
stroke={'#ddd'}
119+
strokeWidth={2}
120+
colorRange={colors}
121+
/>
122+
</XYPlot>
123+
);
142124
}
143-
144-
ForceDirectedGraph.displayName = 'ForceDirectedGraph';
145-
146-
export default ForceDirectedGraph;

‎packages/showcase/examples/responsive-vis/responsive-bar-chart.js‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -48,59 +48,56 @@ function updateDataForArea(data, ppp) {
4848
return sample;
4949
}
5050

51-
export default class ResponsiveBarChart extends React.Component {
52-
// todo build a root responsive class that has this as a class method
53-
getFeatures() {
54-
const {data, height, margin, width} = this.props;
55-
const innerWidth = width - margin.left - margin.right;
56-
const innerHeight = height - margin.top - margin.bottom;
57-
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
58-
return filterFeatures(BARCHART_FEATURES, ppp);
59-
}
51+
export function getFeatures(props) {
52+
const {data, height, margin, width} = props;
53+
const innerWidth = width - margin.left - margin.right;
54+
const innerHeight = height - margin.top - margin.bottom;
55+
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
56+
return filterFeatures(BARCHART_FEATURES, ppp);
57+
}
6058

61-
render() {
62-
const {data, height, margin, width} = this.props;
59+
export default function ResponsiveBarChart(props) {
60+
const {data, height, margin, width} = props;
6361

64-
const innerWidth = width - margin.left - margin.right;
65-
const innerHeight = height - margin.top - margin.bottom;
66-
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
67-
const featuresToRender = filterFeatures(BARCHART_FEATURES, ppp);
68-
const updatedData = featuresToRender.area
69-
? updateDataForArea(data, ppp)
70-
: data;
62+
const innerWidth = width - margin.left - margin.right;
63+
const innerHeight = height - margin.top - margin.bottom;
64+
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
65+
const featuresToRender = filterFeatures(BARCHART_FEATURES, ppp);
66+
const updatedData = featuresToRender.area
67+
? updateDataForArea(data, ppp)
68+
: data;
7169

72-
return (
73-
<div className="responsive-bar-chart">
74-
<XYPlot
75-
yType="ordinal"
76-
xType="linear"
77-
margin={margin}
78-
height={height}
79-
width={width}
80-
>
81-
{featuresToRender.xaxis && <XAxis orientation="top" />}
82-
{featuresToRender.yaxis && <YAxis />}
83-
{featuresToRender.bars && (
84-
<HorizontalBarSeries
85-
colorType="literal"
86-
yRange={[0, innerHeight]}
87-
xRange={[0, innerWidth]}
88-
data={updatedData}
89-
/>
90-
)}
91-
{featuresToRender.area && (
92-
<AreaSeries
93-
colorType="literal"
94-
color="#12939A"
95-
yType="linear"
96-
yDomain={[0, updatedData.length]}
97-
yRange={[0, innerHeight]}
98-
xRange={[innerWidth, 0]}
99-
data={updatedData}
100-
/>
101-
)}
102-
</XYPlot>
103-
</div>
104-
);
105-
}
70+
return (
71+
<div className="responsive-bar-chart">
72+
<XYPlot
73+
yType="ordinal"
74+
xType="linear"
75+
margin={margin}
76+
height={height}
77+
width={width}
78+
>
79+
{featuresToRender.xaxis && <XAxis orientation="top" />}
80+
{featuresToRender.yaxis && <YAxis />}
81+
{featuresToRender.bars && (
82+
<HorizontalBarSeries
83+
colorType="literal"
84+
yRange={[0, innerHeight]}
85+
xRange={[0, innerWidth]}
86+
data={updatedData}
87+
/>
88+
)}
89+
{featuresToRender.area && (
90+
<AreaSeries
91+
colorType="literal"
92+
color="#12939A"
93+
yType="linear"
94+
yDomain={[0, updatedData.length]}
95+
yRange={[0, innerHeight]}
96+
xRange={[innerWidth, 0]}
97+
data={updatedData}
98+
/>
99+
)}
100+
</XYPlot>
101+
</div>
102+
);
106103
}

0 commit comments

Comments
 (0)