feat: dashboard performance panel

2 files changed, 239 insertions, 6 deletions

diff --git a/modules/dashboard/Content.qml b/modules/dashboard/Content.qml
index 4026989..5b88f9b 100644
--- a/modules/dashboard/Content.qml
+++ b/modules/dashboard/Content.qml
@@ -54,18 +54,21 @@ Item {
                 radius: Appearance.rounding.normal
                 color: "transparent"
 
-                Dash {
-                    clip: true
-                }
+                Dash {}
             }
 
             ClippingWrapperRectangle {
                 radius: Appearance.rounding.normal
                 color: "transparent"
 
-                Media {
-                    clip: true
-                }
+                Media {}
+            }
+
+            ClippingWrapperRectangle {
+                radius: Appearance.rounding.normal
+                color: "transparent"
+
+                Performance {}
             }
         }
     }
diff --git a/modules/dashboard/Performance.qml b/modules/dashboard/Performance.qml
new file mode 100644
index 0000000..9334874
--- /dev/null
+++ b/modules/dashboard/Performance.qml
@@ -0,0 +1,230 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+
+Row {
+    id: root
+
+    spacing: Appearance.spacing.large * 3
+    padding: Appearance.padding.large
+    leftPadding: padding * 2
+    rightPadding: padding * 3
+
+    Resource {
+        value1: Math.min(1, SystemUsage.gpuTemp / 90)
+        value2: SystemUsage.gpuPerc
+
+        label1: `${Math.ceil(SystemUsage.gpuTemp)}°C`
+        label2: `${Math.round(SystemUsage.gpuPerc * 100)}%`
+
+        sublabel1: "GPU temp"
+        sublabel2: "Usage"
+    }
+
+    Resource {
+        primary: true
+
+        value1: Math.min(1, SystemUsage.cpuTemp / 90)
+        value2: SystemUsage.cpuPerc
+
+        label1: `${Math.ceil(SystemUsage.cpuTemp)}°C`
+        label2: `${Math.round(SystemUsage.cpuPerc * 100)}%`
+
+        sublabel1: "CPU temp"
+        sublabel2: "Usage"
+    }
+
+    Resource {
+        value1: SystemUsage.memPerc
+        value2: SystemUsage.storagePerc
+
+        label1: {
+            const fmt = SystemUsage.formatKib(SystemUsage.memUsed);
+            return `${+fmt.value.toFixed(1)}${fmt.unit}`;
+        }
+        label2: {
+            const fmt = SystemUsage.formatKib(SystemUsage.storageUsed);
+            return `${Math.floor(fmt.value)}${fmt.unit}`;
+        }
+
+        sublabel1: "Memory"
+        sublabel2: "Storage"
+    }
+
+    component Resource: Item {
+        id: res
+
+        required property real value1
+        required property real value2
+        required property string sublabel1
+        required property string sublabel2
+        required property string label1
+        required property string label2
+
+        property bool primary
+        readonly property real primaryMult: primary ? 1.2 : 1
+
+        readonly property real thickness: DashboardConfig.sizes.resourceProgessThickness * primaryMult
+
+        property color fg1: Colours.palette.m3primary
+        property color fg2: Colours.palette.m3secondary
+        property color bg1: Colours.palette.m3primaryContainer
+        property color bg2: Colours.palette.m3secondaryContainer
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        implicitWidth: DashboardConfig.sizes.resourceSize * primaryMult
+        implicitHeight: DashboardConfig.sizes.resourceSize * primaryMult
+
+        onValue1Changed: canvas.requestPaint()
+        onValue2Changed: canvas.requestPaint()
+        onFg1Changed: canvas.requestPaint()
+        onFg2Changed: canvas.requestPaint()
+        onBg1Changed: canvas.requestPaint()
+        onBg2Changed: canvas.requestPaint()
+
+        Column {
+            anchors.centerIn: parent
+
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.label1
+                font.pointSize: Appearance.font.size.extraLarge * res.primaryMult
+            }
+
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.sublabel1
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.smaller * res.primaryMult
+            }
+        }
+
+        Column {
+            anchors.horizontalCenter: parent.right
+            anchors.top: parent.verticalCenter
+            anchors.horizontalCenterOffset: -res.thickness / 2
+            anchors.topMargin: res.thickness / 2 + Appearance.spacing.small
+
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.label2
+                font.pointSize: Appearance.font.size.smaller * res.primaryMult
+            }
+
+            StyledText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.sublabel2
+                color: Colours.palette.m3onSurfaceVariant
+                font.pointSize: Appearance.font.size.small * res.primaryMult
+            }
+        }
+
+        Canvas {
+            id: canvas
+
+            readonly property real centerX: width / 2
+            readonly property real centerY: height / 2
+
+            readonly property real arc1Start: degToRad(45)
+            readonly property real arc1End: degToRad(220)
+            readonly property real arc2Start: degToRad(230)
+            readonly property real arc2End: degToRad(360)
+
+            function degToRad(deg: int): real {
+                return deg * Math.PI / 180;
+            }
+
+            anchors.fill: parent
+
+            onPaint: {
+                const ctx = getContext("2d");
+                ctx.reset();
+
+                ctx.lineWidth = res.thickness;
+                ctx.lineCap = "round";
+
+                const radius = (Math.min(width, height) - ctx.lineWidth) / 2;
+                const cx = centerX;
+                const cy = centerY;
+                const a1s = arc1Start;
+                const a1e = arc1End;
+                const a2s = arc2Start;
+                const a2e = arc2End;
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a1s, a1e, false);
+                ctx.strokeStyle = res.bg1;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a1s, (a1e - a1s) * res.value1 + a1s, false);
+                ctx.strokeStyle = res.fg1;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a2s, a2e, false);
+                ctx.strokeStyle = res.bg2;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a2s, (a2e - a2s) * res.value2 + a2s, false);
+                ctx.strokeStyle = res.fg2;
+                ctx.stroke();
+            }
+        }
+
+        Behavior on value1 {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        Behavior on value2 {
+            NumberAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        Behavior on fg1 {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        Behavior on fg2 {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        Behavior on bg1 {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+
+        Behavior on bg2 {
+            ColorAnimation {
+                duration: Appearance.anim.durations.normal
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+}