diff --git a/client/assets/scss/Content.scss b/client/assets/scss/Content.scss index fa8132f..9c41fdf 100644 --- a/client/assets/scss/Content.scss +++ b/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; } diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss index 25b126c..7095df4 100644 --- a/client/assets/scss/main.scss +++ b/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; diff --git a/client/js/components/sensors/SensorInfo.css b/client/js/components/sensors/SensorInfo.css new file mode 100644 index 0000000..fa108b7 --- /dev/null +++ b/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 */ diff --git a/client/js/components/sensors/SensorInfo.css.map b/client/js/components/sensors/SensorInfo.css.map new file mode 100644 index 0000000..fdb5015 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/client/js/components/sensors/SensorInfo.js b/client/js/components/sensors/SensorInfo.js index 2f8663e..7265edb 100644 --- a/client/js/components/sensors/SensorInfo.js +++ b/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, - Line, - XAxis, - YAxis, - CartesianGrid, - Tooltip, - Legend + Options, + Data } -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 ( @@ -56,54 +62,37 @@ 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({ - name: d.day, - max: d.maxtemp, - min: d.mintemp - }); + let label = `${d.month}/${d.day}`; + temp.labels.push(label); + temp.datasets[0].data.push(d.maxtemp); + temp.datasets[1].data.push(d.mintemp); } - - return filteredData; + + return temp; } - + render() { let sensor = this.props.sensor; let data = this.filterData(sensor.info); - + return (
-
- - - -
-
- {sensor.fetchedInfo ? - - - - - - - - - - : } -
+ {sensor.fetchedUniqueDates ? +
+ + + +
+ : } + + {sensor.fetchedUniqueDates ? : null}
); } diff --git a/client/js/components/sensors/SensorInfo.scss b/client/js/components/sensors/SensorInfo.scss index 6b3016c..ce6f49c 100644 --- a/client/js/components/sensors/SensorInfo.scss +++ b/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; - justify-content: center; - } - - .recharts-wrapper{ - flex: 1; + margin-left: auto; + margin-right: auto; + margin-bottom: 1em; + select+select{ + margin-left: 5px; + } } } \ No newline at end of file diff --git a/client/js/components/sensors/chartOptions.js b/client/js/components/sensors/chartOptions.js new file mode 100644 index 0000000..42d1062 --- /dev/null +++ b/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: [] + }] +}; \ No newline at end of file diff --git a/client/js/redux/reducers/sensor.js b/client/js/redux/reducers/sensor.js index 7fbfaa2..bb32411 100644 --- a/client/js/redux/reducers/sensor.js +++ b/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 diff --git a/package.json b/package.json index ef7fd3b..501ff0d 100644 --- a/package.json +++ b/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",