feat: complete plotusers Plotly chart template

sspickle · sspickle · commit ee80317a190d · 2026-05-21T04:30:43.000-04:00
diff --git a/ide/templates/plotusers.html b/ide/templates/plotusers.html
@@ -1,16 +1,53 @@
 <!DOCTYPE html>
 <html>
-<head><title>Web VPython Users</title></head>
+<head>
+  <meta charset="utf-8">
+  <title>Web VPython Users</title>
+  <style>
+    body { font-family: sans-serif; margin: 20px; }
+    #chart { width: 100%; height: 600px; }
+    .no-data { color: #888; font-style: italic; margin-top: 40px; }
+  </style>
+</head>
 <body>
-<script src="/package/plotlyVP7.min.js"></script>
-{% if no_data %}
-<p>No data yet — run the migration script first.</p>
-{% else %}
-<div id="chart"></div>
-<script>
-const points = {{ points | tojson }};
-const updated = {{ updated | tojson }};
-</script>
-{% endif %}
+  <script src="/package/plotlyVP7.min.js"></script>
+
+  {% if no_data %}
+  <p class="no-data">No data yet — run <code>buildUserHistory.py</code> first.</p>
+  {% else %}
+  <div id="chart"></div>
+  <script>
+    const points = {{ points | tojson }};
+    const updated = {{ updated | tojson }};
+
+    // Convert 'YYYY-MM' to decimal year, e.g. '2026-05' → 2026.333
+    function toDecimalYear(monthStr) {
+      const [year, month] = monthStr.split('-').map(Number);
+      return year + (month - 1) / 12;
+    }
+
+    const xs = points.map(p => toDecimalYear(p.month));
+    const ys = points.map(p => p.count);
+
+    const lastPoint = points[points.length - 1];
+    const formattedDate = updated ? updated.replace(/-/g, '/') : '';
+    const formattedCount = lastPoint.count.toLocaleString();
+    const title = `As of ${formattedDate} there were ${formattedCount} Web VPython accounts.`;
+
+    Plotly.newPlot('chart', [{
+      x: xs,
+      y: ys,
+      mode: 'lines+markers',
+      type: 'scatter',
+      marker: { color: 'red', size: 4 },
+      line: { color: 'red', width: 1 }
+    }], {
+      title: title,
+      xaxis: { title: 'Year' },
+      yaxis: { title: 'Web VPython accounts' },
+      margin: { t: 60 }
+    });
+  </script>
+  {% endif %}
 </body>
 </html>
