Skip to content

Commit

Permalink
Added realistic static data, final updates for demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jscottsf
jscottsf committed Oct 12, 2016
1 parent 2de25b6 commit 32e7288
Show file tree
Hide file tree
Showing 11 changed files with 517 additions and 525 deletions.
752 changes: 376 additions & 376 deletions dist/public/client/main.js
View file

Large diffs are not rendered by default.

30 changes: 21 additions & 9 deletions src/client/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="container">

<!-- Reserve Name -->
<a class="navbar-brand" href="#"><span class="hidden-sm-down">Blue Oak Ranch Reserve </span><i class="fa fa-external-link" aria-hidden="true"></i></a>
<a class="navbar-brand" href="http://www.blueoakranchreserve.org/" target="_blank"><span class="hidden-sm-down">Blue Oak Ranch Reserve </span><i class="fa fa-external-link" aria-hidden="true"></i></a>

<!-- Nav Toolbar -->
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Navigation toolbar">
Expand Down Expand Up @@ -44,26 +44,29 @@
<img class="img-rounded img-profile pull-lg-right" src="./assets/images/blue-oak-ws.jpg">
</div>
</div>

<!-- Profile Info -->
<div class="col-sm-12 col-lg-8 flex-col">
<div class="flex-1 flex-col">
<div class="flex-1-cell flex-col cell-align-bottom" style="border-left: 1px solid #e1e1e1; padding-left: 1rem;">
<p>5:45 PM PST UTC -8 hours</p>
<p>5:45 PM PST <em>(UTC -8 hours)</em></p>
<h1>Blue Oak Ranch <small class="text-muted">Weather Station</small></h1>
<p>Coordinates: 39.718390°, -123.652883° <i class="fa fa-map-marker" aria-hidden="true"></i><br />
<!-- TODO: Fix coordinates and map -->
<p>Coordinates: 37.381666°, -121.73638° <i class="fa fa-map-marker" aria-hidden="true"></i><br />
Elevation: 575 m</p>

<!-- Links -->
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-photo" aria-hidden="true"></i> Photos</a>
<a class="nav-link" href="http://www.wrcc.dri.edu/cgi-bin/rawMAIN.pl?caucbo" target="_blank"><i class="fa fa-photo" aria-hidden="true"></i> Photos</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-external-link" aria-hidden="true"></i> Website</a>
<a class="nav-link" href="http://sensor.berkeley.edu/index_BORR.html" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i> Sensor database</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact</a>
<a class="nav-link" href="mailto:[email protected]"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact weather station team</a>
</li>
</ul>
</div>
Expand All @@ -78,7 +81,7 @@
<div class="container">

<div class="row row-md">
<map-tile :lat="39.718" :lng="-123.652" title="Blue Oak Ranch Weather Station"></map-tile>
<map-tile :lat="37.381666" :lng="-121.73638" title="Blue Oak Ranch Weather Station"></map-tile>
<air-temp-tile></air-temp-tile>
<notification-tile></notification-tile>
</div>
Expand Down Expand Up @@ -120,7 +123,7 @@

<div class="col-xs-12">
<div class="text-xs-center">
<small>Problems viewing this page? Email&nbsp;<a href="mailto:[email protected]">[email protected]</a></small>
<small>Problems viewing this page? Email&nbsp;<a href="mailto:[email protected]">[email protected]</a></small>
</div>
</div>

Expand Down Expand Up @@ -240,6 +243,15 @@ body {
.tile table {
margin-bottom: 0;
}
.tile h1,
.tile h2,
.tile h3,
.tile .h1,
.tile .h2,
.tile .h3 {
/* OPTIONAL */
/*text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);*/
}
.tile .text-muted {
color: rgba(255, 255, 255, 0.8) !important;
}
Expand Down
179 changes: 74 additions & 105 deletions src/client/components/TimeMachine.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,206 +23,175 @@
<script>
// TODO: Finish
// TODO: Make colors props?
// TODO: Break this into separate components
// import HighchartsDendro from '../../lib/highcharts-dendro'
import Highcharts from 'highcharts'
// TODO: Sync'd charts to be implemented later
// import HighchartsDendro from '../lib/highcharts-dendro'
// HighchartsDendro(Highcharts)
import Highcharts from 'highcharts'
// function syncExtremes(e) {
// let thisChart = this.chart;
// // Prevent feedback loop
// if (e.trigger !== 'syncExtremes') {
// Highcharts.each(Highcharts.charts, function (chart) {
// if (chart !== thisChart) {
// if (chart.xAxis[0].setExtremes) { // It is null while updating
// chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
// }
// }
// });
// }
// }
export default {
data () {
let categories = [
'9/28', '9/29', '9/30', '10/1', '10/2', '10/3', '10/4',
'10/5', '10/6', '10/7', '10/8', '10/9', '10/10', '10/11'
]
return {
// Air temp
airTempOpts: {
chart: {
height: 300
height: 350
},
colors: ['#509ebf'],
legend: {
enabled: false
},
colors: ['#999', '#5cb6dc', '#5cdcbf'],
title: {
text: 'Air Temperature'
text: 'Air Temperature (°C)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// gridLineColor: 'rgba(255, 255, 255, 0.4)',
// labels: {
// style: {
// color: 'rgba(255, 255, 255, 0.4)'
// }
// },
// lineColor: 'rgba(255, 255, 255, 0.4)'
categories: categories
},
yAxis: {
// gridLineColor: '#fff',
// labels: {
// style: {
// color: '#fff'
// }
// },
title: {
// style: {
// color: '#fff'
// },
text: null
}
},
series: [{
name: 'Sample',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
name: 'Avg',
data: [
22.0, 18.2, 12.2, 12.3, 10.5, 10.5, 11.4, 11.2, 14.2, 17.3, 19.9, 19.6, 15.9, 12.8
]
}, {
name: '2 m',
data: [
21.6, 17.9, 12.0, 12.1, 10.3, 10.4, 11.2, 11.0, 13.9, 17.1, 19.6, 19.3, 15.6, 12.5
]
}, {
name: '10 m',
data: [
21.9, 18.2, 11.9, 12.0, 10.3, 10.6, 11.2, 11.2, 14.4, 17.7, 20.2, 19.8, 15.9, 11.7
]
}]
},
// Soil temp
soilTempOpts: {
chart: {
height: 300
height: 350
},
colors: ['#50bfa6'],
legend: {
enabled: false
},
colors: ['#5cb6dc', '#5cdcbf', '#aedc5c', '#999'],
title: {
text: 'Soil Temperature'
text: 'Soil Temperature (°C)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// gridLineColor: 'rgba(255, 255, 255, 0.4)',
// labels: {
// style: {
// color: 'rgba(255, 255, 255, 0.4)'
// }
// },
// lineColor: 'rgba(255, 255, 255, 0.4)'
categories: categories
},
yAxis: {
// gridLineColor: '#fff',
// labels: {
// style: {
// color: '#fff'
// }
// },
title: {
// style: {
// color: '#fff'
// },
text: null
}
},
series: [{
name: 'Sample',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
name: '2 in',
data: [25.3, 24.1, 22.1, 20.8, 19.0, 18.0, 18.5, 18.0, 18.3, 19.1, 20.0, 20.7, 20.7, 20.1]
}, {
name: '4 in',
data: [24.8, 24.1, 22.5, 21.2, 19.7, 18.7, 18.8, 18.5, 18.6, 19.2, 19.9, 20.6, 20.7, 20.1]
}, {
name: '8 in',
data: [24.1, 23.8, 22.7, 21.6, 20.5, 19.5, 19.2, 19.0, 18.9, 19.2, 19.8, 20.3, 20.5, 20.3]
}, {
name: '20 in',
data: [22.9, 23.0, 22.9, 22.4, 21.9, 21.4, 20.8, 20.5, 20.3, 20.2, 20.2, 20.4, 20.6, 20.7]
}]
},
// Wind speed
windSpeedOpts: {
chart: {
height: 300
height: 350
},
colors: ['#9081bf'],
legend: {
enabled: false
},
colors: ['#a695dc', '#dc635c'],
title: {
text: 'Wind Speed'
text: 'Wind Speed (m/s)'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// gridLineColor: 'rgba(255, 255, 255, 0.4)',
// labels: {
// style: {
// color: 'rgba(255, 255, 255, 0.4)'
// }
// },
// lineColor: 'rgba(255, 255, 255, 0.4)'
categories: categories
},
yAxis: {
// gridLineColor: '#fff',
// labels: {
// style: {
// color: '#fff'
// }
// },
title: {
// style: {
// color: '#fff'
// },
text: null
}
},
series: [{
name: 'Sample',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
name: 'Avg',
data: [1.0, 1.0, 1.8, 2.2, 2.2, 0.9, 1.7, 1.7, 1.3, 1.2, 0.9, 1.0, 1.0, 1.3]
}, {
name: 'Gust',
data: [3.3, 3.3, 4.5, 4.6, 5.4, 2.8, 4.8, 4.9, 4.6, 3.1, 3.2, 3.5, 3.6, 3.0]
}]
},
// Solar radiation
solarRadOpts: {
chart: {
height: 300
height: 350
},
colors: ['#bf9650'],
legend: {
enabled: false
},
colors: ['#dcac5c', '#f3f767'],
title: {
text: 'Solar Radiation'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// gridLineColor: 'rgba(255, 255, 255, 0.4)',
// labels: {
// style: {
// color: 'rgba(255, 255, 255, 0.4)'
// }
// },
// lineColor: 'rgba(255, 255, 255, 0.4)'
categories: categories
},
yAxis: {
// gridLineColor: '#fff',
// labels: {
// style: {
// color: '#fff'
// }
// },
title: {
// style: {
// color: '#fff'
// },
text: null
}
},
series: [{
name: 'Sample',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
name: 'Total (W/m2)',
data: [198.4, 197.5, 193.2, 200.4, 135.5, 75.1, 176.9, 205.1, 202.6, 185.0, 200.5, 197.3, 193.0, 233.4]
}, {
name: 'PAR (μmol/m2)',
data: [224.3, 222.8, 221.8, 220.3, 137.6, 83.0, 187.1, 212.1, 211.8, 194.4, 207.4, 204.5, 200.1, 244.4]
}]
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/client/components/tiles/AirTempTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<div class="flex-1 flex-col tile air-temp-tile">

<div class="flex-2-cell flex-col cell-border-bottom cell-align-middle text-xs-center">
<h1 class="display-3">17 <i class="wi wi-celsius"></i></h1>
<h1 class="display-3">14 <i class="wi wi-celsius"></i></h1>
<span class="text-muted">Air Temperature</span>
</div>

<div class="flex-2-cell flex-row">
<div class="flex-2-cell flex-col cell-align-middle text-xs-center bg-darken">
<h2>-5°</h2>
<h2>3.5°</h2>
<span class="text-muted">Seasonal Low</span>
</div>
<div class="flex-2-cell flex-col cell-align-middle text-xs-center bg-lighten">
<h2>28°</h2>
<h2>36.6°</h2>
<span class="text-muted">Seasonal High</span>
</div>
</div>
Expand Down
Loading

0 comments on commit 32e7288

Please sign in to comment.