統計画面を実装 / Show statistics

[nafuka11]

Fix #1

変更内容

./cursus_users.json を読み込み、 /stats で統計画面を表示します。

動作確認方法

1. /v2/cursus_users を叩いて得たjsonを cursus_users.json として保存します。
2. 必要なパッケージをインストールします。

   yarn
   

3. developmentサーバを起動します。

   yarn dev
   

[nafuka11]

グラフを表示するためのデータ構造

現在のデータ構造

beginAtList：入学日（string）のリスト

["2022-01-01", "2022-01-02"]

studentStatus：keyが入学日でvalueが在籍/BH/入学予定人数なオブジェクト

{
  "2022-01-01": {
    current: 1,
    blackholed: 2,
    future: 3,
  },
  "2022-01-02": {
    current: 2,
    blackholed: 3,
    future: 4
  }
}

evaluationPoint：evaluationPointの合計（number）

42

levelBeginAtCurrent：入学日keyでvalueがlevel/countのオブジェクトの配列、なオブジェクトの在籍学生版
levelBeginAtAll：↑の全学生版

{
  "2022-01-01": [{
    level: 0,
    count: 1
  },{
    level: 1,
    count: 2
  }]},
  "2022-01-02": [{
    level: 1,
    count: 2
  }]
}

levelStudents：{level: 学生数}なオブジェクト

{1: 2, 2: 3}

問題点

集計を各データごとに行っていて、どこかでミスしていても気づきにくい

改善案

BeginAtLevelTableで行っている集計処理を使う。

42tokyo-stats-website/components/BeginAtLevelTable.tsx

Lines 24 to 37 in b4a0f27

	const calcTableData = () => {
	const tableData = Object.keys(levelBeginAt).map((key) => {
	const counts = [...Array(maxLevel + 1)].map(
	(_, lv) => levelBeginAt[key].find((v) => v.level === lv)?.count ?? 0
	);
	const sum = counts.reduce((prev, cur) => prev + cur);
	return [...counts, sum];
	});
	const lastRow = [...Array(maxLevel + 1)].map((_, lv) =>
	tableData.reduce((sum, cur) => sum + cur[lv], 0)
	);
	lastRow.push(lastRow.reduce((prev, cur) => prev + cur));
	tableData.push(lastRow);
	return tableData;

入学日の文字列配列はそのままに、入学日・レベルに対応する学生数を二重配列なテーブル形式でデータを持たせる。

例

入学日が以下で、

["2022-01-01", "2022-01-02"]

テーブル形式のデータが以下の場合、

[[1, 2, 3, 6],
 [2, 3, 4, 9],
 [3, 5, 7, 15]]

begin_at	Lv.0	Lv.1	Lv.2	Sum
2022-01-01	1	2	3	6
2022-01-02	2	3	4	9
Sum	3	5	7	15

と考える。

こうすると、未来に入学する学生数（future）は、begin_atが未来の日付である学生数のSumから分かる。

[nafuka11]

上記コメントの問題は別Issueで対処します。