SwiftGarden 4.iOSアプリでデータを確認する – Swift Chartsの実装

enum DataType: String {
    case humidity
    case temperature
}

struct DataModel: Identifiable {
    var id: String { type.rawValue + xValue.description + yValue.description }
    let type: DataType
    let xValue: Date
    let yValue: Int
}

let postModels: [FirestoreDataModel] // document of Firestore data

private var dataList: [DataModel] {
    postModels // for humidity
        .map({ DataModel(type: .humidity, xValue: $0.date, yValue: $0.humidity) })
    + postModels // for temperature
        .map({ DataModel(type: .temperature, xValue: $0.date, yValue: Int($0.temperature)) })
}

Chart(dataList) { data in
    LineMark(
        x: .value("Time", data.xValue, unit: .hour), // Set the X-axis unit to time
        y: .value("Value", data.yValue)
    )
    .foregroundStyle(by: .value("Data Type", data.type.rawValue)) // Separate graphs for each data
}

Chart(dataList) { data in
// ・・・
}
.chartYAxis {
    let humidityValues = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    AxisMarks(
        position: .trailing, // Y-axis display position (left or right)
        values: humidityValues
    ) {
        AxisValueLabel("\(humidityValues[$0.index])%", centered: false) // Y-axis value display format
    }
    // ---Set the temperature as above---
}

@Binding var selectedHourIndex: Int
let postModels: [FirestoreDataModel]
private var selectedDate: Date? {
    if postModels.isEmpty { return nil }
    return postModels[min(selectedHourIndex, postModels.count - 1)].date
}

Chart(dataList) { data in
    // ----Line chart code above----
    if let selectedDate { // If there is a date in the current selection
        RuleMark(x: .value("Selected date", selectedDate, unit: .hour)) // display vertical line
            .foregroundStyle(Color.red) // change color to red
    }
}

func updateSelectedDate(at location: CGPoint, 
                                          proxy: ChartProxy, geometry: GeometryProxy) {
    let xPosition = location.x - geometry[proxy.plotAreaFrame].origin.x // tap coordinate - upper left coordinate of graph
    guard let date: Date = proxy.value(atX: xPosition) else { return } // Find x value from tap coordinates
    withAnimation {
        selectedHourIndex = postModels
            .map(\.date)
            .firstIndex(where: { $0.hour == date.hour }) ?? 0
    }
}

.chartOverlay { proxy in
    GeometryReader { geometry in
        Rectangle().fill(.clear).contentShape(Rectangle())
            .gesture(DragGesture()
                .onChanged { value in
                    updateSelectedDate(at: value.location,
                    proxy: proxy,
                    geometry: geometry)
                 })
            .onTapGesture { location in
                updateSelectedDate(at: location,
                    proxy: proxy,
                    geometry: geometry)
            }
    }

static func getImageURL(pathName: String) async throws -> URL {
    let storage = Storage.storage()
    let storageRef = storage.reference()
    let starsRef = storageRef.child(pathName)
    return try await starsRef.downloadURL()
}

struct AsyncImageView: View {
    @State var url: URL?
    @State var error: Error?
    let imageName: String

    var body: some View {
        Group {
            if error != nil {
                Image(systemName: "photo")
            } else {
                WebImage(url: url)
                    .resizable()
                    .placeholder(content: {
                        ProgressView()
                            .font(.largeTitle)
                    })
                    .indicator(.progress)
                    .scaledToFit()
                    .transition(.fade(duration: 0.5))
            }
        }
        .task {
            do {
                url = try await FirebaseManager.getImageURL(pathName: imageName)
            } catch {
                print(error)
                self.error = error
            }
        }
    }
}

struct ImageCarouselView: View {
    @Binding var selectedIndex: Int
    let imageNameList: [String]

    var body: some View {
        TabView(selection: $selectedIndex.animation(.spring())) {
            ForEach(imageNameList.indexed(), id: \.element) { (index, name) in
                AsyncImageView(imageName: name)
                    .tag(index) // to get selected index
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }
}

let imageView = UIImageView()
imageView.contentMode = .scaleAspectFit
imageView.animationImages = images
imageView.clipsToBounds = true
// Display an image every 0.3 seconds
imageView.animationDuration = TimeInterval(floatLiteral: Double(images.count) * 0.3)
if !images.isEmpty {
    imageView.startAnimating()
}

private func fetchList() async throws {
    Task {
        do {
            let results: [FirestoreDataModel]
            if ProcessInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1" {
                results = FirestoreDataModel.mocks
            } else {
                results = try await FirebaseManager.fetchList(fromDate: date., endDate: date.offsetDays(offset: 1) ?? Date())
            }
            let imageList = try await withThrowingTaskGroup(of: UIImage?.self) { group in
                results.map(\.imageName).forEach { imageName in
                    group.addTask {
                        return try await FirebaseManager.getImageURL(pathName: imageName).asUIImage()
                    }
                }
                var images: [UIImage] = []
                for try await image in group {
                    guard let image else { break }
                    images.append(image)
                }
                return images
            }
            let images = imageList.compactMap { $0 }
            self.images = images
        } catch {
            print(error)
        }
    }
}