added input for name

app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx

@@ -1,22 +1,64 @@
-import { useMemo } from "react";
-import { Doughnut, Line } from "react-chartjs-2";
+import React, { useEffect, useMemo, useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import io from "socket.io-client";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import useChartStore from "../../../../store/useChartStore";
+import { useWidgetStore } from "../../../../store/useWidgetStore";
+import axios from "axios";
 
 interface ChartComponentProps {
+  id: string;
   type: any;
   title: string;
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
 }
 
 const DoughnutGraphComponent = ({
+  id,
+  type,
   title,
   fontFamily,
   fontSize,
   fontWeight = "Regular",
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  const { themeColor } = useThemeStore();
+  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const [measurements, setmeasurements] = useState<any>({});
+  const [duration, setDuration] = useState("1h")
+  const [name, setName] = useState("Widget")
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+    labels: [],
+    datasets: [],
+  });
+   const { selectedChartId } = useWidgetStore();
+
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  const email = localStorage.getItem("email") || "";
+  const organization = email?.split("@")[1]?.split(".")[0]
+  const defaultData = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "Dataset",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: ["#6f42c1"],
+        borderColor: "#b392f0",
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
+  // Memoize Theme Colors
+  const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
+  const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
+
+  // Memoize Font Styling
   const chartFontWeightMap = useMemo(
     () => ({
       Light: "lighter" as const,
@@ -26,19 +68,9 @@ const DoughnutGraphComponent = ({
     []
   );
 
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
+  const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
 
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
   const chartFontStyle = useMemo(
     () => ({
       family: fontFamily || "Arial",
@@ -48,46 +80,110 @@ const DoughnutGraphComponent = ({
     [fontFamily, fontSizeValue, fontWeightValue]
   );
 
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false, // This hides the x-axis labels
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: name,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
           },
         },
-      },
-    }),
-    [title, chartFontStyle]
-  );
+        scales: {
+          // x: {
+          //   ticks: {
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
+        },
+      }),
+      [title, chartFontStyle, name]
+    );
 
-  const chartData = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
-        borderColor: "#ffffff", // Keeping border color white
-        borderWidth: 2,
-        fill: false,
-      },
-    ],
-  };
+    // useEffect(() => {console.log(measurements);
+    // },[measurements])
 
-  return <Doughnut data={chartData} options={options} />;
+  useEffect(() => {
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+
+    const socket = io(`http://${iotApiUrl}`);
+
+    const inputData = {
+      measurements,
+      duration,
+      interval: 1000,
+    };
+
+
+    const startStream = () => {  
+      socket.emit("lineInput", inputData);
+    };
+
+    socket.on("connect", startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responseData = response.data;
+
+      // Extract timestamps and values
+      const labels = responseData.time;
+      const datasets = Object.keys(measurements).map((key) => {
+        const measurement = measurements[key];
+        const datasetKey = `${measurement.name}.${measurement.fields}`;
+        return {
+          label: datasetKey,
+          data: responseData[datasetKey]?.values ?? [],
+          backgroundColor: "#6f42c1",
+          borderColor: "#b392f0",
+          borderWidth: 1,
+        };
+      });
+
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+      socket.disconnect();
+    };
+  }, [measurements, duration, iotApiUrl]);
+
+  const fetchSavedInputes = async() => {
+    
+    if (id !== "") {
+      try {
+        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        if (response.status === 200) {
+          setmeasurements(response.data.Data.measurements)
+          setDuration(response.data.Data.duration)
+          setName(response.data.widgetName)
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchSavedInputes();
+  }, []);
+
+  useEffect(() => {
+    if (selectedChartId?.id === id) {
+      fetchSavedInputes();
+    }
+  }
+  ,[chartMeasurements, chartDuration, widgetName])
+
+  return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };
 
-export default DoughnutGraphComponent;
+export default DoughnutGraphComponent;