dubbha · dubbha · Mar 18, 2018 · Mar 18, 2018 · Mar 18, 2018 · Mar 18, 2018
diff --git a/README.md b/README.md
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -21,7 +22,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body class="body">
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>

diff --git a/server/server.js b/server/server.js
@@ -62,6 +62,7 @@ io.on('connection', (socket) => {
  * @param {number} count - user count
  * @param {boolean} drop - drop database
  */
-generateRandomUsers(10, true);
+
+generateRandomUsers(13, true);
 // regenerateLiveFeed();
 
diff --git a/server/utils/bot.js b/server/utils/bot.js
@@ -4,17 +4,27 @@ import {
     hourlyGenerationPercentage as hourlyRates
 } from '../mock-data/rates.json';
 
-const RAND_MIN = 0.95;
-const RAND_MAX = 1.05;
+const RAND_MIN = 0.89;
+const RAND_MAX = 1.11;
 
 export function generateRandomUsers(userCount, drop = false) {
+    const kwhs = [5, 10, 15, 20, 30];
     if (drop) {
         db.dropFeedCollection();
     }
 
+    const fireUid = 'ZsZoocWfU0NMs1CzifhlE1KU6aE3';
+    const kwh = 15;
+    db.postNewFeed({
+        uid: fireUid,
+        dailyAvg: generateAvgFeed(kwh),
+        live: generateLiveFeed(kwh, fireUid),
+        kwh
+    });
+
     for (let i = userCount; i > 0; i--) {
         const uid = '_' + Math.random().toString(36).substr(2, 9);
-        const kwh = 10;
+        const kwh = kwhs[i % 5];
 
         db.postNewFeed({
             uid,
@@ -33,7 +43,12 @@ function generateAvgFeed(kwh) {
 
     for (let date = fromDate; date.getTime() < toDate.getTime(); date.setDate(date.getDate() + 1)) {
         const rand = Math.random().toFixed(3) * (RAND_MAX - RAND_MIN) + RAND_MIN;
-        const value = kwh * dailyRates[date.getMonth()] * rand;
+
+        const rate = dailyRates[date.getMonth()] < dailyRates[date.getMonth() + 1]
+            ? dailyRates[date.getMonth()] + (dailyRates[date.getMonth() + 1] - dailyRates[date.getMonth()]) * (date.getDate() / 30)
+            : dailyRates[date.getMonth()] - (dailyRates[date.getMonth()] - dailyRates[date.getMonth() + 1]) * (date.getDate() / 30)
+
+        const value = kwh * rate * rand;
         dailyAvg.push({
             date: new Date(date.getTime()).getTime(),
             value
@@ -91,5 +106,5 @@ function startPush({uid, kwh}) {
             uid,
             live: {date: date.getTime(), value}
         });
-    }, 10000);
+    }, 8000);
 }
diff --git a/server/utils/database-utils.js b/server/utils/database-utils.js
@@ -86,9 +86,7 @@ export function pushLive(data) {
     return Feed.update(
         { uid: data.uid },
         { $push: {live: data.live}},
-        (err, res) => {
-            console.log(err, res);
-        }
+        (err, res) => {}
     );
 }
 

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: #e6ecf0;
 }
 
 .App-logo {
@@ -8,12 +9,48 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 80px;
-  padding: 20px;
-  color: white;
+  background-color: white;
+  height:50px;
+  padding: 10px 10px 7px 10px;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25);
+  margin-bottom: 1px;
+}
+
+.App-header-backdrop {
+  height: 320px;
+  background: url('./assets/img/backdrop.jpg') 50% 22% no-repeat;
+  background-size: cover;
 }
 
+.App-header-profile-avatar {
+  position: absolute;
+  height: 208px;
+  width: 208px;
+  border-radius: 104px;
+  padding: 4px;
+  background-color: white;
+  z-index: 1;
+  bottom: -42px;
+  left: 65px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+} 
+
+.App-header-profile-photo {
+  margin: 3px 0px 0px 3px;
+  height: 200px;
+  width: 200px;
+  background: url('./assets/img/avatar.png') no-repeat;
+}
+
+.App-header-bottom {
+  position: relative;
+  height: 46px;
+  padding: 10px 0;
+  background-color: white;
+  z-index: 1;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+}
+
 .App-title {
   font-size: 1.5em;
 }
@@ -22,7 +59,31 @@
   font-size: large;
 }
 
+.Highcharts-wrapper {
+  padding: 58px 144px 0;
+  position: relative;
+  background-color: #e6ecf0;
+}
+
 @keyframes App-logo-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.navbar-nav,
+.navbar-nav li a {
+  margin-top: 0 ;
+  padding-top: 0;
+}
+
+.navbar-nav {
+  padding-bottom: 18px;
+}
+
+.fake-section {
+  margin: 0 auto;
+  width: 1286px;
+  height: 800px;
+  background: url('./assets/img/fake.png') no-repeat;
+  background-size: contain;
+}
diff --git a/src/App.js b/src/App.js
@@ -4,30 +4,19 @@ import logo from './logo.svg';
 import './App.css';
 import SimpleLineChart from './charts/SimpleLineChart';
 import SplineWithPlotBands from './charts/SplineWithPlotBands';
-import LiveUpdate from './charts/LiveUpdate';
 import Root from './components/Root';
-import Live from './components/Live';
+import Header from './components/Header';
+import Avg from './components/Avg';
+import Profile from './components/Profile';
 import './config';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-        </header>
-
-        {/* <button onClick={() => this.requestLiveData(123)}>LiveData</button> */}
-        <Live />
-
         <BrowserRouter>
           <Route path="/" component={Root} />
         </BrowserRouter>
-
-        <SimpleLineChart />
-        <SplineWithPlotBands />
-        {/* <LiveUpdate /> */}
-
       </div>
     );
   }

diff --git a/src/assets/bootstrap.min.css b/src/assets/bootstrap.min.css
diff --git a/src/assets/img/avatar.png b/src/assets/img/avatar.png
diff --git a/src/assets/img/backdrop.jpg b/src/assets/img/backdrop.jpg
diff --git a/src/assets/img/backdrop.png b/src/assets/img/backdrop.png
diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png
diff --git a/src/assets/img/[email protected] b/src/assets/img/[email protected]
diff --git a/src/assets/img/[email protected] b/src/assets/img/[email protected]
diff --git a/src/assets/img/fake.png b/src/assets/img/fake.png
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -0,0 +1,104 @@
+/*///////////////////////////////*//*Global Styles*/
+body {
+    margin: 0px;
+    background-color: #E6ECF0;
+    padding: 0px;
+    font-family: 'lato', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.nav{
+    padding: 20px;
+    float: left;
+
+}
+header
+{background-color: white;
+}
+a, a:hover{
+    outline: none;
+    text-decoration: none;
+    text-transform: none;
+}
+a:hover{
+    cursor: pointer;
+    opacity: 0.5;
+}
+
+li a{
+    padding: 20px
+}
+
+.nav li{
+    float: left;
+    margin-left: 30px;
+}
+.active{
+    border-bottom: 2px solid #008000;
+}
+.pic1{
+    width: 100%;
+}
+.avaLittle{
+    width: 50px;
+}
+.descrtion{
+    padding: 20px 0;
+}
+.marathonBox{
+    background-color: #FFFEF1;
+    padding: 20px 0;
+}
+h1{
+    font-family: Lato;
+    font-size: 26px;
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    text-align: left;
+    color: #667580;
+    margin-top: 10px;
+}
+.infoBox{
+    width: 46%;
+    height: 100px;
+    background-color: #ffffff;
+    border: solid 1px rgba(0, 170, 165, 0.3);
+    padding: 20px;
+    margin-top: 10px;
+    float: left;
+    margin-left: 15px;
+
+}
+.text1{
+    font-size: 14px;
+    display: block;
+    font-weight: bold;
+    letter-spacing: 0.3px;
+    text-align: left;
+    color: #9b9b9b;
+}
+.text2{
+    font-size: 24px;
+    color: #4a90e2;
+}
+
+.thForChart{
+    background-color: #00aaa5;
+    width: 100%;
+    margin-top: 10px;
+}
+.thForChart span{
+    color: #ffffff;
+    padding: 5px 10px;
+    display: block;
+}
+.chart img{
+    width: 100%;
+}
+.avaRight{
+    float: right;
+    margin-top: 10px;
+}
diff --git a/src/charts/SimpleLineChart.js b/src/charts/SimpleLineChart.js
@@ -6,7 +6,7 @@ import {
 
 const plotOptions = {
   series: {
-    pointStart: 2010
+    pointStart: 2011
   }
 };
 
@@ -15,7 +15,7 @@ const App = () => (
     <HighchartsChart plotOptions={plotOptions}>
       <Chart />
 
-      <Title>Solar Employment Growth by Sector, 2010-2016</Title>
+      <Title>Solar Employment Growth by Sector, 2011-2017</Title>
 
       <Subtitle>Source: thesolarfoundation.com</Subtitle>