mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 16:38:23 +00:00
ef3f36c829
* Inertia p1? * Inertia'fied signed out homepage? * Split up signed in page * WIP signed in v2? * Better signed in? * Clean up extensions page! * Fix currently hacking * Better docs page? * Docs update 2 * Clean up "What is Hackatime?" + get rid of that godawful green dev mode * Better nav? * Cleaner settings? * Fix commit times * Fix flashes + OS improv * Setup v2 * Readd some of the syncers? * Remove stray emdash * Clean up Step 3 * Oops, remove .vite * bye bye, /inertia-example * bin/rubocop -A * Fix docs vuln
75 lines
1.4 KiB
Svelte
75 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { PieChart } from "layerchart";
|
|
|
|
let {
|
|
title,
|
|
stats,
|
|
}: {
|
|
title: string;
|
|
stats: Record<string, number>;
|
|
} = $props();
|
|
|
|
const PIE_COLORS = [
|
|
"#60a5fa",
|
|
"#f472b6",
|
|
"#fb923c",
|
|
"#facc15",
|
|
"#4ade80",
|
|
"#2dd4bf",
|
|
"#a78bfa",
|
|
"#f87171",
|
|
"#38bdf8",
|
|
"#e879f9",
|
|
"#34d399",
|
|
"#fbbf24",
|
|
"#818cf8",
|
|
"#fb7185",
|
|
"#22d3ee",
|
|
"#a3e635",
|
|
"#c084fc",
|
|
"#f97316",
|
|
"#14b8a6",
|
|
"#8b5cf6",
|
|
"#ec4899",
|
|
"#84cc16",
|
|
"#06b6d4",
|
|
"#d946ef",
|
|
"#10b981",
|
|
];
|
|
|
|
const data = $derived(
|
|
Object.entries(stats).map(([name, value]) => ({ name, value })),
|
|
);
|
|
|
|
const legendClasses = {
|
|
root: "w-full px-2",
|
|
swatches: "flex-wrap justify-center",
|
|
label: "text-xs text-white/70",
|
|
};
|
|
|
|
const legendPadding = $derived.by(() => {
|
|
const rows = Math.max(1, Math.ceil(data.length / 4));
|
|
return Math.min(96, 24 + rows * 18);
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="bg-dark/50 border border-white/10 rounded-xl p-6 flex flex-col h-full"
|
|
>
|
|
<h2 class="mb-4 text-lg font-semibold text-white/90">{title}</h2>
|
|
<div class="h-[260px] sm:h-[280px] lg:h-[300px]">
|
|
{#if data.length > 0}
|
|
<PieChart
|
|
{data}
|
|
key="name"
|
|
value="value"
|
|
cRange={PIE_COLORS}
|
|
legend={true}
|
|
padding={{ bottom: legendPadding }}
|
|
props={{
|
|
legend: { classes: legendClasses },
|
|
}}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
</div>
|