blob: 6cb47dff289d2b7d415651ced5a76a4d014b4d68 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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>
|
