From 125e3e3d66d117d23e387c083d22a8d90820bb52 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 28 Oct 2022 16:48:24 +0300 Subject: [PATCH] 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 Co-authored-by: Gusted Co-authored-by: silverwind Co-authored-by: Lunny Xiao Co-authored-by: techknowlogick --- web_src/js/components/ActivityHeatmap.vue | 8 ++++---- web_src/js/features/heatmap.js | 11 +++++++++-- web_src/js/utils.js | 15 ++++++++++++++ web_src/js/utils.test.js | 24 ++++++++++++++++++++++- 4 files changed, 51 insertions(+), 7 deletions(-) diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue index b5c5c65bb..df7e0beb0 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 6e6202e86..368ddd0d7 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 4020b7a7f..9b8bf925a 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 7bf5bb7eb..0567a5c64 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; +});