extended-39

1<script setup lang="ts">
2import {
3  ContributionGraph,
4  ContributionGraphBlock,
5  ContributionGraphGroup,
6} from "@/registry/default/ui/contribution-graph";
7 
8const generateData = () => {
9  const days = [];
10  const startDate = new Date();
11  startDate.setMonth(startDate.getMonth() - 12);
12 
13  for (let i = 0; i < 364; i++) {
14    const currentDate = new Date(startDate);
15    currentDate.setDate(startDate.getDate() + i);
16 
17    const count = Math.floor(Math.random() * 13);
18 
19    days.push({
20      date: currentDate.toISOString().split("T")[0],
21      count: count,
22    });
23  }
24  return days;
25};
26 
27const data = ref(generateData());
28 
29const weeks = computed(() => {
30  const result = [];
31  for (let i = 0; i < data.value.length; i += 7) {
32    result.push(data.value.slice(i, i + 7));
33  }
34  return result;
35});
36 
37const getLevel = (count: number) => {
38  if (count === 0) return 0;
39  if (count <= 2) return 1;
40  if (count <= 4) return 2;
41  if (count <= 6) return 3;
42  if (count <= 8) return 4;
43  if (count <= 10) return 5;
44  return 6;
45};
46</script>
47 
48<template>
49  <div class="flex flex-col items-center justify-center">
50    <div>
51      <ContributionGraph class="flex gap-1">
52        <ContributionGraphGroup v-for="(week, weekIndex) in weeks" :key="weekIndex">
53          <ContributionGraphBlock
54            v-for="(day, dayIndex) in week"
55            :key="dayIndex"
56            :level="getLevel(day.count)"
57            :title="`${day.count} contributions on ${day.date}`"
58          />
59        </ContributionGraphGroup>
60      </ContributionGraph>
61    </div>
62    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">Default</p>
63  </div>
64</template>