188 lines
8.0 KiB
TypeScript
188 lines
8.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement } from "chart.js";
|
|
import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
|
|
import SkeletonUI from "../../templates/SkeletonUI";
|
|
import { useInputValues, useMachineUptime, useProductionCapacityData } from "../../../store/builder/store";
|
|
|
|
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
|
|
|
|
const ThroughputSummary: React.FC = () => {
|
|
// Define all data internally within the component
|
|
const timeRange = {
|
|
startTime: "08:00 AM",
|
|
endTime: "06:00 PM",
|
|
};
|
|
|
|
const { machineActiveTime } = useMachineUptime();
|
|
const energyConsumption = {
|
|
energyConsumed: 456,
|
|
unit: "KWH",
|
|
};
|
|
|
|
// Dynamic shift data
|
|
const shiftUtilization = [
|
|
{ shift: 1, percentage: 30, color: "#F3C64D" },
|
|
{ shift: 2, percentage: 40, color: "#67B3F4" },
|
|
{ shift: 3, percentage: 30, color: "#7981F5" },
|
|
];
|
|
|
|
const { productionCapacityData } = useProductionCapacityData();
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
display: false, // hide X axis completely
|
|
},
|
|
y: {
|
|
display: false, // hide Y axis completely
|
|
min: 0, // force Y axis to start at 0
|
|
},
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
};
|
|
|
|
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,
|
|
};
|
|
|
|
const { inputValues } = useInputValues();
|
|
// 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, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
//
|
|
if (productionCapacityData > 0) {
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 3000);
|
|
} else {
|
|
setIsLoading(true);
|
|
}
|
|
}, [productionCapacityData]);
|
|
|
|
return (
|
|
<>
|
|
{!isLoading && (
|
|
<div className="production analysis-card">
|
|
<div className="production-wrapper analysis-card-wrapper">
|
|
<div className="card-header">
|
|
<div className="header">
|
|
<div className="main-header">Production Capacity</div>
|
|
<div className="sub-header">
|
|
{timeRange.startTime} - {timeRange.endTime}
|
|
</div>
|
|
</div>
|
|
<div className="icon-wrapper">
|
|
<ProductionCapacityIcon />
|
|
</div>
|
|
</div>
|
|
|
|
{!isLoading ? (
|
|
<>
|
|
<div className="process-container">
|
|
<div className="throughput-value">
|
|
<span className="value">{productionCapacityData}</span> Units/Month
|
|
</div>
|
|
<div className="lineChart">
|
|
<div className="assetUsage">
|
|
<div className="key">Asset usage</div>
|
|
<div className="value">{parseFloat(inputValues["Yield rate"])}%</div>
|
|
</div>
|
|
<Line data={chartData} options={chartOptions} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="footer">
|
|
<div className="energyConsumption footer-card">
|
|
<div className="header">Energy Consumption</div>
|
|
<div className="value-container">
|
|
<div className="energy-icon">
|
|
<PowerIcon />
|
|
</div>
|
|
<div className="value-wrapper">
|
|
<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">{throughputData.assetUsage}%</div>
|
|
|
|
<div className="progress-wrapper">
|
|
{/* Dynamically create progress bars based on shiftUtilization array */}
|
|
{shiftUtilization.map((shift, index) => (
|
|
<div
|
|
key={shift.shift}
|
|
className={`progress shift-${shift.shift}`}
|
|
style={{
|
|
width: `${shift.percentage}%`,
|
|
backgroundColor: shift.color,
|
|
}}
|
|
></div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="progress-indicator">
|
|
{/* Dynamically create shift indicators with random colors */}
|
|
{shiftUtilization.map((shift, index) => (
|
|
<div className="shift-wrapper" key={shift.shift}>
|
|
<span
|
|
className={`indicator shift-${shift.shift}`}
|
|
style={{ backgroundColor: shift.color }} // Random color for indicator
|
|
></span>
|
|
<label>Shift {shift.shift}</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SkeletonUI type={"default"} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ThroughputSummary;
|