Circular sleep chart displays as if it is a clock

Package.swift

@@ -6,10 +6,10 @@ import PackageDescription
 let package = Package(
     name: "SleepChartKit",
     platforms: [
-        .iOS(.v15),
-        .macOS(.v12),
-        .watchOS(.v8),
-        .tvOS(.v15)
+        .iOS(.v16),
+        .macOS(.v13),
+        .watchOS(.v9),
+        .tvOS(.v16)
     ],
     products: [
         .library(

Sources/SleepChartKit/Components/SleepChartView.swift

@@ -122,10 +122,12 @@ public struct SleepChartView: View {
 
     public var body: some View {
         switch style {
-        case .timeline:
+        case .timeline, .timelineNoDurations:
             timelineChartView
+
         case .circular:
             circularChartView
+
         case .minimal:
             minimalChartView
         }
@@ -153,7 +155,8 @@ public struct SleepChartView: View {
                 sleepData: sleepData,
                 colorProvider: colorProvider,
                 durationFormatter: durationFormatter,
-                displayNameProvider: displayNameProvider
+                displayNameProvider: displayNameProvider,
+                hideDurations: style == .timelineNoDurations
             )
             .padding(.top, SleepChartConstants.legendTopPadding)
         }

Sources/SleepChartKit/Components/SleepCircularChartView.swift

@@ -68,7 +68,7 @@ public struct SleepCircularChartView: View {
         backgroundColor: Color = .clear,
         showLabels: Bool = true,
         showIcons: Bool = true,
-        thresholdHours: Double = 9.0
+        thresholdHours: Double = 12
     ) {
         self.samples = samples
         self.colorProvider = colorProvider
@@ -104,6 +104,20 @@ public struct SleepCircularChartView: View {
         var segments: [SleepSegment] = []
         var currentAngle: Double = -90 // Start at top (12 o'clock)
 
+        //making the chart look like the sleep starts at it would on a clock
+        let sleepStart = samples.first!.startDate
+
+        var h: Double = Double(Calendar.current.component(.hour, from: sleepStart))
+        if h >= 12 { h -= 12 }
+
+        let m: Double = Double(Calendar.current.component(.minute, from: sleepStart))
+
+        var difference: Double = (360 / 12) * h
+        difference += (360 / 12) * (m / 60)
+
+        currentAngle += difference
+
+
         for sample in samples {
             let samplePercentage = sample.duration / totalDuration
             let sampleArcDegrees = samplePercentage * totalArcDegrees
@@ -199,7 +213,7 @@ public struct SleepCircularChartView: View {
             let symbolOffset = innerRingRadius
 
             // Moon symbol at start of sleep arc
-            Image(systemName: "moon.fill")
+            Image(systemName: "bed.double.fill")
                 .foregroundColor(.white)
                 .font(.caption2)
                 .offset(

Sources/SleepChartKit/Components/SleepLegendView.swift

@@ -6,68 +6,102 @@ public struct SleepLegendView: View {
     private let colorProvider: SleepStageColorProvider
     private let durationFormatter: DurationFormatter
     private let displayNameProvider: SleepStageDisplayNameProvider
+    private let hideDurations: Bool
 
     public init(
         activeStages: [SleepStage],
         sleepData: [SleepStage: TimeInterval],
         colorProvider: SleepStageColorProvider = DefaultSleepStageColorProvider(),
         durationFormatter: DurationFormatter = DefaultDurationFormatter(),
-        displayNameProvider: SleepStageDisplayNameProvider = DefaultSleepStageDisplayNameProvider()
+        displayNameProvider: SleepStageDisplayNameProvider = DefaultSleepStageDisplayNameProvider(),
+        hideDurations: Bool = false
     ) {
         self.activeStages = activeStages
         self.sleepData = sleepData
         self.colorProvider = colorProvider
         self.durationFormatter = durationFormatter
         self.displayNameProvider = displayNameProvider
+        self.hideDurations = hideDurations
     }
 
     // MARK: - Layout Configuration
 
     /// Grid configuration for legend items with adaptive sizing
-    private var columns: [GridItem] {
-        [GridItem(.adaptive(
-            minimum: SleepChartConstants.legendItemMinWidth,
-            maximum: SleepChartConstants.legendItemMaxWidth
-        ))]
+    private var oneRow: [GridItem] {
+        [
+            GridItem(.adaptive(minimum: SleepChartConstants.legendItemMinWidth,
+                               maximum: SleepChartConstants.legendItemMaxWidth)
+            )
+        ]
+    }
+
+    private var twoRows: [GridItem] {
+        [
+            GridItem(.adaptive(minimum: SleepChartConstants.legendItemMinWidth,
+                               maximum: SleepChartConstants.legendItemMaxWidth), spacing: 0, alignment: .leading),
+
+            GridItem(.adaptive(minimum: SleepChartConstants.legendItemMinWidth,
+                               maximum: SleepChartConstants.legendItemMaxWidth), spacing: 0, alignment: .leading)
+
+        ]
     }
 
     // MARK: - Body
 
     public var body: some View {
-        LazyVGrid(
-            columns: columns,
-            alignment: .leading,
-            spacing: SleepChartConstants.legendItemSpacing
-        ) {
+
+            ViewThatFits {
+
+                LazyHGrid(
+                    rows: oneRow,
+                    alignment: .center,
+                    spacing: SleepChartConstants.legendItemSpacing
+                ) {
+                    legendItems
+                }
+
+                LazyHGrid(
+                    rows: twoRows,
+                    alignment: .center,
+                    spacing: SleepChartConstants.legendItemSpacing
+                ) {
+                    legendItems
+                }
+            }
+        }
+
+        // MARK: - Legend Items
+
+        @ViewBuilder
+        private var legendItems: some View {
             ForEach(activeStages, id: \.self) { stage in
                 // Only show stages that have recorded time
                 if let duration = sleepData[stage], duration > 0 {
                     LegendItem(
                         stage: stage,
-                        duration: duration,
+                        duration: hideDurations ? nil : duration,
                         colorProvider: colorProvider,
                         durationFormatter: durationFormatter,
                         displayNameProvider: displayNameProvider
                     )
                 }
             }
         }
-    }
 }
 
 /// A single legend item displaying a sleep stage with its color, name, and duration.
 ///
 /// This view shows a colored circle indicator, the stage name, and formatted duration
 /// in a horizontal layout suitable for use in a legend grid.
-private struct LegendItem: View {
+public struct LegendItem: View {
 
     // MARK: - Properties
 
     /// The sleep stage this item represents
     let stage: SleepStage
 
     /// The total duration for this sleep stage
-    let duration: TimeInterval
+    let duration: TimeInterval?
 
     /// Provider for the stage color
     let colorProvider: SleepStageColorProvider
@@ -78,10 +112,23 @@ private struct LegendItem: View {
     /// Provider for the stage display name
     let displayNameProvider: SleepStageDisplayNameProvider
 
+    public init(stage: SleepStage,
+         duration: TimeInterval?,
+         colorProvider: SleepStageColorProvider = DefaultSleepStageColorProvider(),
+         durationFormatter: DurationFormatter = DefaultDurationFormatter(),
+         displayNameProvider: SleepStageDisplayNameProvider = DefaultSleepStageDisplayNameProvider()) {
+
+        self.stage = stage
+        self.duration = duration
+        self.colorProvider = colorProvider
+        self.durationFormatter = durationFormatter
+        self.displayNameProvider = displayNameProvider
+    }
+
     // MARK: - Body
 
-    var body: some View {
-        HStack(spacing: SleepChartConstants.legendItemSpacing) {
+    public var body: some View {
+        HStack(spacing: 4) {
             // Color indicator circle
             Circle()
                 .fill(colorProvider.color(for: stage))
@@ -95,10 +142,13 @@ private struct LegendItem: View {
                 .font(.caption)
                 .foregroundColor(.secondary)
 
-            // Duration
-            Text(durationFormatter.format(duration))
-                .font(.caption.weight(.semibold))
-                .foregroundColor(.primary)
+            if let duration {
+
+                // Duration
+                Text(durationFormatter.format(duration))
+                    .font(.caption.weight(.semibold))
+                    .foregroundColor(.primary)
+            }
         }
     }
-}
+}

Sources/SleepChartKit/Components/SleepTimelineGraph.swift

@@ -137,7 +137,9 @@ public struct SleepTimelineGraph: View {
                     renderStageConnector(
                         context: context,
                         from: prevRect,
-                        to: currentRect
+                        to: currentRect,
+                        fromStage: previousStage,
+                        toStage: currentStage
                     )
                 }
 
@@ -159,10 +161,12 @@ public struct SleepTimelineGraph: View {
     private func renderStageConnector(
         context: GraphicsContext,
         from startRect: CGRect,
-        to endRect: CGRect
+        to endRect: CGRect,
+        fromStage: SleepStage?,
+        toStage: SleepStage?
     ) {
-        let startPoint = CGPoint(x: startRect.maxX, y: startRect.midY)
-        let endPoint = CGPoint(x: endRect.minX, y: endRect.midY)
+        let startPoint = CGPoint(x: startRect.maxX - SleepChartConstants.connectorOffset, y: startRect.midY)
+        let endPoint = CGPoint(x: endRect.minX + SleepChartConstants.connectorOffset, y: endRect.midY)
 
         // Calculate control points for smooth Bézier curve
         let controlPoint1 = CGPoint(
@@ -179,10 +183,21 @@ public struct SleepTimelineGraph: View {
         connectorPath.move(to: startPoint)
         connectorPath.addCurve(to: endPoint, control1: controlPoint1, control2: controlPoint2)
 
+        var gradient = Gradient(stops: [.init(color: .blue, location: 0), .init(color: .red, location: 1)])
+
+        if let fromStage,
+           let toStage {
+
+            let start = colorProvider.color(for: fromStage).opacity(SleepChartConstants.connectorOpacity)
+            let end = colorProvider.color(for: toStage).opacity(SleepChartConstants.connectorOpacity)
+
+            gradient = Gradient(stops: [.init(color: start, location: 0), .init(color: end, location: 1)])
+        }
+
         context.stroke(
             connectorPath,
-            with: .color(.gray.opacity(SleepChartConstants.connectorOpacity)),
+            with: .linearGradient(gradient, startPoint: controlPoint1, endPoint: controlPoint2),
             lineWidth: SleepChartConstants.connectorLineWidth
         )
     }
-}
+}

Sources/SleepChartKit/Models/SleepChartStyle.swift

@@ -10,6 +10,9 @@ public enum SleepChartStyle {
 
     /// Minimal timeline chart without axis, legends, or overlays
     case minimal
+
+    /// Timeline with no legend
+    case timelineNoDurations
 }
 
 /// Configuration options for circular sleep charts

Sources/SleepChartKit/Models/SleepSample.swift

@@ -3,7 +3,7 @@ import Foundation
 import HealthKit
 #endif
 
-public struct SleepSample: Hashable {
+public struct SleepSample: Hashable, Codable {
     public let stage: SleepStage
     public let startDate: Date
     public let endDate: Date
@@ -36,4 +36,4 @@ public struct SleepSample: Hashable {
     public var duration: TimeInterval {
         endDate.timeIntervalSince(startDate)
     }
-}
+}

Sources/SleepChartKit/Models/SleepStage.swift

@@ -3,7 +3,7 @@ import Foundation
 import HealthKit
 #endif
 
-public enum SleepStage: Int, CaseIterable, Hashable {
+public enum SleepStage: Int, CaseIterable, Hashable, Codable {
     case awake = 0
     case asleepREM = 1
     case asleepCore = 2

Sources/SleepChartKit/Services/SleepStageColorProvider.swift

@@ -38,10 +38,44 @@ public struct DefaultSleepStageColorProvider: SleepStageColorProvider {
         case .asleepDeep:
             return .indigo
         case .asleepUnspecified:
-            return .purple
+            return Color(UIColor.lightGray)
         case .inBed:
             return .gray
         }
     }
 
-}
+}
+
+public struct CustomSleepStageColorProvider: SleepStageColorProvider {
+
+    var awakeColour: Color
+    var remColour: Color
+    var coreColour: Color
+    var deepColour: Color
+    var unspecifiedColour: Color
+    var inBedColour: Color
+
+    public init(awake: Color? = nil, REM: Color? = nil, core: Color? = nil, deep: Color? = nil, unspecified: Color? = nil, inBed: Color? = nil) {
+
+        self.awakeColour = awake ?? .orange
+        self.remColour = REM ?? .cyan
+        self.coreColour = core ?? .blue
+        self.deepColour = deep ?? .indigo
+        self.unspecifiedColour = unspecified ?? .purple
+        self.inBedColour = inBed ?? .gray
+    }
+
+    public func color(for stage: SleepStage) -> Color {
+
+        switch stage {
+
+        case .awake: return awakeColour
+        case .asleepREM: return remColour
+        case .asleepCore: return coreColour
+        case .asleepDeep: return deepColour
+        case .asleepUnspecified: return unspecifiedColour
+        case .inBed: return inBedColour
+
+        }
+    }
+}