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

merged to main

This commit is contained in:
Nalvazhuthi 2025-04-11 09:08:21 +05:30
parent f58754f1df 76573152cf
commit 312479eb1a
17 changed files with 607 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
View File

@ -166,7 +166,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
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);
@ -188,29 +188,23 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}, [chartMeasurements, chartDuration, widgetName]); }, [chartMeasurements, chartDuration, widgetName]);
useEffect(() => { }, [rotation]); useEffect(() => { }, [rotation]);
const rotationDegrees = {
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) translate(-50%, -50%)`,
};
return ( return (
<Html <Html
position={position} position={position}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
rotation={rotation}
transform transform
sprite 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();
@ -221,7 +215,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}} }}
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 })}
@ -230,7 +224,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
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",
}} }}

13
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
View File

@ -231,15 +231,16 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
return ( return (
<Html <Html
position={[position[0], position[1], position[2]]} position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite sprite={false}
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",
}} // }}
> >
<div <div
className={`returnOfInvestment card ${ className={`returnOfInvestment card ${

13
app/src/components/layout/3D-cards/cards/StateWorking.tsx
View File

@ -109,15 +109,16 @@ const StateWorking: React.FC<StateWorkingProps> = ({
return ( return (
<Html <Html
position={[position[0], position[1], position[2]]} position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite sprite={false}
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",
}} // }}
> >
<div <div
className={`stateWorking-wrapper card ${ className={`stateWorking-wrapper card ${

13
app/src/components/layout/3D-cards/cards/Throughput.tsx
View File

@ -209,15 +209,16 @@ const Throughput: React.FC<ThroughputProps> = ({
return ( return (
<Html <Html
position={[position[0], position[1], position[2]]} position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite sprite={false}
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",
}} // }}
> >
<div <div
className={`throughput-wrapper card ${ className={`throughput-wrapper card ${

23
app/src/components/ui/componets/AddButtons.tsx
View File

@ -24,6 +24,7 @@ interface ButtonsProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points: [];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
@ -41,6 +42,7 @@ interface ButtonsProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points: [];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
@ -195,6 +197,18 @@ const AddButtons: React.FC<ButtonsProps> = ({
} }
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
setHiddenPanels(prev => ({
...prev,
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(s => s !== side)
}));
}
// if(hiddenPanels[selectedZone.zoneId].includes(side))
// API call to delete the panel // API call to delete the panel
// try { // try {
// const response = await deletePanelApi(selectedZone.zoneId, side, organization); // const response = await deletePanelApi(selectedZone.zoneId, side, organization);
@ -270,11 +284,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs"> <div className="extra-Bs">
{/* Hide Panel */} {/* Hide Panel */}
<div <div
className={`icon ${ className={`icon ${hiddenPanels[selectedZone.zoneId]?.includes(side)
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "active"
? "active" : ""
: "" }`}
}`}
title={ title={
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel" ? "Show Panel"

15
app/src/components/ui/componets/DisplayZone.tsx
View File

@ -23,6 +23,7 @@ interface DisplayZoneProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points: [];
widgets: Widget[]; widgets: Widget[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
@ -35,6 +36,7 @@ interface DisplayZoneProps {
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
points: [];
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
widgets: { widgets: {
@ -51,6 +53,7 @@ interface DisplayZoneProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points: [];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
@ -80,9 +83,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
// State to track overflow visibility // State to track overflow visibility
const [showLeftArrow, setShowLeftArrow] = useState(false); const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false);
const { floatingWidget, setFloatingWidget } = useFloatingWidget(); const { floatingWidget, setFloatingWidget } = useFloatingWidget()
const { setSelectedChartId } = useWidgetStore(); const { setSelectedChartId } = useWidgetStore()
// Function to calculate overflow state // Function to calculate overflow state
const updateOverflowState = useCallback(() => { const updateOverflowState = useCallback(() => {
@ -163,8 +166,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneId, organization); let response = await getSelect2dZoneData(zoneId, organization);
console.log('response: ', response);
let res = await getFloatingZoneData(zoneId, organization); let res = await getFloatingZoneData(zoneId, organization);
console.log('res: ', res);
setFloatingWidget(res); setFloatingWidget(res);
// Set the selected zone in the store // Set the selected zone in the store
@ -181,11 +185,14 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
panelOrder: response.panelOrder || [], panelOrder: response.panelOrder || [],
lockedPanels: response.lockedPanels || [], lockedPanels: response.lockedPanels || [],
widgets: response.widgets || [], widgets: response.widgets || [],
points: response.points || [],
zoneId: zoneId, zoneId: zoneId,
zoneViewPortTarget: response.viewPortCenter || {}, zoneViewPortTarget: response.viewPortCenter || {},
zoneViewPortPosition: response.viewPortposition || {}, zoneViewPortPosition: response.viewPortposition || {},
}); });
} catch (error) {} } catch (error) {
}
} }
return ( return (

4
app/src/components/ui/componets/DraggableWidget.tsx
View File

@ -44,6 +44,7 @@ export const DraggableWidget = ({
zoneName: string; zoneName: string;
zoneId: string; zoneId: string;
activeSides: Side[]; activeSides: Side[];
points:[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
widgets: Widget[]; widgets: Widget[];
@ -53,7 +54,7 @@ export const DraggableWidget = ({
zoneName: string; zoneName: string;
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
points:[];
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
@ -174,6 +175,7 @@ export const DraggableWidget = ({
...widget, ...widget,
id: `${widget.id}-copy-${Date.now()}`, id: `${widget.id}-copy-${Date.now()}`,
}; };
console.log('duplicatedWidget: ', duplicatedWidget);
let duplicateWidget = { let duplicateWidget = {
organization: organization, organization: organization,

214
app/src/components/ui/componets/Dropped3dWidget.tsx
View File

@ -1,5 +1,5 @@
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef, useState } from "react";
import { import {
useAsset3dWidget, useAsset3dWidget,
useSocketStore, useSocketStore,
@ -57,6 +57,10 @@ export default function Dropped3dWidgets() {
const planeIntersect = useRef(new THREE.Vector3()); const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]); const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }); const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
let [floorPlanesVertical, setFloorPlanesVertical] = useState(
new THREE.Plane(new THREE.Vector3(0, 1, 0))
);
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => { useEffect(() => {
@ -73,8 +77,9 @@ export default function Dropped3dWidgets() {
); );
setWidgets3D(result); setWidgets3D(result);
if (result.length < 0) return
const formattedWidgets = result.map((widget: WidgetData) => ({ const formattedWidgets = result?.map((widget: WidgetData) => ({
id: widget.id, id: widget.id,
type: widget.type, type: widget.type,
position: widget.position, position: widget.position,
@ -172,7 +177,7 @@ export default function Dropped3dWidgets() {
}; };
const onDrop = (event: any) => { const onDrop = (event: any) => {
console.log("onDrop called. hasEntered: ", hasEntered.current);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -184,7 +189,15 @@ export default function Dropped3dWidgets() {
const newWidget = createdWidgetRef.current; const newWidget = createdWidgetRef.current;
if (!newWidget || !widgetSelect.startsWith("ui")) return; if (!newWidget || !widgetSelect.startsWith("ui")) return;
// ✅ Manual removal of the temp widget (same ID) // ✅ Extract 2D drop position
const [x, , z] = newWidget.position;
// ✅ 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 prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id); const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
useZoneWidgetStore.setState((state) => ({ useZoneWidgetStore.setState((state) => ({
@ -193,8 +206,12 @@ export default function Dropped3dWidgets() {
[selectedZone.zoneId]: cleanedWidgets, [selectedZone.zoneId]: cleanedWidgets,
}, },
})); }));
// if (!isInside) {
// ✅ Now re-add it as final
// createdWidgetRef.current = null;
// return; // Stop here
// }
// ✅ Add widget if inside polygon
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
const add3dWidget = { const add3dWidget = {
@ -207,16 +224,10 @@ export default function Dropped3dWidgets() {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget); visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
} }
setTimeout(() => {
let pointerDivs = document.getElementsByClassName("pointer-none");
Array.from(pointerDivs).forEach((el) => {
el.classList.remove("pointer-none");
});
}, 1000);
createdWidgetRef.current = null; createdWidgetRef.current = null;
}; };
canvasElement.addEventListener("dragenter", handleDragEnter); canvasElement.addEventListener("dragenter", handleDragEnter);
canvasElement.addEventListener("dragover", handleDragOver); canvasElement.addEventListener("dragover", handleDragOver);
canvasElement.addEventListener("drop", onDrop); canvasElement.addEventListener("drop", onDrop);
@ -228,8 +239,6 @@ export default function Dropped3dWidgets() {
}; };
}, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, camera,]); }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, camera,]);
useEffect(() => { useEffect(() => {
if (!rightClickSelected) return; if (!rightClickSelected) return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
@ -300,25 +309,61 @@ export default function Dropped3dWidgets() {
} }
}, [rightSelect, rightClickSelected]); }, [rightSelect, rightClickSelected]);
function isPointInPolygon(
point: [number, number],
polygon: Array<[number, number]>
): boolean {
const [x, z] = point;
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
const [xi, zi] = polygon[i];
const [xj, zj] = polygon[j];
const intersect =
zi > z !== zj > z &&
x < ((xj - xi) * (z - zi)) / (zj - zi) + xi;
if (intersect) inside = !inside;
}
return inside;
}
const [prevX, setPrevX] = useState(0);
useEffect(() => { useEffect(() => {
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 handleMouseDown = (event: MouseEvent) => { const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
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") { if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY }; mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find( const selectedZoneId = Object.keys(zoneWidgetData).find(
(zoneId: string) => (zoneId: string) =>
zoneWidgetData[zoneId].some( zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected (widget: WidgetData) => widget.id === rightClickSelected
) )
); );
if (!selectedZoneId) return;
if (!selectedZone) return; const selectedWidget = zoneWidgetData[selectedZoneId].find(
const selectedWidget = zoneWidgetData[selectedZone].find(
(widget: WidgetData) => widget.id === rightClickSelected (widget: WidgetData) => widget.id === rightClickSelected
); );
if (selectedWidget) { if (selectedWidget) {
@ -329,14 +374,14 @@ export default function Dropped3dWidgets() {
const handleMouseMove = (event: MouseEvent) => { const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) => const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some( zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected (widget: WidgetData) => widget.id === rightClickSelected
) )
); );
if (!selectedZone) return; if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZone].find( const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected (widget: WidgetData) => widget.id === rightClickSelected
); );
if (!selectedWidget) return; if (!selectedWidget) return;
@ -347,77 +392,101 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
if ( if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
rightSelect === "Horizontal Move" && const points3D = selectedZone.points as Array<[number, number, number]>;
raycaster.ray.intersectPlane(plane.current, planeIntersect.current) const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
) {
const newPosition: [number, number, number] = [ const newPosition: [number, number, number] = [
planeIntersect.current.x, planeIntersect.current.x,
selectedWidget.position[1], selectedWidget.position[1],
planeIntersect.current.z, planeIntersect.current.z,
]; ];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition); const isInside = isPointInPolygon(
[newPosition[0], newPosition[2]],
zonePolygonXZ
);
// if (isInside) {
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
// }
} }
if (rightSelect === "Vertical Move") { if (rightSelect === "Vertical Move") {
if ( if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
raycaster.ray.intersectPlane( const currentY = selectedWidget.position[1];
verticalPlane.current, const newY = planeIntersect.current.y;
planeIntersect.current console.log('planeIntersect.current: ', planeIntersect.current);
)
) { const deltaY = newY - currentY;
updateWidgetPosition(selectedZone, rightClickSelected, [
selectedWidget.position[0], // Reject if jump is too large (safety check)
planeIntersect.current.y, if (Math.abs(deltaY) > 200) return;
selectedWidget.position[2],
]); // 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],
]);
}
} }
} }
if (rightSelect === "RotateX") { if (rightSelect === "RotateX") {
const deltaX = event.clientX - mouseStartRef.current.x; const currentX = event.pageX;
const rotationSpeed = 0.03; const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
const newRotation: [number, number, number] = [ setPrevX(currentX);
rotationStartRef.current[0] + deltaX * rotationSpeed, if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
rotationStartRef.current[1], const newRotation: [number, number, number] = [
rotationStartRef.current[2], selectedWidget.rotation[0] + 0.05 * sign,
]; selectedWidget.rotation[1],
updateWidgetRotation(selectedZone, rightClickSelected, newRotation); selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
} }
if (rightSelect === "RotateY") { if (rightSelect === "RotateY") {
const deltaY = event.clientY - mouseStartRef.current.y; const currentX = event.pageX;
const rotationSpeed = 0.03; const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
const newRotation: [number, number, number] = [ setPrevX(currentX);
rotationStartRef.current[0], if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
rotationStartRef.current[1] + deltaY * rotationSpeed, const newRotation: [number, number, number] = [
rotationStartRef.current[2], selectedWidget.rotation[0] ,
]; selectedWidget.rotation[1]+ 0.05 * sign,
updateWidgetRotation(selectedZone, rightClickSelected, newRotation); selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
} }
if (rightSelect === "RotateZ") { if (rightSelect === "RotateZ") {
const deltaX = event.movementX; const currentX = event.pageX;
const rotationSpeed = 0.03; const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
const currentRotation = selectedWidget.rotation || [0, 0, 0]; setPrevX(currentX);
const newRotation: [number, number, number] = [ if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
currentRotation[0], const newRotation: [number, number, number] = [
currentRotation[1], selectedWidget.rotation[0] ,
currentRotation[2] + deltaX * rotationSpeed, selectedWidget.rotation[1],
]; selectedWidget.rotation[2]+ 0.05 * sign,
updateWidgetRotation(selectedZone, rightClickSelected, newRotation); ];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
} }
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId) => const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
zoneWidgetData[zoneId].some( zoneWidgetData[zoneId].some(
(widget) => widget.id === rightClickSelected (widget) => widget.id === rightClickSelected
) )
); );
if (!selectedZone) return; if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZone].find( const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget) => widget.id === rightClickSelected (widget) => widget.id === rightClickSelected
); );
if (!selectedWidget) return; if (!selectedWidget) return;
@ -434,7 +503,7 @@ export default function Dropped3dWidgets() {
number number
]; ];
// (async () => { // (async () => {
// let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition); // let response = await update3dWidget(selectedZoneId, organization, rightClickSelected, lastPosition);
// //
// if (response) { // if (response) {
// //
@ -442,7 +511,7 @@ export default function Dropped3dWidgets() {
// })(); // })();
let updatingPosition = { let updatingPosition = {
organization: organization, organization: organization,
zoneId: selectedZone, zoneId: selectedZoneId,
id: rightClickSelected, id: rightClickSelected,
position: lastPosition, position: lastPosition,
}; };
@ -456,8 +525,9 @@ export default function Dropped3dWidgets() {
const rotation = selectedWidget.rotation || [0, 0, 0]; const rotation = selectedWidget.rotation || [0, 0, 0];
let lastRotation = formatValues(rotation) as [number, number, number]; let lastRotation = formatValues(rotation) as [number, number, number];
// (async () => { // (async () => {
// let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation); // let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
// //
// if (response) { // if (response) {
// //
@ -465,7 +535,7 @@ export default function Dropped3dWidgets() {
// })(); // })();
let updatingRotation = { let updatingRotation = {
organization: organization, organization: organization,
zoneId: selectedZone, zoneId: selectedZoneId,
id: rightClickSelected, id: rightClickSelected,
rotation: lastRotation, rotation: lastRotation,
}; };

1
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@ -569,6 +569,7 @@ 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"} `
}} }}
onPointerDown={(event) => { onPointerDown={(event) => {
setSelectedChartId(obj); setSelectedChartId(obj);

2
app/src/components/ui/componets/Panel.tsx
View File

@ -22,6 +22,7 @@ interface PanelProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points:[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];
@ -33,6 +34,7 @@ interface PanelProps {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
lockedPanels: Side[]; lockedPanels: Side[];
points:[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
zoneViewPortPosition: number[]; zoneViewPortPosition: number[];

8
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -37,7 +37,7 @@ type FormattedZoneData = Record<
{ {
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
points: [];
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
@ -85,6 +85,7 @@ const RealTimeVisulization: React.FC = () => {
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
try { try {
const response = await getZone2dData(organization); const response = await getZone2dData(organization);
console.log('response: ', response);
if (!Array.isArray(response)) { if (!Array.isArray(response)) {
return; return;
@ -95,6 +96,7 @@ const RealTimeVisulization: React.FC = () => {
activeSides: [], activeSides: [],
panelOrder: [], panelOrder: [],
lockedPanels: [], lockedPanels: [],
points: zone.points,
zoneId: zone.zoneId, zoneId: zone.zoneId,
zoneViewPortTarget: zone.viewPortCenter, zoneViewPortTarget: zone.viewPortCenter,
zoneViewPortPosition: zone.viewPortposition, zoneViewPortPosition: zone.viewPortposition,
@ -105,7 +107,7 @@ const RealTimeVisulization: React.FC = () => {
{} {}
); );
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) {} } catch (error) { }
} }
GetZoneData(); GetZoneData();
@ -121,6 +123,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||[],
zoneId: selectedZone.zoneId || "", zoneId: selectedZone.zoneId || "",
zoneViewPortTarget: selectedZone.zoneViewPortTarget || [], zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
zoneViewPortPosition: selectedZone.zoneViewPortPosition || [], zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@ -283,6 +286,7 @@ const RealTimeVisulization: React.FC = () => {
"Horizontal Move", "Horizontal Move",
"RotateX", "RotateX",
"RotateY", "RotateY",
"RotateZ",
"Delete", "Delete",
]} ]}
/> />

4
app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx
View File

@ -125,13 +125,13 @@ const WarehouseThroughput = () => {
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" 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>

4
app/src/services/realTimeVisulization/zoneData/clearPanel.ts
View File

@ -1,5 +1,5 @@
// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
let url_Backend_dwinzo = `http://192.168.0.102:5000`; // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
export const clearPanel = async ( export const clearPanel = async (
zoneId: string, zoneId: string,
organization: string, organization: string,

2
app/src/services/realTimeVisulization/zoneData/loadTemplate.ts
View File

@ -18,7 +18,7 @@ export const loadTempleteApi = async (
); );
if (!response.ok) { if (!response.ok) {
throw new Error("Failed to add 3dwidget in the zone"); throw new Error("Failed to load Template in the zone");
} }
const result = await response.json(); const result = await response.json();

3
app/src/store/useZoneStore.ts
View File

@ -14,7 +14,7 @@ interface SelectedZoneState {
zoneName: string; zoneName: string;
activeSides: Side[]; activeSides: Side[];
panelOrder: Side[]; panelOrder: Side[];
points: []
lockedPanels: Side[]; lockedPanels: Side[];
zoneId: string; zoneId: string;
zoneViewPortTarget: number[]; zoneViewPortTarget: number[];
@ -37,6 +37,7 @@ export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
activeSides: [], // Empty array activeSides: [], // Empty array
panelOrder: [], // Empty array panelOrder: [], // Empty array
lockedPanels: [], // Empty array lockedPanels: [], // Empty array
points: [],
zoneId: "", zoneId: "",
zoneViewPortTarget: [], zoneViewPortTarget: [],
zoneViewPortPosition: [], zoneViewPortPosition: [],

793
app/src/styles/components/visualization/floating/common.scss
View File

@ -1,507 +1,482 @@
@use '../../../abstracts/variables.scss' as *; @use "../../../abstracts/variables.scss" as *;
@use '../../../abstracts/mixins.scss' as *; @use "../../../abstracts/mixins.scss" as *;
.throughput-wrapper, .throughput-wrapper,
.card { .card {
background-color: var(--background-color); background-color: var(--background-color);
box-shadow: var(--box-shadow-heavy); box-shadow: var(--box-shadow-heavy);
@include flex-center;
flex-direction: column;
gap: 6px;
border-radius: 17.22px;
max-width: 341px;
padding: 14px;
.header {
@include flex-center; @include flex-center;
flex-direction: column; align-items: start;
gap: 6px; font-weight: $medium-weight;
border-radius: 17.22px; font-size: $large;
max-width: 341px; }
padding: 14px; .display-value {
@include flex-center;
.header { .left {
@include flex-center;
gap: 6px;
.icon {
width: 27px !important;
height: 27px !important;
background: var(--background-color);
border-radius: 50%;
@include flex-center; @include flex-center;
align-items: start; }
font-weight: $medium-weight;
font-size: $large;
} .value-container {
display: flex;
flex-direction: column;
.display-value { .value-wrapper {
@include flex-center; display: flex;
gap: 6px;
.left { .value {
@include flex-center; font-size: $small;
gap: 6px; color: var(--accent-color);
font-weight: $bold-weight;
.icon { }
width: 27px !important;
height: 27px !important;
background: var(--background-color);
border-radius: 50%;
@include flex-center;
}
.value-container {
display: flex;
flex-direction: column;
.value-wrapper {
display: flex;
gap: 6px;
.value {
font-size: $small;
color: var(--accent-color);
font-weight: $bold-weight;
}
}
.total-sales {
display: flex;
gap: 6px;
}
}
} }
.right { .total-sales {
.percent-increase { display: flex;
width: 80px; gap: 6px;
height: 24px;
border-radius: 7.75px;
background: var(--background-color);
color: #34C759;
@include flex-center;
}
} }
}
} }
.footer { .right {
text-align: center; .percent-increase {
width: 80px;
height: 24px;
border-radius: 7.75px;
background: var(--background-color);
color: #34c759;
@include flex-center;
}
} }
}
.footer {
text-align: center;
}
} }
.returnOfInvestment { .returnOfInvestment {
gap: 10px; gap: 10px;
min-width: 150px;
.charts {
width: 100%;
height: 200px;
min-width: 150px; min-width: 150px;
}
.charts { .returns-wrapper {
width: 100%; display: flex;
height: 200px; gap: 4px;
min-width: 150px; align-items: center;
.value {
font-size: var(--font-size-xxxlarge);
color: var(--accent-color);
} }
}
.returns-wrapper { .footer {
display: flex; text-align: start;
gap: 4px;
align-items: center;
.value { span {
font-size: var(--font-size-xxxlarge); font-weight: $bold-weight;
color: var(--accent-color);
}
}
.footer {
text-align: start;
span {
font-weight: $bold-weight;
}
} }
}
} }
.productionCapacity-wrapper { .productionCapacity-wrapper {
background-color: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
width: 313px;
padding: 4.5px;
border-radius: 9.74px;
.headeproductionCapacityr-wrapper,
.bar-chart {
padding: 14px;
background-color: var(--background-color); background-color: var(--background-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
width: 313px; border-radius: 5.2px;
padding: 4.5px;
border-radius: 9.74px;
.headeproductionCapacityr-wrapper, width: 100%;
.bar-chart { height: 150px;
padding: 14px; display: flex;
background-color: var(--background-color); justify-content: center;
align-items: center;
.header {
font-size: $small;
text-align: start;
justify-content: start;
}
.production-capacity {
display: flex;
gap: 6px;
.current,
.target {
display: flex; display: flex;
flex-direction: column;
gap: 6px; gap: 6px;
border-radius: 5.2px;
width: 100%;
height: 150px;
display: flex;
justify-content: center;
align-items: center; align-items: center;
.header { .key,
font-size: $small; .value {
text-align: start; font-size: $tiny;
justify-content: start;
} }
}
.production-capacity { .current {
display: flex; .value {
gap: 6px; background: var(--background-color-secondary);
color: #5783f2;
.current, border-radius: 12.99px;
.target { padding: 3px 4px;
display: flex;
gap: 6px;
align-items: center;
.key,
.value {
font-size: $tiny;
}
}
.current {
.value {
background: var(--background-color-secondary);
color: #5783F2;
border-radius: 12.99px;
padding: 3px 4px;
}
}
.target {
.value {
background: var(--background-color-secondary);
color: #9641A7;
border-radius: 12.99px;
padding: 3px 4px;
}
}
} }
} }
.bar-chart { .target {
padding: 14px 0; .value {
background: var(--background-color-secondary);
color: #9641a7;
border-radius: 12.99px;
padding: 3px 4px;
}
}
} }
}
.bar-chart {
padding: 14px 0;
}
} }
.stateWorking-wrapper { .stateWorking-wrapper {
min-width: 445px; min-width: 445px;
font-size: var(--font-size-small); font-size: var(--font-size-small);
backdrop-filter: blur(40px); backdrop-filter: blur(40px);
background: var(--background-color-secondary); background: var(--background-color-secondary);
border-radius: 20px; border-radius: 20px;
color: var(--text-color); color: var(--text-color);
background: #252525CC; background: #252525cc;
.header-wrapper { .header-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span { span {
font-size: var(--font-size-xxlarge); font-size: var(--font-size-xxlarge);
&:first-child { &:first-child {
color: #FCFDFD; color: #fcfdfd;
}
&:last-child {
color: #34C759;
}
}
} }
.img { &:last-child {
border-radius: 4px; color: #34c759;
img {
border-radius: 4px;
}
} }
}
} }
.data-wrapper { .img {
width: 100%; border-radius: 4px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
.data-table { img {
display: flex; border-radius: 4px;
justify-content: space-between; }
padding: 5px;
border-bottom: 1px dotted #ccc;
.data {
color: #FCFDFD;
font-weight: bold;
}
.key {
color: #FCFDFD;
text-align: right;
}
}
} }
}
.data-wrapper {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
.data-table {
display: flex;
justify-content: space-between;
padding: 5px;
border-bottom: 1px dotted #ccc;
.data {
color: #fcfdfd;
font-weight: bold;
}
.key {
color: #fcfdfd;
text-align: right;
}
}
}
} }
.total-card { .total-card {
min-height: auto !important; min-height: 83px !important;
background: var(--background-color); background: var(--background-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px !important;
.header-wrapper {
display: flex; display: flex;
flex-direction: column;
gap: 5px;
.header {
color: #a0aec0;
}
.data-values {
display: flex;
align-items: center;
gap: 6px;
.value {
color: var(--text-color);
}
.per {
color: #01b574;
}
}
}
.icon {
width: 45px;
height: 45px;
background-color: var(--accent-color);
display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: space-between; border-radius: 12px;
padding: 18px !important; }
.header-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
.header {
color: #A0AEC0;
}
.data-values {
display: flex;
align-items: center;
gap: 6px;
.value {
color: var(--text-color);
}
.per {
color: #01B574;
}
}
}
.icon {
width: 45px;
height: 45px;
background-color: var(--accent-color);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
} }
.warehouseThroughput { .warehouseThroughput {
display: flex; min-height: 250px !important;
flex-direction: column; display: flex;
gap: 6px; flex-direction: column;
background-color: var(--background-color); gap: 6px;
padding: 14px; background-color: var(--background-color);
padding: 14px;
.header {
p {
span {
color: var(--accent-color);
}
}
h2 {
color: var(--text-color);
}
.header {
p {
span {
color: var(--accent-color);
}
} }
h2 {
color: var(--text-color);
}
}
} }
.productivity-dashboard { .productivity-dashboard {
width: 100%; width: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: white; color: white;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
header { header {
@include flex-space-between; @include flex-space-between;
margin-bottom: 20px; margin-bottom: 20px;
h2 { h2 {
font-size: $regular; font-size: $regular;
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
}
.options {
background-color: #343b47;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: #49505a;
}
}
} }
main { .options {
display: flex; background-color: #343b47;
gap: 20px; width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
cursor: pointer;
.metrics { &:hover {
flex: 1; background-color: #49505a;
display: flex; }
flex-direction: column;
gap: 10px;
.metric {
background-color: #2c3e50;
padding: 15px;
border-radius: 4px;
.label {
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
.value {
font-size: var(--font-size-xlarge);
font-weight: bold;
margin: 0;
}
}
}
.chart-section {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.progress-circle {
transform: rotate(-90deg);
/* Adjust rotation for SVG */
width: 150px;
height: 150px;
circle {
transition: stroke-dashoffset 0.5s ease-in-out; // Smooth animation
}
}
.chart-details {
position: absolute;
text-align: center;
.title {
font-size: var(--font-size-large);
margin: 0;
opacity: 0.7;
}
.time {
font-size: var(--font-size-xxxlarge);
font-weight: bold;
margin: 0;
}
.subtitle {
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
}
}
} }
}
main {
display: flex;
gap: 20px;
.metrics {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
.metric {
background-color: #2c3e50;
padding: 15px;
border-radius: 4px;
.label {
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
.value {
font-size: var(--font-size-xlarge);
font-weight: bold;
margin: 0;
}
}
}
.chart-section {
position: relative;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
.progress-circle {
transform: rotate(-90deg);
/* Adjust rotation for SVG */
width: 150px;
height: 150px;
circle {
transition: stroke-dashoffset 0.5s ease-in-out; // Smooth animation
}
}
.chart-details {
position: absolute;
text-align: center;
.title {
font-size: var(--font-size-large);
margin: 0;
opacity: 0.7;
}
.time {
font-size: var(--font-size-xxxlarge);
font-weight: bold;
margin: 0;
}
.subtitle {
font-size: var(--font-size-regular);
margin: 0;
opacity: 0.7;
}
}
}
}
} }
/* FleetEfficiency.module.css */ /* FleetEfficiency.module.css */
.fleetEfficiency { .fleetEfficiency {
width: 100%;
min-height: 240px !important;
padding: 20px;
background: var(--background-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
width: 240px;
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
.progressContainer {
position: relative;
width: 100%; width: 100%;
padding: 20px; height: 120px;
background: var(--background-color); overflow: auto !important;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
width: 240px;
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
.progress {
width: 100%;
height: 100%;
.barOverflow {
.progressContainer {
position: relative;
width: 100%; width: 100%;
height: 120px; }
overflow: auto !important;
.progress {
width: 100%;
height: 100%;
.barOverflow {
width: 100%;
}
}
} }
}
} }
.scaleLabels { .scaleLabels {
background-color: var(--background-color); background-color: var(--background-color);
box-shadow: var(--box-shadow-heavy); box-shadow: var(--box-shadow-heavy);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: #718096; color: #718096;
font-size: var(--font-size-small); font-size: var(--font-size-small);
padding: 18px 10px; padding: 18px 10px;
position: relative; position: relative;
z-index: 100; z-index: 1;
top: -32px; top: -32px;
} }
.barOverflow { .barOverflow {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100px; height: 100px;
margin-bottom: -14px; margin-bottom: -14px;
} }
.bar { .bar {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
border: 25px solid #eee; border: 25px solid #eee;
border-bottom-color: var(--accent-color); border-bottom-color: var(--accent-color);
border-right-color: var(--accent-color); border-right-color: var(--accent-color);
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
// progress should be progress {progress}
// progress should be progress {progress}

2
app/src/styles/pages/realTimeViz.scss
View File

@ -32,7 +32,7 @@
min-width: 250px; min-width: 250px;
max-width: 300px; max-width: 300px;
min-height: 83px !important; // min-height: 83px !important;
// max-height: 100px !important; // max-height: 100px !important;
background: var(--background-color); background: var(--background-color);