yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
brookjeynes.dev
1package partials
2
3import "fmt"
4
5templ PieChart(params PieChartProps) {
6 <div class="card">
7 <h3 class="font-semibold mb-4 text-text">{ params.LabelA } vs { params.LabelB }</h3>
8 <div class="relative w-48 h-48 mx-auto">
9 <svg class="w-full h-full" viewBox="0 0 36 36">
10 <path
11 class="stroke-current text-gray-light"
12 d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
13 fill="none"
14 stroke-width="3"
15 ></path>
16 <path
17 class="stroke-current text-primary"
18 stroke-dasharray={ fmt.Sprintf("%d, 100", params.Percentage) }
19 d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
20 fill="none"
21 stroke-width="3"
22 stroke-linecap="round"
23 ></path>
24 </svg>
25 <div class="absolute inset-0 flex flex-col items-center justify-center">
26 <span class="text-3xl font-bold text-gray-900">{ params.Percentage }%</span>
27 <span class="text-sm text-gray-500">{ params.LabelA }</span>
28 </div>
29 </div>
30 <div class="mt-6 flex justify-center gap-4 text-sm">
31 <div class="flex items-center gap-2">
32 <div class="w-3 h-3 rounded-full bg-primary"></div><span>{ params.LabelA }</span>
33 </div>
34 <div class="flex items-center gap-2">
35 <div class="w-3 h-3 rounded-full bg-gray-light"></div><span>{ params.LabelB }</span>
36 </div>
37 </div>
38 </div>
39}