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

     1  <script>
     2  import {CalendarHeatmap} from 'vue3-calendar-heatmap';
     3  
     4  export default {
     5    components: {CalendarHeatmap},
     6    props: {
     7      values: {
     8        type: Array,
     9        default: () => [],
    10      },
    11      locale: {
    12        type: Object,
    13        default: () => {},
    14      }
    15    },
    16    data: () => ({
    17      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      ],
    26      endDate: new Date(),
    27    }),
    28    mounted() {
    29      // work around issue with first legend color being rendered twice and legend cut off
    30      const legend = document.querySelector('.vch__external-legend-wrapper');
    31      legend.setAttribute('viewBox', '12 0 80 10');
    32      legend.style.marginRight = '-12px';
    33    },
    34    methods: {
    35      handleDayClick(e) {
    36        // Reset filter if same date is clicked
    37        const params = new URLSearchParams(document.location.search);
    38        const queryDate = params.get('date');
    39        // Timezone has to be stripped because toISOString() converts to UTC
    40        const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
    41  
    42        if (queryDate && queryDate === clickedDate) {
    43          params.delete('date');
    44        } else {
    45          params.set('date', clickedDate);
    46        }
    47  
    48        params.delete('page');
    49  
    50        const newSearch = params.toString();
    51        window.location.search = newSearch.length ? `?${newSearch}` : '';
    52      }
    53    },
    54  };
    55  </script>
    56  <template>
    57    <div class="total-contributions">
    58      {{ locale.contributions_in_the_last_12_months }}
    59    </div>
    60    <calendar-heatmap
    61      :locale="locale"
    62      :no-data-text="locale.no_contributions"
    63      :tooltip-unit="locale.contributions"
    64      :end-date="endDate"
    65      :values="values"
    66      :range-color="colorRange"
    67      @day-click="handleDayClick($event)"
    68    />
    69  </template>