|
1 | | -<script lang="ts"> |
| 1 | +<script lang="ts" setup> |
2 | 2 | // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged |
3 | 3 | import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap'; |
| 4 | +import {onMounted, ref} from 'vue'; |
| 5 | +import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap'; |
4 | 6 |
|
5 | | -export default { |
6 | | - components: {CalendarHeatmap}, |
7 | | - props: { |
8 | | - values: { |
9 | | - type: Array, |
10 | | - default: () => [], |
11 | | - }, |
12 | | - locale: { |
13 | | - type: Object, |
14 | | - default: () => {}, |
15 | | - }, |
16 | | - }, |
17 | | - data: () => ({ |
18 | | - colorRange: [ |
19 | | - 'var(--color-secondary-alpha-60)', |
20 | | - 'var(--color-secondary-alpha-60)', |
21 | | - 'var(--color-primary-light-4)', |
22 | | - 'var(--color-primary-light-2)', |
23 | | - 'var(--color-primary)', |
24 | | - 'var(--color-primary-dark-2)', |
25 | | - 'var(--color-primary-dark-4)', |
26 | | - ], |
27 | | - endDate: new Date(), |
28 | | - }), |
29 | | - mounted() { |
30 | | - // work around issue with first legend color being rendered twice and legend cut off |
31 | | - const legend = document.querySelector('.vch__external-legend-wrapper'); |
32 | | - legend.setAttribute('viewBox', '12 0 80 10'); |
33 | | - legend.style.marginRight = '-12px'; |
34 | | - }, |
35 | | - methods: { |
36 | | - handleDayClick(e) { |
37 | | - // Reset filter if same date is clicked |
38 | | - const params = new URLSearchParams(document.location.search); |
39 | | - const queryDate = params.get('date'); |
40 | | - // Timezone has to be stripped because toISOString() converts to UTC |
41 | | - const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10); |
| 7 | +defineProps<{ |
| 8 | + values?: HeatmapValue[]; |
| 9 | + locale: { |
| 10 | + textTotalContributions: string; |
| 11 | + heatMapLocale: Partial<HeatmapLocale>; |
| 12 | + noDataText: string; |
| 13 | + tooltipUnit: string; |
| 14 | + }; |
| 15 | +}>(); |
42 | 16 |
|
43 | | - if (queryDate && queryDate === clickedDate) { |
44 | | - params.delete('date'); |
45 | | - } else { |
46 | | - params.set('date', clickedDate); |
47 | | - } |
| 17 | +const colorRange = [ |
| 18 | + 'var(--color-secondary-alpha-60)', |
| 19 | + 'var(--color-secondary-alpha-60)', |
| 20 | + 'var(--color-primary-light-4)', |
| 21 | + 'var(--color-primary-light-2)', |
| 22 | + 'var(--color-primary)', |
| 23 | + 'var(--color-primary-dark-2)', |
| 24 | + 'var(--color-primary-dark-4)', |
| 25 | +]; |
48 | 26 |
|
49 | | - params.delete('page'); |
| 27 | +const endDate = ref(new Date()); |
50 | 28 |
|
51 | | - const newSearch = params.toString(); |
52 | | - window.location.search = newSearch.length ? `?${newSearch}` : ''; |
53 | | - }, |
54 | | - }, |
55 | | -}; |
| 29 | +onMounted(() => { |
| 30 | + // work around issue with first legend color being rendered twice and legend cut off |
| 31 | + const legend = document.querySelector<HTMLElement>('.vch__external-legend-wrapper'); |
| 32 | + legend.setAttribute('viewBox', '12 0 80 10'); |
| 33 | + legend.style.marginRight = '-12px'; |
| 34 | +}); |
| 35 | +
|
| 36 | +function handleDayClick(e: Event & {date: Date}) { |
| 37 | + // Reset filter if same date is clicked |
| 38 | + const params = new URLSearchParams(document.location.search); |
| 39 | + const queryDate = params.get('date'); |
| 40 | + // Timezone has to be stripped because toISOString() converts to UTC |
| 41 | + const clickedDate = new Date(e.date.getTime() - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10); |
| 42 | +
|
| 43 | + if (queryDate && queryDate === clickedDate) { |
| 44 | + params.delete('date'); |
| 45 | + } else { |
| 46 | + params.set('date', clickedDate); |
| 47 | + } |
| 48 | +
|
| 49 | + params.delete('page'); |
| 50 | +
|
| 51 | + const newSearch = params.toString(); |
| 52 | + window.location.search = newSearch.length ? `?${newSearch}` : ''; |
| 53 | +} |
56 | 54 | </script> |
57 | 55 | <template> |
58 | 56 | <div class="total-contributions"> |
|
0 commit comments