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