Add buttons to open shareable data URLs

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;
+      }
     </style>
     <title>💩📈</title>
   </head>
@@ -41,9 +57,11 @@
     </div>
     <div class="chart">
       <canvas id="northCanvas"></canvas>
+      <a class="share" id="northShare" href="about:blank" target="_blank">Share</a>
     </div>
     <div class="chart">
       <canvas id="southCanvas"></canvas>
+      <a class="share" id="southShare" href="about:blank" target="_blank">Share</a>
     </div>
     <script src="poopGraph.js"></script>
     <div>

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