SwiftのChartはいい感じだと思いきやハマるポイントたくさん
satomilky1月中、少し余裕があるので、この隙にChartの実装するぞ！と思って、Apple純正のChart APIを使って実装してるんだけど、めちゃくちゃハマる。ほんとハマる。
ちなみに、Appleドキュメント、何回も見るのでブックマークを置いておく。
satomilky特に新しいAPIは気をつけた方がいい。めっちゃ不完全だから。
Xで共有してる。
satomilky公式で設定しても全く同じことおこるのよなぁ。
ヘルスケアアプリ、どうやって実装してるんだろ。
satomilkyひょっとして、グラフ領域の上マージンをしっかり作れば良いのでは？？
と思ったけど、ダメだ。それだと、Xaxisとかぶるやん。。
satomilkyこの動画をひたすら見てるけど、
もうバグがある以上採用できないので、以下の記事を参考に独自実装します。
satomilkyダメだった、演算処理が重すぎるのエラーが出た。ええええええー。
これは、UIを調整するしかない。
satomilkyこの辺りをウォッチしつつ。 Appleさんが問題解消してくれるのを待つか。
satomilkyあとカスタム実装だとこの辺りも参考にメモっておく（いつも探す）
これもAnnotionを使ってるんだけど、表示位置が単純なoverlayじゃなくて上手にコントロールしてる。
グラフ上に値を重ねなきゃいけないことは確定したので、選択日付の上に表示されないように調整したい。
satomilkyむーん。UIをやっぱり捨てきれない。
ChartGestureを使ってなんとかできないか検討。
satomilkyまず、chartXSelectionの時に、一度タップしたら、詳細ツールチップが消えないようにした。
satomilkyさて、私の開発タイム始まった。
satomilkyなるほど、上の実装をしたために、横スクロールが効かなくなった。ほんと難しいな。
satomilkyやはり1年分の横長スクロールを諦めるか。
ヘルスケアと同じく、Monthlyで切るか。
satomilkyというわけで復活ですよ。お兄さん。
satomilky線があると、ついついそこそこ横幅を取りたくなってしまうから、そこをなんとかするか。
satomilkychartScrollableAxes(.horizontal) を使わない実装にすることで、ようやくできたよ。
寝る。
satomilkyでも、日付が間違ってんな。なんだこれ。明日確認するぞ。
satomilkyあと、実機で触り心地試してみたら、DragGesture(minimumDistance: 0) 使ってるとダメだった。
横のスライドのためのジェスチャーと、競合する。ぐぬぬぬ。
hover時のみじゃなくて、タップも許容したいのだが。。ぐぬぬぬ。
ひょっとしたら、このAPI使い物にならないのでは。。
satomilkyGestureの仕様をしっかり理解するか。ぐぬぬ。
satomilkySwipeGestureはないのか。ということで、これっぽい。
（今日の業務時間が終わったら試す。）
Gestureの範囲で発火
発火したら、プログラムでTabViewをスライド
satomilkyできたんだけど、もうちょいだな。スワイプのスピードで、markerの表示とかちゃんと制御したい。
satomilkyいいの見つけた。
satomilkyとりあえず、 を参考に
こちらの記述の方がスマートなので、これにする。
これにvelocityの制御を入れる。
ドラッグのスピードが遅い時にだけ、Makerを表示させる。とかの方が良さそうだな。
satomilkyなんとなくここら辺参考にしつつ。
やってみたのが、これ。
もうちょいだなぁ。
satomilkyヌーン。だめだ。苦しい。
この人も苦しんでる。
satomilkyやはりツールチップみたいなのを、独自実装なのかなぁ。。
satomilkyそれか、もう、スワイプで前後のViewの移動を諦めるか。。だな。
satomilkyで、で、できたぁぁ！！！！！！
onChangeを使えばよかったんだ。
（無意味に四苦八苦したソースはコメント化して残して、git pushしておこ。）
satomilky実機にインストールしても、バッチリ期待通りの動きしてる。最高だ。
Gestureでの制御を諦めて、発想を変えた私、偉いぞ。
ちなみに、初歩的なこれ。大変助かりました。
satomilkyあとは、タブ移動した瞬間に、前のViewのselectedはnilにするってやらないとな。。
いや、UX的には残ってた方がいいのかな。どっちだ？
でも、タブ切り替えしてるのに、前後のViewに残ってるの気持ち悪くない？
と思いつつ、比較したいとかあったりする？ええええ。むずいな。
まぁ、期待するのとしては、前後のViewに残ってるのが変かな。って気がするからTab移動したタイミングで、リセットさせるようにするか。
satomilky骨子となる動きはできたから、あとは、細かいデザインのチューニングだけや。
長かったけど、なんとか1月中に終わらせることできそう。（ってあと2日しかないから無理だった）
正月の休みの時にちゃんと着手していればなぁ。
残タスクは
- ヘッダー要素の最適化
- グラフに表示させているサイクルの表示
- Detailのチップのデザイン
- グラフのグリッドチューニング
- 高温期をわかりやすく表現
課金ユーザー対応
- 体重グラフの表示切り替え
- グラフの期間をMonthlyかCycleかで切り替え。
ってくらいかな。
と、実装をめちゃめちゃ先行させて、ようやくFigmaの出番である。
がんばろ。
satomilkyannotionのコンテンツにはButtonは配置できない。。と
satomilkyこんな普通にクリックできそうなのに、できない！！！！
AnnotionのcontentsにButton配置してもアクションが起こらない！終わり！
satomilkyちょっと足掻いてみる。
satomilkyうわああ、やっぱりこれやんなきゃダメかな。。
satomilkyAnnotionにButtonとか、Tapイベント追加するの完全に無理だったので、Annotion View的なやつは、結局、以下の記事を参考に、自作カスタマイズすることにしました。
感謝です🙏
satomilkyさて、2.1.0にてチャート機能を搭載してから、若干放置だったチャート機能ですが、サイクル予測の表示を最適化したことによって、チャート上にも排卵予定日などを記載できそうな気配がしてきました。
ということで、ここからはその作業ログになります。
satomilky
ここに日付に対する縦ラインマーカーを入れたい。
と、この辺りかな？
satomilkyRuleマークってこうやってまとめて記載できるんだな。ふむ。
satomilkyあら意外と簡単に入った（OvulationDateはマジックナンバー状態だけど）
satomilky次は妊娠可能性が高くなる期間の表示だな。
Rangeでやるとなると。。
これの縦ラインが欲しいわけですが。。
Xを調整すれば良さそう。
satomilkyこんな感じかしら。若干色がガチャガチャして見づらいんだけど。
デザインの調整は後回しや。
次は変数にロジック組み込むぞ。ここからが意外と難しいのだよね。Chartに合わせたデータを用意するのが。
satomilky月別とサイクル別で区切られるようにこのような汎用的な構造体を作ってるんだけど、
プロパティに、IntervalTypeみたいなenumのプロパティをを持たせた方がいいかもしれんなぁ。
type = cycle と時だけ、働かせたいロジックとかあるのよな。
なぜならCycle区切りのViewが課金領域の対象でもあるからな。
satomilkyというか、その方がロジック算出が楽なのである。。。
satomilky子供と色々遊んでたらこんな時間になってしまった。
type = cycleとかにすると、また予測値のロジック組まにゃいかんな。
プロパティにcycleデータ持たせるか。。そうしたら、cycleから引っ張ってこれるわ。
ChartIntervalにCycleを直接持たせようとしたら、
Decordableに対応せよ。って言われて。えーとなったので別の方法を採用。
なんとかできた。
あとは、
- 妊娠期間のように長期サイクルになったときは表示させない。
- 現サイクル
- 予定終了日を起点に予測値も算出
- 遅くなってる時に予測値もずらす
- 完全に入力しなくなった場合の対処
とかをやらにゃいかん。
satomilkyでも、そろそろ寝る時間なので実機にDevインストールして、一旦寝る。
satomilkyおはよう。10時に家を出なければならないので、あと、40分で上の作業を終わらせる。
satomilky結局終わらず、現サイクルの時の諸々の処理だけ残して、出かけたけれど、戻ってきたので作業再開。
が、修正の方向性はもう見えてるのであと少し。
satomilkyできたんだけど、OvulationDateがX軸から少しズレてる。
satomilky.value("startDate", startDate, unit: .day),
とunit を設定すればほらね。
