Diagramme rechnen mit der vollen Länge, eigene Symbole für CPU und GPU

Frisch gestartet hat der Verlauf fünf Messwerte statt sechzig. Gerechnet
wurde aber „Breite geteilt durch Anzahl" — also war jeder Balken ein
Fünftel breit, und mit jedem weiteren wurden sie schmaler. Das Diagramm sah
nach einem Ausschlag aus und bedeutete nichts.

Jetzt kommt die Schrittweite aus der vollen Länge. Fehlende Werte bleiben
als freie Fläche links stehen; der Verlauf wächst nach links weg, wie bei
jedem Zeitdiagramm.

Das steckte an **drei** Stellen, alle mit derselben Rechnung: dem
Balkendiagramm im Netzwerk-Popover, der Sparkline in den Kacheln und der
Linie in den Menüleisten-Modulen. Die gemeinsame Rechnung liegt jetzt in
`GraphLayout` und ist geprüft, statt dreimal danebenzugehen.

Nebenbei: die Fläche unter der Sparkline begann am linken Rand statt am
ersten Messwert — ein Keil über die ganze Breite, wo noch nichts gemessen
war.

CPU und GPU bekommen eigene Symbole aus chip.svg und graphic-card.svg. SF
Symbols hat für beides nur denselben Chip, und „cpu" neben „cpu.fill" ist
kein Unterschied, den man in der Menüleiste erkennt.

Die Beschriftung unter den Ringen klebte am Rand und sah aus, als gehörte
sie noch hinein — sechs Punkte Abstand statt zwei. Und die Popover für CPU
und GPU tragen jetzt einen Titel: bei drei gleich aussehenden Ringen sieht
man sonst nicht, vor welchem man steht.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Packages/OnyxKit/Sources/MetricsProvider/MetricWidgets.swift

@@ -1,6 +1,7 @@
 import SwiftUI
 import OnyxDesign
 import OnyxWidgetKit
+import OnyxMenuBar
 
 /// Ein Widget je Hardwaregröße. Alle teilen sich dasselbe Modell und damit
 /// dieselbe Messschleife.
@@ -137,21 +138,31 @@ private struct WideMetric: View {
 public struct Sparkline: View {
     let values: [Double]
     let tint: Color
+    /// Wie viele Werte der Verlauf fasst — die Schrittweite hängt daran, nicht
+    /// an der Anzahl der bisher vorhandenen.
+    let capacity: Int
 
-    public init(values: [Double], tint: Color) {
+    public init(values: [Double], tint: Color, capacity: Int = MetricsModel.historyLength) {
         self.values = values
         self.tint = tint
+        self.capacity = capacity
     }
 
     public var body: some View {
         GeometryReader { geometry in
-            let points = Array(values.suffix(MetricsModel.historyLength))
+            let points = Array(values.suffix(capacity))
             if points.count > 1 {
                 let size = geometry.size
-                let step = size.width / CGFloat(points.count - 1)
-                let coordinates = points.enumerated().map { index, value in
-                    CGPoint(x: CGFloat(index) * step,
-                            y: size.height * (1 - CGFloat(min(max(value, 0), 1))))
+                // Die Schrittweite kommt aus der **vollen** Länge des Verlaufs,
+                // nicht aus der Anzahl vorhandener Werte. Frisch gestartet sind
+                // es zwei statt sechzig; daraus gerechnet spannte sich der Weg
+                // zwischen ihnen über die ganze Breite — ein riesiger Zickzack,
+                // der nach viel Bewegung aussah und nichts bedeutete.
+                let xs = GraphLayout.positions(count: points.count,
+                                               capacity: capacity,
+                                               in: CGRect(origin: .zero, size: size))
+                let coordinates = zip(xs, points).map { x, value in
+                    CGPoint(x: x, y: size.height * (1 - CGFloat(min(max(value, 0), 1))))
                 }
 
                 let line = Path { path in
@@ -162,10 +173,15 @@ public struct Sparkline: View {
 
                 // Dieselbe Kurve, unten geschlossen — die Fläche darunter gibt
                 // dem Verlauf Gewicht, ohne dass eine zweite Linie nötig wäre.
+                // Die Fläche beginnt am ersten Messwert, nicht am linken Rand:
+                // sonst zieht sich bei wenigen Werten ein Keil über die ganze
+                // Breite, obwohl dort noch nichts gemessen wurde.
                 let area = Path { path in
-                    path.move(to: CGPoint(x: 0, y: size.height))
+                    guard let first = coordinates.first, let last = coordinates.last
+                    else { return }
+                    path.move(to: CGPoint(x: first.x, y: size.height))
                     coordinates.forEach { path.addLine(to: $0) }
-                    path.addLine(to: CGPoint(x: size.width, y: size.height))
+                    path.addLine(to: CGPoint(x: last.x, y: size.height))
                     path.closeSubpath()
                 }