Rork Max + Swift Charts でアプリにグラフを実装する手順と、データ点が増えると重くなる原因

import SwiftUI
import Charts
 
struct DailyValue: Identifiable {
    let id = UUID()
    let date: Date
    let value: Double
}
 
struct SimpleLineChart: View {
    let points: [DailyValue]
 
    var body: some View {
        Chart(points) { point in
            LineMark(
                x: .value("Date", point.date),
                y: .value("Value", point.value)
            )
            .interpolationMethod(.monotone)
        }
        .chartYAxis {
            AxisMarks(position: .leading)
        }
        .frame(height: 240)
    }
}
 
// 期待される表示: 日付軸が下、値軸が左、滑らかな単調補間の折れ線
// 30〜90点までは Pixel 7 / iPhone 14 で 60 fps を維持できる

extension Array where Element == DailyValue {
    /// 指定したバケット数まで間引く。視覚的なピークを残す近似法。
    func downsampled(to threshold: Int) -> [DailyValue] {
        guard count > threshold, threshold >= 3 else { return self }
 
        let bucketSize = Double(count - 2) / Double(threshold - 2)
        var sampled: [DailyValue] = [self.first!]
        var a = 0
 
        for i in 0..<(threshold - 2) {
            let rangeStart = Int(floor(Double(i + 1) * bucketSize)) + 1
            let rangeEnd = min(Int(floor(Double(i + 2) * bucketSize)) + 1, count)
            let bucket = Array(self[rangeStart..<rangeEnd])
            // 直前の選択点と次バケットの平均で構成される三角形の面積を最大化する点を選ぶ
            let nextAvg = bucket.reduce(0.0) { $0 + $1.value } / Double(bucket.count)
            let prev = self[a]
            var maxArea = -1.0
            var chosen = bucket.first!
            for p in bucket {
                let area = abs((prev.value - nextAvg) * Double(rangeEnd - a)
                               - (prev.value - p.value) * Double(rangeEnd - a))
                if area > maxArea { maxArea = area; chosen = p }
            }
            sampled.append(chosen)
            a = self.firstIndex(where: { $0.id == chosen.id }) ?? a
        }
 
        sampled.append(self.last!)
        return sampled
    }
}
 
// 使い方
// let visible = points.downsampled(to: 80)
// 期待される効果: 365点 → 80点でも視覚的なピークがほぼ保持され、描画コストが約1/4に

struct OptimizedLineChart: View {
    let points: [DailyValue]
    @State private var visiblePoints: [DailyValue] = []
 
    var body: some View {
        Chart(visiblePoints) { point in
            LineMark(
                x: .value("Date", point.date),
                y: .value("Value", point.value)
            )
        }
        .frame(height: 240)
        .onChange(of: points) { _, new in
            // データ全件入れ替えはアニメーションなしで反映
            visiblePoints = new.downsampled(to: 80)
        }
    }
}
 
// 期待される挙動:
// - データ件数が変わっても補間アニメーションが発生しない
// - 描画は1フレームで完了するため fps の落ち込みが消える

import SwiftUI
import Charts
 
extension OptimizedLineChart: AXChartDescriptorRepresentable {
    func makeChartDescriptor() -> AXChartDescriptor {
        let xAxis = AXNumericDataAxisDescriptor(
            title: "日付",
            range: 0...Double(visiblePoints.count - 1),
            gridlinePositions: []
        ) { value in "\(Int(value))日目" }
 
        let yAxis = AXNumericDataAxisDescriptor(
            title: "金額",
            range: 0...(visiblePoints.map(\.value).max() ?? 1),
            gridlinePositions: []
        ) { value in "\(Int(value))円" }
 
        let series = AXDataSeriesDescriptor(
            name: "推移",
            isContinuous: true,
            dataPoints: visiblePoints.enumerated().map { index, p in
                .init(x: Double(index), y: p.value)
            }
        )
 
        return AXChartDescriptor(
            title: "月次推移",
            summary: "ダウンサンプリング後の集計値",
            xAxis: xAxis, yAxis: yAxis,
            additionalAxes: [], series: [series]
        )
    }
}
 
// 期待される動作: VoiceOver で「月次推移、ダウンサンプリング後の集計値、X軸日付…」と読み上げられる