update to network stat graphs

modules/bar/states/Network/NetworkState.qml

@@ -15,9 +15,9 @@ QtObject {
     property string uploadSpeed: ""
     property string ping: ""
 
-    property var downloadHistory: []
-    property var uploadHistory: []
-    property var pingHistory: []
+    property var downloadHistory: [{time: Date.now() - 60000, value: 0}, {time: Date.now(), value: 0}]
+    property var uploadHistory: [{time: Date.now() - 60000, value: 0}, {time: Date.now(), value: 0}]
+    property var pingHistory: [{time: Date.now() - 60000, value: 0}, {time: Date.now(), value: 0}]
     property int _maxHistory: 60
     property bool internetAvailable: Networking.connectivity === NetworkConnectivity.Full
     property bool vpnConnected: false
@@ -276,7 +276,7 @@ QtObject {
         var pingVal = parseFloat(root.ping)
         if (!isNaN(pingVal) && pingVal > 0) {
             var pingHist = root.pingHistory.slice()
-            pingHist.push(pingVal)
+            pingHist.push({time: Date.now(), value: pingVal})
             if (pingHist.length > root._maxHistory) pingHist.shift()
             root.pingHistory = pingHist
         }
@@ -303,12 +303,12 @@ QtObject {
                     root.uploadSpeed = root.formatSpeed(ulBytes)
 
                     var dlHist = root.downloadHistory.slice()
-                    dlHist.push(dlBytes)
+                    dlHist.push({time: now, value: dlBytes})
                     if (dlHist.length > root._maxHistory) dlHist.shift()
                     root.downloadHistory = dlHist
 
                     var ulHist = root.uploadHistory.slice()
-                    ulHist.push(ulBytes)
+                    ulHist.push({time: now, value: ulBytes})
                     if (ulHist.length > root._maxHistory) ulHist.shift()
                     root.uploadHistory = ulHist
                 }

modules/bar/widgets/Sparkline.qml

@@ -7,7 +7,7 @@ Item {
     property var values: []
     property color lineColor: Colors.primary
     property color fillColor: Qt.alpha(Colors.primary, 0.15)
-    property int pointCount: 60
+    property real windowMs: 60000
     property real minWidth: 120
     property real graphHeight: 30
 
@@ -25,27 +25,35 @@ Item {
             var data = root.values
             if (!data || data.length < 2) return
 
-            var displayCount = Math.min(data.length, root.pointCount)
-            var startIdx = data.length - displayCount
-            var slice = data.slice(startIdx)
+            var now = Date.now()
+            var windowStart = now - root.windowMs
 
-            var maxVal = 0
-            for (var i = 0; i < slice.length; i++) {
-                if (slice[i] > maxVal) maxVal = slice[i]
-            }
-            if (maxVal === 0) maxVal = 1
-
-            var stepX = width / (slice.length - 1)
             var padY = 2
             var drawH = height - padY * 2
 
+            var maxVal = 0
+            for (var i = 0; i < data.length; i++) {
+                if (data[i].time >= windowStart && data[i].value > maxVal)
+                    maxVal = data[i].value
+            }
+            if (maxVal === 0) maxVal = 1
+
             ctx.beginPath()
-            ctx.moveTo(0, height - padY - (slice[0] / maxVal) * drawH)
-            for (var j = 1; j < slice.length; j++) {
-                var x = j * stepX
-                var y = height - padY - (slice[j] / maxVal) * drawH
+            var started = false
+            for (var j = 0; j < data.length; j++) {
+                var pt = data[j]
+                if (pt.time < windowStart) continue
+
+                var x = ((pt.time - windowStart) / root.windowMs) * width
+                var y = height - padY - (pt.value / maxVal) * drawH
+
+                if (!started) {
+                    ctx.moveTo(x, y)
+                    started = true
+                } else {
                     ctx.lineTo(x, y)
                 }
+            }
             ctx.strokeStyle = root.lineColor
             ctx.lineWidth = 1.5
             ctx.stroke()