FINISH Real Time Chart

unbrake/src/App.js

@@ -1,21 +1,43 @@
 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'
+import RealTimeChart from './component/RealTimeChart'
 
 
+const data = [
+
+  {
+    Forca:1000, Velocidade: 3000, amt: 3000, //Ponto 1
+  },
+  {
+    Forca:2000, Velocidade: 2000, amt: 200,
+  },
+  {
+    Forca:3000, Velocidade: 1000, 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 App extends React.Component {
   render() {
     return (
     	<center>
-      		<SimpleLineChart/>
+      		<RealTimeChart data = {data} Y = "Eixo Y" X = "Eixo X" Label1 = "Forca" Label2 = "Velocidade"/>
 
 		</center>    
     );
   }
 }
 
+

unbrake/src/component/RealTimeChart.js

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import {
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} from 'recharts';
+
+
+export default class RealTimeChart extends React.Component {
+
+  render() {
+    return (
+
+      	<LineChart
+		    width={600}
+		    height={300}
+		    data={this.props.data}
+		    margin={{
+		        top: 8, right: 5, left: 5, bottom: 5,
+        		}}
+      	>
+
+        <CartesianGrid strokeDasharray="2 3" />
+        <XAxis dataKey="name" label={{ value: this.props.X, position: 'insideBottomRight', offset: -5 }} />
+        <YAxis label={{ value: this.props.Y, angle: -90, position: 'insideLeft' }}/>
+        <Tooltip/>
+        <Legend />
+        <Line type="monotone" dataKey= {this.props.Label1} stroke="#FF1493" activeDot={{ r: 8 }} />
+        <Line type="monotone" dataKey= {this.props.Label2} stroke="	#FF8C69" />
+      </LineChart>
+
+    );
+  }
+}