app/assets/javascripts/heatmap.js

   1 //= require d3/dist/d3
   2 //= require cal-heatmap/dist/cal-heatmap
   3 //= require popper
   4 //= require cal-heatmap/dist/plugins/Tooltip
   5
   6 /* global CalHeatmap, Tooltip */
   7 document.addEventListener("DOMContentLoaded", () => {
   8   const heatmapElement = document.querySelector("#cal-heatmap");
   9
  10   if (!heatmapElement) {
  11     return;
  12   }
  13
  14   const heatmapData = heatmapElement.dataset.heatmap ? JSON.parse(heatmapElement.dataset.heatmap) : [];
  15   const displayName = heatmapElement.dataset.displayName;
  16   const colorScheme = document.documentElement.getAttribute("data-bs-theme") ?? "auto";
  17   const rangeColors = ["#14432a", "#166b34", "#37a446", "#4dd05a"];
  18   const startDate = new Date(Date.now() - (365 * 24 * 60 * 60 * 1000));
  19
  20   const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  21
  22   let cal = new CalHeatmap();
  23   let currentTheme = getTheme();
  24
  25   function renderHeatmap() {
  26     cal.destroy();
  27     cal = new CalHeatmap();
  28
  29     cal.paint({
  30       itemSelector: "#cal-heatmap",
  31       theme: currentTheme,
  32       domain: {
  33         type: "month",
  34         gutter: 4,
  35         label: {
  36           text: (timestamp) => new Date(timestamp).toLocaleString(OSM.i18n.locale, { timeZone: "UTC", month: "short" }),
  37           position: "top",
  38           textAlign: "middle"
  39         },
  40         dynamicDimension: true
  41       },
  42       subDomain: {
  43         type: "ghDay",
  44         radius: 2,
  45         width: 11,
  46         height: 11,
  47         gutter: 4
  48       },
  49       date: {
  50         start: startDate
  51       },
  52       range: 13,
  53       data: {
  54         source: heatmapData,
  55         type: "json",
  56         x: "date",
  57         y: "total_changes"
  58       },
  59       scale: {
  60         color: {
  61           type: "threshold",
  62           range: currentTheme === "dark" ? rangeColors : Array.from(rangeColors).reverse(),
  63           domain: [10, 20, 30, 40]
  64         }
  65       }
  66     }, [
  67       [Tooltip, {
  68         text: (date, value) => getTooltipText(date, value)
  69       }]
  70     ]);
  71
  72     cal.on("mouseover", (event, timestamp, value) => {
  73       if (!displayName || !value) return;
  74       if (event.target.parentElement.nodeName === "a") return;
  75
  76       for (const { date, max_id } of heatmapData) {
  77         if (!max_id) continue;
  78         if (timestamp !== Date.parse(date)) continue;
  79
  80         const params = new URLSearchParams({ before: max_id + 1 });
  81         const a = document.createElementNS("http://www.w3.org/2000/svg", "a");
  82         a.setAttribute("href", `/user/${encodeURIComponent(displayName)}/history?${params}`);
  83         $(event.target).wrap(a);
  84         break;
  85       }
  86     });
  87   }
  88
  89   function getTooltipText(date, value) {
  90     const localizedDate = OSM.i18n.l("date.formats.long", date);
  91
  92     if (value > 0) {
  93       return OSM.i18n.t("javascripts.heatmap.tooltip.contributions", { count: value, date: localizedDate });
  94     }
  95
  96     return OSM.i18n.t("javascripts.heatmap.tooltip.no_contributions", { date: localizedDate });
  97   }
  98
  99   function getTheme() {
 100     if (colorScheme === "auto") {
 101       return mediaQuery.matches ? "dark" : "light";
 102     }
 103
 104     return colorScheme;
 105   }
 106
 107   if (colorScheme === "auto") {
 108     mediaQuery.addEventListener("change", (e) => {
 109       currentTheme = e.matches ? "dark" : "light";
 110       renderHeatmap();
 111     });
 112   }
 113
 114   renderHeatmap();
 115 });
 116
 117