clock tooltip with seconds, cpu overall utilization chart, move mem graph below stats

shell/applets/CpuApplet.qml

@@ -138,6 +138,51 @@ Column {
         }
     }
 
+    // Overall CPU utilization chart
+    Item {
+        width: root.width
+        height: 44
+
+        Text {
+            id: _totalLabel
+            anchors.left: parent.left
+            anchors.leftMargin: 12
+            anchors.verticalCenter: parent.verticalCenter
+            text: S.SystemStats.cpuUsage + "%"
+            color: S.Theme.loadColor(S.SystemStats.cpuUsage)
+            font.pixelSize: S.Theme.fontSize - 1
+            font.family: S.Theme.fontFamily
+            font.bold: true
+            width: 32
+        }
+
+        SparklineCanvas {
+            anchors.left: _totalLabel.right
+            anchors.leftMargin: 6
+            anchors.right: parent.right
+            anchors.rightMargin: 12
+            anchors.verticalCenter: parent.verticalCenter
+            height: 32
+            history: root._cpuHistory
+            strokeColor: root.accentColor
+            colorAt: v => S.Theme.loadColor(v)
+            active: root.active
+        }
+    }
+
+    property var _cpuHistory: []
+    onActiveChanged: if (active)
+        _cpuHistory = []
+    Connections {
+        target: S.SystemStats
+        function onCpuUsageChanged() {
+            if (!root.active)
+                return;
+            const h = root._cpuHistory.concat([S.SystemStats.cpuUsage]);
+            root._cpuHistory = h.length > 60 ? h.slice(h.length - 60) : h;
+        }
+    }
+
     Separator {}
 
     Item {