extended-40

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 
47const colors = [
48  "bg-muted",
49  "bg-amber-100 dark:bg-amber-900/30",
50  "bg-amber-200 dark:bg-amber-900/50",
51  "bg-amber-300 dark:bg-amber-800/60",
52  "bg-amber-400 dark:bg-amber-600/70",
53  "bg-amber-500 dark:bg-amber-500/80",
54  "bg-amber-600 dark:bg-amber-400",
55];
56</script>
57 
58<template>
59  <div class="flex flex-col items-center justify-center">
60    <ContributionGraph class="flex gap-1">
61      <ContributionGraphGroup v-for="(week, weekIndex) in weeks" :key="weekIndex">
62        <ContributionGraphBlock
63          v-for="(day, dayIndex) in week"
64          :key="dayIndex"
65          :colors="colors"
66          :level="getLevel(day.count)"
67          :title="`${day.count} contributions on ${day.date}`"
68        />
69      </ContributionGraphGroup>
70    </ContributionGraph>
71 
72    <p class="text-muted-foreground mt-2 text-xs" role="region" aria-live="polite">
73      With Custom Color
74    </p>
75  </div>
76</template>