From e0de30c03bbe65f18ac21e7f4e0ad08282cde07d Mon Sep 17 00:00:00 2001 From: nalabjp Date: Mon, 5 Feb 2018 00:31:30 +0900 Subject: [PATCH 1/7] Gem lazy_high_charts --- Gemfile | 2 ++ Gemfile.lock | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/Gemfile b/Gemfile index c0e12cb6c..d239d1449 100644 --- a/Gemfile +++ b/Gemfile @@ -42,6 +42,8 @@ gem 'rack-attack' gem 'google_drive' +gem 'lazy_high_charts' + group :development do gem 'web-console' gem 'spring' diff --git a/Gemfile.lock b/Gemfile.lock index 0a315411a..42549af8a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -125,6 +125,7 @@ GEM haml (>= 4.0.6, < 6.0) html2haml (>= 1.0.1) railties (>= 4.0.1) + hash-deep-merge (0.1.1) highline (1.7.8) html2haml (2.2.0) erubis (~> 2.7.0) @@ -155,6 +156,8 @@ GEM kramdown (1.15.0) launchy (2.4.3) addressable (~> 2.3) + lazy_high_charts (1.5.8) + hash-deep-merge listen (3.1.5) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) @@ -390,6 +393,7 @@ DEPENDENCIES jquery-rails koala kramdown + lazy_high_charts listen minitest-retry pg From 04a50a2b250eb5a43a7f5b111098397f79b9c565 Mon Sep 17 00:00:00 2001 From: nalabjp Date: Mon, 5 Feb 2018 00:38:23 +0900 Subject: [PATCH 2/7] Require highcharts modules --- app/assets/javascripts/application.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 950acf152..1132b5d81 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -16,4 +16,7 @@ //= require scrivito_section_widgets //= require scrivito //= require bootstrap-sprockets +//= require highcharts/highcharts +//= require highcharts/highcharts-more +//= require highcharts/highstock //= require_tree . From 8fa12bf3ddca70b92c72a390eeb6487eb5de309e Mon Sep 17 00:00:00 2001 From: nalabjp Date: Mon, 5 Feb 2018 01:17:28 +0900 Subject: [PATCH 3/7] Chart of dojo number --- app/controllers/static_pages_controller.rb | 2 ++ app/models/high_charts_builder.rb | 36 ++++++++++++++++++++++ app/views/static_pages/stats.html.haml | 1 + 3 files changed, 39 insertions(+) create mode 100644 app/models/high_charts_builder.rb diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index e59d786a3..337c373e4 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -32,6 +32,8 @@ def stats EventHistory.where(evented_at: Time.zone.local(year).beginning_of_year..Time.zone.local(year).end_of_year).sum(:participants) end + + @annual_dojos_chart = HighChartsBuilder.build_annual_dojos end def letsencrypt diff --git a/app/models/high_charts_builder.rb b/app/models/high_charts_builder.rb new file mode 100644 index 000000000..1124ad76a --- /dev/null +++ b/app/models/high_charts_builder.rb @@ -0,0 +1,36 @@ +class HighChartsBuilder + class << self + def build_annual_dojos + source = Dojo.where('created_at < ?', Time.current.beginning_of_year).group("DATE_TRUNC('year', created_at)").count + data = annual_chart_data_from(source) + + LazyHighCharts::HighChart.new('graph') do |f| + f.title(text: '全国の道場数の推移') + f.xAxis(categories: data[:years]) + f.series(type: 'column', name: '増加数', yAxis: 0, data: data[:increase_nums]) + f.series(type: 'line', name: '累積合計', yAxis: 1, data: data[:cumulative_sums]) + f.yAxis [ + { title: { text: '増加数' } }, + { title: { text: '累積合計' }, opposite: true } + ] + f.chart(width: 600) + f.colors(["#8085e9", "#f7a35c"]) + end + end + + private + + def annual_chart_data_from(source) + sorted_list = source.each.with_object({}) {|(k, v), h| h[k.year] = v }.sort + years = sorted_list.map(&:first) + increase_nums = sorted_list.map(&:last) + cumulative_sums = increase_nums.size.times.map {|i| increase_nums[0..i].inject(:+) } + + { + years: years, + increase_nums: increase_nums, + cumulative_sums: cumulative_sums + } + end + end +end diff --git a/app/views/static_pages/stats.html.haml b/app/views/static_pages/stats.html.haml index 6d898ad09..9c4a902af 100644 --- a/app/views/static_pages/stats.html.haml +++ b/app/views/static_pages/stats.html.haml @@ -60,6 +60,7 @@ - @range.each do |year| %td= @participants[year] %td= @participants.values.inject(:+) + = high_chart("annual_dojos", @annual_dojos_chart) %h3 関連リンク %ul{:style => "list-style: none; margin-left: -40px;"} From ad9fed4e362bb458d68a7e76c91b448abdef6da5 Mon Sep 17 00:00:00 2001 From: nalabjp Date: Mon, 5 Mar 2018 02:13:52 +0900 Subject: [PATCH 4/7] Chart of event histories --- app/controllers/static_pages_controller.rb | 1 + app/models/high_charts_builder.rb | 18 ++++++++++++++++++ app/views/static_pages/stats.html.haml | 1 + 3 files changed, 20 insertions(+) diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index 337c373e4..7a97a662d 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -34,6 +34,7 @@ def stats end @annual_dojos_chart = HighChartsBuilder.build_annual_dojos + @annual_event_histories_chart = HighChartsBuilder.build_annual_event_histories end def letsencrypt diff --git a/app/models/high_charts_builder.rb b/app/models/high_charts_builder.rb index 1124ad76a..47e9d27cf 100644 --- a/app/models/high_charts_builder.rb +++ b/app/models/high_charts_builder.rb @@ -18,6 +18,24 @@ def build_annual_dojos end end + def build_annual_event_histories + source = EventHistory.where('evented_at < ?', Time.current.beginning_of_year).group("DATE_TRUNC('year', evented_at)").count + data = annual_chart_data_from(source) + + LazyHighCharts::HighChart.new('graph') do |f| + f.title(text: '開催回数の推移') + f.xAxis(categories: data[:years]) + f.series(type: 'column', name: '開催回数', yAxis: 0, data: data[:increase_nums]) + f.series(type: 'line', name: '累積合計', yAxis: 1, data: data[:cumulative_sums]) + f.yAxis [ + { title: { text: '開催回数' } }, + { title: { text: '累積合計' }, opposite: true } + ] + f.chart(width: 600) + f.colors(["#8085e9", "#f7a35c"]) + end + end + private def annual_chart_data_from(source) diff --git a/app/views/static_pages/stats.html.haml b/app/views/static_pages/stats.html.haml index 9c4a902af..85691e7e4 100644 --- a/app/views/static_pages/stats.html.haml +++ b/app/views/static_pages/stats.html.haml @@ -61,6 +61,7 @@ %td= @participants[year] %td= @participants.values.inject(:+) = high_chart("annual_dojos", @annual_dojos_chart) + = high_chart("annual_event_histories", @annual_event_histories_chart) %h3 関連リンク %ul{:style => "list-style: none; margin-left: -40px;"} From 070a671fbfd3f2a8bb5771bb8bfb8a97d8938d2d Mon Sep 17 00:00:00 2001 From: nalabjp Date: Mon, 5 Mar 2018 02:22:03 +0900 Subject: [PATCH 5/7] Chart of participants --- app/controllers/static_pages_controller.rb | 1 + app/models/high_charts_builder.rb | 18 ++++++++++++++++++ app/views/static_pages/stats.html.haml | 1 + 3 files changed, 20 insertions(+) diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index 7a97a662d..c0a4a495b 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -35,6 +35,7 @@ def stats @annual_dojos_chart = HighChartsBuilder.build_annual_dojos @annual_event_histories_chart = HighChartsBuilder.build_annual_event_histories + @annual_participants_chart = HighChartsBuilder.build_annual_participants end def letsencrypt diff --git a/app/models/high_charts_builder.rb b/app/models/high_charts_builder.rb index 47e9d27cf..fc13e8b0f 100644 --- a/app/models/high_charts_builder.rb +++ b/app/models/high_charts_builder.rb @@ -36,6 +36,24 @@ def build_annual_event_histories end end + def build_annual_participants + source = EventHistory.where('evented_at < ?', Time.current.beginning_of_year).group("DATE_TRUNC('year', evented_at)").sum(:participants) + data = annual_chart_data_from(source) + + LazyHighCharts::HighChart.new('graph') do |f| + f.title(text: '参加者数の推移') + f.xAxis(categories: data[:years]) + f.series(type: 'column', name: '参加者数', yAxis: 0, data: data[:increase_nums]) + f.series(type: 'line', name: '累積合計', yAxis: 1, data: data[:cumulative_sums]) + f.yAxis [ + { title: { text: '参加者数' } }, + { title: { text: '累積合計' }, opposite: true } + ] + f.chart(width: 600) + f.colors(["#8085e9", "#f7a35c"]) + end + end + private def annual_chart_data_from(source) diff --git a/app/views/static_pages/stats.html.haml b/app/views/static_pages/stats.html.haml index 85691e7e4..18196774c 100644 --- a/app/views/static_pages/stats.html.haml +++ b/app/views/static_pages/stats.html.haml @@ -62,6 +62,7 @@ %td= @participants.values.inject(:+) = high_chart("annual_dojos", @annual_dojos_chart) = high_chart("annual_event_histories", @annual_event_histories_chart) + = high_chart("annual_participants", @annual_participants_chart) %h3 関連リンク %ul{:style => "list-style: none; margin-left: -40px;"} From 5317a28f7e51a1b341222d9d3323acc6e7d5e099 Mon Sep 17 00:00:00 2001 From: nalabjp Date: Sun, 11 Mar 2018 13:40:45 +0900 Subject: [PATCH 6/7] Change chart colors --- app/models/high_charts_builder.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/models/high_charts_builder.rb b/app/models/high_charts_builder.rb index fc13e8b0f..c6b847c6b 100644 --- a/app/models/high_charts_builder.rb +++ b/app/models/high_charts_builder.rb @@ -14,7 +14,7 @@ def build_annual_dojos { title: { text: '累積合計' }, opposite: true } ] f.chart(width: 600) - f.colors(["#8085e9", "#f7a35c"]) + f.colors(["#A0D3B5", "#505D6B"]) end end @@ -32,7 +32,7 @@ def build_annual_event_histories { title: { text: '累積合計' }, opposite: true } ] f.chart(width: 600) - f.colors(["#8085e9", "#f7a35c"]) + f.colors(["#F4C34F", "#BD2561"]) end end @@ -50,7 +50,7 @@ def build_annual_participants { title: { text: '累積合計' }, opposite: true } ] f.chart(width: 600) - f.colors(["#8085e9", "#f7a35c"]) + f.colors(["#EF685E", "#35637D"]) end end From 6c08ecf5d921e1a4f1fca8c6dc3ce128247904fc Mon Sep 17 00:00:00 2001 From: nalabjp Date: Sun, 11 Mar 2018 13:43:30 +0900 Subject: [PATCH 7/7] Move charts to top --- app/views/static_pages/stats.html.haml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/app/views/static_pages/stats.html.haml b/app/views/static_pages/stats.html.haml index 18196774c..03c50561e 100644 --- a/app/views/static_pages/stats.html.haml +++ b/app/views/static_pages/stats.html.haml @@ -9,19 +9,6 @@ %p 本ページでは全国の CoderDojo の統計情報をまとめています。 CoderDojo の活動状況を把握する際などにご活用ください。 - %h3 全国の道場 - #accordion.panel-group{"aria-multiselectable" => "true", :role => "tablist"} - - @regions_and_dojos.each_with_index do |(region, dojos), index| - .panel.panel-default - .panel-heading{:id => "heading#{index}", :role => "tab"} - %h4.panel-title - %a{"data-parent" => "#accordion", "data-toggle" => "collapse", :href => "##{"collapse#{index}"}", :role => "button"} - %i.fa.fa-chevron-right{"aria-hidden" => "true"} - = region - \- #{dojos.count} Dojos - .panel-collapse.collapse{:id => "collapse#{index}", :role => "tabpanel"} - .panel-body.grayscale-bg - = render partial: 'dojo', collection: dojos %h3 開催回数 = @sum_of_events 回 @@ -63,6 +50,19 @@ = high_chart("annual_dojos", @annual_dojos_chart) = high_chart("annual_event_histories", @annual_event_histories_chart) = high_chart("annual_participants", @annual_participants_chart) + %h3 全国の道場 + #accordion.panel-group{"aria-multiselectable" => "true", :role => "tablist"} + - @regions_and_dojos.each_with_index do |(region, dojos), index| + .panel.panel-default + .panel-heading{:id => "heading#{index}", :role => "tab"} + %h4.panel-title + %a{"data-parent" => "#accordion", "data-toggle" => "collapse", :href => "##{"collapse#{index}"}", :role => "button"} + %i.fa.fa-chevron-right{"aria-hidden" => "true"} + = region + \- #{dojos.count} Dojos + .panel-collapse.collapse{:id => "collapse#{index}", :role => "tabpanel"} + .panel-body.grayscale-bg + = render partial: 'dojo', collection: dojos %h3 関連リンク %ul{:style => "list-style: none; margin-left: -40px;"}