nafuka11 / 42tokyo-stats-website Goto Github PK

animationが完了してからキャプチャを取ってほしい。

原因

テーブルサイズが固定なため。

一時的な対応。
根本的な対応は #96 で行う。

目的

自分がAGUを取ったりBHに飲み込まれた場合、他の学生がこのリポジトリを使ってみたくなるはず。
そんな時、今のREADMEだと、どうすれば動くかが分からない。
→ とりあえず動かすための手順を書く。

内容

• Loginボタンのクリック時
• 統計画面のデータ取得時

にCircularProgressを表示する

目的

上記の時に画面に変化が無く、再度クリックしたり更新ボタンを押してしまうそうになるので、ローディング中表示が欲しい。

考えられる原因

• getServerSidePropsをindexに使ってて、そこでsessionをawaitしてる
• getServerSidePropsでファイルread & 都度集計処理を行っている

改善案

• getServerSidePropsではなくAPI Routesを使う
• yarn build:contentsで集計処理まで行い、その結果をjsonファイルに書き込む

テストを書かないと変更のたびにリグレッションしてないか確認が必要だからテストを書こうね

優先順位と観点

1. builder
   • データの形式
   • APIにアクセスする回数（無限ループされると困るので）
2. services
   • builderのテストである程度網羅できると思う
   • pick-contentsはclient側でcallするので、これ中心にする
     • 入出力の確認
3. pages/api
   • 200と401の出力確認
4. components, pages
   • frontのテスト方法が分からないのでまず調査が必要

目的

IssueとPullRequestの文面を作るのが面倒なため。

原因

CssBaseLine を追加してCSSがリセットされているため

対処

CSSではなく、MUIのthemeでbackgroundの色を設定する

#3 (comment)

目的

• 42の学生ではない方に統計画面の作りを紹介したい
  • これまでは、ダミーデータを作って都度表示したり、デベロッパツールで数値を書き換えたりしていた……が面倒
  • 都度画像を作ってシェアするよりも、ページとして提供したほうが、相手がイメージしやすい

• ログインボタンから42のintra認証を行う
• 認証後、統計画面へ遷移する
  • 統計画面は、ログインしていないときはアクセスできないこと
• ログアウトボタンからログアウトを行う

内容

空の円グラフは不要な情報なので、月別で生存している学生数が0なら、円グラフを表示しないようにする。
学生が存在するかは生存率、下のtableから分かるので、あえて円グラフを表示する必要はない。

実装案

jsonを一定期間でzipにしてそれを取得するようにする。

目的

タイトル通り。

実装方針

環境変数にカンマ区切りでidを記述し、そのidに一致するuserは除外する。

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update nextjs monorepo to ^14.2.4 (eslint-config-next, next)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @babel/core to ^7.24.7
• chore(deps): update storybook monorepo to ^8.1.6 (@storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/nextjs, @storybook/react, @storybook/test, storybook)
• fix(deps): update material-ui monorepo to ^5.15.19 (@mui/icons-material, @mui/material)
• chore(deps): update dependency @types/node to v20.14.2
• chore(deps): update dependency chromatic to ^11.5.3
• fix(deps): update dependency highcharts-react-official to ^3.2.1
• chore(deps): update dependency eslint to v9
• fix(deps): update dependency highcharts to v11
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

目的

https://42born2code.slack.com/archives/CN3D33GRX/p1668685976185039
image_url はdeprecated。 今後は image を使う。

対処案

• Highcharts.Optionsのresponsive設定をする

https://cloud.google.com/storage/docs/samples/storage-get-metadata?hl=ja#storage_get_metadata-nodejs

• getMetadataで作成時刻を取得できる

目的

• demoページからindexへ遷移したい
• GitHubのリポジトリに容易にアクセスできるようにし、ユーザにIssue/PRを作ってもらいやすくしたい

実装

• logoにlinkを貼る
• GitHubのIconはmaterial-iconに存在するので、それを設置する

入学月ごとに、1週間、1ヶ月の内にBHに飲み込まれる人数を、これから入学する人数表の横に表示する。

目的

ユーザが毎日webサイトにアクセスした場合、週毎だと変化が分かりづらい。
デフォルトで日毎表示、選択で週毎表示としたい。

実装案

• dailyDataをcontentsに追加する
• selectを追加し、日毎/週毎で変更できるようにする

amoudnet/vercel-actionとDeploy Hooksを比較した結果、Deploy Hooksを使うことにしました。

amoudnet/vercel-actionとDeploy Hooksの比較

amondnet/vercel-action

• 良いところ
  • 出力が分かりやすい
• 気になるところ
  • token, project_id, org_idが必要
    • 万が一tokenが漏れると、deployできるだけでなくVercel側のSecretが見れたり、deploymentを削除できたりする
    • project_id, org_idは再生成ができない気がする

Deploy Hooks

• 良いところ
  • URLだけsecretsに渡せば良い
• 気になるところ
  • 出力が簡素

• 未使用のファイルは消しましょう
• components/stats が大きくなっているので、役割でディレクトリ分けましょう

内容

https://api.highcharts.com/highcharts/credits
デフォでチャートの右下にcreditが表示される。これは設定で非表示にできる。
creditでチャートの文字が隠れることがあるので、非表示にしましょう。

ライセンス的に問題ない？

https://www.highcharts.com/blog/download/
非営利団体、個人のウェブサイト、または学校のプロジェクトならHighchartsを無料で使える、と読める。
creditについては何も書かれてないので大丈夫だと思う。

原因

入力文字列を yyyy-MM-dd HH:mm:ss.SSSZ で決め打ちしていたため。

修正案

以下のように修正してもいいが、JSTでの日付がズレる可能性がある。このため一旦Datetimeに変換後、文字列にするべき

- /^(\d{4}-\d{2}-\d{2})T\d{2}:\d{2}:\d{2}\.\d{3}Z$/,
+ /^(\d{4}-\d{2}-\d{2})T\d{2}:\d{2}:\d{2}\.\d{3}(Z|\+\d{2}:\d{2})$/,

水平展開

timestampをパースする際、timezone Z で決め打ちしてないか確認する。

• src/types/CursusUsers.tsのDateStringがZ決め打ちになっているので単にstringにする。

  42tokyo-stats-website/src/types/CursusUser.ts

  Lines 46 to 47 in 4f4a895

  	type DateString =
  	`${number}-${number}-${number}T${number}:${number}:${number}.${number}Z`;

現状はLv. 9が #f15c80 になっている。

実装方針

Lv.9まではグラデーション、Lv10からは固定にする予定。

chroma.js palette helperで生成した色の案
https://vis4.net/palettes/#/11|s|f7fcf0,e0f3db,ccebc5,a8ddb5,7bccc4,4eb3d3,2b8cbe,0868ac,084081,93003a||0|0

事象

/demo にアクセスすると、以下のUncaught Errorが発生する

Uncaught Error: Minified React error #425; visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

• Text content does not match server-rendered HTML.

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

• Hydration failed because the initial UI does not match what was rendered on the server.
  • このErrorは4回発生する

Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

• There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

理由

• Objectが追加されるのは00:00以降、定期実行は00:42
• websiteに表示されるのはObjectが作成された時刻
• websiteを訪れたユーザは、そこに表示された時刻にwebsiteが更新されることを期待するはず
• このため、定期実行する時刻を00:05, 00:10くらいにしたい

スクショ