first commit

app/src/components/ui/componets/AddButtons.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import {
+  CleanPannel,
+  EyeIcon,
+  LockIcon,
+} from "../../icons/RealTimeVisulationIcons";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+// Define the type for the props passed to the Buttons component
+interface ButtonsProps {
+  selectedZone: {
+    zoneName: string;
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: {
+      id: string;
+      type: string;
+      title: string;
+      panel: Side;
+      data: any;
+    }[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string;
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: {
+        id: string;
+        type: string;
+        title: string;
+        panel: Side;
+        data: any;
+      }[];
+    }>
+  >;
+  hiddenPanels: Side[]; // Add this prop for hidden panels
+  setHiddenPanels: React.Dispatch<React.SetStateAction<Side[]>>; // Add this prop for updating hidden panels
+}
+
+const AddButtons: React.FC<ButtonsProps> = ({
+  selectedZone,
+  setSelectedZone,
+  setHiddenPanels,
+  hiddenPanels,
+}) => {
+  // Local state to track hidden panels
+
+  // Function to toggle lock/unlock a panel
+  const toggleLockPanel = (side: Side) => {
+    const newLockedPanels = selectedZone.lockedPanels.includes(side)
+      ? selectedZone.lockedPanels.filter((panel) => panel !== side)
+      : [...selectedZone.lockedPanels, side];
+
+    const updatedZone = {
+      ...selectedZone,
+      lockedPanels: newLockedPanels,
+    };
+
+    // Update the selectedZone state
+    setSelectedZone(updatedZone);
+  };
+
+  // Function to toggle visibility of a panel
+  const toggleVisibility = (side: Side) => {
+    const isHidden = hiddenPanels.includes(side);
+    if (isHidden) {
+      // If the panel is already hidden, remove it from the hiddenPanels array
+      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
+    } else {
+      // If the panel is visible, add it to the hiddenPanels array
+      setHiddenPanels([...hiddenPanels, side]);
+    }
+  };
+
+  // Function to clean all widgets from a panel
+  const cleanPanel = (side: Side) => {
+    const cleanedWidgets = selectedZone.widgets.filter(
+      (widget) => widget.panel !== side
+    );
+
+    const updatedZone = {
+      ...selectedZone,
+      widgets: cleanedWidgets,
+    };
+
+    // Update the selectedZone state
+    setSelectedZone(updatedZone);
+  };
+
+  // Function to handle "+" button click
+  const handlePlusButtonClick = (side: Side) => {
+    if (selectedZone.activeSides.includes(side)) {
+      // If the panel is already active, remove all widgets and close the panel
+      const cleanedWidgets = selectedZone.widgets.filter(
+        (widget) => widget.panel !== side
+      );
+      const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
+
+      const updatedZone = {
+        ...selectedZone,
+        widgets: cleanedWidgets,
+        activeSides: newActiveSides,
+        panelOrder: newActiveSides,
+      };
+
+      // Update the selectedZone state
+      setSelectedZone(updatedZone);
+    } else {
+      // If the panel is not active, activate it
+      const newActiveSides = [...selectedZone.activeSides, side];
+
+      const updatedZone = {
+        ...selectedZone,
+        activeSides: newActiveSides,
+        panelOrder: newActiveSides,
+      };
+
+      // Update the selectedZone state
+      setSelectedZone(updatedZone);
+    }
+  };
+
+  return (
+    <div>
+      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+        <div key={side} className={`side-button-container ${side}`}>
+          {/* "+" Button */}
+          <button
+            className={`side-button ${side}`}
+            onClick={() => handlePlusButtonClick(side)}
+            title={
+              selectedZone.activeSides.includes(side)
+                ? `Remove all items and close ${side} panel`
+                : `Activate ${side} panel`
+            }
+          >
+            +
+          </button>
+
+          {/* Extra Buttons */}
+          {selectedZone.activeSides.includes(side) && (
+            <div className="extra-Bs">
+              {/* Hide Panel */}
+              <div
+                className={`icon ${
+                  hiddenPanels.includes(side) ? "active" : ""
+                }`}
+                title={
+                  hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
+                }
+                onClick={() => toggleVisibility(side)}
+              >
+                <EyeIcon />
+              </div>
+
+              {/* Clean Panel */}
+              <div
+                className="icon"
+                title="Clean Panel"
+                onClick={() => cleanPanel(side)}
+              >
+                <CleanPannel />
+              </div>
+
+              {/* Lock/Unlock Panel */}
+              <div
+                className={`icon ${
+                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                }`}
+                title={
+                  selectedZone.lockedPanels.includes(side)
+                    ? "Unlock Panel"
+                    : "Lock Panel"
+                }
+                onClick={() => toggleLockPanel(side)}
+              >
+                <LockIcon />
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AddButtons;

app/src/components/ui/componets/DisplayZone.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useRef } from "react";
+import { Widget } from "../../../store/useWidgetStore";
+
+// Define the type for `Side`
+type Side = "top" | "bottom" | "left" | "right";
+
+interface DisplayZoneProps {
+  zonesData: {
+    [key: string]: {
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    };
+  };
+  selectedZone: {
+    zoneName: string;
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: {
+      id: string;
+      type: string;
+      title: string;
+      panel: Side;
+      data: any;
+    }[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string;
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: {
+        id: string;
+        type: string;
+        title: string;
+        panel: Side;
+        data: any;
+      }[];
+    }>
+  >;
+}
+
+const DisplayZone: React.FC<DisplayZoneProps> = ({
+  zonesData,
+  selectedZone,
+  setSelectedZone,
+}) => {
+  // Ref for the container element
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // Example state for selectedOption and options (adjust based on your actual use case)
+  const [selectedOption, setSelectedOption] = React.useState<string | null>(
+    null
+  );
+  console.log('setSelectedOption: ', setSelectedOption);
+  const [options, setOptions] = React.useState<string[]>([]);
+  console.log('setOptions: ', setOptions);
+
+  // Scroll to the selected option when it changes
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (container && selectedOption) {
+      // Handle scrolling to the selected option
+      const index = options.findIndex((option) => {
+        const formattedOption = formatOptionName(option);
+        const selectedFormattedOption =
+          selectedOption?.split("_")[1] || selectedOption;
+        return formattedOption === selectedFormattedOption;
+      });
+
+      if (index !== -1) {
+        const optionElement = container.children[index] as HTMLElement;
+        if (optionElement) {
+          optionElement.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "center",
+          });
+        }
+      }
+    }
+  }, [selectedOption, options]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      if (container) {
+        container.scrollBy({
+          left: event.deltaY * 2, // Adjust the multiplier for faster scrolling
+          behavior: "smooth",
+        });
+      }
+    };
+
+    let isDragging = false;
+    let startX: number;
+    let scrollLeft: number;
+
+    const handleMouseDown = (event: MouseEvent) => {
+      isDragging = true;
+      startX = event.pageX - (container?.offsetLeft || 0);
+      scrollLeft = container?.scrollLeft || 0;
+    };
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!isDragging || !container) return;
+      event.preventDefault();
+      const x = event.pageX - (container.offsetLeft || 0);
+      const walk = (x - startX) * 2; // Adjust the multiplier for faster dragging
+      container.scrollLeft = scrollLeft - walk;
+    };
+
+    const handleMouseUp = () => {
+      isDragging = false;
+    };
+
+    const handleMouseLeave = () => {
+      isDragging = false;
+    };
+
+    if (container) {
+      container.addEventListener("wheel", handleWheel, { passive: false });
+      container.addEventListener("mousedown", handleMouseDown);
+      container.addEventListener("mousemove", handleMouseMove);
+      container.addEventListener("mouseup", handleMouseUp);
+      container.addEventListener("mouseleave", handleMouseLeave);
+    }
+
+    return () => {
+      if (container) {
+        container.removeEventListener("wheel", handleWheel);
+        container.removeEventListener("mousedown", handleMouseDown);
+        container.removeEventListener("mousemove", handleMouseMove);
+        container.removeEventListener("mouseup", handleMouseUp);
+        container.removeEventListener("mouseleave", handleMouseLeave);
+      }
+    };
+  }, []);
+
+  // Helper function to format option names (customize as needed)
+  const formatOptionName = (option: string): string => {
+    // Replace underscores with spaces and capitalize the first letter
+    return option.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`zoon-wrapper ${
+        selectedZone.activeSides.includes("bottom") && "bottom"
+      }`}
+    >
+      {Object.keys(zonesData).map((zoneName, index) => (
+        <div
+          key={index}
+          className={`zone ${
+            selectedZone.zoneName === zoneName ? "active" : ""
+          }`}
+          onClick={() => {
+            setSelectedZone({
+              zoneName,
+              ...zonesData[zoneName],
+            });
+          }}
+        >
+          {zoneName}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DisplayZone;

app/src/components/ui/componets/DraggableWidget.tsx

@@ -0,0 +1,82 @@
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import PieGraphComponent from "../charts/PieGraphComponent";
+import BarGraphComponent from "../charts/BarGraphComponent";
+import LineGraphComponent from "../charts/LineGraphComponent";
+
+export const DraggableWidget = ({ widget }: { widget: any }) => {
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
+  const handlePointerDown = () => {
+    if (selectedChartId?.id !== widget.id) {
+      setSelectedChartId(widget);
+    }
+  };
+
+  return (
+    <>
+      <div
+        key={widget.id}
+        className={`chart-container ${
+          selectedChartId?.id === widget.id && "activeChart"
+        }`}
+        onPointerDown={handlePointerDown}
+      >
+        {widget.type === "progress" ? (
+          //   <ProgressCard title={widget.title} data={widget.data} />
+          <></>
+        ) : (
+          <>
+            {widget.type === "line" && (
+              <LineGraphComponent
+                type={widget.type}
+                title={widget.title}
+                fontSize={widget.fontSize}
+                fontWeight={widget.fontWeight}
+                data={{
+                  measurements: [
+                    { name: "testDevice", fields: "powerConsumption" },
+                    { name: "furnace", fields: "powerConsumption" },
+                  ],
+                  interval: 1000,
+                  duration: "1h",
+                }}
+              />
+            )}
+            {widget.type === "bar" && (
+              <BarGraphComponent
+                type={widget.type}
+                title={widget.title}
+                fontSize={widget.fontSize}
+                fontWeight={widget.fontWeight}
+                data={{
+                  measurements: [
+                    { name: "testDevice", fields: "powerConsumption" },
+                    { name: "furnace", fields: "powerConsumption" },
+                  ],
+                  interval: 1000,
+                  duration: "1h",
+                }}
+              />
+            )}
+            {widget.type === "pie" && (
+              <PieGraphComponent
+                type={widget.type}
+                title={widget.title}
+                fontSize={widget.fontSize}
+                fontWeight={widget.fontWeight}
+                data={{
+                  measurements: [
+                    { name: "testDevice", fields: "powerConsumption" },
+                    { name: "furnace", fields: "powerConsumption" },
+                  ],
+                  interval: 1000,
+                  duration: "1h",
+                }}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};

app/src/components/ui/componets/Panel.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { DraggableWidget } from "./DraggableWidget";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: Side;
+  data: any;
+}
+
+interface PanelProps {
+  selectedZone: {
+    zoneName: string;
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: Widget[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string;
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    }>
+  >;
+}
+
+const generateUniqueId = () =>
+  `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
+  const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
+  const [panelDimensions, setPanelDimensions] = useState<{
+    [side in Side]?: { width: number; height: number };
+  }>({});
+
+  const getPanelStyle = useMemo(
+    () => (side: Side) => {
+      const currentIndex = selectedZone.panelOrder.indexOf(side);
+      const previousPanels = selectedZone.panelOrder.slice(0, currentIndex);
+      const leftActive = previousPanels.includes("left");
+      const rightActive = previousPanels.includes("right");
+      const topActive = previousPanels.includes("top");
+      const bottomActive = previousPanels.includes("bottom");
+
+      switch (side) {
+        case "top":
+        case "bottom":
+          return {
+            width: `calc(100% - ${
+              (leftActive ? 204 : 0) + (rightActive ? 204 : 0)
+            }px)`,
+            left: leftActive ? "204px" : "0",
+            right: rightActive ? "204px" : "0",
+            [side]: "0",
+            height: "200px",
+          };
+        case "left":
+        case "right":
+          return {
+            height: `calc(100% - ${
+              (topActive ? 204 : 0) + (bottomActive ? 204 : 0)
+            }px)`,
+            top: topActive ? "204px" : "0",
+            bottom: bottomActive ? "204px" : "0",
+            [side]: "0",
+            width: "200px",
+          };
+        default:
+          return {};
+      }
+    },
+    [selectedZone.panelOrder]
+  );
+
+  const handleDrop = (e: React.DragEvent, panel: Side) => {
+    e.preventDefault();
+    const { draggedAsset } = useWidgetStore.getState();
+    
+    if (!draggedAsset) return;
+    if (isPanelLocked(panel)) return;
+  
+    const currentWidgetsCount = getCurrentWidgetCount(panel);
+    const maxCapacity = calculatePanelCapacity(panel);
+  
+    if (currentWidgetsCount >= maxCapacity) return;
+  
+    addWidgetToPanel(draggedAsset, panel);
+  };
+  
+  // Helper functions
+  const isPanelLocked = (panel: Side) => 
+    selectedZone.lockedPanels.includes(panel);
+  
+  const getCurrentWidgetCount = (panel: Side) => 
+    selectedZone.widgets.filter(w => w.panel === panel).length;
+  
+  const calculatePanelCapacity = (panel: Side) => {
+    const CHART_WIDTH = 200;
+    const CHART_HEIGHT = 200;
+    const FALLBACK_HORIZONTAL_CAPACITY = 5;
+    const FALLBACK_VERTICAL_CAPACITY = 3;
+  
+    const dimensions = panelDimensions[panel];
+    if (!dimensions) {
+      return panel === "top" || panel === "bottom" 
+        ? FALLBACK_HORIZONTAL_CAPACITY
+        : FALLBACK_VERTICAL_CAPACITY;
+    }
+  
+    return panel === "top" || panel === "bottom"
+      ? Math.floor(dimensions.width / CHART_WIDTH)
+      : Math.floor(dimensions.height / CHART_HEIGHT);
+  };
+  
+  const addWidgetToPanel = (asset: any, panel: Side) => {
+    const newWidget = {
+      ...asset,
+      id: generateUniqueId(),
+      panel,
+    };
+  
+    setSelectedZone(prev => ({
+      ...prev,
+      widgets: [...prev.widgets, newWidget]
+    }));
+  };
+
+  useEffect(() => {
+    const observers: ResizeObserver[] = [];
+    const currentPanelRefs = panelRefs.current;
+
+    selectedZone.activeSides.forEach((side) => {
+      const element = currentPanelRefs[side];
+      if (element) {
+        const observer = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            const { width, height } = entry.contentRect;
+            setPanelDimensions((prev) => ({
+              ...prev,
+              [side]: { width, height },
+            }));
+          }
+        });
+        observer.observe(element);
+        observers.push(observer);
+      }
+    });
+
+    return () => {
+      observers.forEach((observer) => observer.disconnect());
+    };
+  }, [selectedZone.activeSides]);
+
+  const { isPlaying } = usePlayButtonStore();
+
+  return (
+    <>
+      {selectedZone.activeSides.map((side) => (
+        <div
+          key={side}
+          className={`panel ${side}-panel absolute ${isPlaying && ""}`}
+          style={getPanelStyle(side)}
+          onDrop={(e) => handleDrop(e, side)}
+          onDragOver={(e) => e.preventDefault()}
+          ref={(el) => {
+            if (el) {
+              panelRefs.current[side] = el;
+            } else {
+              delete panelRefs.current[side];
+            }
+          }}
+        >
+          <div
+            className={`panel-content ${isPlaying && "fullScreen"}`}
+            style={{
+              pointerEvents: selectedZone.lockedPanels.includes(side)
+                ? "none"
+                : "auto",
+              opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
+            }}
+          >
+            <>{}</>
+            {selectedZone.widgets
+              .filter((w) => w.panel === side)
+              .map((widget) => (
+                <DraggableWidget widget={widget} key={widget.id} />
+              ))}
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default Panel;

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState, useRef } from "react";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import Panel from "./Panel";
+import AddButtons from "./AddButtons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import DisplayZone from "./DisplayZone";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: Side;
+  data: any;
+}
+
+const RealTimeVisulization: React.FC = () => {
+  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [zonesData, setZonesData] = useState<{
+    [key: string]: {
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    };
+  }>({
+    "Manufacturing unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    "Assembly unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    "Packing unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    Warehouse: {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    Inventory: {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+  });
+
+  const { isPlaying } = usePlayButtonStore();
+
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  useEffect(() => {
+    setZonesData((prev) => ({
+      ...prev,
+      [selectedZone.zoneName]: selectedZone,
+    }));
+  }, [selectedZone]);
+
+  return (
+    <div
+      ref={containerRef}
+      id="real-time-vis-canvas"
+      className="realTime-viz canvas"
+      style={{
+        height: isPlaying ? "100vh" : "",
+        width: isPlaying ? "100%" : "",
+        left: isPlaying ? "0%" : "",
+      }}
+    >
+      <DisplayZone
+        zonesData={zonesData}
+        selectedZone={selectedZone}
+        setSelectedZone={setSelectedZone}
+      />
+
+      {!isPlaying && (
+        <AddButtons
+          hiddenPanels={hiddenPanels}
+          setHiddenPanels={setHiddenPanels}
+          selectedZone={selectedZone}
+          setSelectedZone={setSelectedZone}
+        />
+      )}
+
+      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
+    </div>
+  );
+};
+
+export default RealTimeVisulization;
+