Integrate graph with map and homepage

Author: aco711

sensorgriddashboard/src/TestData/testData.js

@@ -0,0 +1,85 @@
+
+// Test battery time series JSON
+// This data is from a single sensor over a period of time
+// It will be used in an XYFrame (Line graph) to show the sensors battery over time
+
+export default [
+	{
+		id: "sensor-1", color:'blue',
+		data: [
+			{
+				gasSensor: 200,
+				created_at:  new Date(2017, 7, 1),
+			},
+			{
+				gasSensor: 250,
+				created_at:  new Date(2017, 7, 2),
+			},
+			{
+				gasSensor: 220,
+				created_at:  new Date(2017, 7, 3),
+			},
+			{
+				gasSensor: 230,
+				created_at:  new Date(2017, 7, 4),
+			},
+			{
+				gasSensor: 240,
+				created_at:  new Date(2017, 7, 5),
+			}
+		]
+
+	},
+	{
+		id: "sensor-2", color:'red',
+		data: [
+			{
+				gasSensor: 220,
+				created_at:  new Date(2017, 7, 1),
+			},
+			{
+				gasSensor: 300,
+				created_at:  new Date(2017, 7, 2),
+			},
+			{
+				gasSensor: 300,
+				created_at:  new Date(2017, 7, 3),
+			},
+			{
+				gasSensor: 290,
+				created_at:  new Date(2017, 7, 4),
+			},
+			{
+				gasSensor: 300,
+				created_at:  new Date(2017, 7, 5),
+			}
+		]
+
+	},
+	{
+	id: "sensor-3", color:'green',
+	data: [
+		{
+			gasSensor: 220,
+			created_at:  new Date(2017, 7, 1),
+		},
+		{
+			gasSensor: 220,
+			created_at:  new Date(2017, 7, 2),
+		},
+		{
+			gasSensor: 220,
+			created_at:  new Date(2017, 7, 3),
+		},
+		{
+			gasSensor: 210,
+			created_at:  new Date(2017, 7, 4),
+		},
+		{
+			gasSensor: 220,
+			created_at:  new Date(2017, 7, 5),
+		}
+	]
+},
+
+]

sensorgriddashboard/src/components/HomePage.js

@@ -3,6 +3,9 @@ import './HomePage.css'
 import NavBar from './NavBar'
 import Battery from './Battery'
 import MyGoogleMap from './MyGoogleMap'
+import TimeSeries from './TimeSeries'
+import realTestData from '../TestData/testData';
+
 import {
   Collapse,
   Navbar,
@@ -22,15 +25,15 @@ import {
   DropdownMenu,
   DropdownItem
 } from 'reactstrap';
-import Average from './Average.js'
 
 class HomePage extends Component {
   constructor(props) {
     super(props);
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      isOpen: false
+      isOpen: false,
+      displayData: realTestData,
     };
   }
   toggle() {
@@ -58,8 +61,8 @@ class HomePage extends Component {
         </Navbar>
           <Battery className = "Battery" />
           <NavBar className = "Navigation"/>
+          <TimeSeries displayData={this.state.displayData}/>
           <MyGoogleMap />
-        </div>
       </div>
     )
   }

sensorgriddashboard/src/components/TimeSeries.css

@@ -0,0 +1,23 @@
+.tooltip-content {
+    background: white;
+    border: 1px solid black;
+    color: black;
+    padding: 10px;
+    z-index: 99;
+    min-width: 120px;
+   }
+  
+   .tooltip-content:before {
+    background: white;
+    content: '';
+    padding: 0px;
+    transform: rotate(45deg);
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    z-index: 99;
+   }
+  
+  .linegraph {
+    width: 700px
+  }

sensorgriddashboard/src/components/TimeSeries.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { scaleTime } from 'd3-scale'
+import { XYFrame, OrdinalFrame } from "semiotic"
+import './TimeSeries.css';
+
+
+
+class TimeSeries extends Component {
+   constructor(props){
+      super(props)
+   }
+   
+render() {
+      return (
+                <XYFrame
+                  size={[1200, 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 }}
+                  hoverAnnotation={true}
+                  axes={[
+                    { orient: 'left', tickFormat: d => d },
+                    { ticks: 5, orient: 'bottom', tickFormat: d => {
+                      // console.log(typeof d)
+                      // console.log(d.toString().split(" "))
+                      // console.log(d.toString().split(" ")[1] + " " + d.toString().split(" ")[2])
+                      return  d.toString().split(" ")[1] + " " + d.toString().split(" ")[2]
+                    }
+                    }
+                  ]}
+                />
+          );
+   }
+}
+export default TimeSeries