stats: highlight significant usages

4 files changed, 39 insertions, 18 deletions

diff --git a/bar/Network.qml b/bar/Network.qml
index 46e73c2..9c92f7b 100644
--- a/bar/Network.qml
+++ b/bar/Network.qml
@@ -6,6 +6,14 @@ import qs.components
 import qs.config
 
 Item {
+    id: root
+    property int down: Services.NetworkUsage.down
+    property string downUnit: Services.NetworkUsage.downUnit
+    property int up: Services.NetworkUsage.up
+    property string upUnit: Services.NetworkUsage.upUnit
+
+    property int significantUsage: 30
+    property string usageUnit: "M"
 
     implicitWidth: container.implicitWidth
     implicitHeight: container.implicitHeight - General.rectMargin
@@ -43,20 +51,24 @@ Item {
                 spacing: Bar.resourceIconTextSpacing / 2
                 IText {
                     text: Icons.resource.network.download
+                    color: root.downUnit == root.usageUnit && root.down > root.significantUsage ? Colors.cyan : WallustColors.foreground
                 }
                 IText {
                     animate: true
-                    text: Services.NetworkUsage.down + Services.NetworkUsage.downUnit
+                    text: root.down + root.downUnit
+                    color: root.downUnit == root.usageUnit && root.down > root.significantUsage ? Colors.cyan : WallustColors.foreground
                 }
             }
             RowLayout {
                 spacing: Bar.resourceIconTextSpacing / 2
                 IText {
                     text: Icons.resource.network.upload
+                    color: root.upUnit == root.usageUnit && root.up > root.significantUsage ? Colors.cyan : WallustColors.foreground
                 }
                 IText {
                     animate: true
-                    text: Services.NetworkUsage.up + Services.NetworkUsage.upUnit
+                    text: root.up + root.upUnit
+                    color: root.upUnit == root.usageUnit && root.up > root.significantUsage ? Colors.cyan : WallustColors.foreground
                 }
             }
 
diff --git a/bar/Resources.qml b/bar/Resources.qml
index d66fed6..3e393e4 100644
--- a/bar/Resources.qml
+++ b/bar/Resources.qml
@@ -21,20 +21,30 @@ Item {
             id: layout
             anchors.centerIn: parent
             SimpleResource {
-                text: Math.round(Services.Resource.cpuUsage * 100) + "%"
+                value: Services.Resource.cpuUsage
+                suffix: "%"
                 icon: Config.Icons.resource.cpu
             }
             SimpleResource {
                 icon: Config.Icons.resource.memory
-                text: Math.round(Services.Resource.memoryUsedPercentage * 100) + "%"
+                value: Services.Resource.memoryUsedPercentage
+                suffix: "%"
             }
             SimpleResource {
                 icon: Config.Icons.resource.gpu
-                text: Services.Resource.gpuUsage + "%"
+                value: Services.Resource.gpuUsage / 100
+                suffix: "%"
+                thresholdL1: 0.60
+                thresholdL2: 0.70
+                thresholdL3: 0.80
             }
             SimpleResource {
                 icon: Config.Icons.resource.temp
-                text: Math.round(Services.Resource.cpuTemp * 100) + "°C"
+                value: Services.Resource.cpuTemp
+                suffix: "°C"
+                thresholdL1: 0.60
+                thresholdL2: 0.80
+                thresholdL3: 0.90
             }
         }
     }
diff --git a/components/SimpleResource.qml b/components/SimpleResource.qml
index c1c5bd1..0775069 100644
--- a/components/SimpleResource.qml
+++ b/components/SimpleResource.qml
@@ -7,8 +7,16 @@ import qs.components
 Item {
     id: root
 
-    required property string text
+    required property real value
+    required property string suffix // unit
     required property string icon
+    property string text: Math.round(root.value * 100) + root.suffix
+    property real thresholdL1: 40 / 100
+    property real thresholdL2: thresholdL1 * 1.5
+    property real thresholdL3: thresholdL2 * 1.5
+    property color thresholdColorL1: Colors.cyan
+    property color thresholdColorL2: Colors.yellow
+    property color thresholdColorL3: Colors.red
 
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
@@ -24,10 +32,12 @@ Item {
 
         Icon {
             text: root.icon
+            color: root.value < root.thresholdL1 ? WallustColors.foreground : root.value >= root.thresholdL3 ? root.thresholdColorL3 : root.value >= root.thresholdL2 ? root.thresholdColorL2 : root.thresholdColorL1
         }
         IText {
             animate: true
             text: root.text
+            color: root.value < root.thresholdL1 ? WallustColors.foreground : root.value >= root.thresholdL3 ? root.thresholdColorL3 : root.value >= root.thresholdL2 ? root.thresholdColorL2 : root.thresholdColorL1
         }
 
         Item {
diff --git a/utils/networkUsage.js b/utils/networkUsage.js
index a7131f2..221e7af 100644
--- a/utils/networkUsage.js
+++ b/utils/networkUsage.js
@@ -28,14 +28,3 @@ function formatSize(size, unit) {
 		return size.toFixed(0)
 	}
 }
-
-// const iface = defaultInterface()
-// let prev = getRxTxBytes(iface)
-
-// setInterval(() => {
-// 	const cur = getRxTxBytes(iface)
-// 	const dr = (cur.rx - prev.rx) / (interval / 1000)
-// 	const dt = (cur.tx - prev.tx) / (interval / 1000)
-// 	prev = cur
-// 	console.log(formatSize(dr), formatSize(dt))
-// }, interval)