update state for throughput analysis

2025-05-09 13:09:45 +05:30
parent 35496f5571
commit 35c21c60b2
5 changed files with 302 additions and 271 deletions
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -9,6 +9,7 @@ import {
 } from "chart.js";
 import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
 import SkeletonUI from "../../templates/SkeletonUI";
+import { useMachineUptime } from "../../../store/store";

 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);

@@ -19,12 +20,9 @@ const ThroughputSummary = () => {
    endTime: "09:00 AM",
  };

-  const throughputData = {
-    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
-    data: [5, 10, 8, 10, 12, 10],
-    totalThroughput: 1240,
-    assetUsage: 85,
-  };
+  const { machineActiveTime } = useMachineUptime();
+
+

  const energyConsumption = {
    energyConsumed: 456,
@@ -38,19 +36,7 @@ const ThroughputSummary = () => {
    { shift: 3, percentage: 30, color: "#7981F5" },
  ];

-  // Chart data configuration
-  const chartData = {
-    labels: throughputData.labels,
-    datasets: [
-      {
-        label: "Units/hour",
-        data: throughputData.data,
-        borderColor: "#B392F0",
-        tension: 0.4,
-        pointRadius: 0, // Hide points
-      },
-    ],
-  };
+

  const chartOptions = {
    responsive: true,
@@ -73,6 +59,35 @@ const ThroughputSummary = () => {
    },
  };

+  const assetUsage = 85;
+
+  // machineActiveTime => Throughput 
+  // shiftUtilization.length => Shifts per day
+  // 8 => Shift length
+  // assetUsage => Yield rate
+
+  const throughtputMachineData = machineActiveTime * shiftUtilization.length * 8
+
+  const throughputData = {
+    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
+    data: [5, 10, 8, 10, 12, 10],
+    totalThroughput: (throughtputMachineData) * assetUsage / 100,
+    assetUsage: assetUsage,
+  };
+
+  // Chart data configuration
+  const chartData = {
+    labels: throughputData.labels,
+    datasets: [
+      {
+        label: "Units/hour",
+        data: throughputData.data,
+        borderColor: "#B392F0",
+        tension: 0.4,
+        pointRadius: 0, // Hide points
+      },
+    ],
+  };
  const isLoading = false;

  return (
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useMachineCount, useMachineUptime } from "../../../store/store";
+import { useMachineCount, useMachineUptime, useMaterialCycle } from "../../../store/store";
 import {
  ProductionCapacityIcon,
  ThroughputSummaryIcon,
@@ -7,20 +7,28 @@ import {
 import SkeletonUI from "../../templates/SkeletonUI";

 const ProductionCapacity = ({
-  progressPercent = 50,
  avgProcessTime = "28.4 Secs/unit",
  machineUtilization = "78%",
  throughputValue = 128,
  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
 }) => {
+
+
+  const { machineCount } = useMachineCount();
+  const { machineActiveTime } = useMachineUptime();
+  const { materialCycleTime } = useMaterialCycle();
+
+  const progressPercent = machineActiveTime;
+
+
  const totalBars = 6;
  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
  const partialFillPercent =
    ((progressPercent / 100) * totalBars - barsToFill) * 100;

  const [isLoading, setIsLoading] = useState(false);
-  const { machineCount, setMachineCount } = useMachineCount()
-  const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
+  // const { machineCount, setMachineCount } = useMachineCount()
+  // const { machineActiveTime, setMachineActiveTime } = useMachineUptime()
  useEffect(() => {
    setIsLoading(true);
    machineUtilization = machineActiveTime
@@ -45,7 +53,7 @@ const ProductionCapacity = ({
          <>
            <div className="process-container">
              <div className="throughput-value">
-                <span className="value">{throughputValue}</span> Units/hour
+                <span className="value">{machineActiveTime}</span> Units/hour
              </div>

              {/* Dynamic Progress Bar */}
@@ -68,11 +76,12 @@ const ProductionCapacity = ({
            <div className="metrics-section">
              <div className="metric">
                <span className="label">Avg. Process Time</span>
-                <span className="value">{avgProcessTime}</span>
+                <span className="value">{materialCycleTime} secs/unit </span>
              </div>
              <div className="metric">
                <span className="label">Machine Utilization</span>
-                <span className="value">{machineActiveTime}</span>
+                <span className="value">1</span>
+                {/* <span className="value">{machineActiveTime}</span> */}
              </div>
            </div>
          </>
--- a/app/src/modules/simulation/analysis/throughPut/throughPut.tsx
+++ b/app/src/modules/simulation/analysis/throughPut/throughPut.tsx
@@ -41,7 +41,7 @@
 //                             armBots.filter(arm => arm.modelUuid === item.modelUuid)
 //                                 .forEach(arm => {
 //                                     if (arm.activeTime >= 0) {
-//                                         console.log('armBot activeTime:', arm.activeTime);
+//                                         
 //                                     }
 //                                 });
 //                         } else if (item.type === "vehicle") {
@@ -109,7 +109,7 @@
 //     useEffect(() => {
 //         if (totalActiveTime > 0 && materialCycleTime > 0) {
 //             const avgProcessTime = (totalActiveTime / materialCycleTime) * 100;
-//             console.log('Throughput (%):', avgProcessTime.toFixed(2));
+//             
 //         }
 //     }, [totalActiveTime, materialCycleTime]);

@@ -143,7 +143,8 @@ export default function ThroughPut() {
    const { materials } = useMaterialStore();

    const { setMachineCount } = useMachineCount();
-    const { setMachineActiveTime } = useMachineUptime();
+    const { machineActiveTime, setMachineActiveTime } = useMachineUptime();
+    console.log('machineActiveTime: ', machineActiveTime);
    const { setMaterialCycleTime } = useMaterialCycle();

    const [totalActiveTime, setTotalActiveTime] = useState(0);
@@ -178,9 +179,9 @@ export default function ThroughPut() {
    useEffect(() => {
        let sum = 0;

-        console.log('armBots: ', armBots);
+
        armBots.forEach(arm => {
-            console.log('arm.activeTime: ', arm.activeTime);
+
            if (arm.activeTime > 0) sum += arm.activeTime;
        });

@@ -200,27 +201,33 @@ export default function ThroughPut() {
            if (storage.activeTime > 0) sum += 8; // static
        });

-        console.log('sum: ', sum);
+

        const avgProcessTime = 100 - 50; // static 50
+
        const machineUptime = (sum / avgProcessTime) * 100;
-        console.log('machineUptime: ', machineUptime.toFixed(2));
+        console.log('machineUptime: ', machineUptime);
+
+

        const machineCount = 3; // static
        const throughput = (3600 / avgProcessTime) * machineCount * (machineUptime / 100); // **IMPORTANT divide by 100 for %**
-        console.log('throughPutData: ', throughput.toFixed(2));
+
+

        setTotalActiveTime(sum);
-        setMachineActiveTime(sum);
+        setMachineActiveTime(machineUptime)
+        setMaterialCycleTime(throughput)
+        // setMachineActiveTime(sum);
        setThroughputData(throughput); // Save it properly here

    }, [armBots, vehicles, machines, conveyors, storageUnits, setMachineActiveTime]);

    // Just display throughput when ready
    useEffect(() => {
-        console.log('throughputData: ', throughputData);
+
        if (throughputData > 0) {
-            console.log('Final Throughput (units/hour): ', throughputData.toFixed(2));
+
        }
    }, [throughputData]);

--- a/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
@@ -83,6 +83,8 @@ const Throughput: React.FC<ThroughputProps> = ({
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0];

+
+
  // Sample data for the line graph
  const graphData: ChartData<"line"> = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -229,8 +231,7 @@ const Throughput: React.FC<ThroughputProps> = ({
    // }}
    >
      <div
-        className={`throughput-wrapper card ${
-          selectedChartId?.id === id ? "activeChart" : ""
+        className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
          }`}
        onClick={() => setSelectedChartId({ id: id, type: type })}
        onContextMenu={onContextMenu}
--- a/app/src/store/store.ts
+++ b/app/src/store/store.ts
@@ -436,16 +436,15 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
  setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));

-
 export const useMachineCount = create<any>((set: any) => ({
  machineCount: 0,
-    setMachineCount: (x: any) => set({ activeLayer: x }),
+  setMachineCount: (x: any) => set({ machineCount: x }),
 }));
 export const useMachineUptime = create<any>((set: any) => ({
  machineActiveTime: 0,
-    setMachineActiveTime: (x: any) => set({ activeLayer: x }),
+  setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
 }));
 export const useMaterialCycle = create<any>((set: any) => ({
  materialCycleTime: 0,
-    setMaterialCycleTime: (x: any) => set({ activeLayer: x }),
+  setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
 }));