Extract shared time series chart component · 6052800

Extract shared time series chart component
Browse files

bogdan committed a month ago

codex/restore-session-chart main

1 parent 2a4caac

commit 6052800

Showing 9 changed files with 597 additions and 364 deletions

+12 -0

USB Meter.xcodeproj/project.pbxproj

@@ -25,6 +25,7 @@
 		437D47D52415FD8C00B7768E /* ChargeRecordSheetView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 437D47D42415FD8C00B7768E /* ChargeRecordSheetView.swift */; };
 		437D47D72415FDF300B7768E /* MeterScreenControlsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 437D47D62415FDF300B7768E /* MeterScreenControlsView.swift */; };
 		437F0AB72463108F005DEBEC /* MeasurementChartView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 437F0AB62463108F005DEBEC /* MeasurementChartView.swift */; };
+		437F0AB92463108F005DEBEC /* TimeSeriesChart.swift in Sources */ = {isa = PBXBuildFile; fileRef = 437F0AB82463108F005DEBEC /* TimeSeriesChart.swift */; };
 		4383B460240EB2D000DAAEBF /* Meter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4383B45F240EB2D000DAAEBF /* Meter.swift */; };
 		4383B462240EB5E400DAAEBF /* AppData.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4383B461240EB5E400DAAEBF /* AppData.swift */; };
 		4383B465240EB6B200DAAEBF /* UserDefault.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4383B464240EB6B200DAAEBF /* UserDefault.swift */; };
@@ -137,6 +138,7 @@
 		437D47D42415FD8C00B7768E /* ChargeRecordSheetView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChargeRecordSheetView.swift; sourceTree = "<group>"; };
 		437D47D62415FDF300B7768E /* MeterScreenControlsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MeterScreenControlsView.swift; sourceTree = "<group>"; };
 		437F0AB62463108F005DEBEC /* MeasurementChartView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MeasurementChartView.swift; sourceTree = "<group>"; };
+		437F0AB82463108F005DEBEC /* TimeSeriesChart.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimeSeriesChart.swift; sourceTree = "<group>"; };
 		4383B45F240EB2D000DAAEBF /* Meter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Meter.swift; sourceTree = "<group>"; };
 		4383B461240EB5E400DAAEBF /* AppData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppData.swift; sourceTree = "<group>"; };
 		4383B464240EB6B200DAAEBF /* UserDefault.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserDefault.swift; sourceTree = "<group>"; };
@@ -522,11 +524,20 @@
 		D28F10023C8E4A7A00A10002 /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				437F0AB32463108F005DEBEC /* Charts */,
 				D28F10033C8E4A7A00A10003 /* Generic */,
 			);
 			path = Components;
 			sourceTree = "<group>";
 		};
+		437F0AB32463108F005DEBEC /* Charts */ = {
+			isa = PBXGroup;
+			children = (
+				437F0AB82463108F005DEBEC /* TimeSeriesChart.swift */,
+			);
+			path = Charts;
+			sourceTree = "<group>";
+		};
 		D28F10033C8E4A7A00A10003 /* Generic */ = {
 			isa = PBXGroup;
 			children = (
@@ -811,6 +822,7 @@
 				AAD5F9B12B1CAC7A00F8E4F9 /* SidebarView.swift in Sources */,
 				43CBF667240BF3EB00255B8B /* ContentView.swift in Sources */,
 				437F0AB72463108F005DEBEC /* MeasurementChartView.swift in Sources */,
+				437F0AB92463108F005DEBEC /* TimeSeriesChart.swift in Sources */,
 				437D47D32415FB7E00B7768E /* Decimal.swift in Sources */,
 				43874C7F2414F3F400525397 /* Float.swift in Sources */,
 				4383B462240EB5E400DAAEBF /* AppData.swift in Sources */,


+23 -0

USB Meter/Model/Measurements.swift

View

+                    +extension Measurements.Measurement.Point: TimeSeriesChartPointRepresentable {
+                    +    var chartPointID: Int {
+                    +        id
+                    +    }
+                    +    var chartTimestamp: Date {
+                    +        timestamp
+                    +    }
+                    +    var chartValue: Double {
+                    +        value
+                    +    }
+                    +    var chartPointKind: TimeSeriesChartPointKind {
+                    +        switch kind {
+                    +        case .sample:
+                    +            return .sample
+                    +        case .discontinuity:
+                    +            return .discontinuity
+                    +        }
+                    +    }
+                    +}

+1 -1

USB Meter/Views/ChargedDevices/ChargedDeviceDetailView.swift

View

@@ -1020,7 +1020,7 @@ struct ChargedDeviceDetailView: View {
                 .foregroundColor(.secondary)
             }
 
-            Chart(
+            TimeSeriesChart(
                 points: snapshot.points,
                 context: snapshot.context,
                 areaChart: areaChart,


+422 -0

USB Meter/Views/Components/Charts/TimeSeriesChart.swift

View

+                    +//
+                    +//  TimeSeriesChart.swift
+                    +//  USB Meter
+                    +//
+                    +import CoreGraphics
+                    +import Foundation
+                    +import SwiftUI
+                    +enum TimeSeriesChartPointKind: Hashable {
+                    +    case sample
+                    +    case discontinuity
+                    +}
+                    +protocol TimeSeriesChartPointRepresentable {
+                    +    var chartPointID: Int { get }
+                    +    var chartTimestamp: Date { get }
+                    +    var chartValue: Double { get }
+                    +    var chartPointKind: TimeSeriesChartPointKind { get }
+                    +}
+                    +extension TimeSeriesChartPointRepresentable {
+                    +    var isChartSample: Bool {
+                    +        chartPointKind == .sample
+                    +    }
+                    +    var isChartDiscontinuity: Bool {
+                    +        chartPointKind == .discontinuity
+                    +    }
+                    +    func chartCGPoint() -> CGPoint {
+                    +        CGPoint(x: chartTimestamp.timeIntervalSince1970, y: chartValue)
+                    +    }
+                    +}
+                    +struct TimeSeriesChartStyle {
+                    +    var drawsArea: Bool
+                    +    var strokeColor: Color
+                    +    var areaFillColor: Color?
+                    +    var lineWidth: CGFloat
+                    +    static func line(
+                    +        strokeColor: Color = .black,
+                    +        lineWidth: CGFloat = 2
+                    +    ) -> TimeSeriesChartStyle {
+                    +        TimeSeriesChartStyle(
+                    +            drawsArea: false,
+                    +            strokeColor: strokeColor,
+                    +            areaFillColor: nil,
+                    +            lineWidth: lineWidth
+                    +        )
+                    +    }
+                    +    static func area(
+                    +        strokeColor: Color = .black,
+                    +        areaFillColor: Color? = nil,
+                    +        lineWidth: CGFloat = 2
+                    +    ) -> TimeSeriesChartStyle {
+                    +        TimeSeriesChartStyle(
+                    +            drawsArea: true,
+                    +            strokeColor: strokeColor,
+                    +            areaFillColor: areaFillColor,
+                    +            lineWidth: lineWidth
+                    +        )
+                    +    }
+                    +}
+                    +struct TimeSeriesChart<Point: TimeSeriesChartPointRepresentable>: View {
+                    +    @Environment(\.displayScale) private var displayScale
+                    +    let points: [Point]
+                    +    let context: ChartContext
+                    +    let style: TimeSeriesChartStyle
+                    +    init(
+                    +        points: [Point],
+                    +        context: ChartContext,
+                    +        style: TimeSeriesChartStyle
+                    +    ) {
+                    +        self.points = points
+                    +        self.context = context
+                    +        self.style = style
+                    +    }
+                    +    init(
+                    +        points: [Point],
+                    +        context: ChartContext,
+                    +        areaChart: Bool = false,
+                    +        strokeColor: Color = .black,
+                    +        areaFillColor: Color? = nil
+                    +    ) {
+                    +        self.points = points
+                    +        self.context = context
+                    +        self.style = areaChart
+                    +            ? .area(strokeColor: strokeColor, areaFillColor: areaFillColor)
+                    +            : .line(strokeColor: strokeColor)
+                    +    }
+                    +    var body: some View {
+                    +        GeometryReader { geometry in
+                    +            if style.drawsArea {
+                    +                let fillColor = style.areaFillColor ?? style.strokeColor.opacity(0.2)
+                    +                path(geometry: geometry)
+                    +                    .fill(
+                    +                        LinearGradient(
+                    +                            gradient: .init(
+                    +                                colors: [
+                    +                                    fillColor.opacity(0.72),
+                    +                                    fillColor.opacity(0.18)
+                    +                                ]
+                    +                            ),
+                    +                            startPoint: .init(x: 0.5, y: 0.08),
+                    +                            endPoint: .init(x: 0.5, y: 0.92)
+                    +                        )
+                    +                    )
+                    +            } else {
+                    +                path(geometry: geometry)
+                    +                    .stroke(
+                    +                        style.strokeColor,
+                    +                        style: StrokeStyle(
+                    +                            lineWidth: style.lineWidth,
+                    +                            lineCap: .round,
+                    +                            lineJoin: .round
+                    +                        )
+                    +                    )
+                    +            }
+                    +        }
+                    +    }
+                    +    private func path(geometry: GeometryProxy) -> Path {
+                    +        let displayedPoints = scaledPoints(for: geometry.size.width)
+                    +        let baselineY = context.placeInRect(
+                    +            point: CGPoint(x: context.origin.x, y: context.origin.y)
+                    +        ).y * geometry.size.height
+                    +        return Path { path in
+                    +            var firstRenderedPoint: CGPoint?
+                    +            var lastRenderedPoint: CGPoint?
+                    +            var needsMove = true
+                    +            for point in displayedPoints {
+                    +                if point.isDiscontinuity {
+                    +                    closeAreaSegment(
+                    +                        in: &path,
+                    +                        firstPoint: firstRenderedPoint,
+                    +                        lastPoint: lastRenderedPoint,
+                    +                        baselineY: baselineY
+                    +                    )
+                    +                    firstRenderedPoint = nil
+                    +                    lastRenderedPoint = nil
+                    +                    needsMove = true
+                    +                    continue
+                    +                }
+                    +                let item = context.placeInRect(point: point.cgPoint)
+                    +                let renderedPoint = CGPoint(
+                    +                    x: item.x * geometry.size.width,
+                    +                    y: item.y * geometry.size.height
+                    +                )
+                    +                if needsMove {
+                    +                    path.move(to: renderedPoint)
+                    +                    firstRenderedPoint = renderedPoint
+                    +                    needsMove = false
+                    +                } else {
+                    +                    path.addLine(to: renderedPoint)
+                    +                }
+                    +                lastRenderedPoint = renderedPoint
+                    +            }
+                    +            closeAreaSegment(
+                    +                in: &path,
+                    +                firstPoint: firstRenderedPoint,
+                    +                lastPoint: lastRenderedPoint,
+                    +                baselineY: baselineY
+                    +            )
+                    +        }
+                    +    }
+                    +    private func closeAreaSegment(
+                    +        in path: inout Path,
+                    +        firstPoint: CGPoint?,
+                    +        lastPoint: CGPoint?,
+                    +        baselineY: CGFloat
+                    +    ) {
+                    +        guard style.drawsArea, let firstPoint, let lastPoint, firstPoint != lastPoint else { return }
+                    +        path.addLine(to: CGPoint(x: lastPoint.x, y: baselineY))
+                    +        path.addLine(to: CGPoint(x: firstPoint.x, y: baselineY))
+                    +        path.closeSubpath()
+                    +    }
+                    +    private func scaledPoints(for width: CGFloat) -> [TimeSeriesChartRenderPoint] {
+                    +        let renderPoints = points.map(TimeSeriesChartRenderPoint.init)
+                    +        let sampleCount = renderPoints.reduce(into: 0) { partialResult, point in
+                    +            if point.isSample {
+                    +                partialResult += 1
+                    +            }
+                    +        }
+                    +        let displayColumns = max(Int((width * max(displayScale, 1)).rounded(.up)), 1)
+                    +        let maximumSamplesToRender = max(displayColumns * (style.drawsArea ? 3 : 4), 240)
+                    +        guard sampleCount > maximumSamplesToRender, context.isValid else {
+                    +            return renderPoints
+                    +        }
+                    +        var scaledPoints: [TimeSeriesChartRenderPoint] = []
+                    +        var currentSegment: [TimeSeriesChartRenderPoint] = []
+                    +        for point in renderPoints {
+                    +            if point.isDiscontinuity {
+                    +                appendScaledSegment(currentSegment, to: &scaledPoints, displayColumns: displayColumns)
+                    +                currentSegment.removeAll(keepingCapacity: true)
+                    +                if !scaledPoints.isEmpty, scaledPoints.last?.isDiscontinuity == false {
+                    +                    appendScaledPoint(point, to: &scaledPoints)
+                    +                }
+                    +            } else {
+                    +                currentSegment.append(point)
+                    +            }
+                    +        }
+                    +        appendScaledSegment(currentSegment, to: &scaledPoints, displayColumns: displayColumns)
+                    +        return scaledPoints.isEmpty ? renderPoints : scaledPoints
+                    +    }
+                    +    private func appendScaledSegment(
+                    +        _ segment: [TimeSeriesChartRenderPoint],
+                    +        to scaledPoints: inout [TimeSeriesChartRenderPoint],
+                    +        displayColumns: Int
+                    +    ) {
+                    +        guard !segment.isEmpty else { return }
+                    +        if segment.count <= max(displayColumns * 2, 120) {
+                    +            for point in segment {
+                    +                appendScaledPoint(point, to: &scaledPoints)
+                    +            }
+                    +            return
+                    +        }
+                    +        var bucket: [TimeSeriesChartRenderPoint] = []
+                    +        var currentColumn: Int?
+                    +        for point in segment {
+                    +            let column = displayColumn(for: point, totalColumns: displayColumns)
+                    +            if let currentColumn, currentColumn != column {
+                    +                appendBucket(bucket, to: &scaledPoints)
+                    +                bucket.removeAll(keepingCapacity: true)
+                    +            }
+                    +            bucket.append(point)
+                    +            currentColumn = column
+                    +        }
+                    +        appendBucket(bucket, to: &scaledPoints)
+                    +    }
+                    +    private func appendBucket(
+                    +        _ bucket: [TimeSeriesChartRenderPoint],
+                    +        to scaledPoints: inout [TimeSeriesChartRenderPoint]
+                    +    ) {
+                    +        guard !bucket.isEmpty else { return }
+                    +        if bucket.count <= 2 {
+                    +            for point in bucket {
+                    +                appendScaledPoint(point, to: &scaledPoints)
+                    +            }
+                    +            return
+                    +        }
+                    +        let firstPoint = bucket.first!
+                    +        let lastPoint = bucket.last!
+                    +        let minimumPoint = bucket.min { lhs, rhs in lhs.value < rhs.value } ?? firstPoint
+                    +        let maximumPoint = bucket.max { lhs, rhs in lhs.value < rhs.value } ?? firstPoint
+                    +        let orderedPoints = [firstPoint, minimumPoint, maximumPoint, lastPoint]
+                    +            .sorted { lhs, rhs in
+                    +                if lhs.timestamp == rhs.timestamp {
+                    +                    return lhs.sourceID < rhs.sourceID
+                    +                }
+                    +                return lhs.timestamp < rhs.timestamp
+                    +            }
+                    +        var emittedPointIDs: Set<Int> = []
+                    +        for point in orderedPoints where emittedPointIDs.insert(point.sourceID).inserted {
+                    +            appendScaledPoint(point, to: &scaledPoints)
+                    +        }
+                    +    }
+                    +    private func appendScaledPoint(
+                    +        _ point: TimeSeriesChartRenderPoint,
+                    +        to scaledPoints: inout [TimeSeriesChartRenderPoint]
+                    +    ) {
+                    +        guard !(scaledPoints.last?.timestamp == point.timestamp &&
+                    +                scaledPoints.last?.value == point.value &&
+                    +                scaledPoints.last?.kind == point.kind) else {
+                    +            return
+                    +        }
+                    +        scaledPoints.append(point)
+                    +    }
+                    +    private func displayColumn(
+                    +        for point: TimeSeriesChartRenderPoint,
+                    +        totalColumns: Int
+                    +    ) -> Int {
+                    +        let totalColumns = max(totalColumns, 1)
+                    +        let timeSpan = max(Double(context.size.width), 1)
+                    +        let normalizedOffset = min(
+                    +            max((point.timestamp.timeIntervalSince1970 - Double(context.origin.x)) / timeSpan, 0),
+                    +            1
+                    +        )
+                    +        return min(
+                    +            Int((normalizedOffset * Double(totalColumns - 1)).rounded(.down)),
+                    +            totalColumns - 1
+                    +        )
+                    +    }
+                    +}
+                    +struct TimeSeriesChartHorizontalGuides: View {
+                    +    let context: ChartContext
+                    +    let labelCount: Int
+                    +    var strokeColor: Color = Color.secondary.opacity(0.38)
+                    +    var lineWidth: CGFloat = 0.85
+                    +    var body: some View {
+                    +        GeometryReader { geometry in
+                    +            Path { path in
+                    +                for labelIndex in 1...max(labelCount, 1) {
+                    +                    let y = context.yGuidePosition(
+                    +                        for: labelIndex,
+                    +                        of: labelCount,
+                    +                        height: geometry.size.height
+                    +                    )
+                    +                    path.addLine(from: CGPoint(x: 0, y: y), to: CGPoint(x: geometry.size.width, y: y))
+                    +                }
+                    +            }
+                    +            .stroke(strokeColor, lineWidth: lineWidth)
+                    +        }
+                    +    }
+                    +}
+                    +struct TimeSeriesChartVerticalGuides: View {
+                    +    let context: ChartContext
+                    +    let labelCount: Int
+                    +    var visibleLabelRange: Range<Int>? = nil
+                    +    var strokeColor: Color = Color.secondary.opacity(0.34)
+                    +    var strokeStyle: StrokeStyle = StrokeStyle(lineWidth: 0.8, dash: [4, 4])
+                    +    var body: some View {
+                    +        GeometryReader { geometry in
+                    +            Path { path in
+                    +                for labelIndex in resolvedLabelRange {
+                    +                    let x = context.xGuidePosition(
+                    +                        for: labelIndex,
+                    +                        of: labelCount,
+                    +                        width: geometry.size.width
+                    +                    )
+                    +                    path.move(to: CGPoint(x: x, y: 0))
+                    +                    path.addLine(to: CGPoint(x: x, y: geometry.size.height))
+                    +                }
+                    +            }
+                    +            .stroke(strokeColor, style: strokeStyle)
+                    +        }
+                    +    }
+                    +    private var resolvedLabelRange: Range<Int> {
+                    +        visibleLabelRange ?? 2..<max(labelCount, 2)
+                    +    }
+                    +}
+                    +private struct TimeSeriesChartRenderPoint: Hashable {
+                    +    let sourceID: Int
+                    +    let timestamp: Date
+                    +    let value: Double
+                    +    let kind: TimeSeriesChartPointKind
+                    +    init<Point: TimeSeriesChartPointRepresentable>(_ point: Point) {
+                    +        self.sourceID = point.chartPointID
+                    +        self.timestamp = point.chartTimestamp
+                    +        self.value = point.chartValue
+                    +        self.kind = point.chartPointKind
+                    +    }
+                    +    var isSample: Bool {
+                    +        kind == .sample
+                    +    }
+                    +    var isDiscontinuity: Bool {
+                    +        kind == .discontinuity
+                    +    }
+                    +    var cgPoint: CGPoint {
+                    +        CGPoint(x: timestamp.timeIntervalSince1970, y: value)
+                    +    }
+                    +}
+                    +extension ChartContext {
+                    +    func yGuidePosition(
+                    +        for labelIndex: Int,
+                    +        of labelCount: Int,
+                    +        height: CGFloat
+                    +    ) -> CGFloat {
+                    +        let value = yAxisLabel(for: labelIndex, of: max(labelCount, 2))
+                    +        let anchorPoint = CGPoint(x: origin.x, y: CGFloat(value))
+                    +        return placeInRect(point: anchorPoint).y * height
+                    +    }
+                    +    func xGuidePosition(
+                    +        for labelIndex: Int,
+                    +        of labelCount: Int,
+                    +        width: CGFloat
+                    +    ) -> CGFloat {
+                    +        let value = xAxisLabel(for: labelIndex, of: max(labelCount, 2))
+                    +        let anchorPoint = CGPoint(x: CGFloat(value), y: origin.y)
+                    +        return placeInRect(point: anchorPoint).x * width
+                    +    }
+                    +}

+119 -300

USB Meter/Views/Meter/Components/MeasurementChartView.swift

View

@@ -13,6 +13,11 @@ private enum PresentTrackingMode: CaseIterable, Hashable {
     case keepStartTimestamp
 }
 
+enum MeasurementChartSizing {
+    case provided(size: CGSize, compact: Bool)
+    case embedded
+}
+
 enum MeasurementChartSelectorActionTone {
     case reversible
     case destructive
@@ -21,18 +26,52 @@ enum MeasurementChartSelectorActionTone {
 
 struct MeasurementChartSelectionAction {
     let title: String
+    let shortTitle: String?
     let systemName: String
     let tone: MeasurementChartSelectorActionTone
     let handler: (ClosedRange<Date>) -> Void
+
+    init(
+        title: String,
+        shortTitle: String? = nil,
+        systemName: String,
+        tone: MeasurementChartSelectorActionTone,
+        handler: @escaping (ClosedRange<Date>) -> Void
+    ) {
+        self.title = title
+        self.shortTitle = shortTitle
+        self.systemName = systemName
+        self.tone = tone
+        self.handler = handler
+    }
 }
 
 struct MeasurementChartResetAction {
     let title: String
+    let shortTitle: String?
     let systemName: String
     let tone: MeasurementChartSelectorActionTone
     let confirmationTitle: String
     let confirmationButtonTitle: String
     let handler: () -> Void
+
+    init(
+        title: String,
+        shortTitle: String? = nil,
+        systemName: String,
+        tone: MeasurementChartSelectorActionTone,
+        confirmationTitle: String,
+        confirmationButtonTitle: String,
+        handler: @escaping () -> Void
+    ) {
+        self.title = title
+        self.shortTitle = shortTitle
+        self.systemName = systemName
+        self.tone = tone
+        self.confirmationTitle = confirmationTitle
+        self.confirmationButtonTitle = confirmationButtonTitle
+        self.handler = handler
+    }
 }
 
 struct MeasurementChartRangeSelectorConfiguration {
@@ -123,20 +162,37 @@ struct MeasurementChartView: View {
     private let defaultEmptyChartTimeSpan: TimeInterval = 60
     private let selectorTint: Color = .blue
 
-    let compactLayout: Bool
-    let availableSize: CGSize
+    let sizing: MeasurementChartSizing
     let showsRangeSelector: Bool
     let rebasesEnergyToVisibleRangeStart: Bool
     let extendsTimelineToPresent: Bool
     let rangeSelectorConfiguration: MeasurementChartRangeSelectorConfiguration?
-    
+
     @EnvironmentObject private var measurements: Measurements
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     @Environment(\.verticalSizeClass) private var verticalSizeClass
     var timeRange: ClosedRange<Date>? = nil
     let timeRangeLowerBound: Date?
     let timeRangeUpperBound: Date?
-    
+
+    @State private var embeddedWidth: CGFloat = 760
+
+    private var compactLayout: Bool {
+        switch sizing {
+        case .provided(_, let compact): return compact
+        case .embedded: return embeddedWidth < 760
+        }
+    }
+
+    private var availableSize: CGSize {
+        switch sizing {
+        case .provided(let size, _): return size
+        case .embedded:
+            let h = compactLayout ? 290 : 350
+            return CGSize(width: embeddedWidth, height: CGFloat(h))
+        }
+    }
+
     @State var displayVoltage: Bool = false
     @State var displayCurrent: Bool = false
     @State var displayPower: Bool = true
@@ -160,8 +216,7 @@ struct MeasurementChartView: View {
     let yLabels: Int = 4
 
     init(
-        compactLayout: Bool = false,
-        availableSize: CGSize = .zero,
+        sizing: MeasurementChartSizing = .embedded,
         timeRange: ClosedRange<Date>? = nil,
         timeRangeLowerBound: Date? = nil,
         timeRangeUpperBound: Date? = nil,
@@ -170,8 +225,7 @@ struct MeasurementChartView: View {
         extendsTimelineToPresent: Bool = true,
         rangeSelectorConfiguration: MeasurementChartRangeSelectorConfiguration? = nil
     ) {
-        self.compactLayout = compactLayout
-        self.availableSize = availableSize
+        self.sizing = sizing
         self.timeRange = timeRange
         self.timeRangeLowerBound = timeRangeLowerBound
         self.timeRangeUpperBound = timeRangeUpperBound
@@ -181,19 +235,11 @@ struct MeasurementChartView: View {
         self.rangeSelectorConfiguration = rangeSelectorConfiguration
     }
 
-    static func prefersCompactEmbeddedLayout(forWidth width: CGFloat) -> Bool {
-        width < 760
-    }
-
-    static func embeddedPlotReferenceHeight(compactLayout: Bool) -> CGFloat {
-        compactLayout ? 290 : 350
-    }
-
-    static func embeddedContentHeight(width: CGFloat, showsRangeSelector: Bool) -> CGFloat {
-        let compactLayout = prefersCompactEmbeddedLayout(forWidth: width)
-        let plotHeight = embeddedPlotReferenceHeight(compactLayout: compactLayout)
+    private static func embeddedContentHeight(width: CGFloat, showsRangeSelector: Bool) -> CGFloat {
+        let compact = width < 760
+        let plotHeight: CGFloat = compact ? 290 : 350
         guard showsRangeSelector else { return plotHeight }
-        return plotHeight + TimeRangeSelectorView.recommendedReservedHeight(compactLayout: compactLayout)
+        return plotHeight + TimeRangeSelectorView.recommendedReservedHeight(compactLayout: compact)
     }
 
     private var axisColumnWidth: CGFloat {
@@ -305,6 +351,28 @@ struct MeasurementChartView: View {
     }
 
     var body: some View {
+        switch sizing {
+        case .provided:
+            chartBody
+        case .embedded:
+            let chartWidth = max(embeddedWidth, 1)
+            chartBody
+                .frame(maxWidth: .infinity, alignment: .topLeading)
+                .frame(height: Self.embeddedContentHeight(width: chartWidth, showsRangeSelector: showsRangeSelector))
+                .background(
+                    GeometryReader { geometry in
+                        Color.clear.preference(key: EmbeddedWidthKey.self, value: geometry.size.width)
+                    }
+                )
+                .onPreferenceChange(EmbeddedWidthKey.self) { width in
+                    guard width > 0, abs(width - embeddedWidth) > 0.5 else { return }
+                    embeddedWidth = width
+                }
+        }
+    }
+
+    @ViewBuilder
+    private var chartBody: some View {
         let availableTimeRange = availableSelectionTimeRange()
         let visibleTimeRange = resolvedVisibleTimeRange(within: availableTimeRange)
         let powerSeries = series(
@@ -809,19 +877,22 @@ struct MeasurementChartView: View {
 
         return MeasurementChartRangeSelectorConfiguration(
             keepAction: MeasurementChartSelectionAction(
-                title: compactLayout ? "Keep" : "Keep Selection",
+                title: "Keep Selection",
+                shortTitle: "Keep",
                 systemName: "scissors",
                 tone: .destructive,
                 handler: trimBufferToSelection
             ),
             removeAction: MeasurementChartSelectionAction(
-                title: compactLayout ? "Cut" : "Remove Selection",
+                title: "Remove Selection",
+                shortTitle: "Cut",
                 systemName: "minus.circle",
                 tone: .destructive,
                 handler: removeSelectionFromBuffer
             ),
             resetAction: MeasurementChartResetAction(
-                title: compactLayout ? "Reset" : "Reset Buffer",
+                title: "Reset Buffer",
+                shortTitle: "Reset",
                 systemName: "trash",
                 tone: .destructiveProminent,
                 confirmationTitle: "Reset captured measurements?",
@@ -897,24 +968,24 @@ struct MeasurementChartView: View {
         temperatureSeries: SeriesData
     ) -> some View {
         if self.displayPower {
-            Chart(points: powerSeries.points, context: powerSeries.context, strokeColor: .red)
+            TimeSeriesChart(points: powerSeries.points, context: powerSeries.context, strokeColor: powerSeries.kind.tint)
                 .opacity(0.72)
         } else if self.displayEnergy {
-            Chart(points: energySeries.points, context: energySeries.context, strokeColor: .teal)
+            TimeSeriesChart(points: energySeries.points, context: energySeries.context, strokeColor: energySeries.kind.tint)
                 .opacity(0.78)
         } else {
             if self.displayVoltage {
-                Chart(points: voltageSeries.points, context: voltageSeries.context, strokeColor: .green)
+                TimeSeriesChart(points: voltageSeries.points, context: voltageSeries.context, strokeColor: voltageSeries.kind.tint)
                     .opacity(0.78)
             }
             if self.displayCurrent {
-                Chart(points: currentSeries.points, context: currentSeries.context, strokeColor: .blue)
+                TimeSeriesChart(points: currentSeries.points, context: currentSeries.context, strokeColor: currentSeries.kind.tint)
                     .opacity(0.78)
             }
         }
 
         if displayTemperature {
-            Chart(points: temperatureSeries.points, context: temperatureSeries.context, strokeColor: .orange)
+            TimeSeriesChart(points: temperatureSeries.points, context: temperatureSeries.context, strokeColor: temperatureSeries.kind.tint)
                 .opacity(0.86)
         }
     }
@@ -1767,9 +1838,7 @@ struct MeasurementChartView: View {
         context: ChartContext,
         height: CGFloat
     ) -> CGFloat {
-        let value = context.yAxisLabel(for: labelIndex, of: yLabels)
-        let anchorPoint = CGPoint(x: context.origin.x, y: CGFloat(value))
-        return context.placeInRect(point: anchorPoint).y * height
+        context.yGuidePosition(for: labelIndex, of: yLabels, height: height)
     }
 
     private func xGuidePosition(
@@ -1777,9 +1846,7 @@ struct MeasurementChartView: View {
         context: ChartContext,
         width: CGFloat
     ) -> CGFloat {
-        let value = context.xAxisLabel(for: labelIndex, of: xLabels)
-        let anchorPoint = CGPoint(x: CGFloat(value), y: context.origin.y)
-        return context.placeInRect(point: anchorPoint).x * width
+        context.xGuidePosition(for: labelIndex, of: xLabels, width: width)
     }
     
     // MARK: Cu iteratie nu functioneaza deoarece view-ul din bucla nu este reimprospatat la modificare obiectului observat
@@ -1932,37 +1999,11 @@ struct MeasurementChartView: View {
     }
     
     fileprivate func horizontalGuides(context: ChartContext) -> some View {
-        GeometryReader { geometry in
-            Path { path in
-                for labelIndex in 1...self.yLabels {
-                    let y = yGuidePosition(
-                        for: labelIndex,
-                        context: context,
-                        height: geometry.size.height
-                    )
-                    path.addLine(from: CGPoint(x: 0, y: y), to: CGPoint(x: geometry.size.width, y: y))
-                }
-            }
-            .stroke(Color.secondary.opacity(0.38), lineWidth: 0.85)
-        }
+        TimeSeriesChartHorizontalGuides(context: context, labelCount: yLabels)
     }
     
     fileprivate func verticalGuides(context: ChartContext) -> some View {
-        GeometryReader { geometry in
-            Path { path in
-                
-                for labelIndex in 2..<self.xLabels {
-                    let x = xGuidePosition(
-                        for: labelIndex,
-                        context: context,
-                        width: geometry.size.width
-                    )
-                    path.move(to: CGPoint(x: x, y: 0) )
-                    path.addLine(to: CGPoint(x: path.currentPoint!.x, y: geometry.size.height) )
-                }
-            }
-            .stroke(Color.secondary.opacity(0.34), style: StrokeStyle(lineWidth: 0.8, dash: [4, 4]))
-        }
+        TimeSeriesChartVerticalGuides(context: context, labelCount: xLabels)
     }
 
     fileprivate func discontinuityMarkers(
@@ -1988,6 +2029,14 @@ struct MeasurementChartView: View {
     
 }
 
+private struct EmbeddedWidthKey: PreferenceKey {
+    static let defaultValue: CGFloat = 760
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        let next = nextValue()
+        if next > 0 { value = next }
+    }
+}
+
 private struct TimeRangeSelectorView: View {
     private enum DragTarget {
         case lowerBound
@@ -2078,6 +2127,7 @@ private struct TimeRangeSelectorView: View {
                 if !coversFullRange {
                     actionButton(
                         title: configuration.keepAction.title,
+                        shortTitle: configuration.keepAction.shortTitle,
                         systemName: configuration.keepAction.systemName,
                         tone: configuration.keepAction.tone,
                         action: {
@@ -2089,6 +2139,7 @@ private struct TimeRangeSelectorView: View {
                     if let removeAction = configuration.removeAction {
                         actionButton(
                             title: removeAction.title,
+                            shortTitle: removeAction.shortTitle,
                             systemName: removeAction.systemName,
                             tone: removeAction.tone,
                             action: {
@@ -2103,6 +2154,7 @@ private struct TimeRangeSelectorView: View {
 
                 actionButton(
                     title: configuration.resetAction.title,
+                    shortTitle: configuration.resetAction.shortTitle,
                     systemName: configuration.resetAction.systemName,
                     tone: configuration.resetAction.tone,
                     action: {
@@ -2126,7 +2178,7 @@ private struct TimeRangeSelectorView: View {
                     RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
                         .fill(Color.primary.opacity(0.05))
 
-                    Chart(
+                    TimeSeriesChart(
                         points: points,
                         context: context,
                         areaChart: true,
@@ -2136,7 +2188,7 @@ private struct TimeRangeSelectorView: View {
                     .opacity(0.94)
                     .allowsHitTesting(false)
 
-                    Chart(
+                    TimeSeriesChart(
                         points: points,
                         context: context,
                         strokeColor: selectorTint.opacity(0.56)
@@ -2260,6 +2312,7 @@ private struct TimeRangeSelectorView: View {
 
     private func actionButton(
         title: String,
+        shortTitle: String? = nil,
         systemName: String,
         tone: MeasurementChartSelectorActionTone,
         action: @escaping () -> Void
@@ -2272,9 +2325,10 @@ private struct TimeRangeSelectorView: View {
                 return .white
             }
         }()
+        let displayTitle = (compactLayout ? shortTitle : nil) ?? title
 
         return Button(action: action) {
-            Label(title, systemImage: systemName)
+            Label(displayTitle, systemImage: systemName)
                 .font(compactLayout ? .caption.weight(.semibold) : .footnote.weight(.semibold))
                 .padding(.horizontal, compactLayout ? 10 : 12)
                 .padding(.vertical, compactLayout ? 7 : 8)
@@ -2691,238 +2745,3 @@ private struct TimeRangeSelectorView: View {
         }
     }
 }
-
-struct Chart : View {
-    
-    @Environment(\.displayScale) private var displayScale
-
-    let points: [Measurements.Measurement.Point]
-    let context: ChartContext
-    var areaChart: Bool = false
-    var strokeColor: Color = .black
-    var areaFillColor: Color? = nil
-    
-    var body : some View {
-        GeometryReader { geometry in
-            if self.areaChart {
-                let fillColor = areaFillColor ?? strokeColor.opacity(0.2)
-                self.path( geometry: geometry )
-                    .fill(
-                        LinearGradient(
-                            gradient: .init(
-                                colors: [
-                                    fillColor.opacity(0.72),
-                                    fillColor.opacity(0.18)
-                                ]
-                            ),
-                            startPoint: .init(x: 0.5, y: 0.08),
-                            endPoint: .init(x: 0.5, y: 0.92)
-                        )
-                    )
-            } else {
-                self.path( geometry: geometry )
-                    .stroke(self.strokeColor, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
-            }
-        }
-    }
-    
-    fileprivate func path(geometry: GeometryProxy) -> Path {
-        let displayedPoints = scaledPoints(for: geometry.size.width)
-        let baselineY = context.placeInRect(
-            point: CGPoint(x: context.origin.x, y: context.origin.y)
-        ).y * geometry.size.height
-
-        return Path { path in
-            var firstRenderedPoint: CGPoint?
-            var lastRenderedPoint: CGPoint?
-            var needsMove = true
-
-            for point in displayedPoints {
-                if point.isDiscontinuity {
-                    closeAreaSegment(
-                        in: &path,
-                        firstPoint: firstRenderedPoint,
-                        lastPoint: lastRenderedPoint,
-                        baselineY: baselineY
-                    )
-                    firstRenderedPoint = nil
-                    lastRenderedPoint = nil
-                    needsMove = true
-                    continue
-                }
-
-                let item = context.placeInRect(point: point.point())
-                let renderedPoint = CGPoint(
-                    x: item.x * geometry.size.width,
-                    y: item.y * geometry.size.height
-                )
-
-                if needsMove {
-                    path.move(to: renderedPoint)
-                    firstRenderedPoint = renderedPoint
-                    needsMove = false
-                } else {
-                    path.addLine(to: renderedPoint)
-                }
-
-                lastRenderedPoint = renderedPoint
-            }
-
-            closeAreaSegment(
-                in: &path,
-                firstPoint: firstRenderedPoint,
-                lastPoint: lastRenderedPoint,
-                baselineY: baselineY
-            )
-        }
-    }
-
-    private func closeAreaSegment(
-        in path: inout Path,
-        firstPoint: CGPoint?,
-        lastPoint: CGPoint?,
-        baselineY: CGFloat
-    ) {
-        guard areaChart, let firstPoint, let lastPoint, firstPoint != lastPoint else { return }
-
-        path.addLine(to: CGPoint(x: lastPoint.x, y: baselineY))
-        path.addLine(to: CGPoint(x: firstPoint.x, y: baselineY))
-        path.closeSubpath()
-    }
-
-    private func scaledPoints(for width: CGFloat) -> [Measurements.Measurement.Point] {
-        let sampleCount = points.reduce(into: 0) { partialResult, point in
-            if point.isSample {
-                partialResult += 1
-            }
-        }
-
-        let displayColumns = max(Int((width * max(displayScale, 1)).rounded(.up)), 1)
-        let maximumSamplesToRender = max(displayColumns * (areaChart ? 3 : 4), 240)
-
-        guard sampleCount > maximumSamplesToRender, context.isValid else {
-            return points
-        }
-
-        var scaledPoints: [Measurements.Measurement.Point] = []
-        var currentSegment: [Measurements.Measurement.Point] = []
-
-        for point in points {
-            if point.isDiscontinuity {
-                appendScaledSegment(currentSegment, to: &scaledPoints, displayColumns: displayColumns)
-                currentSegment.removeAll(keepingCapacity: true)
-
-                if !scaledPoints.isEmpty, scaledPoints.last?.isDiscontinuity == false {
-                    appendScaledPoint(point, to: &scaledPoints)
-                }
-            } else {
-                currentSegment.append(point)
-            }
-        }
-
-        appendScaledSegment(currentSegment, to: &scaledPoints, displayColumns: displayColumns)
-        return scaledPoints.isEmpty ? points : scaledPoints
-    }
-
-    private func appendScaledSegment(
-        _ segment: [Measurements.Measurement.Point],
-        to scaledPoints: inout [Measurements.Measurement.Point],
-        displayColumns: Int
-    ) {
-        guard !segment.isEmpty else { return }
-
-        if segment.count <= max(displayColumns * 2, 120) {
-            for point in segment {
-                appendScaledPoint(point, to: &scaledPoints)
-            }
-            return
-        }
-
-        var bucket: [Measurements.Measurement.Point] = []
-        var currentColumn: Int?
-
-        for point in segment {
-            let column = displayColumn(for: point, totalColumns: displayColumns)
-
-            if let currentColumn, currentColumn != column {
-                appendBucket(bucket, to: &scaledPoints)
-                bucket.removeAll(keepingCapacity: true)
-            }
-
-            bucket.append(point)
-            currentColumn = column
-        }
-
-        appendBucket(bucket, to: &scaledPoints)
-    }
-
-    private func appendBucket(
-        _ bucket: [Measurements.Measurement.Point],
-        to scaledPoints: inout [Measurements.Measurement.Point]
-    ) {
-        guard !bucket.isEmpty else { return }
-
-        if bucket.count <= 2 {
-            for point in bucket {
-                appendScaledPoint(point, to: &scaledPoints)
-            }
-            return
-        }
-
-        let firstPoint = bucket.first!
-        let lastPoint = bucket.last!
-        let minimumPoint = bucket.min { lhs, rhs in lhs.value < rhs.value } ?? firstPoint
-        let maximumPoint = bucket.max { lhs, rhs in lhs.value < rhs.value } ?? firstPoint
-
-        let orderedPoints = [firstPoint, minimumPoint, maximumPoint, lastPoint]
-            .sorted { lhs, rhs in
-                if lhs.timestamp == rhs.timestamp {
-                    return lhs.id < rhs.id
-                }
-                return lhs.timestamp < rhs.timestamp
-            }
-
-        var emittedPointIDs: Set<Int> = []
-        for point in orderedPoints where emittedPointIDs.insert(point.id).inserted {
-            appendScaledPoint(point, to: &scaledPoints)
-        }
-    }
-
-    private func appendScaledPoint(
-        _ point: Measurements.Measurement.Point,
-        to scaledPoints: inout [Measurements.Measurement.Point]
-    ) {
-        guard !(scaledPoints.last?.timestamp == point.timestamp &&
-                scaledPoints.last?.value == point.value &&
-                scaledPoints.last?.kind == point.kind) else {
-            return
-        }
-
-        scaledPoints.append(
-            Measurements.Measurement.Point(
-                id: scaledPoints.count,
-                timestamp: point.timestamp,
-                value: point.value,
-                kind: point.kind
-            )
-        )
-    }
-
-    private func displayColumn(
-        for point: Measurements.Measurement.Point,
-        totalColumns: Int
-    ) -> Int {
-        let totalColumns = max(totalColumns, 1)
-        let timeSpan = max(Double(context.size.width), 1)
-        let normalizedOffset = min(
-            max((point.timestamp.timeIntervalSince1970 - Double(context.origin.x)) / timeSpan, 0),
-            1
-        )
-
-        return min(
-            Int((normalizedOffset * Double(totalColumns - 1)).rounded(.down)),
-            totalColumns - 1
-        )
-    }
-    
-}


+4 -29

USB Meter/Views/Meter/Tabs/ChargeRecord/MeterChargeRecordTabView.swift

View

@@ -15,17 +15,6 @@ struct MeterChargeRecordTabView: View, Equatable {
     }
 }
 
-private struct SessionChartWidthPreferenceKey: PreferenceKey {
-    static let defaultValue: CGFloat = 760
-
-    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        let next = nextValue()
-        if next > 0 {
-            value = next
-        }
-    }
-}
-
 struct MeterChargeRecordContentView: View {
     private struct SessionMetricRow {
         let label: String
@@ -126,7 +115,6 @@ struct MeterChargeRecordContentView: View {
     @State private var activeMode: ActiveMode = .chargeSession
     @State private var detectedTrimWindow: ChargingWindowDetector.DetectedWindow?
     @State private var trimBannerDismissedForSessionID: UUID?
-    @State private var sessionChartWidth: CGFloat = 760
 
     private var shouldShowTrimBanner: Bool {
         guard let session = openChargeSession,
@@ -1393,9 +1381,6 @@ struct MeterChargeRecordContentView: View {
 
     private func sessionChartCard(timeRange: ClosedRange<Date>?, session: ChargeSessionSummary) -> some View {
         let hasRangeSelector = session.aggregatedSamples.isEmpty == false
-        let chartWidth = max(sessionChartWidth, 1)
-        let compactChartLayout = MeasurementChartView.prefersCompactEmbeddedLayout(forWidth: chartWidth)
-        let plotReferenceHeight = MeasurementChartView.embeddedPlotReferenceHeight(compactLayout: compactChartLayout)
 
         return VStack(alignment: .leading, spacing: 12) {
             HStack(spacing: 8) {
@@ -1413,8 +1398,6 @@ struct MeterChargeRecordContentView: View {
             }
 
             MeasurementChartView(
-                compactLayout: compactChartLayout,
-                availableSize: CGSize(width: chartWidth, height: plotReferenceHeight),
                 timeRange: timeRange,
                 timeRangeLowerBound: sessionChartLiveTrimBounds(for: session).lower,
                 timeRangeUpperBound: sessionChartLiveTrimBounds(for: session).upper,
@@ -1424,7 +1407,8 @@ struct MeterChargeRecordContentView: View {
                 rangeSelectorConfiguration: hasRangeSelector
                     ? MeasurementChartRangeSelectorConfiguration(
                         keepAction: MeasurementChartSelectionAction(
-                            title: compactChartLayout ? "Keep" : "Keep Selection",
+                            title: "Keep Selection",
+                            shortTitle: "Keep",
                             systemName: "scissors",
                             tone: .destructive,
                             handler: { range in
@@ -1438,7 +1422,8 @@ struct MeterChargeRecordContentView: View {
                         ),
                         removeAction: nil,
                         resetAction: MeasurementChartResetAction(
-                            title: compactChartLayout ? "Reset" : "Reset Trim",
+                            title: "Reset Trim",
+                            shortTitle: "Reset",
                             systemName: "arrow.counterclockwise",
                             tone: .reversible,
                             confirmationTitle: "Reset session trim?",
@@ -1452,16 +1437,6 @@ struct MeterChargeRecordContentView: View {
             )
             .environmentObject(usbMeter.chargeRecordMeasurements)
             .frame(maxWidth: .infinity, alignment: .topLeading)
-            .frame(height: MeasurementChartView.embeddedContentHeight(width: chartWidth, showsRangeSelector: hasRangeSelector))
-            .background(
-                GeometryReader { geometry in
-                    Color.clear.preference(key: SessionChartWidthPreferenceKey.self, value: geometry.size.width)
-                }
-            )
-            .onPreferenceChange(SessionChartWidthPreferenceKey.self) { width in
-                guard width > 0, abs(width - sessionChartWidth) > 0.5 else { return }
-                sessionChartWidth = width
-            }
         }
         .padding(18)
         .meterCard(tint: .blue, fillOpacity: 0.14, strokeOpacity: 0.20)


+1 -2

USB Meter/Views/Meter/Tabs/ChargeRecord/SessionTrimEditorView.swift

View

@@ -131,8 +131,7 @@ struct SessionTrimEditorView: View {
                 ZStack(alignment: .topLeading) {
                     // Background chart — full session
                     MeasurementChartView(
-                        compactLayout: true,
-                        availableSize: geo.size,
+                        sizing: .provided(size: geo.size, compact: true),
                         timeRange: fullStart...fullEnd,
                         showsRangeSelector: false,
                         rebasesEnergyToVisibleRangeStart: false


+2 -8

USB Meter/Views/Meter/Tabs/Chart/MeterChartTabView.swift

View

@@ -28,10 +28,7 @@ struct MeterChartTabView: View {
         Group {
             if isLandscape {
                 landscapeFace {
-                    MeasurementChartView(
-                        compactLayout: prefersCompactLandscapeLayout,
-                        availableSize: size
-                    )
+                    MeasurementChartView(sizing: .provided(size: size, compact: prefersCompactLandscapeLayout))
                         .environmentObject(meter.measurements)
                         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                         .padding(10)
@@ -40,10 +37,7 @@ struct MeterChartTabView: View {
                 }
             } else {
                 portraitFace {
-                    MeasurementChartView(
-                        compactLayout: prefersCompactPortraitLayout,
-                        availableSize: size
-                    )
+                    MeasurementChartView(sizing: .provided(size: size, compact: prefersCompactPortraitLayout))
                         .environmentObject(meter.measurements)
                         .padding(.horizontal, portraitContentCardHorizontalPadding)
                         .padding(.vertical, portraitContentCardVerticalPadding)


+13 -24

USB Meter/Views/Meter/Tabs/Live/Subviews/MeterLiveContentView.swift

View

+                                                             rssiHorizontalGuides(context: chartContext)
+                                                             rssiVerticalGuides(context: chartContext)
+                    -                                        Chart(points: points, context: chartContext, strokeColor: .mint)
+                    +                                        TimeSeriesChart(points: points, context: chartContext, strokeColor: .mint)
+                                                                 .opacity(0.82)
+                                                         .frame(maxWidth: .infinity)
+                         private func rssiHorizontalGuides(context: ChartContext) -> some View {
+                    -        GeometryReader { geometry in
+                    -            Path { path in
+                    -                for labelIndex in 1...yLabels {
+                    -                    let value = context.yAxisLabel(for: labelIndex, of: yLabels)
+                    -                    let anchorPoint = CGPoint(x: context.origin.x, y: CGFloat(value))
+                    -                    let y = context.placeInRect(point: anchorPoint).y * geometry.size.height
+                    -                    path.addLine(from: CGPoint(x: 0, y: y), to: CGPoint(x: geometry.size.width, y: y))
+                    -                }
+                    -            }
+                    -            .stroke(Color.secondary.opacity(0.30), lineWidth: 0.8)
+                    -        }
+                    +        TimeSeriesChartHorizontalGuides(
+                    +            context: context,
+                    +            labelCount: yLabels,
+                    +            strokeColor: Color.secondary.opacity(0.30),
+                    +            lineWidth: 0.8
+                    +        )
+                         private func rssiVerticalGuides(context: ChartContext) -> some View {
+                    -        GeometryReader { geometry in
+                    -            Path { path in
+                    -                for labelIndex in 2..<xLabels {
+                    -                    let value = context.xAxisLabel(for: labelIndex, of: xLabels)
+                    -                    let anchorPoint = CGPoint(x: CGFloat(value), y: context.origin.y)
+                    -                    let x = context.placeInRect(point: anchorPoint).x * geometry.size.width
+                    -                    path.move(to: CGPoint(x: x, y: 0))
+                    -                    path.addLine(to: CGPoint(x: x, y: geometry.size.height))
+                    -                }
+                    -            }
+                    -            .stroke(Color.secondary.opacity(0.26), style: StrokeStyle(lineWidth: 0.8, dash: [4, 4]))
+                    -        }
+                    +        TimeSeriesChartVerticalGuides(
+                    +            context: context,
+                    +            labelCount: xLabels,
+                    +            strokeColor: Color.secondary.opacity(0.26),
+                    +            strokeStyle: StrokeStyle(lineWidth: 0.8, dash: [4, 4])
+                    +        )

	@@ -1020,7 +1020,7 @@ struct ChargedDeviceDetailView: View {
1020	1020	.foregroundColor(.secondary)
1021	1021	}
1022	1022
1023		- Chart(
	1023	+ TimeSeriesChart(
1024	1024	points: snapshot.points,
1025	1025	context: snapshot.context,
1026	1026	areaChart: areaChart,

	@@ -25,6 +25,7 @@
25	25	437D47D52415FD8C00B7768E /* ChargeRecordSheetView.swift in Sources / = {isa = PBXBuildFile; fileRef = 437D47D42415FD8C00B7768E / ChargeRecordSheetView.swift */; };
26	26	437D47D72415FDF300B7768E /* MeterScreenControlsView.swift in Sources / = {isa = PBXBuildFile; fileRef = 437D47D62415FDF300B7768E / MeterScreenControlsView.swift */; };
27	27	437F0AB72463108F005DEBEC /* MeasurementChartView.swift in Sources / = {isa = PBXBuildFile; fileRef = 437F0AB62463108F005DEBEC / MeasurementChartView.swift */; };
	28	+ 437F0AB92463108F005DEBEC /* TimeSeriesChart.swift in Sources / = {isa = PBXBuildFile; fileRef = 437F0AB82463108F005DEBEC / TimeSeriesChart.swift */; };
28	29	4383B460240EB2D000DAAEBF /* Meter.swift in Sources / = {isa = PBXBuildFile; fileRef = 4383B45F240EB2D000DAAEBF / Meter.swift */; };
29	30	4383B462240EB5E400DAAEBF /* AppData.swift in Sources / = {isa = PBXBuildFile; fileRef = 4383B461240EB5E400DAAEBF / AppData.swift */; };
30	31	4383B465240EB6B200DAAEBF /* UserDefault.swift in Sources / = {isa = PBXBuildFile; fileRef = 4383B464240EB6B200DAAEBF / UserDefault.swift */; };
	@@ -137,6 +138,7 @@
137	138	437D47D42415FD8C00B7768E /* ChargeRecordSheetView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChargeRecordSheetView.swift; sourceTree = "<group>"; };
138	139	437D47D62415FDF300B7768E /* MeterScreenControlsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MeterScreenControlsView.swift; sourceTree = "<group>"; };
139	140	437F0AB62463108F005DEBEC /* MeasurementChartView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MeasurementChartView.swift; sourceTree = "<group>"; };
	141	+ 437F0AB82463108F005DEBEC /* TimeSeriesChart.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimeSeriesChart.swift; sourceTree = "<group>"; };
140	142	4383B45F240EB2D000DAAEBF /* Meter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Meter.swift; sourceTree = "<group>"; };
141	143	4383B461240EB5E400DAAEBF /* AppData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppData.swift; sourceTree = "<group>"; };
142	144	4383B464240EB6B200DAAEBF /* UserDefault.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserDefault.swift; sourceTree = "<group>"; };
	@@ -522,11 +524,20 @@
522	524	D28F10023C8E4A7A00A10002 /* Components */ = {
523	525	isa = PBXGroup;
524	526	children = (
	527	+ 437F0AB32463108F005DEBEC /* Charts */,
525	528	D28F10033C8E4A7A00A10003 /* Generic */,
526	529	);
527	530	path = Components;
528	531	sourceTree = "<group>";
529	532	};
	533	+ 437F0AB32463108F005DEBEC /* Charts */ = {
	534	+ isa = PBXGroup;
	535	+ children = (
	536	+ 437F0AB82463108F005DEBEC /* TimeSeriesChart.swift */,
	537	+ );
	538	+ path = Charts;
	539	+ sourceTree = "<group>";
	540	+ };
530	541	D28F10033C8E4A7A00A10003 /* Generic */ = {
531	542	isa = PBXGroup;
532	543	children = (
	@@ -811,6 +822,7 @@
811	822	AAD5F9B12B1CAC7A00F8E4F9 /* SidebarView.swift in Sources */,
812	823	43CBF667240BF3EB00255B8B /* ContentView.swift in Sources */,
813	824	437F0AB72463108F005DEBEC /* MeasurementChartView.swift in Sources */,
	825	+ 437F0AB92463108F005DEBEC /* TimeSeriesChart.swift in Sources */,
814	826	437D47D32415FB7E00B7768E /* Decimal.swift in Sources */,
815	827	43874C7F2414F3F400525397 /* Float.swift in Sources */,
816	828	4383B462240EB5E400DAAEBF /* AppData.swift in Sources */,

	@@ -15,17 +15,6 @@ struct MeterChargeRecordTabView: View, Equatable {
15	15	}
16	16	}
17	17
18		-private struct SessionChartWidthPreferenceKey: PreferenceKey {
19		- static let defaultValue: CGFloat = 760
20		-
21		- static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
22		- let next = nextValue()
23		- if next > 0 {
24		- value = next
25		- }
26		- }
27		-}
28		-
29	18	struct MeterChargeRecordContentView: View {
30	19	private struct SessionMetricRow {
31	20	let label: String
	@@ -126,7 +115,6 @@ struct MeterChargeRecordContentView: View {
126	115	@State private var activeMode: ActiveMode = .chargeSession
127	116	@State private var detectedTrimWindow: ChargingWindowDetector.DetectedWindow?
128	117	@State private var trimBannerDismissedForSessionID: UUID?
129		- @State private var sessionChartWidth: CGFloat = 760
130	118
131	119	private var shouldShowTrimBanner: Bool {
132	120	guard let session = openChargeSession,
	@@ -1393,9 +1381,6 @@ struct MeterChargeRecordContentView: View {
1393	1381
1394	1382	private func sessionChartCard(timeRange: ClosedRange<Date>?, session: ChargeSessionSummary) -> some View {
1395	1383	let hasRangeSelector = session.aggregatedSamples.isEmpty == false
1396		- let chartWidth = max(sessionChartWidth, 1)
1397		- let compactChartLayout = MeasurementChartView.prefersCompactEmbeddedLayout(forWidth: chartWidth)
1398		- let plotReferenceHeight = MeasurementChartView.embeddedPlotReferenceHeight(compactLayout: compactChartLayout)
1399	1384
1400	1385	return VStack(alignment: .leading, spacing: 12) {
1401	1386	HStack(spacing: 8) {
	@@ -1413,8 +1398,6 @@ struct MeterChargeRecordContentView: View {
1413	1398	}
1414	1399
1415	1400	MeasurementChartView(
1416		- compactLayout: compactChartLayout,
1417		- availableSize: CGSize(width: chartWidth, height: plotReferenceHeight),
1418	1401	timeRange: timeRange,
1419	1402	timeRangeLowerBound: sessionChartLiveTrimBounds(for: session).lower,
1420	1403	timeRangeUpperBound: sessionChartLiveTrimBounds(for: session).upper,
	@@ -1424,7 +1407,8 @@ struct MeterChargeRecordContentView: View {
1424	1407	rangeSelectorConfiguration: hasRangeSelector
1425	1408	? MeasurementChartRangeSelectorConfiguration(
1426	1409	keepAction: MeasurementChartSelectionAction(
1427		- title: compactChartLayout ? "Keep" : "Keep Selection",
	1410	+ title: "Keep Selection",
	1411	+ shortTitle: "Keep",
1428	1412	systemName: "scissors",
1429	1413	tone: .destructive,
1430	1414	handler: { range in
	@@ -1438,7 +1422,8 @@ struct MeterChargeRecordContentView: View {
1438	1422	),
1439	1423	removeAction: nil,
1440	1424	resetAction: MeasurementChartResetAction(
1441		- title: compactChartLayout ? "Reset" : "Reset Trim",
	1425	+ title: "Reset Trim",
	1426	+ shortTitle: "Reset",
1442	1427	systemName: "arrow.counterclockwise",
1443	1428	tone: .reversible,
1444	1429	confirmationTitle: "Reset session trim?",
	@@ -1452,16 +1437,6 @@ struct MeterChargeRecordContentView: View {
1452	1437	)
1453	1438	.environmentObject(usbMeter.chargeRecordMeasurements)
1454	1439	.frame(maxWidth: .infinity, alignment: .topLeading)
1455		- .frame(height: MeasurementChartView.embeddedContentHeight(width: chartWidth, showsRangeSelector: hasRangeSelector))
1456		- .background(
1457		- GeometryReader { geometry in
1458		- Color.clear.preference(key: SessionChartWidthPreferenceKey.self, value: geometry.size.width)
1459		- }
1460		- )
1461		- .onPreferenceChange(SessionChartWidthPreferenceKey.self) { width in
1462		- guard width > 0, abs(width - sessionChartWidth) > 0.5 else { return }
1463		- sessionChartWidth = width
1464		- }
1465	1440	}
1466	1441	.padding(18)
1467	1442	.meterCard(tint: .blue, fillOpacity: 0.14, strokeOpacity: 0.20)

	@@ -131,8 +131,7 @@ struct SessionTrimEditorView: View {
131	131	ZStack(alignment: .topLeading) {
132	132	// Background chart — full session
133	133	MeasurementChartView(
134		- compactLayout: true,
135		- availableSize: geo.size,
	134	+ sizing: .provided(size: geo.size, compact: true),
136	135	timeRange: fullStart...fullEnd,
137	136	showsRangeSelector: false,
138	137	rebasesEnergyToVisibleRangeStart: false

	@@ -28,10 +28,7 @@ struct MeterChartTabView: View {
28	28	Group {
29	29	if isLandscape {
30	30	landscapeFace {
31		- MeasurementChartView(
32		- compactLayout: prefersCompactLandscapeLayout,
33		- availableSize: size
34		- )
	31	+ MeasurementChartView(sizing: .provided(size: size, compact: prefersCompactLandscapeLayout))
35	32	.environmentObject(meter.measurements)
36	33	.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
37	34	.padding(10)
	@@ -40,10 +37,7 @@ struct MeterChartTabView: View {
40	37	}
41	38	} else {
42	39	portraitFace {
43		- MeasurementChartView(
44		- compactLayout: prefersCompactPortraitLayout,
45		- availableSize: size
46		- )
	40	+ MeasurementChartView(sizing: .provided(size: size, compact: prefersCompactPortraitLayout))
47	41	.environmentObject(meter.measurements)
48	42	.padding(.horizontal, portraitContentCardHorizontalPadding)
49	43	.padding(.vertical, portraitContentCardVerticalPadding)