caveman/gatherer/assets/hour_graphs.js

28 lines
1.1 KiB
JavaScript

var W = 200;
var H = 25;
var titleEls = document.getElementsByClassName("title");
for(var i = 0; i < titleEls.length; i++) {
var titleEl = titleEls[i];
var hours = titleEl.getAttribute("data-hours")
.split(" ")
.filter(function(s) { return s != ""; })
.map(function(s) { return parseInt(s, 10); });
let max = Math.max.apply(Math, hours);
var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="';
svg += [0, 0, W, H].join(" ");
svg += '" preserveAspectRatio="none" width="100%" height="100%">';
svg += '<rect x="0" y="0" width="' + W + '" height="' + H + '" fill="#484B90"/>';
svg += '<path d="M 0 '+H+' L ';
svg += hours.map(function(count, j) {
var x = W * j / (hours.length - 1);
var y = H * (1 - count / max);
return [x, y].join(",");
}).join(" L ");
svg += ' L '+W+','+H+' z" stroke="#5582E0" stroke-width="1.5" stroke-linejoin="round" fill="#5582E0"/>';
svg += '</svg>';
titleEl.style.background = "url('data:image/svg+xml," + encodeURIComponent(svg) + "') no-repeat";
}