almost finished with chart

client/assets/scss/Content.scss

@@ -2,7 +2,6 @@
     flex: 1;
     flex-wrap: wrap;
     min-width: 0;
-    min-height: 500px;
     .post+ .post {
         margin-top: 2em;
     }

client/assets/scss/main.scss

@@ -55,6 +55,19 @@ hr {
     border-top: 1px solid #eee;
 }
 
+select{
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 0.2em;
+    height: 35px;
+    color: #555;
+    &:focus{
+        border-color: #66afe9;
+        outline: 0;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+    }
+}
+
 .Footer,
 .Main {
     display: flex;

client/js/components/sensors/SensorInfo.css

@@ -0,0 +1,15 @@
+.SensorInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+  width: 80%; }
+  .SensorInfo .selector-row {
+    margin-left: auto;
+    margin-right: auto; }
+    .SensorInfo .selector-row select + select {
+      margin-left: 5px; }
+
+/*# sourceMappingURL=SensorInfo.css.map */

client/js/components/sensors/SensorInfo.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,WAAW;EACP,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,CAAC;EACZ,KAAK,EAAE,GAAG;EACV,yBAAa;IACT,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,yCAAa;MACT,WAAW,EAAE,GAAG",
+"sources": ["SensorInfo.scss"],
+"names": [],
+"file": "SensorInfo.css"
+}

client/js/components/sensors/SensorInfo.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import Loading from '../utils/Loading';
+import _chartjs from 'chart.js';
+import Chart from 'react-chartjs';
 import {
-    LineChart,
+    Options,
-    Line,
+    Data
-    XAxis,
-    YAxis,
-    CartesianGrid,
-    Tooltip,
-    Legend
 }
-from 'recharts';
+from './chartOptions';
 
 import './SensorInfo.scss';
 
+const LineChart = Chart.Line;
+
 export default class SensorInfo extends React.Component {
 
     componentDidMount() {
@@ -20,6 +19,13 @@ export default class SensorInfo extends React.Component {
         this.props.sensorActions.fetchUniqueDates(location);
     }
 
+    componentWillReceiveProps(nextProps) {
+        let currentLocation = this.props.params.location,
+            nextLocation = nextProps.params.location;
+
+        currentLocation !== nextLocation ? this.props.sensorActions.fetchUniqueDates(nextLocation) : null;
+    }
+
     loadYearOptions = (date, index) => {
         return (
             <option key={index} value={index}>{date.year}</option>
@@ -56,17 +62,16 @@ export default class SensorInfo extends React.Component {
     }
 
     filterData(data) {
-        let filteredData = [];
+        let temp = JSON.parse(JSON.stringify(Data));
 
         for (let d of data) {
-            filteredData.push({
+            let label = `${d.month}/${d.day}`;
-                name: d.day,
+            temp.labels.push(label);
-                max: d.maxtemp,
+            temp.datasets[0].data.push(d.maxtemp);
-                min: d.mintemp
+            temp.datasets[1].data.push(d.mintemp);
-            });
         }
 
-        return filteredData;
+        return temp;
     }
 
     render() {
@@ -75,35 +80,19 @@ export default class SensorInfo extends React.Component {
 
         return (
             <div class="SensorInfo">
-                <div class="selector-row">
+                {sensor.fetchedUniqueDates ?
-                    <select onChange={(e) => {this.onChange(e, 'year')}}>
+                    <div class="selector-row">
-                        {sensor.fetchedUniqueDates
+                        <select onChange={(e) => {this.onChange(e, 'year')}}>
-                            ? sensor.uniqueDates.map(this.loadYearOptions)
+                            {sensor.uniqueDates.map(this.loadYearOptions)}
-                            : null
+                        </select>
-                        }
-                    </select>
                         
-                    <select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
+                        <select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
-                        {sensor.fetchedUniqueDates
+                            {sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
-                            ? sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)
+                        </select>
-                            : null
+                    </div>
-                        }
+                : <Loading/>}
-                    </select>
+                
-                </div>
+                {sensor.fetchedUniqueDates ? <LineChart data={data} options={Options}/> : null}
-                <div>
-                    {sensor.fetchedInfo ?  
-                    <LineChart width={600} height={300} data={data}
-                            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
-                        <XAxis dataKey="name"/>
-                        <YAxis/>
-                        <CartesianGrid strokeDasharray="3 3"/>
-                        <Tooltip/>
-                        <Legend />
-                        <Line type="monotone" dataKey="max" stroke="#8884d8" activeDot={{r: 8}}/>
-                        <Line type="monotone" dataKey="min" stroke="#82ca9d" />
-                    </LineChart>
-                    : <Loading/>}
-                </div>
             </div>
         );
     }

client/js/components/sensors/SensorInfo.scss

@@ -2,14 +2,15 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    align-items: center;
-    
+    min-width: 0;
+    width: 80%;
     .selector-row{
-        display: flex;
+        margin-left: auto;
-        justify-content: center;
+        margin-right: auto;
-    }
+        margin-bottom: 1em;
-    
+        select+select{
-    .recharts-wrapper{
+            margin-left: 5px;
-        flex: 1;
+        }
     }
 }

client/js/components/sensors/chartOptions.js

@@ -0,0 +1,30 @@
+export const Options = {
+    responsive: true,
+    scaleOverride: true,
+    scaleSteps: 20,
+    scaleStartValue: 0,
+    scaleStepWidth: 5
+};
+
+export let Data = {
+    labels: [],
+    datasets: [{
+        label: "Max Temperature °F",
+        fillColor: "rgba(255,100,100,0)",
+        strokeColor: "rgba(255,100,100,1)",
+        pointColor: "rgba(255,100,100,1)",
+        pointStrokeColor: "#fff",
+        pointHighlightFill: "#fff",
+        pointHighlightStroke: "rgba(255,100,100,1)",
+        data: []
+    }, {
+        label: "Min Temperature °F",
+        fillColor: "rgba(151,187,205,0)",
+        strokeColor: "rgba(151,187,205,1)",
+        pointColor: "rgba(151,187,205,1)",
+        pointStrokeColor: "#fff",
+        pointHighlightFill: "#fff",
+        pointHighlightStroke: "rgba(151,187,205,1)",
+        data: []
+    }]
+};

client/js/redux/reducers/sensor.js

@@ -33,7 +33,7 @@ export default function app(state = defaultState, action) {
                 fetchingInfo: true,
                 fetchedInfo: false
             });
-        case types:FETCHING_UNIQUE_DATES:
+        case types.FETCHING_UNIQUE_DATES:
             return Object.assign({}, state, {
                fetchingUniqueDates: true,
                fetchedUniqueDates: false

package.json

@@ -37,6 +37,7 @@
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
+    "chart.js": "^1.1.1",
     "css-loader": "^0.23.1",
     "exports-loader": "^0.6.3",
     "file-loader": "^0.9.0",
@@ -49,11 +50,11 @@
     "postcss-loader": "^0.13.0",
     "react": "^15.3.0",
     "react-addons-transition-group": "^15.3.1",
+    "react-chartjs": "^0.8.0",
     "react-dom": "^15.3.0",
     "react-redux": "^4.4.5",
     "react-router": "^2.6.1",
     "react-router-redux": "^4.0.5",
-    "recharts": "^0.14.1",
     "redux": "^3.5.2",
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.1.0",