Skip to content

Display Stats Graphical Charts by using Highcharts #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Mar 12, 2018
Merged

Display Stats Graphical Charts by using Highcharts #252

merged 7 commits into from
Mar 12, 2018

Conversation

nalabjp
Copy link
Member

@nalabjp nalabjp commented Feb 4, 2018 •
edited by yasulab
Loading

Fix #246

やること

  • Dojo モデルから created_at で 119 道場 (掲載数) をチャートで表示する
  • 開催回数でグラフを描画する
  • 参加者数でグラフを描画する

2018-03-11 13 42 53

2018-03-11 13 43 09

2018-03-11 13 43 17

デプロイ後にやること

  • @yasulab グラフをコミュニティ内で周知する。
  • @yasulab X軸 (時間軸) をうまくまとめる方法を CoderDojo コミュニティで聞いてみる

@yasulab
Copy link
Member

yasulab commented Feb 5, 2018

お...!? このコード量でチャートが描画できるの凄いですね...!! 📈 ✨

@yasulab
Copy link
Member

yasulab commented Feb 7, 2018

Dojo モデルから created_at で 119 道場 (掲載数) をチャートで表示する

@yasulab
Copy link
Member

yasulab commented Feb 7, 2018

１データ１グラフで表示する

@yasulab
Copy link
Member

yasulab commented Feb 7, 2018 •
edited
Loading

アイデア: 棒グラフ+折れ線グラフも組み合わせる?

@yasulab yasulab mentioned this pull request Feb 23, 2018
Closed
12 tasks
@nalabjp
Copy link
Member Author

nalabjp commented Feb 25, 2018

前回からちょっと更新、棒グラフと折れ線グラフを表示し計算式を修正してみました。（descriptionのスクリーンショットは更新済み）

@yasulab
Copy link
Member

yasulab commented Feb 26, 2018

おぉ! 増加数わかりやすいですね! 😸 スクリーンショットの差し替えもありがとうございます 🙏 ✨

@yasulab
Copy link
Member

yasulab commented Mar 2, 2018 •
edited
Loading

@nalabjp １つ思いついたんですが、デバッグ用に毎週の推移を出すと良いかもしれないですね🤔💭

もし直近４週間ぐらいの毎週の数字の推移を簡単に確認できれば、もしロジック周りで変な挙動があってもすぐに気付けるかも...? と思いました🤔💭 (統計データは主に法人向けに提出する予定なので、もし誤ったデータが入ってればすぐに気づいて直したい 🔧💨)

@nalabjp
Copy link
Member Author

nalabjp commented Mar 2, 2018

直近４週間ぐらいの毎週の数字の推移を簡単に確認できれば

毎週、直近4週間分のデータを永続化していく感じですか？（4世代だけ残してあとは削除？）

@yasulab
Copy link
Member

yasulab commented Mar 2, 2018

（4世代だけ残してあとは削除？）

僕としてはこっちのイメージですね🤔 あくまでデバッグ用というイメージです。前回はたまたま講演などが重なり数字の異変に気づけましたが、現状の体制だと「たまたま気づく」にしか頼れなさそうかなと認識しています💭 (目的が達成できれば別の方法でも良いとは考えています)

@nalabjp
Copy link
Member Author

nalabjp commented Mar 2, 2018

ちょっと誤解させる書き方でしたかね、
永続化と世代管理はセットのイメージで、
永続はするけど必要な分だけしか保存しておかない、という意味でした😅

@yasulab
Copy link
Member

yasulab commented Mar 2, 2018 •
edited
Loading

永続化と世代管理はセットのイメージで、
永続はするけど必要な分だけしか保存しておかない、という意味でした😅

なるほど! はい、データとして数ヶ月以上に遡って調べたいことはあまりないと思うので、永続化しつつ、データとしては４週分を保存する程度で十分そうですね 😸

@nalabjp
Copy link
Member Author

nalabjp commented Mar 4, 2018

グラフごとに色を変える🤔

@yasulab
Copy link
Member

yasulab commented Mar 6, 2018 •
edited
Loading

配色の参考

screen shot 2018-03-06 at 10 25 15

配色については詳しい人にフィードバックをもらう

@yasulab
Copy link
Member

yasulab commented Mar 6, 2018

結論: 直感が間違ってて、数字が正しかった...!!! 📈 ✨
cf. #264 (comment)

@yasulab
Copy link
Member

yasulab commented Mar 6, 2018 •
edited
Loading

マージまでのアクション

  • 各グラフの配色を決める
  • Current Year は Monthly で別テーブルとして表示する
  • Current Year は別途グラフで描画する
  • WIPを外したらレビューをお願いする (AnaTofuZ さん)
  • 確認後、マージする

@nalabjp
Copy link
Member Author

nalabjp commented Mar 10, 2018

月次グラフ作ってみたんですが、データが少なく0件な月が入っているとちょっと不格好な感じですねぇ😅
表示するかちょっと迷ったのでご意見聞きたいです〜 > @yasulab
2018-03-10 23 25 24

@yasulab
Copy link
Member

yasulab commented Mar 11, 2018

@nalabjp たしかに...!! Current Year は別PRにして後で検討する形にし、先に Yearly だけマージしたいのですがいかがでしょう？🤔💭

@nalabjp nalabjp changed the title [WIP] Chart Charts Mar 11, 2018
@nalabjp
Copy link
Member Author

nalabjp commented Mar 11, 2018

配色変更してdescriptionの画像を差し替えました。
あと、統計上を画面上部に全国の道場のアコーディオンを画面下部へレイアウト変更しました。
レビューお願いします〜 😌

@nalabjp nalabjp requested review from yasulab and AnaTofuZ March 11, 2018 04:49
AnaTofuZ
AnaTofuZ approved these changes Mar 12, 2018
View reviewed changes
Copy link
Member

@AnaTofuZ AnaTofuZ left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ローカルで確認しました!
LazyHighCharts::HighChart 動きが滑らかですごい良いですね!
全国の道場のアコーディオンが下になっているのもUI的に良いと思いました

@AnaTofuZ AnaTofuZ merged commit c3a2f79 into master Mar 12, 2018
@nalabjp nalabjp deleted the chart branch March 12, 2018 05:34
@yasulab
Copy link
Member

yasulab commented Mar 13, 2018

実装＆レビューありがとうございました! ✨👏 僕の方でも少し修正して、よりインパクトのある順に情報を整理しておきました 🔧 💨 https://coderdojo.jp/stats

coderdojo-stats-1

coderdojo-stats-2

@yasulab
Copy link
Member

yasulab commented Mar 13, 2018 •
edited
Loading

リリースしたことを Facebook/Twitter で周知しました! 📮 🏃💨

@yasulab yasulab mentioned this pull request Mar 14, 2018
Open
@yasulab yasulab changed the title Charts Implementing Stats graph by using Highcharts Dec 23, 2018
@yasulab yasulab changed the title Implementing Stats graph by using Highcharts Display graphical charts of Stats by using Highcharts Dec 23, 2018
@yasulab yasulab changed the title Display graphical charts of Stats by using Highcharts Display Stats Graphical Charts by using Highcharts Jan 25, 2019
@yasulab yasulab mentioned this pull request Apr 5, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AnaTofuZ AnaTofuZ AnaTofuZ approved these changes

@yasulab yasulab Awaiting requested review from yasulab

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@nalabjp @yasulab @AnaTofuZ