gpDA
/ moving-graph-app.js-1.js
Last active
May 1, 2019 21:35
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/App.js | |
| render(){ | |
| return( | |
| <Counters counters={this.state.counter} onIncrement={this.handleIncrement} onDecrement={this.handleDecrement} /> | |
| <Chart counters={this.state.counters} /> | |
| ) | |
| } |
gpDA
/ moving-graph-2.js
Last active
May 1, 2019 21:51
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components.App.js | |
| class App extends Component{ | |
| // initial state | |
| // id:1 -> line1 / id:2 -> line2 / id:3 -> line3 | |
| state = { | |
| // counters array comprised of Object key / value pair | |
| counters: [ | |
| { id: 1, value: 1}, | |
| { id: 2, value: 2}, |
gpDA
/ moving-graph-3.js
Last active
May 1, 2019 21:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components.App.js | |
| // decrement function | |
| handleIncrement = counter => { | |
| // copy the `counters` | |
| const counters = [...this.state.counters]; | |
| // indexOf corresponding eventActions | |
| const index = counters.indexOf(counter); | |
| // update the `counters` Object using new `counter` | |
| counters[index] = {...counter}; |
gpDA
/ moving-graph-4.js
Created
May 1, 2019 21:53
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/ButtonElement/counter.js | |
| class Counters extends Component{ | |
| render(){ | |
| return ( | |
| <div> | |
| {/* map will run 3 times and | |
| make 3 ButtonHandlers */} | |
| {this.props.counters.map(counter => ( | |
| <ButtonHandler |
gpDA
/ moving-graph-5.js
Created
May 1, 2019 21:59
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/ButtonElement/buttonHandler.js | |
| render() { | |
| return ( | |
| <div> | |
| {/* show counter for each state change */} | |
| <span>{this.count()}</span> | |
| {/* increment button with value of counters `id` */} | |
| <button className="buttonStyle" onClick={() => this.props.onIncrement(this.props.counter)}>line{this.props.counter.id}+</button> | |
| {/* decrement button with value of counters `id` */} |
gpDA
/ moving-graph-6.js
Last active
May 2, 2019 15:38
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/Chart/Chart.js | |
| return( | |
| <Line | |
| // data fro chart_data | |
| data={chart_data} | |
| // options | |
| options={options} | |
| /> | |
| ) |
gpDA
/ moving-graph-7.js
Last active
May 2, 2019 15:37
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/Chart/Chart.js | |
| // data for LINE | |
| const chart_data = { | |
| // x_axis (time range) | |
| labels: x_axis, | |
| // dataset LINE1 | |
| datasets: [{ | |
| label: "line1", | |
| lineTension: 0.1, |
gpDA
/ moving-graph-8.js
Created
May 2, 2019 15:39
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/Chart/Chart.js | |
| // LINE options | |
| const options = { | |
| scales: { | |
| yAxes: [{ | |
| display: true, | |
| ticks: { | |
| beginAtZero:true, | |
| // y axis min and max |
gpDA
/ moving-graph-app.js-9.js
Created
May 2, 2019 15:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/Chart/Chart.js | |
| constructor() { | |
| super(); | |
| // initialize array with default value (1,2,3) respectively | |
| let inital_line_1 = new Array(31).fill(1); | |
| let inital_line_2 = new Array(31).fill(2); | |
| let inital_line_3 = new Array(31).fill(3); | |
| this.state = { | |
| inital_line_1: inital_line_1, |
gpDA
/ moving-graph-10.js
Created
May 2, 2019 15:42
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ./components/Chart/Chart.js | |
| // APPEND the updated new value to the end of state | |
| // increment counter | |
| updateArray(){ | |
| this.setState({ | |
| inital_line_1: [ | |
| ...this.state.inital_line_1, | |
| this.props.counters[0].value | |
| ], |
OlderNewer