mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-10 18:02:51 +00:00
Code Issues Releases Wiki Activity

almost finished with chart

Browse Source
This commit is contained in:
mgerb42
2016-09-16 19:02:38 +00:00
parent 922e3c9cef
commit 5e5db2698d
9 changed files with 113 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/assets/scss/Content.scss
View File

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

13
client/assets/scss/main.scss
View File

@@ -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;

15
client/js/components/sensors/SensorInfo.css Normal file
View File

@@ -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 */

7
client/js/components/sensors/SensorInfo.css.map Normal file
View File

@@ -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"
}

83
client/js/components/sensors/SensorInfo.js
View File

@@ -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 (
<option key={index} value={index}>{date.year}</option>
@@ -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 (
<div class="SensorInfo">
<div class="selector-row">
<select onChange={(e) => {this.onChange(e, 'year')}}>
{sensor.fetchedUniqueDates
? sensor.uniqueDates.map(this.loadYearOptions)
: null
}
</select>
<select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
{sensor.fetchedUniqueDates
? sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)
: null
}
</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>
{sensor.fetchedUniqueDates ?
<div class="selector-row">
<select onChange={(e) => {this.onChange(e, 'year')}}>
{sensor.uniqueDates.map(this.loadYearOptions)}
</select>
<select onChange={(e) => {this.onChange(e, 'month')}} value={sensor.selectedMonthIndex}>
{sensor.uniqueDates[sensor.selectedYearIndex].months.map(this.loadMonthOptions)}
</select>
</div>
: <Loading/>}
{sensor.fetchedUniqueDates ? <LineChart data={data} options={Options}/> : null}
</div>
);
}

17
client/js/components/sensors/SensorInfo.scss
View File

@@ -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;
}
}
}

30
client/js/components/sensors/chartOptions.js Normal file
View File

@@ -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: []
}]
};

2
client/js/redux/reducers/sensor.js
View File

@@ -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