web/src/lib/ResourceBar.svelte

Ref: main v0.0.5   Size: 1.7 KiB   History

<script lang="ts">
	import { capacityReading } from '$lib/fleet.svelte';

	let {
		label,
		used,
		total,
		unit = ''
	}: { label: string; used: number; total: number; unit?: string } = $props();

	const reading = $derived(capacityReading(used, total));
</script>

<div class="bar">
	<div class="head">
		<span class="label">{label}</span>
		{#if total > 0}
			<span class="nums">
				{used} / {total}{unit}
				{#if reading.over > 0}
					<span class="over">· over by {reading.over}{unit}</span>
				{:else}
					<span class="free">· {reading.free}{unit} free</span>
				{/if}
			</span>
		{:else}
			<span class="nums dim">— (offline)</span>
		{/if}
	</div>
	<div class="track">
		<div class="fill {reading.level}" style="width: {reading.pct}%"></div>
	</div>
</div>

<style>
	.bar {
		margin: 0.35em 0;
	}
	.head {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		margin-bottom: 2px;
	}
	.label {
		color: var(--faint);
	}
	.nums {
		font-variant-numeric: tabular-nums;
	}
	.free,
	.dim {
		color: var(--faint);
	}
	/* Over-allocation is not a quieter kind of "free": it is the one reading on
	   this panel worth looking at, so it sets in the same bold the fleet
	   table's load meter uses past 1.0. */
	.over {
		font-weight: bold;
	}
	/* The same meter the fleet table uses, stretched to the panel: a wash track
	   with an ink fill. The numbers above it are the reading; the bar is the
	   glance. Past 90% the fill turns, because that is a wall you can hit. */
	.track {
		height: 3px;
		background: var(--wash);
		overflow: hidden;
	}
	.fill {
		height: 100%;
		background: var(--ink);
		transition: width 0.3s;
	}
	.fill.hot {
		background: var(--bad);
	}
</style>