extended-43

1<script setup lang="ts">
2import {
3  ContributionGraph,
4  ContributionGraphBlock,
5  ContributionGraphGroup,
6} from "@/registry/default/ui/contribution-graph";
7import {
8  Tooltip,
9  TooltipContent,
10  TooltipProvider,
11  TooltipTrigger,
12} from "@/registry/default/ui/tooltip";
13 
14const generateData = () => {
15  const days = [];
16  const startDate = new Date();
17  startDate.setMonth(startDate.getMonth() - 12);
18 
19  for (let i = 0; i < 364; i++) {
20    const currentDate = new Date(startDate);
21    currentDate.setDate(startDate.getDate() + i);
22 
23    const count = Math.floor(Math.random() * 13);
24 
25    days.push({
26      date: currentDate.toISOString().split("T")[0],
27      count: count,
28    });
29  }
30  return days;
31};
32 
33const data = ref(generateData());
34 
35const weeks = computed(() => {
36  const result = [];
37  for (let i = 0; i < data.value.length; i += 7) {
38    result.push(data.value.slice(i, i + 7));
39  }
40  return result;
41});
42 
43const getLevel = (count: number) => {
44  if (count === 0) return 0;
45  if (count <= 2) return 1;
46  if (count <= 4) return 2;
47  if (count <= 6) return 3;
48  if (count <= 8) return 4;
49  if (count <= 10) return 5;
50  return 6;
51};
52 
53const formatDate = (dateString?: string) => {
54  if (!dateString) return "";
55 
56  return new Date(dateString).toLocaleDateString("en-US", {
57    weekday: "short",
58    year: "numeric",
59    month: "short",
60    day: "numeric",
61  });
62};
63</script>
64 
65<template>
66  <div class="flex flex-col items-center justify-center">
67    <div>
68      <TooltipProvider>
69        <ContributionGraph class="flex gap-1">
70          <ContributionGraphGroup v-for="(week, weekIndex) in weeks" :key="weekIndex">
71            <Tooltip v-for="(day, dayIndex) in week" :key="dayIndex" :delay-duration="0">
72              <TooltipTrigger as-child>
73                <ContributionGraphBlock
74                  :level="getLevel(day.count)"
75                  :title="`${day.count} contributions on ${day.date}`"
76                />
77              </TooltipTrigger>
78              <TooltipContent side="top" class="bg-foreground text-background border-foreground">
79                <div class="text-xs">
80                  <p class="font-medium">
81                    {{ day.count }}
82                    {{ day.count === 1 ? "contribution" : "contributions" }}
83                  </p>
84                  <p class="opacity-70">
85                    {{ formatDate(day.date) }}
86                  </p>
87                </div>
88              </TooltipContent>
89            </Tooltip>
90          </ContributionGraphGroup>
91// … truncated