Mercurial > code > home > repos > light9

comparison web/metrics/StatsProcess.ts @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/metrics/StatsProcess.ts@06bf6dae8e64
children
comparison
equal deleted inserted replaced
2375:623836db99af 2376:4556eebe5d73
1 import { LitElement, html, css } from "lit";
2 import { customElement, property } from "lit/decorators.js";
3 import debug from "debug";
4
5 const log = debug("process");
6
7 const remap = (x: number, lo: number, hi: number, outLo: number, outHi: number) => {
8 return outLo + (outHi - outLo) * Math.max(0, Math.min(1, (x - lo) / (hi - lo)));
9 };
10
11 @customElement("stats-process")
12 export class StatsProcess extends LitElement {
13 // inspired by https://codepen.io/qiruiyin/pen/qOopQx
14 @property() cpu = 0; // process_cpu_seconds_total
15 @property() mem = 0; // process_resident_memory_bytes
16
17 w = 64;
18 h = 64;
19 revs = 0;
20 prev = 0;
21 canvas?: HTMLCanvasElement;
22 ctx?: CanvasRenderingContext2D;
23 connectedCallback() {
24 super.connectedCallback();
25 this.initCanvas(this.shadowRoot!.firstElementChild as HTMLCanvasElement);
26 this.prev = Date.now() / 1000;
27
28 var animate = () => {
29 requestAnimationFrame(animate);
30 this.redraw();
31 };
32 animate();
33 }
34 initCanvas(canvas: HTMLCanvasElement) {
35 if (!canvas) {
36 return;
37 }
38 this.canvas = canvas;
39 this.ctx = this.canvas.getContext("2d")!;
40
41 this.canvas.width = this.w;
42 this.canvas.height = this.h;
43 }
44 redraw() {
45 if (!this.ctx) {
46 this.initCanvas(this.shadowRoot!.firstElementChild as HTMLCanvasElement);
47 }
48 if (!this.ctx) return;
49
50 this.canvas!.setAttribute("title",
51 `cpu ${new Number(this.cpu).toPrecision(3)}% mem ${new Number(this.mem).toPrecision(3)}MB`);
52
53 const now = Date.now() / 1000;
54 const ctx = this.ctx;
55 ctx.beginPath();
56 // wrong type of fade- never goes to 0
57 ctx.fillStyle = "#00000003";
58 ctx.fillRect(0, 0, this.w, this.h);
59 const dt = now - this.prev;
60 this.prev = now;
61
62 const size = remap(this.mem.valueOf() / 1024 / 1024, /*in*/ 20, 80, /*out*/ 3, 30);
63 this.revs += dt * remap(this.cpu.valueOf(), /*in*/ 0, 100, /*out*/ 4, 120);
64 const rad = remap(size, /*in*/ 3, 30, /*out*/ 14, 5);
65
66 var x = this.w / 2 + rad * Math.cos(this.revs / 6.28),
67 y = this.h / 2 + rad * Math.sin(this.revs / 6.28);
68
69 ctx.save();
70 ctx.beginPath();
71 ctx.fillStyle = "hsl(194, 100%, 42%)";
72 ctx.arc(x, y, size, 0, 2 * Math.PI);
73 ctx.fill();
74 ctx.restore();
75 }
76
77 static styles = [
78 css`
79 :host {
80 display: inline-block;
81 width: 64px;
82 height: 64px;
83 }
84 `,
85 ];
86
87 render() {
88 return html`<canvas></canvas>`;
89 }
90 }