From f9c14c84b49f0d6cede2603614fa110005fb09a9 Mon Sep 17 00:00:00 2001
From: Honney <hannes-2@gmx.net>
Date: Wed, 2 Sep 2026 14:54:00 +0200
Subject: [PATCH] feat: added graphs to battery hover windows

---
 modules/bar/states/Battery/BatteryState.qml | 35 +++++++++
 modules/bar/widgets/Battery.qml             | 78 +++++++++++++++------
 2 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/modules/bar/states/Battery/BatteryState.qml b/modules/bar/states/Battery/BatteryState.qml
index cd68678..c02ef77 100644
--- a/modules/bar/states/Battery/BatteryState.qml
+++ b/modules/bar/states/Battery/BatteryState.qml
@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Services.UPower
 
 Item {
+    id: root
     property bool available: UPower.displayDevice.isLaptopBattery
     property real percentage: UPower.displayDevice.percentage*100
     property string state: UPowerDeviceState.toString(UPower.displayDevice.state)
@@ -18,4 +19,38 @@ Item {
     property real energy_rate_formated: Math.round(energy_rate*10)/10
     property bool healthSupported: UPower.displayDevice.healthSupported
     property real health: healthSupported ? UPower.displayDevice.healthPercentage : NaN
+
+    property int _maxHistory: 60*60
+
+    property var percentageHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+    property var energyHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+    property var usageHistory: [{time: Date.now() - _maxHistory*1000, value: 0}, {time: Date.now(), value: 0}]
+
+    Timer {
+        id: statsTimer
+        interval: 1000
+        repeat: true
+        running: true
+        onTriggered: {
+            var now = Date.now()
+
+            // Creating percentage History
+            var pHist = root.percentageHistory
+            pHist.push({time: now, value: percentage})
+            if (pHist.length > root._maxHistory) pHist.shift()
+            root.percentageHistory = pHist
+
+            // Creating percentage History
+            var eHist = root.energyHistory
+            eHist.push({time: now, value: percentage})
+            if (eHist.length > root._maxHistory) eHist.shift()
+            root.energyHistory = eHist
+
+            // Creating percentage History
+            var uHist = root.usageHistory
+            uHist.push({time: now, value: percentage})
+            if (uHist.length > root._maxHistory) uHist.shift()
+            root.usageHistory = uHist
+        }
+    }
 }
diff --git a/modules/bar/widgets/Battery.qml b/modules/bar/widgets/Battery.qml
index 244bf48..5437a07 100644
--- a/modules/bar/widgets/Battery.qml
+++ b/modules/bar/widgets/Battery.qml
@@ -126,14 +126,6 @@ MouseArea {
 
         Column {
             spacing: parent.spacing
-            Text {
-                text: "percentage: " + BatteryState.percentage + "%"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
             Text {
                 text: "State: " + BatteryState.state
                 wrapMode: Text.WordWrap
@@ -142,13 +134,61 @@ MouseArea {
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
             }
-            Text {
-                text: "energy: " + Math.round(BatteryState.energy*10)/10 + " W"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
+            Column {
+                width: parent.width
+                spacing: 2
+
+                Text {
+                    text: "percentage: " + BatteryState.percentage + "%"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.percentageHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
+            }
+            Column {
+                width: parent.width
+                spacing: 2
+
+                Text {
+                    text: "energy: " + Math.round(BatteryState.energy*10)/10 + " W"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.energyHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
+            }
+            Column {
+                width: parent.width
+                spacing: 2
+                Text {
+                    text: "Usage: " + BatteryState.energy_rate_formated + " W"
+                    color: Colors.primary
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: Config.font_size_tiny(bar.height)
+                    font.family: Config.font
+                }
+
+                Sparkline {
+                    values: BatteryState.usageHistory
+                    lineColor: Colors.primary
+                    width: parent.width
+                    windowMs: BatteryState._maxHistory * 1000
+                }
             }
             Text {
                 text: (
@@ -161,14 +201,6 @@ MouseArea {
                 font.pixelSize: Config.font_size_tiny(bar.height)
                 font.family: Config.font
             }
-            Text {
-                text: "Usage: " + BatteryState.energy_rate_formated + " W"
-                wrapMode: Text.WordWrap
-                color: Colors.primary
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: Config.font_size_tiny(bar.height)
-                font.family: Config.font
-            }
             Text {
                 text: "Health: " + BatteryState.health + " %"
                 visible: BatteryState.healthSupported