code.gitea.io/gitea@v1.22.3/web_src/js/components/ActivityHeatmap.vue (about)

     1  <script>
     2  // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
     3  import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
     4  
     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);
    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      },
    54    },
    55  };
    56  </script>
    57  <template>
    58    <div class="total-contributions">
    59      {{ locale.textTotalContributions }}
    60    </div>
    61    <calendar-heatmap
    62      :locale="locale.heatMapLocale"
    63      :no-data-text="locale.noDataText"
    64      :tooltip-unit="locale.tooltipUnit"
    65      :end-date="endDate"
    66      :values="values"
    67      :range-color="colorRange"
    68      @day-click="handleDayClick($event)"
    69      :tippy-props="{theme: 'tooltip'}"
    70    />
    71  </template>