Merge 0eaba55 into dba64ca

app/assets/javascripts/time_series.js

@@ -0,0 +1,200 @@
+function d3TimeSeries(selector, data, title, metric_name) {
+
+  // Add the title
+  var wrapper_element = document.querySelectorAll(selector)[0];
+
+  var title_element = document.createElement('h4');
+  title_element.classList.add("chart-title");
+  title_element.textContent = title;
+
+  wrapper_element.insertBefore(title_element, wrapper_element.firstChild);
+
+  data = data.map(function(d, i) {
+    return {key: new Date(d[0]), values: d[1]};
+  });
+
+  var width = 600;
+  var barWidth = 5;
+  var height = 100;
+  var margin = { top: 20, right: 30, bottom: 100, left: 50 };
+  var viewPortWidth = margin.left + width + margin.right;
+  var viewPortHeight = margin.top + height + margin.bottom;
+
+  var maxYValue = d3.max(data, function(datum) { return datum.values; });
+
+  var x = d3.time.scale()
+    .domain(
+      d3.extent(data, function(datum) { return datum.key; })
+    )
+    .range([0, width]);
+
+  var y = d3.scale
+    .linear()
+    .domain([0, maxYValue])
+    .rangeRound([height, 0]);
+
+  var bisectDate = d3.bisector(function(d) { return d.key; }).left
+
+  var yTickCount;
+  if (maxYValue < 3) {
+    yTickCount = Math.floor(maxYValue);
+  } else {
+    yTickCount = 3;
+  }
+
+  var yAxis = d3.svg.axis()
+    .scale(y)
+    .ticks(yTickCount)
+    .tickFormat(d3.format("s"))
+    .tickPadding(8)
+    .orient("left");
+
+  var xTickCount,
+      xDomainMonths = d3.time.months(x.domain()[0], x.domain()[1]).length;
+  if (xDomainMonths < 9) {
+    xTickCount = 2;
+  } else {
+    xTickCount = (d3.time.months, 10);
+  }
+
+  var xAxisDateFormats = d3.time.format.multi([
+      ["%_d %b", function(d) { return d.getDate() != 1; }],
+      ["%b", function(d) { return d.getMonth(); }],
+      ["%Y", function() { return true; }]
+  ]);
+
+  var xAxis = d3.svg.axis()
+    .scale(x)
+    .ticks(xTickCount)
+    .tickFormat(xAxisDateFormats)
+    .tickPadding(8);
+
+  var focusCallout = d3.select(selector)
+        .append("div")
+        .attr("class", "chart-callout")
+        .append("h5"),
+      focusCalloutValue = focusCallout.append("span")
+        .attr("class", "chart-callout-heading"),
+      focusCalloutDate = focusCallout.append("span")
+        .attr("class", "chart-callout-subheading");
+
+  // add the canvas to the DOM
+  var chart = d3.select(selector)
+    .attr("class", "chart chart-with-callout")
+    .append("svg:svg")
+    .attr("width", "100%")
+    .attr("height", "100%")
+    .attr("viewBox", "0 0 " + viewPortWidth + " " + viewPortHeight )
+    .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  var areaValues = d3.svg.area()
+    .x(function(d) { return x(d.key); })
+    .y0(height)
+    .y1(function(d) { return y(d.values); })
+    .interpolate("monotone");
+
+  var lineValues = d3.svg.line()
+    .x(function(d) { return x(d.key); })
+    .y(function(d) { return y(d.values); })
+    .interpolate("monotone");
+
+  chart.append("g")
+    .attr("class", "x-axis")
+    .attr("transform", "translate(0, " + (height + 8) + ")")
+    .call(xAxis);
+
+  chart.append("g")
+    .attr("class", "y-axis")
+    .attr("transform", "translate(-8, 0)")
+    .call(yAxis);
+
+  chart.append("line")
+    .attr("class", "x-axis-baseline")
+    .attr("x1", 0)
+    .attr("y1", height)
+    .attr("x2", width)
+    .attr("y2", height);
+
+  chart.append("svg:path")
+    .attr("d", areaValues(data))
+    .attr("class", "chart-area");
+
+  // Clip the line a y(0) so 0 values are more prominent
+  chart.append("clipPath")
+    .attr("id", "clip-above")
+    .append("rect")
+    .attr("width", width)
+    .attr("height", y(0) - 1);
+
+  chart.append("clipPath")
+    .attr("id", "clip-below")
+    .append("rect")
+    .attr("y", y(0))
+    .attr("width", width)
+    .attr("height", height);
+
+  chart.selectAll(".chart-line")
+    .data(["above", "below"])
+    .enter()
+    .append("path")
+    .attr("class", function(d) { return "chart-line chart-clipping-" + d; })
+    .attr("clip-path", function(d) { return "url(#clip-" + d + ")"; })
+    .datum(data)
+    .attr("d", lineValues);
+
+  var focus = chart.append("g")
+    .attr("class", "focus");
+
+  focus.append("circle")
+    .attr("r", 5);
+
+  focus.append("text")
+    .attr("x", 9)
+    .attr("dy", -10);
+
+  focusDefault();
+
+  chart.append("rect")
+    .attr("class", "chart-overlay")
+    .attr("width", width)
+    .attr("height", height)
+    .on("mouseout", focusDefault)
+    .on("mousemove", mousemove);
+
+  function focusDefault() {
+    var finalPoint = data[data.length - 1],
+        focusDefaultPosition = {
+          x: x(finalPoint.key),
+          y: y(finalPoint.values)
+        };
+
+    focus.attr("transform", "translate(" + focusDefaultPosition.x + "," + focusDefaultPosition.y + ")");
+    focus.select("text").text(finalPoint.values);
+
+    setCalloutText(finalPoint);
+  }
+
+  function setCalloutText(point) {
+    var weekEnd = d3.time.week.offset(point.key, 1),
+        weekStartFormat = d3.time.format("%d %b"),
+        weekEndFormat = d3.time.format("%d %b %Y"),
+        dateSpan = weekStartFormat(point.key) + " – " + weekEndFormat(weekEnd);
+
+    focusCalloutValue.text(point.values + " " + metric_name);
+    focusCalloutDate.text(dateSpan);
+  }
+
+  function mousemove() {
+    var x0 = x.invert(d3.mouse(this)[0]),
+    i = bisectDate(data, x0, 1),
+    d0 = data[i - 1],
+    d1 = data[i],
+    d = x0 - d0.date > d1.date - x0 ? d1 : d0,
+    yValue = height - y(d.values);
+    focus.attr("transform", "translate(" + x(d.key) + "," + y(d.values) + ")");
+    focus.select("text").text(d.values);
+
+    setCalloutText(d);
+  }
+}

app/assets/stylesheets/responsive/_statistics_layout.scss

@@ -0,0 +1,82 @@
+/* Layout for statistics page */
+.public-body-ranking {
+  margin-bottom: 40px;
+}
+
+.public-body-ranking-title {
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+
+.public-body-ranking table {
+  margin-top: 20px;
+  margin-left: 30px;
+}
+
+.public-body-ranking td, th {
+  border: 0px;
+  padding: 5px;
+  padding-right: 20px;
+}
+
+.public-body-ranking td.statistic {
+  text-align: center;
+}
+
+.leaderboard-block {
+  margin: 0 0 4em;
+  @include respond-min( 35em ) {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.leaderboard-item {
+  @include respond-min( 35em ) {
+    width: 45%;
+  }
+}
+
+.leaderboard-people {
+  padding: 0;
+}
+
+.leaderboard-person {
+  margin: 0 0 1em;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  img,
+  .leaderboard-person-initial {
+    margin: 0 1rem 0 0;
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .u-name {
+    font-size: 1.125em;
+    margin: 0 0 .5em;
+  }
+}
+
+.leaderboard-person-initial {
+  padding: .6rem;
+  font-size: 1.5em;
+}
+
+a.leaderboard-person-details {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  p {
+    margin: 0;
+  }
+}
+
+.leaderboard-count {
+  margin: 0;
+  font-size: 1.125em;
+  padding: 0 0 1em 1em;
+}

app/assets/stylesheets/responsive/_public_body_stats_style.scss → app/assets/stylesheets/responsive/_statistics_style.scss

@@ -1,4 +1,4 @@
-/* Style for public body stats page */
+/* Style for statistics page */
 .public-body-ranking .axisLabels {
   /* Justification for using !important here: the axis label color is
   set in the style attribute in Flot's Javascript to the same
@@ -9,3 +9,12 @@
   the axes black rather than transparent grey for the moment: */
   color: #000 !important;
 }
+
+.leaderboard-people {
+  list-style: none;
+}
+
+.leaderboard-person-initial {
+  text-align: center;
+  background: lighten(desaturate(#2688dc, 50), 40);
+}