added socket for chart

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+import LineGrapInput from "../IotInputCards/LineGrapInput";
 
 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -123,41 +124,10 @@ const Data = () => {
         <div className="sideBarHeader">{selectedChartId?.title}</div>
       )}
       {/* Render groups dynamically */}
-      {chartDataGroups[selectedChartId?.id]?.map((group) => (
-        <div key={group.id} className="inputs-wrapper">
-          {group.children.map((child, index) => (
-            <div key={child.id} className="datas">
-              <div className="datas__label">Input {index + 1}</div>
-              <div className="datas__class">
-                <MultiLevelDropDown data={DATA_STRUCTURE} />
-                {/* Add Icon */}
-                {group.children.length < 7 && (
-                  <div
-                    className="icon"
-                    onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
-                  >
-                    <AddIcon />
-                  </div>
-                )}
-                {/* Remove Icon */}
-
-                <span
-                  className={`datas__separator ${
-                    group.children.length > 1 ? "" : "disable"
-                  }`}
-                  onClick={(e) => {
-                    e.stopPropagation(); // Prevent event bubbling
-                    removeChild(group.id, child.id); // Pass groupId and childId to removeChild
-                  }}
-                >
-                  <RemoveIcon />
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
-
+      {
+        chartDataGroups[selectedChartId?.id] && <LineGrapInput />
+      }
+      
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>
@@ -173,3 +143,40 @@ const Data = () => {
 };
 
 export default Data;
+
+
+
+// {chartDataGroups[selectedChartId?.id]?.map((group) => (
+//   <div key={group.id} className="inputs-wrapper">
+//     {group.children.map((child, index) => (
+//       <div key={child.id} className="datas">
+//         <div className="datas__label">Input {index + 1}</div>
+//         <div className="datas__class">
+//           <MultiLevelDropDown data={DATA_STRUCTURE} />
+//           {/* Add Icon */}
+//           {group.children.length < 7 && (
+//             <div
+//               className="icon"
+//               onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
+//             >
+//               <AddIcon />
+//             </div>
+//           )}
+//           {/* Remove Icon */}
+
+//           <span
+//             className={`datas__separator ${
+//               group.children.length > 1 ? "" : "disable"
+//             }`}
+//             onClick={(e) => {
+//               e.stopPropagation(); // Prevent event bubbling
+//               removeChild(group.id, child.id); // Pass groupId and childId to removeChild
+//             }}
+//           >
+//             <RemoveIcon />
+//           </span>
+//         </div>
+//       </div>
+//     ))}
+//   </div>
+// ))}