added input for name

app/.env

@@ -7,6 +7,8 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
 # Base URL for the server REST API, used for HTTP requests to the backend server.
 REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
 
+REACT_APP_SERVER_REST_API_LOCAL_BASE_URL=192.168.0.102:5000
+
 # Base URL for the server marketplace API.
 REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
 

app/package-lock.json

@@ -26,6 +26,7 @@
         "@types/react-dom": "^18.3.0",
         "@use-gesture/react": "^10.3.1",
         "chart.js": "^4.4.8",
+        "chartjs-plugin-annotation": "^3.1.0",
         "glob": "^11.0.0",
         "gsap": "^3.12.5",
         "leva": "^0.10.0",
@@ -2018,7 +2019,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2030,7 +2031,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4263,25 +4264,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -8498,6 +8499,15 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-annotation": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=4.0.0"
+      }
+    },
     "node_modules/check-more-types": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
@@ -9006,7 +9016,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9874,7 +9884,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15224,7 +15234,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20683,7 +20693,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20726,7 +20736,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20738,7 +20748,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21225,7 +21235,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22284,7 +22294,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -21,6 +21,7 @@
     "@types/react-dom": "^18.3.0",
     "@use-gesture/react": "^10.3.1",
     "chart.js": "^4.4.8",
+    "chartjs-plugin-annotation": "^3.1.0",
     "glob": "^11.0.0",
     "gsap": "^3.12.5",
     "leva": "^0.10.0",

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -58,11 +58,11 @@
 //         name: string;
 //         fields: string;
 //       }
-      
+
 //       interface InputData {
 //         [key: string]: Measurement;
 //       }
-      
+
 //       const extractMeasurements = (input: InputData): Measurement[] => {
 //         return Object.values(input);
 //       };
@@ -71,7 +71,7 @@
 //         const measurementsData = extractMeasurements(selections);
 //         setMeasurements(measurementsData);
 //     }, [selections]);
-    
+
 
 //     return (
 //         <>
@@ -125,20 +125,22 @@ import useChartStore from "../../../../../store/useChartStore";
 import { useSelectedZoneStore } from "../../../../../store/useZoneStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
+import RenameInput from "../../../../ui/inputs/RenameInput";
 
 type Props = {};
 
 const LineGrapInput = (props: Props) => {
-  const { setMeasurements, updateDuration } = useChartStore();
+  const [widgetName, setWidgetName] = useState('Widget');
+  const { setMeasurements, updateDuration, updateName } = useChartStore();
   const [duration, setDuration] = useState('1h')
   const [dropDowndata, setDropDownData] = useState({});
-  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({}); 
+  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>({});
   const { selectedZone } = useSelectedZoneStore();
   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]
-  
+
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
@@ -157,13 +159,14 @@ const LineGrapInput = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    const fetchSavedInputes = async() => {
+    const fetchSavedInputes = async () => {
       if (selectedChartId.id !== "") {
         try {
-          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
+          const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`);
           if (response.status === 200) {
             setSelections(response.data.Data.measurements)
             setDuration(response.data.Data.duration)
+            setWidgetName(response.data.widgetName)
           } else {
             console.log("Unexpected response:", response);
           }
@@ -181,17 +184,19 @@ const LineGrapInput = (props: Props) => {
   useEffect(() => {
     setMeasurements(selections);
     updateDuration(duration);
-  }, [selections, duration]);
+    updateName(widgetName);
+  }, [selections, duration, widgetName]);
 
 
-  const sendInputes = async(inputMeasurement: any, inputDuration: any) => {
+  const sendInputes = async (inputMeasurement: any, inputDuration: any, inputName: any) => {
     try {
-      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,{
+      const response = await axios.post(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/widget/save`, {
         organization: organization,
         zoneId: selectedZone.zoneId,
-        widget:{
+        widget: {
           id: selectedChartId.id,
           panel: selectedChartId.panel,
+          widgetName: inputName,
           Data: {
             measurements: inputMeasurement,
             duration: inputDuration
@@ -210,35 +215,47 @@ const LineGrapInput = (props: Props) => {
     }
   }
 
-  const handleSelect = async(inputKey: string, selectedData: { name: string; fields: string } | null) => {
+  const handleSelect = async (inputKey: string, selectedData: { name: string; fields: string } | null) => {
-    
+
-      // async() => {
+    // async() => {
-      const newSelections = { ...selections };
+    const newSelections = { ...selections };
-      if (selectedData === null) {
+    if (selectedData === null) {
-        delete newSelections[inputKey];
+      delete newSelections[inputKey];
-      } else {
+    } else {
-        newSelections[inputKey] = selectedData;
+      newSelections[inputKey] = selectedData;
-      }
+    }
-      // setMeasurements(newSelections); // Update Zustand store
+    // setMeasurements(newSelections); // Update Zustand store
-      console.log(newSelections);
+    console.log(newSelections);
-      if ( await sendInputes(newSelections, duration)) {
+    if (await sendInputes(newSelections, duration, widgetName)) {
-        setSelections(newSelections);
+      setSelections(newSelections);
-      }
+    }
-      // sendInputes(newSelections, duration); // Send data to server
+    // sendInputes(newSelections, duration); // Send data to server
-      // return newSelections;
+    // return newSelections;
     // };
   };
 
-  const handleSelectDuration = async(option: string) => {
+  const handleSelectDuration = async (option: string) => {
-    if ( await sendInputes(selections, option)) {
+    if (await sendInputes(selections, option, widgetName)) {
       setDuration(option);
     }
     // setDuration(option);
   };
 
+  const handleNameChange = async (name:any) => {
+    console.log('name change requested',name);
+    
+    if (await sendInputes(selections, duration, name)) {
+      setWidgetName(name);
+    }
+  }
+
   return (
     <>
       <div className="inputs-wrapper">
+        <div className="datas">
+          <div className="datas__label">Widget name</div>
+          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+        </div>
         {[...Array(6)].map((_, index) => {
           const inputKey = `input${index + 1}`;
           return (

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
 import LineGrapInput from "../IotInputCards/LineGrapInput";
+import RenameInput from "../../../../ui/inputs/RenameInput";
 
 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -107,27 +108,32 @@ const Data = () => {
         [selectedChartId.id]: currentChartData.map((group) =>
           group.id === groupId
             ? {
-                ...group,
+              ...group,
-                children: group.children.filter(
+              children: group.children.filter(
-                  (child) => child.id !== childId
+                (child) => child.id !== childId
-                ),
+              ),
-              }
+            }
             : group
         ),
       };
     });
   };
+  console.log("selectedChartId", selectedChartId);
 
   return (
     <div className="dataSideBar">
-      {selectedChartId?.title && (
+      {/* {selectedChartId?.title && (
         <div className="sideBarHeader">{selectedChartId?.title}</div>
-      )}
+      )} */}
+
+
+      {/* <RenameInput value={selectedChartId?.title || "untited"} /> */}
+
       {/* Render groups dynamically */}
       {
         chartDataGroups[selectedChartId?.id] && <LineGrapInput />
       }
-      
+
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>

app/src/components/ui/componets/DraggableWidget.tsx

@@ -287,18 +287,11 @@ export const DraggableWidget = ({
         )}
         {widget.type === "doughnut" && (
           <DoughnutGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-            data={{
-              measurements: [
-                { name: "testDevice", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
-              ],
-              interval: 1000,
-              duration: "1h",
-            }}
           />
         )}
         {widget.type === "polarArea" && (

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

@@ -211,9 +211,10 @@ const BarGraphComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  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: [],
@@ -236,6 +237,10 @@ const BarGraphComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -270,7 +275,7 @@ const BarGraphComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -285,7 +290,7 @@ const BarGraphComponent = ({
           },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -304,15 +309,12 @@ const BarGraphComponent = ({
 
 
     const startStream = () => {  
-      console.log("inputtttttttttt",inputData);
       socket.emit("lineInput", inputData);
     };
 
     socket.on("connect", startStream);
 
     socket.on("lineOutput", (response) => {
-      console.log("responce dataaaaaaaaa",response.data);
-      
       const responseData = response.data;
 
       // Extract timestamps and values
@@ -343,10 +345,11 @@ const BarGraphComponent = ({
     
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        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);
         }
@@ -365,7 +368,7 @@ const BarGraphComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

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

@@ -1,22 +1,64 @@
-import { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
-import { Doughnut, Line } from "react-chartjs-2";
+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(
+  const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
 
-  // 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(
+    // Memoize Chart Options
-    () => ({
+    const options = useMemo(
-      responsive: true,
+      () => ({
-      maintainAspectRatio: false,
+        responsive: true,
-      plugins: {
+        maintainAspectRatio: false,
-        title: {
+        plugins: {
-          display: true,
+          title: {
-          text: title,
+            display: true,
-          font: chartFontStyle,
+            text: name,
-        },
+            font: chartFontStyle,
-        legend: {
+          },
-          display: false,
+          legend: {
-        },
+            display: false,
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false, // This hides the x-axis labels
           },
         },
-      },
+        scales: {
-    }),
+          // x: {
-    [title, chartFontStyle]
+          //   ticks: {
-  );
+          //     display: true, // This hides the x-axis labels
+          //   },
+          // },
+        },
+      }),
+      [title, chartFontStyle, name]
+    );
 
-  const chartData = {
+    // useEffect(() => {console.log(measurements);
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    // },[measurements])
-    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,
-      },
-    ],
-  };
 
-  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;

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

@@ -24,9 +24,10 @@ const LineGraphComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  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: [],
@@ -49,6 +50,10 @@ const LineGraphComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -83,7 +88,7 @@ const LineGraphComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -98,7 +103,7 @@ const LineGraphComponent = ({
           },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -153,10 +158,11 @@ const LineGraphComponent = ({
     
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        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);
         }
@@ -175,7 +181,7 @@ const LineGraphComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

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

@@ -210,9 +210,10 @@ const PieChartComponent = ({
   fontWeight = "Regular",
 }: ChartComponentProps) => {
   const { themeColor } = useThemeStore();
-  const { measurements: chartMeasurements, duration: chartDuration } = useChartStore();
+  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: [],
@@ -235,6 +236,10 @@ const PieChartComponent = ({
     ],
   };
 
+  useEffect(() => {
+    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  },[])
+
   // Memoize Theme Colors
   const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
   const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
@@ -269,7 +274,7 @@ const PieChartComponent = ({
         plugins: {
           title: {
             display: true,
-            text: title,
+            text: name,
             font: chartFontStyle,
           },
           legend: {
@@ -284,7 +289,7 @@ const PieChartComponent = ({
           // },
         },
       }),
-      [title, chartFontStyle]
+      [title, chartFontStyle, name]
     );
 
     // useEffect(() => {console.log(measurements);
@@ -339,10 +344,11 @@ const PieChartComponent = ({
     
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        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);
         }
@@ -361,7 +367,7 @@ const PieChartComponent = ({
       fetchSavedInputes();
     }
   }
-  ,[chartMeasurements, chartDuration])
+  ,[chartMeasurements, chartDuration, widgetName])
 
   return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
 };

app/src/services/realTimeVisulization/zoneData/addWidgets.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
 
 export const addingWidgets = async (
   zoneId: string,

app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
 console.log("url_Backend_dwinzo: ", url_Backend_dwinzo);
 
 export const getSelect2dZoneData = async (

app/src/services/realTimeVisulization/zoneData/getZoneData.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
 
 export const getZone2dData = async (organization?: string) => {
   try {

app/src/services/realTimeVisulization/zoneData/getZones.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}`;
 
 export const getZoneData = async (zoneId: string, organization: string) => {
   try {

app/src/store/useChartStore.ts

@@ -9,20 +9,26 @@ interface MeasurementStore {
   measurements: Record<string, Measurement>;  // Change array to Record<string, Measurement>
   interval: number;
   duration: string;
+  name: string;
   setMeasurements: (newMeasurements: Record<string, Measurement>) => void;
   updateDuration: (newDuration: string) => void;
+  updateName: (newName: string) => void;
 }
 
 const useChartStore = create<MeasurementStore>((set) => ({
   measurements: {}, // Initialize as an empty object
   interval: 1000,
   duration: "1h",
+  name:'',
 
   setMeasurements: (newMeasurements) =>
     set(() => ({ measurements: newMeasurements })),
 
   updateDuration: (newDuration) =>
     set(() => ({ duration: newDuration })),
+  
+  updateName: (newName) =>
+    set(() => ({ duration: newName })),
 }));
 
 export default useChartStore;