UIの概要

• 目的:
  ユーザが自分の GitHub リポジトリのコミットログと、特定期間内のコミット数・頻度、さらにその期間中に作成した PR 情報を確認できる。

• 取得情報:

  • GitHub API を使用して、以下の情報を取得する
    • コミットログ:
      /repos/{owner}/{repo}/commits エンドポイントを利用。
      • since と until パラメータで特定期間内のコミットを取得
      • 各コミットのハッシュ、日付、作者などの情報
      • 期間の「開始日」と「終了日」に対応する（または最も近い）コミットのハッシュを取得
    • コミットの頻度・回数:
      取得したコミットデータをもとに、日付ごとに集計してグラフ用のデータを作成
    • Pull Request (PR):
      /repos/{owner}/{repo}/pulls エンドポイントまたは GraphQL API を利用して、ユーザが作成した PR を期間でフィルタリングして取得

• UI構成

  1. グラフエリア

     • X軸: 時間軸
     • Y軸: コミット数や頻度
     • コミットデータをプロットしたグラフを表示

  2. シークバーエリア (バーエリア)

     • グラフの直下に配置
     • Start Seekbar と End Seekbar の2つのシークバーで、表示期間を選択
       • ユーザはドラッグ操作により、開始日と終了日を調整
       • 期間を狭めると、グラフの表示範囲と取得するデータの期間が変更される

  3. 選択期間情報エリア

     • 指定された期間に基づいて、以下の情報を表示
       • 開始日のコミット hash
       • 終了日のコミット hash

  4. PR情報エリア

     • 選択期間内に自分が作成した Pull Request (PR) のリストを表示（該当する PR がある場合）

• 実装技術:

  • React
  • Next.js
  • Tailwind CSS

テキスト図イメージ

┌─────────────────────────────────────────────┐
│         Repository Commit Log             │
├─────────────────────────────────────────────┤
│                                             │
│   [グラフエリア]                           │
│   ┌─────────────────────────────────────┐   │
│   │                                     │   │
│   │  Y: コミット数/頻度                 │   │
│   │                                     │   │
│   │          ●                         │   │
│   │         ●●        ← コミットログ    │   │
│   │        ●●●                        │   │
│   │       ●●●●                       │   │
│   │                                     │   │
│   │         X: 時間軸                   │   │
│   └─────────────────────────────────────┘   │
│                                             │
│   ┌─────────────────────────────────────┐   │
│   │ Start Seekbar: [◀---●---------]       │   │
│   │ End Seekbar:   [---------●---►]        │   │
│   └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│ 選択期間に対応する情報                      │
│  ・開始日のコミット hash: XXXXXXX          │
│  ・終了日のコミット hash: YYYYYYY          │
├─────────────────────────────────────────────┤
│ 該当期間内の自作 Pull Request (PR)           │
│  ・PRリスト（あれば表示）                    │
└─────────────────────────────────────────────┘

以上が、これまでの内容をテキスト化したまとめです。