Scatterplot coloring of base releases

scripts/generate-release-statistics.mjs

@@ -216,6 +216,10 @@ export function renderStatisticsPage(statistics) {
                 <canvas id="issue-plot-canvas" role="img" aria-label="Scatter plot of addressed Issue-IDs by release"></canvas>
                 <div id="issue-plot-tooltip" class="issue-plot-tooltip" role="status" hidden></div>
             </div>
+            <div class="issue-plot-legend" aria-label="Dot colors">
+                <span><i class="issue-plot-key issue-plot-key-base"></i>Base release</span>
+                <span><i class="issue-plot-key issue-plot-key-hotfix"></i>Hotfix release</span>
+            </div>
             <p id="issue-plot-summary" class="issue-plot-summary" aria-live="polite"></p>
         </section>
     </main>

test/release-statistics.test.mjs

@@ -63,5 +63,7 @@ test('renders the graph without displaying the legacy release tables', () => {
 
     assert.match(html, /src="js\/statistics\.js"/);
     assert.match(html, /id="issue-plot-canvas"/);
+    assert.match(html, />Base release</);
+    assert.match(html, />Hotfix release</);
     assert.doesNotMatch(html, /class="stats-product"/);
 });

web/js/statistics.js

@@ -75,8 +75,9 @@ function plotColors() {
     return {
         text: styles.getPropertyValue('--text-muted').trim() || '#59636e',
         grid: styles.getPropertyValue('--border').trim() || '#d0d7de',
-        point: styles.getPropertyValue('--link').trim() || '#0969da',
-        hover: styles.getPropertyValue('--focus').trim() || '#bf8700'
+        base: styles.getPropertyValue('--plot-base').trim() || '#2e8b57',
+        hotfix: styles.getPropertyValue('--plot-hotfix').trim() || '#2c7be5',
+        hover: styles.getPropertyValue('--plot-hover').trim() || '#d97706'
     };
 }
 
@@ -181,7 +182,9 @@ function drawPlot() {
         context.beginPath();
         const hovered = point.issueNumber === hoveredPoint?.issueNumber;
         context.arc(point.x, point.y, hovered ? 5 : 3, 0, Math.PI * 2);
-        context.fillStyle = hovered ? colors.hover : colors.point;
+        context.fillStyle = hovered
+            ? colors.hover
+            : (/-h\d+(?:\D|$)/i.test(point.release) ? colors.hotfix : colors.base);
         context.globalAlpha = hovered ? 1 : 0.72;
         context.fill();
     });

web/statistics.html

@@ -41,6 +41,10 @@
                 <canvas id="issue-plot-canvas" role="img" aria-label="Scatter plot of addressed Issue-IDs by release"></canvas>
                 <div id="issue-plot-tooltip" class="issue-plot-tooltip" role="status" hidden></div>
             </div>
+            <div class="issue-plot-legend" aria-label="Dot colors">
+                <span><i class="issue-plot-key issue-plot-key-base"></i>Base release</span>
+                <span><i class="issue-plot-key issue-plot-key-hotfix"></i>Hotfix release</span>
+            </div>
             <p id="issue-plot-summary" class="issue-plot-summary" aria-live="polite"></p>
         </section>
     </main>

web/styles.css

@@ -15,6 +15,9 @@
     --input-bg: #ffffff;
     --button: #388e3c;
     --button-hover: #2e7d32;
+    --plot-base: #2e8b57;
+    --plot-hotfix: #2c7be5;
+    --plot-hover: #d97706;
     --shadow: rgba(20, 35, 50, 0.14);
 }
 
@@ -35,6 +38,9 @@
         --input-bg: #101820;
         --button: #3f9145;
         --button-hover: #4ca653;
+        --plot-base: #56b881;
+        --plot-hotfix: #79b8ff;
+        --plot-hover: #f2a93b;
         --shadow: rgba(0, 0, 0, 0.35);
     }
 }
@@ -359,6 +365,34 @@ li:hover {
     text-align: center;
 }
 
+.issue-plot-legend {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    color: var(--text-muted);
+    font-size: 0.82rem;
+}
+
+.issue-plot-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.issue-plot-key {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+}
+
+.issue-plot-key-base {
+    background: var(--plot-base);
+}
+
+.issue-plot-key-hotfix {
+    background: var(--plot-hotfix);
+}
+
 .stats-product {
     margin-top: 32px;
 }