Added ranking rating colour gradient with Chroma.js.

assets/js/250.ts

@@ -1,6 +1,7 @@
 import {parseParam} from './Query';
 import User from './User';
 import Checkbox from './Checkbox';
+import chroma from 'chroma-js';
 
 type S250_static = typeof S250;
 
@@ -15,6 +16,7 @@ class S250 {
         this.constrainDropdownMenuPositions();
 
         // UI stuff.
+        S250.initRatingColourGradient();
         Checkbox.initTristateCheckboxes();
         S250.initChevrons();
 
@@ -309,6 +311,27 @@ class S250 {
         });
     }
 
+    private static initRatingColourGradient() {
+        const grad = chroma.scale(['#d94141', '#cccc3d', '#4cbf56']).domain([0, 60, 100]);
+
+        document.querySelectorAll<HTMLElement>('.rating').forEach(el => {
+            const [pre, post] = /(\D*)(\d+%?)/.exec(el.innerText)!.slice(1);
+
+            // Wrap numeric component in separate element to avoid colouring non-digits.
+            if (pre) {
+                const newEl = document.createElement('span');
+
+                el.innerHTML = pre;
+                newEl.innerHTML = post;
+                el.insertAdjacentElement('beforeend', newEl);
+                el = newEl;
+            }
+
+            el.style.color = grad(parseFloat(el.innerText)).hex();
+            el.style.fontWeight = 'bold';
+        });
+    }
+
     // This is just to save generating superfluous markup.
     static initChevrons() {
         document.querySelectorAll('.more-button > span:last-of-type').forEach(span => {

package.json

@@ -7,6 +7,7 @@
     "@storybook/addon-links": "^6.5.15",
     "@storybook/html": "^6.5.15",
     "@tsconfig/recommended": "^1.0.1",
+    "@types/chroma-js": "^2.4.4",
     "@whitespace/storybook-addon-html": "5.0.0",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
@@ -36,6 +37,7 @@
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --config-dir storybook"
   },
   "dependencies": {
+    "chroma-js": "^2.4.2",
     "dayjs": "^1.10.4",
     "vanilla-lazyload": "^17.3.1"
   }