mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 19:55:16 +00:00
Several fixes
This commit is contained in:
parent
79763fac45
commit
2a1b970156
4 changed files with 52 additions and 10 deletions
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue