Skip to content

Commit

Permalink
using base html template, added sorting and background bars to histor…
Browse files Browse the repository at this point in the history 
…y page, added number of outfall locations to history #23
  • Loading branch information
@derekeder
derekeder committed Mar 20, 2014
1 parent 3f81c82 commit d42c531
Show file tree
Hide file tree
Showing 8 changed files with 522 additions and 279 deletions.
3 changes: 2 additions & 1 deletion app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,8 @@ def csos_by_waterway():
@app.route('/history/')
def history():
cso_dates = db.session.query(CSOEvent.date,
func.count(distinct(CSOEvent.segment)))\
func.count(distinct(CSOEvent.segment)),
func.count(CSOEvent.id))\
.group_by(CSOEvent.date)\
.order_by(CSOEvent.date.desc()).all()

Expand Down
40 changes: 39 additions & 1 deletion static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,42 @@ body {
}
}

.nowrap { white-space:nowrap; }
.nowrap { white-space:nowrap; }

/* Tables on Listing Pages */

.listing td {
padding: 0.5em 0;
vertical-align: middle;
}

.bar {
padding: 0.4em 0;
position: relative;
width: 50%;
}

.bar span {
background: #ecf0f1;
border-left: 1px solid #ecf0f1;
border-radius: 3px;
display: block;
font-weight: bold;
height: 100%;
overflow: visible;
}

.bar span strong {
display: block;
font-weight: normal;
padding: 0.3em 0.5em;
}

.listing .bar span strong { padding: 0.2em 0.5em; }

.listing th span {
color: #027BB6;
cursor: pointer;
}

.riverways, .locations { width: 37%;}
155 changes: 155 additions & 0 deletions static/js/jquery.dataTables.min.js
View file

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions static/js/jquery.dataTables.sorting.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"datetime-pre": function ( a ) {
return a.match(/datetime="*([0-9\-\.]+)/)[1];
},

"datetime-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"datetime-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
},

"num-html-pre": function ( a ) {
return parseFloat( a.replace( /<.*?>/g, "" ).replace("$","").replace(",","") );
},

"num-html-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"num-html-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
30 changes: 30 additions & 0 deletions static/js/listing.bars.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
function setBarWidthByCurrency(col_class) {
$('.bar span strong').toNumber();
calculateNumberBars();
$('.bar span strong').formatCurrency({ roundToDecimalPlace:0 });
}

function setBarWidthByNumber(col_class) {
calculateNumberBars(col_class);
}

function calculateNumberBars(col_class)
{
var maxArray = new Array();
$('.' + col_class + '.bar span strong').each(function(){
maxArray.push(parseInt($(this).html()));
});

var maxNumber = Math.max.apply( Math, maxArray );
if (maxNumber > 0)
{
$('.' + col_class + '.bar').each(function(){
$(this).children().width((($(this).children().children().html()/maxNumber) * 100) + '%');
});
}
else {
$('.' + col_class + ' .bar').each(function(){
$(this).children().width('0%');
});
}
}
56 changes: 56 additions & 0 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Is there sewage in the Chicago River?</title>

<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/font-awesome.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/static/css/custom.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/js/html5shiv.js"></script>
<script src="/static/js/respond.min.js"></script>
<![endif]-->

{% block extra_css %}
{% endblock %}
</head>

<body>

<div class="container">
<div class='col-md-10 col-md-offset-1'>

{% block content %}
{% endblock %}

<div class="footer">
<p>An <a href='http://opencityapps.org'>Open City</a> app by Scott Beslow, Derek Eder, Forest Gregg and Eric van Zanten | <a href='https://github.com/open-city/chicago-river-sewage'><i class='icon-github'></i> Pull requests welcome!</a></p>
</div>
</div>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/moment.min.js"></script>

{% block extra_scripts %}
{% endblock %}

<script src="/static/js/analytics_lib.js"></script>

</body>
</html>
133 changes: 55 additions & 78 deletions templates/history.html
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Is there sewage in the Chicago River?</title>

<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/font-awesome.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/static/css/custom.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/static/js/html5shiv.js"></script>
<script src="/static/js/respond.min.js"></script>
<![endif]-->

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<link rel="stylesheet" href="/static/css/leaflet.label.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
<![endif]-->
</head>

<body>

<div class="container">
<div class='col-md-10 col-md-offset-1'>

<h1><a href='/'>Is there sewage in the Chicago River?</a></h1>

<h3>History of combined sewer overflows</h3>

<p>The <a href='http://www.mwrd.org/'>Metropolitan Water Reclamation District of Greater Chicago</a> tracks whenever they release raw sewage in to Chicago area riverways. Since January 1st 2007, raw, untreated sewage has been dumped in to riverways <strong>{{ cso_dates|length }} times</strong>.</p>

<p>These occurrences are referred to as <strong>combined sewer overflow</strong> events, or CSOs.</p>

<table class='table' id='history'>
<thead>
<tr>
<th>Date</th>
<th># riverways affected</th>
</tr>
</thead>
<tbody>
{% for d in cso_dates %}
<tr>
<td>
<a href='/?date={{ d[0].strftime("%m/%d/%Y") }}'>{{ d[0].strftime("%b, %d %Y") }}</a>
</td>
<td>{{d[1]}}</td>
</tr>
{% endfor %}
</tbody>
</table>

<div class="footer">
<p>An <a href='http://opencityapps.org'>Open City</a> app by Scott Beslow, Derek Eder, Forest Gregg and Eric van Zanten | <a href='https://github.com/open-city/chicago-river-sewage'><i class='icon-github'></i> Pull requests welcome!</a></p>
</div>
</div>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/analytics_lib.js"></script>

</body>
</html>
{% extends 'base.html' %}
{% block content %}

<p><a href='/'>&laquo; Is there sewage in the Chicago River?</a></p>

<h3>History of combined sewer overflows</h3>

<p>The <a href='http://www.mwrd.org/'>Metropolitan Water Reclamation District of Greater Chicago</a> tracks whenever they release raw sewage in to Chicago area riverways. Since January 1st 2007, raw, untreated sewage has been dumped in to riverways <strong>{{ cso_dates|length }} times</strong>.</p>

<p>These occurrences are referred to as <strong>combined sewer overflow</strong> events, or CSOs.</p>

<table class='table listing' id='history'>
<thead>
<tr>
<th>Date</th>
<th># riverways affected</th>
<th># sewage outfall locations</th>
</tr>
</thead>
<tbody>
{% for d in cso_dates %}
<tr>
<td>
<a datetime='{{ d[0].strftime("%Y%m%d") }}' href='/?date={{ d[0].strftime("%m/%d/%Y") }}'>{{ d[0].strftime("%b, %d %Y") }}</a>
</td>
<td class='bar riverways'><span style="width:100%;"><strong>{{d[1]}}</strong></span></td>
<td class='bar locations'><span style="width:100%;"><strong>{{d[2]}}</strong></span></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/jquery.dataTables.sorting.js"></script>
<script src="/static/js/listing.bars.js"></script>

<script>
setBarWidthByNumber('riverways');
setBarWidthByNumber('locations');
// initialize datatables
$('#history').dataTable( {
"aaSorting": [ [0,'desc'] ],
"aoColumns": [
{ "sType": "datetime" },
{ "sType": "numeric" },
{ "sType": "numeric" }
],
"bInfo": false,
"bPaginate": false,
"bFilter": false
});
</script>
{% endblock %}
Loading

0 comments on commit d42c531

Please sign in to comment.