updated real time viz ui

frontend/src/components/ui/sideBar/realTimeViz/design.tsx

@@ -1,22 +1,28 @@
 import React, { useEffect, useState } from "react";
 import RegularDropDown from "../../inputs/regularDropDown";
 import { useWidgetStore } from "../../../../store/store";
-import styles from "./Design.module.scss"; // Import SCSS file
 import ChartComponent from "./chartComponent";
 
-type Side = "top" | "bottom" | "left" | "right";
-
-// Define the Widget interface
+// Define Props Interface
+interface DesignProps {}
 interface Widget {
   id: string;
-  type: string; // Change this if the type is more specific
-  panel: Side; // You should define or import 'Side' type if not already defined
+  type: string; // Chart type (e.g., "bar", "line")
+  panel: "top" | "bottom" | "left" | "right"; // Panel location
   title: string;
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
+  data: {
+    labels: string[];
+    datasets: {
+      data: number[];
+      backgroundColor: string;
+      borderColor: string;
+      borderWidth: number;
+    }[];
+  }; // Data for the chart
 }
-
 const Design = () => {
   const [selectedName, setSelectedName] = useState("drop down");
   const [selectedElement, setSelectedElement] = useState("drop down");
@@ -24,66 +30,70 @@ const Design = () => {
   const [selectedSize, setSelectedSize] = useState("drop down");
   const [selectedWeight, setSelectedWeight] = useState("drop down");
 
+  // Zustand Store Hooks
   const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
-    useWidgetStore(); // Get selected chart ID and list of widgets
+    useWidgetStore();
 
-  // Find the selected widget based on `selectedChartId`
-  const selectedWidget = selectedChartId
-    ? widgets.find((widget) => widget.id === selectedChartId.id)
-    : null;
+  // Log Selected Chart ID for Debugging
 
-  // Function to update the selected widget
+  // Handle Widget Updates
   const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
-    if (!selectedWidget) {
-      return;
-    }
+    if (!selectedChartId) return;
+
+    // Update the selectedChartId
+    const updatedChartId = {
+      ...selectedChartId,
+      ...updatedProperties,
+    };
+    setSelectedChartId(updatedChartId);
 
     // Update the widgets array
     const updatedWidgets = widgets.map((widget) =>
-      widget.id === selectedWidget.id
-        ? { ...widget, ...updatedProperties } // Merge existing widget with updated properties
+      widget.id === selectedChartId.id
+        ? { ...widget, ...updatedProperties }
         : widget
     );
-
-    // Update the global state with the new widgets array
     setWidgets(updatedWidgets);
-
-    // Update `selectedChartId` to reflect the changes
-    if (selectedChartId) {
-      const updatedChartId = {
-        ...selectedChartId,
-        ...updatedProperties, // Merge updated properties into `selectedChartId`
-      };
-      setSelectedChartId(updatedChartId);
-    }
   };
 
-  useEffect(() => {
-    // Log the current state of widgets for debugging
-  }, [widgets]);
+  // Default Chart Data
+  const defaultChartData = {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    datasets: [
+      {
+        data: [65, 59, 80, 81, 56, 55, 40],
+        backgroundColor: "#5c87df",
+        borderColor: "#ffffff",
+        borderWidth: 1,
+      },
+    ],
+  };
 
   return (
     <div className="design">
-      {/* Display the selected widget's title */}
+      {/* Title of the Selected Widget */}
       <div className="selectedWidget">
-        {selectedWidget ? selectedWidget.title : "Widget 1"}
-      </div>
-      <div className="reviewChart">
-        {/* Pass selectedWidget properties to ChartComponent */}
-        {selectedWidget && (
-          <ChartComponent
-            type={selectedWidget.type}
-            title={selectedWidget.title}
-          />
-        )}
+        {selectedChartId?.title || "Widget 1"}
       </div>
 
-      {/* Design Options */}
+      {/* Chart Component */}
+      <div className="reviewChart">
+        {/* {selectedChartId && (
+          <ChartComponent
+            type={selectedChartId.type}
+            title={selectedChartId.title}
+            data={selectedChartId.data || defaultChartData} // Use widget data or default
+          />
+        )} */}
+      </div>
+
+      {/* Options Container */}
       <div className="optionsContainer">
+        {/* Name Dropdown */}
         <div className="option">
           <span>Name</span>
           <RegularDropDown
-            header={selectedWidget ? selectedWidget.title : "Select Name"}
+            header={selectedChartId?.title || "Select Name"}
             options={["Option 1", "Option 2", "Option 3"]}
             onSelect={(value) => {
               setSelectedName(value);
@@ -92,22 +102,24 @@ const Design = () => {
           />
         </div>
 
+        {/* Element Dropdown */}
         <div className="option">
           <span>Element</span>
           <RegularDropDown
-            header={selectedElement}
-            options={["Option 1", "Option 2", "Option 3"]}
+            header={selectedChartId?.type || "Select Element"}
+            options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]} // Valid chart types
             onSelect={(value) => {
               setSelectedElement(value);
-              handleUpdateWidget({ type: value }); // Update element type
+              handleUpdateWidget({ type: value });
             }}
           />
         </div>
 
+        {/* Font Family Dropdown */}
         <div className="option">
           <span>Font Family</span>
           <RegularDropDown
-            header={selectedFont}
+            header={selectedChartId?.fontFamily || "Select Font"}
             options={["Arial", "Roboto", "Sans-serif"]}
             onSelect={(value) => {
               setSelectedFont(value);
@@ -116,10 +128,11 @@ const Design = () => {
           />
         </div>
 
+        {/* Size Dropdown */}
         <div className="option">
           <span>Size</span>
           <RegularDropDown
-            header={selectedSize}
+            header={selectedChartId?.fontSize || "Select Size"}
             options={["12px", "14px", "16px", "18px"]}
             onSelect={(value) => {
               setSelectedSize(value);
@@ -128,10 +141,11 @@ const Design = () => {
           />
         </div>
 
+        {/* Weight Dropdown */}
         <div className="option">
           <span>Weight</span>
           <RegularDropDown
-            header={selectedWeight}
+            header={selectedChartId?.fontWeight || "Select Weight"}
             options={["Light", "Regular", "Bold"]}
             onSelect={(value) => {
               setSelectedWeight(value);