updated simulation player

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -11,21 +11,57 @@ import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
 
 ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
 
+// Helper function to generate random colors
+const getRandomColor = () => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
 const ThroughputSummary = () => {
-  const data = {
+  // Define all data internally within the component
+  const timeRange = {
+    startTime: "08:00 AM",
+    endTime: "09:00 AM",
+  };
+
+  const throughputData = {
     labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+    data: [100, 120, 110, 130, 125, 128, 132],
+    totalThroughput: 1240,
+    assetUsage: 85,
+  };
+
+  const energyConsumption = {
+    energyConsumed: 456,
+    unit: "KWH",
+  };
+
+  // Dynamic shift data
+  const shiftUtilization = [
+    { shift: 1, percentage: 30 },
+    { shift: 2, percentage: 40 },
+    { shift: 3, percentage: 30 },
+  ];
+
+  // Chart data configuration
+  const chartData = {
+    labels: throughputData.labels,
     datasets: [
       {
         label: "Units/hour",
-        data: [100, 120, 110, 130, 125, 128, 132],
+        data: throughputData.data,
         borderColor: "#B392F0",
         tension: 0.4,
-        pointRadius: 0, // hide points
+        pointRadius: 0, // Hide points
       },
     ],
   };
 
-  const options = {
+  const chartOptions = {
     responsive: true,
     scales: {
       x: {
@@ -57,19 +93,15 @@ const ThroughputSummary = () => {
     },
   };
 
-  const shiftUtilization = {
-    "shift 1": 25,
-    "shift 2": 45,
-    "shift 3": 15,
-  };
-
   return (
     <div className="throughoutSummary analysis-card">
       <div className="throughoutSummary-wrapper analysis-card-wrapper">
         <div className="card-header">
           <div className="header">
             <div className="main-header">Throughput Summary</div>
-            <div className="sub-header">08:00 - 09:00 AM</div>
+            <div className="sub-header">
+              {timeRange.startTime} - {timeRange.endTime}
+            </div>
           </div>
           <div className="icon-wrapper">
             <ThroughputSummaryIcon />
@@ -78,14 +110,15 @@ const ThroughputSummary = () => {
 
         <div className="process-container">
           <div className="throughput-value">
-            <span className="value">1240</span> Units/hour
+            <span className="value">{throughputData.totalThroughput}</span>{" "}
+            Units/hour
           </div>
           <div className="lineChart">
             <div className="assetUsage">
               <div className="key">Asset usage</div>
-              <div className="value">85%</div>
+              <div className="value">{throughputData.assetUsage}%</div>
             </div>
-            <Line data={data} options={options} />
+            <Line data={chartData} options={chartOptions} />
           </div>
         </div>
 
@@ -97,43 +130,41 @@ const ThroughputSummary = () => {
                 <PowerIcon />
               </div>
               <div className="value-wrapper">
-                <div className="value">456</div>
-                <div className="unit">KWH</div>
+                <div className="value">{energyConsumption.energyConsumed}</div>
+                <div className="unit">{energyConsumption.unit}</div>
               </div>
             </div>
           </div>
           <div className="shiftUtilization footer-card">
             <div className="header">Shift Utilization</div>
             <div className="value-container">
-              <div className="value">85%</div>
+              <div className="value">{throughputData.assetUsage}%</div>
 
               <div className="progress-wrapper">
-                <div
-                  className="progress shift-1"
-                  style={{ width: "30%" }}
-                ></div>
-                <div
-                  className="progress shift-2"
-                  style={{ width: "40%" }}
-                ></div>
-                <div
-                  className="progress shift-3"
-                  style={{ width: "30%" }}
-                ></div>
+                {/* Dynamically create progress bars based on shiftUtilization array */}
+                {shiftUtilization.map((shift) => (
+                  <div
+                    key={shift.shift}
+                    className={`progress shift-${shift.shift}`}
+                    style={{
+                      width: `${shift.percentage}%`,
+                      backgroundColor: getRandomColor(),
+                    }}
+                  ></div>
+                ))}
               </div>
+
               <div className="progress-indicator">
-                <div className="shift-wrapper">
-                  <span className="indicator shift-1"></span>
-                  <label>Shift 1</label>
-                </div>
-                <div className="shift-wrapper">
-                  <span className="indicator shift-2"></span>
-                  <label>Shift 2</label>
-                </div>
-                <div className="shift-wrapper">
-                  <span className="indicator shift-3"></span>
-                  <label>Shift 3</label>
-                </div>
+                {/* Dynamically create shift indicators with random colors */}
+                {shiftUtilization.map((shift) => (
+                  <div className="shift-wrapper" key={shift.shift}>
+                    <span
+                      className={`indicator shift-${shift.shift}`}
+                      style={{ backgroundColor: getRandomColor() }} // Random color for indicator
+                    ></span>
+                    <label>Shift {shift.shift}</label>
+                  </div>
+                ))}
               </div>
             </div>
           </div>