From c5ec4a9970fe24d3ee36fb7a86bdc19a2caac393 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Fri, 13 Dec 2024 10:30:16 +0100
Subject: [PATCH] better code coverage colors

---
 web/public/src/index.ts | 44 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/web/public/src/index.ts b/web/public/src/index.ts
index 4547f4f..dc2bd0f 100644
--- a/web/public/src/index.ts
+++ b/web/public/src/index.ts
@@ -1,5 +1,28 @@
 import * as data from "./data.ts";
 
+type Color = { r: number; g: number; b: number };
+
+function lerp(ratio: number, start: number, middle: number, end: number) {
+    if (ratio < 0.5) {
+        return (1 - ratio) * start + ratio * middle;
+    } else {
+        return (1 - ratio) * middle + ratio * end;
+    }
+}
+
+function colorLerp(
+    ratio: number,
+    start: Color,
+    middle: Color,
+    end: Color,
+): Color {
+    return {
+        r: lerp(ratio, start.r, middle.r, end.r),
+        g: lerp(ratio, start.g, middle.g, end.g),
+        b: lerp(ratio, start.b, middle.b, end.b),
+    };
+}
+
 function loadCodeCoverage(
     text: string,
     input: data.CodeCovEntry[],
@@ -17,6 +40,9 @@ function loadCodeCoverage(
     const elements: HTMLElement[] = [];
     let line = 1;
     let col = 1;
+    const maxCovers = entries.map((v) => v.covers).reduce((acc, v) =>
+        acc > v ? acc : v
+    );
     for (let index = 0; index < text.length; ++index) {
         if (text[index] === "\n") {
             col = 1;
@@ -32,11 +58,23 @@ function loadCodeCoverage(
         }
         charEntries[`${line}-${col}`] = entry;
 
-        const color = (ratio: number) =>
-            `rgba(${255 - 255 * ratio}, ${255 * ratio}, 125, 0.5)`;
+        const backgroundColor = (ratio: number) => {
+            const clr = colorLerp(ratio, { r: 42, g: 121, b: 82 }, {
+                r: 247,
+                g: 203,
+                b: 21,
+            }, {
+                r: 167,
+                g: 29,
+                b: 49,
+            });
+            return `rgb(${clr.r}, ${clr.g}, ${clr.b})`;
+        };
 
         const span = document.createElement("span");
-        span.style.backgroundColor = color(Math.min(entry.covers / 25, 1));
+        span.style.backgroundColor = backgroundColor(
+            Math.log10((entry.covers / maxCovers) * 10),
+        );
         span.innerText = text[index];
         span.dataset.covers = entry.covers.toString();
         elements.push(span);