From: Holger Jeromin <h.jeromin@beckhoff.com>
Date: Fri, 21 Mar 2025 08:41:26 +0000 (+0100)
Subject: Change heatmap color to sqrt from 0 to max changes
X-Git-Tag: live~85^2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/413fcf7ac38231f09d636b7a4f47c06efec9b847

Change heatmap color to sqrt from 0 to max changes
---

diff --git a/app/assets/javascripts/heatmap.js b/app/assets/javascripts/heatmap.js
index 572b621a4..9c8d65cf4 100644
--- a/app/assets/javascripts/heatmap.js
+++ b/app/assets/javascripts/heatmap.js
@@ -11,10 +11,12 @@ document.addEventListener("DOMContentLoaded", () => {
     return;
   }
 
+  /** @type {{date: string; max_id: number; total_changes: number}[]} */
   const heatmapData = heatmapElement.dataset.heatmap ? JSON.parse(heatmapElement.dataset.heatmap) : [];
   const displayName = heatmapElement.dataset.displayName;
   const colorScheme = document.documentElement.getAttribute("data-bs-theme") ?? "auto";
-  const rangeColors = ["#14432a", "#166b34", "#37a446", "#4dd05a"];
+  const rangeColorsDark = ["#14432a", "#4dd05a"];
+  const rangeColorsLight = ["#4dd05a", "#14432a"];
   const startDate = new Date(Date.now() - (365 * 24 * 60 * 60 * 1000));
   const monthNames = OSM.i18n.t("date.abbr_month_names");
 
@@ -59,9 +61,9 @@ document.addEventListener("DOMContentLoaded", () => {
       },
       scale: {
         color: {
-          type: "threshold",
-          range: currentTheme === "dark" ? rangeColors : Array.from(rangeColors).reverse(),
-          domain: [10, 20, 30, 40]
+          type: "sqrt",
+          range: currentTheme === "dark" ? rangeColorsDark : rangeColorsLight,
+          domain: [0, Math.max(0, ...heatmapData.map(d => d.total_changes))]
         }
       }
     }, [