qml: cut down on inline components for performance

2026-04-08 23:02:05 -04:00 · 2026-04-07 10:57:11 -04:00
parent 3194fc3fbe
commit f6e590a518
22 changed files with 1098 additions and 1051 deletions
--- a/quickshell/Modules/ProcessList/PerformanceCard.qml
+++ b/quickshell/Modules/ProcessList/PerformanceCard.qml
@@ -0,0 +1,160 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: card
+
+    property string title: ""
+    property string icon: ""
+    property string value: ""
+    property string subtitle: ""
+    property color accentColor: Theme.primary
+    property var history: []
+    property var history2: null
+    property real maxValue: 100
+    property bool showSecondary: false
+    property string extraInfo: ""
+    property color extraInfoColor: Theme.surfaceVariantText
+    property int historySize: 60
+
+    radius: Theme.cornerRadius
+    color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    border.color: Theme.outlineLight
+    border.width: 1
+
+    Canvas {
+        id: graphCanvas
+        anchors.fill: parent
+        anchors.margins: 4
+        renderStrategy: Canvas.Cooperative
+
+        property var hist: card.history
+        property var hist2: card.history2
+
+        onHistChanged: requestPaint()
+        onHist2Changed: requestPaint()
+        onWidthChanged: requestPaint()
+        onHeightChanged: requestPaint()
+
+        onPaint: {
+            const ctx = getContext("2d");
+            ctx.reset();
+            ctx.clearRect(0, 0, width, height);
+
+            if (!hist || hist.length < 2)
+                return;
+
+            let max = card.maxValue;
+            if (max <= 0) {
+                max = 1;
+                for (let k = 0; k < hist.length; k++)
+                    max = Math.max(max, hist[k]);
+                if (hist2) {
+                    for (let l = 0; l < hist2.length; l++)
+                        max = Math.max(max, hist2[l]);
+                }
+                max *= 1.1;
+            }
+
+            const c = card.accentColor;
+            const grad = ctx.createLinearGradient(0, 0, 0, height);
+            grad.addColorStop(0, Qt.rgba(c.r, c.g, c.b, 0.25));
+            grad.addColorStop(1, Qt.rgba(c.r, c.g, c.b, 0.02));
+
+            ctx.fillStyle = grad;
+            ctx.beginPath();
+            ctx.moveTo(0, height);
+            for (let i = 0; i < hist.length; i++) {
+                const x = (width / (card.historySize - 1)) * i;
+                const y = height - (hist[i] / max) * height * 0.8;
+                ctx.lineTo(x, y);
+            }
+            ctx.lineTo((width / (card.historySize - 1)) * (hist.length - 1), height);
+            ctx.closePath();
+            ctx.fill();
+
+            ctx.strokeStyle = Qt.rgba(c.r, c.g, c.b, 0.8);
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            for (let j = 0; j < hist.length; j++) {
+                const px = (width / (card.historySize - 1)) * j;
+                const py = height - (hist[j] / max) * height * 0.8;
+                j === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);
+            }
+            ctx.stroke();
+
+            if (hist2 && hist2.length >= 2 && card.showSecondary) {
+                ctx.strokeStyle = Qt.rgba(c.r, c.g, c.b, 0.4);
+                ctx.lineWidth = 1.5;
+                ctx.setLineDash([4, 4]);
+                ctx.beginPath();
+                for (let m = 0; m < hist2.length; m++) {
+                    const sx = (width / (card.historySize - 1)) * m;
+                    const sy = height - (hist2[m] / max) * height * 0.8;
+                    m === 0 ? ctx.moveTo(sx, sy) : ctx.lineTo(sx, sy);
+                }
+                ctx.stroke();
+                ctx.setLineDash([]);
+            }
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: Theme.spacingM
+        spacing: Theme.spacingXS
+
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: Theme.spacingS
+
+            DankIcon {
+                name: card.icon
+                size: Theme.iconSize
+                color: card.accentColor
+            }
+
+            StyledText {
+                text: card.title
+                font.pixelSize: Theme.fontSizeLarge
+                font.weight: Font.Bold
+                color: Theme.surfaceText
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+
+            StyledText {
+                text: card.extraInfo
+                font.pixelSize: Theme.fontSizeSmall
+                font.family: SettingsData.monoFontFamily
+                color: card.extraInfoColor
+                visible: card.extraInfo.length > 0
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+
+        StyledText {
+            text: card.value
+            font.pixelSize: Theme.fontSizeXLarge
+            font.family: SettingsData.monoFontFamily
+            font.weight: Font.Bold
+            color: Theme.surfaceText
+        }
+
+        StyledText {
+            text: card.subtitle
+            font.pixelSize: Theme.fontSizeSmall
+            font.family: SettingsData.monoFontFamily
+            color: Theme.surfaceVariantText
+            elide: Text.ElideRight
+            Layout.fillWidth: true
+        }
+    }
+}