From 5288cfbed34f94c4321b8d9dc497cfd0da3ffd26 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 8 Mar 2026 23:42:39 +0100
Subject: Refactor VigoUsageProcessor to remove CSV whitelist loading; add
 StopUsageChart component for usage visualization in Stops page

---
 .../app/components/stop/StopUsageChart.tsx         | 143 +++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 src/frontend/app/components/stop/StopUsageChart.tsx

(limited to 'src/frontend/app/components/stop/StopUsageChart.tsx')

diff --git a/src/frontend/app/components/stop/StopUsageChart.tsx b/src/frontend/app/components/stop/StopUsageChart.tsx
new file mode 100644
index 0000000..ab4b46c
--- /dev/null
+++ b/src/frontend/app/components/stop/StopUsageChart.tsx
@@ -0,0 +1,143 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { BusStopUsagePoint } from "~/api/schema";
+
+interface StopUsageChartProps {
+  usage: BusStopUsagePoint[];
+}
+
+export const StopUsageChart = ({ usage }: StopUsageChartProps) => {
+  const { t } = useTranslation();
+
+  // Get current day of week (1=Monday, 7=Sunday)
+  // JS getDay(): 0=Sunday, 1=Monday ... 6=Saturday
+  const currentJsDay = new Date().getDay();
+  const initialDay = currentJsDay === 0 ? 7 : currentJsDay;
+
+  const currentHour = new Date().getHours();
+
+  const [selectedDay, setSelectedDay] = useState<number>(initialDay);
+
+  const days = [
+    { id: 1, label: t("days.monday", "L") },
+    { id: 2, label: t("days.tuesday", "M") },
+    { id: 3, label: t("days.wednesday", "X") },
+    { id: 4, label: t("days.thursday", "J") },
+    { id: 5, label: t("days.friday", "V") },
+    { id: 6, label: t("days.saturday", "S") },
+    { id: 7, label: t("days.sunday", "D") },
+  ];
+
+  const filteredData = useMemo(() => {
+    const data = usage.filter((u) => u.d === selectedDay);
+    // Ensure all 24 hours are represented
+    const fullDay = Array.from({ length: 24 }, (_, h) => {
+      const match = data.find((u) => u.h === h);
+      return { h, t: match?.t ?? 0 };
+    });
+    return fullDay;
+  }, [usage, selectedDay]);
+
+  const maxUsage = useMemo(() => {
+    const max = Math.max(...filteredData.map((d) => d.t));
+    return max === 0 ? 1 : max;
+  }, [filteredData]);
+
+  // Use a linear scale
+  const getScaledHeight = (value: number) => {
+    if (value <= 0) return 0;
+    return (value / maxUsage) * 100;
+  };
+
+  if (!usage || usage.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2 text-slate-900 dark:text-slate-100">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-1.5">
+        <h2 className="text-xl font-bold">
+          {t("stop.usage_title", "Ocupación por horas")}
+        </h2>
+        <div className="flex items-center gap-1 rounded-full border border-border bg-background/90 p-1 shadow-sm backdrop-blur w-fit overflow-x-auto">
+          {days.map((day) => (
+            <button
+              key={day.id}
+              type="button"
+              onClick={() => setSelectedDay(day.id)}
+              className={`h-7 min-w-7 px-2 rounded-full flex items-center justify-center transition-colors text-xs font-bold shrink-0 ${
+                selectedDay === day.id
+                  ? "bg-primary text-white"
+                  : "text-muted hover:text-text"
+              }`}
+            >
+              {day.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="p-4 sm:p-6 bg-slate-50 dark:bg-slate-900/50 rounded-2xl border border-border/50">
+        <div className="h-32 sm:h-48 flex items-end gap-1 sm:gap-1.5 px-0 sm:px-1 relative">
+          {/* Horizontal grid lines */}
+          <div className="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 py-1">
+            <div className="w-full border-t border-slate-400 border-dashed"></div>
+            <div className="w-full border-t border-slate-400 border-dashed"></div>
+            <div className="w-full border-t border-slate-400 border-dashed"></div>
+          </div>
+
+          {filteredData.map((data) => {
+            const height = getScaledHeight(data.t);
+            const isServiceHour = data.h >= 7 && data.h < 23;
+            const isCurrentHour =
+              selectedDay === initialDay && data.h === currentHour;
+
+            let barBg =
+              "bg-slate-300 dark:bg-slate-700 group-hover:bg-slate-400";
+            if (isCurrentHour) {
+              barBg =
+                "bg-red-500 group-hover:bg-red-600 shadow-[0_0_10px_rgba(239,68,68,0.4)]";
+            } else if (isServiceHour) {
+              barBg =
+                "bg-primary/60 group-hover:bg-primary shadow-[0_0_10px_rgba(var(--primary-rgb),0.2)]";
+            }
+
+            return (
+              <div
+                key={data.h}
+                tabIndex={0}
+                className="group relative flex-1 flex flex-col items-center h-full justify-end cursor-pointer outline-none"
+              >
+                <div
+                  className={`w-full rounded-t-md transition-all duration-500 ease-out min-h-[2px] ${barBg}`}
+                  style={{ height: `${height}%` }}
+                >
+                  {data.t > 0 && (
+                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-[10px] px-2 py-1 rounded-full opacity-0 group-hover:opacity-100 group-focus:opacity-100 group-active:opacity-100 transition-opacity whitespace-nowrap z-10 shadow-lg border border-white/10 pointer-events-none">
+                      {data.t}
+                    </div>
+                  )}
+                </div>
+                {data.h % 4 === 0 && (
+                  <span
+                    className={`text-[10px] font-medium mt-2 absolute -bottom-6 ${isCurrentHour ? "text-red-500 font-bold" : "text-slate-500"}`}
+                  >
+                    {data.h}h
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div className="h-6"></div> {/* Spacer for hour labels */}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <p className="text-xs text-slate-500 dark:text-slate-400 text-center italic leading-relaxed">
+          {t(
+            "stop.usage_disclaimer",
+            "Datos históricos aproximados de ocupación."
+          )}
+        </p>
+      </div>
+    </div>
+  );
+};
-- 
cgit v1.3