feat: Seperate days by a bar and added time stamp of data on graph (#103

)

* refactor: added timestamp on graph hover

* refactor: added import react from reacr

* feat: added bar for every new day

* style: reformated file and removed unused import

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

@@ -1,5 +1,4 @@
-"use client";
-
+import React, { useContext } from "react";
 import {
   LineChart,
   Line,
@@ -10,16 +9,29 @@ import {
   ReferenceLine,
   ResponsiveContainer,
 } from "recharts";
-
-import React, { useContext } from "react";
 import { avgData } from "@/lib/context";
 import { ThemeContext } from "@/lib/Theme";
 
 export function ChartElement({ data }: { data: avgData[] }) {
   const { darkMode } = useContext(ThemeContext);
 
-  let textColor;
-  darkMode ? (textColor = "white") : (textColor = "");
+  let textColor = darkMode ? "white" : "";
+
+  if (!Array.isArray(data) || data === undefined) {
+    console.error("Data is not an array or is undefined");
+    return null;
+  }
+
+  const dateChanges = data.reduce((acc: any[], curr, index, src) => {
+    if (
+      index > 0 &&
+      new Date(curr.date).getDate() !== new Date(src[index - 1].date).getDate()
+    ) {
+      acc.push(curr.date);
+    }
+    return acc;
+  }, []);
+
   return (
     <ResponsiveContainer width="100%" height={500}>
       <LineChart width={800} height={500} data={data}>
@@ -41,11 +53,6 @@ export function ChartElement({ data }: { data: avgData[] }) {
           stroke={textColor}
           padding={{ top: 50, bottom: 10 }}
         />
-        <ReferenceLine
-          y={50}
-          label={{ value: "Max humidity", position: "top", stroke: textColor }}
-          stroke="red"
-        />
         <Tooltip
           cursor={{
             stroke: "#334155",
@@ -60,7 +67,13 @@ export function ChartElement({ data }: { data: avgData[] }) {
                     <div className="flex flex-col">
                       <h1 className="text-black dark:text-zinc-50">
                         Date :{" "}
-                        {new Date(payload[0].payload.date).toLocaleDateString()}
+                        {new Date(
+                          payload[0].payload.date,
+                        ).toLocaleDateString() +
+                          " " +
+                          new Date(
+                            payload[0].payload.date,
+                          ).toLocaleTimeString()}
                       </h1>
                       <p className="text-black dark:text-zinc-50">
                         Temperature :{" "}
@@ -90,6 +103,15 @@ export function ChartElement({ data }: { data: avgData[] }) {
           strokeWidth="2px"
           stroke="#82ca9d"
         />
+        {dateChanges.map((date, index) => (
+          <ReferenceLine
+            key={index}
+            x={date}
+            stroke="Gray"
+            ifOverflow="extendDomain"
+            label={{ value: "Date change", position: "top", fill: "green" }}
+          />
+        ))}
       </LineChart>
     </ResponsiveContainer>
   );

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

@@ -1,7 +1,7 @@
 "use client";
 
 // import nextjs and react
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";