added dynamic input based on graph

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

@@ -1,115 +1,215 @@
-import React, { useEffect, useState } from 'react'
-import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
-import { AddIcon } from '../../../../icons/ExportCommonIcons'
-import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
-import useChartStore from '../../../../../store/useChartStore'
-import axios from 'axios'
+// import React, { useEffect, useState } from 'react'
+// import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+// import { AddIcon } from '../../../../icons/ExportCommonIcons'
+// import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
+// import useChartStore from '../../../../../store/useChartStore'
+// import axios from 'axios'
 
-type Props = {}
+// type Props = {}
 
-const LineGrapInput = (props: Props) => {
-    const [dropDowndata, setDropDownData] = useState({})
-    const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
-    const [selectedOption, setSelectedOption] = useState('1h')
-    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+// const LineGrapInput = (props: Props) => {
+//     const [dropDowndata, setDropDownData] = useState({})
+//     const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
+//     const [selectedOption, setSelectedOption] = useState('1h')
+//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+//     const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
 
-    const handleSelectDuration = (option: string) => {
-        updateDuration(option); // Normalize for key matching
-    };
+//     const handleSelectDuration = (option: string) => {
+//         updateDuration(option); // Normalize for key matching
+//     };
 
-    useEffect(() => {
-        const fetchZoneData = async () => {
-            try {
-                const response = await axios.get('http://192.168.0.192:5010/getinput');
-                if (response.status === 200) {
-                    console.log('dropdown data:', response.data);
-                    setDropDownData(response.data)
-                } else {
-                    console.log('Unexpected response:', response);
-                }
-            } catch (error) {
-                console.error('There was an error!', error);
-            }
-        };
-        fetchZoneData();
-    }, []);
+//     useEffect(() => {
+//         const fetchZoneData = async () => {
+//             try {
+//                 const response = await axios.get(`http://${iotApiUrl}/getinput`);
+//                 if (response.status === 200) {
+//                     console.log('dropdown data:', response.data);
+//                     setDropDownData(response.data)
+//                 } else {
+//                     console.log('Unexpected response:', response);
+//                 }
+//             } catch (error) {
+//                 console.error('There was an error!', error);
+//             }
+//         };
+//         fetchZoneData();
+//     }, []);
 
-    useEffect(() => {
-        console.log(selections);
-    }, [selections])
+//     useEffect(() => {
+//         console.log(selections);
+//     }, [selections])
 
-    const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
-        setSelections(prev => {
-            if (selectedData === null) {
-                const newSelections = { ...prev };
-                delete newSelections[inputKey];
-                return newSelections;
-            } else {
-                return {
-                    ...prev,
-                    [inputKey]: selectedData
-                };
-            }
-        });
-    };
+//     const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
+//         setSelections(prev => {
+//             if (selectedData === null) {
+//                 const newSelections = { ...prev };
+//                 delete newSelections[inputKey];
+//                 return newSelections;
+//             } else {
+//                 return {
+//                     ...prev,
+//                     [inputKey]: selectedData
+//                 };
+//             }
+//         });
+//     };
 
-    interface Measurement {
-        name: string;
-        fields: string;
-      }
+//     interface Measurement {
+//         name: string;
+//         fields: string;
+//       }
       
-      interface InputData {
-        [key: string]: Measurement;
-      }
+//       interface InputData {
+//         [key: string]: Measurement;
+//       }
       
-      const extractMeasurements = (input: InputData): Measurement[] => {
-        return Object.values(input);
-      };
+//       const extractMeasurements = (input: InputData): Measurement[] => {
+//         return Object.values(input);
+//       };
 
-    useEffect(() => {
-        const measurementsData = extractMeasurements(selections);
-        setMeasurements(measurementsData);
-    }, [selections]);
+//     useEffect(() => {
+//         const measurementsData = extractMeasurements(selections);
+//         setMeasurements(measurementsData);
+//     }, [selections]);
     
 
-    return (
-        <>
-            <div className="inputs-wrapper">
-                {[...Array(6)].map((_, index) => {
-                    const inputKey = `input${index + 1}`;
-                    return (
-                        <div key={index} className="datas">
-                            <div className="datas__label">Input {index + 1}</div>
-                            <div className="datas__class">
-                                <MultiLevelDropdown
-                                    data={dropDowndata}
-                                    onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
-                                    onUnselect={() => handleSelect(inputKey, null)}
-                                    selectedValue={selections[inputKey]}
-                                />
-                                <div className="icon">
-                                    <AddIcon />
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-            <div>
-                <div className="datas">
-                    <div className="datas__label">duration</div>
-                    <div className="datas__class">
-                    <RegularDropDown
-                        header={duration}
-                        options={["1h", "2h", "12h"]}
-                        onSelect={handleSelectDuration}
-                        search={false}
-                    />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
+//     return (
+//         <>
+//             <div className="inputs-wrapper">
+//                 {[...Array(6)].map((_, index) => {
+//                     const inputKey = `input${index + 1}`;
+//                     return (
+//                         <div key={index} className="datas">
+//                             <div className="datas__label">Input {index + 1}</div>
+//                             <div className="datas__class">
+//                                 <MultiLevelDropdown
+//                                     data={dropDowndata}
+//                                     onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+//                                     onUnselect={() => handleSelect(inputKey, null)}
+//                                     selectedValue={selections[inputKey]}
+//                                 />
+//                                 <div className="icon">
+//                                     <AddIcon />
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     );
+//                 })}
+//             </div>
+//             <div>
+//                 <div className="datas">
+//                     <div className="datas__label">duration</div>
+//                     <div className="datas__class">
+//                     <RegularDropDown
+//                         header={duration}
+//                         options={["1h", "2h", "12h"]}
+//                         onSelect={handleSelectDuration}
+//                         search={false}
+//                     />
+//                     </div>
+//                 </div>
+//             </div>
+//         </>
+//     )
+// }
 
-export default LineGrapInput
+// export default LineGrapInput
+
+
+
+import React, { useEffect, useState } from "react";
+import MultiLevelDropdown from "../../../../ui/inputs/MultiLevelDropDown";
+import { AddIcon } from "../../../../icons/ExportCommonIcons";
+import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import useChartStore from "../../../../../store/useChartStore";
+import axios from "axios";
+
+type Props = {};
+
+const LineGrapInput = (props: Props) => {
+  const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+  
+  const [dropDowndata, setDropDownData] = useState({});
+  const [selections, setSelections] = useState<Record<string, { name: string; fields: string }>>(measurements); 
+  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
+  
+  useEffect(() => {
+    const fetchZoneData = async () => {
+      try {
+        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        if (response.status === 200) {
+          console.log("dropdown data:", response.data);
+          setDropDownData(response.data);
+        } else {
+          console.log("Unexpected response:", response);
+        }
+      } catch (error) {
+        console.error("There was an error!", error);
+      }
+    };
+    fetchZoneData();
+  }, []);
+
+  // Sync Zustand state when component mounts
+  useEffect(() => {
+    setSelections(measurements);
+  }, [measurements]);
+
+  const handleSelect = (inputKey: string, selectedData: { name: string; fields: string } | null) => {
+    setSelections((prev) => {
+      const newSelections = { ...prev };
+      if (selectedData === null) {
+        delete newSelections[inputKey];
+      } else {
+        newSelections[inputKey] = selectedData;
+      }
+      setMeasurements(newSelections); // Update Zustand store
+      return newSelections;
+    });
+  };
+
+  const handleSelectDuration = (option: string) => {
+    updateDuration(option);
+  };
+
+  return (
+    <>
+      <div className="inputs-wrapper">
+        {[...Array(6)].map((_, index) => {
+          const inputKey = `input${index + 1}`;
+          return (
+            <div key={index} className="datas">
+              <div className="datas__label">Input {index + 1}</div>
+              <div className="datas__class">
+                <MultiLevelDropdown
+                  data={dropDowndata}
+                  onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                  onUnselect={() => handleSelect(inputKey, null)}
+                  selectedValue={selections[inputKey]} // Load from Zustand
+                />
+                <div className="icon">
+                  <AddIcon />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <div className="datas">
+          <div className="datas__label">Duration</div>
+          <div className="datas__class">
+            <RegularDropDown
+              header={duration}
+              options={["1h", "2h", "12h"]}
+              onSelect={handleSelectDuration}
+              search={false}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LineGrapInput;

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

@@ -8,11 +8,12 @@ type Props = {}
 const PieChartInput = (props: Props) => {
     const [dropDowndata, setDropDownData] = useState({})
     const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
+    const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
 
     useEffect(() => {
         const fetchZoneData = async () => {
             try {
-                const response = await axios.get('http://192.168.0.192:5010/getinput');
+                const response = await axios.get(`http://${iotApiUrl}/getinput`);
                 if (response.status === 200) {
                     console.log('dropdown data:', response.data);
                     setDropDownData(response.data)