Set up initial dashboard layout

Author: harsimus

sensorgriddashboard/src/components/HomePage.css

@@ -2,3 +2,7 @@
   height: 10000px;
   background-color: aqua;
 }
+
+.container {
+  margin-left: 15% !important
+}

sensorgriddashboard/src/components/HomePage.js

@@ -4,6 +4,7 @@ import NavBar from './NavBar'
 import Battery from './Battery'
 import MyGoogleMap from './MyGoogleMap'
 import TimeSeries from './TimeSeries'
+import Average from './Average'
 import realTestData from '../TestData/testData';
 
 import {
@@ -54,15 +55,32 @@ class HomePage extends Component {
                 <NavLink href="/components/">Components</NavLink>
               </NavItem>
               <NavItem>
-                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
+                <NavLink href="https://github.com/NUKnightLab/SensorGridAPI">Github</NavLink>
               </NavItem>
             </Nav>
           </Collapse>
         </Navbar>
-          <Battery className = "Battery" />
-          <NavBar className = "Navigation"/>
-          <TimeSeries displayData={this.state.displayData}/>
-          <MyGoogleMap />
+        <Battery className = "Battery" />
+        <NavBar className = "Navigation"/>
+        <Container>
+          <Row>
+            <MyGoogleMap />
+          </Row>
+          <Row>
+            <h2>Gas</h2>
+          </Row>
+          <Row>
+            <Col>
+              <Average />
+            </Col>
+            <Col>
+              <Average />
+            </Col>
+          </Row>
+          <Row>
+            <TimeSeries displayData={this.state.displayData}/>
+          </Row>
+        </Container>
       </div>
     )
   }

sensorgriddashboard/src/components/MyGoogleMap.js

@@ -7,8 +7,7 @@ const MyMapComponent = compose(
         googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
         loadingElement: <div style={{ height: `100%` }} />,
         containerElement: <div style={{ height: `600px`, width: `1000px`,
-        position: `relative`,
-        top: `50px`, left: `300px` }} />,
+         }} />,
         mapElement: <div style={{ height: `100%` }} />,
     }),
     withScriptjs,
@@ -55,4 +54,4 @@ class MyGoogleMap extends React.PureComponent {
     }
 }
 
-export default MyGoogleMap
+export default MyGoogleMap

sensorgriddashboard/src/components/TimeSeries.js

@@ -9,19 +9,19 @@ class TimeSeries extends Component {
    constructor(props){
       super(props)
    }
-   
+
 render() {
       return (
                 <XYFrame
-                  size={[1200, 500]}
+                  size={[1000, 500]}
                   lines={this.props.displayData}
                   lineDataAccessor={"data"}
                   lineStyle={d => ({ fill: d.color, fillOpacity: 0.5, stroke: d.color, strokeWidth: '3px' })}
                   xAccessor="created_at"
                   yAccessor="gasSensor"
                   xScaleType={scaleTime()}
                   lineIDAccessor="id"
-                  margin={{ "top": 60, "bottom": 65, "left": 260, "right": 20 }}
+                  margin={{ "top": 60, "bottom": 65, "left": 0, "right": 0 }}
                   hoverAnnotation={true}
                   axes={[
                     { orient: 'left', tickFormat: d => d },
@@ -37,4 +37,4 @@ render() {
           );
    }
 }
-export default TimeSeries
+export default TimeSeries