Localize time units on activity heatmap (#21570)

Previously, the months and days were hardcoded into English

* Closes #15541

## Screenshots
### English

![image](https://user-images.githubusercontent.com/20454870/197410352-1b28a637-ce19-41ae-b4e5-27955555b082.png)

### German

![image](https://user-images.githubusercontent.com/20454870/197410455-f243ca84-807f-476e-b8ed-c24e827bfc2d.png)

### Spanish

![image](https://user-images.githubusercontent.com/20454870/197410366-55202ca5-08f9-4152-8f9d-d5eeebd532ef.png)

### Italian

![image](https://user-images.githubusercontent.com/20454870/197410385-75f754dd-e845-4444-8a04-472a8f45b617.png)

### Portuguese
This one has a bit of overflow

![image](https://user-images.githubusercontent.com/20454870/197410414-b91f962e-77e9-4cc7-990b-01c0fc0cbd0b.png)

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>
Co-authored-by: Gusted <williamzijl7@hotmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

4 files changed, 51 insertions, 7 deletions

diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index b5c5c65bbf..df7e0beb00 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -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() {
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 6e6202e866..368ddd0d77 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -1,6 +1,6 @@
 import {createApp} from 'vue';
 import ActivityHeatmap from '../components/ActivityHeatmap.vue';
-
+import {translateMonth, translateDay} from '../utils.js';
 export default function initHeatmap() {
   const el = document.getElementById('user-heatmap');
   if (!el) return;
@@ -17,7 +17,14 @@ 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: 'contributions',
+      no_contributions: 'No contributions',
+    };
+
+    const View = createApp(ActivityHeatmap, {values, locale});
 
     View.mount(el);
   } catch (err) {
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 4020b7a7f4..9b8bf925a9 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -70,3 +70,18 @@ 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
+function getCurrentLocale() {
+  return document.documentElement.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'});
+}
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index 7bf5bb7eb6..0567a5c64a 100644
--- a/web_src/js/utils.test.js
+++ b/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,25 @@ test('parseUrl', () => {
   expect(parseUrl('https://localhost/path?search').search).toEqual('?search');
   expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash');
 });
+
+test('translateMonth', () => {
+  const originalLang = document.documentElement.lang;
+  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');
+  document.documentElement.lang = originalLang;
+});
+
+test('translateDay', () => {
+  const originalLang = document.documentElement.lang;
+  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.');
+  document.documentElement.lang = originalLang;
+});