47 lines
1.0 KiB
Svelte
47 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { CountStat } from '#lib/btop/types';
|
|
|
|
let { items }: { items: CountStat[] } = $props();
|
|
|
|
const highest = $derived(Math.max(1, ...items.map((item) => item.count)));
|
|
</script>
|
|
|
|
<div class="count-bars">
|
|
{#each items as item (item.label)}
|
|
<span class="label" title={item.label}>{item.label}</span>
|
|
<span class="track"><span style:width="{(item.count / highest) * 100}%" style:background="var(--{item.color})"></span></span>
|
|
<span class="count" style:color="var(--{item.color})">{item.count}</span>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.count-bars {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.track {
|
|
display: block;
|
|
height: 6px;
|
|
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
|
}
|
|
|
|
.track span {
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.count {
|
|
text-align: right;
|
|
}
|
|
</style>
|