Merge pull request #23 from fga-eps-mds/11-create-real-time-chart

Criar componente do gráfico de tempo real

.github/ISSUE_TEMPLATE/bug-reporte.md

@@ -0,0 +1,36 @@
+---
+name: Bug reporte
+about: Reporte um bug ou nos ajude a resolver algum
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+## Descrição do problema
+
+Um descrição clara e concisa sobre o problema
+
+## Passos para reprodução 
+
+Passos para reproduzir o comportamento.
+
+1. Vá para...
+2. Click em...
+...
+
+### Comportamento atual
+
+O que está acontecendo atualmente
+
+### Comportamento esperado
+
+Qual é o comportamento esperado pelo sistema
+
+## Contextos, prints e informações adicionais
+
+Se for aplicável, adicione gifs, imagens ou qualquer outro detalhe de enriqueça a descrição do problema.
+
+## Possível Solução
+
+Caso você tenha algum sugestão de onde começar a procurar o problema ou uma solução para ele escreva aqui.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,31 +1,36 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Reporte um bug ou nos ajude a resolver algum
 title: ''
 labels: bug
 assignees: ''
 
 ---
 
-## Describe the bug
-A clear and concise description of what the bug is.
+## Descrição do problema
 
-## Steps to Reproduce
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+Um descrição clara e concisa sobre o problema
 
-## Behavior
-### Actual Behavior
-What is happening when you execute the steps?
+## Passos para reprodução 
 
-### Expected Behavior
-A clear and concise description of what you expected to happen.
+Passos para reproduzir o comportamento.
 
-## Additional context and screenshots
-If applicable, add screenshots and other details to help explain your problem.
+1. Vá para...
+2. Click em...
+...
 
-## Possible Fix
-If you have any idea of what can be done to solve the problem, write it here.
+### Comportamento atual
+
+O que está acontecendo atualmente
+
+### Comportamento esperado
+
+Qual é o comportamento esperado pelo sistema
+
+## Contextos, prints e informações adicionais
+
+Se for aplicável, adicione gifs, imagens ou qualquer outro detalhe de enriqueça a descrição do problema.
+
+## Possível Solução
+
+Caso você tenha algum sugestão de onde começar a procurar o problema ou uma solução para ele escreva aqui.

.github/ISSUE_TEMPLATE/template-de-tarefas.md

@@ -0,0 +1,22 @@
+---
+name: Template de tarefas
+about: Template para definir a tarefa para algum membro
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+## Descrição
+
+Descreva a tarefa aqui
+
+## Tarefas
+
+- [ ] Primeira tarefa
+- [ ] Segunda tarefa
+- [ ] ...
+
+## Informação adicional
+
+Dê mais informação sobre a tarefa (sites, imagens, ideias, qualquer coisa que possa ser útil para quem estiver trabalhando)

unbrake-frontend/package.json

@@ -10,6 +10,8 @@
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8",
+    "recharts": "^1.5.0",
+    "prop-types": "^15.7.2",
     "redux": "^4.0.1"
   },
   "scripts": {

unbrake-frontend/src/App.jsx

@@ -1,27 +1,47 @@
 import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
+import RealTimeChart from "./components/RealTimeChart";
 
+const data = [
+  {
+    Frenagem: 500,
+    Velocidade: 3000,
+    amt: 3000 // Ponto 1
+  },
+  {
+    Frenagem: 2000,
+    Velocidade: 2000,
+    amt: 200
+  },
+  {
+    Frenagem: 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,
+   *},
+   */
+];
 const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          <code> src/App.jsx </code>
-          and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <RealTimeChart
+      data={data}
+      Y="Eixo Y"
+      X="Eixo X"
+      Label1="Frenagem"
+      Label2="Velocidade"
+    />
   );
 };
 

unbrake-frontend/src/components/RealTimeChart.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend
+} from "recharts";
+
+class RealTimeChart extends React.PureComponent {
+  render() {
+    const { data, X, Y, Label1, Label2 } = this.props;
+    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: X,
+            position: "insideBottomRight",
+            offset: -5
+          }}
+        />
+        <YAxis label={{ value: Y, angle: -90, position: "insideLeft" }} />
+        <Tooltip />
+        <Legend />
+        <Line
+          type="monotone"
+          dataKey={Label1}
+          stroke="#FF1493"
+          activeDot={{ r: 8 }}
+        />
+        <Line type="monotone" dataKey={Label2} stroke=" #FF8C69" />
+      </LineChart>
+    );
+  }
+}
+RealTimeChart.propTypes = {
+  data: PropTypes.instanceOf(Array),
+  X: PropTypes.string,
+  Y: PropTypes.string,
+  Label1: PropTypes.string,
+  Label2: PropTypes.string
+};
+RealTimeChart.defaultProps = {
+  data: [
+    {
+      Frenagem: 500,
+      Velocidade: 3000,
+      amt: 3000 // Ponto 1
+    },
+    {
+      Frenagem: 2000,
+      Velocidade: 2000,
+      amt: 200
+    },
+    {
+      Frenagem: 3000,
+      Velocidade: 1000,
+      amt: 2290
+    }
+  ],
+  X: "Eixo X",
+  Y: "Eixo Y",
+  Label1: "Frenagem",
+  Label2: "Velocidade"
+};
+
+export default RealTimeChart;

unbrake-frontend/src/tests/RealTimeChart.test.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Enzyme, { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import Adapter from "enzyme-adapter-react-16";
+import RealTimeChart from "../components/RealTimeChart";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe("<RealTimeChart />", () => {
+  describe("render()", () => {
+    test("renders the component", () => {
+      const wrapper = shallow(<RealTimeChart />);
+      const component = wrapper.dive();
+
+      expect(toJson(component)).toMatchSnapshot();
+    });
+  });
+});