From 7b9b9bdcd347c43dc9e2bef50f6bd20a99b99814 Mon Sep 17 00:00:00 2001
From: Alex Selimov <alex@alexselimov.com>
Date: Mon, 11 May 2026 21:06:21 -0400
Subject: [PATCH] Add text labels to heat map

---
 assets/css/heatmap.css     |  4 ++++
 assets/js/build_heatmap.js | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/assets/css/heatmap.css b/assets/css/heatmap.css
index 9fcc765..c00329f 100644
--- a/assets/css/heatmap.css
+++ b/assets/css/heatmap.css
@@ -4,3 +4,7 @@
     --color-mid: #2E86C1;
     --color-high: #1A5276
 }
+
+#heatmap text {
+    font-family: inherit;
+}
diff --git a/assets/js/build_heatmap.js b/assets/js/build_heatmap.js
index 549374d..1748238 100644
--- a/assets/js/build_heatmap.js
+++ b/assets/js/build_heatmap.js
@@ -46,6 +46,18 @@ export function render(weeks, counts) {
   svg.setAttribute("width", weeks.length * SHIFT + 30);
   svg.setAttribute("height", SHIFT * 7 + 20);
 
+  // Place the labels first
+  ["Mon", "Wed", "Fri"].forEach((label, i) => {
+    const dayLabel = document.createElementNS(svgNS, "text");
+    dayLabel.setAttribute("x", 0);
+    dayLabel.setAttribute("y", (2 * i + 1) * SHIFT + 0.75 * CELL);
+    dayLabel.setAttribute("font-size", 12);
+
+    const text = document.createTextNode(label);
+    dayLabel.appendChild(text);
+    svg.appendChild(dayLabel);
+  });
+
   weeks.forEach((week, col) => {
     week.forEach((day, row) => {
       if (day === null) {