diff --git a/package.json b/package.json index d40ad45..bc617a2 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "chart.js": "^4.0.1", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-chart-matrix": "^3.0.0", + "date-fns": "^4.4.0", "vue": "^3.2.38", "vue-i18n": "^11.1.10" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 952a549..baafe0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: chartjs-chart-matrix: specifier: ^3.0.0 version: 3.0.4(chart.js@4.5.1) + date-fns: + specifier: ^4.4.0 + version: 4.4.0 vue: specifier: ^3.2.38 version: 3.5.39 diff --git a/src/charts/MatrixChart.vue b/src/charts/MatrixChart.vue index 8da3263..e1a97d4 100644 --- a/src/charts/MatrixChart.vue +++ b/src/charts/MatrixChart.vue @@ -12,6 +12,7 @@ import { computed, onMounted, watch } from 'vue'; import { Chart, color } from '@/chart.config.js'; import { isoDayOfWeek } from '@/utils.js'; +import { getDateFnsLocale } from '@/translations.js'; import { useI18n } from 'vue-i18n'; const { locale } = useI18n(); @@ -56,7 +57,7 @@ const processedDatasets = computed(() => { return data; }); -const draw = () => { +const draw = (localeObject) => { chart = new Chart(props.cid, { type: "matrix", data: { @@ -97,6 +98,11 @@ const draw = () => { display: false, }, type: 'time', + adapters: { + date: { + locale: localeObject + } + }, offset: true, time: { unit: 'day', @@ -124,6 +130,11 @@ const draw = () => { display: false, }, type: props.parseTime ? 'time' : 'linear', + adapters: { + date: { + locale: localeObject + } + }, offset: false, time: props.parseTime ? { unit: 'month', @@ -154,9 +165,10 @@ const draw = () => { }); }; -onMounted(() => { +onMounted(async () => { if (props.datasets) { - draw(); + const l = await getDateFnsLocale(locale.value); + draw(l); } }); diff --git a/src/translations.js b/src/translations.js index 1ba90c5..55a504e 100644 --- a/src/translations.js +++ b/src/translations.js @@ -60,3 +60,35 @@ export const pluralRules = { "pl": pluralPolish, "uk": pluralUkrainian, } + +export const getDateFnsLocale = async (lang) => { + switch (lang) { + case 'ca': return (await import('date-fns/locale/ca')).default; + case 'cs': return (await import('date-fns/locale/cs')).default; + case 'de': return (await import('date-fns/locale/de')).default; + case 'en': return (await import('date-fns/locale/en-GB')).default; + case 'es': return (await import('date-fns/locale/es')).default; + case 'fi': return (await import('date-fns/locale/fi')).default; + case 'fr': return (await import('date-fns/locale/fr')).default; + case 'gl': return (await import('date-fns/locale/gl')).default; + case 'hi': return (await import('date-fns/locale/hi')).default; + case 'hu': return (await import('date-fns/locale/hu')).default; + case 'id': return (await import('date-fns/locale/id')).default; + case 'it': return (await import('date-fns/locale/it')).default; + case 'nl': return (await import('date-fns/locale/nl')).default; + case 'ja': return (await import('date-fns/locale/ja')).default; + case 'pl': return (await import('date-fns/locale/pl')).default; + case 'pt': return (await import('date-fns/locale/pt')).default; + case 'pt-BR': return (await import('date-fns/locale/pt-BR')).default; + case 'ru': return (await import('date-fns/locale/ru')).default; + case 'sk': return (await import('date-fns/locale/sk')).default; + case 'sv': return (await import('date-fns/locale/sv')).default; + case 'th': return (await import('date-fns/locale/th')).default; + case 'tr': return (await import('date-fns/locale/tr')).default; + case 'uk': return (await import('date-fns/locale/uk')).default; + case 'uz': return (await import('date-fns/locale/uz')).default; + case 'zh-CN': return (await import('date-fns/locale/zh-CN')).default; + case 'zh-TW': return (await import('date-fns/locale/zh-TW')).default; + default: return (await import('date-fns/locale/en-US')).default; + } +}