37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import type { Metrics } from '../domain/types';
|
|
|
|
const metricLabels: Array<[keyof Metrics, string, string]> = [
|
|
['processedCount', 'Processed', 'items'],
|
|
['successCount', 'Success', 'items'],
|
|
['errorCount', 'Errors', 'items'],
|
|
['avgCycleTimeMs', 'Avg cycle', 'ms'],
|
|
['throughputItemsPerMin', 'Throughput', 'items/min'],
|
|
['cvLatencyMs', 'CV latency', 'ms'],
|
|
['actuatorLatencyMs', 'Actuator latency', 'ms'],
|
|
['queueLength', 'Queue length', 'items'],
|
|
['queueDelayMs', 'Queue delay', 'ms'],
|
|
['conveyorSpeedMps', 'Conveyor speed', 'm/s'],
|
|
['pidTargetSpeedMps', 'PID target', 'm/s'],
|
|
['pidActualSpeedMps', 'PID actual', 'm/s'],
|
|
];
|
|
|
|
export default function MetricsPanel({ metrics }: { metrics: Metrics }) {
|
|
return (
|
|
<section className="panel metrics-panel">
|
|
<div className="panel-heading">
|
|
<p className="eyebrow">Metrics</p>
|
|
<h2>Line telemetry</h2>
|
|
</div>
|
|
<div className="metric-grid">
|
|
{metricLabels.map(([key, label, unit]) => (
|
|
<div className="metric-card" key={key}>
|
|
<span>{label}</span>
|
|
<strong>{metrics[key]}</strong>
|
|
<em>{unit}</em>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|