Vishnu
135633ef7a
- Removed the random color generation function from ProductionCapacity component. - Updated ThroughputSummary component to remove unused imports. - Simplified LogList component by removing unnecessary icons and integrating GetLogIcon for log types. - Enhanced LoggerContext to support a new "success" log type and optimized logger methods with useMemo. - Adjusted SimulationPlayer to conditionally render analysis components. - Deleted index.css and removed its import from index.tsx. - Cleaned up builder module by removing unused imports and optimizing state management. - Removed savedTheme from Ground component. - Changed log message from info to warning in Project component. - Updated log color variables in SCSS files for better visibility and consistency. - Added new log icons for success, error, info, and warning in LogIcons component. - Created GetLogIcon utility to streamline log icon rendering based on log type.
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { ThroughputSummaryIcon } from "../../icons/analysis";
|
|
|
|
const ProductionCapacity = ({
|
|
progressPercent = 50,
|
|
avgProcessTime = "28.4 Secs/unit",
|
|
machineUtilization = "78%",
|
|
throughputValue = 128,
|
|
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
|
|
}) => {
|
|
const totalBars = 6;
|
|
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
|
|
const partialFillPercent =
|
|
((progressPercent / 100) * totalBars - barsToFill) * 100;
|
|
|
|
return (
|
|
<div className="productionCapacity-container analysis-card">
|
|
<div className="productionCapacity-wrapper analysis-card-wrapper">
|
|
<div className="card-header">
|
|
<div className="header">
|
|
<div className="main-header">Throughput Summary</div>
|
|
<div className="sub-header">
|
|
{timeRange.startTime} - {timeRange.endTime}
|
|
</div>
|
|
</div>
|
|
<div className="icon-wrapper">
|
|
<ThroughputSummaryIcon />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="process-container">
|
|
<div className="throughput-value">
|
|
<span className="value">{throughputValue}</span> Units/hour
|
|
</div>
|
|
|
|
{/* Dynamic Progress Bar */}
|
|
<div className="progress-bar-wrapper">
|
|
{[...Array(totalBars)].map((_, i) => (
|
|
<div className="progress-bar" key={i}>
|
|
{i < barsToFill ? (
|
|
<div className="bar-fill full" />
|
|
) : i === barsToFill ? (
|
|
<div
|
|
className="bar-fill partial"
|
|
style={{ width: `${partialFillPercent}%` }}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metrics-section">
|
|
<div className="metric">
|
|
<span className="label">Avg. Process Time</span>
|
|
<span className="value">{avgProcessTime}</span>
|
|
</div>
|
|
<div className="metric">
|
|
<span className="label">Machine Utilization</span>
|
|
<span className="value">{machineUtilization}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductionCapacity;
|