diff options
author | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
---|---|---|
committer | Daniel Baumann <daniel@debian.org> | 2024-12-12 23:57:56 +0100 |
commit | e68b9d00a6e05b3a941f63ffb696f91e554ac5ec (patch) | |
tree | 97775d6c13b0f416af55314eb6a89ef792474615 /web_src/js/components/ActivityHeatmap.vue | |
parent | Initial commit. (diff) | |
download | forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.tar.xz forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.zip |
Adding upstream version 9.0.3.
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/js/components/ActivityHeatmap.vue')
-rw-r--r-- | web_src/js/components/ActivityHeatmap.vue | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue new file mode 100644 index 0000000..be0841e --- /dev/null +++ b/web_src/js/components/ActivityHeatmap.vue @@ -0,0 +1,83 @@ +<script> +import {CalendarHeatmap} from 'vue3-calendar-heatmap'; + +export default { + components: {CalendarHeatmap}, + props: { + values: { + type: Array, + default: () => [], + }, + locale: { + type: Object, + default: () => {}, + }, + }, + data: () => ({ + colorRange: [ + 'var(--color-secondary-alpha-60)', + 'var(--color-secondary-alpha-60)', + 'var(--color-primary-light-4)', + 'var(--color-primary-light-2)', + 'var(--color-primary)', + 'var(--color-primary-dark-2)', + 'var(--color-primary-dark-4)', + ], + endDate: new Date(), + }), + mounted() { + // work around issue with first legend color being rendered twice and legend cut off + const legend = document.querySelector('.vch__external-legend-wrapper'); + legend.setAttribute('viewBox', '12 0 80 10'); + legend.style.marginRight = '-12px'; + }, + methods: { + handleDayClick(e) { + // Reset filter if same date is clicked + const params = new URLSearchParams(document.location.search); + const queryDate = params.get('date'); + // Timezone has to be stripped because toISOString() converts to UTC + const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10); + + if (queryDate && queryDate === clickedDate) { + params.delete('date'); + } else { + params.set('date', clickedDate); + } + + params.delete('page'); + + const newSearch = params.toString(); + window.location.search = newSearch.length ? `?${newSearch}` : ''; + }, + }, +}; +</script> +<template> + <div class="total-contributions"> + {{ locale.contributions_in_the_last_12_months }} + </div> + <calendar-heatmap + :locale="locale" + :no-data-text="locale.contributions_zero" + :tooltip-formatter=" + (v) => + locale.contributions_format + .replace( + '{contributions}', + `<b>${v.count} ${ + v.count === 1 + ? locale.contributions_one + : locale.contributions_few + }</b>` + ) + .replace('{month}', locale.months[v.date.getMonth()]) + .replace('{day}', v.date.getDate()) + .replace('{year}', v.date.getFullYear()) + " + :end-date="endDate" + :values="values" + :range-color="colorRange" + @day-click="handleDayClick($event)" + /> +</template> |