diff options
Diffstat (limited to 'frontend/src/lib/components/UptimeTimeline.svelte')
| -rw-r--r-- | frontend/src/lib/components/UptimeTimeline.svelte | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/frontend/src/lib/components/UptimeTimeline.svelte b/frontend/src/lib/components/UptimeTimeline.svelte new file mode 100644 index 0000000..6cb47df --- /dev/null +++ b/frontend/src/lib/components/UptimeTimeline.svelte @@ -0,0 +1,41 @@ +<script lang="ts"> + import type { Heartbeat } from '$lib/types'; + + let { + heartbeats = [] + }: { + heartbeats: Heartbeat[]; + } = $props(); + + let blocks = $derived.by(() => { + const all = heartbeats.slice(-30); + const filled = all.map((h) => h.is_up); + while (filled.length < 30) { + filled.unshift(null); + } + return filled; + }); + + function blockColor(v: boolean | null): string { + if (v === true) return 'var(--green)'; + if (v === false) return 'var(--red)'; + return 'var(--border-color)'; + } +</script> + +<div class="space-y-1.5"> + <div class="flex gap-[3px]"> + {#each blocks as block, i} + <div + class="h-4 flex-1 rounded-sm transition-all duration-300" + style="background-color: {blockColor(block)}; opacity: {block !== null ? 0.8 : 1}" + title={block === true ? 'UP' : block === false ? 'DOWN' : 'Sem dados'} + ></div> + {/each} + </div> + <div class="flex justify-between text-[10px] font-medium text-[var(--text-muted)]"> + <span>{heartbeats.length > 0 ? '-30 min' : ''}</span> + <span class="tabular-nums">{heartbeats.length} checks</span> + <span>agora</span> + </div> +</div> |