sync
CI / backend-and-migrations (push) Canceled after 0s
CI / astro-build (push) Canceled after 0s
CI / compose-e2e (push) Canceled after 0s

This commit is contained in:
ik
2026-09-08 09:31:41 +07:00
parent 8b2d7e2e1c
commit ddb6909c4d
21 changed files with 255 additions and 58 deletions
+4 -13
View File
@@ -1,19 +1,10 @@
---
import type { Catch } from "../lib/api";
const { catches } = Astro.props as { catches: Catch[] };
const now = Date.now();
const step = 12 * 60 * 60 * 1000;
const buckets = Array.from({ length: 6 }, (_, index) => ({ index, count: 0 }));
for (const item of catches) {
const timestamp = new Date(item.caught_at ?? item.reported_at).getTime();
const age = Math.floor((now - timestamp) / step);
if (age >= 0 && age < buckets.length) buckets[buckets.length - 1 - age].count += 1;
}
const { buckets } = Astro.props as { buckets: { start: string; end: string; count: number }[] };
const max = Math.max(1, ...buckets.map(bucket => bucket.count));
---
<section class="activity-timeline" aria-labelledby="timeline-title">
<header><div><span class="overline">Последние 72 часа</span><h2 id="timeline-title">Леска активности</h2></div><p>По показанным ниже уловам · шаг 12 часов</p></header>
<div class="timeline-chart" role="img" aria-label={`Распределение ${catches.length} показанных уловов за последние 72 часа`}>
{buckets.map((bucket, index) => <div class="timeline-slot"><span class="timeline-line" style={`--height:${Math.max(8, bucket.count / max * 100)}%`}><i></i></span><strong>{bucket.count}</strong><small>{index === 0 ? "72 ч" : index === 5 ? "сейчас" : `${(5-index)*12} ч`}</small></div>)}
<header><div><span class="overline">Последние 72 часа</span><h2 id="timeline-title">Леска активности</h2></div><p>Все одобренные записи · по времени поступления · шаг 12 часов</p></header>
<div class="timeline-chart">
{buckets.map((bucket, index) => <div class="timeline-slot"><span aria-hidden="true" class="timeline-line" style={`--height:${bucket.count / max * 100}%`}>{bucket.count > 0 && <i></i>}</span><strong>{bucket.count}</strong><small>{`${(6-index)*12}${(5-index)*12} ч назад`}</small></div>)}
</div>
</section>