add accumulated analytics with radiation integration

src/features/meteo/components/AccumulatedHistoryModal.tsx

@@ -0,0 +1,300 @@
+import { useMemo, useState } from "react";
+import { BarChart3, Table2, X } from "lucide-react";
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from "recharts";
+import type { ModuleSensorResponse } from "../../../types/meteo";
+import type {
+    AccumulatedBucket,
+    AccumulatedRange,
+} from "../hooks/useAccumulatedHistory";
+
+type Props = {
+    sensor: ModuleSensorResponse | null;
+    title: string;
+    theme: "dark" | "light";
+    buckets: AccumulatedBucket[];
+    loading: boolean;
+    range: AccumulatedRange;
+    onRangeChange: (range: AccumulatedRange) => void;
+    onClose: () => void;
+};
+
+const RANGE_OPTIONS: Array<{ label: string; value: AccumulatedRange }> = [
+    { label: "7D", value: "7d" },
+    { label: "30D", value: "30d" },
+    { label: "Mês", value: "month" },
+    { label: "Ano", value: "year" },
+];
+
+export function AccumulatedHistoryModal({
+    sensor,
+    title,
+    theme,
+    buckets,
+    loading,
+    range,
+    onRangeChange,
+    onClose,
+}: Props) {
+    const isDark = theme === "dark";
+    const [mode, setMode] = useState<"chart" | "table">("chart");
+
+    const stats = useMemo(() => {
+        if (buckets.length === 0) {
+            return { total: 0, average: 0, max: 0 };
+        }
+
+        const values = buckets.map((bucket) => bucket.total);
+
+        return {
+            total: values.reduce((sum, value) => sum + value, 0),
+            average: values.reduce((sum, value) => sum + value, 0) / values.length,
+            max: Math.max(...values),
+        };
+    }, [buckets]);
+
+    if (!sensor) return null;
+
+    const unit = sensor.unit ?? buckets[0]?.unit ?? "";
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-md">
+            <div
+                className={
+                    isDark
+                        ? "flex h-[82vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-[#24384d] bg-[#071120] text-white shadow-2xl"
+                        : "flex h-[82vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-2xl"
+                }
+            >
+                <header className="flex items-start justify-between gap-5 px-6 py-4">
+                    <div>
+                        <p className="mb-1 text-[11px] font-black uppercase tracking-[0.42em] text-cyan-400">
+                            Acumulado
+                        </p>
+
+                        <h2 className="text-xl font-black">{title}</h2>
+
+                        <p className="mt-1 text-xs text-slate-400">
+                            Chave: meteo.{sensor.key}
+                        </p>
+                    </div>
+
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        className="p-2 text-slate-400 hover:text-white"
+                    >
+                        <X className="h-5 w-5" />
+                    </button>
+                </header>
+
+                <main className="flex min-h-0 flex-1 flex-col px-6 pb-5">
+                    <section
+                        className={
+                            isDark
+                                ? "flex min-h-0 flex-1 flex-col rounded-xl border border-[#24384d] bg-[#0a1728] p-4"
+                                : "flex min-h-0 flex-1 flex-col rounded-xl border border-slate-200 bg-slate-50 p-4"
+                        }
+                    >
+                        <div className="mb-4 flex flex-wrap items-center gap-2">
+                            {RANGE_OPTIONS.map((option) => (
+                                <button
+                                    key={option.value}
+                                    type="button"
+                                    onClick={() => onRangeChange(option.value)}
+                                    className={
+                                        range === option.value
+                                            ? "rounded-lg bg-cyan-400 px-4 py-2 text-xs font-black text-slate-950 shadow-lg shadow-cyan-400/20"
+                                            : isDark
+                                                ? "rounded-lg bg-slate-900/70 px-4 py-2 text-xs font-bold text-slate-300 hover:bg-slate-800"
+                                                : "rounded-lg bg-white px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100"
+                                    }
+                                >
+                                    {option.label}
+                                </button>
+                            ))}
+
+                            <div className="ml-auto flex gap-2">
+                                <button
+                                    type="button"
+                                    onClick={() => setMode("chart")}
+                                    className={toggleButtonClass(isDark, mode === "chart")}
+                                >
+                                    <BarChart3 className="mr-2 inline h-4 w-4" />
+                                    Gráfico
+                                </button>
+
+                                <button
+                                    type="button"
+                                    onClick={() => setMode("table")}
+                                    className={toggleButtonClass(isDark, mode === "table")}
+                                >
+                                    <Table2 className="mr-2 inline h-4 w-4" />
+                                    Tabela
+                                </button>
+                            </div>
+                        </div>
+
+                        <div className="mb-4 grid grid-cols-3 gap-3">
+                            <StatCard theme={theme} label="Total" value={formatValue(stats.total, unit)} />
+                            <StatCard theme={theme} label="Média" value={formatValue(stats.average, unit)} />
+                            <StatCard theme={theme} label="Máximo" value={formatValue(stats.max, unit)} />
+                        </div>
+
+                        <div className="min-h-0 flex-1">
+                            {loading ? (
+                                <EmptyState>A carregar acumulados...</EmptyState>
+                            ) : buckets.length === 0 ? (
+                                <EmptyState>Sem dados acumulados para este período.</EmptyState>
+                            ) : mode === "chart" ? (
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <BarChart data={buckets}>
+                                        <CartesianGrid
+                                            stroke="#1f3348"
+                                            strokeDasharray="3 3"
+                                            vertical={false}
+                                        />
+
+                                        <XAxis
+                                            dataKey="label"
+                                            tick={{ fill: "#94a3b8", fontSize: 11 }}
+                                            tickLine={false}
+                                            axisLine={{ stroke: "#334155" }}
+                                            minTickGap={20}
+                                        />
+
+                                        <YAxis
+                                            tick={{ fill: "#94a3b8", fontSize: 11 }}
+                                            tickLine={false}
+                                            axisLine={{ stroke: "#334155" }}
+                                            width={50}
+                                        />
+
+                                        <Tooltip
+                                            cursor={{ fill: "rgba(34, 211, 238, 0.08)" }}
+                                            contentStyle={{
+                                                background: "#111827",
+                                                border: "1px solid #334155",
+                                                borderRadius: "10px",
+                                                color: "#fff",
+                                            }}
+                                            formatter={(value) => [
+                                                formatValue(Number(value), unit),
+                                                "Acumulado",
+                                            ]}
+                                        />
+
+                                        <Bar
+                                            dataKey="total"
+                                            fill="#22d3ee"
+                                            radius={[6, 6, 0, 0]}
+                                            isAnimationActive={false}
+                                        />
+                                    </BarChart>
+                                </ResponsiveContainer>
+                            ) : (
+                                <div className="h-full overflow-auto rounded-xl border border-slate-700/60">
+                                    <table className="w-full text-left text-sm">
+                                        <thead className="sticky top-0 bg-[#0b1828] text-xs uppercase tracking-[0.16em] text-slate-400">
+                                            <tr>
+                                                <th className="px-4 py-3">Período</th>
+                                                <th className="px-4 py-3">Início</th>
+                                                <th className="px-4 py-3">Fim</th>
+                                                <th className="px-4 py-3 text-right">Total</th>
+                                            </tr>
+                                        </thead>
+
+                                        <tbody>
+                                            {buckets.map((bucket) => (
+                                                <tr
+                                                    key={`${bucket.from}-${bucket.to}`}
+                                                    className="border-t border-slate-700/60 text-slate-200"
+                                                >
+                                                    <td className="px-4 py-3 font-semibold">
+                                                        {bucket.label}
+                                                    </td>
+                                                    <td className="px-4 py-3 text-slate-400">
+                                                        {formatDate(bucket.from)}
+                                                    </td>
+                                                    <td className="px-4 py-3 text-slate-400">
+                                                        {formatDate(bucket.to)}
+                                                    </td>
+                                                    <td className="px-4 py-3 text-right font-black text-cyan-300">
+                                                        {formatValue(bucket.total, unit)}
+                                                    </td>
+                                                </tr>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            )}
+                        </div>
+                    </section>
+                </main>
+            </div>
+        </div>
+    );
+}
+
+function EmptyState({ children }: { children: string }) {
+    return (
+        <div className="flex h-full items-center justify-center text-sm text-slate-400">
+            {children}
+        </div>
+    );
+}
+
+function StatCard({
+    theme,
+    label,
+    value,
+}: {
+    theme: "dark" | "light";
+    label: string;
+    value: string;
+}) {
+    const isDark = theme === "dark";
+
+    return (
+        <div
+            className={
+                isDark
+                    ? "rounded-xl border border-slate-700/60 bg-[#071120] p-3"
+                    : "rounded-xl border border-slate-200 bg-white p-3"
+            }
+        >
+            <p className="text-xs text-slate-400">{label}</p>
+            <p className="mt-1 text-xl font-black">{value}</p>
+        </div>
+    );
+}
+
+function toggleButtonClass(isDark: boolean, active: boolean) {
+    if (active) {
+        return "rounded-lg border border-cyan-400/40 bg-cyan-400/10 px-3 py-2 text-xs font-semibold text-cyan-300";
+    }
+
+    return isDark
+        ? "rounded-lg border border-slate-700 px-3 py-2 text-xs font-semibold text-slate-200 hover:bg-slate-800"
+        : "rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100";
+}
+
+function formatValue(value: number, unit: string) {
+    return `${value.toFixed(1)}${unit ? ` ${unit}` : ""}`;
+}
+
+function formatDate(value: string) {
+    return new Date(value).toLocaleString("pt-PT", {
+        day: "2-digit",
+        month: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}

src/features/meteo/hooks/useAccumulatedHistory.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import type { ModuleSensorResponse } from "../../../types/meteo";
+
+export type AccumulatedBucket = {
+    label: string;
+    from: string;
+    to: string;
+    total: number;
+    unit?: string;
+};
+
+type AccumulatedRange = "7d" | "30d" | "month" | "year";
+
+const BACKEND_URL = "http://localhost:18450";
+
+export function useAccumulatedHistory(
+    sensor: ModuleSensorResponse | null,
+    range: AccumulatedRange,
+) {
+    const [buckets, setBuckets] = useState<AccumulatedBucket[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!sensor) {
+            setBuckets([]);
+            return;
+        }
+
+        const sensorKey = sensor.key;
+        const controller = new AbortController();
+
+        async function loadAccumulated() {
+            try {
+                setLoading(true);
+
+                const params = new URLSearchParams({
+                    key: `meteo.${sensorKey}`,
+                    range,
+                });
+
+                const response = await fetch(
+                    `${BACKEND_URL}/api/historian/accumulated?${params.toString()}`,
+                    { signal: controller.signal },
+                );
+
+                if (!response.ok) {
+                    throw new Error("Failed to load accumulated history");
+                }
+
+                const payload = (await response.json()) as AccumulatedBucket[];
+                setBuckets(payload);
+            } catch (error) {
+                if (controller.signal.aborted) return;
+
+                console.error("Failed to load accumulated history", error);
+                setBuckets([]);
+            } finally {
+                if (!controller.signal.aborted) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        loadAccumulated();
+
+        return () => controller.abort();
+    }, [sensor?.key, range]);
+
+    return {
+        buckets,
+        loading,
+    };
+}
+
+export type { AccumulatedRange };

src/features/meteo/pages/MeteoPage.tsx

@@ -3,7 +3,6 @@ import {
     ChartNoAxesColumnIncreasing,
     Table2,
     CloudRain,
-    Compass,
     Droplets,
     MoreHorizontal,
     Radio,
@@ -17,6 +16,11 @@ import { useMeteoModuleStream } from "../hooks/useMeteoModuleStream";
 import { MeteoHistoryModal } from "../components/MeteoHistoryModal";
 import type { ModuleSensorResponse } from "../../../types/meteo";
 import { useMeteoHistory } from "../hooks/useMeteoHistory";
+import { AccumulatedHistoryModal } from "../components/AccumulatedHistoryModal";
+import {
+    useAccumulatedHistory,
+    type AccumulatedRange,
+} from "../hooks/useAccumulatedHistory";
 
 type MeteoPageProps = {
     theme: "dark" | "light";
@@ -59,13 +63,22 @@ export function MeteoPage({ theme }: MeteoPageProps) {
     const isRaining = rainValue !== null && rainValue > 0;
 
     const [openMenu, setOpenMenu] = useState<string | null>(null);
-    const [selectedTable, setSelectedTable] = useState<{
-        title: string;
-        sensors: ModuleSensorResponse[];
-    } | null>(null);
 
     const meteoHistory = useMeteoHistory(selectedSensor);
 
+    const [selectedAccumulated, setSelectedAccumulated] = useState<{
+        title: string;
+        sensor: ModuleSensorResponse | null;
+    } | null>(null);
+
+    const [accumulatedRange, setAccumulatedRange] =
+        useState<AccumulatedRange>("7d");
+
+    const accumulatedHistory = useAccumulatedHistory(
+        selectedAccumulated?.sensor ?? null,
+        accumulatedRange,
+    );
+
     useEffect(() => {
         const samples: Array<[string, number | null]> = [
             ["temperatura.exterior", numericValue(temperature)],
@@ -185,9 +198,9 @@ export function MeteoPage({ theme }: MeteoPageProps) {
                                         label: "Ver acumulado",
                                         icon: <Table2 className="h-4 w-4" />,
                                         onClick: () => {
-                                            setSelectedTable({
+                                            setSelectedAccumulated({
                                                 title: "Precipitação acumulada",
-                                                sensors: rainSensors,
+                                                sensor: rainSensor ?? null,
                                             });
 
                                             setOpenMenu(null);
@@ -254,11 +267,9 @@ export function MeteoPage({ theme }: MeteoPageProps) {
                                         label: "Ver acumulado",
                                         icon: <Table2 className="h-4 w-4" />,
                                         onClick: () => {
-                                            setSelectedTable({
+                                            setSelectedAccumulated({
                                                 title: "Radiação solar acumulada",
-                                                sensors: sensors.filter((sensor) =>
-                                                    sensor.key.startsWith("radiacao."),
-                                                ),
+                                                sensor: radiation ?? null,
                                             });
 
                                             setOpenMenu(null);
@@ -287,6 +298,17 @@ export function MeteoPage({ theme }: MeteoPageProps) {
                 onHoursChange={meteoHistory.setHours}
                 onClose={() => setSelectedSensor(null)}
             />
+
+            <AccumulatedHistoryModal
+                sensor={selectedAccumulated?.sensor ?? null}
+                title={selectedAccumulated?.title ?? ""}
+                theme={theme}
+                buckets={accumulatedHistory.buckets}
+                loading={accumulatedHistory.loading}
+                range={accumulatedRange}
+                onRangeChange={setAccumulatedRange}
+                onClose={() => setSelectedAccumulated(null)}
+            />
         </>
     );
 }