Localize heatmap

[firesoft-de]

• Gitea version (or commit ref): 1.14.0
• Git version: not relevant
• Operating system: not relevant
• Database (use [x]): not relevant
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
• Log gist: not relevant

Description

On my gitea instance I got a user request about localizing the heatmap. The legend, the months and the days are always in english (screenshot from german instance below).

I inspected the code and identified

gitea/web_src/js/components/ActivityHeatmap.vue

Lines 6 to 14 in ce8255f

	<calendar-heatmap
	:locale="locale"
	:no-data-text="locale.no_contributions"
	:tooltip-unit="locale.contributions"
	:end-date="endDate"
	:values="values"
	:range-color="colorRange"
	@day-click="handleDayClick($event)"
	/>

as the point to adopt this change request.

locale is defined here

gitea/web_src/js/components/ActivityHeatmap.vue

Lines 39 to 41 in ce8255f

	locale: {
	contributions: 'contributions',
	no_contributions: 'No contributions',

and is used in dependency like this
https://github.com/julienr114/vue-calendar-heatmap/blob/78963c3b97111b68ba063da631f3d1c2d37af7ec/src/components/consts.js#L3-L9

export const DEFAULT_LOCALE = {
  months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  on: 'on',
  less: 'Less',
  more: 'More'
}

Unfortunatley I'm not that fluent with javascript (and vue) and need a little kick start (example or something else) with importing the localizations from /options/locale/*.ini. Anyone has a tip on how to do this?

[fsologureng]

I have an error with this fix because my timezone isn't the expected one:

 FAIL  web_src/js/utils.test.js > translateDay
AssertionError: expected 'dim.' to deeply equal 'lun.'
 ❯ web_src/js/utils.test.js:127:27
    125|   const originalLang = document.documentElement.lang;
    126|   document.documentElement.lang = 'fr-FR';
    127|   expect(translateDay(1)).toEqual('lun.');
       |                           ^
    128|   expect(translateDay(5)).toEqual('ven.');
    129|   document.documentElement.lang = 'pl-PL';

  - Expected   "lun."
  + Received   "dim."

I suggest the fix must considered the same timezone (UTC) for the localised test:

 
 // 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'});
+  return new Date(Date.UTC(2022, month, 12)).toLocaleString(getCurrentLocale(), {month: 'short', timeZone: 'UTC'});
 }
 
 // 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'});
+  return new Date(Date.UTC(2022, 7, day)).toLocaleString(getCurrentLocale(), {weekday: 'short', timeZone: 'UTC'});
 }

ping @yardenshoham