diff --git a/static/index.html b/static/index.html index 012ef38..25e86b5 100644 --- a/static/index.html +++ b/static/index.html @@ -20,6 +20,22 @@ align-items: center; gap: 20px 20px; } + canvas { + margin-bottom: 10px; + } + a.share { + font-family: sans-serif; + color: #000; + background-color: #ccc; + border: 1px solid #bbb; + border-radius: 4px; + padding: 6px 12px; + cursor: pointer; + text-decoration: none; + } + a.share:hover { + background-color: #aaa; + } 💩📈 @@ -41,9 +57,11 @@
+ Share
+ Share
diff --git a/static/poopGraph.js b/static/poopGraph.js index bd8f63b..addbcec 100644 --- a/static/poopGraph.js +++ b/static/poopGraph.js @@ -133,6 +133,17 @@ function maxExcludingOmicron(data, start, end) { return secondMax; } +function updateShareLink(chart, link) { + const ctx = chart.canvas.getContext('2d'); + ctx.save(); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'white'; + ctx.fillRect(0, 0, chart.width, chart.height); + ctx.restore(); + link.href = chart.canvas.toDataURL(); + chart.update(); +} + function plot(data) { const northData = extractWithErrorBars(data, 'Northern'); const southData = extractWithErrorBars(data, 'Southern'); @@ -329,4 +340,12 @@ function plot(data) { cutOmicronInput.addEventListener('change', (e) => { update(); }); + const northShare = document.getElementById('northShare'); + northShare.addEventListener('click', () => { + updateShareLink(northChart, northShare); + }); + const southShare = document.getElementById('southShare'); + southShare.addEventListener('click', () => { + updateShareLink(southChart, southShare); + }); }