Skip to content

Update problematic showcase examples to use hooks #1345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 4, 2020
Merged

Update problematic showcase examples to use hooks #1345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99adc9a
Update problematic showcase examples to use hooks
mcnuttandrew May 31, 2020
3f987d1
respond to requested changes
mcnuttandrew Jun 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 21 additions & 27 deletions packages/showcase/examples/force-directed-graph/force-directed-example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,30 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

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

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

export default class ForceDirectedExample extends React.Component {
state = {
strength: Math.random() * 60 - 30
};

render() {
const {strength} = this.state;
return (
<div className="force-directed-example">
<button
className="showcase-button"
onClick={() => this.setState({strength: Math.random() * 60 - 30})}
>
{' '}
REWEIGHT{' '}
</button>
<ForceDirectedGraph
data={LesMisData}
height={500}
width={500}
animation
strength={strength}
/>
</div>
);
}
const makeStrength = () => Math.random() * 60 - 30;
export default function ForceDirectedExample() {
const [strength, setStrength] = useState(makeStrength);
return (
<div className="force-directed-example">
<button
className="showcase-button"
onClick={() => setStrength(makeStrength())}
>
REWEIGHT
</button>
<ForceDirectedGraph
data={LesMisData}
height={500}
width={500}
animation
strength={strength}
/>
</div>
);
}
118 changes: 48 additions & 70 deletions packages/showcase/examples/force-directed-graph/force-directed-graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

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

import {XYPlot, MarkSeriesCanvas, LineSeriesCanvas} from 'react-vis';
Expand All @@ -44,7 +43,6 @@ const colors = [
/**
* Create the list of nodes to render.
* @returns {Array} Array of nodes.
* @private
*/
function generateSimulation(props) {
const {data, height, width, maxSteps, strength} = props;
Expand All @@ -54,7 +52,7 @@ function generateSimulation(props) {
// copy the data
const nodes = data.nodes.map(d => ({...d}));
const links = data.links.map(d => ({...d}));
// build the simuatation
// build the simulation
const simulation = forceSimulation(nodes)
.force(
'link',
Expand All @@ -76,71 +74,51 @@ function generateSimulation(props) {
return {nodes, links};
}

class ForceDirectedGraph extends React.Component {
static get defaultProps() {
return {
className: '',
data: {nodes: [], links: []},
maxSteps: 50
};
}

static get propTypes() {
return {
className: PropTypes.string,
data: PropTypes.object.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
steps: PropTypes.number
};
}
export default function ForceDirectedGraph(props) {
const {
className = '',
height,
width,
animation,
data = {
nodes: [],
links: []
},
maxSteps = 50,
strength
} = props;
const [{nodes, links}, setData] = useState({
nodes: [],
links: []
});
useEffect(() => {
setData(generateSimulation({data, height, width, maxSteps, strength}));
}, [data, height, width, maxSteps, strength]);

constructor(props) {
super(props);
this.state = {
data: generateSimulation(props)
};
}

UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
data: generateSimulation(nextProps)
});
}

render() {
const {className, height, width, animation} = this.props;
const {data} = this.state;
const {nodes, links} = data;
return (
<XYPlot width={width} height={height} className={className}>
{links.map(({source, target}, index) => {
return (
<LineSeriesCanvas
animation={animation}
color={'#B3AD9E'}
key={`link-${index}`}
opacity={0.3}
data={[
{...source, color: null},
{...target, color: null}
]}
/>
);
})}
<MarkSeriesCanvas
data={nodes}
animation={animation}
colorType={'category'}
stroke={'#ddd'}
strokeWidth={2}
colorRange={colors}
/>
</XYPlot>
);
}
return (
<XYPlot width={width} height={height} className={className}>
{links.map(({source, target}, index) => {
return (
<LineSeriesCanvas
animation={animation}
color={'#B3AD9E'}
key={`link-${index}`}
opacity={0.3}
data={[
{...source, color: null},
{...target, color: null}
]}
/>
);
})}
<MarkSeriesCanvas
data={nodes}
animation={animation}
colorType={'category'}
stroke={'#ddd'}
strokeWidth={2}
colorRange={colors}
/>
</XYPlot>
);
}

ForceDirectedGraph.displayName = 'ForceDirectedGraph';

export default ForceDirectedGraph;
101 changes: 49 additions & 52 deletions packages/showcase/examples/responsive-vis/responsive-bar-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,59 +48,56 @@ function updateDataForArea(data, ppp) {
return sample;
}

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

render() {
const {data, height, margin, width} = this.props;
export default function ResponsiveBarChart(props) {
const {data, height, margin, width} = props;

const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
const featuresToRender = filterFeatures(BARCHART_FEATURES, ppp);
const updatedData = featuresToRender.area
? updateDataForArea(data, ppp)
: data;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const ppp = getPPP(innerWidth, innerHeight, data, 'HEIGHT');
const featuresToRender = filterFeatures(BARCHART_FEATURES, ppp);
const updatedData = featuresToRender.area
? updateDataForArea(data, ppp)
: data;

return (
<div className="responsive-bar-chart">
<XYPlot
yType="ordinal"
xType="linear"
margin={margin}
height={height}
width={width}
>
{featuresToRender.xaxis && <XAxis orientation="top" />}
{featuresToRender.yaxis && <YAxis />}
{featuresToRender.bars && (
<HorizontalBarSeries
colorType="literal"
yRange={[0, innerHeight]}
xRange={[0, innerWidth]}
data={updatedData}
/>
)}
{featuresToRender.area && (
<AreaSeries
colorType="literal"
color="#12939A"
yType="linear"
yDomain={[0, updatedData.length]}
yRange={[0, innerHeight]}
xRange={[innerWidth, 0]}
data={updatedData}
/>
)}
</XYPlot>
</div>
);
}
return (
<div className="responsive-bar-chart">
<XYPlot
yType="ordinal"
xType="linear"
margin={margin}
height={height}
width={width}
>
{featuresToRender.xaxis && <XAxis orientation="top" />}
{featuresToRender.yaxis && <YAxis />}
{featuresToRender.bars && (
<HorizontalBarSeries
colorType="literal"
yRange={[0, innerHeight]}
xRange={[0, innerWidth]}
data={updatedData}
/>
)}
{featuresToRender.area && (
<AreaSeries
colorType="literal"
color="#12939A"
yType="linear"
yDomain={[0, updatedData.length]}
yRange={[0, innerHeight]}
xRange={[innerWidth, 0]}
data={updatedData}
/>
)}
</XYPlot>
</div>
);
}
Loading