Skip to content

Commit 003431d

Browse files
xsrustxsrust
authored
Issue/1682 (#2440)
* remove monthly usage from funder-usage-dashboard, adjust spacing on page * rename usage statistic accordion partials * usage-dashboard accordions now conditional on the type of user, also made the js more robust to the charts not existing
1 parent d8668b9 commit 003431d

File tree

7 files changed

+210
-195
lines changed

7 files changed

+210
-195
lines changed

‎app/javascript/views/usage/index.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isObject } from '../../utils/isType';
1+
import { isObject, isUndefined } from '../../utils/isType';
22
import { initializeCharts, createChart, drawHorizontalBar } from '../../utils/charts';
33

44
$(() => {
@@ -24,33 +24,38 @@ $(() => {
2424
initializeCharts();
2525

2626
// Create the Users joined chart
27-
const usersData = JSON.parse($('#users_joined').val());
28-
if (isObject(usersData)) {
29-
createChart('#yearly_users', usersData);
27+
if (!isUndefined($('#users_joined').val())) {
28+
const usersData = JSON.parse($('#users_joined').val());
29+
if (isObject(usersData)) {
30+
createChart('#yearly_users', usersData);
31+
}
3032
}
3133
// Create the Plans created chart
32-
const plansData = JSON.parse($('#plans_created').val());
33-
if (isObject(plansData)) {
34-
createChart('#yearly_plans', plansData);
34+
if (!isUndefined($('#plans_created').val())) {
35+
const plansData = JSON.parse($('#plans_created').val());
36+
if (isObject(plansData)) {
37+
createChart('#yearly_plans', plansData);
38+
}
3539
}
36-
3740
// TODO: Most of these event listeners would not be necessary if JQuery and
3841
// all other JS libraries were available to the js.erb files. Reevaluate
3942
// this JS once we move to Rails 5 and properly configure webpacker
4043
let drawnChartByTemplate = null;
4144
const monthlyPlanTemplatesChart = document.getElementById('monthly_plans_by_template');
4245
// Add event listeners that draw and destroy the chart
43-
monthlyPlanTemplatesChart.addEventListener('renderChart', (e) => {
44-
drawnChartByTemplate = drawHorizontalBar($('#monthly_plans_by_template'), e.detail);
45-
// Assigning the chart to a window variable here so that we can fire
46-
// the events from the js.erb
47-
window.templatePlansChart = document.getElementById('monthly_plans_by_template');
48-
});
49-
monthlyPlanTemplatesChart.addEventListener('destroyChart', () => {
50-
if (drawnChartByTemplate) {
51-
drawnChartByTemplate.destroy();
52-
}
53-
});
46+
if (isObject(monthlyPlanTemplatesChart)) {
47+
monthlyPlanTemplatesChart.addEventListener('renderChart', (e) => {
48+
drawnChartByTemplate = drawHorizontalBar($('#monthly_plans_by_template'), e.detail);
49+
// Assigning the chart to a window variable here so that we can fire
50+
// the events from the js.erb
51+
window.templatePlansChart = document.getElementById('monthly_plans_by_template');
52+
});
53+
monthlyPlanTemplatesChart.addEventListener('destroyChart', () => {
54+
if (drawnChartByTemplate) {
55+
drawnChartByTemplate.destroy();
56+
}
57+
});
58+
}
5459

5560
const monthlyPlanUsingTemplatesChart = document.getElementById('monthly_plans_using_template');
5661
// Add event listeners that draw the chart if it exists
@@ -60,13 +65,12 @@ $(() => {
6065
});
6166
}
6267

63-
// Create the initial Plans per template chart
64-
const templatePlansData = JSON.parse($('#plans_by_template').val());
65-
if (isObject(templatePlansData)) {
68+
// Create the initial Plans per template chart if the chart exists
69+
if (isObject(monthlyPlanTemplatesChart)) {
70+
const templatePlansData = JSON.parse($('#plans_by_template').val());
6671
const drawPer = new CustomEvent('renderChart', { detail: templatePlansData });
6772
document.getElementById('monthly_plans_by_template').dispatchEvent(drawPer);
6873
}
69-
7074
// Create the initial Plans using template chart if the chart exists
7175
if (isObject(monthlyPlanUsingTemplatesChart)) {
7276
const usingTemplatePlansData = JSON.parse($('#plans_using_template').val());

‎app/views/usage/_template_statistics.html.erb‎

Lines changed: 10 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,14 @@
1-
<%# locals: expanded %>
2-
3-
<div class="panel panel-default">
4-
<a href="#template_statistics" class="heading-button"
5-
data-toggle="collapse" data-parent="usage-accordion"
6-
data-target="#collapseTemplateStatistics"
7-
aria-expanded="true" aria-controls="#collapseTemplateStatistics">
8-
9-
<div class="panel-heading" role="tab" id="headingTemplateStatistics">
10-
<div class="panel-title pull-left">
11-
<%= _('Statistics on your Templates') %>
12-
</div>
13-
<div class="pull-right">
14-
<i class="fa fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
15-
</div>
16-
<div class="clearfix"></div>
17-
</div>
18-
</a>
19-
<div id="collapseTemplateStatistics"
20-
class="panel-collapse collapse <%='in' if expanded %>"
21-
role="tabpanel" aria-labled-by="headingTemplateStatistics">
22-
<div class="panel-body">
23-
24-
<div class="row">
25-
<div class="col-md-12">
26-
<p class="bold fontsize-h4"><%=_('No. plans created based off your templates')%></p>
27-
</div>
28-
</div>
1+
<div class="row">
2+
<div class="col-md-12">
3+
<p class="bold fontsize-h4"><%=_('No. plans created based off your templates')%></p>
4+
</div>
5+
</div>
296

30-
<div class="row">
31-
<div class="col-md-12" style="position: relative; width: 100%; height: 100%">
32-
<div id="plans_using_template_chart">
33-
<%= render partial: 'usage/plans_by_template_chart',
34-
locals: { data: @plans_per_month, subset: "using_template"} %>
35-
</div>
36-
</div>
7+
<div class="row">
8+
<div class="col-md-12" style="position: relative; width: 100%; height: 100%">
9+
<div id="plans_using_template_chart">
10+
<%= render partial: 'usage/plans_by_template_chart',
11+
locals: { data: @plans_per_month, subset: "using_template"} %>
3712
</div>
38-
39-
4013
</div>
41-
</div>
42-
4314
</div>

‎app/views/usage/_template_statistics_accordion.html.erb‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<%# locals: expanded %>
2+
3+
<div class="panel panel-default">
4+
<a href="#template_statistics" class="heading-button"
5+
data-toggle="collapse" data-parent="usage-accordion"
6+
data-target="#collapseTemplateStatistics"
7+
aria-expanded="true" aria-controls="#collapseTemplateStatistics">
8+
9+
<div class="panel-heading" role="tab" id="headingTemplateStatistics">
10+
<div class="panel-title pull-left">
11+
<%= _('Statistics on your Templates') %>
12+
</div>
13+
<div class="pull-right">
14+
<i class="fa fa-<%= expanded ? 'minus' : 'plus' %> pull-right" aria-hidden="true"></i>
15+
</div>
16+
<div class="clearfix"></div>
17+
</div>
18+
</a>
19+
<div id="collapseTemplateStatistics"
20+
class="panel-collapse collapse <%='in' if expanded %>"
21+
role="tabpanel" aria-labled-by="headingTemplateStatistics">
22+
<div class="panel-body">
23+
24+
<%= render partial: 'usage/template_statistics' %>
25+
26+
</div>
27+
</div>
28+
29+
</div>

‎app/views/usage/_total_usage.html.erb‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
<p class="fontsize-h4"><%= plan_count.to_i %> Total plans</p>
1212
</div>
1313
</div>
14+
<% if @funder.present? %>
15+
<div class="col-md-3"></div>
16+
<% end %>
17+
<% unless current_user.can_super_admin? %>
18+
<div class="col-md-3"></div>
19+
<% end %>
1420
<div class="col-md-3">
1521
<form class="form-inline mt-10 mb-10 pull-right">
1622
<label for="csv-field-sep">
@@ -19,16 +25,18 @@
1925
<%= select_tag "csv-field-sep", options_for_select(separators, separators[0]), {class: "single-char-select"} %>
2026
</form>
2127
</div>
22-
<div class="col-md-3">
23-
<% if current_user.can_super_admin? %>
24-
<%= link_to usage_global_statistics_path(sep: ","), class: 'stat btn btn-default', role: 'button', target: '_blank' do %>
28+
<% if current_user.can_super_admin? %>
29+
<div class="col-md-3">
30+
<%= link_to usage_global_statistics_path(sep: ","), class: "stat btn btn-default #{'pull-right' if @funder.present?}", role: 'button', target: '_blank' do %>
2531
<%= _('Download global usage') %> <i class="fa fa-download" aria-hidden="true"></i>
2632
<% end %>
27-
<% end %>
28-
</div>
29-
<div class="col-md-3">
30-
<%= link_to usage_org_statistics_path(sep: ","), class: 'stat btn btn-default pull-right', role: 'button', target: '_blank' do %>
31-
<%= _('Download Monthly Usage') %> <i class="fa fa-download" aria-hidden="true"></i>
32-
<% end %>
33-
</div>
33+
</div>
34+
<% end %>
35+
<% unless @funder.present? %>
36+
<div class="col-md-3">
37+
<%= link_to usage_org_statistics_path(sep: ","), class: 'stat btn btn-default pull-right', role: 'button', target: '_blank' do %>
38+
<%= _('Download Monthly Usage') %> <i class="fa fa-download" aria-hidden="true"></i>
39+
<% end %>
40+
</div>
41+
<% end %>
3442
</div>

0 commit comments

Comments
 (0)