Random in graph

src/components/commons/Navbar/projects.json

@@ -9,4 +9,4 @@
       { "id":2, "name": "Giorgio", "value": "very happy"}
     ]
   }
-]
+]

src/components/pages/DashBoard/BarChart.component.js

@@ -9,11 +9,11 @@ const Graph = () => (<Chart
   chartType="Bar"
   loader={<div>Loading Chart</div>}
   data={[
-    ['Year', '😃', '🙂', '😕', '😖'],
-    ['2014', 1000, 400, 304, 789],
-    ['2015', 1170, 377, 1000, 460],
-    ['2016', 660, 377, 1200, 420],
-    ['2017', 1030, 540, 660, 377],
+    ['Year', '😃', '🙂', '😕', '😖', '😊'],
+    ['2014', Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
+    ['2015', Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
+    ['2016', Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
+    ['2017', Math.random(), Math.random(), Math.random(), Math.random(), Math.random()],
   ]}
   options={{
     // Material design options

src/components/pages/DashBoard/Dashboard.component.js

@@ -2,14 +2,10 @@ import React from 'react';
 import Graph from './BarChart.component';
 import './graph.css';
 
-
-const renderUsers = users => users && users.map(user => <div key={user.id}>{user.name} {user.value}</div>);
-
 const Dashboard = ({ user: { project } }) => (
   <div>
-    {project && renderUsers(project.users)}
     <div className="graph">
-      <Graph />
+      {project && <Graph users={project.users} />}
     </div>
 
   </div>

src/components/pages/DashBoard/graph.css

@@ -1,5 +1,4 @@
 .graph {
-  margin-top: 100px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/pages/Home/Home.component.js

@@ -3,7 +3,6 @@ import { Dashboard } from '../../pages';
 
 const Home = ({ className }) => (
   <div className={className}>
-    Hola
     <Dashboard />
   </div>
 );

yarn.lock

@@ -9169,6 +9169,13 @@ react-event-listener@^0.6.2, react-event-listener@^0.6.6:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
+react-google-charts@^3.0.15:
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/react-google-charts/-/react-google-charts-3.0.15.tgz#30759a470f48336e744fd383d054122b039a1ff2"
+  integrity sha512-78s5xOQOJvL+jIewrWQZEHtlVk+5Yh4zZy+ODA1on1o1FaRjKWXxoo4n4JQl1XuqkF/A9NWque3KqM6pMggjzQ==
+  dependencies:
+    react-load-script "^0.0.6"
+
 [email protected]:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-image-lightbox/-/react-image-lightbox-5.1.0.tgz#b47b904b027c918acdd9efa94dc0a0ddd8125c86"
@@ -9187,6 +9194,11 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-load-script@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-load-script/-/react-load-script-0.0.6.tgz#db6851236aaa25bb622677a2eb51dad4f8d2c258"
+  integrity sha512-aRGxDGP9VoLxcsaYvKWIW+LRrMOzz2eEcubTS4NvQPPugjk2VvMhow0wWTkSl7RxookomD1MwcP4l5UStg5ShQ==
+
 react-modal@^3.6.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.10.1.tgz#ba37927871830c798f51404aa6bc71ff7a5e4c16"