Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui #59

Merged
Vishnu merged 3 commits from ui into main 2025-04-11 13:17:51 +00:00
Conversation 0 Commits 3 Files Changed 48 +4195 -4075
48 changed files with 4195 additions and 4075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/components/layout/3D-cards/CardsScene.tsx
View File

@@ -1,25 +0,0 @@
import { Canvas } from "@react-three/fiber";
import Throughput from "./cards/Throughput";
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
import ProductionCapacity from "./cards/ProductionCapacity";
import { OrbitControls } from "@react-three/drei";
import StateWorking from "./cards/StateWorking";
const CardsScene = () => {
return (
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
{/* <Canvas> */}
{/* 3d-cards */}
{/* <ProductionCapacity /> */}
{/* <ReturnOfInvestment /> */}
{/* <StateWorking /> */}
{/* <Throughput /> */}
{/* <OrbitControls /> */}
{/* </Canvas> */}
</div>
);
};
export default CardsScene;

2
app/src/components/layout/sidebarLeft/SideBarLeft.tsx
View File

@@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
import Assets from "./Assets"; import Assets from "./Assets";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import Widgets from "./visualization/widgets/Widgets"; import Widgets from "./visualization/widgets/Widgets";
import Templates from "./visualization/Templates"; import Templates from "../../../modules/visualization/template/Templates";
import Search from "../../ui/inputs/Search"; import Search from "../../ui/inputs/Search";
const SideBarLeft: React.FC = () => { const SideBarLeft: React.FC = () => {

12
app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
View File

@@ -5,11 +5,11 @@ import {
GlobeIcon, GlobeIcon,
WalletIcon, WalletIcon,
} from "../../../../icons/3dChartIcons"; } from "../../../../icons/3dChartIcons";
import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard"; import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
import WarehouseThroughput from "../../../../ui/realTimeVis/floating/WarehouseThroughput"; import WarehouseThroughput from "../../../../../modules/visualization/widgets/floating/cards/WarehouseThroughput";
import ProductivityDashboard from "../../../../ui/realTimeVis/floating/ProductivityDashboard"; import ProductivityDashboard from "../../../../../modules/visualization/widgets/floating/cards/ProductivityDashboard";
import FleetEfficiency from "../../../../ui/realTimeVis/floating/FleetEfficiency"; import FleetEfficiency from "../../../../../modules/visualization/widgets/floating/cards/FleetEfficiency";
interface Widget { interface Widget {
id: string; id: string;
@@ -48,24 +48,28 @@ const WidgetsFloating = () => {
<SimpleCard <SimpleCard
header={"Today’s Earnings"} header={"Today’s Earnings"}
icon={WalletIcon} icon={WalletIcon}
iconName={"WalletIcon"}
value={"$53,000"} value={"$53,000"}
per={"+55%"} per={"+55%"}
/> />
<SimpleCard <SimpleCard
header={"Today’s Users"} header={"Today’s Users"}
icon={GlobeIcon} icon={GlobeIcon}
iconName={"GlobeIcon"}
value={"1,200"} value={"1,200"}
per={"+30%"} per={"+30%"}
/> />
<SimpleCard <SimpleCard
header={"New Clients"} header={"New Clients"}
icon={DocumentIcon} icon={DocumentIcon}
iconName={"DocumentIcon"}
value={"250"} value={"250"}
per={"+12%"} per={"+12%"}
/> />
<SimpleCard <SimpleCard
header={"Total Sales"} header={"Total Sales"}
icon={CartIcon} icon={CartIcon}
iconName={"CartIcon"}
value={"$150,000"} value={"$150,000"}
per={"+20%"} per={"+20%"}
/>{" "} />{" "}

2
app/src/components/layout/sidebarRight/visualization/design/Design.tsx
View File

@@ -3,7 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent"; import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
import RegularDropDown from "../../../../ui/inputs/RegularDropDown"; import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
import { WalletIcon } from "../../../../icons/3dChartIcons"; import { WalletIcon } from "../../../../icons/3dChartIcons";
import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard"; import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
interface Widget { interface Widget {
id: string; id: string;

2
app/src/components/ui/Tools.tsx
View File

@@ -15,7 +15,7 @@ import {
} from "../icons/ExportToolsIcons"; } from "../icons/ExportToolsIcons";
import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons"; import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
import useModuleStore, { useThreeDStore } from "../../store/useModuleStore"; import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate"; import { handleSaveTemplate } from "../../modules/visualization/functions/handleSaveTemplate";
import { usePlayButtonStore } from "../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import useTemplateStore from "../../store/useTemplateStore"; import useTemplateStore from "../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../store/useZoneStore"; import { useSelectedZoneStore } from "../../store/useZoneStore";

41
app/src/components/ui/componets/functions/convertAutoToNumeric.ts
View File

@@ -1,41 +0,0 @@
import { getActiveProperties } from "./getActiveProperties";
export const convertAutoToNumeric = (
canvasRect: DOMRect,
position: {
top: number | "auto";
left: number | "auto";
right: number | "auto";
bottom: number | "auto";
}
): { top: number; left: number; right: number; bottom: number } => {
const { width, height } = canvasRect;
// Determine which properties are active
const [activeProp1, activeProp2] = getActiveProperties(position);
let top = typeof position.top !== "string" ? position.top : 0;
let left = typeof position.left !== "string" ? position.left : 0;
let right = typeof position.right !== "string" ? position.right : 0;
let bottom = typeof position.bottom !== "string" ? position.bottom : 0;
// Calculate missing properties based on active properties
if (activeProp1 === "top") {
bottom = height - top;
} else if (activeProp1 === "bottom") {
top = height - bottom;
}
if (activeProp2 === "left") {
right = width - left;
} else if (activeProp2 === "right") {
left = width - right;
}
return {
top,
left,
right,
bottom,
};
};

105
app/src/components/ui/realTimeVis/charts/ProgressCard1.tsx
View File

@@ -1,105 +0,0 @@
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2";
import io from "socket.io-client";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios";
const ProgressCard1 = ({ id,title,}: {
id: string,
title: string;
}) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h")
const [name, setName] = useState(title)
const [value, setValue] = useState<any>('')
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
useEffect(() => {
const socket = io(`http://${iotApiUrl}`);
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response.input1;
setValue(responseData);
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration]);
const fetchSavedInputes = async() => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.widgetName)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
}
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
return(
<div className="chart progressBar">
<div className="header">{name}</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">{
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
</div>
)
};
export default ProgressCard1;

125
app/src/components/ui/realTimeVis/charts/ProgressCard2.tsx
View File

@@ -1,125 +0,0 @@
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons";
import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2";
import io from "socket.io-client";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios";
const ProgressCard2 = ({ id,title,}: {
id: string,
title: string;
}) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h")
const [name, setName] = useState(title)
const [value1, setValue1] = useState<any>('')
const [value2, setValue2] = useState<any>('')
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const socket = io(`http://${iotApiUrl}`);
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData1 = response.input1;
const responseData2 = response.input2;
setValue1(responseData1);
setValue2(responseData2);
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration]);
const fetchSavedInputes = async() => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.widgetName)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
}
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
return(
<div className="chart progressBar">
<div className="header">{name}</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value1}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">{
measurements ? `${measurements?.input1?.fields}` : 'description'}</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value2}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">{
measurements ? `${measurements?.input2?.fields}` : 'description'}</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
</div>
)
};
export default ProgressCard2;

4
app/src/modules/scene/scene.tsx
View File

@@ -18,8 +18,8 @@ import Simulation from "../simulation/simulation";
// import Simulation from "./simulationtemp/simulation"; // import Simulation from "./simulationtemp/simulation";
import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget"; import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
import Dropped3dWidgets from "../../components/ui/componets/Dropped3dWidget"; import Dropped3dWidgets from "../../modules/visualization/widgets/3d/Dropped3dWidget";
import ZoneAssets from "../../components/ui/componets/zoneAssets"; import ZoneAssets from "../visualization/zoneAssets";
export default function Scene() { export default function Scene() {
const map = useMemo( const map = useMemo(

30
app/src/components/ui/componets/DisplayZone.tsx → app/src/modules/visualization/DisplayZone.tsx
View File

@@ -1,14 +1,18 @@
import React, { useEffect, useRef, useState, useCallback } from "react"; import React, { useEffect, useRef, useState, useCallback } from "react";
import { useWidgetStore, Widget } from "../../../store/useWidgetStore"; import { useWidgetStore, Widget } from "../../store/useWidgetStore";
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
import { InfoIcon } from "../../icons/ExportCommonIcons";
import { import {
useDroppedObjectsStore, useDroppedObjectsStore,
useFloatingWidget, useFloatingWidget,
} from "../../../store/useDroppedObjectsStore"; } from "../../store/useDroppedObjectsStore";
import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData"; import { getSelect2dZoneData } from "../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData"; import { getFloatingZoneData } from "../../services/realTimeVisulization/zoneData/getFloatingData";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; import { get3dWidgetZoneData } from "../../services/realTimeVisulization/zoneData/get3dWidgetData";
import {
MoveArrowLeft,
MoveArrowRight,
} from "../../components/icons/SimulationIcons";
import { InfoIcon } from "../../components/icons/ExportCommonIcons";
// Define the type for `Side` // Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -83,9 +87,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
// State to track overflow visibility // State to track overflow visibility
const [showLeftArrow, setShowLeftArrow] = useState(false); const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false);
const { floatingWidget, setFloatingWidget } = useFloatingWidget() const { floatingWidget, setFloatingWidget } = useFloatingWidget();
const { setSelectedChartId } = useWidgetStore() const { setSelectedChartId } = useWidgetStore();
// Function to calculate overflow state // Function to calculate overflow state
const updateOverflowState = useCallback(() => { const updateOverflowState = useCallback(() => {
@@ -166,9 +170,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneId, organization); let response = await getSelect2dZoneData(zoneId, organization);
console.log('response: ', response); console.log("response: ", response);
let res = await getFloatingZoneData(zoneId, organization); let res = await getFloatingZoneData(zoneId, organization);
console.log('res: ', res); console.log("res: ", res);
setFloatingWidget(res); setFloatingWidget(res);
// Set the selected zone in the store // Set the selected zone in the store
@@ -190,9 +194,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortTarget: response.viewPortCenter || {},
zoneViewPortPosition: response.viewPortposition || {}, zoneViewPortPosition: response.viewPortposition || {},
}); });
} catch (error) { } catch (error) {}
}
} }
return ( return (

160
app/src/components/ui/componets/RealTimeVisulization.tsx → app/src/modules/visualization/RealTimeVisulization.tsx
View File

@@ -1,34 +1,39 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import Panel from "./Panel"; import Panel from "./widgets/panel/Panel";
import AddButtons from "./AddButtons"; import AddButtons from "./widgets/panel/AddButtons";
import { useSelectedZoneStore } from "../../../store/useZoneStore"; import { useSelectedZoneStore } from "../../store/useZoneStore";
import DisplayZone from "./DisplayZone"; import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene"; import Scene from "../scene/scene";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../store/useModuleStore";
import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore"; import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/useDroppedObjectsStore";
import { import {
useAsset3dWidget, useAsset3dWidget,
useSocketStore, useSocketStore,
useWidgetSubOption, useWidgetSubOption,
useZones, useZones,
} from "../../../store/store"; } from "../../store/store";
import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData"; import { getZone2dData } from "../../services/realTimeVisulization/zoneData/getZoneData";
import { generateUniqueId } from "../../../functions/generateUniqueId"; import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition"; import { determinePosition } from "./functions/determinePosition";
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets"; import { addingFloatingWidgets } from "../../services/realTimeVisulization/zoneData/addFloatingWidgets";
import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev"; import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
import RenderOverlay from "../../templates/Overlay"; import RenderOverlay from "../../components/templates/Overlay";
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup"; import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
import DroppedObjects from "./DroppedFloatingWidgets"; import DroppedObjects from "./widgets/floating/DroppedFloatingWidgets";
import EditWidgetOption from "../menu/EditWidgetOption"; import EditWidgetOption from "../../components/ui/menu/EditWidgetOption";
import { import {
useEditWidgetOptionsStore, useEditWidgetOptionsStore,
useRightClickSelected, useRightClickSelected,
useRightSelected, useRightSelected,
} from "../../../store/useZone3DWidgetStore"; } from "../../store/useZone3DWidgetStore";
import Dropped3dWidgets from "./Dropped3dWidget"; import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
import OuterClick from "../../utils/outerClick";
import { useWidgetStore } from "../../store/useWidgetStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
// const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({}); // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
const { floatingWidget, setFloatingWidget } = useFloatingWidget() const { floatingWidget, setFloatingWidget } = useFloatingWidget();
const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore();
OuterClick({
contextClassName: [
"chart-container",
"floating",
"sidebar-right-wrapper",
"card",
"dropdown-menu",
],
setMenuVisible: () => setSelectedChartId(null),
});
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
@@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
{} {}
); );
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) { } } catch (error) {}
} }
GetZoneData(); GetZoneData();
@@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
activeSides: selectedZone.activeSides || [], activeSides: selectedZone.activeSides || [],
panelOrder: selectedZone.panelOrder || [], panelOrder: selectedZone.panelOrder || [],
lockedPanels: selectedZone.lockedPanels || [], lockedPanels: selectedZone.lockedPanels || [],
points:selectedZone.points||[], points: selectedZone.points || [],
zoneId: selectedZone.zoneId || "", zoneId: selectedZone.zoneId || "",
zoneViewPortTarget: selectedZone.zoneViewPortTarget || [], zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
zoneViewPortPosition: selectedZone.zoneViewPortPosition || [], zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -138,12 +155,10 @@ const RealTimeVisulization: React.FC = () => {
const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => { const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
try { try {
event.preventDefault();
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const data = event.dataTransfer.getData("text/plain"); const data = event.dataTransfer.getData("text/plain");
// if (widgetSelect !== "") return;
if (widgetSubOption === "3D") return; if (widgetSubOption === "3D") return;
if (!data || selectedZone.zoneName === "") return; if (!data || selectedZone.zoneName === "") return;
@@ -151,69 +166,88 @@ const RealTimeVisulization: React.FC = () => {
const canvasElement = document.getElementById("real-time-vis-canvas"); const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found"); if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect(); // Get canvas dimensions and mouse position
const relativeX = event.clientX - canvasRect.left; const rect = canvasElement.getBoundingClientRect();
const relativeY = event.clientY - canvasRect.top; let relativeX = (event.clientX - rect.left) ;
let relativeY = event.clientY - rect.top;
// Widget dimensions (with defaults)
const widgetWidth = droppedData.width || 125; // 250/2 as default
const widgetHeight = droppedData.height || 100; // 83/2 as default
// Clamp to ensure widget stays fully inside canvas
const clampedX = Math.max(
0, // Prevent going beyond left edge
Math.min(
relativeX,
rect.width - widgetWidth // Prevent going beyond right edge
)
);
console.log('clampedX: ', clampedX);
const clampedY = Math.max(
0, // Prevent going beyond top edge
Math.min(
relativeY,
rect.height - widgetHeight // Prevent going beyond bottom edge
)
);
// Debug logging (optional)
console.log("Drop coordinates:", {
rawX: relativeX,
rawY: relativeY,
clampedX,
clampedY,
canvasWidth: rect.width,
canvasHeight: rect.height,
widgetWidth,
widgetHeight
});
const finalPosition = determinePosition(rect, clampedX, clampedY);
const newPosition = determinePosition(canvasRect, relativeX, relativeY);
console.log("newPosition: ", newPosition);
const newObject = { const newObject = {
...droppedData, ...droppedData,
id: generateUniqueId(), id: generateUniqueId(),
position: determinePosition(canvasRect, relativeX, relativeY), position: finalPosition,
}; };
// Only set zone if it’s not already in the store (prevents overwriting objects) // Zone management
const existingZone = const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
if (!existingZone) { if (!existingZone) {
useDroppedObjectsStore useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
.getState()
.setZone(selectedZone.zoneName, selectedZone.zoneId);
} }
let addFloatingWidget = { // Socket emission
organization: organization, const addFloatingWidget = {
organization,
widget: newObject, widget: newObject,
zoneId: selectedZone.zoneId, zoneId: selectedZone.zoneId,
}; };
console.log("newObject: ", newObject);
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget); visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
} }
useDroppedObjectsStore
.getState()
.addObject(selectedZone.zoneName, newObject);
//I need to console here objects based on selectedZone.zoneId // Store update
// Console the objects after adding useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
// Post-drop verification
const droppedObjectsStore = useDroppedObjectsStore.getState(); const droppedObjectsStore = useDroppedObjectsStore.getState();
const currentZone = droppedObjectsStore.zones[selectedZone.zoneName]; const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
if (currentZone && currentZone.zoneId === selectedZone.zoneId) { if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
console.log( console.log(`Objects for Zone ${selectedZone.zoneId}:`, currentZone.objects);
`Objects for Zone ID: ${selectedZone.zoneId}`, setFloatingWidget(currentZone.objects);
currentZone.objects
);
setFloatingWidget(currentZone.objects)
} else { } else {
console.warn("Zone not found or mismatched zoneId"); console.warn("Zone not found or zoneId mismatch");
} }
// let response = await addingFloatingWidgets( } catch (error) {
// selectedZone.zoneId, console.error("Error in handleDrop:", error);
// organization, // Consider adding user feedback here (e.g., toast notification)
// newObject }
// );
// Add the dropped object to the zone if the API call is successful
// if (response.message === "FloatWidget created successfully") {
// }
// Update floating widgets state
} catch (error) { }
}; };
useEffect(() => { useEffect(() => {
@@ -253,7 +287,7 @@ const RealTimeVisulization: React.FC = () => {
<RenderOverlay> <RenderOverlay>
<ConfirmationPopup <ConfirmationPopup
message={"Are you sure want to delete?"} message={"Are you sure want to delete?"}
onConfirm={() => console.log("confirm")} onConfirm={() => console.log("Confirmed")}
onCancel={() => setOpenConfirmationPopup(false)} onCancel={() => setOpenConfirmationPopup(false)}
/> />
</RenderOverlay> </RenderOverlay>

0
app/src/modules/visualization/captureVisualization.ts → app/src/modules/visualization/functions/captureVisualization.ts
View File

0
app/src/components/ui/componets/functions/determinePosition.ts → app/src/modules/visualization/functions/determinePosition.ts
View File

0
app/src/components/ui/componets/functions/getActiveProperties.ts → app/src/modules/visualization/functions/getActiveProperties.ts
View File

4
app/src/modules/visualization/handleSaveTemplate.ts → app/src/modules/visualization/functions/handleSaveTemplate.ts
View File

@@ -1,4 +1,4 @@
import { Template } from "../../store/useTemplateStore"; import { Template } from "../../../store/useTemplateStore";
import { captureVisualization } from "./captureVisualization"; import { captureVisualization } from "./captureVisualization";
type HandleSaveTemplateProps = { type HandleSaveTemplateProps = {
@@ -26,7 +26,6 @@ export const handleSaveTemplate = async ({
templates = [], templates = [],
visualizationSocket, visualizationSocket,
}: HandleSaveTemplateProps): Promise<void> => { }: HandleSaveTemplateProps): Promise<void> => {
console.log("floatingWidget: ", floatingWidget);
try { try {
// Check if the selected zone has any widgets // Check if the selected zone has any widgets
if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) { if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
@@ -49,6 +48,7 @@ export const handleSaveTemplate = async ({
// Capture visualization snapshot // Capture visualization snapshot
const snapshot = await captureVisualization(); const snapshot = await captureVisualization();
if (!snapshot) { if (!snapshot) {
return; return;
} }

0
app/src/components/ui/componets/functions/handleWidgetsOuterClick.ts → app/src/modules/visualization/functions/handleWidgetsOuterClick.ts
View File

238
app/src/modules/visualization/realTimeVizSocket.dev.tsx
View File

@@ -1,238 +0,0 @@
import { useEffect } from "react";
import { useSocketStore } from "../../store/store";
import { useSelectedZoneStore } from "../../store/useZoneStore";
import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
import useTemplateStore from "../../store/useTemplateStore";
type WidgetData = {
id: string;
type: string;
position: [number, number, number];
rotation?: [number, number, number];
tempPosition?: [number, number, number];
};
export default function SocketRealTimeViz() {
const { visualizationSocket } = useSocketStore();
const { setSelectedZone } = useSelectedZoneStore();
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
const { addWidget } = useZoneWidgetStore()
const { removeTemplate } = useTemplateStore();
const { setTemplates } = useTemplateStore();
const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
useEffect(() => {
if (visualizationSocket) {
//add panel response
visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
if (addPanel.success) {
let addPanelData = addPanel.data.data
setSelectedZone(addPanelData)
}
})
//delete panel response
visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
if (deletePanel.success) {
let deletePanelData = deletePanel.data.data
setSelectedZone(deletePanelData)
}
})
//clear Panel response
visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
if (clearPanel.success && clearPanel.message === "PanelWidgets cleared successfully") {
let clearPanelData = clearPanel.data.data
setSelectedZone(clearPanelData)
}
})
//lock Panel response
visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
if (lockPanel.success && lockPanel.message === "locked panel updated successfully") {
let lockPanelData = lockPanel.data.data
setSelectedZone(lockPanelData)
}
})
// add 2dWidget response
visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
if (add2dWidget.success && add2dWidget.data) {
setSelectedZone((prev) => {
const isWidgetAlreadyAdded = prev.widgets.some(
(widget) => widget.id === add2dWidget.data.widgetData.id
);
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
return {
...prev,
zoneId: add2dWidget.data.zoneId,
zoneName: add2dWidget.data.zoneName,
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
};
});
}
});
//delete 2D Widget response
visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
if (deleteWidget?.success && deleteWidget.data) {
setSelectedZone((prevZone: any) => ({
...prevZone,
zoneId: deleteWidget.data.zoneId,
zoneName: deleteWidget.data.zoneName,
widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
}));
}
});
//add Floating Widget response
visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
if (addFloatingWidget.success) {
if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
const state = useDroppedObjectsStore.getState();
const zone = state.zones[addFloatingWidget.data.zoneName];
if (!zone) {
state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
}
const existingObjects = zone ? zone.objects : [];
const newWidget = addFloatingWidget.data.widget;
// ✅ Check if the widget ID already exists before adding
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
if (isAlreadyAdded) {
return; // Don't add the widget if it already exists
}
// Add widget only if it doesn't exist
state.addObject(addFloatingWidget.data.zoneName, newWidget);
}
if (addFloatingWidget.message === "Widget updated successfully") {
updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
}
}
});
//duplicate Floating Widget response
visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
useDroppedObjectsStore.setState((state) => {
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
if (!zone) return state; // Zone doesn't exist, return state as is
const existingObjects = zone.objects;
const newWidget = duplicateFloatingWidget.data.widget;
// ✅ Check if the object with the same ID already exists
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
if (isAlreadyAdded) {
return state; // Don't update state if it's already there
}
return {
zones: {
...state.zones,
[duplicateFloatingWidget.data.zoneName]: {
...zone,
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
},
},
};
});
}
});
//delete Floating Widget response
visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
if (deleteFloatingWidget.success) {
deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
}
});
//add 3D Widget response
visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
if (add3DWidget.success) {
if (add3DWidget.message === "Widget created successfully") {
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
}
}
});
//delete 3D Widget response
visualizationSocket.on("viz-widget3D:response:delete", (delete3DWidget: any) => {
// "3DWidget delete unsuccessfull"
if (delete3DWidget.success && delete3DWidget.message === "3DWidget delete successfull") {
const activeZoneWidgets = zoneWidgetData[delete3DWidget.data.zoneId] || [];
setZoneWidgetData(
delete3DWidget.data.zoneId,
activeZoneWidgets.filter((w: WidgetData) => w.id !== delete3DWidget.data.id)
);
}
});
//update3D widget response
visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
if (update3DWidget.success && update3DWidget.message === "widget update successfully") {
updateWidgetPosition(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.position);
updateWidgetRotation(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.rotation);
}
});
// add Template response
visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
if (addingTemplate.success) {
if (addingTemplate.message === "Template saved successfully") {
setTemplates(addingTemplate.data);
}
}
});
//load Template response
visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
if (loadTemplate.success) {
if (loadTemplate.message === "Template placed in Zone") {
let template = loadTemplate.data.template
setSelectedZone({
panelOrder: template.panelOrder,
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
widgets: template.widgets,
});
useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
if (Array.isArray(template.floatingWidget)) {
template.floatingWidget.forEach((val: any) => {
useDroppedObjectsStore.getState().addObject(template.zoneName, val);
});
}
}
}
});
//delete Template response
visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
if (deleteTemplate.success) {
if (deleteTemplate.message === 'Template deleted successfully') {
removeTemplate(deleteTemplate.data);
}
}
});
}
}, [visualizationSocket])
return (
<></>
)
}

296
app/src/modules/visualization/socket/realTimeVizSocket.dev.tsx Normal file
View File

@@ -0,0 +1,296 @@
import { useEffect } from "react";
import { useSocketStore } from "../../../store/store";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import useTemplateStore from "../../../store/useTemplateStore";
type WidgetData = {
id: string;
type: string;
position: [number, number, number];
rotation?: [number, number, number];
tempPosition?: [number, number, number];
};
export default function SocketRealTimeViz() {
const { visualizationSocket } = useSocketStore();
const { setSelectedZone } = useSelectedZoneStore();
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
const updateObjectPosition = useDroppedObjectsStore(
(state) => state.updateObjectPosition
);
const { addWidget } = useZoneWidgetStore();
const { removeTemplate } = useTemplateStore();
const { setTemplates } = useTemplateStore();
const {
zoneWidgetData,
setZoneWidgetData,
updateWidgetPosition,
updateWidgetRotation,
} = useZoneWidgetStore();
useEffect(() => {
if (visualizationSocket) {
//add panel response
visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
if (addPanel.success) {
let addPanelData = addPanel.data.data;
setSelectedZone(addPanelData);
}
});
//delete panel response
visualizationSocket.on(
"viz-panel:response:delete",
(deletePanel: any) => {
if (deletePanel.success) {
let deletePanelData = deletePanel.data.data;
setSelectedZone(deletePanelData);
}
}
);
//clear Panel response
visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
if (
clearPanel.success &&
clearPanel.message === "PanelWidgets cleared successfully"
) {
let clearPanelData = clearPanel.data.data;
setSelectedZone(clearPanelData);
}
});
//lock Panel response
visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
if (
lockPanel.success &&
lockPanel.message === "locked panel updated successfully"
) {
let lockPanelData = lockPanel.data.data;
setSelectedZone(lockPanelData);
}
});
// add 2dWidget response
visualizationSocket.on(
"viz-widget:response:updates",
(add2dWidget: any) => {
if (add2dWidget.success && add2dWidget.data) {
setSelectedZone((prev) => {
const isWidgetAlreadyAdded = prev.widgets.some(
(widget) => widget.id === add2dWidget.data.widgetData.id
);
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
return {
...prev,
zoneId: add2dWidget.data.zoneId,
zoneName: add2dWidget.data.zoneName,
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
};
});
}
}
);
//delete 2D Widget response
visualizationSocket.on(
"viz-widget:response:delete",
(deleteWidget: any) => {
if (deleteWidget?.success && deleteWidget.data) {
setSelectedZone((prevZone: any) => ({
...prevZone,
zoneId: deleteWidget.data.zoneId,
zoneName: deleteWidget.data.zoneName,
widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
}));
}
}
);
//add Floating Widget response
visualizationSocket.on(
"viz-float:response:updates",
(addFloatingWidget: any) => {
if (addFloatingWidget.success) {
if (
addFloatingWidget.success &&
addFloatingWidget.message === "FloatWidget created successfully"
) {
const state = useDroppedObjectsStore.getState();
const zone = state.zones[addFloatingWidget.data.zoneName];
if (!zone) {
state.setZone(
addFloatingWidget.data.zoneName,
addFloatingWidget.data.zoneId
);
}
const existingObjects = zone ? zone.objects : [];
const newWidget = addFloatingWidget.data.widget;
// ✅ Check if the widget ID already exists before adding
const isAlreadyAdded = existingObjects.some(
(obj) => obj.id === newWidget.id
);
if (isAlreadyAdded) {
return; // Don't add the widget if it already exists
}
// Add widget only if it doesn't exist
state.addObject(addFloatingWidget.data.zoneName, newWidget);
}
if (addFloatingWidget.message === "Widget updated successfully") {
updateObjectPosition(
addFloatingWidget.data.zoneName,
addFloatingWidget.data.index,
addFloatingWidget.data.position
);
}
}
}
);
//duplicate Floating Widget response
visualizationSocket.on(
"viz-float:response:addDuplicate",
(duplicateFloatingWidget: any) => {
if (
duplicateFloatingWidget.success &&
duplicateFloatingWidget.message ===
"duplicate FloatWidget created successfully"
) {
useDroppedObjectsStore.setState((state) => {
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
if (!zone) return state; // Zone doesn't exist, return state as is
const existingObjects = zone.objects;
const newWidget = duplicateFloatingWidget.data.widget;
// ✅ Check if the object with the same ID already exists
const isAlreadyAdded = existingObjects.some(
(obj) => obj.id === newWidget.id
);
if (isAlreadyAdded) {
return state; // Don't update state if it's already there
}
return {
zones: {
...state.zones,
[duplicateFloatingWidget.data.zoneName]: {
...zone,
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
},
},
};
});
}
}
);
//delete Floating Widget response
visualizationSocket.on(
"viz-float:response:delete",
(deleteFloatingWidget: any) => {
if (deleteFloatingWidget.success) {
deleteObject(
deleteFloatingWidget.data.zoneName,
deleteFloatingWidget.data.floatWidgetID
);
}
}
);
//add 3D Widget response
visualizationSocket.on(
"viz-widget3D:response:updates",
(add3DWidget: any) => {
if (add3DWidget.success) {
if (add3DWidget.message === "Widget created successfully") {
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
}
}
}
);
//delete 3D Widget response
visualizationSocket.on(
"viz-widget3D:response:delete",
(delete3DWidget: any) => {
// "3DWidget delete unsuccessfull"
if (
delete3DWidget.success &&
delete3DWidget.message === "3DWidget delete successfull"
) {
const activeZoneWidgets =
zoneWidgetData[delete3DWidget.data.zoneId] || [];
setZoneWidgetData(
delete3DWidget.data.zoneId,
activeZoneWidgets.filter(
(w: WidgetData) => w.id !== delete3DWidget.data.id
)
);
}
}
);
//update3D widget response
visualizationSocket.on(
"viz-widget3D:response:modifyPositionRotation",
(update3DWidget: any) => {
if (
update3DWidget.success &&
update3DWidget.message === "widget update successfully"
) {
updateWidgetPosition(
update3DWidget.data.zoneId,
update3DWidget.data.widget.id,
update3DWidget.data.widget.position
);
updateWidgetRotation(
update3DWidget.data.zoneId,
update3DWidget.data.widget.id,
update3DWidget.data.widget.rotation
);
}
}
);
// add Template response
visualizationSocket.on(
"viz-template:response:add",
(addingTemplate: any) => {
if (addingTemplate.success) {
if (addingTemplate.message === "Template saved successfully") {
setTemplates(addingTemplate.data);
}
}
}
);
//load Template response
visualizationSocket.on(
"viz-template:response:addTemplateZone",
(loadTemplate: any) => {
if (loadTemplate.success) {
if (loadTemplate.message === "Template placed in Zone") {
let template = loadTemplate.data.template;
setSelectedZone({
panelOrder: template.panelOrder,
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
widgets: template.widgets,
});
useDroppedObjectsStore
.getState()
.setZone(template.zoneName, template.zoneId);
if (Array.isArray(template.floatingWidget)) {
template.floatingWidget.forEach((val: any) => {
useDroppedObjectsStore
.getState()
.addObject(template.zoneName, val);
});
}
}
}
}
);
//delete Template response
visualizationSocket.on(
"viz-template:response:delete",
(deleteTemplate: any) => {
if (deleteTemplate.success) {
if (deleteTemplate.message === "Template deleted successfully") {
removeTemplate(deleteTemplate.data);
}
}
}
);
}
}, [visualizationSocket]);
return <></>;
}

14
app/src/components/layout/sidebarLeft/visualization/Templates.tsx → app/src/modules/visualization/template/Templates.tsx
View File

@@ -1,10 +1,12 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore"; import useTemplateStore from "../../../store/useTemplateStore";
import useTemplateStore from "../../../../store/useTemplateStore"; import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { useSelectedZoneStore } from "../../../../store/useZoneStore"; import { useSocketStore } from "../../../store/store";
import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate"; import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
import { useSocketStore } from "../../../../store/store"; import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import RenameInput from "../../../ui/inputs/RenameInput"; import RenameInput from "../../../components/ui/inputs/RenameInput";
const Templates = () => { const Templates = () => {
const { templates, removeTemplate, setTemplates } = useTemplateStore(); const { templates, removeTemplate, setTemplates } = useTemplateStore();

55
app/src/components/ui/componets/DraggableWidget.tsx → app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@@ -1,25 +1,25 @@
import { useWidgetStore } from "../../../store/useWidgetStore"; import { useWidgetStore } from "../../../../store/useWidgetStore";
import ProgressCard from "../realTimeVis/charts/ProgressCard"; import ProgressCard from "../2d/charts/ProgressCard";
import useChartStore from "../../../store/useChartStore"; import PieGraphComponent from "../2d/charts/PieGraphComponent";
import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent"; import BarGraphComponent from "../2d/charts/BarGraphComponent";
import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent"; import LineGraphComponent from "../2d/charts/LineGraphComponent";
import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent"; import DoughnutGraphComponent from "../2d/charts/DoughnutGraphComponent";
import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent"; import PolarAreaGraphComponent from "../2d/charts/PolarAreaGraphComponent";
import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent"; import ProgressCard1 from "../2d/charts/ProgressCard1";
import ProgressCard1 from "../realTimeVis/charts/ProgressCard1"; import ProgressCard2 from "../2d/charts/ProgressCard2";
import ProgressCard2 from "../realTimeVis/charts/ProgressCard2";
import { import {
DeleteIcon, DeleteIcon,
DublicateIcon, DublicateIcon,
KebabIcon, KebabIcon,
} from "../../icons/ExportCommonIcons"; } from "../../../../components/icons/ExportCommonIcons";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget"; import { duplicateWidgetApi } from "../../../../services/realTimeVisulization/zoneData/duplicateWidget";
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi"; import { deleteWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
import { useClickOutside } from "./functions/handleWidgetsOuterClick"; import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { useSocketStore } from "../../../store/store"; import { useSocketStore } from "../../../../store/store";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import OuterClick from "../../../utils/outerClick"; import OuterClick from "../../../../utils/outerClick";
import useChartStore from "../../../../store/useChartStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -45,7 +45,7 @@ export const DraggableWidget = ({
zoneName: string; zoneName: string;
zoneId: string; zoneId: string;
activeSides: Side[]; activeSides: Side[];
points:[]; points: [];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
widgets: Widget[]; widgets: Widget[];
@@ -55,7 +55,7 @@ export const DraggableWidget = ({
zoneName: string; zoneName: string;
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
points:[]; points: [];
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
@@ -100,19 +100,6 @@ export const DraggableWidget = ({
const chartWidget = useRef<HTMLDivElement>(null); const chartWidget = useRef<HTMLDivElement>(null);
OuterClick({
contextClassName: [
"chart-container",
"floating",
"sidebar-right-wrapper",
"card",
"dropdown-menu",
"sidebar-right-content-container",
"dropdown-options"
],
setMenuVisible: () => setSelectedChartId(null),
});
const deleteSelectedChart = async () => { const deleteSelectedChart = async () => {
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
@@ -198,7 +185,7 @@ export const DraggableWidget = ({
}, },
id: `${widget.id}-copy-${Date.now()}`, id: `${widget.id}-copy-${Date.now()}`,
}; };
console.log('duplicatedWidget: ', duplicatedWidget); console.log("duplicatedWidget: ", duplicatedWidget);
let duplicateWidget = { let duplicateWidget = {
organization: organization, organization: organization,
@@ -420,5 +407,3 @@ export const DraggableWidget = ({
</> </>
); );
}; };
// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height

7
app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
View File

@@ -188,10 +188,11 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import { useThemeStore } from "../../../../store/useThemeStore";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;

27
app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Doughnut } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import { useThemeStore } from "../../../../store/useThemeStore";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;
@@ -15,7 +16,7 @@ interface ChartComponentProps {
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
} }
const DoughnutGraphComponent = ({ const LineGraphComponent = ({
id, id,
type, type,
title, title,
@@ -96,11 +97,11 @@ const DoughnutGraphComponent = ({
}, },
}, },
scales: { scales: {
// x: { x: {
// ticks: { ticks: {
// display: true, // This hides the x-axis labels display: true, // This hides the x-axis labels
// }, },
// }, },
}, },
}), }),
[title, chartFontStyle, name] [title, chartFontStyle, name]
@@ -160,6 +161,8 @@ const DoughnutGraphComponent = ({
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log('line chart res',response);
setmeasurements(response.data.Data.measurements) setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)
setName(response.data.widgetName) setName(response.data.widgetName)
@@ -183,7 +186,7 @@ const DoughnutGraphComponent = ({
} }
,[chartMeasurements, chartDuration, widgetName]) ,[chartMeasurements, chartDuration, widgetName])
return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
}; };
export default DoughnutGraphComponent; export default LineGraphComponent;

79
app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import { useThemeStore } from "../../../../store/useThemeStore";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;
@@ -24,11 +25,18 @@ const LineGraphComponent = ({
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
const { themeColor } = useThemeStore(); const { themeColor } = useThemeStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const {
measurements: chartMeasurements,
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h");
const [name, setName] = useState("Widget") const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ const [chartData, setChartData] = useState<{
labels: string[];
datasets: any[];
}>({
labels: [], labels: [],
datasets: [], datasets: [],
}); });
@@ -36,7 +44,7 @@ const LineGraphComponent = ({
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0];
const defaultData = { const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [ datasets: [
@@ -50,13 +58,17 @@ const LineGraphComponent = ({
], ],
}; };
useEffect(() => { useEffect(() => {}, []);
},[])
// Memoize Theme Colors // Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); const buttonActionColor = useMemo(
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); () => themeColor[0] || "#5c87df",
[themeColor]
);
const buttonAbortColor = useMemo(
() => themeColor[1] || "#ffffff",
[themeColor]
);
// Memoize Font Styling // Memoize Font Styling
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
@@ -68,8 +80,14 @@ const LineGraphComponent = ({
[] []
); );
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]); const fontSizeValue = useMemo(
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); () => (fontSize ? parseInt(fontSize) : 12),
[fontSize]
);
const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap]
);
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
@@ -110,7 +128,8 @@ const LineGraphComponent = ({
// },[measurements]) // },[measurements])
useEffect(() => { useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const socket = io(`http://${iotApiUrl}`); const socket = io(`http://${iotApiUrl}`);
@@ -120,7 +139,6 @@ const LineGraphComponent = ({
interval: 1000, interval: 1000,
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@@ -154,17 +172,16 @@ const LineGraphComponent = ({
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
if (response.status === 200) { if (response.status === 200) {
console.log('line chart res',response); setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setmeasurements(response.data.Data.measurements) setName(response.data.widgetName);
setDuration(response.data.Data.duration)
setName(response.data.widgetName)
} else { } else {
console.log("Unexpected response:", response); console.log("Unexpected response:", response);
} }
@@ -172,7 +189,7 @@ const LineGraphComponent = ({
console.error("There was an error!", error); console.error("There was an error!", error);
} }
} }
} };
useEffect(() => { useEffect(() => {
fetchSavedInputes(); fetchSavedInputes();
@@ -182,10 +199,14 @@ const LineGraphComponent = ({
if (selectedChartId?.id === id) { if (selectedChartId?.id === id) {
fetchSavedInputes(); fetchSavedInputes();
} }
} }, [chartMeasurements, chartDuration, widgetName]);
,[chartMeasurements, chartDuration, widgetName])
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return (
<Line
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
}; };
export default LineGraphComponent; export default LineGraphComponent;

78
app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
View File

@@ -183,14 +183,14 @@
// export default PieChartComponent; // export default PieChartComponent;
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Pie } from "react-chartjs-2"; import { Pie } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import { useThemeStore } from "../../../../store/useThemeStore";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;
@@ -210,11 +210,18 @@ const PieChartComponent = ({
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
const { themeColor } = useThemeStore(); const { themeColor } = useThemeStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const {
measurements: chartMeasurements,
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h");
const [name, setName] = useState("Widget") const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ const [chartData, setChartData] = useState<{
labels: string[];
datasets: any[];
}>({
labels: [], labels: [],
datasets: [], datasets: [],
}); });
@@ -222,7 +229,7 @@ const PieChartComponent = ({
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0];
const defaultData = { const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [ datasets: [
@@ -236,13 +243,17 @@ const PieChartComponent = ({
], ],
}; };
useEffect(() => { useEffect(() => {}, []);
},[])
// Memoize Theme Colors // Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); const buttonActionColor = useMemo(
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); () => themeColor[0] || "#5c87df",
[themeColor]
);
const buttonAbortColor = useMemo(
() => themeColor[1] || "#ffffff",
[themeColor]
);
// Memoize Font Styling // Memoize Font Styling
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
@@ -254,8 +265,14 @@ const PieChartComponent = ({
[] []
); );
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]); const fontSizeValue = useMemo(
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); () => (fontSize ? parseInt(fontSize) : 12),
[fontSize]
);
const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap]
);
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
@@ -296,7 +313,8 @@ const PieChartComponent = ({
// },[measurements]) // },[measurements])
useEffect(() => { useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const socket = io(`http://${iotApiUrl}`); const socket = io(`http://${iotApiUrl}`);
@@ -306,7 +324,6 @@ const PieChartComponent = ({
interval: 1000, interval: 1000,
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@@ -340,15 +357,16 @@ const PieChartComponent = ({
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
if (response.status === 200) { if (response.status === 200) {
setmeasurements(response.data.Data.measurements) setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration);
setName(response.data.widgetName) setName(response.data.widgetName);
} else { } else {
console.log("Unexpected response:", response); console.log("Unexpected response:", response);
} }
@@ -356,7 +374,7 @@ const PieChartComponent = ({
console.error("There was an error!", error); console.error("There was an error!", error);
} }
} }
} };
useEffect(() => { useEffect(() => {
fetchSavedInputes(); fetchSavedInputes();
@@ -366,10 +384,14 @@ const PieChartComponent = ({
if (selectedChartId?.id === id) { if (selectedChartId?.id === id) {
fetchSavedInputes(); fetchSavedInputes();
} }
} }, [chartMeasurements, chartDuration, widgetName]);
,[chartMeasurements, chartDuration, widgetName])
return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return (
<Pie
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
}; };
export default PieChartComponent; export default PieChartComponent;

77
app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { PolarArea } from "react-chartjs-2"; import { PolarArea } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import { useThemeStore } from "../../../../store/useThemeStore";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import { useThemeStore } from "../../../../../store/useThemeStore";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;
@@ -24,11 +25,18 @@ const PolarAreaGraphComponent = ({
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
const { themeColor } = useThemeStore(); const { themeColor } = useThemeStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const {
measurements: chartMeasurements,
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h");
const [name, setName] = useState("Widget") const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ const [chartData, setChartData] = useState<{
labels: string[];
datasets: any[];
}>({
labels: [], labels: [],
datasets: [], datasets: [],
}); });
@@ -36,7 +44,7 @@ const PolarAreaGraphComponent = ({
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0];
const defaultData = { const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [ datasets: [
@@ -50,13 +58,17 @@ const PolarAreaGraphComponent = ({
], ],
}; };
useEffect(() => { useEffect(() => {}, []);
},[])
// Memoize Theme Colors // Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); const buttonActionColor = useMemo(
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); () => themeColor[0] || "#5c87df",
[themeColor]
);
const buttonAbortColor = useMemo(
() => themeColor[1] || "#ffffff",
[themeColor]
);
// Memoize Font Styling // Memoize Font Styling
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
@@ -68,8 +80,14 @@ const PolarAreaGraphComponent = ({
[] []
); );
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]); const fontSizeValue = useMemo(
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); () => (fontSize ? parseInt(fontSize) : 12),
[fontSize]
);
const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap]
);
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
@@ -110,7 +128,8 @@ const PolarAreaGraphComponent = ({
// },[measurements]) // },[measurements])
useEffect(() => { useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const socket = io(`http://${iotApiUrl}`); const socket = io(`http://${iotApiUrl}`);
@@ -120,7 +139,6 @@ const PolarAreaGraphComponent = ({
interval: 1000, interval: 1000,
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
@@ -154,15 +172,16 @@ const PolarAreaGraphComponent = ({
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
if (response.status === 200) { if (response.status === 200) {
setmeasurements(response.data.Data.measurements) setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration);
setName(response.data.widgetName) setName(response.data.widgetName);
} else { } else {
console.log("Unexpected response:", response); console.log("Unexpected response:", response);
} }
@@ -170,7 +189,7 @@ const PolarAreaGraphComponent = ({
console.error("There was an error!", error); console.error("There was an error!", error);
} }
} }
} };
useEffect(() => { useEffect(() => {
fetchSavedInputes(); fetchSavedInputes();
@@ -180,10 +199,14 @@ const PolarAreaGraphComponent = ({
if (selectedChartId?.id === id) { if (selectedChartId?.id === id) {
fetchSavedInputes(); fetchSavedInputes();
} }
} }, [chartMeasurements, chartDuration, widgetName]);
,[chartMeasurements, chartDuration, widgetName])
return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return (
<PolarArea
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
}; };
export default PolarAreaGraphComponent; export default PolarAreaGraphComponent;

2
app/src/components/ui/realTimeVis/charts/ProgressCard.tsx → app/src/modules/visualization/widgets/2d/charts/ProgressCard.tsx
View File

@@ -1,4 +1,4 @@
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons"; import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
const ProgressCard = ({ const ProgressCard = ({
title, title,

105
app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx Normal file
View File

@@ -0,0 +1,105 @@
import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2";
import io from "socket.io-client";
import axios from "axios";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
const {
measurements: chartMeasurements,
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [name, setName] = useState(title);
const [value, setValue] = useState<any>("");
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
useEffect(() => {
const socket = io(`http://${iotApiUrl}`);
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response.input1;
setValue(responseData);
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration]);
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.widgetName);
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}, [chartMeasurements, chartDuration, widgetName]);
return (
<div className="chart progressBar">
<div className="header">{name}</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">
{measurements ? `${measurements?.input1?.fields}` : "description"}
</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
</div>
);
};
export default ProgressCard1;

125
app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx Normal file
View File

@@ -0,0 +1,125 @@
import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2";
import io from "socket.io-client";
import axios from "axios";
import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
const {
measurements: chartMeasurements,
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [name, setName] = useState(title);
const [value1, setValue1] = useState<any>("");
const [value2, setValue2] = useState<any>("");
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const socket = io(`http://${iotApiUrl}`);
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData1 = response.input1;
const responseData2 = response.input2;
setValue1(responseData1);
setValue2(responseData2);
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration]);
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.widgetName);
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}, [chartMeasurements, chartDuration, widgetName]);
return (
<div className="chart progressBar">
<div className="header">{name}</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value1}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">
{measurements ? `${measurements?.input1?.fields}` : "description"}
</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
<div className="stock">
<span className="stock-item">
<span className="stockValues">
<div className="value">{value2}</div>
<div className="key">Units</div>
</span>
<div className="stock-description">
{measurements ? `${measurements?.input2?.fields}` : "description"}
</div>
</span>
<div className="icon">
<StockIncreseIcon />
</div>
</div>
</div>
);
};
export default ProgressCard2;

0
app/src/components/ui/realTimeVis/charts/RadarGraphComponent.tsx → app/src/modules/visualization/widgets/2d/charts/RadarGraphComponent.tsx
View File

52
app/src/components/ui/componets/Dropped3dWidget.tsx → app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@@ -1,37 +1,25 @@
import * as THREE from "three";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../../store/store";
useAsset3dWidget, import useModuleStore from "../../../../store/useModuleStore";
useSocketStore, import { ThreeState } from "../../../../types/world/worldTypes";
useWidgetSubOption, import { useSelectedZoneStore } from "../../../../store/useZoneStore";
} from "../../../store/store"; import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../../store/useZone3DWidgetStore";
import useChartStore from "../../../store/useChartStore"; import { use3DWidget } from "../../../../store/useDroppedObjectsStore";
import useModuleStore from "../../../store/useModuleStore"; import { get3dWidgetZoneData } from "../../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { ThreeState } from "../../../types/world/worldTypes"; import { generateUniqueId } from "../../../../functions/generateUniqueId";
import * as THREE from "three"; import ProductionCapacity from "./cards/ProductionCapacity";
import Throughput from "../../layout/3D-cards/cards/Throughput"; import ReturnOfInvestment from "./cards/ReturnOfInvestment";
import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity"; import StateWorking from "./cards/StateWorking";
import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment"; import Throughput from "./cards/Throughput";
import StateWorking from "../../layout/3D-cards/cards/StateWorking"; import { useWidgetStore } from "../../../../store/useWidgetStore";
import { useSelectedZoneStore } from "../../../store/useZoneStore"; import useChartStore from "../../../../store/useChartStore";
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { use3DWidget } from "../../../store/useDroppedObjectsStore";
import {
useEditWidgetOptionsStore,
useLeftData,
useRightClickSelected,
useRightSelected,
useTopData,
useZoneWidgetStore,
} from "../../../store/useZone3DWidgetStore";
import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
import {
update3dWidget,
update3dWidgetRotation,
} from "../../../services/realTimeVisulization/zoneData/update3dWidget";
import { useWidgetStore } from "../../../store/useWidgetStore";
type WidgetData = { type WidgetData = {
id: string; id: string;
type: string; type: string;

7
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx → app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@@ -11,11 +11,11 @@ import {
Legend, Legend,
TooltipItem, // Import TooltipItem for typing TooltipItem, // Import TooltipItem for typing
} from "chart.js"; } from "chart.js";
import { ThroughputIcon } from "../../../icons/3dChartIcons";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
// Register ChartJS components // Register ChartJS components
ChartJS.register( ChartJS.register(
@@ -229,6 +229,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
// transform: transformStyle.transform, // transform: transformStyle.transform,
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
position: "absolute", position: "absolute",
transform:'translate(-50%, -50%)',
}} }}
> >
<div className="headeproductionCapacityr-wrapper"> <div className="headeproductionCapacityr-wrapper">

8
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx → app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@@ -11,11 +11,13 @@ import {
ChartData, ChartData,
ChartOptions, ChartOptions,
} from "chart.js"; } from "chart.js";
import { WavyIcon } from "../../../icons/3dChartIcons";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
// Register Chart.js components // Register Chart.js components
ChartJS.register( ChartJS.register(

5
app/src/components/layout/3D-cards/cards/StateWorking.tsx → app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@@ -1,9 +1,10 @@
import { Html } from "@react-three/drei"; import { Html } from "@react-three/drei";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
// import image from "../../../../assets/image/temp/image.png"; // import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps { interface StateWorkingProps {

8
app/src/components/layout/3D-cards/cards/Throughput.tsx → app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@@ -13,11 +13,13 @@ import {
ChartData, ChartData,
ChartOptions, ChartOptions,
} from "chart.js"; } from "chart.js";
import { ThroughputIcon } from "../../../icons/3dChartIcons";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
// Register Chart.js components // Register Chart.js components
ChartJS.register( ChartJS.register(

0
app/src/components/ui/componets/DistanceLines.tsx → app/src/modules/visualization/widgets/floating/DistanceLines.tsx
View File

39
app/src/components/ui/componets/DroppedFloatingWidgets.tsx → app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@@ -1,29 +1,29 @@
import { WalletIcon } from "../../icons/3dChartIcons"; import { WalletIcon } from "../../../../components/icons/3dChartIcons";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { import {
useDroppedObjectsStore, useDroppedObjectsStore,
Zones, Zones,
} from "../../../store/useDroppedObjectsStore"; } from "../../../../store/useDroppedObjectsStore";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../../store/useModuleStore";
import { determinePosition } from "./functions/determinePosition"; import { determinePosition } from "../../functions/determinePosition";
import { getActiveProperties } from "./functions/getActiveProperties"; import { getActiveProperties } from "../../functions/getActiveProperties";
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets"; import { addingFloatingWidgets } from "../../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { import {
DublicateIcon, DublicateIcon,
KebabIcon, KebabIcon,
DeleteIcon, DeleteIcon,
} from "../../icons/ExportCommonIcons"; } from "../../../../components/icons/ExportCommonIcons";
import DistanceLines from "./DistanceLines"; // Import the DistanceLines component import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget"; import { deleteFloatingWidgetApi } from "../../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent"; import TotalCardComponent from "./cards/TotalCardComponent";
import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent"; import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";
import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent"; import FleetEfficiencyComponent from "./cards/FleetEfficiencyComponent";
import { useWidgetStore } from "../../../store/useWidgetStore"; import { useWidgetStore } from "../../../../store/useWidgetStore";
import { useSocketStore } from "../../../store/store"; import { useSocketStore } from "../../../../store/store";
import { useClickOutside } from "./functions/handleWidgetsOuterClick"; import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useSelectedZoneStore } from "../../../store/useZoneStore"; import { useSelectedZoneStore } from "../../../../store/useZoneStore";
interface DraggingState { interface DraggingState {
zone: string; zone: string;
index: number; index: number;
@@ -560,7 +560,7 @@ const DroppedObjects: React.FC = () => {
key={`${zoneName}-${index}`} key={`${zoneName}-${index}`}
className={`${obj.className} ${ className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart" selectedChartId?.id === obj.id && "activeChart"
}`} } `}
ref={chartWidget} ref={chartWidget}
style={{ style={{
position: "absolute", position: "absolute",
@@ -569,7 +569,9 @@ const DroppedObjects: React.FC = () => {
right: rightPosition, right: rightPosition,
bottom: bottomPosition, bottom: bottomPosition,
pointerEvents: isPlaying ? "none" : "auto", pointerEvents: isPlaying ? "none" : "auto",
minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} ` minHeight: `${
obj.className === "warehouseThroughput" && "150px !important"
} `,
}} }}
onPointerDown={(event) => { onPointerDown={(event) => {
setSelectedChartId(obj); setSelectedChartId(obj);
@@ -661,3 +663,4 @@ const DroppedObjects: React.FC = () => {
}; };
export default DroppedObjects; export default DroppedObjects;

0
app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx → app/src/modules/visualization/widgets/floating/cards/FleetEfficiency.tsx
View File

4
app/src/components/ui/realTimeVis/floating/FleetEfficiencyComponent.tsx → app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Line } from 'react-chartjs-2' import { Line } from 'react-chartjs-2'
import useChartStore from '../../../../store/useChartStore'; import useChartStore from '../../../../../store/useChartStore';
import { useWidgetStore } from '../../../../store/useWidgetStore'; import { useWidgetStore } from '../../../../../store/useWidgetStore';
import axios from 'axios'; import axios from 'axios';
import io from "socket.io-client"; import io from "socket.io-client";

0
app/src/components/ui/realTimeVis/floating/ProductivityDashboard.tsx → app/src/modules/visualization/widgets/floating/cards/ProductivityDashboard.tsx
View File

9
app/src/components/ui/realTimeVis/floating/SimpleCard.tsx → app/src/modules/visualization/widgets/floating/cards/SimpleCard.tsx
View File

@@ -2,7 +2,8 @@ import React from "react";
interface SimpleCardProps { interface SimpleCardProps {
header: string; header: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon icon: React.ElementType; // React component for SVG icon
iconName?: string;
value: string; value: string;
per: string; // Percentage change per: string; // Percentage change
position?: [number, number]; position?: [number, number];
@@ -11,23 +12,25 @@ interface SimpleCardProps {
const SimpleCard: React.FC<SimpleCardProps> = ({ const SimpleCard: React.FC<SimpleCardProps> = ({
header, header,
icon: Icon, icon: Icon,
iconName,
value, value,
per, per,
position = [0, 0], position = [0, 0],
}) => { }) => {
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => { const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
const rect = event.currentTarget.getBoundingClientRect(); // Get position const rect = event.currentTarget.getBoundingClientRect(); // Get position
const cardData = JSON.stringify({ const cardData = JSON.stringify({
header, header,
value, value,
per, per,
icon: Icon, iconName: iconName || "UnknownIcon", // Use the custom iconName
className: event.currentTarget.className, className: event.currentTarget.className,
position: [rect.top, rect.left], // ✅ Store position position: [rect.top, rect.left], // ✅ Store position
}); });
event.dataTransfer.setData("text/plain", cardData); event.dataTransfer.setData("text/plain", cardData);
console.log("cardData: ", cardData);
}; };
return ( return (

29
app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx → app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
View File

@@ -1,10 +1,15 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import useChartStore from "../../../../store/useChartStore"; import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { WalletIcon } from "../../../icons/3dChartIcons"; import {
CartIcon,
DocumentIcon,
GlobeIcon,
WalletIcon,
} from "../../../../../components/icons/3dChartIcons";
const TotalCardComponent = ({ object }: any) => { const TotalCardComponent = ({ object }: any) => {
const [progress, setProgress] = useState<any>(0); const [progress, setProgress] = useState<any>(0);
@@ -77,6 +82,20 @@ const TotalCardComponent = ({ object }: any) => {
} }
}, [header, flotingDuration, flotingMeasurements]); }, [header, flotingDuration, flotingMeasurements]);
const mapIcon = (iconName: string) => {
switch (iconName) {
case "WalletIcon":
return <WalletIcon />;
case "GlobeIcon":
return <GlobeIcon />;
case "DocumentIcon":
return <DocumentIcon />;
case "CartIcon":
return <CartIcon />;
default:
return <WalletIcon />;
}
};
return ( return (
<> <>
<div className="header-wrapper"> <div className="header-wrapper">
@@ -86,9 +105,7 @@ const TotalCardComponent = ({ object }: any) => {
<div className="per">{object.per}</div> <div className="per">{object.per}</div>
</div> </div>
</div> </div>
<div className="icon"> <div className="icon">{mapIcon(object.iconName)}</div>
<WalletIcon />
</div>
</> </>
); );
}; };

0
app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx → app/src/modules/visualization/widgets/floating/cards/WarehouseThroughput.tsx
View File

4
app/src/components/ui/realTimeVis/floating/WarehouseThroughputComponent.tsx → app/src/modules/visualization/widgets/floating/cards/WarehouseThroughputComponent.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Line } from 'react-chartjs-2' import { Line } from 'react-chartjs-2'
import useChartStore from '../../../../store/useChartStore'; import useChartStore from '../../../../../store/useChartStore';
import { useWidgetStore } from '../../../../store/useWidgetStore'; import { useWidgetStore } from '../../../../../store/useWidgetStore';
import axios from 'axios'; import axios from 'axios';
import io from "socket.io-client"; import io from "socket.io-client";

10
app/src/components/ui/componets/AddButtons.tsx → app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@@ -3,11 +3,11 @@ import {
CleanPannel, CleanPannel,
EyeIcon, EyeIcon,
LockIcon, LockIcon,
} from "../../icons/RealTimeVisulationIcons"; } from "../../../../components/icons/RealTimeVisulationIcons";
import { AddIcon } from "../../icons/ExportCommonIcons"; import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../store/store"; import { useSocketStore } from "../../../../store/store";
import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel"; import { clearPanel } from "../../../../services/realTimeVisulization/zoneData/clearPanel";
import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel"; import { lockPanel } from "../../../../services/realTimeVisulization/zoneData/lockPanel";
// Define the type for `Side` // Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";

14
app/src/components/ui/componets/Panel.tsx → app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@@ -1,10 +1,10 @@
import React, { useEffect, useMemo, useRef, useState } from "react"; import React, { useEffect, useMemo, useRef, useState } from "react";
import { useWidgetStore } from "../../../store/useWidgetStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { DraggableWidget } from "./DraggableWidget";
import { arrayMove } from "@dnd-kit/sortable"; import { arrayMove } from "@dnd-kit/sortable";
import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets"; import { useAsset3dWidget, useSocketStore } from "../../../../store/store";
import { useAsset3dWidget, useSocketStore } from "../../../store/store"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import { DraggableWidget } from "../2d/DraggableWidget";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@@ -22,7 +22,7 @@ interface PanelProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points:[]; points: [];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
@@ -34,7 +34,7 @@ interface PanelProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points:[]; points: [];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];

4
app/src/components/ui/componets/zoneAssets.tsx → app/src/modules/visualization/zoneAssets.tsx
View File

@@ -1,8 +1,8 @@
import React, { useEffect, useRef } from 'react' import React, { useEffect, useRef } from 'react'
import { useSelectedFloorItem, useZoneAssetId } from '../../../store/store'; import { useSelectedFloorItem, useZoneAssetId } from '../../store/store';
import * as THREE from "three"; import * as THREE from "three";
import { useThree } from '@react-three/fiber'; import { useThree } from '@react-three/fiber';
import * as Types from "../../../types/world/worldTypes"; import * as Types from "../../types/world/worldTypes";
export default function ZoneAssets() { export default function ZoneAssets() {
const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { setSelectedFloorItem } = useSelectedFloorItem(); const { setSelectedFloorItem } = useSelectedFloorItem();

2
app/src/pages/Project.tsx
View File

@@ -3,7 +3,7 @@ import ModuleToggle from "../components/ui/ModuleToggle";
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft"; import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
import SideBarRight from "../components/layout/sidebarRight/SideBarRight"; import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
import useModuleStore, { useThreeDStore } from "../store/useModuleStore"; import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization"; import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
import Tools from "../components/ui/Tools"; import Tools from "../components/ui/Tools";
// import Scene from "../modules/scene/scene"; // import Scene from "../modules/scene/scene";
import { import {

48
app/src/styles/layout/sidebar.scss
View File

@@ -130,7 +130,6 @@
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.widget-left-sideBar {
.widgets-wrapper { .widgets-wrapper {
min-height: 50vh; min-height: 50vh;
@@ -138,6 +137,9 @@
overflow: auto; overflow: auto;
} }
.widget-left-sideBar {
.widget2D { .widget2D {
overflow: auto; overflow: auto;
@@ -1088,43 +1090,51 @@
right: -10px; right: -10px;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
&:nth-child(1), &:nth-child(9) {
&:nth-child(1),
&:nth-child(9) {
&::after { &::after {
@include gradient-by-child(1); // First child uses the first color @include gradient-by-child(1); // First child uses the first color
} }
} }
&:nth-child(2), &:nth-child(10) { &:nth-child(2),
&:nth-child(10) {
&::after { &::after {
@include gradient-by-child(2); // Second child uses the second color @include gradient-by-child(2); // Second child uses the second color
} }
} }
&:nth-child(3), &:nth-child(11) { &:nth-child(3),
&:nth-child(11) {
&::after { &::after {
@include gradient-by-child(3); // Third child uses the third color @include gradient-by-child(3); // Third child uses the third color
} }
} }
&:nth-child(4), &:nth-child(12) { &:nth-child(4),
&:nth-child(12) {
&::after { &::after {
@include gradient-by-child(4); // Fourth child uses the fourth color @include gradient-by-child(4); // Fourth child uses the fourth color
} }
} }
&:nth-child(5), &:nth-child(13) { &:nth-child(5),
&:nth-child(13) {
&::after { &::after {
@include gradient-by-child(5); // Fifth child uses the fifth color @include gradient-by-child(5); // Fifth child uses the fifth color
} }
} }
&:nth-child(6), &:nth-child(14) { &:nth-child(6),
&:nth-child(14) {
&::after { &::after {
@include gradient-by-child(6); // Fifth child uses the fifth color @include gradient-by-child(6); // Fifth child uses the fifth color
} }
} }
&:nth-child(7), &:nth-child(15) { &:nth-child(7),
&:nth-child(15) {
&::after { &::after {
@include gradient-by-child(7); // Fifth child uses the fifth color @include gradient-by-child(7); // Fifth child uses the fifth color
} }
@@ -1160,6 +1170,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
&:hover { &:hover {
.asset-name { .asset-name {
opacity: 1; opacity: 1;
@@ -1173,21 +1184,24 @@
padding: 8px; padding: 8px;
width: 100%; width: 100%;
font-size: var(--font-size-regular); font-size: var(--font-size-regular);
background: color-mix( background: color-mix(in srgb,
in srgb,
var(--background-color) 40%, var(--background-color) 40%,
transparent transparent);
);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
/* Added properties for ellipsis */ /* Added properties for ellipsis */
display: -webkit-box; /* Necessary for multiline truncation */ display: -webkit-box;
-webkit-line-clamp: 2; /* Number of lines to show */ /* Necessary for multiline truncation */
-webkit-box-orient: vertical; /* Box orientation for the ellipsis */ -webkit-line-clamp: 2;
overflow: hidden; /* Hide overflowing content */ /* Number of lines to show */
text-overflow: ellipsis; /* Add ellipsis for truncated content */ -webkit-box-orient: vertical;
/* Box orientation for the ellipsis */
overflow: hidden;
/* Hide overflowing content */
text-overflow: ellipsis;
/* Add ellipsis for truncated content */
} }
.asset-image { .asset-image {