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>
This commit is contained in:
Yarden Shoham 2022-10-28 16:48:24 +03:00 committed by GitHub
parent 76e9a4f701
commit 125e3e3d66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 7 deletions

View File

@ -25,6 +25,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
locale: {
type: Object,
default: () => {},
}
}, },
data: () => ({ data: () => ({
colorRange: [ colorRange: [
@ -36,10 +40,6 @@ export default {
'var(--color-primary-dark-4)', 'var(--color-primary-dark-4)',
], ],
endDate: new Date(), endDate: new Date(),
locale: {
contributions: 'contributions',
no_contributions: 'No contributions',
},
}), }),
computed: { computed: {
sum() { sum() {

View File

@ -1,6 +1,6 @@
import {createApp} from 'vue'; import {createApp} from 'vue';
import ActivityHeatmap from '../components/ActivityHeatmap.vue'; import ActivityHeatmap from '../components/ActivityHeatmap.vue';
import {translateMonth, translateDay} from '../utils.js';
export default function initHeatmap() { export default function initHeatmap() {
const el = document.getElementById('user-heatmap'); const el = document.getElementById('user-heatmap');
if (!el) return; if (!el) return;
@ -17,7 +17,14 @@ export default function initHeatmap() {
return {date: new Date(v), count: heatmap[v]}; 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); View.mount(el);
} catch (err) { } catch (err) {

View File

@ -70,3 +70,18 @@ export function prettyNumber(num, locale = 'en-US') {
export function parseUrl(str) { export function parseUrl(str) {
return new URL(str, str.startsWith('http') ? undefined : window.location.origin); 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'});
}

View File

@ -1,7 +1,7 @@
import {expect, test} from 'vitest'; import {expect, test} from 'vitest';
import { import {
basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref,
prettyNumber, parseUrl, prettyNumber, parseUrl, translateMonth, translateDay
} from './utils.js'; } from './utils.js';
test('basename', () => { test('basename', () => {
@ -109,3 +109,25 @@ test('parseUrl', () => {
expect(parseUrl('https://localhost/path?search').search).toEqual('?search'); expect(parseUrl('https://localhost/path?search').search).toEqual('?search');
expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash'); 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;
});