Remove language cores from btop cpu panel
This commit is contained in:
1 parent
0659b82e6f
commit
c819436481
1 file changed
+1
-51
@@ -1,22 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { profile } from '#lib/content';
|
||||
import { randomWalk, usageTone } from '#lib/btop/simulate';
|
||||
import BtopBox from './BtopBox.svelte';
|
||||
|
||||
const historyLength = 48;
|
||||
const updateInterval = 1000;
|
||||
const coreNames = (profile.skills.Languages ?? []).slice(0, 6);
|
||||
|
||||
let history = $state<number[]>(Array.from({ length: historyLength }, () => 20 + Math.random() * 30));
|
||||
let cores = $state(coreNames.map((name) => ({ name, usage: 20 + Math.random() * 60 })));
|
||||
|
||||
const totalUsage = $derived(Math.round(history.at(-1) ?? 0));
|
||||
|
||||
onMount(() => {
|
||||
const timer = setInterval(() => {
|
||||
history = [...history.slice(1), randomWalk(history.at(-1) ?? 40, 18, 5, 98)];
|
||||
cores = cores.map((core) => ({ ...core, usage: randomWalk(core.usage, 15, 3, 100) }));
|
||||
}, updateInterval);
|
||||
return () => clearInterval(timer);
|
||||
});
|
||||
@@ -33,16 +29,6 @@
|
||||
<span class="bar" style:height="{value}%" style:background="var(--{usageTone(value)})"></span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="cores">
|
||||
{#each cores as core (core.name)}
|
||||
<div class="core">
|
||||
<span class="core-name">{core.name}</span>
|
||||
<span class="core-meter"><span style:width="{core.usage}%" style:background="var(--{usageTone(core.usage)})"></span></span>
|
||||
<span class="core-value">{Math.round(core.usage)}%</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</BtopBox>
|
||||
|
||||
<style>
|
||||
@@ -69,7 +55,7 @@
|
||||
align-items: flex-end;
|
||||
gap: 1px;
|
||||
height: 70px;
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
margin-top: 0.4rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
|
||||
}
|
||||
|
||||
@@ -79,40 +65,4 @@
|
||||
opacity: 0.85;
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.cores {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 0.2rem 1rem;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.core {
|
||||
display: grid;
|
||||
grid-template-columns: 6.5rem 1fr 2.5rem;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.core-name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.core-meter {
|
||||
height: 6px;
|
||||
background: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
}
|
||||
|
||||
.core-meter span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.core-value {
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user