extended-41

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-sky-200 dark:bg-sky-900/30",
50  "bg-sky-300 dark:bg-sky-900/50",
51  "bg-sky-400 dark:bg-sky-800/60",
52  "bg-sky-500 dark:bg-sky-600/70",
53  "bg-sky-600 dark:bg-sky-500/80",
54  "bg-sky-700 dark:bg-sky-400",
55];
56 
57const monthLabels = computed(() => {
58  let lastMonth = -1;
59 
60  return weeks.value.map((week) => {
61    const firstDay = week[0];
62    if (firstDay?.date) {
63      const firstDayOfWeek = new Date(firstDay.date);
64      const month = firstDayOfWeek.getMonth();
65 
66      if (month !== lastMonth) {
67        lastMonth = month;
68        return firstDayOfWeek.toLocaleString("en-US", { month: "short" });
69      }
70    }
71    return "";
72  });
73});
74 
75const totalActivities = computed(() => {
76  return data.value.reduce((sum, day) => sum + day.count, 0);
77});
78</script>
79 
80<template>
81  <div class="flex flex-col items-center justify-center">
82    <div>
83      <div class="mb-1 flex gap-1">
84        <div
85          v-for="(label, index) in monthLabels"
86          :key="index"
87          class="text-muted-foreground w-3 text-xs"
88        >
89          {{ label }}
90        </div>
91      </div>
92      <ContributionGraph class="flex gap-1">
93        <ContributionGraphGroup v-for="(week, weekIndex) in weeks" :key="weekIndex">
94          <ContributionGraphBlock
95            v-for="(day, dayIndex) in week"
96            :key="dayIndex"
97            :colors="colors"
98            :level="getLevel(day.count)"
99            :title="`${day.count} contributions on ${day.date}`"
100// … truncated