Merge remote-tracking branch 'origin/ui' into simulation

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -42,16 +42,19 @@ const Design = () => {
   const [elementColor, setElementColor] = useState("#6f42c1");
   const [showColorPicker, setShowColorPicker] = useState(false);
   const [chartElements, setChartElements] = useState<ChartElement[]>([]);
-  const [selectedElementToStyle, setSelectedElementToStyle] = useState<string | null>(null);
+  const [selectedElementToStyle, setSelectedElementToStyle] = useState<
+    string | null
+  >(null);
   const [nameInput, setNameInput] = useState("");
   const chartRef = useRef<HTMLDivElement>(null);
 
-  const { selectedChartId, setSelectedChartId, widgets, setWidgets } = useWidgetStore();
+  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
+    useWidgetStore();
 
   // Initialize name input and extract elements when selectedChartId changes
   useEffect(() => {
     setNameInput(selectedChartId?.header || selectedChartId?.title || "");
-    
+
     if (!chartRef.current) return;
 
     const timer = setTimeout(() => {
@@ -65,13 +68,16 @@ const Design = () => {
         })
         .map((el, index) => {
           const tagName = el.tagName.toLowerCase();
-          const className = typeof el.className === "string" ? el.className : "";
+          const className =
+            typeof el.className === "string" ? el.className : "";
           const textContent = el.textContent?.trim() || "";
 
           let selector = tagName;
 
           if (className && typeof className === "string") {
-            const classList = className.split(/\s+/).filter((c) => c.length > 0);
+            const classList = className
+              .split(/\s+/)
+              .filter((c) => c.length > 0);
             if (classList.length > 0) {
               selector += "." + classList.join(".");
             }
@@ -126,7 +132,13 @@ const Design = () => {
 
   useEffect(() => {
     applyStyles();
-  }, [selectedFont, selectedSize, selectedWeight, elementColor, selectedElementToStyle]);
+  }, [
+    selectedFont,
+    selectedSize,
+    selectedWeight,
+    elementColor,
+    selectedElementToStyle,
+  ]);
 
   const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
     if (!selectedChartId) return;
@@ -138,7 +150,9 @@ const Design = () => {
     setSelectedChartId(updatedChartId);
 
     const updatedWidgets = widgets.map((widget) =>
-      widget.id === selectedChartId.id ? { ...widget, ...updatedProperties } : widget
+      widget.id === selectedChartId.id
+        ? { ...widget, ...updatedProperties }
+        : widget
     );
     setWidgets(updatedWidgets);
   };
@@ -146,7 +160,7 @@ const Design = () => {
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newName = e.target.value;
     setNameInput(newName);
-    
+
     if (selectedChartId?.title) {
       handleUpdateWidget({ title: newName });
     } else if (selectedChartId?.header) {
@@ -155,12 +169,12 @@ const Design = () => {
   };
 
   const defaultChartData = {
-    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
       {
         data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: elementColor,
-        borderColor: "#ffffff",
+        backgroundColor: "#6f42c1",
+        borderColor: "#b392f0",
         borderWidth: 1,
       },
     ],
@@ -311,4 +325,4 @@ const Design = () => {
   );
 };
 
-export default Design;
+export default Design;