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">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { profile } from '#lib/content';
|
|
||||||
import { randomWalk, usageTone } from '#lib/btop/simulate';
|
import { randomWalk, usageTone } from '#lib/btop/simulate';
|
||||||
import BtopBox from './BtopBox.svelte';
|
import BtopBox from './BtopBox.svelte';
|
||||||
|
|
||||||
const historyLength = 48;
|
const historyLength = 48;
|
||||||
const updateInterval = 1000;
|
const updateInterval = 1000;
|
||||||
const coreNames = (profile.skills.Languages ?? []).slice(0, 6);
|
|
||||||
|
|
||||||
let history = $state<number[]>(Array.from({ length: historyLength }, () => 20 + Math.random() * 30));
|
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));
|
const totalUsage = $derived(Math.round(history.at(-1) ?? 0));
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
history = [...history.slice(1), randomWalk(history.at(-1) ?? 40, 18, 5, 98)];
|
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);
|
}, updateInterval);
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
});
|
});
|
||||||
@@ -33,16 +29,6 @@
|
|||||||
<span class="bar" style:height="{value}%" style:background="var(--{usageTone(value)})"></span>
|
<span class="bar" style:height="{value}%" style:background="var(--{usageTone(value)})"></span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</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>
|
</BtopBox>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -69,7 +55,7 @@
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
gap: 1px;
|
gap: 1px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
margin: 0.4rem 0 0.6rem;
|
margin-top: 0.4rem;
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
|
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -79,40 +65,4 @@
|
|||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
transition: height 0.4s ease;
|
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>
|
</style>
|
||||||
Reference in new issue
Block a user