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 @@
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);
+ });
}