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/NetworkProvider/NetworkMenuBarModule.swift

@@ -184,12 +184,19 @@ final class NetworkStatusView: NSView, WidthReporting {
     }
 
     private func drawGraph(color: NSColor, in rect: NSRect) {
-        guard history.count > 1, let context = NSGraphicsContext.current?.cgContext else { return }
-        let step = rect.width / CGFloat(history.count - 1)
+        guard let context = NSGraphicsContext.current?.cgContext else { return }
+        // Die Schrittweite kommt aus der vollen Länge des Verlaufs, nicht aus
+        // der Anzahl vorhandener Werte: frisch gestartet sind es zwei statt
+        // sechzig, und daraus gerechnet spannte sich der Weg über die ganze
+        // Breite.
+        let xs = GraphLayout.positions(count: history.count,
+                                       capacity: NetworkModel.historyLength, in: rect)
+        guard !xs.isEmpty else { return }
         context.setStrokeColor(color.withAlphaComponent(0.85).cgColor)
         context.setLineWidth(1)
-        for (index, value) in history.enumerated() {
-            let point = CGPoint(x: rect.minX + CGFloat(index) * step,
+        for (index, x) in xs.enumerated() {
+            let value = history[history.count - xs.count + index]
+            let point = CGPoint(x: x,
                                 y: rect.minY + rect.height * CGFloat(min(max(value, 0), 1)))
             index == 0 ? context.move(to: point) : context.addLine(to: point)
         }

Packages/OnyxKit/Sources/NetworkProvider/NetworkPopover.swift

@@ -1,5 +1,6 @@
 import SwiftUI
 import MetricsProvider
+import OnyxMenuBar
 
 @MainActor
 struct NetworkPopoverContent: View {
@@ -164,12 +165,21 @@ private struct TrafficChart: View {
 
     var body: some View {
         GeometryReader { geometry in
-            let points = history.suffix(60)
+            let points = history.suffix(NetworkModel.historyLength)
             let peak = max(points.map { max($0.downloadRate, $0.uploadRate) }.max() ?? 1, 1)
-            let width = geometry.size.width / CGFloat(max(points.count, 1))
+            // Die Balkenbreite kommt aus der **vollen** Länge des Verlaufs.
+            // Vorher war sie `Breite / Anzahl`: bei fünf Messwerten also ein
+            // Fünftel je Balken, und mit jedem weiteren wurden sie schmaler.
+            // Frisch gestartet sah das Diagramm dadurch aus wie ein Ausschlag.
+            let width = GraphLayout.barWidth(capacity: NetworkModel.historyLength,
+                                             totalWidth: geometry.size.width, spacing: 1)
             let half = geometry.size.height / 2
 
             HStack(alignment: .center, spacing: 1) {
+                // Fehlende Messwerte bleiben als freie Fläche links stehen; der
+                // Verlauf wächst nach links weg, wie bei jedem Zeitdiagramm.
+                Spacer(minLength: 0)
+
                 ForEach(Array(points.enumerated()), id: \.offset) { _, snapshot in
                     VStack(spacing: 1) {
                         Rectangle()
@@ -181,7 +191,7 @@ private struct TrafficChart: View {
                             .frame(height: max(half * CGFloat(snapshot.downloadRate / peak), 0.5))
                             .frame(maxHeight: .infinity, alignment: .top)
                     }
-                    .frame(width: max(width - 1, 1))
+                    .frame(width: width)
                 }
             }
             .frame(width: geometry.size.width, height: geometry.size.height)

Packages/OnyxKit/Sources/NetworkProvider/NetworkWidget.swift

@@ -154,7 +154,8 @@ private struct NetworkWidgetView: View {
 
             Rates(snapshot: model.snapshot, compact: false)
 
-            Sparkline(values: model.series(download: true), tint: Onyx.Color.accent)
+            Sparkline(values: model.series(download: true), tint: Onyx.Color.accent,
+                      capacity: NetworkModel.historyLength)
                 .frame(height: 18)
 
             Divider().overlay(Onyx.Color.hairline)