feat: replace canvas -> c++ component

Also add c++ ring buffer

1 files changed, 26 insertions, 166 deletions

diff --git a/modules/dashboard/Performance.qml b/modules/dashboard/Performance.qml
index 306f9b8..618d4e6 100644
--- a/modules/dashboard/Performance.qml
+++ b/modules/dashboard/Performance.qml
@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell.Services.UPower
+import Caelestia.Internal
 import qs.components
 import qs.components.misc
 import qs.config
@@ -486,51 +487,15 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                Canvas {
-                    id: gaugeCanvas
-
+                ArcGauge {
                     anchors.centerIn: parent
                     width: Math.min(parent.width, parent.height)
                     height: width
-                    onPaint: {
-                        const ctx = getContext("2d");
-                        ctx.reset();
-                        const cx = width / 2;
-                        const cy = height / 2;
-                        const radius = (Math.min(width, height) - 12) / 2;
-                        const lineWidth = 10;
-                        ctx.beginPath();
-                        ctx.arc(cx, cy, radius, gaugeCard.arcStartAngle, gaugeCard.arcStartAngle + gaugeCard.arcSweep);
-                        ctx.lineWidth = lineWidth;
-                        ctx.lineCap = "round";
-                        ctx.strokeStyle = Colours.layer(Colours.palette.m3surfaceContainerHigh, 2);
-                        ctx.stroke();
-                        if (gaugeCard.animatedPercentage > 0) {
-                            ctx.beginPath();
-                            ctx.arc(cx, cy, radius, gaugeCard.arcStartAngle, gaugeCard.arcStartAngle + gaugeCard.arcSweep * gaugeCard.animatedPercentage);
-                            ctx.lineWidth = lineWidth;
-                            ctx.lineCap = "round";
-                            ctx.strokeStyle = gaugeCard.accentColor;
-                            ctx.stroke();
-                        }
-                    }
-                    Component.onCompleted: requestPaint()
-
-                    Connections {
-                        function onAnimatedPercentageChanged() {
-                            gaugeCanvas.requestPaint();
-                        }
-
-                        target: gaugeCard
-                    }
-
-                    Connections {
-                        function onPaletteChanged() {
-                            gaugeCanvas.requestPaint();
-                        }
-
-                        target: Colours
-                    }
+                    percentage: gaugeCard.animatedPercentage
+                    accentColor: gaugeCard.accentColor
+                    trackColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+                    startAngle: gaugeCard.arcStartAngle
+                    sweepAngle: gaugeCard.arcSweep
                 }
 
                 StyledText {
@@ -642,51 +607,15 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                Canvas {
-                    id: storageGaugeCanvas
-
+                ArcGauge {
                     anchors.centerIn: parent
                     width: Math.min(parent.width, parent.height)
                     height: width
-                    onPaint: {
-                        const ctx = getContext("2d");
-                        ctx.reset();
-                        const cx = width / 2;
-                        const cy = height / 2;
-                        const radius = (Math.min(width, height) - 12) / 2;
-                        const lineWidth = 10;
-                        ctx.beginPath();
-                        ctx.arc(cx, cy, radius, storageGaugeCard.arcStartAngle, storageGaugeCard.arcStartAngle + storageGaugeCard.arcSweep);
-                        ctx.lineWidth = lineWidth;
-                        ctx.lineCap = "round";
-                        ctx.strokeStyle = Colours.layer(Colours.palette.m3surfaceContainerHigh, 2);
-                        ctx.stroke();
-                        if (storageGaugeCard.animatedPercentage > 0) {
-                            ctx.beginPath();
-                            ctx.arc(cx, cy, radius, storageGaugeCard.arcStartAngle, storageGaugeCard.arcStartAngle + storageGaugeCard.arcSweep * storageGaugeCard.animatedPercentage);
-                            ctx.lineWidth = lineWidth;
-                            ctx.lineCap = "round";
-                            ctx.strokeStyle = storageGaugeCard.accentColor;
-                            ctx.stroke();
-                        }
-                    }
-                    Component.onCompleted: requestPaint()
-
-                    Connections {
-                        function onAnimatedPercentageChanged() {
-                            storageGaugeCanvas.requestPaint();
-                        }
-
-                        target: storageGaugeCard
-                    }
-
-                    Connections {
-                        function onPaletteChanged() {
-                            storageGaugeCanvas.requestPaint();
-                        }
-
-                        target: Colours
-                    }
+                    percentage: storageGaugeCard.animatedPercentage
+                    accentColor: storageGaugeCard.accentColor
+                    trackColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
+                    startAngle: storageGaugeCard.arcStartAngle
+                    sweepAngle: storageGaugeCard.arcSweep
                 }
 
                 StyledText {
@@ -749,96 +678,27 @@ Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true
 
-                Canvas {
-                    id: sparklineCanvas
+                SparklineItem {
+                    id: sparkline
 
-                    property var downHistory: NetworkUsage.downloadHistory
-                    property var upHistory: NetworkUsage.uploadHistory
-                    property real targetMax: 1024
+                    property real targetMax: Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024)
                     property real smoothMax: targetMax
-                    property real slideProgress: 0
-                    property int _tickCount: 0
-                    property int _lastTickCount: -1
-
-                    function checkAndAnimate(): void {
-                        const currentLength = (downHistory || []).length;
-                        if (currentLength > 0 && _tickCount !== _lastTickCount) {
-                            _lastTickCount = _tickCount;
-                            updateMax();
-                        }
-                    }
-
-                    function updateMax(): void {
-                        const downHist = downHistory || [];
-                        const upHist = upHistory || [];
-                        const allValues = downHist.concat(upHist);
-                        targetMax = Math.max(...allValues, 1024);
-                        requestPaint();
-                    }
 
                     anchors.fill: parent
-                    onDownHistoryChanged: checkAndAnimate()
-                    onUpHistoryChanged: checkAndAnimate()
-                    onSmoothMaxChanged: requestPaint()
-                    onSlideProgressChanged: requestPaint()
-
-                    onPaint: {
-                        const ctx = getContext("2d");
-                        ctx.reset();
-                        const w = width;
-                        const h = height;
-                        const downHist = downHistory || [];
-                        const upHist = upHistory || [];
-                        if (downHist.length < 2 && upHist.length < 2)
-                            return;
-
-                        const maxVal = smoothMax;
-
-                        const drawLine = (history, color, fillAlpha) => {
-                            if (history.length < 2)
-                                return;
-
-                            const len = history.length;
-                            const stepX = w / (NetworkUsage.historyLength - 1);
-                            const startX = w - (len - 1) * stepX - stepX * slideProgress + stepX;
-                            ctx.beginPath();
-                            ctx.moveTo(startX, h - (history[0] / maxVal) * h);
-                            for (let i = 1; i < len; i++) {
-                                const x = startX + i * stepX;
-                                const y = h - (history[i] / maxVal) * h;
-                                ctx.lineTo(x, y);
-                            }
-                            ctx.strokeStyle = color;
-                            ctx.lineWidth = 2;
-                            ctx.lineCap = "round";
-                            ctx.lineJoin = "round";
-                            ctx.stroke();
-                            ctx.lineTo(startX + (len - 1) * stepX, h);
-                            ctx.lineTo(startX, h);
-                            ctx.closePath();
-                            ctx.fillStyle = Qt.rgba(Qt.color(color).r, Qt.color(color).g, Qt.color(color).b, fillAlpha);
-                            ctx.fill();
-                        };
-
-                        drawLine(upHist, Colours.palette.m3secondary.toString(), 0.15);
-                        drawLine(downHist, Colours.palette.m3tertiary.toString(), 0.2);
-                    }
-
-                    Component.onCompleted: updateMax()
-
-                    Connections {
-                        function onPaletteChanged() {
-                            sparklineCanvas.requestPaint();
-                        }
-
-                        target: Colours
-                    }
+                    line1: NetworkUsage.uploadBuffer
+                    line1Color: Colours.palette.m3secondary
+                    line1FillAlpha: 0.15
+                    line2: NetworkUsage.downloadBuffer
+                    line2Color: Colours.palette.m3tertiary
+                    line2FillAlpha: 0.2
+                    maxValue: smoothMax
+                    historyLength: NetworkUsage.historyLength
 
                     Timer {
                         interval: Config.dashboard.resourceUpdateInterval
                         running: networkCard.visible
                         repeat: true
-                        onTriggered: sparklineCanvas._tickCount++
+                        onTriggered: sparkline.targetMax = Math.max(NetworkUsage.downloadBuffer.maximum, NetworkUsage.uploadBuffer.maximum, 1024)
                     }
 
                     NumberAnimation on slideProgress {
@@ -862,7 +722,7 @@ Item {
                     text: qsTr("Collecting data...")
                     font.pointSize: Appearance.font.size.small
                     color: Colours.palette.m3onSurfaceVariant
-                    visible: NetworkUsage.downloadHistory.length < 2
+                    visible: NetworkUsage.downloadBuffer.count < 2
                     opacity: 0.6
                 }
             }