adding cpu and memory to ags

.config/ags/config.js

@@ -6,6 +6,7 @@ const audio = await Service.import('audio')
 
 import { NotificationPopups } from "./notifications.js"
 import { BatteryPopup } from "./battery.js"
+import { cpuProgress, ramProgress } from "./cpu.js"
 
 const laptop = Utils.exec(`hostname`) === "syl";
 // const display = Gdk.Display.get_default();
@@ -165,6 +166,8 @@ function Bar(monitor = 0) {
                 css: "margin-right: 1em;",
                 children: [
                     expander,
+                    ramProgress,
+                    cpuProgress,
                     volume_indicator,
                     system_tray(),
                     laptop ? battery_function() : null

.config/ags/cpu.js

@@ -0,0 +1,72 @@
+const divide = ([total, free]) => free / total
+
+const cpu = Variable(0, {
+    poll: [2000, 'top -b -n 1', out => divide([100, out.split('\n')
+        .find(line => line.includes('Cpu(s)'))
+        .split(/\s+/)[1]
+        .replace(',', '.')])],
+})
+
+const ram = Variable(0, {
+    poll: [2000, 'free', out => divide(out.split('\n')
+        .find(line => line.includes('Mem:'))
+        .split(/\s+/)
+        .splice(1, 2))],
+})
+
+export const cpuProgress = Widget.CircularProgress({
+    value: cpu.bind(),
+    rounded: true,
+    start_at: 0.75,
+    class_name: cpu.bind().as(cpu => {
+        switch(true) {
+        case (cpu < .25):
+            return "cpu_low";
+            break;
+        case (cpu < .7):
+            return "cpu";
+            break;
+        default:
+            return "cpu_high";
+            break;
+        }
+    }),
+    child: Widget.Icon({
+        class_name: "cpu_icon",
+        icon: "cpu-symbolic",
+    }),
+    tooltip_text: cpu.bind().as(cpu => cpu * 100 + "%"),
+})
+
+export const ramProgress = Widget.CircularProgress({
+    value: ram.bind(),
+    rounded: true,
+    start_at: 0.75,
+    class_name: ram.bind().as(ram => {
+        switch(true) {
+        case (ram < .25):
+            return "ram_low";
+            break;
+        case (ram < .7):
+            return "ram";
+            break;
+        default:
+            return "ram_high";
+            break;
+        }
+    }),
+    child: Widget.Icon({
+        class_name: "ram_icon",
+        icon: "ram-symbolic",
+    }),
+    tooltip_text: ram.bind().as(ram => ram * 100 + "%"),
+})
+
+// export function cpuProgress() {
+//     return Widget.CircularProgress({
+//         value: cpu.bind(),
+//         rounded: true,
+//         start_at: 0.75,
+//         class_name: "cpu",
+//     })
+// }

.config/ags/style.css

@@ -185,3 +185,71 @@ window.notification-popups box.notifications {
 .battery-close:hover {
     background-color: @base08;
 }
+
+.cpu {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base0A;
+}
+
+.cpu_icon {
+    font-size: 12px;
+}
+
+.cpu_low {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base0B;
+}
+
+.cpu_high {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base08;
+}
+
+.ram_low {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base0B;
+}
+
+.ram {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base0A;
+}
+
+.ram_high {
+    min-width: 30px;
+    min-height: 30px;
+    font-size: 4px;
+    margin-top: 1em;
+    margin: 1em;
+    background-color: @basetransparent;
+    color: @base08;
+}
+
+.ram_icon {
+    font-size: 12px;
+}