hackatime/app/javascript/pages/Home/signedIn/ProjectTimeline.svelte
Mahad Kalam ef3f36c829
Inertia migration/UI3 (#911)
* 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
2026-02-09 11:26:30 +00:00

44 lines
1.3 KiB
Svelte

<script lang="ts">
import { secondsToDisplay, percentOf } from "./utils";
let {
entries,
}: {
entries: [string, Record<string, number>][];
} = $props();
</script>
<div
class="bg-dark border border-primary rounded-xl p-6 flex flex-col md:col-span-2"
>
<h3 class="text-xl font-semibold mb-4">Project Timeline</h3>
{#if entries.length > 0}
<div class="flex flex-col gap-2 max-h-96 overflow-y-auto">
{#each entries as [week, stats]}
{@const total = Object.values(stats).reduce(
(a, v) => a + (v || 0),
0,
)}
<div class="flex items-center gap-3">
<div class="w-28 text-sm text-muted">{week}</div>
<div class="flex-1 bg-darkless rounded h-3 overflow-hidden">
<div class="flex h-3 w-full">
{#each Object.entries(stats) as [project, seconds]}
<div
class="h-3 bg-primary/80"
style={`width:${percentOf(seconds, total)}%`}
title={`${project}: ${secondsToDisplay(seconds)}`}
></div>
{/each}
</div>
</div>
<div class="w-16 text-sm text-muted text-right">
{secondsToDisplay(total)}
</div>
</div>
{/each}
</div>
{:else}
<p class="text-muted">No timeline data.</p>
{/if}
</div>