Localize time units on activity heatmap

options/locale/locale_en-US.ini

@@ -23,6 +23,12 @@ enable_javascript = This website works better with JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Gitea
+contributions = Contributions
+no_contributions = No contributions
+contributions_in_the_last_12_months = Contributions in the last 12 months
+on = On
+less = Less
+more = More
 
 username = Username
 email = Email Address

templates/user/heatmap.tmpl

@@ -1,5 +1,13 @@
 {{if .HeatmapData}}
-	<div id="user-heatmap" data-heatmap-data="{{Json .HeatmapData}}">
+	<div id="user-heatmap"
+		data-locale-contributions="{{.locale.Tr "contributions"}}"
+		data-locale-no_contributions="{{.locale.Tr "no_contributions"}}"
+		data-locale-contributions_in_the_last_12_months="{{.locale.Tr "contributions_in_the_last_12_months"}}"
+		data-locale-on="{{.locale.Tr "on"}}"
+		data-locale-more="{{.locale.Tr "more"}}"
+		data-locale-less="{{.locale.Tr "less"}}"
+		data-heatmap-data="{{Json .HeatmapData}}"
+	>
 		<div slot="loading">
 			<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
 		</div>

web_src/js/components/ActivityHeatmap.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="user-heatmap">
     <div class="total-contributions">
-      {{ sum }} contributions in the last 12 months
+      {{ sum }} {{ locale.contributions_in_the_last_12_months }}
     </div>
     <calendar-heatmap
       :locale="locale"
@@ -25,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    locale: {
+      type: Object,
+      default: () => {},
+    }
   },
   data: () => ({
     colorRange: [
@@ -36,10 +40,6 @@ export default {
       'var(--color-primary-dark-4)',
     ],
     endDate: new Date(),
-    locale: {
-      contributions: 'contributions',
-      no_contributions: 'No contributions',
-    },
   }),
   computed: {
     sum() {

web_src/js/features/heatmap.js

@@ -1,6 +1,6 @@
 import {createApp} from 'vue';
 import ActivityHeatmap from '../components/ActivityHeatmap.vue';
-
+import {translateMonth, translateDay, getCurrentLocale} from '../utils.js';
 export default function initHeatmap() {
   const el = document.getElementById('user-heatmap');
   if (!el) return;
@@ -17,7 +17,18 @@ export default function initHeatmap() {
       return {date: new Date(v), count: heatmap[v]};
     });
 
-    const View = createApp(ActivityHeatmap, {values});
+    const locale = {
+      months: new Array(12).fill().map((_, idx) => translateMonth(idx)),
+      days: new Array(7).fill().map((_, idx) => translateDay(idx)),
+      contributions: el.getAttribute('data-locale-contributions').toLocaleLowerCase(getCurrentLocale()),
+      no_contributions: el.getAttribute('data-locale-no_contributions'),
+      contributions_in_the_last_12_months: el.getAttribute('data-locale-contributions_in_the_last_12_months').toLocaleLowerCase(getCurrentLocale()),
+      on: el.getAttribute('data-locale-on').toLocaleLowerCase(getCurrentLocale()),
+      less: el.getAttribute('data-locale-less'),
+      more: el.getAttribute('data-locale-more'),
+    };
+
+    const View = createApp(ActivityHeatmap, {values, locale});
 
     View.mount(el);
   } catch (err) {

web_src/js/utils.js

@@ -70,3 +70,19 @@ export function prettyNumber(num, locale = 'en-US') {
 export function parseUrl(str) {
   return new URL(str, str.startsWith('http') ? undefined : window.location.origin);
 }
+
+// return current locale chosen by user
+export function getCurrentLocale() {
+  const {lang} = document.documentElement;
+  return lang;
+}
+
+// given a month (0-11), returns it in the documents language
+export function translateMonth(month) {
+  return new Date(Date.UTC(2022, month, 12)).toLocaleString(getCurrentLocale(), {month: 'short'});
+}
+
+// given a weekday (0-6, Sunday to Saturday), returns it in the documents language
+export function translateDay(day) {
+  return new Date(Date.UTC(2022, 7, day)).toLocaleString(getCurrentLocale(), {weekday: 'short'});
+}

web_src/js/utils.test.js

@@ -1,7 +1,7 @@
 import {expect, test} from 'vitest';
 import {
   basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref,
-  prettyNumber, parseUrl,
+  prettyNumber, parseUrl, translateMonth, translateDay
 } from './utils.js';
 
 test('basename', () => {
@@ -109,3 +109,21 @@ test('parseUrl', () => {
   expect(parseUrl('https://localhost/path?search').search).toEqual('?search');
   expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash');
 });
+
+test('translateMonth', () => {
+  document.documentElement.lang = 'en-US';
+  expect(translateMonth(0)).toEqual('Jan');
+  expect(translateMonth(4)).toEqual('May');
+  document.documentElement.lang = 'es-ES';
+  expect(translateMonth(5)).toEqual('jun');
+  expect(translateMonth(6)).toEqual('jul');
+});
+
+test('translateDay', () => {
+  document.documentElement.lang = 'fr-FR';
+  expect(translateDay(1)).toEqual('lun.');
+  expect(translateDay(5)).toEqual('ven.');
+  document.documentElement.lang = 'pl-PL';
+  expect(translateDay(1)).toEqual('pon.');
+  expect(translateDay(5)).toEqual('pt.');
+});