Several fixes

This commit is contained in:
Mahad Kalam 2026-02-09 21:31:53 +00:00
parent 79763fac45
commit 2a1b970156
4 changed files with 52 additions and 10 deletions

View file

@ -135,7 +135,9 @@
</script>
{#if layout.nav.flash.length > 0}
<div class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-md px-4 space-y-2">
<div
class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 w-full max-w-md px-4 space-y-2"
>
{#each layout.nav.flash as item}
<div
class={`rounded-md text-center text-sm px-4 py-3 shadow-lg ${item.class_name}`}
@ -177,7 +179,6 @@
style="scrollbar-width: none; -ms-overflow-style: none;"
>
<div class="space-y-4">
{#if layout.nav.user_present}
<div
class="flex flex-col items-center gap-2 pb-3 border-b border-darkless"

View file

@ -84,10 +84,10 @@
Date Range
</span>
<div class="group flex items-center border border-white/10 rounded-lg bg-darkless m-0 p-0 transition-all duration-200 hover:border-white/20">
<div class="group flex items-center border border-white/20 rounded-lg bg-surface-100 m-0 p-0 transition-all duration-200 hover:border-white/30 hover:bg-surface-200">
<button
type="button"
class="flex-1 px-3 py-2.5 text-sm cursor-pointer select-none text-gray-300 m-0 bg-transparent flex items-center justify-between border-0"
class="flex-1 px-3 py-2.5 text-sm cursor-pointer select-none text-white m-0 bg-transparent flex items-center justify-between border-0"
onclick={() => (open = !open)}
>
<span>{displayLabel}</span>

View file

@ -70,13 +70,13 @@
{label}
</span>
<div class="group flex items-center border border-white/10 rounded-lg bg-darkless m-0 p-0 transition-all duration-200 hover:border-white/20">
<div class="group flex items-center border border-white/20 rounded-lg bg-surface-100 m-0 p-0 transition-all duration-200 hover:border-white/30 hover:bg-surface-200">
<button
type="button"
class="flex-1 px-3 py-2.5 text-sm cursor-pointer select-none text-gray-300 m-0 bg-transparent flex items-center justify-between border-0 min-w-0"
class="flex-1 px-3 py-2.5 text-sm cursor-pointer select-none text-white m-0 bg-transparent flex items-center justify-between border-0 min-w-0"
onclick={() => (open = !open)}
>
<span class="truncate {selected.length === 0 ? 'text-secondary/60' : ''}">
<span class="truncate {selected.length === 0 ? 'text-white/60' : ''}">
{displayText}
</span>
<svg

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { BarChart } from "layerchart";
import { BarChart, Tooltip } from "layerchart";
let {
weeklyStats,
@ -82,6 +82,13 @@
const minutes = Math.floor((value % 3600) / 60);
return hours > 0 ? `${hours}h` : `${minutes}m`;
}
type TimelineDatum = Record<string, string | number>;
function getSeriesValue(datum: TimelineDatum | null | undefined, key: string): number {
const value = datum?.[key];
return typeof value === "number" ? value : 0;
}
</script>
<div
@ -99,10 +106,44 @@
padding={chartPadding}
props={{
yAxis: { format: formatYAxis },
tooltip: { item: { format: formatDuration } },
legend: { classes: legendClasses },
}}
/>
>
<svelte:fragment slot="tooltip">
<Tooltip.Root let:data>
{#if data}
<Tooltip.Header value={data.week} />
<Tooltip.List>
{@const seriesItems = [...series]
.reverse()
.filter((s) => getSeriesValue(data, s.key) > 0)}
{#each seriesItems as s}
{@const value = getSeriesValue(data, s.key)}
<Tooltip.Item
label={s.label ?? s.key}
value={value}
color={s.color}
format={formatDuration}
valueAlign="right"
/>
{/each}
{#if seriesItems.length > 1}
<Tooltip.Separator />
<Tooltip.Item
label="total"
value={seriesItems.reduce(
(total, s) => total + getSeriesValue(data, s.key),
0,
)}
format={formatDuration}
valueAlign="right"
/>
{/if}
</Tooltip.List>
{/if}
</Tooltip.Root>
</svelte:fragment>
</BarChart>
</div>
{/if}
</div>