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

merged to main

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-11 18:44:48 +05:30
parent 4edb3cfd7d c7c35e288a
commit 513d4d0958
30 changed files with 1273 additions and 1079 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@@ -19,6 +19,7 @@ import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { useSocketStore } from "../../../../store/store";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import OuterClick from "../../../../utils/outerClick";
import useChartStore from "../../../../store/useChartStore";
type Side = "top" | "bottom" | "left" | "right";
@@ -81,6 +82,16 @@ export const DraggableWidget = ({
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
}>({});
const { measurements, duration, name } = useChartStore();
const { isPlaying } = usePlayButtonStore();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
useEffect(() => {
console.log("changes loggggg", measurements, duration, name);
}, [measurements, duration, name])
const handlePointerDown = () => {
if (selectedChartId?.id !== widget.id) {
setSelectedChartId(widget);
@@ -128,40 +139,50 @@ export const DraggableWidget = ({
}
};
// Calculate panel size
const panelSize = Math.max(
Math.min(canvasDimensions.width * 0.25, canvasDimensions.height * 0.25),
170 // Min 170px
);
const getCurrentWidgetCount = (panel: Side) =>
selectedZone.widgets.filter((w) => w.panel === panel).length;
// Calculate panel capacity
const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = 150;
const CHART_HEIGHT = 150;
const FALLBACK_HORIZONTAL_CAPACITY = 5;
const FALLBACK_VERTICAL_CAPACITY = 3;
const CHART_WIDTH = panelSize;
const CHART_HEIGHT = panelSize;
const dimensions = panelDimensions[panel];
if (!dimensions) {
return panel === "top" || panel === "bottom"
? FALLBACK_HORIZONTAL_CAPACITY
: FALLBACK_VERTICAL_CAPACITY;
return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities
}
return panel === "top" || panel === "bottom"
? Math.floor(dimensions.width / CHART_WIDTH)
: Math.floor(dimensions.height / CHART_HEIGHT);
? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH))
: Math.max(1, Math.floor(dimensions.height / CHART_HEIGHT));
};
const isPanelFull = (panel: Side) => {
const currentWidgetCount = getCurrentWidgetCount(panel);
const panelCapacity = calculatePanelCapacity(panel);
return currentWidgetCount >= panelCapacity;
return currentWidgetCount > panelCapacity;
};
const duplicateWidget = async () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
console.log("widget data sent", widget);
const duplicatedWidget: Widget = {
...widget,
Data: {
duration: duration,
measurements: { ...measurements }
},
id: `${widget.id}-copy-${Date.now()}`,
};
console.log("duplicatedWidget: ", duplicatedWidget);
@@ -172,6 +193,8 @@ export const DraggableWidget = ({
widget: duplicatedWidget,
};
if (visualizationSocket) {
console.log("duplecate widget", duplicateWidget);
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
}
setSelectedZone((prevZone: any) => ({
@@ -244,12 +267,7 @@ export const DraggableWidget = ({
// useClickOutside(chartWidget, () => {
// setSelectedChartId(null);
// });
const { isPlaying } = usePlayButtonStore();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
// Track canvas dimensions
// Current: Two identical useEffect hooks for canvas dimensions
@@ -287,9 +305,8 @@ export const DraggableWidget = ({
<div
draggable
key={widget.id}
className={`chart-container ${
selectedChartId?.id === widget.id && !isPlaying && "activeChart"
}`}
className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
}`}
onPointerDown={handlePointerDown}
onDragStart={handleDragStart}
onDragEnter={handleDragEnter}
@@ -315,10 +332,9 @@ export const DraggableWidget = ({
{openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}>
<div
className={`edit btn ${
isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={duplicateWidget}
>
<div className="icon">
<DublicateIcon />

22
app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
View File

@@ -1,5 +1,5 @@
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 axios from "axios";
@@ -16,7 +16,7 @@ interface ChartComponentProps {
fontWeight?: "Light" | "Regular" | "Bold";
}
const DoughnutGraphComponent = ({
const LineGraphComponent = ({
id,
type,
title,
@@ -52,7 +52,7 @@ const DoughnutGraphComponent = ({
};
useEffect(() => {
},[])
// Memoize Theme Colors
@@ -97,11 +97,11 @@ const DoughnutGraphComponent = ({
},
},
scales: {
// x: {
// ticks: {
// display: true, // This hides the x-axis labels
// },
// },
x: {
ticks: {
display: true, // This hides the x-axis labels
},
},
},
}),
[title, chartFontStyle, name]
@@ -161,6 +161,8 @@ const DoughnutGraphComponent = ({
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) {
console.log('line chart res',response);
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.widgetName)
@@ -184,7 +186,7 @@ const DoughnutGraphComponent = ({
}
,[chartMeasurements, chartDuration, widgetName])
return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
};
export default DoughnutGraphComponent;
export default LineGraphComponent;

326
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@@ -13,6 +13,8 @@ import ProductionCapacity from "./cards/ProductionCapacity";
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
import StateWorking from "./cards/StateWorking";
import Throughput from "./cards/Throughput";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
@@ -45,10 +47,14 @@ export default function Dropped3dWidgets() {
const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const { setSelectedChartId } = useWidgetStore();
const { measurements, duration} = useChartStore();
let [floorPlanesVertical, setFloorPlanesVertical] = useState(
new THREE.Plane(new THREE.Vector3(0, 1, 0))
);
const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
const [horizontalX, setHorizontalX] = useState<number | undefined>();
const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => {
@@ -165,26 +171,30 @@ export default function Dropped3dWidgets() {
};
const onDrop = (event: any) => {
event.preventDefault();
event.stopPropagation();
hasEntered.current = false;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = createdWidgetRef.current;
if (!newWidget || !widgetSelect.startsWith("ui")) return;
// ✅ Extract 2D drop position
const [x, , z] = newWidget.position;
let [x, y, z] = newWidget.position;
// ✅ Clamp Y to at least 0
y = Math.max(y, 0);
newWidget.position = [x, y, z];
// ✅ Prepare polygon from selectedZone.points
const points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const isInside = isPointInPolygon([x, z], zonePolygonXZ);
// ✅ Remove temp widget
const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
@@ -194,26 +204,29 @@ export default function Dropped3dWidgets() {
[selectedZone.zoneId]: cleanedWidgets,
},
}));
// (Optional) Prevent adding if dropped outside zone
// if (!isInside) {
// createdWidgetRef.current = null;
// return; // Stop here
// return;
// }
// ✅ Add widget if inside polygon
// ✅ Add widget
addWidget(selectedZone.zoneId, newWidget);
const add3dWidget = {
organization,
widget: newWidget,
zoneId: selectedZone.zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
}
createdWidgetRef.current = null;
};
canvasElement.addEventListener("dragenter", handleDragEnter);
@@ -237,8 +250,10 @@ export default function Dropped3dWidgets() {
const widgetToDuplicate = activeZoneWidgets.find(
(w: WidgetData) => w.id === rightClickSelected
);
console.log("3d widget to duplecate", widgetToDuplicate);
if (!widgetToDuplicate) return;
const newWidget: WidgetData = {
const newWidget: any = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
@@ -247,6 +262,10 @@ export default function Dropped3dWidgets() {
widgetToDuplicate.position[2] + 0.5,
],
rotation: widgetToDuplicate.rotation || [0, 0, 0],
Data:{
measurements: measurements,
duration: duration
},
};
const adding3dWidget = {
organization: organization,
@@ -319,28 +338,40 @@ export default function Dropped3dWidgets() {
return inside;
}
const [prevX, setPrevX] = useState(0);
useEffect(() => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZoneId = Object.keys(zoneWidgetData).find(
(zoneId: string) =>
zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected
)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (!selectedWidget) return
// let points = [];
// points.push(new THREE.Vector3(0, 0, 0));
// points.push(new THREE.Vector3(0, selectedWidget.position[1], 0));
// const newgeometry = new THREE.BufferGeometry().setFromPoints(points);
// let vector = new THREE.Vector3();
// camera.getWorldDirection(vector);
// let cameraDirection = vector;
// let newPlane = new THREE.Plane(cameraDirection);
// floorPlanesVertical = newPlane;
// setFloorPlanesVertical(newPlane);
// const intersect1 = raycaster?.ray?.intersectPlane(
// floorPlanesVertical,
// planeIntersect.current
// );
// setintersectcontextmenu(intersect1.y);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
// Plane normal should be perpendicular to screen (XZ move), so use screen right direction
const right = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
cameraDirection.y = 0;
cameraDirection.normalize();
right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
// Create a plane that allows vertical movement
const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
setFloorPlanesVertical(verticalPlane);
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
@@ -358,6 +389,7 @@ export default function Dropped3dWidgets() {
rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
}
}
};
const handleMouseMove = (event: MouseEvent) => {
@@ -380,90 +412,110 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
const points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const newPosition: [number, number, number] = [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z,
];
const isInside = isPointInPolygon(
[newPosition[0], newPosition[2]],
zonePolygonXZ
);
// if (isInside) {
if (rightSelect === "Horizontal Move") {
const intersect = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
if (
intersect &&
typeof horizontalX === "number" &&
typeof horizontalZ === "number"
) {
const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
const newPosition: [number, number, number] = [
intersect.x + horizontalX,
selectedWidget.position[1],
intersect.z + horizontalZ,
];
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
// }
}
}
if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
const currentY = selectedWidget.position[1];
const newY = planeIntersect.current.y;
console.log('planeIntersect.current: ', planeIntersect.current);
const deltaY = newY - currentY;
// Reject if jump is too large (safety check)
if (Math.abs(deltaY) > 200) return;
// Clamp jump or apply smoothing
const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10);
if (clampedY > 0) {
updateWidgetPosition(selectedZoneId, rightClickSelected, [
selectedWidget.position[0],
clampedY,
selectedWidget.position[2],
]);
}
const intersect = raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current);
if (intersect && typeof intersectcontextmenu === "number") {
const diff = intersect.y - intersectcontextmenu;
const unclampedY = selectedWidget.position[1] + diff;
const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
setintersectcontextmenu(intersect.y);
const newPosition: [number, number, number] = [
selectedWidget.position[0],
newY,
selectedWidget.position[2],
];
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
}
}
if (rightSelect?.startsWith("Rotate")) {
const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const index = axis === "x" ? 0 : axis === "y" ? 1 : 2;
const currentRotation = selectedWidget.rotation as [number, number, number]; // assert type
const newRotation: [number, number, number] = [...currentRotation];
newRotation[index] += 0.05 * sign;
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
// if (rightSelect === "RotateX") {
//
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
//
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
//
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0] + 0.05 * sign,
// selectedWidget.rotation[1],
// selectedWidget.rotation[2],
// ];
// updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
// }
// }
// if (rightSelect === "RotateY") {
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0],
// selectedWidget.rotation[1] + 0.05 * sign,
// selectedWidget.rotation[2],
// ];
if (rightSelect === "RotateX") {
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] + 0.05 * sign,
selectedWidget.rotation[1],
selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
// updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
// }
// }
// if (rightSelect === "RotateZ") {
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0],
// selectedWidget.rotation[1],
// selectedWidget.rotation[2] + 0.05 * sign,
// ];
if (rightSelect === "RotateY") {
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1]+ 0.05 * sign,
selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
if (rightSelect === "RotateZ") {
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1],
selectedWidget.rotation[2]+ 0.05 * sign,
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
// updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
// }
// }
};
const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return;
@@ -513,7 +565,7 @@ export default function Dropped3dWidgets() {
const rotation = selectedWidget.rotation || [0, 0, 0];
let lastRotation = formatValues(rotation) as [number, number, number];
// (async () => {
// let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
//
@@ -552,11 +604,60 @@ export default function Dropped3dWidgets() {
};
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
const handleRightClick3d = (event: React.MouseEvent, id: string) => {
event.preventDefault();
const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
setEditWidgetOptions(true);
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === id)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === id);
if (!selectedWidget) return;
const { top, left, width, height } = canvasElement.getBoundingClientRect();
mouse.x = ((event.clientX - left) / width) * 2 - 1;
mouse.y = -((event.clientY - top) / height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
const verticalPlane = new THREE.Plane(cameraDirection);
setFloorPlanesVertical(verticalPlane);
const intersectPoint = raycaster.ray.intersectPlane(verticalPlane, planeIntersect.current);
if (intersectPoint) {
setintersectcontextmenu(intersectPoint.y);
}
const intersect2 = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
if (intersect2) {
const xDiff = -intersect2.x + selectedWidget.position[0];
const zDiff = -intersect2.z + selectedWidget.position[2];
setHorizontalX(xDiff);
setHorizontalZ(zDiff);
}
};
return (
<>
{activeZoneWidgets.map(
({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
({ id, type, position, Data, rotation = [0, 0, 0] }: any) => {
const handleRightClick = (event: React.MouseEvent, id: string) => {
setSelectedChartId({ id: id, type: type })
event.preventDefault();
const canvasElement = document.getElementById(
"real-time-vis-canvas"
@@ -569,6 +670,7 @@ export default function Dropped3dWidgets() {
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
handleRightClick3d(event, id)
};
switch (type) {
@@ -580,6 +682,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@@ -591,6 +694,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@@ -602,6 +706,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@@ -613,6 +718,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);

22
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@@ -31,6 +31,7 @@ interface ProductionCapacityProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?: any,
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
}
@@ -38,6 +39,7 @@ interface ProductionCapacityProps {
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@@ -48,8 +50,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];
@@ -173,7 +175,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
setName(response.data.widgetName);
} else {
}
} catch (error) {}
} catch (error) { }
}
};
@@ -187,9 +189,12 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}
}, [chartMeasurements, chartDuration, widgetName]);
useEffect(() => {}, [rotation]);
useEffect(() => { }, [rotation]);
return (
<Html
position={position}
scale={[0.5, 0.5, 0.5]}
@@ -211,20 +216,20 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
// e.stopPropagation();
}}
wrapperClass="pointer-none"
>
<div
className={`productionCapacity-wrapper card ${
selectedChartId?.id === id ? "activeChart" : ""
}`}
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
style={{
width: "300px", // Original width
height: "300px", // Original height
// transform: transformStyle.transform,
transformStyle: "preserve-3d",
position: "absolute",
transform: "translate(-50%, -50%)",
transform:'translate(-50%, -50%)',
}}
>
<div className="headeproductionCapacityr-wrapper">
@@ -258,6 +263,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
</div>
</div>
</Html>
);
};

7
app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@@ -12,6 +12,7 @@ import {
ChartOptions,
} from "chart.js";
import axios from "axios";
import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
@@ -45,11 +46,13 @@ interface ReturnOfInvestmentProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?: any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@@ -60,8 +63,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];

8
app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@@ -12,11 +12,13 @@ interface StateWorkingProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const StateWorking: React.FC<StateWorkingProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@@ -27,8 +29,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [datas, setDatas] = useState<any>({});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
@@ -114,7 +116,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite={false}
sprite={false}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",

7
app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@@ -14,6 +14,7 @@ import {
ChartOptions,
} from "chart.js";
import axios from "axios";
import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore";
@@ -47,12 +48,14 @@ interface ThroughputProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void;
}
const Throughput: React.FC<ThroughputProps> = ({
id,
type,
Data,
position,
rotation,
onContextMenu,
@@ -63,8 +66,8 @@ const Throughput: React.FC<ThroughputProps> = ({
duration: chartDuration,
name: widgetName,
} = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{
labels: string[];

2
app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
View File

@@ -41,7 +41,7 @@ const FleetEfficiencyComponent = ({object}: any) => {
socket.on("lastOutput", (response) => {
const responseData = response.input1;
console.log(responseData);
// console.log(responseData);
if (typeof responseData === "number") {
console.log("It's a number!");

18
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@@ -108,9 +108,8 @@ const Panel: React.FC<PanelProps> = ({
case "bottom":
return {
minWidth: "170px",
width: `calc(100% - ${
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
}px)`,
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
}px)`,
minHeight: "170px",
height: `${panelSize}px`,
left: leftActive ? `${panelSize}px` : "0",
@@ -123,9 +122,8 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "170px",
width: `${panelSize}px`,
minHeight: "170px",
height: `calc(100% - ${
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
}px)`,
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
}px)`,
top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "0",
[side]: "0",
@@ -151,6 +149,7 @@ const Panel: React.FC<PanelProps> = ({
const currentWidgetsCount = getCurrentWidgetCount(panel);
const maxCapacity = calculatePanelCapacity(panel);
if (currentWidgetsCount < maxCapacity) {
addWidgetToPanel(draggedAsset, panel);
}
@@ -284,9 +283,8 @@ const Panel: React.FC<PanelProps> = ({
<div
key={side}
id="panel-wrapper"
className={`panel ${side}-panel absolute ${
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
}`}
className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
}`}
style={getPanelStyle(side)}
onDrop={(e) => handleDrop(e, side)}
onDragOver={(e) => e.preventDefault()}
@@ -303,7 +301,7 @@ const Panel: React.FC<PanelProps> = ({
style={{
pointerEvents:
selectedZone.lockedPanels.includes(side) ||
hiddenPanels[selectedZone.zoneId]?.includes(side)
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "none"
: "auto",
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",