|
| 1 | +import CodexBarCore |
| 2 | +import SwiftUI |
| 3 | + |
| 4 | +struct ProviderDetailSectionsContent: View { |
| 5 | + let sections: [ProviderDetailSection] |
| 6 | + let chartColor: Color |
| 7 | + @Environment(\.menuItemHighlighted) private var isHighlighted |
| 8 | + |
| 9 | + var body: some View { |
| 10 | + VStack(alignment: .leading, spacing: 12) { |
| 11 | + ForEach(Array(self.sections.enumerated()), id: \.offset) { index, section in |
| 12 | + if index > 0 { |
| 13 | + Divider() |
| 14 | + } |
| 15 | + self.section(section) |
| 16 | + } |
| 17 | + } |
| 18 | + .frame(maxWidth: .infinity, alignment: .leading) |
| 19 | + } |
| 20 | + |
| 21 | + private func section(_ section: ProviderDetailSection) -> some View { |
| 22 | + VStack(alignment: .leading, spacing: 6) { |
| 23 | + if let title = section.title { |
| 24 | + Text(title) |
| 25 | + .font(.caption.weight(.semibold)) |
| 26 | + .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted)) |
| 27 | + .textCase(.uppercase) |
| 28 | + .lineLimit(1) |
| 29 | + } |
| 30 | + ForEach(Array(section.rows.enumerated()), id: \.offset) { _, row in |
| 31 | + HStack(alignment: .firstTextBaseline, spacing: 8) { |
| 32 | + Text(row.label) |
| 33 | + .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted)) |
| 34 | + Spacer(minLength: 8) |
| 35 | + VStack(alignment: .trailing, spacing: 1) { |
| 36 | + Text(row.value) |
| 37 | + .foregroundStyle(MenuHighlightStyle.primary(self.isHighlighted)) |
| 38 | + .fontWeight(.medium) |
| 39 | + if let secondaryValue = row.secondaryValue { |
| 40 | + Text(secondaryValue) |
| 41 | + .font(.caption2) |
| 42 | + .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted)) |
| 43 | + } |
| 44 | + } |
| 45 | + } |
| 46 | + .font(.caption) |
| 47 | + .lineLimit(1) |
| 48 | + } |
| 49 | + if let chart = section.chart { |
| 50 | + ProviderDetailChartContent(chart: chart, color: self.chartColor) |
| 51 | + } |
| 52 | + } |
| 53 | + } |
| 54 | +} |
| 55 | + |
| 56 | +private struct ProviderDetailChartContent: View { |
| 57 | + let chart: ProviderDetailSection.Chart |
| 58 | + let color: Color |
| 59 | + @Environment(\.menuItemHighlighted) private var isHighlighted |
| 60 | + |
| 61 | + var body: some View { |
| 62 | + VStack(alignment: .leading, spacing: 3) { |
| 63 | + if self.chart.title != nil || self.chart.unit != nil { |
| 64 | + HStack(spacing: 6) { |
| 65 | + if let title = self.chart.title { |
| 66 | + Text(title) |
| 67 | + .font(.caption2.weight(.semibold)) |
| 68 | + } |
| 69 | + Spacer(minLength: 0) |
| 70 | + if let unit = self.chart.unit { |
| 71 | + Text(unit) |
| 72 | + .font(.caption2) |
| 73 | + .monospacedDigit() |
| 74 | + } |
| 75 | + } |
| 76 | + .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted)) |
| 77 | + .lineLimit(1) |
| 78 | + } |
| 79 | + Group { |
| 80 | + switch self.chart.kind { |
| 81 | + case .bars: |
| 82 | + self.bars |
| 83 | + case .line: |
| 84 | + self.line |
| 85 | + } |
| 86 | + } |
| 87 | + .frame(height: 58) |
| 88 | + .accessibilityElement(children: .combine) |
| 89 | + .accessibilityLabel(self.accessibilityLabel) |
| 90 | + } |
| 91 | + } |
| 92 | + |
| 93 | + private var bars: some View { |
| 94 | + GeometryReader { geometry in |
| 95 | + let scale = UsageChartScale(values: self.chart.points.map(\.value)) |
| 96 | + HStack(alignment: .bottom, spacing: 2) { |
| 97 | + ForEach(Array(self.chart.points.enumerated()), id: \.offset) { _, point in |
| 98 | + RoundedRectangle(cornerRadius: 1.5, style: .continuous) |
| 99 | + .fill(self.fillColor(value: point.value, scale: scale)) |
| 100 | + .frame(maxWidth: .infinity) |
| 101 | + .frame(height: Self.height(value: point.value, scale: scale, available: geometry.size.height)) |
| 102 | + } |
| 103 | + } |
| 104 | + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom) |
| 105 | + .overlay(alignment: .bottomLeading) { |
| 106 | + Rectangle() |
| 107 | + .fill(MenuHighlightStyle.secondary(self.isHighlighted).opacity(0.22)) |
| 108 | + .frame(height: 1) |
| 109 | + } |
| 110 | + } |
| 111 | + } |
| 112 | + |
| 113 | + private var line: some View { |
| 114 | + GeometryReader { _ in |
| 115 | + Canvas { context, size in |
| 116 | + let scale = UsageChartScale(values: self.chart.points.map(\.value)) |
| 117 | + let points = self.chart.points.enumerated().map { index, point in |
| 118 | + let x = self.chart.points.count == 1 |
| 119 | + ? size.width / 2 |
| 120 | + : size.width * CGFloat(index) / CGFloat(self.chart.points.count - 1) |
| 121 | + let y = size.height * (1 - CGFloat(scale.fraction(for: point.value))) |
| 122 | + return CGPoint(x: x, y: y) |
| 123 | + } |
| 124 | + guard let first = points.first else { return } |
| 125 | + var path = Path() |
| 126 | + path.move(to: first) |
| 127 | + for point in points.dropFirst() { |
| 128 | + path.addLine(to: point) |
| 129 | + } |
| 130 | + context.stroke( |
| 131 | + path, |
| 132 | + with: .color(self.isHighlighted ? .white.opacity(0.82) : self.color), |
| 133 | + style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round)) |
| 134 | + for point in points { |
| 135 | + context.fill( |
| 136 | + Path(ellipseIn: CGRect(x: point.x - 1.5, y: point.y - 1.5, width: 3, height: 3)), |
| 137 | + with: .color(self.isHighlighted ? .white : self.color)) |
| 138 | + } |
| 139 | + } |
| 140 | + .overlay(alignment: .bottomLeading) { |
| 141 | + Rectangle() |
| 142 | + .fill(MenuHighlightStyle.secondary(self.isHighlighted).opacity(0.22)) |
| 143 | + .frame(height: 1) |
| 144 | + } |
| 145 | + } |
| 146 | + } |
| 147 | + |
| 148 | + private var accessibilityLabel: String { |
| 149 | + let title = self.chart.title.map { "\($0): " } ?? "" |
| 150 | + let unit = self.chart.unit.map { " \($0)" } ?? "" |
| 151 | + let points = self.chart.points.map { "\($0.label) \($0.value)\(unit)" }.joined(separator: ", ") |
| 152 | + return title + points |
| 153 | + } |
| 154 | + |
| 155 | + private func fillColor(value: Double, scale: UsageChartScale) -> Color { |
| 156 | + let ratio = max(0.18, scale.fraction(for: value)) |
| 157 | + if self.isHighlighted { |
| 158 | + return Color.white.opacity(0.55 + ratio * 0.35) |
| 159 | + } |
| 160 | + return self.color.opacity(0.42 + ratio * 0.58) |
| 161 | + } |
| 162 | + |
| 163 | + private static func height(value: Double, scale: UsageChartScale, available: CGFloat) -> CGFloat { |
| 164 | + let ratio = scale.fraction(for: value) |
| 165 | + guard ratio > 0 else { return 1 } |
| 166 | + return max(3, CGFloat(ratio) * available) |
| 167 | + } |
| 168 | +} |
0 commit comments