Skip to content

Instantly share code, notes, and snippets.

@mhauken mhauken/plot.js
Last active Feb 28, 2017

Embed
What would you like to do?
Useful snippets from React in Flipdflops
/**
* This component should render a plot with Plotly, taking these three props:
*
* - xData: the data to be rendered on the x-axis as an array
* - yData: The data to be rendered on the y-axis as an array
* - type: The type of plot we want Plotly to render
*
* To see an example of how you should use Plotly look at the index.html file in the public/ folder.
* (and feel free to delete the code in there)
*/
import React, { Component } from 'react';
import Plotly from 'plotly.js/dist/plotly.js';
const redrawPlot = (element, xData, yData, type) => {
Plotly.newPlot(element, [{
x: xData,
y: yData,
type: type
}], {
margin: {
t: 0, r: 0, l: 30
},
xaxis: {
gridcolor: 'transparent'
}
}, {
displayModeBar: false
});
}
class Plot extends Component {
shouldComponentUpdate(nextProps) {
//if some props are changed return true
if (this.props.yData !== nextProps.yData) {
console.log('is changed');
return true;
}
if (this.props.xData !== nextProps.xData) {
console.log('is changed');
return true;
}
console.log('is not changed');
//else don't
return false;
}
componentDidMount(){
console.log('did mount');
const { xData, yData, type } = this.props;
redrawPlot(this.element, xData, yData, type);
}
componentDidUpdate() {
const { xData, yData, type } = this.props;
redrawPlot(this.element, xData, yData, type);
}
render() {
return (
<div
ref={(element) => {
this.element = element;
}}
/>
)
}
}
export default Plot;
/**
* This component should render a plot with Plotly, taking these three props:
*
* - xData: the data to be rendered on the x-axis as an array
* - yData: The data to be rendered on the y-axis as an array
* - type: The type of plot we want Plotly to render
*
* To see an example of how you should use Plotly look at the index.html file in the public/ folder.
* (and feel free to delete the code in there)
*/
import React, { Component } from 'react';
import Plotly from 'plotly.js/dist/plotly.js';
class Plot extends Component {
componentDidMount() {
this.drawPlot();
}
componentDidUpdate() {
this.drawPlot();
}
shouldComponentUpdate(nextProps) {
return this.props.xData !== nextProps.xData || this.props.yData !== nextProps.yData;
}
drawPlot = () => {
Plotly.newPlot(this.div, [{
x: this.props.xData,
y: this.props.yData,
type: this.props.type,
}], {
margin: {
t: 0, r: 0, l: 30
},
xaxis: {
gridcolor: 'transparent'
}
}, {
displayModeBar: false
});
}
render() {
return (
<div className="plot-wrapper">
<div ref={comp => this.div = comp} />
</div>
)
}
}
export default Plot;
/**
* This component should manage the todo items, letting users check existing ones and add new ones
*/
import React, { Component } from 'react';
import TodoItem from './TodoItem';
import TodoInput from './TodoInput';
class TodoList extends Component {
constructor(props) {
super(props);
//create new state:
this.state = {
items: props.items,
newInput: ''
};
}
updateInput = (event) => {
//Update the state
this.setState({
newInput: event.target.value
});
}
addToList = (event) => {
//stop page from reloading
event.preventDefault();
// create newItem
const newItem = {
checked: false,
text: this.state.newInput
}
//update the state
this.setState({
items: [...this.state.items, newItem],
newInput: '' //reset the input
})
}
updateCheckmark = (event, index) => { //function
this.setState((prevState) => { //we update setstate
//create a new const where we map through all the elements in the array
const newItems = prevState.items.map( (item, itemsIndex ) => {
if (index === itemsIndex) { //if the index passed to updateCheckmark is the same as prevState Items
return {
text: item.text, //copy the old property
checked: !item.checked //make it opposite of what it was
}
} else {
return item; //just keep the same property
}
})
return {
items: newItems //assign the new const to items
}
})
}
render() {
return (
<div>
<ul>
{this.state.items.map((item, index) => (
<li
key={index}>
<TodoItem
text={item.text}
checked={item.checked}
updateCheckmark={(event) => { //create an anonymous function so that we can pass an index.
this.updateCheckmark(event, index) //else we could have just said: updateCheckmark={this.updateCheckmark}
}}
/>
</li>
))}
</ul>
<form onSubmit={this.addToList}>
<TodoInput updateInput={this.updateInput} newValue={this.state.newInput} />
</form>
</div>
)
}
}
export default TodoList;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.