折れ線グラフのスクロールとズーム

Question

下記のコードについて質問です。
現在、体重を入力して保存すると折れ線グラフが描かれるコードを書いています。
数回の入力ならいいのですが、多数回入力するとグラフの数字や〇が多くなり大変見づらくなってしまいます。
なので、①一定の間隔を開けて横スクロールにする
または、②ズームした状態でアプリを閉じて再度開いてもそこから始まる
この①か②を実現したいと思っています。
理想はどちらも可能にすることですが、私の知識や発想力では出来ませんでした。
アイデアや知識などお貸しいただければと思います。
よろしくお願いします。

import SwiftUI
import Charts

struct WeightPage2: View{
    @State var weight = ""
    @State var weightarray:[String]

    var body: some View{
        TextField("今日の体重",text:$weight).textFieldStyle(RoundedBorderTextFieldStyle()).frame(width:120).overlay(RoundedRectangle(cornerRadius:1).stroke(Color.black, lineWidth:1))
        Button(action:{weightarray.append(weight);UserDefaults.standard.set(weightarray, forKey: "weightkey")}){
            Text("保存する")
        }
        LineChart(weightarray:$weightarray).frame(width:360 ,height: 400)
    }
    init() {
        let w = UserDefaults.standard.array(forKey: "weightkey") as? [String] ?? []
        _weightarray = State(initialValue: w)
    }
}

struct LineChart : UIViewRepresentable {
    typealias UIViewType = LineChartView
    @Binding var weightarray:[String]
 
    func makeUIView(context: Context) -> LineChartView {
        let lineChartView = LineChartView()
        lineChartView.data = setData()

        return lineChartView
    }
    func updateUIView(_ uiView: LineChartView, context: Context) {
        uiView.data = setData()
    }
    func setData() -> LineChartData{
        let dataPoint = getDataPoints()
        let set = LineChartDataSet(entries: dataPoint, label: "My data")
        let data = LineChartData(dataSet: set)
        return data
    }
    func getDataPoints() -> [ChartDataEntry] {
        var dataPoints: [ChartDataEntry] = []
        for count in 0..<weightarray.count{
            dataPoints.append(ChartDataEntry(x:Double(count),y: Double(weightarray[count]) ?? 0))
        }
        return dataPoints
    }
}

struct WeightPage2_Previews: PreviewProvider {
    static var previews: some View {
        WeightPage2()
    }
}

Answer 1

①のイメージがちょっとわからなかったので・・
②のアイデア的なコードを書いてみます。
ちょっと調べてみての思いつきのコードですので、デバッグしながらズームの再現を探ってみてもらえたらと思います。
変更したところに// *****のようなコメントを入れています。

struct LineChart : UIViewRepresentable {
    typealias UIViewType = LineChartView
    @Binding var weightarray:[String]
    // ***** Bindingは呼び出しもとのビューでUserDefaultsなどで保持すると良いかもしれません
    @Binding var scaleX: CGFloat
    @Binding var scaleY: CGFloat
    @Binding var x: CGFloat
    @Binding var y: CGFloat

    // ***** ChartViewDelegateを使うためにCoordinatorを生成します
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    func makeUIView(context: Context) -> LineChartView {
        let lineChartView = LineChartView()
        lineChartView.data = setData()
        // ***** delegateを設定します
        lineChartView.delegate = context.coordinator
        // ***** ビューを生成する際に次のような感じでズームを再現できるかもしれません
//        lineChartView.zoom(scaleX: scaleX, scaleY: scaleY, x: x, y:  y)
        return lineChartView
    }
    func updateUIView(_ uiView: LineChartView, context: Context) {
        uiView.data = setData()
    }
    func setData() -> LineChartData{
        let dataPoint = getDataPoints()
        let set = LineChartDataSet(entries: dataPoint, label: "My data")
        let data = LineChartData(dataSet: set)
        return data
    }
    func getDataPoints() -> [ChartDataEntry] {
        var dataPoints: [ChartDataEntry] = []
        for count in 0..<weightarray.count{
            dataPoints.append(ChartDataEntry(x:Double(count),y: Double(weightarray[count]) ?? 0))
        }
        return dataPoints
    }
    // ***** ChartViewDelegateを処理するためのクラスです
    class Coordinator: NSObject, ChartViewDelegate {
        var parent: LineChart
        init(_ lineChart: LineChart) {
            parent = lineChart
        }
        // ***** ズームしたときのデリゲートです
        func chartScaled(_ chartView: ChartViewBase, scaleX: CGFloat, scaleY: CGFloat) {
            // ***** スケールと中心座標を保持するようにすると良いかもしれません
            // ***** viewPortHandlerは内部実装を良く知った上で使わないと予期せぬ動作をするみたいです・・
            parent.scaleX = scaleX
            parent.scaleY = scaleY
            parent.x = chartView.viewPortHandler.transX
            parent.y = chartView.viewPortHandler.transY
            print("\(scaleX), \(scaleY), \(chartView.viewPortHandler.transX), \(chartView.viewPortHandler.transY)")
        }
        // ***** スクロールしたときのデリゲートです
        func chartTranslated(_ chartView: ChartViewBase, dX: CGFloat, dY: CGFloat) {
            // ***** スクロールしたときにも中心座標を保持すると良いかもしれません
            print("\(dX), \(dY)")
        }
    }
}

Chartsのドキュメントを探してみたのですが、Swiftのはなくて、Androidのを参照する感じなのですね。
次のあたりを見ると良いかもしれません。
https://weeklycoding.com/mpandroidchart-documentation/modifying-the-viewport/

あとはGitHubのコードを探ったりするのも良いかもしれません。
https://github.com/danielgindi/Charts

SwiftUIからUIKitのデリゲートを使う方法などはSwiftUIのチュートリアルを見ると良いかもしれません。
https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit

---

追記です。
コメントありがとうございます。

すでにズームはできていたのですね。

ちょっと座標をどう扱っているのか難しいですね・・
GitHubのIssueを「scroll」などのキーワードで検索してみるのも良いかもしれません。

ヒントになりそうに思ったのは、座標で扱わなくても、データのx(xはインデックスですね)とyの値を指定することで表示する位置を変えることができるみたいでした。
次の例ではデータの最後の位置を表示する感じになるみたいです。

https://github.com/danielgindi/Charts/issues/450#issuecomment-954580674

private func viewChartFromTheEnd(chart: BarChartView) {
    let lastIndex = chart.data!.dataSets.first!.entryCount - 1
    let lastEntry = chart.data?.dataSets.first?.entryForIndex(lastIndex)
    chart.centerViewTo(xValue: lastEntry!.x, yValue: lastEntry!.y, axis: .right)
}

それから見えている部分のxの最小と最大が次のように得られるみたいです。
ですので、これらを足して2で割ったものがcenter(xに相当する値)になると思います。
このインデックスを持つデータ(yに相当する値)を探して、
中心のxとyを保存しておくという感じにすれば、
chart.centerViewToで表示位置が再現できそうに思いましたがどうでしょうか。

https://github.com/danielgindi/Charts/issues/4030

print(chart.lowestVisibleX.rounded())
print(chart.highestVisibleX.rounded())

---

追記2つ目です。
1つ目の追記を書いてから気づきましたが、
この案だとx座標は再現できても、y座標は再現できませんね・・
ちょっと今は他の案が思いつきませんでした・・
ごめんなさい。

Comments

[tkg]

丁寧なご回答ありがとうございます！
連絡が遅くなりすみません。
ズームはご回答の時点でアプリを閉じても同じ倍率のまま出来るようになっていました。
なので、座標の方をご回答を参考にデバッグしながらいろいろ試してみました。
しかし未だに出来ておらず、一度アプリを閉じると常に左下に戻ってしまいます。
CGRectを用いると左下ではない座標になったのですが、理想とする座標にはなりませんでした。
私が至らないばかりに...すみません。
貴重なお時間を割いていただきありがとうございました。

[tkg]

追記ありがとうございます！
いろいろ考えていただき感謝しかありません。
多数回入力すると詰め詰めになってしまい見にくいので、見やすくなる方法を考えたのですが私の質問した①②の案が悪かったかもしれないです。
①②の他に見やすくなる方法があればそちらで良いのですが、他の案も思いつかずすみません。