へなちょこSEの考察

0x22歳のへなちょこSEが、日々思うことを考察します。自社内、金融系を経て現在法人系PKG開発に従事。

【セワシタ?】カレンダー機能とグラフ機能を追加しました。

個人開発中のセワシタ?アプリにカレンダー機能とグラフ機能を追加しました。

どちらも全然きれいに作ってないのですが、もうちょっと修正したらGitHubで公開してみたいところです。

グラフ機能

f:id:hareruya_maro:20191125162423p:plain
グラフ機能

シンプルな折れ線グラフが書けるReact Native用コンポーネントを作っています(react-native-svg使用)。

日付と数値のデータを渡すと、最大日と最小日の間で日付ごとにプロットし、ない日付はうまく飛ばして表示してくれます。

既存のグラフコンポーネントは渡したポイントを等間隔にプロットしてしまうので、毎日とか毎週同じ曜日とか、等間隔のデータでないとグラフとして意味をなさないものが多かったのですが、今回はデータの取得日の間隔が等間隔でなくてもうまく表示してくれるので、データの傾きが正しく見れます。

一応、グラフエリアをスクロールすることも可能です。

カレンダー機能

f:id:hareruya_maro:20191125162428p:plain
カレンダー機能

カレンダー機能ははじめ、「react-native-calenders」を使ってました。

GitHub - wix/react-native-calendars: React Native Calendar Components 📆

とてもきれいなコンポーネントで、いろいろ便利な機能もあるのですが、紙のカレンダーの視認性を目指したかったので、自前で作りました。

指定した日付にアイコンの設定を渡すと、アイコンを表示してくれるカレンダーです。

各日付をタップした際にイベントを実行することも可能なので、一覧で見て日付タップしたら詳細、みたいな使い方も可能です。

どの程度作りこんだら公開するか悩みどころですが、まぁ完璧を目指してもあれなので、適当なところで公開します。

セワシタ?

セワシタ?

  • Haruya Nakamura
  • ライフスタイル
  • 無料
apps.apple.com

play.google.com