more work on charts

client/assets/scss/Content.scss

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

client/js/components/sensors/SensorInfo.js

@@ -1,52 +1,110 @@
 import React from 'react';
+import Loading from '../utils/Loading';
+import {
+    LineChart,
+    Line,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend
+}
+from 'recharts';
 
-let location, sensor, actions, uniqueDates, fetchedAll;
+import './SensorInfo.scss';
 
-export default class SensorInfo extends React.Component{
+export default class SensorInfo extends React.Component {
-    
+
-    componentDidMount(){
+    componentDidMount() {
-        location = this.props.params.location;
+        let location = this.props.params.location;
         this.props.sensorActions.fetchUniqueDates(location);
     }
-    
+
     loadYearOptions = (date, index) => {
         return (
             <option key={index} value={index}>{date.year}</option>
         );
     }
-    
+
     loadMonthOptions = (date, index) => {
         return (
             <option key={index} value={index}>{date.monthname}</option>
         );
     }
-    
+
-    onYearChange(event){
+    onChange(event, type) {
-        this.props.sensorActions.setSelectedYearIndex(parseInt(event.target.value));
+        let location = this.props.params.location,
+            sensor = this.props.sensor,
+            actions = this.props.sensorActions,
+            yearIndex = sensor.selectedYearIndex,
+            monthIndex = sensor.selectedMonthIndex;
+
+        if (type === 'year') {
+            yearIndex = parseInt(event.target.value);
+            monthIndex = 0;
+        }
+        else if (type === 'month') {
+            monthIndex = parseInt(event.target.value);
+        }
+
+        let year = sensor.uniqueDates[yearIndex].year;
+        let monthname = sensor.uniqueDates[yearIndex].months[monthIndex].monthname;
+
+        actions.setSelectedMonthIndex(monthIndex);
+        actions.setSelectedYearIndex(yearIndex);
+        this.props.sensorActions.fetchSensorInfoMonth(location, year, monthname);
+    }
+
+    filterData(data) {
+        let filteredData = [];
+
+        for (let d of data) {
+            filteredData.push({
+                name: d.day,
+                max: d.maxtemp,
+                min: d.mintemp
+            });
+        }
+        
+        return filteredData;
     }
     
-    onMonthChange(event){
+    render() {
-        this.props.sensorActions.setSelectedMonthIndex(parseInt(event.target.value));
+        let sensor = this.props.sensor;
-    }
+        let data = this.filterData(sensor.info);
-    
+        
-    render(){
+        return (
-        sensor = this.props.sensor;
+            <div class="SensorInfo">
-        return(
+                <div class="selector-row">
-            <div class="Content">
+                    <select onChange={(e) => {this.onChange(e, 'year')}}>
-                <select onChange={this.onYearChange.bind(this)}>
+                        {sensor.fetchedUniqueDates
-                    {sensor.fetchedUniqueDates
+                            ? sensor.uniqueDates.map(this.loadYearOptions)
-                        ? sensor.uniqueDates.map(this.loadYearOptions)
+                            : null
-                        : null
+                        }
-                    }
+                    </select>
-                </select>
+                    
-                
+                    <select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
-                <select onChange={this.onMonthChange.bind(this)}>
+                        {sensor.fetchedUniqueDates
-                    {sensor.fetchedUniqueDates
+                            ? sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)
-                        ? sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)
+                            : null
-                        : null
+                        }
-                    }
+                    </select>
-                </select>
+                </div>
+                <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

@@ -0,0 +1,15 @@
+.SensorInfo{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    .selector-row{
+        display: flex;
+        justify-content: center;
+    }
+    
+    .recharts-wrapper{
+        flex: 1;
+    }
+}

client/js/redux/actions/sensor.js

@@ -8,16 +8,9 @@ function loadSensorList(sensor_list){
     }
 }
 
-function loadSensorInfoYear(sensor_info){
+function loadSensorInfo(sensor_info){
     return{
-        type: types.LOAD_SENSOR_INFO_YEAR,
+        type: types.LOAD_SENSOR_INFO,
-        sensor_info
-    }
-}
-
-function loadSensorInfoMonth(sensor_info){
-    return{
-        type: types.LOAD_SENSOR_INFO_MONTH,
         sensor_info
     }
 }
@@ -49,15 +42,9 @@ function fetchingList(){
     }
 }
 
-function fetchingInfoYear(){
+function fetchingInfo(){
     return {
-        type: types.FETCHING_INFO_YEAR
+        type: types.FETCHING_INFO
-    }
-}
-
-function fetchingInfoMonth(){
-    return {
-        type: types.FETCHING_INFO_MONTH
     }
 }
 
@@ -83,11 +70,11 @@ export function fetchSensorList(){
 
 export function fetchSensorInfoYear(location, year){
     return (dispatch) => {
-        dispatch(fetchingInfoYear());
+        dispatch(fetchingInfo());
         return fetch(`/api/sensor/${location}/${year}`)
             .then(response => response.json())
             .then(json => {
-                dispatch(loadSensorInfoYear(json));
+                dispatch(loadSensorInfo(json));
             })
             .catch(error => {
                 console.log(error);
@@ -97,11 +84,11 @@ export function fetchSensorInfoYear(location, year){
 
 export function fetchSensorInfoMonth(location, year, month){
     return (dispatch) => {
-        dispatch(fetchingInfoMonth());
+        dispatch(fetchingInfo());
         return fetch(`/api/sensor/${location}/${year}/${month}`)
             .then(response => response.json())
             .then(json => {
-                dispatch(loadSensorInfoMonth(json));
+                dispatch(loadSensorInfo(json));
             })
             .catch(error => {
                 console.log(error);
@@ -119,7 +106,6 @@ export function fetchUniqueDates(location){
                 if(json.length > 0){
                     let year = json[0].year;
                     let month = json[0].months[0].monthname;
-                    dispatch(fetchSensorInfoYear(location, year));
                     dispatch(fetchSensorInfoMonth(location, year, month));
                 }
             })

client/js/redux/constants/sensor.js

@@ -1,13 +1,11 @@
 //constants
 export const LOAD_SENSOR_LIST = 'LOAD_SENSOR_LIST';
-export const LOAD_SENSOR_INFO_YEAR = 'LOAD_SENSOR_INFO_YEAR';
+export const LOAD_SENSOR_INFO = 'LOAD_SENSOR_INFO';
-export const LOAD_SENSOR_INFO_MONTH = 'LOAD_SENSOR_INFO_MONTH';
 export const LOAD_UNIQUE_DATES = 'LOAD_UNIQUE_DATES';
 
 //fetching
 export const FETCHING_LIST = 'FETCHING_LIST';
-export const FETCHING_INFO_YEAR = 'FETCHING_INFO_YEAR';
+export const FETCHING_INFO = 'FETCHING_INFO_YEAR';
-export const FETCHING_INFO_MONTH = 'FETCHING_INFO_MONTH';
 export const FETCHING_UNIQUE_DATES = 'FETCHING_UNIQUE_DATES';
 
 //indexes

client/js/redux/reducers/sensor.js

@@ -4,21 +4,18 @@ import * as types from '../constants/sensor';
 //defaults -
 const defaultState = {
     list : [],
-    infoMonth: [],
+    info: [],
-    infoYear: [],
     uniqueDates: {},
     
     selectedYearIndex: 0,
     selectedMonthIndex: 0,
     
     fetchingList: false,
-    fetchingInfoMonth: false,
+    fetchingInfo: false,
-    fetchingInfoYear: false,
     fetchingUniqueDates: false,
     
     fetchedList: false,
-    fetchedInfoMonth: false,
+    fetchedInfo: false,
-    fetchedInfoYear: false,
     fetchedUniqueDates: false
 };
 
@@ -31,15 +28,10 @@ export default function app(state = defaultState, action) {
                 fetchingList: true,
                 fetchedList: false
             });
-        case types.FETCHING_INFO_MONTH:
+        case types.FETCHING_INFO:
             return Object.assign({}, state, {
-                fetchingInfoMonth: true,
+                fetchingInfo: true,
-                fetchedInfoMonth: false
+                fetchedInfo: false
-            });
-        case types.FETCHING_INFO_YEAR:
-            return Object.assign({}, state, {
-               fetchingInfoYear: true,
-               fetchedInfoYear: false
             });
         case types:FETCHING_UNIQUE_DATES:
             return Object.assign({}, state, {
@@ -54,17 +46,11 @@ export default function app(state = defaultState, action) {
                fetchingList: false,
                fetchedList: true
             });
-        case types.LOAD_SENSOR_INFO_MONTH:
+        case types.LOAD_SENSOR_INFO:
             return Object.assign({}, state, {
-               infoMonth: action.sensor_info,
+               info: action.sensor_info,
-               fetchingInfoMonth: false,
+               fetchingInfo: false,
-               fetchedInfoMonth: true
+               fetchedInfo: true
-            });
-        case types.LOAD_SENSOR_INFO_YEAR:
-            return Object.assign({}, state, {
-                infoYear: action.sensor_info,
-                fetchingInfoYear: false,
-                fetchedInfoYear: true
             });
         case types.LOAD_UNIQUE_DATES:
             return Object.assign({}, state, {

package.json

@@ -48,10 +48,12 @@
     "node-sass": "^3.8.0",
     "postcss-loader": "^0.13.0",
     "react": "^15.3.0",
+    "react-addons-transition-group": "^15.3.1",
     "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",