app/assets/javascripts/heatmap.js

   1 $(document).on("turbo:frame-load", function () {
   2   const heatmap = $(".heatmap").removeClass("d-none").addClass("d-grid");
   3   const weekInfo = getWeekInfo();
   4   const maxPerDay = heatmap.data("max-per-day");
   5   const weekdayLabels = heatmap.find("[data-weekday]");
   6   let weekColumn = 1;
   7   let previousMonth = null;
   8
   9   for (const day of weekdayLabels) {
  10     const $day = $(day);
  11     const weekday = $day.data("weekday");
  12     if (weekday < weekInfo.firstDay % 7) {
  13       $day.insertAfter(weekdayLabels.last());
  14     }
  15     const weekdayRow = getWeekdayRow(weekday);
  16     if (weekdayRow % 2 === 0) $day.remove();
  17     $day.css("grid-area", weekdayRow + " / 1");
  18   }
  19
  20   for (const day of heatmap.find("[data-date]")) {
  21     const $day = $(day);
  22     const date = new Date($day.data("date"));
  23     if (date.getUTCDay() === weekInfo.firstDay % 7) {
  24       weekColumn++;
  25       const currentMonth = getMonthOfThisWeek(date);
  26       if (previousMonth === null) {
  27         previousMonth = currentMonth;
  28         heatmap.find(`[data-month]:has( ~ [data-month="${previousMonth}"])`).remove();
  29         heatmap.find("[data-month]").first().css("grid-column-start", 2);
  30       }
  31       if (previousMonth % 12 !== currentMonth % 12) {
  32         heatmap.find(`[data-month="${previousMonth}"]`).css("grid-column-end", weekColumn);
  33         previousMonth++;
  34         heatmap.find(`[data-month="${previousMonth}"]`).css("grid-column-start", weekColumn);
  35       }
  36     }
  37     if (weekColumn === 1) {
  38       $day.remove();
  39       continue;
  40     }
  41     const count = $day.data("count") ?? 0;
  42     const tooltipText = getTooltipText(date, count);
  43     $day
  44       .css("grid-area", getWeekdayRow(date.getUTCDay()) + " / " + weekColumn)
  45       .attr("aria-label", tooltipText)
  46       .tooltip({
  47         title: tooltipText,
  48         customClass: "wide",
  49         delay: { show: 0, hide: 0 }
  50       })
  51       .find("span")
  52       .css("opacity", Math.sqrt(count / maxPerDay));
  53   }
  54   heatmap.find(`[data-month="${previousMonth}"] ~ [data-month]`).remove();
  55   heatmap.find("[data-month]").last().css("grid-column-end", weekColumn + 1);
  56
  57   function getMonthOfThisWeek(date) {
  58     const nextDate = new Date(date);
  59     nextDate.setUTCDate(date.getUTCDate() + weekInfo.minimalDays - 1);
  60     return nextDate.getUTCMonth() + 1;
  61   }
  62
  63   function getWeekdayRow(weekday) {
  64     return ((weekday - weekInfo.firstDay + 7) % 7) + 2;
  65   }
  66
  67   function getTooltipText(date, value) {
  68     const localizedDate = OSM.i18n.l("date.formats.heatmap", date);
  69
  70     if (value > 0) {
  71       return OSM.i18n.t("javascripts.heatmap.tooltip.contributions", { count: value, date: localizedDate });
  72     }
  73
  74     return OSM.i18n.t("javascripts.heatmap.tooltip.no_contributions", { date: localizedDate });
  75   }
  76
  77   function getWeekInfo() {
  78     const weekInfo = { firstDay: 1, minimalDays: 4 }; // ISO 8601
  79     const locale = new Intl.Locale(OSM.i18n.locale);
  80     return { ...weekInfo, ...locale.weekInfo, ...locale.getWeekInfo?.() };
  81   }
  82 });