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

Merge pull request 'realTimeVisulization' (#60) from realTimeVisulization into main 

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/60
This commit is contained in:
Vishnu 2025-04-11 12:55:52 +00:00
parent d4a451c19f 6efe1278ef
commit c109820d27
13 changed files with 120 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/components/layout/3D-cards/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[];

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

@ -44,11 +44,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,
@ -59,8 +61,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[];

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

@ -11,11 +11,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,
@ -26,8 +28,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;

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

@ -46,12 +46,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,
@ -62,8 +64,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[];

5
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
View File

@ -45,7 +45,10 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
),
title,
panel: "top",
data: sampleData,
Data: {
measurements:{},
duration:'1h'
},
});
}}
onDragEnd={() => setDraggedAsset(null)}

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

@ -1,5 +1,6 @@
import { useWidgetStore } from "../../../store/useWidgetStore";
import ProgressCard from "../realTimeVis/charts/ProgressCard";
import useChartStore from "../../../store/useChartStore";
import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
@ -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);
@ -96,6 +107,8 @@ export const DraggableWidget = ({
"sidebar-right-wrapper",
"card",
"dropdown-menu",
"sidebar-right-content-container",
"dropdown-options"
],
setMenuVisible: () => setSelectedChartId(null),
});
@ -139,40 +152,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);
@ -183,6 +206,8 @@ export const DraggableWidget = ({
widget: duplicatedWidget,
};
if (visualizationSocket) {
console.log("duplecate widget", duplicateWidget);
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
}
setSelectedZone((prevZone: any) => ({
@ -255,12 +280,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
@ -298,8 +318,7 @@ 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}
@ -326,10 +345,9 @@ export const DraggableWidget = ({
{openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}>
<div
className={`edit btn ${
isPanelFull(widget.panel) ? "btn-blur" : ""
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
onClick={duplicateWidget}
>
<div className="icon">
<DublicateIcon />

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

@ -5,6 +5,7 @@ import {
useSocketStore,
useWidgetSubOption,
} from "../../../store/store";
import useChartStore from "../../../store/useChartStore";
import useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes";
import * as THREE from "three";
@ -30,6 +31,7 @@ import {
update3dWidget,
update3dWidgetRotation,
} from "../../../services/realTimeVisulization/zoneData/update3dWidget";
import { useWidgetStore } from "../../../store/useWidgetStore";
type WidgetData = {
id: string;
type: string;
@ -57,6 +59,8 @@ 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))
);
@ -258,8 +262,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: [
@ -268,6 +274,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,
@ -657,8 +667,21 @@ export default function Dropped3dWidgets() {
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"
);
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);
handleRightClick3d(event, id)
};
@ -671,6 +694,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -682,6 +706,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -693,6 +718,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
@ -704,6 +730,7 @@ export default function Dropped3dWidgets() {
type={type}
position={position}
rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);

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

@ -108,8 +108,7 @@ const Panel: React.FC<PanelProps> = ({
case "bottom":
return {
minWidth: "170px",
width: `calc(100% - ${
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
}px)`,
minHeight: "170px",
height: `${panelSize}px`,
@ -123,8 +122,7 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "170px",
width: `${panelSize}px`,
minHeight: "170px",
height: `calc(100% - ${
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
}px)`,
top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "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,8 +283,7 @@ 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)}

2
app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
View File

@ -160,6 +160,8 @@ const LineGraphComponent = ({
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)

9
app/src/store/useDroppedObjectsStore.ts
View File

@ -1,6 +1,7 @@
import { create } from "zustand";
import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { useSocketStore } from "./store";
import useChartStore from "./useChartStore";
type DroppedObject = {
className: string;
@ -96,7 +97,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
const state = useDroppedObjectsStore.getState(); // Get the current state
const zone = state.zones[zoneName];
let socketState = useSocketStore.getState();
let iotData = useChartStore.getState();
let visualizationSocket = socketState.visualizationSocket;
let iotMeasurements = iotData.flotingMeasurements;
let iotDuration = iotData.flotingDuration;
if (!zone) return;
@ -109,6 +113,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
// Create a shallow copy of the object with a unique ID and slightly adjusted position
const duplicatedObject: DroppedObject = {
...originalObject,
Data:{
measurements: iotMeasurements,
duration: iotDuration,
},
id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
position: {
...originalObject.position,
@ -122,6 +130,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
: originalObject.position.left,
},
};
console.log("duplicated object",duplicatedObject);
let duplicateFloatingWidget = {
organization: organization,

18
app/src/store/useWidgetStore.ts
View File

@ -8,22 +8,8 @@ export interface Widget {
fontFamily?: string;
fontSize?: string;
fontWeight?: string;
data: {
// Chart data
labels?: string[];
datasets?: Array<{
data: number[];
backgroundColor: string;
borderColor: string;
borderWidth: number;
}>;
// Progress card data
stocks?: Array<{
key: string;
value: number;
description: string;
}>;
};
data?: any;
Data?:any;
}
interface WidgetStore {

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

@ -285,9 +285,6 @@
}
}
.chart-container.notLinked {
border-color: red;
}
.close-btn {
position: absolute;
@ -755,6 +752,13 @@
z-index: 2 !important;
}
.chart-container.notLinked {
outline: 1px solid red;
}
.connectionSuccess {
outline-color: #43c06d;
}