Graph component ready using the Recharts library. app.js already conf…

…igured and Recharts installed in docker.

unbrake/package.json

@@ -9,7 +9,8 @@
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "recharts": "^1.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

unbrake/src/App.js

@@ -1,28 +1,21 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Sum from './component/Sum';
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import Reducer from './reducers/index';
+import SimpleLineChart from './component/realtimechat'
 
-class App extends Component {
+
+export default class App extends React.Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+    	<center>
+      		<SimpleLineChart/>
+
+		</center>    
     );
   }
 }
 
-export default App;

unbrake/src/actions/index.js

@@ -0,0 +1,5 @@
+export const add = (n1, n2) => ({
+	type: 'ADD', //Tipo da ação. Eu que escolho
+	n1,
+	n2
+})

unbrake/src/component/Result.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+class Result extends React.Component{
+	constructor(props){
+		super(props)
+	}
+
+
+render(){
+	return (
+		<p style={{color: 'red', fontSize: '40px'}}> {this.props.sum}  </p>
+	)
+}
+}
+
+const mapStateToProps = state => {
+  return state.sum
+}
+
+//export default Result;
+export default connect(
+  mapStateToProps,
+)(Result)
+
+//export default Result;

unbrake/src/component/Sum.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Result from './Result';
+import { connect } from 'react-redux';
+import {add} from '../actions'
+
+
+class Sum extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {number1: '', number2: '', sum: ''}; //state: Estado interno. Um Json.
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+
+  }
+
+  handleChange(event) {
+    if(event.target.name === "number1"){
+      this.setState({number1: event.target.value});
+    }
+    else{
+      this.setState({number2: event.target.value});
+    }
+  }
+
+  handleSubmit(event){
+    this.props.dispatch(add(this.state.number1, this.state.number2)) // Mandar uma ação para algum lugar
+    let sum = +this.state.number1 + +this.state.number2
+    this.setState({sum: sum});
+    event.preventDefault();
+
+  }
+  //connect: conecta meu componente ao reducer
+  render() {
+    return (
+      <div>
+      <form onSubmit={this.handleSubmit}>
+        <input type="text" name="number1" value={this.state.number1} onChange={this.handleChange} />
+        <input type="text" name="number2" value={this.state.number2} onChange={this.handleChange} />
+        <button type="submit">Sum</button>
+      </form>
+      <Result/>
+      </div>)
+
+  }
+}
+
+export default connect()(Sum); 
+
+//export default Sum

unbrake/src/component/realtimechat.js

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+
+const data = [
+  {
+    A:500, V: 1000, F: 2000, amt: 3000, //Ponto A
+  },
+  {
+    A:600, V: 2000, F: 100, amt: 200,
+  },
+  {
+    A:400, V: 2000, F: 9800, amt: 2290,
+  },
+  /**{
+     cd:400, uv: 2780, pv: 3908, amt: 2000, Outros pontos
+  },
+  {
+    name: 'Page E', uv: 1890, pv: 4800, amt: 2181,
+  },
+  {
+    name: 'Page F', uv: 2390, pv: 3800, amt: 2500,
+  },
+  {
+    name: 'Page G', uv: 3490, pv: 4300, amt: 2100,
+  },*/
+];
+
+export default class Example extends PureComponent {
+  static jsfiddleUrl = 'https://jsfiddle.net/alidingling/xqjtetw0/';
+
+  render() {
+    return (
+
+      	<LineChart
+		    width={600}
+		    height={300}
+		    data={data}
+		    margin={{
+		        top: 8, right: 5, left: 5, bottom: 5,
+        		}}
+      	>
+
+
+        <CartesianGrid strokeDasharray="2 3" />
+        <XAxis dataKey="name" label={{ value: "Axis X", position: 'insideBottomRight', offset: -5 }} />
+        <YAxis label={{ value: "Axis Y", angle: -90, position: 'insideLeft' }}/>
+        <Tooltip/>
+        <Legend />
+        <Line type="monotone" dataKey="F" stroke="#FF1493" activeDot={{ r: 8 }} />
+        <Line type="monotone" dataKey="V" stroke="	#FF8C69" />
+        <Line type="monotone" dataKey="A" stroke="#7FFFD4"/>
+      </LineChart>
+
+    );
+  }
+}

unbrake/src/reducers/index.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import sum from './sum'
+
+const Reducer = combineReducers({ //Agrupa os componentes
+	sum,
+})
+
+export default Reducer;

unbrake/src/reducers/sum.js

@@ -0,0 +1,12 @@
+const sum = (state = {}, action) => { //Jeito de definir uma função
+  switch (action.type) {
+    case 'ADD':
+      console.log(state, action)
+      return {...state, sum: +action.n1 + +action.n2};
+
+    default:
+      return state
+  }
+}
+
+export default sum