Add historian persistence and dashboard trend charts

2026-05-20 17:27:54 +01:00
parent 9fcf67c7ae
commit a30d41d031
16 changed files with 1304 additions and 48 deletions
@@ -0,0 +1,105 @@
+import { Gauge, Thermometer, Waves } from "lucide-react";
+import type { DashboardOverview } from "../../dashboard/types/DashboardOverview";
+import { StatusPill } from "../../dashboard/components/StatusPill";
+
+type Props = {
+  zones: DashboardOverview["climate"]["zones"];
+};
+
+function formatValue(value: number | null, unit: string, decimals = 1) {
+  if (value === null) return "--";
+  return `${value.toFixed(decimals)} ${unit}`;
+}
+
+export function DashboardClimateSection({ zones }: Props) {
+  return (
+    <section className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+          Clima por Zona
+        </h2>
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          Temperatura, humidade, CO₂ e estados principais dos equipamentos.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+        {zones.map((zone) => (
+          <div
+            key={zone.zoneNumber}
+            className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
+          >
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
+                Zona {zone.zoneNumber}
+              </h3>
+
+              <div className="flex gap-2">
+                <StatusPill active={zone.fansOn} activeLabel="Vent." inactiveLabel="Vent." />
+                <StatusPill active={zone.extractorsOn} activeLabel="Extr." inactiveLabel="Extr." />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
+              <MiniValue icon={Thermometer} label="Temperatura" value={formatValue(zone.temperature, "°C")} />
+              <MiniValue icon={Waves} label="Humidade" value={formatValue(zone.humidity, "%", 0)} />
+              <MiniValue icon={Gauge} label="CO₂" value={formatValue(zone.co2, "ppm", 0)} />
+            </div>
+
+            <div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
+              <OpeningBar label="Zenital E" value={zone.zenitalLeftPercent} />
+              <OpeningBar label="Zenital D" value={zone.zenitalRightPercent} />
+              <OpeningBar label="Lateral E" value={zone.lateralLeftPercent} />
+              <OpeningBar label="Lateral D" value={zone.lateralRightPercent} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+type MiniValueProps = {
+  icon: React.ElementType;
+  label: string;
+  value: string;
+};
+
+function MiniValue({ icon: Icon, label, value }: MiniValueProps) {
+  return (
+    <div className="rounded-xl bg-slate-50 p-3 dark:bg-slate-950">
+      <div className="mb-2 flex items-center gap-2 text-slate-500 dark:text-slate-400">
+        <Icon className="h-4 w-4" />
+        <span className="text-xs">{label}</span>
+      </div>
+      <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+type OpeningBarProps = {
+  label: string;
+  value: number | null;
+};
+
+function OpeningBar({ label, value }: OpeningBarProps) {
+  const safeValue = value ?? 0;
+
+  return (
+    <div>
+      <div className="mb-1 flex justify-between text-xs text-slate-500 dark:text-slate-400">
+        <span>{label}</span>
+        <span>{value === null ? "--" : `${value.toFixed(0)}%`}</span>
+      </div>
+
+      <div className="h-2 rounded-full bg-slate-200 dark:bg-slate-800">
+        <div
+          className="h-2 rounded-full bg-blue-500"
+          style={{ width: `${safeValue}%` }}
+        />
+      </div>
+    </div>
+  );
+}