heatmap

Author: catdevnull

sitio/src/lib/HeatmapHours.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  export let matrix: number[][]; // 7 x 24, dayjs().day() indexing (0=Sunday)
+
+  const weekdays = ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"];
+
+  const hours = Array.from({ length: 24 }, (_, h) => h);
+
+  $: max = Math.max(0, ...matrix.flat());
+
+  function colorFor(value: number) {
+    if (max === 0) return "#e5e7eb"; // neutral-200
+    const t = value / max;
+    // simple sequential palette from light to dark orange
+    if (t === 0) return "#f3f4f6"; // neutral-100
+    if (t < 0.2) return "#fde7d9";
+    if (t < 0.4) return "#fdcdb3";
+    if (t < 0.6) return "#fca36b";
+    if (t < 0.8) return "#f77f00";
+    return "#d65a00";
+  }
+</script>
+
+<div class="flex w-full flex-col gap-2">
+  <div class="overflow-x-auto">
+    <div
+      class="grid"
+      style="grid-template-columns: 48px repeat(24, minmax(20px,1fr));"
+    >
+      <div></div>
+      {#each hours as h}
+        <div class="text-muted-foreground text-center text-[10px]">{h}</div>
+      {/each}
+
+      {#each matrix as row, dow}
+        <div class="sticky left-0 z-10 bg-transparent pr-2 text-right text-xs">
+          {weekdays[dow]}
+        </div>
+        {#each row as value}
+          <div
+            class="aspect-square border border-neutral-200 dark:border-neutral-700"
+            style={`background:${colorFor(value)}`}
+            title={`${weekdays[dow]} ${value} interacciones`}
+          ></div>
+        {/each}
+      {/each}
+    </div>
+  </div>
+
+  <div class="text-muted-foreground flex items-center gap-2 self-end text-xs">
+    <span>menos</span>
+    <div class="h-3 w-3" style="background:#f3f4f6"></div>
+    <div class="h-3 w-3" style="background:#fde7d9"></div>
+    <div class="h-3 w-3" style="background:#fdcdb3"></div>
+    <div class="h-3 w-3" style="background:#fca36b"></div>
+    <div class="h-3 w-3" style="background:#f77f00"></div>
+    <div class="h-3 w-3" style="background:#d65a00"></div>
+    <span>más</span>
+  </div>
+</div>

sitio/src/routes/+page.server.ts

@@ -4,7 +4,6 @@ import * as schema from "../schema";
 import type { PageServerLoad } from "./$types";
 import { dayjs, likesCutoffSql } from "$lib/consts";
 import { error, redirect } from "@sveltejs/kit";
-import { getLastWeek } from "$lib/data-processing/weekly";
 import { getStatsForDaysInTimePeriod } from "@/data-processing/days";
 
 const tz = "America/Argentina/Buenos_Aires";
@@ -25,12 +24,15 @@ function getStartingFrom(query: string) {
   }
 }
 
-export const load: PageServerLoad = async ({ params, url, setHeaders }) => {
+export const load: PageServerLoad = async ({ url, setHeaders }) => {
   const query =
     url.searchParams.get("q") ?? "date:" + dayjs().tz(tz).format("YYYY-MM-DD");
   const startingFrom = getStartingFrom(query);
   const endsAt = startingFrom.add(24, "hour");
 
+  const heatmapStart = dayjs().tz(tz).subtract(90, "day").startOf("day");
+  const heatmapEnd = dayjs().tz(tz).endOf("day");
+
   const t0 = performance.now();
   const [
     likedTweets,
@@ -40,6 +42,8 @@ export const load: PageServerLoad = async ({ params, url, setHeaders }) => {
     firstLikedTweet,
     monthData,
     hasNextMonth,
+    heatLikes,
+    heatRetweets,
   ] = await Promise.all([
     db.query.likedTweets.findMany({
       columns: {
@@ -112,10 +116,49 @@ export const load: PageServerLoad = async ({ params, url, setHeaders }) => {
         startingFrom.add(1, "month").startOf("month").toDate(),
       ),
     }),
+    db.query.likedTweets.findMany({
+      columns: { firstSeenAt: true },
+      where: and(
+        gte(schema.likedTweets.firstSeenAt, heatmapStart.toDate()),
+        lte(schema.likedTweets.firstSeenAt, heatmapEnd.toDate()),
+        likesCutoffSql,
+      ),
+      orderBy: desc(schema.likedTweets.firstSeenAt),
+    }),
+    db.query.retweets.findMany({
+      columns: { retweetAt: true },
+      where: and(
+        gte(schema.retweets.retweetAt, heatmapStart.toDate()),
+        lte(schema.retweets.retweetAt, heatmapEnd.toDate()),
+      ),
+      orderBy: desc(schema.retweets.retweetAt),
+    }),
   ]);
   const t1 = performance.now();
   console.log("queries", t1 - t0);
 
+  console.time("heatmap");
+  const hourHeatmap: number[][] = Array.from({ length: 7 }, () =>
+    Array(24).fill(0),
+  );
+  const addToHeat = (d: Date) => {
+    // Assume fixed UTC-3 (America/Argentina/Buenos_Aires without DST)
+    const utcHour = d.getUTCHours();
+    let hour = utcHour - 3;
+    let dow = d.getUTCDay(); // 0 = Sunday
+    if (hour < 0) {
+      hour += 24;
+      dow = (dow + 6) % 7; // previous day
+    } else if (hour >= 24) {
+      hour -= 24;
+      dow = (dow + 1) % 7; // next day (not expected with -3 but kept generic)
+    }
+    hourHeatmap[dow][hour]++;
+  };
+  heatLikes.forEach((t: { firstSeenAt: Date }) => addToHeat(t.firstSeenAt));
+  heatRetweets.forEach((t: { retweetAt: Date }) => addToHeat(t.retweetAt));
+  console.timeEnd("heatmap");
+
   if (
     likedTweets.length === 0 &&
     retweets.length === 0 &&
@@ -145,5 +188,6 @@ export const load: PageServerLoad = async ({ params, url, setHeaders }) => {
     monthData,
     hasNextMonth: !!hasNextMonth,
     query,
+    hourHeatmap,
   };
 };

sitio/src/routes/+page.svelte

@@ -36,6 +36,7 @@
   import { parseDate } from "@internationalized/date";
   import StatsCalendar from "@/StatsCalendar.svelte";
   import StatsCalendarNavigation from "@/StatsCalendarNavigation.svelte";
+  import HeatmapHours from "$lib/HeatmapHours.svelte";
 
   export let data: PageData;
 
@@ -225,9 +226,9 @@
   {/if}
 
   <section
-    class="mx-auto flex w-full max-w-2xl flex-col gap-4 bg-neutral-100 p-4 dark:bg-neutral-800 md:rounded-lg"
+    class="mx-auto flex w-full max-w-2xl flex-col gap-4 bg-neutral-100 p-4 md:rounded-lg dark:bg-neutral-800"
   >
-    <h2 class=" my-2 text-center text-xl font-bold md:text-4xl">
+    <h2 class="my-2 text-center text-xl font-bold md:text-4xl">
       Su actividad en {dayjs(data.start).isAfter(dayjs().startOf("month"))
         ? "lo que va de"
         : ""}
@@ -246,6 +247,18 @@
     />
   </section>
 
+  <section
+    class="mx-auto w-full max-w-2xl bg-neutral-100 p-4 md:rounded-lg dark:bg-neutral-800"
+  >
+    <h2 class="mb-2 text-center text-xl font-bold md:text-3xl">
+      ¿Cuándo suele estar activo en Twitter?
+    </h2>
+    <p class="text-muted-foreground mb-4 text-center text-sm">
+      Basado en retweets y likes de los últimos 90 días.
+    </p>
+    <HeatmapHours matrix={data.hourHeatmap} />
+  </section>
+
   <section class="mx-auto flex w-full max-w-[800px] flex-col py-8">
     <h2 class="mb-4 text-center text-2xl font-bold md:text-4xl">
       💞 Los favoritos de Milei 💞
@@ -308,7 +321,7 @@
       Como lo viste en la prensa
     </h2>
     <div
-      class="mx-auto flex flex-col items-center justify-center gap-4 bg-neutral-100 p-2 dark:bg-neutral-800 md:mb-8 md:flex-row md:rounded-lg md:text-lg"
+      class="mx-auto flex flex-col items-center justify-center gap-4 bg-neutral-100 p-2 md:mb-8 md:flex-row md:rounded-lg md:text-lg dark:bg-neutral-800"
     >
       <enhanced:img
         class="w-[300px] rounded-lg"