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

Merge pull request 'ui' (#59) from ui into main 

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/59
This commit is contained in:
Vishnu 2025-04-11 13:17:36 +00:00
parent c7c35e288a 513d4d0958
commit 47ddc098f3
48 changed files with 4195 additions and 4075 deletions
Show Stats 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(

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

@ -1,255 +1,257 @@
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,
// Define the type for `Side` MoveArrowRight,
type Side = "top" | "bottom" | "left" | "right"; } from "../../components/icons/SimulationIcons";
import { InfoIcon } from "../../components/icons/ExportCommonIcons";
interface HiddenPanels {
[zoneId: string]: Side[]; // Define the type for `Side`
} type Side = "top" | "bottom" | "left" | "right";
interface DisplayZoneProps { interface HiddenPanels {
zonesData: { [zoneId: string]: Side[];
[key: string]: { }
activeSides: Side[];
panelOrder: Side[]; interface DisplayZoneProps {
lockedPanels: Side[]; zonesData: {
points: []; [key: string]: {
widgets: Widget[]; activeSides: Side[];
zoneId: string; panelOrder: Side[];
zoneViewPortTarget: number[]; lockedPanels: Side[];
zoneViewPortPosition: number[]; points: [];
}; widgets: Widget[];
}; zoneId: string;
selectedZone: { zoneViewPortTarget: number[];
zoneName: string; zoneViewPortPosition: number[];
activeSides: Side[]; };
panelOrder: Side[]; };
lockedPanels: Side[]; selectedZone: {
zoneId: string; zoneName: string;
points: []; activeSides: Side[];
zoneViewPortTarget: number[]; panelOrder: Side[];
zoneViewPortPosition: number[]; lockedPanels: Side[];
widgets: { zoneId: string;
id: string; points: [];
type: string; zoneViewPortTarget: number[];
title: string; zoneViewPortPosition: number[];
panel: Side; widgets: {
data: any; id: string;
}[]; type: string;
}; title: string;
setSelectedZone: React.Dispatch< panel: Side;
React.SetStateAction<{ data: any;
zoneName: string; }[];
activeSides: Side[]; };
panelOrder: Side[]; setSelectedZone: React.Dispatch<
lockedPanels: Side[]; React.SetStateAction<{
points: []; zoneName: string;
zoneId: string; activeSides: Side[];
zoneViewPortTarget: number[]; panelOrder: Side[];
zoneViewPortPosition: number[]; lockedPanels: Side[];
widgets: { points: [];
id: string; zoneId: string;
type: string; zoneViewPortTarget: number[];
title: string; zoneViewPortPosition: number[];
panel: Side; widgets: {
data: any; id: string;
}[]; type: string;
}> title: string;
>; panel: Side;
hiddenPanels: HiddenPanels; // Updated prop type data: any;
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type }[];
} }>
>;
const DisplayZone: React.FC<DisplayZoneProps> = ({ hiddenPanels: HiddenPanels; // Updated prop type
zonesData, setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
selectedZone, }
setSelectedZone,
hiddenPanels, const DisplayZone: React.FC<DisplayZoneProps> = ({
}) => { zonesData,
// Ref for the container element selectedZone,
const containerRef = useRef<HTMLDivElement | null>(null); setSelectedZone,
const scrollContainerRef = useRef<HTMLDivElement | null>(null); hiddenPanels,
}) => {
// State to track overflow visibility // Ref for the container element
const [showLeftArrow, setShowLeftArrow] = useState(false); const containerRef = useRef<HTMLDivElement | null>(null);
const [showRightArrow, setShowRightArrow] = useState(false); const scrollContainerRef = useRef<HTMLDivElement | null>(null);
const { floatingWidget, setFloatingWidget } = useFloatingWidget()
// State to track overflow visibility
const { setSelectedChartId } = useWidgetStore() const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false);
// Function to calculate overflow state const { floatingWidget, setFloatingWidget } = useFloatingWidget();
const updateOverflowState = useCallback(() => {
const container = scrollContainerRef.current; const { setSelectedChartId } = useWidgetStore();
if (container) {
const isOverflowing = container.scrollWidth > container.clientWidth; // Function to calculate overflow state
const canScrollLeft = container.scrollLeft > 0; const updateOverflowState = useCallback(() => {
const canScrollRight = const container = scrollContainerRef.current;
container.scrollLeft + container.clientWidth < container.scrollWidth; if (container) {
const isOverflowing = container.scrollWidth > container.clientWidth;
setShowLeftArrow(isOverflowing && canScrollLeft); const canScrollLeft = container.scrollLeft > 0;
setShowRightArrow(isOverflowing && canScrollRight); const canScrollRight =
} container.scrollLeft + container.clientWidth < container.scrollWidth;
}, []);
setShowLeftArrow(isOverflowing && canScrollLeft);
useEffect(() => { setShowRightArrow(isOverflowing && canScrollRight);
const container = scrollContainerRef.current; }
if (!container) return; }, []);
// Initial calculation after the DOM has been rendered useEffect(() => {
const observer = new ResizeObserver(updateOverflowState); const container = scrollContainerRef.current;
observer.observe(container); if (!container) return;
// Update on scroll // Initial calculation after the DOM has been rendered
const handleScroll = () => updateOverflowState(); const observer = new ResizeObserver(updateOverflowState);
container.addEventListener("scroll", handleScroll); observer.observe(container);
// Add mouse wheel listener for horizontal scrolling // Update on scroll
const handleWheel = (event: WheelEvent) => { const handleScroll = () => updateOverflowState();
if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) { container.addEventListener("scroll", handleScroll);
event.preventDefault();
container.scrollBy({ // Add mouse wheel listener for horizontal scrolling
left: event.deltaY * 2, const handleWheel = (event: WheelEvent) => {
behavior: "smooth", if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
}); event.preventDefault();
} container.scrollBy({
}; left: event.deltaY * 2,
behavior: "smooth",
container.addEventListener("wheel", handleWheel, { passive: false }); });
}
// Initial check };
updateOverflowState();
container.addEventListener("wheel", handleWheel, { passive: false });
return () => {
observer.disconnect(); // Initial check
container.removeEventListener("scroll", handleScroll); updateOverflowState();
container.removeEventListener("wheel", handleWheel);
}; return () => {
}, [updateOverflowState]); observer.disconnect();
container.removeEventListener("scroll", handleScroll);
// Handle scrolling with navigation arrows container.removeEventListener("wheel", handleWheel);
const handleScrollLeft = () => { };
const container = scrollContainerRef.current; }, [updateOverflowState]);
if (container) {
container.scrollBy({ // Handle scrolling with navigation arrows
left: -200, const handleScrollLeft = () => {
behavior: "smooth", const container = scrollContainerRef.current;
}); if (container) {
} container.scrollBy({
}; left: -200,
behavior: "smooth",
const handleScrollRight = () => { });
const container = scrollContainerRef.current; }
if (container) { };
container.scrollBy({
left: 200, const handleScrollRight = () => {
behavior: "smooth", const container = scrollContainerRef.current;
}); if (container) {
} container.scrollBy({
}; left: 200,
behavior: "smooth",
async function handleSelect2dZoneData(zoneId: string, zoneName: string) { });
try { }
if (selectedZone?.zoneId === zoneId) { };
return;
} async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
setSelectedChartId(null); try {
const email = localStorage.getItem("email") || ""; if (selectedZone?.zoneId === zoneId) {
const organization = email?.split("@")[1]?.split(".")[0]; return;
let response = await getSelect2dZoneData(zoneId, organization); }
console.log('response: ', response); setSelectedChartId(null);
let res = await getFloatingZoneData(zoneId, organization); const email = localStorage.getItem("email") || "";
console.log('res: ', res); const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneId, organization);
setFloatingWidget(res); console.log("response: ", response);
// Set the selected zone in the store let res = await getFloatingZoneData(zoneId, organization);
useDroppedObjectsStore.getState().setZone(zoneName, zoneId); console.log("res: ", res);
if (Array.isArray(res)) {
res.forEach((val) => { setFloatingWidget(res);
useDroppedObjectsStore.getState().addObject(zoneName, val); // Set the selected zone in the store
}); useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
} if (Array.isArray(res)) {
res.forEach((val) => {
setSelectedZone({ useDroppedObjectsStore.getState().addObject(zoneName, val);
zoneName, });
activeSides: response.activeSides || [], }
panelOrder: response.panelOrder || [],
lockedPanels: response.lockedPanels || [], setSelectedZone({
widgets: response.widgets || [], zoneName,
points: response.points || [], activeSides: response.activeSides || [],
zoneId: zoneId, panelOrder: response.panelOrder || [],
zoneViewPortTarget: response.viewPortCenter || {}, lockedPanels: response.lockedPanels || [],
zoneViewPortPosition: response.viewPortposition || {}, widgets: response.widgets || [],
}); points: response.points || [],
} catch (error) { zoneId: zoneId,
zoneViewPortTarget: response.viewPortCenter || {},
} zoneViewPortPosition: response.viewPortposition || {},
} });
} catch (error) {}
return ( }
<div
ref={containerRef} return (
className={`zone-wrapper ${ <div
selectedZone?.activeSides?.includes("bottom") && ref={containerRef}
!hiddenPanels[selectedZone.zoneId]?.includes("bottom") className={`zone-wrapper ${
? "bottom" selectedZone?.activeSides?.includes("bottom") &&
: "" !hiddenPanels[selectedZone.zoneId]?.includes("bottom")
}`} ? "bottom"
> : ""
{/* Left Arrow */} }`}
{showLeftArrow && ( >
<button className="arrow left-arrow" onClick={handleScrollLeft}> {/* Left Arrow */}
<MoveArrowLeft /> {showLeftArrow && (
</button> <button className="arrow left-arrow" onClick={handleScrollLeft}>
)} <MoveArrowLeft />
</button>
{/* Scrollable Zones Container */} )}
<div
ref={scrollContainerRef} {/* Scrollable Zones Container */}
className="zones-wrapper" <div
style={{ overflowX: "auto", whiteSpace: "nowrap" }} ref={scrollContainerRef}
> className="zones-wrapper"
{Object.keys(zonesData).length !== 0 ? ( style={{ overflowX: "auto", whiteSpace: "nowrap" }}
<> >
{Object.keys(zonesData).map((zoneName, index) => ( {Object.keys(zonesData).length !== 0 ? (
<div <>
key={index} {Object.keys(zonesData).map((zoneName, index) => (
className={`zone ${ <div
selectedZone.zoneName === zoneName ? "active" : "" key={index}
}`} className={`zone ${
onClick={() => selectedZone.zoneName === zoneName ? "active" : ""
handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName) }`}
} onClick={() =>
> handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
{zoneName} }
</div> >
))} {zoneName}
</> </div>
) : ( ))}
<div className="no-zone"> </>
<InfoIcon /> ) : (
No zones? Create one! <div className="no-zone">
</div> <InfoIcon />
)} No zones? Create one!
</div> </div>
)}
{/* Right Arrow */} </div>
{showRightArrow && (
<button className="arrow right-arrow" onClick={handleScrollRight}> {/* Right Arrow */}
<MoveArrowRight /> {showRightArrow && (
</button> <button className="arrow right-arrow" onClick={handleScrollRight}>
)} <MoveArrowRight />
</div> </button>
); )}
}; </div>
);
export default DisplayZone; };
export default DisplayZone;

180
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,82 +155,99 @@ 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;
const droppedData = JSON.parse(data); const droppedData = JSON.parse(data);
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;
const newPosition = determinePosition(canvasRect, relativeX, relativeY);
console.log("newPosition: ", newPosition); // 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 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() // Store update
.addObject(selectedZone.zoneName, newObject); useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject);
//I need to console here objects based on selectedZone.zoneId // Post-drop verification
// Console the objects after adding
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>

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

@ -1,33 +1,33 @@
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
export const captureVisualization = async (): Promise<string | null> => { export const captureVisualization = async (): Promise<string | null> => {
const container = document.getElementById("real-time-vis-canvas"); const container = document.getElementById("real-time-vis-canvas");
if (!container) { if (!container) {
console.error("Container element not found"); console.error("Container element not found");
return null; return null;
} }
try { try {
// Hide any elements you don't want in the screenshot // Hide any elements you don't want in the screenshot
const originalVisibility = container.style.visibility; const originalVisibility = container.style.visibility;
container.style.visibility = 'visible'; container.style.visibility = 'visible';
const canvas = await html2canvas(container, { const canvas = await html2canvas(container, {
scale: 2, // Higher scale for better quality scale: 2, // Higher scale for better quality
logging: false, // Disable console logging logging: false, // Disable console logging
useCORS: true, // Handle cross-origin images useCORS: true, // Handle cross-origin images
allowTaint: true, // Allow tainted canvas allowTaint: true, // Allow tainted canvas
backgroundColor: '#ffffff', // Set white background backgroundColor: '#ffffff', // Set white background
removeContainer: true // Clean up temporary containers removeContainer: true // Clean up temporary containers
}); });
// Restore original visibility // Restore original visibility
container.style.visibility = originalVisibility; container.style.visibility = originalVisibility;
// Convert to PNG with highest quality // Convert to PNG with highest quality
return canvas.toDataURL('image/png', 1.0); return canvas.toDataURL('image/png', 1.0);
} catch (error) { } catch (error) {
console.error("Error capturing visualization:", error); console.error("Error capturing visualization:", error);
return null; return null;
} }
}; };

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

@ -74,4 +74,4 @@ export function determinePosition(
} }
return position; return position;
} }

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

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

@ -1,97 +1,97 @@
import { Template } from "../../store/useTemplateStore"; import { Template } from "../../../store/useTemplateStore";
import { captureVisualization } from "./captureVisualization"; import { captureVisualization } from "./captureVisualization";
type HandleSaveTemplateProps = { type HandleSaveTemplateProps = {
addTemplate: (template: Template) => void; addTemplate: (template: Template) => void;
floatingWidget: []; // Updated type from `[]` to `any[]` for clarity floatingWidget: []; // Updated type from `[]` to `any[]` for clarity
widgets3D: []; // Updated type from `[]` to `any[]` for clarity widgets3D: []; // Updated type from `[]` to `any[]` for clarity
selectedZone: { selectedZone: {
panelOrder: string[]; panelOrder: string[];
widgets: any[]; widgets: any[];
}; };
templates?: Template[]; templates?: Template[];
visualizationSocket: any; visualizationSocket: any;
}; };
// Generate a unique ID // Generate a unique ID
const generateUniqueId = (): string => { const generateUniqueId = (): string => {
return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`; return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
}; };
export const handleSaveTemplate = async ({ export const handleSaveTemplate = async ({
addTemplate, addTemplate,
floatingWidget, floatingWidget,
widgets3D, widgets3D,
selectedZone, selectedZone,
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) { return;
return; }
}
// Check if the template already exists
// Check if the template already exists const isDuplicate = templates.some(
const isDuplicate = templates.some( (template) =>
(template) => JSON.stringify(template.panelOrder) ===
JSON.stringify(template.panelOrder) === JSON.stringify(selectedZone.panelOrder) &&
JSON.stringify(selectedZone.panelOrder) && JSON.stringify(template.widgets) ===
JSON.stringify(template.widgets) === JSON.stringify(selectedZone.widgets)
JSON.stringify(selectedZone.widgets) );
);
if (isDuplicate) {
if (isDuplicate) { return;
return; }
}
// Capture visualization snapshot
// Capture visualization snapshot const snapshot = await captureVisualization();
const snapshot = await captureVisualization();
if (!snapshot) { if (!snapshot) {
return; return;
} }
// Create a new template // Create a new template
const newTemplate: Template = { const newTemplate: Template = {
id: generateUniqueId(), id: generateUniqueId(),
name: `Template ${new Date().toISOString()}`, // Better name formatting name: `Template ${new Date().toISOString()}`, // Better name formatting
panelOrder: selectedZone.panelOrder, panelOrder: selectedZone.panelOrder,
widgets: selectedZone.widgets, widgets: selectedZone.widgets,
snapshot, snapshot,
floatingWidget, floatingWidget,
widgets3D, widgets3D,
}; };
// Extract organization from email // Extract organization from email
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email.includes("@") const organization = email.includes("@")
? email.split("@")[1]?.split(".")[0] ? email.split("@")[1]?.split(".")[0]
: ""; : "";
if (!organization) { if (!organization) {
return; return;
} }
let saveTemplate = { let saveTemplate = {
organization: organization, organization: organization,
template: newTemplate, template: newTemplate,
}; };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-template:add", saveTemplate); visualizationSocket.emit("v2:viz-template:add", saveTemplate);
} }
// Save the template // Save the template
try { try {
addTemplate(newTemplate); addTemplate(newTemplate);
// const response = await saveTemplateApi(organization, newTemplate); // const response = await saveTemplateApi(organization, newTemplate);
// //
// Add template only if API call succeeds // Add template only if API call succeeds
} catch (apiError) { } catch (apiError) {
// //
} }
} catch (error) { } catch (error) {
// //
} }
}; };

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 <></>;
}

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

@ -1,133 +1,135 @@
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, removeTemplate, setTemplates } = useTemplateStore();
const { setSelectedZone, selectedZone } = useSelectedZoneStore(); const Templates = () => {
const { visualizationSocket } = useSocketStore(); const { templates, removeTemplate, setTemplates } = useTemplateStore();
const { setSelectedZone, selectedZone } = useSelectedZoneStore();
useEffect(() => { const { visualizationSocket } = useSocketStore();
async function templateData() {
try { useEffect(() => {
const email = localStorage.getItem("email") || ""; async function templateData() {
const organization = email?.split("@")[1]?.split(".")[0]; try {
let response = await getTemplateData(organization); const email = localStorage.getItem("email") || "";
setTemplates(response); const organization = email?.split("@")[1]?.split(".")[0];
} catch (error) { let response = await getTemplateData(organization);
console.error("Error fetching template data:", error); setTemplates(response);
} } catch (error) {
} console.error("Error fetching template data:", error);
}
templateData(); }
}, []);
templateData();
const handleDeleteTemplate = async ( }, []);
e: React.MouseEvent<HTMLButtonElement>,
id: string const handleDeleteTemplate = async (
) => { e: React.MouseEvent<HTMLButtonElement>,
try { id: string
e.stopPropagation(); ) => {
const email = localStorage.getItem("email") || ""; try {
e.stopPropagation();
const organization = email?.split("@")[1]?.split(".")[0]; const email = localStorage.getItem("email") || "";
let deleteTemplate = {
organization: organization, const organization = email?.split("@")[1]?.split(".")[0];
templateID: id, let deleteTemplate = {
}; organization: organization,
if (visualizationSocket) { templateID: id,
visualizationSocket.emit( };
"v2:viz-template:deleteTemplate", if (visualizationSocket) {
deleteTemplate visualizationSocket.emit(
); "v2:viz-template:deleteTemplate",
} deleteTemplate
removeTemplate(id); );
} catch (error) { }
console.error("Error deleting template:", error); removeTemplate(id);
} } catch (error) {
}; console.error("Error deleting template:", error);
}
const handleLoadTemplate = async (template: any) => { };
try {
if (selectedZone.zoneName === "") return; const handleLoadTemplate = async (template: any) => {
const email = localStorage.getItem("email") || ""; try {
const organization = email?.split("@")[1]?.split(".")[0]; if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || "";
let loadingTemplate = { const organization = email?.split("@")[1]?.split(".")[0];
organization: organization,
zoneId: selectedZone.zoneId, let loadingTemplate = {
templateID: template.id, organization: organization,
}; zoneId: selectedZone.zoneId,
templateID: template.id,
if (visualizationSocket) { };
visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
} if (visualizationSocket) {
visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
setSelectedZone({ }
panelOrder: template.panelOrder,
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides` setSelectedZone({
widgets: template.widgets, panelOrder: template.panelOrder,
}); activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
widgets: template.widgets,
useDroppedObjectsStore });
.getState()
.setZone(selectedZone.zoneName, selectedZone.zoneId); useDroppedObjectsStore
.getState()
if (Array.isArray(template.floatingWidget)) { .setZone(selectedZone.zoneName, selectedZone.zoneId);
template.floatingWidget.forEach((val: any) => {
useDroppedObjectsStore if (Array.isArray(template.floatingWidget)) {
.getState() template.floatingWidget.forEach((val: any) => {
.addObject(selectedZone.zoneName, val); useDroppedObjectsStore
}); .getState()
} .addObject(selectedZone.zoneName, val);
} catch (error) { });
console.error("Error loading template:", error); }
} } catch (error) {
}; console.error("Error loading template:", error);
}
return ( };
<div className="template-list">
{templates.map((template, index) => ( return (
<div <div className="template-list">
key={template.id} {templates.map((template, index) => (
className="template-item" <div
key={template.id}
> className="template-item"
{template?.snapshot && (
<div className="template-image-container" onClick={() => handleLoadTemplate(template)}> >
<img {template?.snapshot && (
src={template.snapshot} <div className="template-image-container" onClick={() => handleLoadTemplate(template)}>
alt={`${template.name} preview`} <img
className="template-image" src={template.snapshot}
/> alt={`${template.name} preview`}
</div> className="template-image"
)} />
<div className="template-details"> </div>
<div className="template-name"> )}
{/* {`Template ${index + 1}`} */} <div className="template-details">
<RenameInput value={`Template ${index + 1}`} /> <div className="template-name">
</div> {/* {`Template ${index + 1}`} */}
<button <RenameInput value={`Template ${index + 1}`} />
onClick={(e) => handleDeleteTemplate(e, template.id)} </div>
className="delete-button" <button
aria-label="Delete template" onClick={(e) => handleDeleteTemplate(e, template.id)}
> className="delete-button"
Delete aria-label="Delete template"
</button> >
</div> Delete
</div> </button>
))} </div>
{templates.length === 0 && ( </div>
<div className="no-templates"> ))}
No saved templates yet. Create one in the visualization view! {templates.length === 0 && (
</div> <div className="no-templates">
)} No saved templates yet. Create one in the visualization view!
</div> </div>
); )}
}; </div>
);
export default Templates; };
export default Templates;

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

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

@ -1,376 +1,377 @@
// import React, { useEffect, useRef, useMemo, useState } from "react"; // import React, { useEffect, useRef, useMemo, useState } from "react";
// import { Chart } from "chart.js/auto"; // import { Chart } from "chart.js/auto";
// import { useThemeStore } from "../../../../store/useThemeStore"; // import { useThemeStore } from "../../../../store/useThemeStore";
// import io from "socket.io-client"; // import io from "socket.io-client";
// import { Bar } from 'react-chartjs-2'; // import { Bar } from 'react-chartjs-2';
// import useChartStore from "../../../../store/useChartStore"; // import useChartStore from "../../../../store/useChartStore";
// // WebSocket Connection // // WebSocket Connection
// // const socket = io("http://localhost:5000"); // Adjust to your backend URL // // const socket = io("http://localhost:5000"); // Adjust to your backend URL
// interface ChartComponentProps { // interface ChartComponentProps {
// type: any; // type: any;
// title: string; // title: string;
// fontFamily?: string; // fontFamily?: string;
// fontSize?: string; // fontSize?: string;
// fontWeight?: "Light" | "Regular" | "Bold"; // fontWeight?: "Light" | "Regular" | "Bold";
// data: any; // data: any;
// } // }
// const LineGraphComponent = ({ // const LineGraphComponent = ({
// type, // type,
// title, // title,
// fontFamily, // fontFamily,
// fontSize, // fontSize,
// fontWeight = "Regular", // fontWeight = "Regular",
// data, // data,
// }: ChartComponentProps) => { // }: ChartComponentProps) => {
// const canvasRef = useRef<HTMLCanvasElement>(null); // const canvasRef = useRef<HTMLCanvasElement>(null);
// const { themeColor } = useThemeStore(); // const { themeColor } = useThemeStore();
// const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ // const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
// labels: [], // labels: [],
// datasets: [], // datasets: [],
// }); // });
// const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; // const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
// const defaultData = { // const defaultData = {
// labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], // labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
// datasets: [ // datasets: [
// { // {
// label: "Dataset", // label: "Dataset",
// data: [12, 19, 3, 5, 2, 3], // data: [12, 19, 3, 5, 2, 3],
// backgroundColor: ["#6f42c1"], // backgroundColor: ["#6f42c1"],
// borderColor: "#ffffff", // borderColor: "#ffffff",
// borderWidth: 2, // borderWidth: 2,
// }, // },
// ], // ],
// }; // };
// // Memoize Theme Colors to Prevent Unnecessary Recalculations // // Memoize Theme Colors to Prevent Unnecessary Recalculations
// const buttonActionColor = useMemo( // const buttonActionColor = useMemo(
// () => themeColor[0] || "#5c87df", // () => themeColor[0] || "#5c87df",
// [themeColor] // [themeColor]
// ); // );
// const buttonAbortColor = useMemo( // const buttonAbortColor = useMemo(
// () => themeColor[1] || "#ffffff", // () => themeColor[1] || "#ffffff",
// [themeColor] // [themeColor]
// ); // );
// // Memoize Font Weight Mapping // // Memoize Font Weight Mapping
// const chartFontWeightMap = useMemo( // const chartFontWeightMap = useMemo(
// () => ({ // () => ({
// Light: "lighter" as const, // Light: "lighter" as const,
// Regular: "normal" as const, // Regular: "normal" as const,
// Bold: "bold" as const, // Bold: "bold" as const,
// }), // }),
// [] // []
// ); // );
// // Parse and Memoize Font Size // // Parse and Memoize Font Size
// const fontSizeValue = useMemo( // const fontSizeValue = useMemo(
// () => (fontSize ? parseInt(fontSize) : 12), // () => (fontSize ? parseInt(fontSize) : 12),
// [fontSize] // [fontSize]
// ); // );
// // Determine and Memoize Font Weight // // Determine and Memoize Font Weight
// const fontWeightValue = useMemo( // const fontWeightValue = useMemo(
// () => chartFontWeightMap[fontWeight], // () => chartFontWeightMap[fontWeight],
// [fontWeight, chartFontWeightMap] // [fontWeight, chartFontWeightMap]
// ); // );
// // Memoize Chart Font Style // // Memoize Chart Font Style
// const chartFontStyle = useMemo( // const chartFontStyle = useMemo(
// () => ({ // () => ({
// family: fontFamily || "Arial", // family: fontFamily || "Arial",
// size: fontSizeValue, // size: fontSizeValue,
// weight: fontWeightValue, // weight: fontWeightValue,
// }), // }),
// [fontFamily, fontSizeValue, fontWeightValue] // [fontFamily, fontSizeValue, fontWeightValue]
// ); // );
// // Memoize Chart Data // // Memoize Chart Data
// // const data = useMemo(() => propsData, [propsData]); // // const data = useMemo(() => propsData, [propsData]);
// // Memoize Chart Options // // Memoize Chart Options
// const options = useMemo( // const options = useMemo(
// () => ({ // () => ({
// responsive: true, // responsive: true,
// maintainAspectRatio: false, // maintainAspectRatio: false,
// plugins: { // plugins: {
// title: { // title: {
// display: true, // display: true,
// text: title, // text: title,
// font: chartFontStyle, // font: chartFontStyle,
// }, // },
// legend: { // legend: {
// display: false, // display: false,
// }, // },
// }, // },
// scales: { // scales: {
// x: { // x: {
// ticks: { // ticks: {
// display: true, // This hides the x-axis labels // display: true, // This hides the x-axis labels
// }, // },
// }, // },
// }, // },
// }), // }),
// [title, chartFontStyle] // [title, chartFontStyle]
// ); // );
// const { measurements, setMeasurements, updateDuration, duration } = useChartStore(); // const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
// useEffect(() => { // useEffect(() => {
// const socket = io(`http://${iotApiUrl}`); // const socket = io(`http://${iotApiUrl}`);
// if ( measurements.length > 0 ) { // if ( measurements.length > 0 ) {
// var inputes = { // var inputes = {
// measurements: measurements, // measurements: measurements,
// duration: duration, // duration: duration,
// interval: 1000, // interval: 1000,
// } // }
// // Start stream // // Start stream
// const startStream = () => { // const startStream = () => {
// socket.emit("lineInput", inputes); // socket.emit("lineInput", inputes);
// } // }
// socket.on('connect', startStream); // socket.on('connect', startStream);
// socket.on("lineOutput", (response) => { // socket.on("lineOutput", (response) => {
// const responceData = response.data; // const responceData = response.data;
// console.log("Received data:", responceData); // console.log("Received data:", responceData);
// // Extract timestamps and values // // Extract timestamps and values
// const labels = responceData.time; // const labels = responceData.time;
// const datasets = measurements.map((measurement: any) => { // const datasets = measurements.map((measurement: any) => {
// const key = `${measurement.name}.${measurement.fields}`; // const key = `${measurement.name}.${measurement.fields}`;
// return { // return {
// label: key, // label: key,
// data: responceData[key]?.values ?? [], // Ensure it exists // data: responceData[key]?.values ?? [], // Ensure it exists
// backgroundColor: "#6f42c1", // backgroundColor: "#6f42c1",
// borderColor: "#ffffff", // borderColor: "#ffffff",
// }; // };
// }); // });
// setChartData({ labels, datasets }); // setChartData({ labels, datasets });
// }); // });
// } // }
// return () => { // return () => {
// socket.off("lineOutput"); // socket.off("lineOutput");
// socket.emit("stop_stream"); // Stop streaming when component unmounts // socket.emit("stop_stream"); // Stop streaming when component unmounts
// }; // };
// }, [measurements, duration]); // }, [measurements, duration]);
// // useEffect(() => { // // useEffect(() => {
// // if (!canvasRef.current) return; // // if (!canvasRef.current) return;
// // const ctx = canvasRef.current.getContext("2d"); // // const ctx = canvasRef.current.getContext("2d");
// // if (!ctx) return; // // if (!ctx) return;
// // const chart = new Chart(ctx, { // // const chart = new Chart(ctx, {
// // type, // // type,
// // data: chartData, // // data: chartData,
// // options: options, // // options: options,
// // }); // // });
// // return () => chart.destroy(); // // return () => chart.destroy();
// // }, [chartData, type, title]); // // }, [chartData, type, title]);
// return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />; // return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
// }; // };
// export default LineGraphComponent; // export default LineGraphComponent;
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 axios from "axios";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import { useThemeStore } from "../../../../../store/useThemeStore";
import axios from "axios"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
interface ChartComponentProps {
id: string; interface ChartComponentProps {
type: any; id: string;
title: string; type: any;
fontFamily?: string; title: string;
fontSize?: string; fontFamily?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontSize?: string;
} fontWeight?: "Light" | "Regular" | "Bold";
}
const BarGraphComponent = ({
id, const BarGraphComponent = ({
type, id,
title, type,
fontFamily, title,
fontSize, fontFamily,
fontWeight = "Regular", fontSize,
}: ChartComponentProps) => { fontWeight = "Regular",
const { themeColor } = useThemeStore(); }: ChartComponentProps) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { themeColor } = useThemeStore();
const [measurements, setmeasurements] = useState<any>({}); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [duration, setDuration] = useState("1h") const [measurements, setmeasurements] = useState<any>({});
const [name, setName] = useState("Widget") const [duration, setDuration] = useState("1h")
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ const [name, setName] = useState("Widget")
labels: [], const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
datasets: [], labels: [],
}); datasets: [],
const { selectedChartId } = useWidgetStore(); });
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const organization = email?.split("@")[1]?.split(".")[0] const email = localStorage.getItem("email") || "";
const defaultData = { const organization = email?.split("@")[1]?.split(".")[0]
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], const defaultData = {
datasets: [ labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
{ datasets: [
label: "Dataset", {
data: [12, 19, 3, 5, 2, 3], label: "Dataset",
backgroundColor: ["#6f42c1"], data: [12, 19, 3, 5, 2, 3],
borderColor: "#b392f0", backgroundColor: ["#6f42c1"],
borderWidth: 1, borderColor: "#b392f0",
}, borderWidth: 1,
], },
}; ],
};
useEffect(() => {
useEffect(() => {
},[])
},[])
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); // Memoize Theme Colors
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
// Memoize Font Styling
const chartFontWeightMap = useMemo( // Memoize Font Styling
() => ({ const chartFontWeightMap = useMemo(
Light: "lighter" as const, () => ({
Regular: "normal" as const, Light: "lighter" as const,
Bold: "bold" as const, Regular: "normal" as const,
}), Bold: "bold" as const,
[] }),
); []
);
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
const chartFontStyle = useMemo(
() => ({ const chartFontStyle = useMemo(
family: fontFamily || "Arial", () => ({
size: fontSizeValue, family: fontFamily || "Arial",
weight: fontWeightValue, size: fontSizeValue,
}), weight: fontWeightValue,
[fontFamily, fontSizeValue, fontWeightValue] }),
); [fontFamily, fontSizeValue, fontWeightValue]
);
// Memoize Chart Options
const options = useMemo( // Memoize Chart Options
() => ({ const options = useMemo(
responsive: true, () => ({
maintainAspectRatio: false, responsive: true,
plugins: { maintainAspectRatio: false,
title: { plugins: {
display: true, title: {
text: name, display: true,
font: chartFontStyle, text: name,
}, font: chartFontStyle,
legend: { },
display: false, legend: {
}, display: false,
}, },
scales: { },
x: { scales: {
ticks: { x: {
display: true, // This hides the x-axis labels ticks: {
}, display: true, // This hides the x-axis labels
}, },
}, },
}), },
[title, chartFontStyle, name] }),
); [title, chartFontStyle, name]
);
// useEffect(() => {console.log(measurements);
// },[measurements]) // useEffect(() => {console.log(measurements);
// },[measurements])
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const socket = io(`http://${iotApiUrl}`);
const socket = io(`http://${iotApiUrl}`);
const inputData = {
measurements, const inputData = {
duration, measurements,
interval: 1000, duration,
}; interval: 1000,
};
const startStream = () => {
socket.emit("lineInput", inputData); const startStream = () => {
}; socket.emit("lineInput", inputData);
};
socket.on("connect", startStream);
socket.on("connect", startStream);
socket.on("lineOutput", (response) => {
const responseData = response.data; socket.on("lineOutput", (response) => {
const responseData = response.data;
// Extract timestamps and values
const labels = responseData.time; // Extract timestamps and values
const datasets = Object.keys(measurements).map((key) => { const labels = responseData.time;
const measurement = measurements[key]; const datasets = Object.keys(measurements).map((key) => {
const datasetKey = `${measurement.name}.${measurement.fields}`; const measurement = measurements[key];
return { const datasetKey = `${measurement.name}.${measurement.fields}`;
label: datasetKey, return {
data: responseData[datasetKey]?.values ?? [], label: datasetKey,
backgroundColor: "#6f42c1", data: responseData[datasetKey]?.values ?? [],
borderColor: "#b392f0", backgroundColor: "#6f42c1",
borderWidth: 1, borderColor: "#b392f0",
}; borderWidth: 1,
}); };
});
setChartData({ labels, datasets });
}); setChartData({ labels, datasets });
});
return () => {
socket.off("lineOutput"); return () => {
socket.emit("stop_stream"); // Stop streaming when component unmounts socket.off("lineOutput");
socket.disconnect(); socket.emit("stop_stream"); // Stop streaming when component unmounts
}; socket.disconnect();
}, [measurements, duration, iotApiUrl]); };
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async() => {
if (id !== "") {
try { if (id !== "") {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); try {
if (response.status === 200) { const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
setmeasurements(response.data.Data.measurements) if (response.status === 200) {
setDuration(response.data.Data.duration) setmeasurements(response.data.Data.measurements)
setName(response.data.widgetName) setDuration(response.data.Data.duration)
} else { setName(response.data.widgetName)
console.log("Unexpected response:", response); } else {
} console.log("Unexpected response:", response);
} catch (error) { }
console.error("There was an error!", error); } catch (error) {
} console.error("There was an error!", error);
} }
} }
}
useEffect(() => {
fetchSavedInputes(); useEffect(() => {
}, []); fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) { useEffect(() => {
fetchSavedInputes(); if (selectedChartId?.id === id) {
} fetchSavedInputes();
} }
,[chartMeasurements, chartDuration, widgetName]) }
,[chartMeasurements, chartDuration, widgetName])
return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
}; return <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
export default BarGraphComponent;
export default BarGraphComponent;

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

@ -1,189 +1,192 @@
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 axios from "axios";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import { useThemeStore } from "../../../../../store/useThemeStore";
import axios from "axios"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/useChartStore";
interface ChartComponentProps {
id: string; interface ChartComponentProps {
type: any; id: string;
title: string; type: any;
fontFamily?: string; title: string;
fontSize?: string; fontFamily?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontSize?: string;
} fontWeight?: "Light" | "Regular" | "Bold";
}
const DoughnutGraphComponent = ({
id, const LineGraphComponent = ({
type, id,
title, type,
fontFamily, title,
fontSize, fontFamily,
fontWeight = "Regular", fontSize,
}: ChartComponentProps) => { fontWeight = "Regular",
const { themeColor } = useThemeStore(); }: ChartComponentProps) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { themeColor } = useThemeStore();
const [measurements, setmeasurements] = useState<any>({}); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [duration, setDuration] = useState("1h") const [measurements, setmeasurements] = useState<any>({});
const [name, setName] = useState("Widget") const [duration, setDuration] = useState("1h")
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ const [name, setName] = useState("Widget")
labels: [], const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
datasets: [], labels: [],
}); datasets: [],
const { selectedChartId } = useWidgetStore(); });
const { selectedChartId } = useWidgetStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || ""; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const organization = email?.split("@")[1]?.split(".")[0] const email = localStorage.getItem("email") || "";
const defaultData = { const organization = email?.split("@")[1]?.split(".")[0]
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], const defaultData = {
datasets: [ labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
{ datasets: [
label: "Dataset", {
data: [12, 19, 3, 5, 2, 3], label: "Dataset",
backgroundColor: ["#6f42c1"], data: [12, 19, 3, 5, 2, 3],
borderColor: "#b392f0", backgroundColor: ["#6f42c1"],
borderWidth: 1, borderColor: "#b392f0",
}, borderWidth: 1,
], },
}; ],
};
useEffect(() => {
useEffect(() => {
},[])
},[])
// Memoize Theme Colors
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); // Memoize Theme Colors
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]);
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
// Memoize Font Styling
const chartFontWeightMap = useMemo( // Memoize Font Styling
() => ({ const chartFontWeightMap = useMemo(
Light: "lighter" as const, () => ({
Regular: "normal" as const, Light: "lighter" as const,
Bold: "bold" as const, Regular: "normal" as const,
}), Bold: "bold" as const,
[] }),
); []
);
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
const chartFontStyle = useMemo(
() => ({ const chartFontStyle = useMemo(
family: fontFamily || "Arial", () => ({
size: fontSizeValue, family: fontFamily || "Arial",
weight: fontWeightValue, size: fontSizeValue,
}), weight: fontWeightValue,
[fontFamily, fontSizeValue, fontWeightValue] }),
); [fontFamily, fontSizeValue, fontWeightValue]
);
// Memoize Chart Options
const options = useMemo( // Memoize Chart Options
() => ({ const options = useMemo(
responsive: true, () => ({
maintainAspectRatio: false, responsive: true,
plugins: { maintainAspectRatio: false,
title: { plugins: {
display: true, title: {
text: name, display: true,
font: chartFontStyle, text: name,
}, font: chartFontStyle,
legend: { },
display: false, legend: {
}, display: false,
}, },
scales: { },
// x: { scales: {
// ticks: { x: {
// display: true, // This hides the x-axis labels ticks: {
// }, display: true, // This hides the x-axis labels
// }, },
}, },
}), },
[title, chartFontStyle, name] }),
); [title, chartFontStyle, name]
);
// useEffect(() => {console.log(measurements);
// },[measurements]) // useEffect(() => {console.log(measurements);
// },[measurements])
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const socket = io(`http://${iotApiUrl}`);
const socket = io(`http://${iotApiUrl}`);
const inputData = {
measurements, const inputData = {
duration, measurements,
interval: 1000, duration,
}; interval: 1000,
};
const startStream = () => {
socket.emit("lineInput", inputData); const startStream = () => {
}; socket.emit("lineInput", inputData);
};
socket.on("connect", startStream);
socket.on("connect", startStream);
socket.on("lineOutput", (response) => {
const responseData = response.data; socket.on("lineOutput", (response) => {
const responseData = response.data;
// Extract timestamps and values
const labels = responseData.time; // Extract timestamps and values
const datasets = Object.keys(measurements).map((key) => { const labels = responseData.time;
const measurement = measurements[key]; const datasets = Object.keys(measurements).map((key) => {
const datasetKey = `${measurement.name}.${measurement.fields}`; const measurement = measurements[key];
return { const datasetKey = `${measurement.name}.${measurement.fields}`;
label: datasetKey, return {
data: responseData[datasetKey]?.values ?? [], label: datasetKey,
backgroundColor: "#6f42c1", data: responseData[datasetKey]?.values ?? [],
borderColor: "#b392f0", backgroundColor: "#6f42c1",
borderWidth: 1, borderColor: "#b392f0",
}; borderWidth: 1,
}); };
});
setChartData({ labels, datasets });
}); setChartData({ labels, datasets });
});
return () => {
socket.off("lineOutput"); return () => {
socket.emit("stop_stream"); // Stop streaming when component unmounts socket.off("lineOutput");
socket.disconnect(); socket.emit("stop_stream"); // Stop streaming when component unmounts
}; socket.disconnect();
}, [measurements, duration, iotApiUrl]); };
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async() => {
if (id !== "") {
try { if (id !== "") {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); try {
if (response.status === 200) { const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
setmeasurements(response.data.Data.measurements) if (response.status === 200) {
setDuration(response.data.Data.duration) console.log('line chart res',response);
setName(response.data.widgetName)
} else { setmeasurements(response.data.Data.measurements)
console.log("Unexpected response:", response); setDuration(response.data.Data.duration)
} setName(response.data.widgetName)
} catch (error) { } else {
console.error("There was an error!", error); console.log("Unexpected response:", response);
} }
} } catch (error) {
} console.error("There was an error!", error);
}
useEffect(() => { }
fetchSavedInputes(); }
}, []);
useEffect(() => {
useEffect(() => { fetchSavedInputes();
if (selectedChartId?.id === id) { }, []);
fetchSavedInputes();
} useEffect(() => {
} if (selectedChartId?.id === id) {
,[chartMeasurements, chartDuration, widgetName]) fetchSavedInputes();
}
return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; }
}; ,[chartMeasurements, chartDuration, widgetName])
export default DoughnutGraphComponent; return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
export default LineGraphComponent;

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

@ -1,191 +1,212 @@
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 axios from "axios";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import { useThemeStore } from "../../../../../store/useThemeStore";
import axios from "axios"; import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps {
id: string; interface ChartComponentProps {
type: any; id: string;
title: string; type: any;
fontFamily?: string; title: string;
fontSize?: string; fontFamily?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontSize?: string;
} fontWeight?: "Light" | "Regular" | "Bold";
}
const LineGraphComponent = ({
id, const LineGraphComponent = ({
type, id,
title, type,
fontFamily, title,
fontSize, fontFamily,
fontWeight = "Regular", fontSize,
}: ChartComponentProps) => { fontWeight = "Regular",
const { themeColor } = useThemeStore(); }: ChartComponentProps) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { themeColor } = useThemeStore();
const [measurements, setmeasurements] = useState<any>({}); const {
const [duration, setDuration] = useState("1h") measurements: chartMeasurements,
const [name, setName] = useState("Widget") duration: chartDuration,
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ name: widgetName,
labels: [], } = useChartStore();
datasets: [], const [measurements, setmeasurements] = useState<any>({});
}); const [duration, setDuration] = useState("1h");
const { selectedChartId } = useWidgetStore(); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; labels: string[];
const email = localStorage.getItem("email") || ""; datasets: any[];
const organization = email?.split("@")[1]?.split(".")[0] }>({
const defaultData = { labels: [],
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [],
datasets: [ });
{ const { selectedChartId } = useWidgetStore();
label: "Dataset",
data: [12, 19, 3, 5, 2, 3], const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
backgroundColor: ["#6f42c1"], const email = localStorage.getItem("email") || "";
borderColor: "#b392f0", const organization = email?.split("@")[1]?.split(".")[0];
borderWidth: 1, const defaultData = {
}, labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
], datasets: [
}; {
label: "Dataset",
useEffect(() => { data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["#6f42c1"],
},[]) borderColor: "#b392f0",
borderWidth: 1,
// Memoize Theme Colors },
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); ],
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); };
// Memoize Font Styling useEffect(() => {}, []);
const chartFontWeightMap = useMemo(
() => ({ // Memoize Theme Colors
Light: "lighter" as const, const buttonActionColor = useMemo(
Regular: "normal" as const, () => themeColor[0] || "#5c87df",
Bold: "bold" as const, [themeColor]
}), );
[] const buttonAbortColor = useMemo(
); () => themeColor[1] || "#ffffff",
[themeColor]
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]); );
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
// Memoize Font Styling
const chartFontStyle = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", Light: "lighter" as const,
size: fontSizeValue, Regular: "normal" as const,
weight: fontWeightValue, Bold: "bold" as const,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] []
); );
// Memoize Chart Options const fontSizeValue = useMemo(
const options = useMemo( () => (fontSize ? parseInt(fontSize) : 12),
() => ({ [fontSize]
responsive: true, );
maintainAspectRatio: false, const fontWeightValue = useMemo(
plugins: { () => chartFontWeightMap[fontWeight],
title: { [fontWeight, chartFontWeightMap]
display: true, );
text: name,
font: chartFontStyle, const chartFontStyle = useMemo(
}, () => ({
legend: { family: fontFamily || "Arial",
display: false, size: fontSizeValue,
}, weight: fontWeightValue,
}, }),
scales: { [fontFamily, fontSizeValue, fontWeightValue]
x: { );
ticks: {
display: true, // This hides the x-axis labels // Memoize Chart Options
}, const options = useMemo(
}, () => ({
}, responsive: true,
}), maintainAspectRatio: false,
[title, chartFontStyle, name] plugins: {
); title: {
display: true,
// useEffect(() => {console.log(measurements); text: name,
// },[measurements]) font: chartFontStyle,
},
useEffect(() => { legend: {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; display: false,
},
const socket = io(`http://${iotApiUrl}`); },
scales: {
const inputData = { x: {
measurements, ticks: {
duration, display: true, // This hides the x-axis labels
interval: 1000, },
}; },
},
}),
const startStream = () => { [title, chartFontStyle, name]
socket.emit("lineInput", inputData); );
};
// useEffect(() => {console.log(measurements);
socket.on("connect", startStream); // },[measurements])
socket.on("lineOutput", (response) => { useEffect(() => {
const responseData = response.data; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
// Extract timestamps and values
const labels = responseData.time; const socket = io(`http://${iotApiUrl}`);
const datasets = Object.keys(measurements).map((key) => {
const measurement = measurements[key]; const inputData = {
const datasetKey = `${measurement.name}.${measurement.fields}`; measurements,
return { duration,
label: datasetKey, interval: 1000,
data: responseData[datasetKey]?.values ?? [], };
backgroundColor: "#6f42c1",
borderColor: "#b392f0", const startStream = () => {
borderWidth: 1, socket.emit("lineInput", inputData);
}; };
});
socket.on("connect", startStream);
setChartData({ labels, datasets });
}); socket.on("lineOutput", (response) => {
const responseData = response.data;
return () => {
socket.off("lineOutput"); // Extract timestamps and values
socket.emit("stop_stream"); // Stop streaming when component unmounts const labels = responseData.time;
socket.disconnect(); const datasets = Object.keys(measurements).map((key) => {
}; const measurement = measurements[key];
}, [measurements, duration, iotApiUrl]); const datasetKey = `${measurement.name}.${measurement.fields}`;
return {
const fetchSavedInputes = async() => { label: datasetKey,
data: responseData[datasetKey]?.values ?? [],
if (id !== "") { backgroundColor: "#6f42c1",
try { borderColor: "#b392f0",
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); borderWidth: 1,
if (response.status === 200) { };
console.log('line chart res',response); });
setmeasurements(response.data.Data.measurements) setChartData({ labels, datasets });
setDuration(response.data.Data.duration) });
setName(response.data.widgetName)
} else { return () => {
console.log("Unexpected response:", response); socket.off("lineOutput");
} socket.emit("stop_stream"); // Stop streaming when component unmounts
} catch (error) { socket.disconnect();
console.error("There was an error!", error); };
} }, [measurements, duration, iotApiUrl]);
}
} const fetchSavedInputes = async () => {
if (id !== "") {
useEffect(() => { try {
fetchSavedInputes(); const response = await axios.get(
}, []); `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
);
useEffect(() => { if (response.status === 200) {
if (selectedChartId?.id === id) { setmeasurements(response.data.Data.measurements);
fetchSavedInputes(); setDuration(response.data.Data.duration);
} setName(response.data.widgetName);
} } else {
,[chartMeasurements, chartDuration, widgetName]) console.log("Unexpected response:", response);
}
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; } catch (error) {
}; console.error("There was an error!", error);
}
export default LineGraphComponent; }
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}, [chartMeasurements, chartDuration, widgetName]);
return (
<Line
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
};
export default LineGraphComponent;

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

@ -1,375 +1,397 @@
// import React, { useEffect, useRef, useMemo, useState } from "react"; // import React, { useEffect, useRef, useMemo, useState } from "react";
// import { Chart } from "chart.js/auto"; // import { Chart } from "chart.js/auto";
// import { useThemeStore } from "../../../../store/useThemeStore"; // import { useThemeStore } from "../../../../store/useThemeStore";
// import io from "socket.io-client"; // import io from "socket.io-client";
// import { Pie } from 'react-chartjs-2'; // import { Pie } from 'react-chartjs-2';
// import useChartStore from "../../../../store/useChartStore"; // import useChartStore from "../../../../store/useChartStore";
// // WebSocket Connection // // WebSocket Connection
// // const socket = io("http://localhost:5000"); // Adjust to your backend URL // // const socket = io("http://localhost:5000"); // Adjust to your backend URL
// interface ChartComponentProps { // interface ChartComponentProps {
// type: any; // type: any;
// title: string; // title: string;
// fontFamily?: string; // fontFamily?: string;
// fontSize?: string; // fontSize?: string;
// fontWeight?: "Light" | "Regular" | "Bold"; // fontWeight?: "Light" | "Regular" | "Bold";
// data: any; // data: any;
// } // }
// const PieChartComponent = ({ // const PieChartComponent = ({
// type, // type,
// title, // title,
// fontFamily, // fontFamily,
// fontSize, // fontSize,
// fontWeight = "Regular", // fontWeight = "Regular",
// data, // data,
// }: ChartComponentProps) => { // }: ChartComponentProps) => {
// const canvasRef = useRef<HTMLCanvasElement>(null); // const canvasRef = useRef<HTMLCanvasElement>(null);
// const { themeColor } = useThemeStore(); // const { themeColor } = useThemeStore();
// const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ // const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
// labels: [], // labels: [],
// datasets: [], // datasets: [],
// }); // });
// const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; // const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
// const defaultData = { // const defaultData = {
// labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], // labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
// datasets: [ // datasets: [
// { // {
// label: "Dataset", // label: "Dataset",
// data: [12, 19, 3, 5, 2, 3], // data: [12, 19, 3, 5, 2, 3],
// backgroundColor: ["#6f42c1"], // backgroundColor: ["#6f42c1"],
// borderColor: "#ffffff", // borderColor: "#ffffff",
// borderWidth: 2, // borderWidth: 2,
// }, // },
// ], // ],
// }; // };
// // Memoize Theme Colors to Prevent Unnecessary Recalculations // // Memoize Theme Colors to Prevent Unnecessary Recalculations
// const buttonActionColor = useMemo( // const buttonActionColor = useMemo(
// () => themeColor[0] || "#6f42c1", // () => themeColor[0] || "#6f42c1",
// [themeColor] // [themeColor]
// ); // );
// const buttonAbortColor = useMemo( // const buttonAbortColor = useMemo(
// () => themeColor[1] || "#ffffff", // () => themeColor[1] || "#ffffff",
// [themeColor] // [themeColor]
// ); // );
// // Memoize Font Weight Mapping // // Memoize Font Weight Mapping
// const chartFontWeightMap = useMemo( // const chartFontWeightMap = useMemo(
// () => ({ // () => ({
// Light: "lighter" as const, // Light: "lighter" as const,
// Regular: "normal" as const, // Regular: "normal" as const,
// Bold: "bold" as const, // Bold: "bold" as const,
// }), // }),
// [] // []
// ); // );
// // Parse and Memoize Font Size // // Parse and Memoize Font Size
// const fontSizeValue = useMemo( // const fontSizeValue = useMemo(
// () => (fontSize ? parseInt(fontSize) : 12), // () => (fontSize ? parseInt(fontSize) : 12),
// [fontSize] // [fontSize]
// ); // );
// // Determine and Memoize Font Weight // // Determine and Memoize Font Weight
// const fontWeightValue = useMemo( // const fontWeightValue = useMemo(
// () => chartFontWeightMap[fontWeight], // () => chartFontWeightMap[fontWeight],
// [fontWeight, chartFontWeightMap] // [fontWeight, chartFontWeightMap]
// ); // );
// // Memoize Chart Font Style // // Memoize Chart Font Style
// const chartFontStyle = useMemo( // const chartFontStyle = useMemo(
// () => ({ // () => ({
// family: fontFamily || "Arial", // family: fontFamily || "Arial",
// size: fontSizeValue, // size: fontSizeValue,
// weight: fontWeightValue, // weight: fontWeightValue,
// }), // }),
// [fontFamily, fontSizeValue, fontWeightValue] // [fontFamily, fontSizeValue, fontWeightValue]
// ); // );
// // Memoize Chart Data // // Memoize Chart Data
// // const data = useMemo(() => propsData, [propsData]); // // const data = useMemo(() => propsData, [propsData]);
// // Memoize Chart Options // // Memoize Chart Options
// const options = useMemo( // const options = useMemo(
// () => ({ // () => ({
// responsive: true, // responsive: true,
// maintainAspectRatio: false, // maintainAspectRatio: false,
// plugins: { // plugins: {
// title: { // title: {
// display: true, // display: true,
// text: title, // text: title,
// font: chartFontStyle, // font: chartFontStyle,
// }, // },
// legend: { // legend: {
// display: false, // display: false,
// }, // },
// }, // },
// scales: { // scales: {
// // x: { // // x: {
// // ticks: { // // ticks: {
// // display: true, // This hides the x-axis labels // // display: true, // This hides the x-axis labels
// // }, // // },
// // }, // // },
// }, // },
// }), // }),
// [title, chartFontStyle] // [title, chartFontStyle]
// ); // );
// const { measurements, setMeasurements, updateDuration, duration } = useChartStore(); // const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
// useEffect(() => { // useEffect(() => {
// const socket = io(`http://${iotApiUrl}`); // const socket = io(`http://${iotApiUrl}`);
// if ( measurements.length > 0 ) { // if ( measurements.length > 0 ) {
// var inputes = { // var inputes = {
// measurements: measurements, // measurements: measurements,
// duration: duration, // duration: duration,
// interval: 1000, // interval: 1000,
// } // }
// // Start stream // // Start stream
// const startStream = () => { // const startStream = () => {
// socket.emit("lineInput", inputes); // socket.emit("lineInput", inputes);
// } // }
// socket.on('connect', startStream); // socket.on('connect', startStream);
// socket.on("lineOutput", (response) => { // socket.on("lineOutput", (response) => {
// const responceData = response.data; // const responceData = response.data;
// console.log("Received data:", responceData); // console.log("Received data:", responceData);
// // Extract timestamps and values // // Extract timestamps and values
// const labels = responceData.time; // const labels = responceData.time;
// const datasets = measurements.map((measurement: any) => { // const datasets = measurements.map((measurement: any) => {
// const key = `${measurement.name}.${measurement.fields}`; // const key = `${measurement.name}.${measurement.fields}`;
// return { // return {
// label: key, // label: key,
// data: responceData[key]?.values ?? [], // Ensure it exists // data: responceData[key]?.values ?? [], // Ensure it exists
// backgroundColor: "#6f42c1", // backgroundColor: "#6f42c1",
// borderColor: "#ffffff", // borderColor: "#ffffff",
// }; // };
// }); // });
// setChartData({ labels, datasets }); // setChartData({ labels, datasets });
// }); // });
// } // }
// return () => { // return () => {
// socket.off("lineOutput"); // socket.off("lineOutput");
// socket.emit("stop_stream"); // Stop streaming when component unmounts // socket.emit("stop_stream"); // Stop streaming when component unmounts
// }; // };
// }, [measurements, duration]); // }, [measurements, duration]);
// // useEffect(() => { // // useEffect(() => {
// // if (!canvasRef.current) return; // // if (!canvasRef.current) return;
// // const ctx = canvasRef.current.getContext("2d"); // // const ctx = canvasRef.current.getContext("2d");
// // if (!ctx) return; // // if (!ctx) return;
// // const chart = new Chart(ctx, { // // const chart = new Chart(ctx, {
// // type, // // type,
// // data: chartData, // // data: chartData,
// // options: options, // // options: options,
// // }); // // });
// // return () => chart.destroy(); // // return () => chart.destroy();
// // }, [chartData, type, title]); // // }, [chartData, type, title]);
// return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />; // return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
// }; // };
// 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 axios from "axios";
import useChartStore from "../../../../store/useChartStore"; import { useThemeStore } from "../../../../../store/useThemeStore";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import useChartStore from "../../../../../store/useChartStore";
import axios from "axios"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps { interface ChartComponentProps {
id: string; id: string;
type: any; type: any;
title: string; title: string;
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
} }
const PieChartComponent = ({ const PieChartComponent = ({
id, id,
type, type,
title, title,
fontFamily, fontFamily,
fontSize, fontSize,
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
const { themeColor } = useThemeStore(); const { themeColor } = useThemeStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const {
const [measurements, setmeasurements] = useState<any>({}); measurements: chartMeasurements,
const [duration, setDuration] = useState("1h") duration: chartDuration,
const [name, setName] = useState("Widget") name: widgetName,
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ } = useChartStore();
labels: [], const [measurements, setmeasurements] = useState<any>({});
datasets: [], const [duration, setDuration] = useState("1h");
}); const [name, setName] = useState("Widget");
const { selectedChartId } = useWidgetStore(); const [chartData, setChartData] = useState<{
labels: string[];
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; datasets: any[];
const email = localStorage.getItem("email") || ""; }>({
const organization = email?.split("@")[1]?.split(".")[0] labels: [],
const defaultData = { datasets: [],
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], });
datasets: [ const { selectedChartId } = useWidgetStore();
{
label: "Dataset", const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
data: [12, 19, 3, 5, 2, 3], const email = localStorage.getItem("email") || "";
backgroundColor: ["#6f42c1"], const organization = email?.split("@")[1]?.split(".")[0];
borderColor: "#b392f0", const defaultData = {
borderWidth: 1, labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
}, datasets: [
], {
}; label: "Dataset",
data: [12, 19, 3, 5, 2, 3],
useEffect(() => { backgroundColor: ["#6f42c1"],
borderColor: "#b392f0",
},[]) borderWidth: 1,
},
// Memoize Theme Colors ],
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); };
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]);
useEffect(() => {}, []);
// Memoize Font Styling
const chartFontWeightMap = useMemo( // Memoize Theme Colors
() => ({ const buttonActionColor = useMemo(
Light: "lighter" as const, () => themeColor[0] || "#5c87df",
Regular: "normal" as const, [themeColor]
Bold: "bold" as const, );
}), const buttonAbortColor = useMemo(
[] () => themeColor[1] || "#ffffff",
); [themeColor]
);
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]);
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]); // Memoize Font Styling
const chartFontWeightMap = useMemo(
const chartFontStyle = useMemo( () => ({
() => ({ Light: "lighter" as const,
family: fontFamily || "Arial", Regular: "normal" as const,
size: fontSizeValue, Bold: "bold" as const,
weight: fontWeightValue, }),
}), []
[fontFamily, fontSizeValue, fontWeightValue] );
);
const fontSizeValue = useMemo(
// Memoize Chart Options () => (fontSize ? parseInt(fontSize) : 12),
const options = useMemo( [fontSize]
() => ({ );
responsive: true, const fontWeightValue = useMemo(
maintainAspectRatio: false, () => chartFontWeightMap[fontWeight],
plugins: { [fontWeight, chartFontWeightMap]
title: { );
display: true,
text: name, const chartFontStyle = useMemo(
font: chartFontStyle, () => ({
}, family: fontFamily || "Arial",
legend: { size: fontSizeValue,
display: false, weight: fontWeightValue,
}, }),
}, [fontFamily, fontSizeValue, fontWeightValue]
scales: { );
// x: {
// ticks: { // Memoize Chart Options
// display: true, // This hides the x-axis labels const options = useMemo(
// }, () => ({
// }, responsive: true,
}, maintainAspectRatio: false,
}), plugins: {
[title, chartFontStyle, name] title: {
); display: true,
text: name,
// useEffect(() => {console.log(measurements); font: chartFontStyle,
// },[measurements]) },
legend: {
useEffect(() => { display: false,
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; },
},
const socket = io(`http://${iotApiUrl}`); scales: {
// x: {
const inputData = { // ticks: {
measurements, // display: true, // This hides the x-axis labels
duration, // },
interval: 1000, // },
}; },
}),
[title, chartFontStyle, name]
const startStream = () => { );
socket.emit("lineInput", inputData);
}; // useEffect(() => {console.log(measurements);
// },[measurements])
socket.on("connect", startStream);
useEffect(() => {
socket.on("lineOutput", (response) => { if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
const responseData = response.data; return;
// Extract timestamps and values const socket = io(`http://${iotApiUrl}`);
const labels = responseData.time;
const datasets = Object.keys(measurements).map((key) => { const inputData = {
const measurement = measurements[key]; measurements,
const datasetKey = `${measurement.name}.${measurement.fields}`; duration,
return { interval: 1000,
label: datasetKey, };
data: responseData[datasetKey]?.values ?? [],
backgroundColor: "#6f42c1", const startStream = () => {
borderColor: "#b392f0", socket.emit("lineInput", inputData);
borderWidth: 1, };
};
}); socket.on("connect", startStream);
setChartData({ labels, datasets }); socket.on("lineOutput", (response) => {
}); const responseData = response.data;
return () => { // Extract timestamps and values
socket.off("lineOutput"); const labels = responseData.time;
socket.emit("stop_stream"); // Stop streaming when component unmounts const datasets = Object.keys(measurements).map((key) => {
socket.disconnect(); const measurement = measurements[key];
}; const datasetKey = `${measurement.name}.${measurement.fields}`;
}, [measurements, duration, iotApiUrl]); return {
label: datasetKey,
const fetchSavedInputes = async() => { data: responseData[datasetKey]?.values ?? [],
backgroundColor: "#6f42c1",
if (id !== "") { borderColor: "#b392f0",
try { borderWidth: 1,
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) setChartData({ labels, datasets });
setName(response.data.widgetName) });
} else {
console.log("Unexpected response:", response); return () => {
} socket.off("lineOutput");
} catch (error) { socket.emit("stop_stream"); // Stop streaming when component unmounts
console.error("There was an error!", error); socket.disconnect();
} };
} }, [measurements, duration, iotApiUrl]);
}
const fetchSavedInputes = async () => {
useEffect(() => { if (id !== "") {
fetchSavedInputes(); try {
}, []); const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
useEffect(() => { );
if (selectedChartId?.id === id) { if (response.status === 200) {
fetchSavedInputes(); setmeasurements(response.data.Data.measurements);
} setDuration(response.data.Data.duration);
} setName(response.data.widgetName);
,[chartMeasurements, chartDuration, widgetName]) } else {
console.log("Unexpected response:", response);
return <Pie data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; }
}; } catch (error) {
console.error("There was an error!", error);
export default PieChartComponent; }
}
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}, [chartMeasurements, chartDuration, widgetName]);
return (
<Pie
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
};
export default PieChartComponent;

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

@ -1,189 +1,212 @@
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 axios from "axios";
import { useWidgetStore } from "../../../../store/useWidgetStore"; import { useThemeStore } from "../../../../../store/useThemeStore";
import axios from "axios"; import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
interface ChartComponentProps {
id: string; interface ChartComponentProps {
type: any; id: string;
title: string; type: any;
fontFamily?: string; title: string;
fontSize?: string; fontFamily?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontSize?: string;
} fontWeight?: "Light" | "Regular" | "Bold";
}
const PolarAreaGraphComponent = ({
id, const PolarAreaGraphComponent = ({
type, id,
title, type,
fontFamily, title,
fontSize, fontFamily,
fontWeight = "Regular", fontSize,
}: ChartComponentProps) => { fontWeight = "Regular",
const { themeColor } = useThemeStore(); }: ChartComponentProps) => {
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { themeColor } = useThemeStore();
const [measurements, setmeasurements] = useState<any>({}); const {
const [duration, setDuration] = useState("1h") measurements: chartMeasurements,
const [name, setName] = useState("Widget") duration: chartDuration,
const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ name: widgetName,
labels: [], } = useChartStore();
datasets: [], const [measurements, setmeasurements] = useState<any>({});
}); const [duration, setDuration] = useState("1h");
const { selectedChartId } = useWidgetStore(); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; labels: string[];
const email = localStorage.getItem("email") || ""; datasets: any[];
const organization = email?.split("@")[1]?.split(".")[0] }>({
const defaultData = { labels: [],
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [],
datasets: [ });
{ const { selectedChartId } = useWidgetStore();
label: "Dataset",
data: [12, 19, 3, 5, 2, 3], const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
backgroundColor: ["#6f42c1"], const email = localStorage.getItem("email") || "";
borderColor: "#b392f0", const organization = email?.split("@")[1]?.split(".")[0];
borderWidth: 1, const defaultData = {
}, labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
], datasets: [
}; {
label: "Dataset",
useEffect(() => { data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["#6f42c1"],
},[]) borderColor: "#b392f0",
borderWidth: 1,
// Memoize Theme Colors },
const buttonActionColor = useMemo(() => themeColor[0] || "#5c87df", [themeColor]); ],
const buttonAbortColor = useMemo(() => themeColor[1] || "#ffffff", [themeColor]); };
// Memoize Font Styling useEffect(() => {}, []);
const chartFontWeightMap = useMemo(
() => ({ // Memoize Theme Colors
Light: "lighter" as const, const buttonActionColor = useMemo(
Regular: "normal" as const, () => themeColor[0] || "#5c87df",
Bold: "bold" as const, [themeColor]
}), );
[] const buttonAbortColor = useMemo(
); () => themeColor[1] || "#ffffff",
[themeColor]
const fontSizeValue = useMemo(() => (fontSize ? parseInt(fontSize) : 12), [fontSize]); );
const fontWeightValue = useMemo(() => chartFontWeightMap[fontWeight], [fontWeight, chartFontWeightMap]);
// Memoize Font Styling
const chartFontStyle = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", Light: "lighter" as const,
size: fontSizeValue, Regular: "normal" as const,
weight: fontWeightValue, Bold: "bold" as const,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] []
); );
// Memoize Chart Options const fontSizeValue = useMemo(
const options = useMemo( () => (fontSize ? parseInt(fontSize) : 12),
() => ({ [fontSize]
responsive: true, );
maintainAspectRatio: false, const fontWeightValue = useMemo(
plugins: { () => chartFontWeightMap[fontWeight],
title: { [fontWeight, chartFontWeightMap]
display: true, );
text: name,
font: chartFontStyle, const chartFontStyle = useMemo(
}, () => ({
legend: { family: fontFamily || "Arial",
display: false, size: fontSizeValue,
}, weight: fontWeightValue,
}, }),
scales: { [fontFamily, fontSizeValue, fontWeightValue]
// x: { );
// ticks: {
// display: true, // This hides the x-axis labels // Memoize Chart Options
// }, const options = useMemo(
// }, () => ({
}, responsive: true,
}), maintainAspectRatio: false,
[title, chartFontStyle, name] plugins: {
); title: {
display: true,
// useEffect(() => {console.log(measurements); text: name,
// },[measurements]) font: chartFontStyle,
},
useEffect(() => { legend: {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return; display: false,
},
const socket = io(`http://${iotApiUrl}`); },
scales: {
const inputData = { // x: {
measurements, // ticks: {
duration, // display: true, // This hides the x-axis labels
interval: 1000, // },
}; // },
},
}),
const startStream = () => { [title, chartFontStyle, name]
socket.emit("lineInput", inputData); );
};
// useEffect(() => {console.log(measurements);
socket.on("connect", startStream); // },[measurements])
socket.on("lineOutput", (response) => { useEffect(() => {
const responseData = response.data; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
// Extract timestamps and values
const labels = responseData.time; const socket = io(`http://${iotApiUrl}`);
const datasets = Object.keys(measurements).map((key) => {
const measurement = measurements[key]; const inputData = {
const datasetKey = `${measurement.name}.${measurement.fields}`; measurements,
return { duration,
label: datasetKey, interval: 1000,
data: responseData[datasetKey]?.values ?? [], };
backgroundColor: "#6f42c1",
borderColor: "#b392f0", const startStream = () => {
borderWidth: 1, socket.emit("lineInput", inputData);
}; };
});
socket.on("connect", startStream);
setChartData({ labels, datasets });
}); socket.on("lineOutput", (response) => {
const responseData = response.data;
return () => {
socket.off("lineOutput"); // Extract timestamps and values
socket.emit("stop_stream"); // Stop streaming when component unmounts const labels = responseData.time;
socket.disconnect(); const datasets = Object.keys(measurements).map((key) => {
}; const measurement = measurements[key];
}, [measurements, duration, iotApiUrl]); const datasetKey = `${measurement.name}.${measurement.fields}`;
return {
const fetchSavedInputes = async() => { label: datasetKey,
data: responseData[datasetKey]?.values ?? [],
if (id !== "") { backgroundColor: "#6f42c1",
try { borderColor: "#b392f0",
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); borderWidth: 1,
if (response.status === 200) { };
setmeasurements(response.data.Data.measurements) });
setDuration(response.data.Data.duration)
setName(response.data.widgetName) setChartData({ labels, datasets });
} else { });
console.log("Unexpected response:", response);
} return () => {
} catch (error) { socket.off("lineOutput");
console.error("There was an error!", error); socket.emit("stop_stream"); // Stop streaming when component unmounts
} socket.disconnect();
} };
} }, [measurements, duration, iotApiUrl]);
useEffect(() => { const fetchSavedInputes = async () => {
fetchSavedInputes(); if (id !== "") {
}, []); try {
const response = await axios.get(
useEffect(() => { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
if (selectedChartId?.id === id) { );
fetchSavedInputes(); if (response.status === 200) {
} setmeasurements(response.data.Data.measurements);
} setDuration(response.data.Data.duration);
,[chartMeasurements, chartDuration, widgetName]) setName(response.data.widgetName);
} else {
return <PolarArea data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; console.log("Unexpected response:", response);
}; }
} catch (error) {
export default PolarAreaGraphComponent; console.error("There was an error!", error);
}
}
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) {
fetchSavedInputes();
}
}, [chartMeasurements, chartDuration, widgetName]);
return (
<PolarArea
data={Object.keys(measurements).length > 0 ? chartData : defaultData}
options={options}
/>
);
};
export default PolarAreaGraphComponent;

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

@ -1,29 +1,29 @@
import { StockIncreseIcon } from "../../../icons/RealTimeVisulationIcons"; import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
const ProgressCard = ({ const ProgressCard = ({
title, title,
data, data,
}: { }: {
title: string; title: string;
data: { stocks: Array<{ key: string; value: number; description: string }> }; data: { stocks: Array<{ key: string; value: number; description: string }> };
}) => ( }) => (
<div className="chart progressBar"> <div className="chart progressBar">
<div className="header">{title}</div> <div className="header">{title}</div>
{data?.stocks?.map((stock, index) => ( {data?.stocks?.map((stock, index) => (
<div key={index} className="stock"> <div key={index} className="stock">
<span className="stock-item"> <span className="stock-item">
<span className="stockValues"> <span className="stockValues">
<div className="key">{stock.key}</div> <div className="key">{stock.key}</div>
<div className="value">{stock.value}</div> <div className="value">{stock.value}</div>
</span> </span>
<div className="stock-description">{stock.description}</div> <div className="stock-description">{stock.description}</div>
</span> </span>
<div className="icon"> <div className="icon">
<StockIncreseIcon /> <StockIncreseIcon />
</div> </div>
</div> </div>
))} ))}
</div> </div>
); );
export default ProgressCard; export default ProgressCard;

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;

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

@ -1,102 +1,102 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { Radar } from "react-chartjs-2"; import { Radar } from "react-chartjs-2";
import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js"; import { ChartOptions, ChartData, RadialLinearScaleOptions } from "chart.js";
interface ChartComponentProps { interface ChartComponentProps {
type: string; type: string;
title: string; title: string;
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
data: number[]; // Expecting an array of numbers for radar chart data data: number[]; // Expecting an array of numbers for radar chart data
} }
const RadarGraphComponent = ({ const RadarGraphComponent = ({
title, title,
fontFamily, fontFamily,
fontSize, fontSize,
fontWeight = "Regular", fontWeight = "Regular",
data, // Now guaranteed to be number[] data, // Now guaranteed to be number[]
}: ChartComponentProps) => { }: ChartComponentProps) => {
// Memoize Font Weight Mapping // Memoize Font Weight Mapping
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
Light: "lighter" as const, Light: "lighter" as const,
Regular: "normal" as const, Regular: "normal" as const,
Bold: "bold" as const, Bold: "bold" as const,
}), }),
[] []
); );
const fontSizeValue = useMemo( const fontSizeValue = useMemo(
() => (fontSize ? parseInt(fontSize) : 12), () => (fontSize ? parseInt(fontSize) : 12),
[fontSize] [fontSize]
); );
const fontWeightValue = useMemo( const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight], () => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap] [fontWeight, chartFontWeightMap]
); );
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", family: fontFamily || "Arial",
size: fontSizeValue, size: fontSizeValue,
weight: fontWeightValue, weight: fontWeightValue,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] [fontFamily, fontSizeValue, fontWeightValue]
); );
const options: ChartOptions<"radar"> = useMemo( const options: ChartOptions<"radar"> = useMemo(
() => ({ () => ({
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: title, text: title,
font: chartFontStyle, font: chartFontStyle,
}, },
legend: { legend: {
display: false, display: false,
position: "top", position: "top",
}, },
}, },
scales: { scales: {
r: { r: {
min: 0, min: 0,
max: 100, max: 100,
angleLines: { angleLines: {
display: true, display: true,
}, },
ticks: { ticks: {
display: true, display: true,
stepSize: 20, stepSize: 20,
}, },
} as RadialLinearScaleOptions, } as RadialLinearScaleOptions,
}, },
}), }),
[title, chartFontStyle] [title, chartFontStyle]
); );
const chartData: ChartData<"radar"> = useMemo( const chartData: ChartData<"radar"> = useMemo(
() => ({ () => ({
labels: ["January", "February", "March", "April", "May", "June", "July"], labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ datasets: [
{ {
label: "Dataset 1", label: "Dataset 1",
data, // Use the data passed as a prop data, // Use the data passed as a prop
backgroundColor: "rgba(111, 66, 193, 0.2)", backgroundColor: "rgba(111, 66, 193, 0.2)",
borderColor: "#6f42c1", borderColor: "#6f42c1",
borderWidth: 2, borderWidth: 2,
fill: true, fill: true,
}, },
], ],
}), }),
[data] [data]
); );
return <Radar data={chartData} options={options} />; return <Radar data={chartData} options={options} />;
}; };
export default RadarGraphComponent; export default RadarGraphComponent;

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;

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

@ -1,269 +1,270 @@
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 { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import { import {
Chart as ChartJS, Chart as ChartJS,
CategoryScale, CategoryScale,
LinearScale, LinearScale,
BarElement, BarElement,
Title, Title,
Tooltip, Tooltip,
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 axios from "axios";
import useChartStore from "../../../../store/useChartStore"; import io from "socket.io-client";
import axios from "axios"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
import io from "socket.io-client"; import useChartStore from "../../../../../store/useChartStore";
// Register ChartJS components // Register ChartJS components
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
LinearScale, LinearScale,
BarElement, BarElement,
Title, Title,
Tooltip, Tooltip,
Legend Legend
); );
interface ProductionCapacityProps { interface ProductionCapacityProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
Data?: any, Data?: any,
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any // onPointerDown:any
} }
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
id, id,
type, type,
Data, Data,
position, position,
rotation, rotation,
onContextMenu, onContextMenu,
}) => { }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { const {
measurements: chartMeasurements, measurements: chartMeasurements,
duration: chartDuration, duration: chartDuration,
name: widgetName, name: widgetName,
} = useChartStore(); } = useChartStore();
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {}); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget"); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ const [chartData, setChartData] = useState<{
labels: string[]; labels: string[];
datasets: any[]; datasets: any[];
}>({ }>({
labels: [], labels: [],
datasets: [], datasets: [],
}); });
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];
// Chart data for a week // Chart data for a week
const defaultChartData = { const defaultChartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
datasets: [ datasets: [
{ {
label: "Production Capacity (units/day)", label: "Production Capacity (units/day)",
data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
backgroundColor: "#6f42c1", // Theme color backgroundColor: "#6f42c1", // Theme color
borderColor: "#6f42c1", borderColor: "#6f42c1",
borderWidth: 1, borderWidth: 1,
borderRadius: 8, // Rounded corners for the bars borderRadius: 8, // Rounded corners for the bars
borderSkipped: false, // Ensure all corners are rounded borderSkipped: false, // Ensure all corners are rounded
}, },
], ],
}; };
// Chart options // Chart options
const chartOptions = { const chartOptions = {
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: false, // Hide legend display: false, // Hide legend
}, },
title: { title: {
display: true, display: true,
text: "Weekly Production Capacity", text: "Weekly Production Capacity",
font: { font: {
size: 16, size: 16,
}, },
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
// Explicitly type the context parameter // Explicitly type the context parameter
label: (context: TooltipItem<"bar">) => { label: (context: TooltipItem<"bar">) => {
const value = context.parsed.y; // Extract the y-axis value const value = context.parsed.y; // Extract the y-axis value
return `${value} units`; // Customize tooltip to display "units" return `${value} units`; // Customize tooltip to display "units"
}, },
}, },
}, },
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
display: false, // Hide x-axis grid lines display: false, // Hide x-axis grid lines
}, },
}, },
y: { y: {
display: false, // Remove the y-axis completely display: false, // Remove the y-axis completely
}, },
}, },
}; };
useEffect(() => { useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return; return;
const socket = io(`http://${iotApiUrl}`); const socket = io(`http://${iotApiUrl}`);
const inputData = { const inputData = {
measurements, measurements,
duration, duration,
interval: 1000, interval: 1000,
}; };
const startStream = () => { const startStream = () => {
socket.emit("lineInput", inputData); socket.emit("lineInput", inputData);
}; };
socket.on("connect", startStream); socket.on("connect", startStream);
socket.on("lineOutput", (response) => { socket.on("lineOutput", (response) => {
const responseData = response.data; const responseData = response.data;
// Extract timestamps and values // Extract timestamps and values
const labels = responseData.time; const labels = responseData.time;
const datasets = Object.keys(measurements).map((key) => { const datasets = Object.keys(measurements).map((key) => {
const measurement = measurements[key]; const measurement = measurements[key];
const datasetKey = `${measurement.name}.${measurement.fields}`; const datasetKey = `${measurement.name}.${measurement.fields}`;
return { return {
label: datasetKey, label: datasetKey,
data: responseData[datasetKey]?.values ?? [], data: responseData[datasetKey]?.values ?? [],
backgroundColor: "#6f42c1", // Theme color backgroundColor: "#6f42c1", // Theme color
borderColor: "#6f42c1", borderColor: "#6f42c1",
borderWidth: 1, borderWidth: 1,
borderRadius: 8, // Rounded corners for the bars borderRadius: 8, // Rounded corners for the bars
borderSkipped: false, // Ensure all corners are rounded borderSkipped: false, // Ensure all corners are rounded
}; };
}); });
setChartData({ labels, datasets }); setChartData({ labels, datasets });
}); });
return () => { return () => {
socket.off("lineOutput"); socket.off("lineOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect(); socket.disconnect();
}; };
}, [measurements, duration, iotApiUrl]); }, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async () => { const fetchSavedInputes = async () => {
if (id !== "") { if (id !== "") {
try { try {
const response = await axios.get( const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}` `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${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 {
} }
} catch (error) { } } catch (error) { }
} }
}; };
useEffect(() => { useEffect(() => {
fetchSavedInputes(); fetchSavedInputes();
}, []); }, []);
useEffect(() => { useEffect(() => {
if (selectedChartId?.id === id) { if (selectedChartId?.id === id) {
fetchSavedInputes(); fetchSavedInputes();
} }
}, [chartMeasurements, chartDuration, widgetName]); }, [chartMeasurements, chartDuration, widgetName]);
useEffect(() => { }, [rotation]); useEffect(() => { }, [rotation]);
return ( return (
<Html <Html
position={position} position={position}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
rotation={rotation} rotation={rotation}
transform transform
sprite={false} sprite={false}
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
// style={{ // style={{
// transform: transformStyle.transform, // transform: transformStyle.transform,
// transformStyle: "preserve-3d", // transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out", // transition: "transform 0.1s ease-out",
// }} // }}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
onDrop={(e) => { onDrop={(e) => {
e.preventDefault(); e.preventDefault();
// e.stopPropagation(); // e.stopPropagation();
}} }}
wrapperClass="pointer-none" wrapperClass="pointer-none"
> >
<div <div
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`} className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
style={{ style={{
width: "300px", // Original width width: "300px", // Original width
height: "300px", // Original height height: "300px", // Original height
// 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="header">Production Capacity</div> <div className="headeproductionCapacityr-wrapper">
<div className="production-capacity"> <div className="header">Production Capacity</div>
<div className="value">1,200</div>{" "} <div className="production-capacity">
<div className="value">units/hour</div> <div className="value">1,200</div>{" "}
</div> <div className="value">units/hour</div>
<div className="production-capacity"> </div>
<div className="current"> <div className="production-capacity">
<div className="key">Current</div> <div className="current">
<div className="value">1500</div> <div className="key">Current</div>
</div> <div className="value">1500</div>
<div className="target"> </div>
<div className="key">Target</div> <div className="target">
<div className="value">2.345</div> <div className="key">Target</div>
</div> <div className="value">2.345</div>
{/* <div className="value">units/hour</div> */} </div>
</div> {/* <div className="value">units/hour</div> */}
</div>{" "} </div>
<div className="bar-chart charts"> </div>{" "}
{/* Bar Chart */} <div className="bar-chart charts">
<Bar {/* Bar Chart */}
data={ <Bar
Object.keys(measurements).length > 0 data={
? chartData Object.keys(measurements).length > 0
: defaultChartData ? chartData
} : defaultChartData
options={chartOptions} }
/> options={chartOptions}
</div> />
</div> </div>
</Html> </div>
</Html>
);
}; );
};
export default ProductionCapacity;
export default ProductionCapacity;

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

@ -1,277 +1,279 @@
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 { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { import {
Chart as ChartJS, Chart as ChartJS,
CategoryScale, CategoryScale,
LinearScale, LinearScale,
PointElement, PointElement,
LineElement, LineElement,
Tooltip, Tooltip,
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";
// Register Chart.js components import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
ChartJS.register(
CategoryScale, // Register Chart.js components
LinearScale, ChartJS.register(
PointElement, CategoryScale,
LineElement, LinearScale,
Tooltip PointElement,
); LineElement,
Tooltip
// Define Props for SmoothLineGraphComponent );
interface SmoothLineGraphProps {
data: ChartData<"line">; // Type for chart data // Define Props for SmoothLineGraphComponent
options?: ChartOptions<"line">; // Type for chart options (optional) interface SmoothLineGraphProps {
} data: ChartData<"line">; // Type for chart data
options?: ChartOptions<"line">; // Type for chart options (optional)
// SmoothLineGraphComponent using react-chartjs-2 }
const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
data, // SmoothLineGraphComponent using react-chartjs-2
options, const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
}) => { data,
return <Line data={data} options={options} />; options,
}; }) => {
interface ReturnOfInvestmentProps { return <Line data={data} options={options} />;
id: string; };
type: string; interface ReturnOfInvestmentProps {
position: [number, number, number]; id: string;
rotation: [number, number, number]; type: string;
Data?: any; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; rotation: [number, number, number];
} Data?: any;
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ onContextMenu?: (event: React.MouseEvent) => void;
id, }
type, const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
Data, id,
position, type,
rotation, Data,
onContextMenu, position,
}) => { rotation,
const { selectedChartId, setSelectedChartId } = useWidgetStore(); onContextMenu,
const { }) => {
measurements: chartMeasurements, const { selectedChartId, setSelectedChartId } = useWidgetStore();
duration: chartDuration, const {
name: widgetName, measurements: chartMeasurements,
} = useChartStore(); duration: chartDuration,
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {}); name: widgetName,
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); } = useChartStore();
const [name, setName] = useState("Widget"); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [chartData, setChartData] = useState<{ const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
labels: string[]; const [name, setName] = useState("Widget");
datasets: any[]; const [chartData, setChartData] = useState<{
}>({ labels: string[];
labels: [], datasets: any[];
datasets: [], }>({
}); labels: [],
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; datasets: [],
const email = localStorage.getItem("email") || ""; });
const organization = email?.split("@")[1]?.split(".")[0]; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
// Improved sample data for the smooth curve graph (single day) const email = localStorage.getItem("email") || "";
const graphData: ChartData<"line"> = { const organization = email?.split("@")[1]?.split(".")[0];
labels: [ // Improved sample data for the smooth curve graph (single day)
"12 AM", const graphData: ChartData<"line"> = {
"3 AM", labels: [
"6 AM", "12 AM",
"9 AM", "3 AM",
"12 PM", "6 AM",
"3 PM", "9 AM",
"6 PM", "12 PM",
"9 PM", "3 PM",
"12 AM", "6 PM",
], "9 PM",
datasets: [ "12 AM",
{ ],
label: "Investment", datasets: [
data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth {
borderColor: "rgba(75, 192, 192, 1)", // Light blue color label: "Investment",
backgroundColor: "rgba(75, 192, 192, 0.2)", data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
fill: true, borderColor: "rgba(75, 192, 192, 1)", // Light blue color
tension: 0.4, // Smooth curve effect backgroundColor: "rgba(75, 192, 192, 0.2)",
pointRadius: 0, // Hide dots fill: true,
pointHoverRadius: 0, // Hide hover dots tension: 0.4, // Smooth curve effect
}, pointRadius: 0, // Hide dots
{ pointHoverRadius: 0, // Hide hover dots
label: "Return", },
data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values {
borderColor: "rgba(255, 99, 132, 1)", // Pink color label: "Return",
backgroundColor: "rgba(255, 99, 132, 0.2)", data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
fill: true, borderColor: "rgba(255, 99, 132, 1)", // Pink color
tension: 0.4, // Smooth curve effect backgroundColor: "rgba(255, 99, 132, 0.2)",
pointRadius: 0, // Hide dots fill: true,
pointHoverRadius: 0, // Hide hover dots tension: 0.4, // Smooth curve effect
}, pointRadius: 0, // Hide dots
], pointHoverRadius: 0, // Hide hover dots
}; },
],
// Options for the smooth curve graph };
const graphOptions: ChartOptions<"line"> = {
responsive: true, // Options for the smooth curve graph
maintainAspectRatio: false, const graphOptions: ChartOptions<"line"> = {
plugins: { responsive: true,
tooltip: { maintainAspectRatio: false,
enabled: true, // Enable tooltips on hover plugins: {
mode: "index", // Show both datasets' values at the same index tooltip: {
intersect: false, // Allow hovering anywhere on the graph enabled: true, // Enable tooltips on hover
}, mode: "index", // Show both datasets' values at the same index
}, intersect: false, // Allow hovering anywhere on the graph
scales: { },
x: { },
grid: { scales: {
display: false, // Hide x-axis grid lines x: {
}, grid: {
ticks: { display: false, // Hide x-axis grid lines
display: false, // Hide x-axis labels },
}, ticks: {
}, display: false, // Hide x-axis labels
y: { },
grid: { },
display: false, // Hide y-axis grid lines y: {
}, grid: {
ticks: { display: false, // Hide y-axis grid lines
display: false, // Hide y-axis labels },
}, ticks: {
}, display: false, // Hide y-axis labels
}, },
}; },
},
useEffect(() => { };
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return; useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
const socket = io(`http://${iotApiUrl}`); return;
const inputData = { const socket = io(`http://${iotApiUrl}`);
measurements,
duration, const inputData = {
interval: 1000, measurements,
}; duration,
interval: 1000,
const startStream = () => { };
socket.emit("lineInput", inputData);
}; const startStream = () => {
socket.emit("lineInput", inputData);
socket.on("connect", startStream); };
socket.on("lineOutput", (response) => { socket.on("connect", startStream);
const responseData = response.data;
socket.on("lineOutput", (response) => {
// Extract timestamps and values const responseData = response.data;
const labels = responseData.time;
const datasets = Object.keys(measurements).map((key, index) => { // Extract timestamps and values
const measurement = measurements[key]; const labels = responseData.time;
const datasetKey = `${measurement.name}.${measurement.fields}`; const datasets = Object.keys(measurements).map((key, index) => {
return { const measurement = measurements[key];
label: datasetKey, const datasetKey = `${measurement.name}.${measurement.fields}`;
data: responseData[datasetKey]?.values ?? [], return {
borderColor: label: datasetKey,
index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color data: responseData[datasetKey]?.values ?? [],
backgroundColor: borderColor:
index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)", index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
fill: true, backgroundColor:
tension: 0.4, // Smooth curve effect index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
pointRadius: 0, // Hide dots fill: true,
pointHoverRadius: 0, // Hide hover dots tension: 0.4, // Smooth curve effect
}; pointRadius: 0, // Hide dots
}); pointHoverRadius: 0, // Hide hover dots
};
setChartData({ labels, datasets }); });
});
setChartData({ labels, datasets });
return () => { });
socket.off("lineOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts return () => {
socket.disconnect(); socket.off("lineOutput");
}; socket.emit("stop_stream"); // Stop streaming when component unmounts
}, [measurements, duration, iotApiUrl]); socket.disconnect();
};
const fetchSavedInputes = async () => { }, [measurements, duration, iotApiUrl]);
if (id !== "") {
try { const fetchSavedInputes = async () => {
const response = await axios.get( if (id !== "") {
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}` try {
); const response = await axios.get(
if (response.status === 200) { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
setmeasurements(response.data.Data.measurements); );
setDuration(response.data.Data.duration); if (response.status === 200) {
setName(response.data.widgetName); setmeasurements(response.data.Data.measurements);
} else { setDuration(response.data.Data.duration);
console.log("Unexpected response:", response); setName(response.data.widgetName);
} } else {
} catch (error) { console.log("Unexpected response:", response);
console.error("There was an error!", error); }
} } catch (error) {
} console.error("There was an error!", error);
}; }
}
useEffect(() => { };
fetchSavedInputes();
}, []); useEffect(() => {
fetchSavedInputes();
useEffect(() => { }, []);
if (selectedChartId?.id === id) {
fetchSavedInputes(); useEffect(() => {
} if (selectedChartId?.id === id) {
}, [chartMeasurements, chartDuration, widgetName]); fetchSavedInputes();
const rotationDegrees = { }
x: (rotation[0] * 180) / Math.PI, }, [chartMeasurements, chartDuration, widgetName]);
y: (rotation[1] * 180) / Math.PI, const rotationDegrees = {
z: (rotation[2] * 180) / Math.PI, x: (rotation[0] * 180) / Math.PI,
}; y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
const transformStyle = { };
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
}; const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
return ( };
<Html
position={[position[0], position[1], position[2]]} return (
rotation={rotation} <Html
scale={[0.5, 0.5, 0.5]} position={[position[0], position[1], position[2]]}
transform rotation={rotation}
zIndexRange={[1, 0]} scale={[0.5, 0.5, 0.5]}
sprite={false} transform
// style={{ zIndexRange={[1, 0]}
// transform: transformStyle.transform, sprite={false}
// transformStyle: "preserve-3d", // style={{
// transition: "transform 0.1s ease-out", // transform: transformStyle.transform,
// }} // transformStyle: "preserve-3d",
> // transition: "transform 0.1s ease-out",
<div // }}
className={`returnOfInvestment card ${ >
selectedChartId?.id === id ? "activeChart" : "" <div
}`} className={`returnOfInvestment card ${
onClick={() => setSelectedChartId({ id: id, type: type })} selectedChartId?.id === id ? "activeChart" : ""
onContextMenu={onContextMenu} }`}
> onClick={() => setSelectedChartId({ id: id, type: type })}
<div className="header">Return of Investment</div> onContextMenu={onContextMenu}
<div className="lineGraph charts"> >
{/* Smooth curve graph with two datasets */} <div className="header">Return of Investment</div>
<SmoothLineGraphComponent <div className="lineGraph charts">
data={Object.keys(measurements).length > 0 ? chartData : graphData} {/* Smooth curve graph with two datasets */}
options={graphOptions} <SmoothLineGraphComponent
/> data={Object.keys(measurements).length > 0 ? chartData : graphData}
</div> options={graphOptions}
<div className="returns-wrapper"> />
<div className="icon"> </div>
<WavyIcon /> <div className="returns-wrapper">
</div> <div className="icon">
<div className="value">5.78</div> <WavyIcon />
<div className="key">Years</div> </div>
</div> <div className="value">5.78</div>
<div className="footer"> <div className="key">Years</div>
in <span>5y</span> with avg <span>7%</span> yearly return </div>
</div> <div className="footer">
</div> in <span>5y</span> with avg <span>7%</span> yearly return
</Html> </div>
); </div>
}; </Html>
);
export default ReturnOfInvestment; };
export default ReturnOfInvestment;

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

@ -1,203 +1,204 @@
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";
interface StateWorkingProps { // import image from "../../../../assets/image/temp/image.png";
id: string; interface StateWorkingProps {
type: string; id: string;
position: [number, number, number]; type: string;
rotation: [number, number, number]; position: [number, number, number];
Data?:any; rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; Data?:any;
} onContextMenu?: (event: React.MouseEvent) => void;
const StateWorking: React.FC<StateWorkingProps> = ({ }
id, const StateWorking: React.FC<StateWorkingProps> = ({
type, id,
Data, type,
position, Data,
rotation, position,
onContextMenu, rotation,
}) => { onContextMenu,
const { selectedChartId, setSelectedChartId } = useWidgetStore(); }) => {
const { const { selectedChartId, setSelectedChartId } = useWidgetStore();
measurements: chartMeasurements, const {
duration: chartDuration, measurements: chartMeasurements,
name: widgetName, duration: chartDuration,
} = useChartStore(); name: widgetName,
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {}); } = useChartStore();
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [name, setName] = useState("Widget"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [datas, setDatas] = useState<any>({}); const [name, setName] = useState("Widget");
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const [datas, setDatas] = useState<any>({});
const email = localStorage.getItem("email") || ""; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const organization = email?.split("@")[1]?.split(".")[0]; const email = localStorage.getItem("email") || "";
// const datas = [ const organization = email?.split("@")[1]?.split(".")[0];
// { key: "Oil Tank:", value: "24/341" }, // const datas = [
// { key: "Oil Refin:", value: 36.023 }, // { key: "Oil Tank:", value: "24/341" },
// { key: "Transmission:", value: 36.023 }, // { key: "Oil Refin:", value: 36.023 },
// { key: "Fuel:", value: 36732 }, // { key: "Transmission:", value: 36.023 },
// { key: "Power:", value: 1300 }, // { key: "Fuel:", value: 36732 },
// { key: "Time:", value: 13 - 9 - 2023 }, // { key: "Power:", value: 1300 },
// ]; // { key: "Time:", value: 13 - 9 - 2023 },
// ];
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) useEffect(() => {
return; if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
const socket = io(`http://${iotApiUrl}`); return;
const inputData = { const socket = io(`http://${iotApiUrl}`);
measurements, const inputData = {
duration, measurements,
interval: 1000, duration,
}; interval: 1000,
const startStream = () => { };
socket.emit("lastInput", inputData); const startStream = () => {
}; socket.emit("lastInput", inputData);
socket.on("connect", startStream); };
socket.on("lastOutput", (response) => { socket.on("connect", startStream);
const responseData = response; socket.on("lastOutput", (response) => {
const responseData = response;
setDatas(responseData);
}); setDatas(responseData);
});
return () => {
socket.off("lastOutput"); return () => {
socket.emit("stop_stream"); // Stop streaming when component unmounts socket.off("lastOutput");
socket.disconnect(); socket.emit("stop_stream"); // Stop streaming when component unmounts
}; socket.disconnect();
}, [measurements, duration, iotApiUrl]); };
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async () => {
if (id !== "") { const fetchSavedInputes = async () => {
try { if (id !== "") {
const response = await axios.get( try {
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}` const response = await axios.get(
); `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
if (response.status === 200) { );
setmeasurements(response.data.Data.measurements); if (response.status === 200) {
setDuration(response.data.Data.duration); setmeasurements(response.data.Data.measurements);
setName(response.data.widgetName); setDuration(response.data.Data.duration);
} else { setName(response.data.widgetName);
console.log("Unexpected response:", response); } else {
} console.log("Unexpected response:", response);
} catch (error) { }
console.error("There was an error!", error); } catch (error) {
} console.error("There was an error!", error);
} }
}; }
};
useEffect(() => {
fetchSavedInputes(); useEffect(() => {
}, []); fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === id) { useEffect(() => {
fetchSavedInputes(); if (selectedChartId?.id === id) {
} fetchSavedInputes();
}, [chartMeasurements, chartDuration, widgetName]); }
}, [chartMeasurements, chartDuration, widgetName]);
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI, const rotationDegrees = {
y: (rotation[1] * 180) / Math.PI, x: (rotation[0] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI, y: (rotation[1] * 180) / Math.PI,
}; z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`, const transformStyle = {
}; transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
return ( };
<Html return (
position={[position[0], position[1], position[2]]} <Html
rotation={rotation} position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} rotation={rotation}
transform scale={[0.5, 0.5, 0.5]}
zIndexRange={[1, 0]} transform
sprite={false} zIndexRange={[1, 0]}
// style={{ sprite={false}
// transform: transformStyle.transform, // style={{
// transformStyle: "preserve-3d", // transform: transformStyle.transform,
// transition: "transform 0.1s ease-out", // transformStyle: "preserve-3d",
// }} // transition: "transform 0.1s ease-out",
> // }}
<div >
className={`stateWorking-wrapper card ${ <div
selectedChartId?.id === id ? "activeChart" : "" className={`stateWorking-wrapper card ${
}`} selectedChartId?.id === id ? "activeChart" : ""
onClick={() => setSelectedChartId({ id: id, type: type })} }`}
onContextMenu={onContextMenu} onClick={() => setSelectedChartId({ id: id, type: type })}
> onContextMenu={onContextMenu}
<div className="header-wrapper"> >
<div className="header"> <div className="header-wrapper">
<span>State</span> <div className="header">
<span> <span>State</span>
{datas?.input1 ? datas.input1 : "input1"} <span>.</span> <span>
</span> {datas?.input1 ? datas.input1 : "input1"} <span>.</span>
</div> </span>
<div className="img">{/* <img src={image} alt="" /> */}</div> </div>
</div> <div className="img">{/* <img src={image} alt="" /> */}</div>
{/* Data */} </div>
<div className="data-wrapper"> {/* Data */}
{/* {datas.map((data, index) => ( <div className="data-wrapper">
<div className="data-table" key={index}> {/* {datas.map((data, index) => (
<div className="data">{data.key}</div> <div className="data-table" key={index}>
<div className="key">{data.value}</div> <div className="data">{data.key}</div>
</div> <div className="key">{data.value}</div>
))} */} </div>
<div className="data-table"> ))} */}
<div className="data"> <div className="data-table">
{measurements?.input2?.fields <div className="data">
? measurements.input2.fields {measurements?.input2?.fields
: "input2"} ? measurements.input2.fields
</div> : "input2"}
<div className="key">{datas?.input2 ? datas.input2 : "data"}</div> </div>
</div> <div className="key">{datas?.input2 ? datas.input2 : "data"}</div>
<div className="data-table"> </div>
<div className="data"> <div className="data-table">
{measurements?.input3?.fields <div className="data">
? measurements.input3.fields {measurements?.input3?.fields
: "input3"} ? measurements.input3.fields
</div> : "input3"}
<div className="key">{datas?.input3 ? datas.input3 : "data"}</div> </div>
</div> <div className="key">{datas?.input3 ? datas.input3 : "data"}</div>
<div className="data-table"> </div>
<div className="data"> <div className="data-table">
{measurements?.input4?.fields <div className="data">
? measurements.input4.fields {measurements?.input4?.fields
: "input4"} ? measurements.input4.fields
</div> : "input4"}
<div className="key">{datas?.input4 ? datas.input4 : "data"}</div> </div>
</div> <div className="key">{datas?.input4 ? datas.input4 : "data"}</div>
<div className="data-table"> </div>
<div className="data"> <div className="data-table">
{measurements?.input5?.fields <div className="data">
? measurements.input5.fields {measurements?.input5?.fields
: "input5"} ? measurements.input5.fields
</div> : "input5"}
<div className="key">{datas?.input5 ? datas.input5 : "data"}</div> </div>
</div> <div className="key">{datas?.input5 ? datas.input5 : "data"}</div>
<div className="data-table"> </div>
<div className="data"> <div className="data-table">
{measurements?.input6?.fields <div className="data">
? measurements.input6.fields {measurements?.input6?.fields
: "input6"} ? measurements.input6.fields
</div> : "input6"}
<div className="key">{datas?.input6 ? datas.input6 : "data"}</div> </div>
</div> <div className="key">{datas?.input6 ? datas.input6 : "data"}</div>
<div className="data-table"> </div>
<div className="data"> <div className="data-table">
{measurements?.input7?.fields <div className="data">
? measurements.input7.fields {measurements?.input7?.fields
: "input7"} ? measurements.input7.fields
</div> : "input7"}
<div className="key">{datas?.input7 ? datas.input7 : "data"}</div> </div>
</div> <div className="key">{datas?.input7 ? datas.input7 : "data"}</div>
</div> </div>
</div> </div>
</Html> </div>
); </Html>
}; );
};
export default StateWorking;
export default StateWorking;

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

@ -1,268 +1,270 @@
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 { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { import {
Chart as ChartJS, Chart as ChartJS,
CategoryScale, CategoryScale,
LinearScale, LinearScale,
PointElement, PointElement,
LineElement, LineElement,
Title, Title,
Tooltip, Tooltip,
Legend, Legend,
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";
// Register Chart.js components import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
ChartJS.register(
CategoryScale, // Register Chart.js components
LinearScale, ChartJS.register(
PointElement, CategoryScale,
LineElement, LinearScale,
Title, PointElement,
Tooltip, LineElement,
Legend Title,
); Tooltip,
Legend
// Define Props for LineGraphComponent );
interface LineGraphProps {
data: ChartData<"line">; // Type for chart data // Define Props for LineGraphComponent
options?: ChartOptions<"line">; // Type for chart options (optional) interface LineGraphProps {
} data: ChartData<"line">; // Type for chart data
options?: ChartOptions<"line">; // Type for chart options (optional)
// LineGraphComponent using react-chartjs-2 }
const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
return <Line data={data} options={options} />; // LineGraphComponent using react-chartjs-2
}; const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
return <Line data={data} options={options} />;
interface ThroughputProps { };
id: string;
type: string; interface ThroughputProps {
position: [number, number, number]; id: string;
rotation: [number, number, number]; type: string;
Data?:any; position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; rotation: [number, number, number];
} Data?:any;
onContextMenu?: (event: React.MouseEvent) => void;
const Throughput: React.FC<ThroughputProps> = ({ }
id,
type, const Throughput: React.FC<ThroughputProps> = ({
Data, id,
position, type,
rotation, Data,
onContextMenu, position,
}) => { rotation,
const { selectedChartId, setSelectedChartId } = useWidgetStore(); onContextMenu,
const { }) => {
measurements: chartMeasurements, const { selectedChartId, setSelectedChartId } = useWidgetStore();
duration: chartDuration, const {
name: widgetName, measurements: chartMeasurements,
} = useChartStore(); duration: chartDuration,
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {}); name: widgetName,
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h"); } = useChartStore();
const [name, setName] = useState("Widget"); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [chartData, setChartData] = useState<{ const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
labels: string[]; const [name, setName] = useState("Widget");
datasets: any[]; const [chartData, setChartData] = useState<{
}>({ labels: string[];
labels: [], datasets: any[];
datasets: [], }>({
}); labels: [],
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; datasets: [],
const email = localStorage.getItem("email") || ""; });
const organization = email?.split("@")[1]?.split(".")[0]; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const email = localStorage.getItem("email") || "";
// Sample data for the line graph const organization = email?.split("@")[1]?.split(".")[0];
const graphData: ChartData<"line"> = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], // Sample data for the line graph
datasets: [ const graphData: ChartData<"line"> = {
{ labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
label: "Throughput", datasets: [
data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values {
borderColor: "rgba(75, 192, 192, 1)", label: "Throughput",
backgroundColor: "rgba(75, 192, 192, 0.2)", data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
fill: true, borderColor: "rgba(75, 192, 192, 1)",
}, backgroundColor: "rgba(75, 192, 192, 0.2)",
], fill: true,
}; },
],
// Options for the line graph };
const graphOptions: ChartOptions<"line"> = {
responsive: true, // Options for the line graph
plugins: { const graphOptions: ChartOptions<"line"> = {
legend: { responsive: true,
position: "top", plugins: {
display: false, legend: {
}, position: "top",
title: { display: false,
display: true, },
text: "Throughput Over Time", title: {
}, display: true,
}, text: "Throughput Over Time",
scales: { },
x: { },
grid: { scales: {
display: true, // Show vertical grid lines x: {
}, grid: {
ticks: { display: true, // Show vertical grid lines
display: false, // Hide x-axis labels },
}, ticks: {
}, display: false, // Hide x-axis labels
y: { },
grid: { },
display: false, // Hide horizontal grid lines y: {
}, grid: {
ticks: { display: false, // Hide horizontal grid lines
display: false, // Hide y-axis labels },
}, ticks: {
}, display: false, // Hide y-axis labels
}, },
}; },
},
useEffect(() => { };
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return; useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
const socket = io(`http://${iotApiUrl}`); return;
const inputData = { const socket = io(`http://${iotApiUrl}`);
measurements,
duration, const inputData = {
interval: 1000, measurements,
}; duration,
interval: 1000,
const startStream = () => { };
socket.emit("lineInput", inputData);
}; const startStream = () => {
socket.emit("lineInput", inputData);
socket.on("connect", startStream); };
socket.on("lineOutput", (response) => { socket.on("connect", startStream);
const responseData = response.data;
socket.on("lineOutput", (response) => {
// Extract timestamps and values const responseData = response.data;
const labels = responseData.time;
const datasets = Object.keys(measurements).map((key) => { // Extract timestamps and values
const measurement = measurements[key]; const labels = responseData.time;
const datasetKey = `${measurement.name}.${measurement.fields}`; const datasets = Object.keys(measurements).map((key) => {
return { const measurement = measurements[key];
label: datasetKey, const datasetKey = `${measurement.name}.${measurement.fields}`;
data: responseData[datasetKey]?.values ?? [], return {
borderColor: "rgba(75, 192, 192, 1)", label: datasetKey,
backgroundColor: "rgba(75, 192, 192, 0.2)", data: responseData[datasetKey]?.values ?? [],
fill: true, borderColor: "rgba(75, 192, 192, 1)",
}; backgroundColor: "rgba(75, 192, 192, 0.2)",
}); fill: true,
};
setChartData({ labels, datasets }); });
});
setChartData({ labels, datasets });
return () => { });
socket.off("lineOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts return () => {
socket.disconnect(); socket.off("lineOutput");
}; socket.emit("stop_stream"); // Stop streaming when component unmounts
}, [measurements, duration, iotApiUrl]); socket.disconnect();
};
const fetchSavedInputes = async () => { }, [measurements, duration, iotApiUrl]);
if (id !== "") {
try { const fetchSavedInputes = async () => {
const response = await axios.get( if (id !== "") {
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}` try {
); const response = await axios.get(
if (response.status === 200) { `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
setmeasurements(response.data.Data.measurements); );
setDuration(response.data.Data.duration); if (response.status === 200) {
setName(response.data.widgetName); setmeasurements(response.data.Data.measurements);
} else { setDuration(response.data.Data.duration);
console.log("Unexpected response:", response); setName(response.data.widgetName);
} } else {
} catch (error) { console.log("Unexpected response:", response);
console.error("There was an error!", error); }
} } catch (error) {
} console.error("There was an error!", error);
}; }
}
useEffect(() => { };
fetchSavedInputes();
}, []); useEffect(() => {
fetchSavedInputes();
useEffect(() => { }, []);
if (selectedChartId?.id === id) {
fetchSavedInputes(); useEffect(() => {
} if (selectedChartId?.id === id) {
}, [chartMeasurements, chartDuration, widgetName]); fetchSavedInputes();
const rotationDegrees = { }
x: (rotation[0] * 180) / Math.PI, }, [chartMeasurements, chartDuration, widgetName]);
y: (rotation[1] * 180) / Math.PI, const rotationDegrees = {
z: (rotation[2] * 180) / Math.PI, x: (rotation[0] * 180) / Math.PI,
}; y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
const transformStyle = { };
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
}; const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
return ( };
<Html
position={[position[0], position[1], position[2]]} return (
rotation={rotation} <Html
scale={[0.5, 0.5, 0.5]} position={[position[0], position[1], position[2]]}
transform rotation={rotation}
zIndexRange={[1, 0]} scale={[0.5, 0.5, 0.5]}
sprite={false} transform
// style={{ zIndexRange={[1, 0]}
// transform: transformStyle.transform, sprite={false}
// transformStyle: "preserve-3d", // style={{
// transition: "transform 0.1s ease-out", // transform: transformStyle.transform,
// }} // transformStyle: "preserve-3d",
> // transition: "transform 0.1s ease-out",
<div // }}
className={`throughput-wrapper card ${ >
selectedChartId?.id === id ? "activeChart" : "" <div
}`} className={`throughput-wrapper card ${
onClick={() => setSelectedChartId({ id: id, type: type })} selectedChartId?.id === id ? "activeChart" : ""
onContextMenu={onContextMenu} }`}
> onClick={() => setSelectedChartId({ id: id, type: type })}
<div className="header">{name}</div> onContextMenu={onContextMenu}
<div className="display-value"> >
<div className="left"> <div className="header">{name}</div>
<div className="icon"> <div className="display-value">
<ThroughputIcon /> <div className="left">
</div> <div className="icon">
<div className="value-container"> <ThroughputIcon />
<div className="value-wrapper"> </div>
<div className="value">1,200</div> <div className="value-container">
<div className="key"> Units/hr</div> <div className="value-wrapper">
</div> <div className="value">1,200</div>
<div className="total-sales"> <div className="key"> Units/hr</div>
<div className="value">316</div> </div>
<div className="key">sales</div> <div className="total-sales">
</div> <div className="value">316</div>
</div> <div className="key">sales</div>
</div> </div>
<div className="right"> </div>
<div className="percent-increase">5.77%</div> </div>
</div> <div className="right">
</div> <div className="percent-increase">5.77%</div>
<div className="line-graph"> </div>
{/* Line graph using react-chartjs-2 */} </div>
<LineGraphComponent <div className="line-graph">
data={Object.keys(measurements).length > 0 ? chartData : graphData} {/* Line graph using react-chartjs-2 */}
options={graphOptions} <LineGraphComponent
/> data={Object.keys(measurements).length > 0 ? chartData : graphData}
</div> options={graphOptions}
<div className="footer"> />
You made an extra <span className="value">$1256.13</span> this month </div>
</div> <div className="footer">
</div> You made an extra <span className="value">$1256.13</span> this month
</Html> </div>
); </div>
}; </Html>
);
export default Throughput; };
export default Throughput;

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;

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

@ -1,49 +1,49 @@
const FleetEfficiency = () => { const FleetEfficiency = () => {
const progress = 50; // Example progress value (0-100) const progress = 50; // Example progress value (0-100)
// Calculate the rotation angle for the progress bar // Calculate the rotation angle for the progress bar
const rotationAngle = 45 + progress * 1.8; const rotationAngle = 45 + progress * 1.8;
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({
className: event.currentTarget.className, className: event.currentTarget.className,
position: [rect.top, rect.left], // Store position position: [rect.top, rect.left], // Store position
value: rotationAngle, // Example value (you can change if dynamic) value: rotationAngle, // Example value (you can change if dynamic)
per: progress, per: progress,
}); });
event.dataTransfer.setData("text/plain", cardData); event.dataTransfer.setData("text/plain", cardData);
}; };
return ( return (
<div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}> <div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}>
<h2 className="header">Fleet Efficiency</h2> <h2 className="header">Fleet Efficiency</h2>
<div className="progressContainer"> <div className="progressContainer">
<div className="progress"> <div className="progress">
<div className="barOverflow"> <div className="barOverflow">
{/* Apply dynamic rotation to the bar */} {/* Apply dynamic rotation to the bar */}
<div <div
className="bar" className="bar"
style={{ transform: `rotate(${rotationAngle}deg)` }} style={{ transform: `rotate(${rotationAngle}deg)` }}
></div> ></div>
</div> </div>
</div> </div>
</div> </div>
<div className="scaleLabels"> <div className="scaleLabels">
<span>0%</span> <span>0%</span>
<div className="centerText"> <div className="centerText">
<div className="percentage">{progress}%</div> <div className="percentage">{progress}%</div>
<div className="status">Optimal</div> <div className="status">Optimal</div>
</div> </div>
<span>100%</span> <span>100%</span>
</div> </div>
</div> </div>
); );
}; };
export default FleetEfficiency; export default FleetEfficiency;

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";

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

@ -1,86 +1,86 @@
import React from "react"; import React from "react";
interface ProductivityData { interface ProductivityData {
distancePerTask: number; distancePerTask: number;
spaceUtilization: number; spaceUtilization: number;
taskCompletionTime: string; taskCompletionTime: string;
} }
const ProductivityDashboard: React.FC = () => { const ProductivityDashboard: React.FC = () => {
const data: ProductivityData = { const data: ProductivityData = {
distancePerTask: 45, distancePerTask: 45,
spaceUtilization: 72, spaceUtilization: 72,
taskCompletionTime: "7:44", taskCompletionTime: "7:44",
}; };
// Function to calculate the stroke dash offset for the circular progress // Function to calculate the stroke dash offset for the circular progress
const calculateDashOffset = (percentage: number, circumference: number) => { const calculateDashOffset = (percentage: number, circumference: number) => {
return circumference - (percentage / 100) * circumference; return circumference - (percentage / 100) * circumference;
}; };
// Constants for the circular progress chart // Constants for the circular progress chart
const radius = 60; // Radius of the circle const radius = 60; // Radius of the circle
const strokeWidth = 10; // Thickness of the stroke const strokeWidth = 10; // Thickness of the stroke
const diameter = radius * 2; // Diameter of the circle const diameter = radius * 2; // Diameter of the circle
const circumference = Math.PI * (radius * 2); // Circumference of the circle const circumference = Math.PI * (radius * 2); // Circumference of the circle
return ( return (
<div className="productivity-dashboard"> <div className="productivity-dashboard">
<header> <header>
<h2>Productivity</h2> <h2>Productivity</h2>
<div className="options">...</div> <div className="options">...</div>
</header> </header>
<main> <main>
<section className="metrics"> <section className="metrics">
<div className="metric"> <div className="metric">
<p className="label">Distance per Task</p> <p className="label">Distance per Task</p>
<p className="value">{data.distancePerTask} m</p> <p className="value">{data.distancePerTask} m</p>
</div> </div>
<div className="metric"> <div className="metric">
<p className="label">Space Utilization</p> <p className="label">Space Utilization</p>
<p className="value">{data.spaceUtilization}%</p> <p className="value">{data.spaceUtilization}%</p>
</div> </div>
</section> </section>
<section className="chart-section"> <section className="chart-section">
<svg <svg
className="progress-circle" className="progress-circle"
width={diameter} width={diameter}
height={diameter} height={diameter}
viewBox={`0 0 ${diameter} ${diameter}`} viewBox={`0 0 ${diameter} ${diameter}`}
> >
{/* Background Circle */} {/* Background Circle */}
<circle <circle
cx={radius} cx={radius}
cy={radius} cy={radius}
r={radius - strokeWidth / 2} r={radius - strokeWidth / 2}
fill="transparent" fill="transparent"
stroke="#6c757d" stroke="#6c757d"
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
/> />
{/* Progress Circle */} {/* Progress Circle */}
<circle <circle
cx={radius} cx={radius}
cy={radius} cy={radius}
r={radius - strokeWidth / 2} r={radius - strokeWidth / 2}
fill="transparent" fill="transparent"
stroke="#2ecc71" stroke="#2ecc71"
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
strokeDasharray={circumference} strokeDasharray={circumference}
strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)} strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)}
strokeLinecap="round" strokeLinecap="round"
transform={`rotate(-90 ${radius} ${radius})`} transform={`rotate(-90 ${radius} ${radius})`}
/> />
</svg> </svg>
<div className="chart-details"> <div className="chart-details">
<p className="title">Task Completion Time</p> <p className="title">Task Completion Time</p>
<p className="time">{data.taskCompletionTime}</p> <p className="time">{data.taskCompletionTime}</p>
<p className="subtitle">Total Score</p> <p className="subtitle">Total Score</p>
</div> </div>
</section> </section>
</main> </main>
</div> </div>
); );
}; };
export default ProductivityDashboard; export default ProductivityDashboard;

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

@ -1,55 +1,58 @@
import React from "react"; 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
value: string; iconName?: string;
per: string; // Percentage change value: string;
position?: [number, number]; per: string; // Percentage change
} position?: [number, number];
}
const SimpleCard: React.FC<SimpleCardProps> = ({
header, const SimpleCard: React.FC<SimpleCardProps> = ({
icon: Icon, header,
value, icon: Icon,
per, iconName,
position = [0, 0], value,
}) => { per,
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => { position = [0, 0],
const rect = event.currentTarget.getBoundingClientRect(); // Get position }) => {
const cardData = JSON.stringify({ const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
header, const rect = event.currentTarget.getBoundingClientRect(); // Get position
value,
per, const cardData = JSON.stringify({
icon: Icon, header,
value,
className: event.currentTarget.className, per,
position: [rect.top, rect.left], // ✅ Store position iconName: iconName || "UnknownIcon", // Use the custom iconName
}); className: event.currentTarget.className,
position: [rect.top, rect.left], // ✅ Store position
event.dataTransfer.setData("text/plain", cardData); });
};
event.dataTransfer.setData("text/plain", cardData);
return ( console.log("cardData: ", cardData);
<div };
className="floating total-card"
draggable return (
onDragStart={handleDragStart} <div
style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed className="floating total-card"
> draggable
<div className="header-wrapper"> onDragStart={handleDragStart}
<div className="header">{header}</div> style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed
<div className="data-values"> >
<div className="value">{value}</div> <div className="header-wrapper">
<div className="per">{per}</div> <div className="header">{header}</div>
</div> <div className="data-values">
</div> <div className="value">{value}</div>
<div className="per">{per}</div>
<div className="icon"> </div>
<Icon /> </div>
</div>
</div> <div className="icon">
); <Icon />
}; </div>
</div>
export default SimpleCard; );
};
export default SimpleCard;

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>
</> </>
); );
}; };

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

@ -1,149 +1,149 @@
import React from "react"; import React from "react";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { import {
Chart as ChartJS, Chart as ChartJS,
CategoryScale, CategoryScale,
LinearScale, LinearScale,
PointElement, PointElement,
LineElement, LineElement,
Title, Title,
Tooltip, Tooltip,
Legend, Legend,
Filler, // Import Filler for area fill Filler, // Import Filler for area fill
} from "chart.js"; } from "chart.js";
// Register ChartJS components // Register ChartJS components
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
LinearScale, LinearScale,
PointElement, PointElement,
LineElement, LineElement,
Title, Title,
Tooltip, Tooltip,
Legend, Legend,
Filler Filler
); );
const WarehouseThroughput = () => { const WarehouseThroughput = () => {
// Line graph data for a year (monthly throughput) // Line graph data for a year (monthly throughput)
const lineGraphData = { const lineGraphData = {
labels: [ labels: [
"Jan", "Jan",
"Feb", "Feb",
"Mar", "Mar",
"Apr", "Apr",
"May", "May",
"Jun", "Jun",
"Jul", "Jul",
"Aug", "Aug",
"Sep", "Sep",
"Oct", "Oct",
"Nov", "Nov",
"Dec", "Dec",
], // Months of the year ], // Months of the year
datasets: [ datasets: [
{ {
label: "Throughput (units/month)", label: "Throughput (units/month)",
data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
borderColor: "#6f42c1", // Use the desired color for the line (purple) borderColor: "#6f42c1", // Use the desired color for the line (purple)
backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
borderWidth: 2, // Line thickness borderWidth: 2, // Line thickness
fill: true, // Enable fill for this dataset fill: true, // Enable fill for this dataset
pointRadius: 0, // Remove dots at each data point pointRadius: 0, // Remove dots at each data point
tension: 0.5, // Smooth interpolation for the line tension: 0.5, // Smooth interpolation for the line
}, },
], ],
}; };
// Line graph options // Line graph options
const lineGraphOptions = { const lineGraphOptions = {
responsive: true, responsive: true,
maintainAspectRatio: false, // Allow custom height/width adjustments maintainAspectRatio: false, // Allow custom height/width adjustments
plugins: { plugins: {
legend: { legend: {
display: false, // Hide legend display: false, // Hide legend
}, },
title: { title: {
display: false, // No chart title needed display: false, // No chart title needed
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
label: (context: any) => { label: (context: any) => {
const value = context.parsed.y; const value = context.parsed.y;
return `${value} units`; // Customize tooltip to display "units" return `${value} units`; // Customize tooltip to display "units"
}, },
}, },
}, },
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
display: false, // Hide x-axis grid lines display: false, // Hide x-axis grid lines
}, },
ticks: { ticks: {
maxRotation: 0, // Prevent label rotation maxRotation: 0, // Prevent label rotation
autoSkip: false, // Display all months autoSkip: false, // Display all months
font: { font: {
size: 8, // Adjust font size for readability size: 8, // Adjust font size for readability
color: "#ffffff", // Light text color for labels color: "#ffffff", // Light text color for labels
}, },
}, },
}, },
y: { y: {
display: true, // Show y-axis display: true, // Show y-axis
grid: { grid: {
drawBorder: false, // Remove border line drawBorder: false, // Remove border line
color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths) borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
}, },
ticks: { ticks: {
font: { font: {
size: 8, // Adjust font size for readability size: 8, // Adjust font size for readability
color: "#ffffff", // Light text color for ticks color: "#ffffff", // Light text color for ticks
}, },
}, },
}, },
}, },
elements: { elements: {
line: { line: {
tension: 0.5, // Smooth interpolation for the line tension: 0.5, // Smooth interpolation for the line
}, },
}, },
}; };
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => { const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
const rect = event.currentTarget.getBoundingClientRect(); // Get element position const rect = event.currentTarget.getBoundingClientRect(); // Get element position
const cardData = JSON.stringify({ const cardData = JSON.stringify({
header: "Warehouse Throughput", // Static header header: "Warehouse Throughput", // Static header
value: "+5", // Example value (you can change if dynamic) value: "+5", // Example value (you can change if dynamic)
per: "2025", // Example percentage or date per: "2025", // Example percentage or date
icon: "📊", // Placeholder for an icon (if needed) icon: "📊", // Placeholder for an icon (if needed)
className: event.currentTarget.className, className: event.currentTarget.className,
position: [rect.top, rect.left], // ✅ Store initial position position: [rect.top, rect.left], // ✅ Store initial position
lineGraphData, // ✅ Include chart data lineGraphData, // ✅ Include chart data
lineGraphOptions, // ✅ Include chart options lineGraphOptions, // ✅ Include chart options
}); });
event.dataTransfer.setData("text/plain", cardData); event.dataTransfer.setData("text/plain", cardData);
// event.dataTransfer.effectAllowed = "move"; // Improve drag effect // event.dataTransfer.effectAllowed = "move"; // Improve drag effect
}; };
return ( return (
<div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}> <div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}>
<div className="header"> <div className="header">
<h2>Warehouse Throughput</h2> <h2>Warehouse Throughput</h2>
<p> <p>
<span>(+5) more</span> in 2025 <span>(+5) more</span> in 2025
</p> </p>
</div> </div>
<div className="lineGraph" style={{ height: "100%" }}> <div className="lineGraph" style={{ height: "100%" }}>
{/* Line Graph */} {/* Line Graph */}
<Line data={lineGraphData} options={lineGraphOptions} /> <Line data={lineGraphData} options={lineGraphOptions} />
</div> </div>
</div> </div>
); );
}; };
export default WarehouseThroughput; export default WarehouseThroughput;

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 {

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

@ -130,13 +130,15 @@
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.widget-left-sideBar { .widgets-wrapper {
.widgets-wrapper {
min-height: 50vh;
max-height: 60vh;
overflow: auto;
}
.widget-left-sideBar {
min-height: 50vh;
max-height: 60vh;
overflow: auto;
}
.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 {
@ -1257,4 +1271,4 @@
.assets-wrapper { .assets-wrapper {
margin: 0; margin: 0;
} }
} }