first commit

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

@@ -0,0 +1,147 @@
+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
+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
+  title: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontWeight?: string;
+}
+
+const Design = () => {
+  const [selectedName, setSelectedName] = useState("drop down");
+  const [selectedElement, setSelectedElement] = useState("drop down");
+  const [selectedFont, setSelectedFont] = useState("drop down");
+  const [selectedSize, setSelectedSize] = useState("drop down");
+  const [selectedWeight, setSelectedWeight] = useState("drop down");
+
+  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
+    useWidgetStore(); // Get selected chart ID and list of widgets
+
+  // Find the selected widget based on `selectedChartId`
+  const selectedWidget = selectedChartId
+    ? widgets.find((widget) => widget.id === selectedChartId.id)
+    : null;
+
+  // Function to update the selected widget
+  const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
+    if (!selectedWidget) {
+      return;
+    }
+
+    // Update the widgets array
+    const updatedWidgets = widgets.map((widget) =>
+      widget.id === selectedWidget.id
+        ? { ...widget, ...updatedProperties } // Merge existing widget with updated properties
+        : 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]);
+
+  return (
+    <div className="design">
+      {/* Display the selected widget's title */}
+      <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}
+          />
+        )}
+      </div>
+
+      {/* Design Options */}
+      <div className="optionsContainer">
+        <div className="option">
+          <span>Name</span>
+          <RegularDropDown
+            header={selectedWidget ? selectedWidget.title : "Select Name"}
+            options={["Option 1", "Option 2", "Option 3"]}
+            onSelect={(value) => {
+              setSelectedName(value);
+              handleUpdateWidget({ title: value });
+            }}
+          />
+        </div>
+
+        <div className="option">
+          <span>Element</span>
+          <RegularDropDown
+            header={selectedElement}
+            options={["Option 1", "Option 2", "Option 3"]}
+            onSelect={(value) => {
+              setSelectedElement(value);
+              handleUpdateWidget({ type: value }); // Update element type
+            }}
+          />
+        </div>
+
+        <div className="option">
+          <span>Font Family</span>
+          <RegularDropDown
+            header={selectedFont}
+            options={["Arial", "Roboto", "Sans-serif"]}
+            onSelect={(value) => {
+              setSelectedFont(value);
+              handleUpdateWidget({ fontFamily: value });
+            }}
+          />
+        </div>
+
+        <div className="option">
+          <span>Size</span>
+          <RegularDropDown
+            header={selectedSize}
+            options={["12px", "14px", "16px", "18px"]}
+            onSelect={(value) => {
+              setSelectedSize(value);
+              handleUpdateWidget({ fontSize: value });
+            }}
+          />
+        </div>
+
+        <div className="option">
+          <span>Weight</span>
+          <RegularDropDown
+            header={selectedWeight}
+            options={["Light", "Regular", "Bold"]}
+            onSelect={(value) => {
+              setSelectedWeight(value);
+              handleUpdateWidget({ fontWeight: value });
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Design;