feat: added dynamic data in dashboard and esp pages

nextjs-interface/src/app/dashboard/esp/[espName]/page.tsx

@@ -5,32 +5,30 @@ import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
 import { ChartElement } from "@/app/ui/dashboard/ChartElement";
 import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
 import { DateRangeElement } from "@/app/ui/dashboard/CalendarElement";
-import { useFetchData } from "@/lib/data";
-import { links } from "@/app/ui/dashboard/espLinks";
 
-const tempData = [{ name: "temperature", value: 23 }];
-const humiData = [{ name: "humidity", value: 38 }];
+// import scripts
+import findIpByName, { useFetchData, useLastData } from "@/lib/data";
 
 export default function Page({ params }: { params: any }) {
   const precision = "day";
 
-  function findIpByName(name: string) {
-    const link = links.find((link: { name: string }) => link.name === name);
-    return link ? link.ip : "IP non trouvée";
-  }
+    // get ip from esp name and fetch data
+    const ip = findIpByName(params.espName);
+    const allData = useFetchData(precision, ip);
 
-  const ip = findIpByName(params.espName);
-  const allData = useFetchData(precision, ip);
+    // get last data for temperature and humidity
+    const temperature = useLastData("temperature", ip);
+    const humidity = useLastData("humidity", ip);
 
-  return (
+    return (
     <div className="flex w-full min-w-[500px] flex-col gap-y-5 pt-2">
       <p className="text-2xl font-bold uppercase text-black">
         {params.espName}
       </p>
       <DateRangeElement />
       <div className="flex flex-col sm:flex-row">
-        <PieChartTemperature data={tempData} />
-        <PieChartHumidity data={humiData} />
+        <PieChartTemperature data={temperature} />
+        <PieChartHumidity data={humidity} />
       </div>
       <div>
         <ChartElement data={allData} />

nextjs-interface/src/app/dashboard/page.tsx

@@ -1,21 +1,24 @@
 "use client";
-import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
-import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
+
+// import hooks
 import { useState, useEffect } from "react";
+
+// import components
+import DataCircle from "@/app/ui/dashboard/DataCircle";
+
+// import functions
 import { useRouter } from "next/navigation";
 
+
 const ESPList = [
-  { name: "ESP N°1" },
-  { name: "ESP N°2" },
-  { name: "ESP N°3" },
-  { name: "ESP N°4" },
-  { name: "ESP N°5" },
-  { name: "ESP N°6" },
+  { name: "ESP N°1", ip:"172.16.5.178" },
+  { name: "ESP N°2" ,ip:"172.16.4.100"},
+  { name: "ESP N°3" ,ip:"172.16.5.178"},
+  { name: "ESP N°4", ip:"172.16.4.100" },
+  { name: "ESP N°5", ip:"172.16.5.178" },
+  { name: "ESP N°6", ip:"172.16.4.100"},
 ];
 
-const tempData = [{ name: "temperature", value: 28 }];
-const humiData = [{ name: "humidity", value: 35 }];
-
 export default function Page() {
   const [token, setToken] = useState<string | null>(null);
   const router = useRouter();
@@ -30,23 +33,13 @@ export default function Page() {
   }, [router]);
 
   return (
-    <>
-      <div className="px-auto grid h-fit w-full min-w-[500px] grid-cols-1 gap-10 xl:grid-cols-2 2xl:grid-cols-3">
-        {ESPList.map((esp, index) => (
-          <div
-            className="flex h-full flex-col items-center rounded-2xl border-2 text-center"
-            key={index}
-          >
-            <h2 className="w-full border-b-2 pb-5 pt-5 text-center text-gray-800">
-              {esp.name}
-            </h2>
-            <div className="sm:py-auto flex h-full w-full flex-row py-14">
-              <PieChartTemperature data={tempData} />
-              <PieChartHumidity data={humiData} />
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
+      <>
+        <div className="px-auto grid h-fit w-full min-w-[500px] grid-cols-1 gap-10 xl:grid-cols-2 2xl:grid-cols-3">
+          {ESPList.map((esp, index) => (
+              <DataCircle key={index} esp={esp} />
+
+          ))}
+        </div>
+      </>
   );
-}
+}

nextjs-interface/src/app/ui/dashboard/DataCircle.tsx

@@ -0,0 +1,21 @@
+import {useLastData} from "@/lib/data";
+import {PieChartTemperature} from "@/app/ui/dashboard/PieChartTemperature";
+import {PieChartHumidity} from "@/app/ui/dashboard/PieChartHumidity";
+
+export default function DataCircle({ esp }: { esp: any }) {
+    const ip = esp.ip;
+    const temperature = useLastData("temperature", ip);
+    const humidity = useLastData("humidity", ip);
+
+    return (
+        <div className="flex h-full flex-col items-center rounded-2xl border-2 text-center">
+            <h2 className="w-full border-b-2 pb-5 pt-5 text-center text-gray-800">
+                {esp.name}
+            </h2>
+            <div className="sm:py-auto flex h-full w-full flex-row py-14">
+                <PieChartTemperature data={temperature} />
+                <PieChartHumidity data={humidity} />
+            </div>
+        </div>
+    );
+}

nextjs-interface/src/app/ui/dashboard/PieChartHumidity.tsx

@@ -15,21 +15,21 @@ interface CustomizedLabelProps {
 }
 
 export function PieChartHumidity({ data }: { data: any }) {
-  let newFade = getHumiColor(data[0].value);
+  let newFade = getHumiColor(data);
 
   // Fonction pour rendre le libellé au centre du cercle
-  const renderCustomizedLabel = ({ cx, cy, index }: CustomizedLabelProps) => {
+  const renderCustomizedLabel = ({ cx, cy }: CustomizedLabelProps) => {
     return (
-      <text
-        x={cx}
-        y={cy}
-        fill="black"
-        textAnchor="middle"
-        dominantBaseline="central"
-        fontSize={24}
-      >
-        {`${data[index].value}%`}
-      </text>
+        <text
+            x={cx}
+            y={cy}
+            fill="black"
+            textAnchor="middle"
+            dominantBaseline="central"
+            fontSize={24}
+        >
+          {`${data}%`}
+        </text>
     );
   };
 
@@ -38,24 +38,29 @@ export function PieChartHumidity({ data }: { data: any }) {
     return 270 - humidity * 3.6;
   };
 
+  // Préparation des données pour le graphique
+  const chartData = [
+    { name: "Humidity", value: data },
+  ];
+
   return (
-    <div className="flex h-full w-full flex-col justify-center">
-      <h2 className="pr-5">Humidité :</h2>
-      <PieChart width={200} height={200}>
-        <Pie
-          innerRadius={60}
-          dataKey="value"
-          startAngle={270}
-          endAngle={calculateEndAngle(data[0].value)}
-          data={data}
-          cx={100}
-          cy={110}
-          outerRadius={80}
-          fill={newFade}
-          label={renderCustomizedLabel}
-          labelLine={false}
-        />
-      </PieChart>
-    </div>
+      <div className="flex h-full w-full flex-col justify-center">
+        <h2 className="pr-5">Humidité :</h2>
+        <PieChart width={200} height={200}>
+          <Pie
+              dataKey="value"
+              startAngle={270}
+              endAngle={calculateEndAngle(data)}
+              data={chartData}
+              cx={100}
+              cy={110}
+              innerRadius={60}
+              outerRadius={80}
+              fill={newFade}
+              label={renderCustomizedLabel}
+              labelLine={false}
+          />
+        </PieChart>
+      </div>
   );
 }

nextjs-interface/src/app/ui/dashboard/PieChartTemperature.tsx

@@ -15,10 +15,10 @@ interface CustomizedLabelProps {
 }
 
 export function PieChartTemperature({ data }: { data: any }) {
-  let newColor = getTempColor(data[0].value);
+  let newColor = getTempColor(data);
 
   // Fonction pour rendre le libellé au centre du cercle
-  const renderCustomizedLabel = ({ cx, cy, index }: CustomizedLabelProps) => {
+  const renderCustomizedLabel = ({ cx, cy }: CustomizedLabelProps) => {
     return (
       <text
         x={cx}
@@ -28,14 +28,19 @@ export function PieChartTemperature({ data }: { data: any }) {
         dominantBaseline="central"
         fontSize={24}
       >
-        {`${data[index].value} °C`}
+        {`${data} °C`}
       </text>
     );
   };
   const calculateEndAngle = (temperature: number) => {
     return 270 - temperature * 8;
   };
 
+  // Préparation des données pour le graphique + arrondire la température
+  const chartData = [
+    { name: "temperature", value: data },
+  ];
+
   return (
     <div className="flex h-full w-full flex-col justify-center">
       <h2 className="pr-5">Température :</h2>
@@ -44,8 +49,8 @@ export function PieChartTemperature({ data }: { data: any }) {
           innerRadius={60}
           dataKey="value"
           startAngle={270}
-          endAngle={calculateEndAngle(data[0].value)}
-          data={data}
+          endAngle={calculateEndAngle(data)}
+          data={chartData}
           cx={100}
           cy={110}
           outerRadius={80}

nextjs-interface/src/lib/data.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { SampleContext, getToken, data, avgData } from "@/lib/context";
+import {links} from "@/app/ui/dashboard/espLinks";
 
 export const useFetchData = (precision: string, ip: string) => {
   const [data, setData] = useState<avgData[]>([]);
@@ -38,3 +39,8 @@ export function useLastData(type: string, ip: string) {
   }, [ip, type]);
   return value;
 }
+
+export default function findIpByName(name: string) {
+  const link = links.find((link: { name: string }) => link.name === name);
+  return link ? link.ip : "IP non trouvée";
+}