Use chartkick globally

* Clean up legacy charting imports
* Update existing donut and line charts
* Create helpers for parsing out existing chart data
* Move chart partials to a more common path
This commit is contained in:
James Mason 2018-12-19 12:59:52 -08:00
parent 3bbac3667f
commit 516e53d9df
29 changed files with 331 additions and 577 deletions

View file

@ -1,23 +0,0 @@
.text-center
%h4 #{title}
%canvas.doughnut_chart{ id: "dough_#{title.parameterize.underscore}", 'data-chart' => data.to_json }
- if data
- data.each do |key, value|
%span{ 'style' => "border-bottom: 3px solid #{value['color']}" } #{key}: #{value['value']}
:javascript
$(document).ready( function(){
var d = $("#dough_#{title.parameterize.underscore}");
var dt = d.get(0).getContext('2d');
$(window).resize( respondCanvas );
function respondCanvas(){
dt.canvas.width = 150;
dt.canvas.height = 150;
}
respondCanvas();
});

View file

@ -1,47 +0,0 @@
.row
.col-md-12
.text-center
%h4
= title
.row
.col-md-12
.chart_data{ 'data-chart' => "#{y.to_json}", 'data-conferences' => "#{conferences.to_json}",
'data-deactive' => "#{deactive_conferences.to_json}", 'data-weeks' => "#{x.to_json}",
'data-active' => "#{active_conferences.to_json}" }
%canvas.line_chart{ id: "line_chart_#{name}", 'data-name' => "#{name}" }
.row
.col-md-12
.text-center
= unit
.row
.col-md-12
.conferenceCheckboxes{ id: "#{name}Checkboxes", 'data-name' => "#{name}" }
- if active_conferences && deactive_conferences && conferences && conferences.length > 1
- active_conferences.each do |conference|
%div
%span{ 'style' => "border-bottom: 3px solid #{conference[:color]};", 'data-chart' => "#{name}" }
%input{ 'type' => 'checkbox', 'name' => "#{conference[:short_title]}", 'checked' => 'checked' }
#{conference[:short_title]}
- deactive_conferences.each do |conference|
%div
%span{ 'style' => "border-bottom: 3px solid #{conference[:color]};", 'data-chart' => "#{name}" }
%input{ 'type' => 'checkbox', 'name' => "#{conference[:short_title]}" }
#{conference[:short_title]}
:javascript
$(document).ready( function(){
var c = $("#line_chart_#{name}");
var ct = c.get(0).getContext('2d');
var container = $(c).parent();
$(window).resize( respondCanvas );
function respondCanvas(){
c.attr('width', $(container).width() );
c.attr('height', $(container).height() );
}
respondCanvas();
});

View file

@ -1,52 +1,32 @@
= javascript_include_tag 'Chart.min'
.row
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "user", subtitle: "User", value: @total_user, delta: @new_user
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "check-square", subtitle: "Registration", value: @total_reg, delta: @new_reg
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "file-text", subtitle: "Submission", value: @total_submissions, delta: @new_submissions
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "archive", subtitle: "Withdrawn", value: @total_withdrawn, delta: @new_withdrawn, reverse: true
.row#registrations
.col-md-8
= render partial: 'line_chart', locals: { title: 'Registrations over time',
name: 'registrations',
conferences: @conferences,
active_conferences: @active_conferences,
deactive_conferences: @deactive_conferences,
y: @registrations,
x: @registration_weeks,
unit: 'weeks' }
= render 'line_chart', title: 'Registrations per week', data: @registrations
.col-md-4
= render partial: 'doughnut_chart', locals: { title: 'Events', data: @event_distribution }
= render 'donut_chart', title: 'Events',
data: @event_distribution, colors: @event_distribution_colors
.row#submissions
.col-md-8
= render partial: 'line_chart', locals: { title: 'Submissions over time',
name: 'submissions',
conferences: @conferences,
active_conferences: @active_conferences,
deactive_conferences: @deactive_conferences,
y: @submissions,
x: @cfp_weeks,
unit: 'weeks' }
= render 'line_chart', title: 'Submissions per week', data: @submissions
.col-md-4
= render partial: 'doughnut_chart', locals: { title: 'User', data: @user_distribution }
= render 'donut_chart', title: 'Users',
data: @user_distribution, colors: @user_distribution_colors
.row#tickets
.col-md-8
= render partial: 'line_chart', locals: { title: 'Tickets sold over time',
name: 'tickets',
conferences: @conferences,
active_conferences: @active_conferences,
deactive_conferences: @deactive_conferences,
y: @tickets,
x: @ticket_weeks,
unit: 'weeks' }
= render 'line_chart', title: 'Tickets sold per week', data: @tickets
%br
.row
.col-md-8

View file

@ -1,21 +1,19 @@
= javascript_include_tag 'Chart.min'
%h1
%span.fa.fa-tachometer
Dashboard for #{@conference.title}
%hr
.row
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "user", subtitle: "Registration", value: @total_reg, delta: @new_reg
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "check-square", subtitle: "Submission", value: @total_submissions, delta: @new_submissions
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "file-text", subtitle: "Hour", value: @program_length, delta: @new_program_length
.col-sm-3.col-xs-3
= render "shared/big_statistic",
= render "big_statistic",
icon: "archive", subtitle: "Withdrawn", value: @total_withdrawn, delta: @new_withdrawn
.row
@ -24,37 +22,19 @@
.col-md-8
.row#registrations
.col-md-12
= render partial: 'line_chart', locals: { title: 'Registrations over time',
name: 'registrations',
conferences: [@conference],
active_conferences: [@conference],
deactive_conferences: [],
y: @registrations,
x: @registration_weeks,
unit: 'weeks' }
= render 'line_chart',
title: 'Registrations per week', data: @registrations
.row#submissions
.col-md-12
= render partial: 'line_chart', locals: { title: 'Submissions over time',
name: 'submissions',
conferences: @submissions,
active_conferences: @submissions,
deactive_conferences: [],
y: @submissions_data,
x: @cfp_weeks,
unit: 'weeks' }
= render 'line_chart',
title: 'Submissions per week', data: @submissions
.col-md-4
= render partial: 'todo_list', locals: { conference_progress: @conference_progress,
conference: @conference }
= render 'todo_list',
conference_progress: @conference_progress, conference: @conference
.row#tickets
.col-md-8
= render partial: 'line_chart', locals: { title: 'Tickets sold over time',
name: 'tickets',
conferences: @tickets,
active_conferences: @tickets,
deactive_conferences: [],
y: @tickets_data,
x: @ticket_weeks,
unit: 'weeks' }
= render 'line_chart',
title: 'Tickets sold per week', data: @tickets
%br
.row
.col-md-12#doughnut
@ -75,27 +55,36 @@
.tab-pane.active#distribution_all
.row
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Event types', data: @event_type_distribution}
= render 'donut_chart', title: 'Event types',
combined_data: @event_type_distribution
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Difficulty levels', data: @difficulty_levels_distribution}
= render 'donut_chart', title: 'Difficulty levels',
combined_data: @difficulty_levels_distribution
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Tracks', data: @tracks_distribution}
= render 'donut_chart', title: 'Tracks',
combined_data: @tracks_distribution
.tab-pane#distribution_confirmed
.row
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Event types', data: @event_type_distribution_confirmed}
= render 'donut_chart', title: 'Event types',
combined_data: @event_type_distribution_confirmed
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Difficulty levels', data: @difficulty_levels_distribution_confirmed}
= render 'donut_chart', title: 'Difficulty levels',
combined_data: @difficulty_levels_distribution_confirmed
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Tracks', data: @tracks_distribution_confirmed}
= render 'donut_chart', title: 'Tracks',
combined_data: @tracks_distribution_confirmed
.tab-pane#distribution_withdrawn
.row
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Event types', data: @event_type_distribution_withdrawn}
= render 'donut_chart', title: 'Event types',
combined_data: @event_type_distribution_withdrawn
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Difficulty levels', data: @difficulty_levels_distribution_withdrawn}
= render 'donut_chart', title: 'Difficulty levels',
combined_data: @difficulty_levels_distribution_withdrawn
.col-md-4
= render partial: 'doughnut_chart', locals: {title: 'Tracks', data: @tracks_distribution_withdrawn}
= render 'donut_chart', title: 'Tracks',
combined_data: @tracks_distribution_withdrawn
.row
.col-md-8

View file

@ -1,5 +1,3 @@
= javascript_include_tag 'Chart.min'
.row
.col-md-12
.page-header
@ -47,17 +45,14 @@
= f.submit 'Add', class: 'btn btn-primary'
.row
.col-md-4
= render 'admin/conferences/doughnut_chart',
title: 'Events state',
data: @event_distribution
= render 'donut_chart', title: 'Events state',
data: @event_distribution, colors: @event_distribution_colors
.col-md-4
= render 'admin/conferences/doughnut_chart',
title: 'Confirmed events scheduled',
data: @scheduled_event_distribution
= render 'donut_chart', title: 'Confirmed events scheduled',
combined_data: @scheduled_event_distribution
.col-md-4
= render 'admin/conferences/doughnut_chart',
title: 'Tracks of confirmed events',
data: @tracks_distribution_confirmed
= render 'donut_chart', title: 'Tracks of confirmed events',
combined_data: @tracks_distribution_confirmed
.row
.col-md-12
.margin-event-table

View file

@ -1,5 +1,3 @@
= javascript_include_tag 'Chart.min'
.container
.row
.col-md-12.page-header
@ -9,11 +7,11 @@
Tickets sold for the conference
.row
.col-md-4
= render partial: 'admin/conferences/doughnut_chart',
locals: { title: 'Tickets sold', data: @tickets_sold_distribution }
= render 'donut_chart', title: 'Tickets sold',
combined_data: @tickets_sold_distribution
.col-md-4
= render partial: 'admin/conferences/doughnut_chart',
locals: {title: 'Tickets turnover', data: @tickets_turnover_distribution}
= render 'donut_chart', title: 'Tickets turnover',
combined_data: @tickets_turnover_distribution
%br
- if @physical_tickets.any?
.row

View file

@ -1,5 +1,3 @@
= javascript_include_tag 'Chart.min'
.row
.col-md-12
.page-header
@ -14,10 +12,12 @@
%p.text-muted
All the people who registered to your event
.col-md-4
= render partial: 'admin/conferences/doughnut_chart', locals: {title: 'Affiliation', data: @affiliation_distribution}
= render 'donut_chart', title: 'Affiliation',
combined_data: @affiliation_distribution
- unless @conference.pending?
.col-md-4
= render partial: 'admin/conferences/doughnut_chart', locals: {title: 'Attended registrations', data: @registration_distribution}
= render 'donut_chart', title: 'Attended registrations',
combined_data: @registration_distribution
.row
.col-md-12
%div.margin-event-table

View file

@ -1,6 +1,3 @@
= javascript_include_tag "//www.google.com/jsapi", "chartkick"
= javascript_include_tag 'chartkick'
= bar_chart @survey.survey_questions.map{ |q| [q.title, q.survey_replies.count] }
- @survey.survey_questions.each.with_index(1) do |survey_question, question_index|