improves texts and styles for budgets stats
This commit is contained in:
decabeza
@@ -1,5 +1,7 @@
|
||||
<% cache [@stats] do %>
|
||||
<% provide :title, t("spending_proposals.stats.page_title") %>
|
||||
<% provide :title do %>
|
||||
<%= t("budgets.stats.title") %> - <%= @budget.name %>
|
||||
<% end %>
|
||||
<% provide :social_media_meta_tags do %>
|
||||
<%= render "shared/social_media_meta_tags",
|
||||
social_url: budget_url(@budget),
|
||||
@@ -7,246 +9,210 @@
|
||||
social_description: @budget.description_finished %>
|
||||
<% end %>
|
||||
|
||||
<%= javascript_include_tag "chart", "data-turbolinks-track" => true %>
|
||||
<%= javascript_include_tag "budgets-stats-charts", "data-turbolinks-track" => true %>
|
||||
|
||||
<div class="budgets-stats">
|
||||
<div class="expanded no-margin-top padding">
|
||||
<div class="row">
|
||||
<div class="small-12 column text-center">
|
||||
<%= back_link_to budgets_path %>
|
||||
<h1 class="title"><%= t("spending_proposals.stats.heading") %></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row margin-top">
|
||||
<div class="small-12 column">
|
||||
<ul class="tabs">
|
||||
<li class="tabs-title">
|
||||
<%= link_to t("budget.results.link"), budget_results_path(@budget) %>
|
||||
</li>
|
||||
<li class="tabs-title is-active">
|
||||
<span class="show-for-sr"><%= t("shared.you_are_in") %></span>
|
||||
<%= link_to t("budgets.stats.link"), budget_stats_path(@budget), class: "is-active" %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="small-12 column">
|
||||
<div class="panel purple text-center">
|
||||
<p><%= t("budgets.stats.total_participants").upcase %></p>
|
||||
<p id="total_participants" class="big-number-stat">
|
||||
<%= @stats[:total_participants] %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row" data-equalizer>
|
||||
<div class="small-12 medium-6 column text-right">
|
||||
<div class="panel light-green" data-equalizer-watch>
|
||||
<p><%= t("budgets.stats.total_budget_investments").upcase %></p>
|
||||
<p id="total_spending_proposals" class="big-number-stat">
|
||||
<%= @stats[:total_budget_investments] %>
|
||||
</p>
|
||||
<div class="budgets-stats">
|
||||
<div class="expanded no-margin-top padding header">
|
||||
<div class="row">
|
||||
<div class="small-12 column text-center">
|
||||
<%= back_link_to budgets_path %>
|
||||
<h1 class="title"><%= t("budgets.stats.title") %><br><%= @budget.name %></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-6 column">
|
||||
<p class="chart-legend" data-equalizer-watch>
|
||||
<span class="label" style="background: #9CC56A"></span>
|
||||
<span id="total_feasible_spending_proposals">
|
||||
<strong><%= t("budgets.stats.total_feasible_investments").upcase %></strong>:
|
||||
<%= @stats[:total_feasible_investments] %><br>
|
||||
</span>
|
||||
|
||||
<span class="label" style="background: #E87461"></span>
|
||||
<span id="total_unfeasible_spending_proposals">
|
||||
<strong><%= t("budgets.stats.total_unfeasible_investments").upcase %></strong>:
|
||||
<%= @stats[:total_unfeasible_investments] %><br>
|
||||
</span>
|
||||
|
||||
<br>
|
||||
|
||||
<span class="label" style="background: #d0cef6"></span>
|
||||
<strong><%= t("budgets.stats.total_participants_support_phase").upcase %></strong>:
|
||||
<span id="total_participants_support_phase">
|
||||
<%= @stats[:total_participants_support_phase] %> <em><%= t("budgets.stats.participants") %></em>,
|
||||
</span>
|
||||
<span id="total_supports">
|
||||
<%= @stats[:total_supports] %> <em><%= t("budgets.stats.supports") %></em><br>
|
||||
</span>
|
||||
|
||||
<span class="label" style="background: #454372"></span>
|
||||
<strong><%= t("budgets.stats.total_participants_vote_phase").upcase %></strong>:
|
||||
<span id="total_participants_vote_phase">
|
||||
<%= @stats[:total_participants_vote_phase] %> <em><%= t("budgets.stats.participants") %></em>,
|
||||
</span>
|
||||
<span id="total_votes">
|
||||
<%= @stats[:total_votes] %> <em><%= t("budgets.stats.votes") %></em><br>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
<hr class="double">
|
||||
|
||||
<div class="row" data-equalizer>
|
||||
|
||||
<div class="row margin-top">
|
||||
<div class="small-12 column">
|
||||
<h2 class="subtitle"><%= t("budgets.stats.by_gender_html") %></h2>
|
||||
<ul class="tabs">
|
||||
<!-- Pending results tab
|
||||
<li class="tabs-title">
|
||||
<%# link_to t("budget.results.link"), budget_results_path(@budget) %>
|
||||
</li>
|
||||
-->
|
||||
<li class="tabs-title is-active">
|
||||
<span class="show-for-sr"><%= t("shared.you_are_in") %></span>
|
||||
<%= link_to t("budgets.stats.link"), budget_stats_path(@budget), class: "is-active" %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="small-12 medium-6 column">
|
||||
<div class="callout">
|
||||
<span class="uppercase"><%= t("budgets.stats.total_participants") %></span>
|
||||
<p id="total_participants" class="big-number-stat budget">
|
||||
<%= @stats[:total_participants] %>
|
||||
</p>
|
||||
|
||||
<span class="uppercase"><%= t("budgets.stats.total_budget_investments") %></span>
|
||||
<p class="big-number-stat budget">
|
||||
<%= @stats[:total_budget_investments] %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="small-12 medium-6 column">
|
||||
<p>
|
||||
<span class="label feasible"></span>
|
||||
<span id="total_feasible_investments">
|
||||
<span class="uppercase"><strong><%= t("budgets.stats.total_feasible_investments") %></strong></span>:
|
||||
<%= @stats[:total_feasible_investments] %><br>
|
||||
</span>
|
||||
|
||||
<span class="label unfeasible"></span>
|
||||
<span id="total_unfeasible_investments">
|
||||
<span class="uppercase"><strong><%= t("budgets.stats.total_unfeasible_investments") %></strong></span>:
|
||||
<%= @stats[:total_unfeasible_investments] %><br>
|
||||
</span>
|
||||
|
||||
<div class="small-12 medium-6 column show-for-medium" data-equalizer-watch>
|
||||
<div class="panel text-center">
|
||||
<%= image_tag ("budgets/stats/gender.png") %>
|
||||
<br>
|
||||
<div class="large-offset-3 large-5 padding">
|
||||
<canvas id="sps-chart-gender" width="300" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="label supports"></span>
|
||||
<span class="uppercase"><strong><%= t("budgets.stats.total_participants_support_phase") %></strong></span>:
|
||||
<span id="total_participants_support_phase">
|
||||
<%= @stats[:total_participants_support_phase] %> <em><%= t("budgets.stats.participants") %></em>,
|
||||
<%= @stats[:total_supports] %> <em><%= t("budgets.stats.supports") %></em><br>
|
||||
</span>
|
||||
|
||||
<span class="label balloting"></span>
|
||||
<span class="uppercase"><strong><%= t("budgets.stats.total_participants_vote_phase") %></strong></span>:
|
||||
<span id="total_participants_vote_phase">
|
||||
<%= @stats[:total_participants_vote_phase] %> <em><%= t("budgets.stats.participants") %></em>,
|
||||
<%= @stats[:total_votes] %> <em><%= t("budgets.stats.votes") %></em><br>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row margin">
|
||||
<div class="small-12 column">
|
||||
<h2 class="margin-bottom"><%= t("budgets.stats.by_gender") %></h2>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-6 column" data-equalizer-watch>
|
||||
<div class="small-12 medium-6 column">
|
||||
<div class="panel text-right chart-legend">
|
||||
<p id="male_percentage">
|
||||
<span class="label" style="background: #FF6600"></span>
|
||||
<%= t("budgets.stats.total_male_participants").upcase %>
|
||||
(<%= number_to_percentage(@stats[:male_percentage],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>)
|
||||
</p>
|
||||
<p id="total_male_participants" class="big-number-stat">
|
||||
<%= @stats[:total_male_participants] %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="small-12 medium-6 column text-center">
|
||||
<%= image_tag ("budgets/stats/gender.png") %>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-6 column">
|
||||
<div class="small-12 medium-6 column text-right">
|
||||
<p id="male_percentage">
|
||||
<span class="label" style="background: #FF6600"></span>
|
||||
<%= t("budgets.stats.total_male_participants").upcase %>
|
||||
(<%= number_to_percentage(@stats[:male_percentage],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>)
|
||||
</p>
|
||||
<p id="total_male_participants" class="big-number-stat">
|
||||
<%= @stats[:total_male_participants] %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-6 column">
|
||||
<div class="panel text-left chart-legend">
|
||||
<p id="female_percentage">
|
||||
<span class="label" style="background: #FF9E01"></span>
|
||||
<%= t("budgets.stats.total_female_participants").upcase %>
|
||||
(<%= number_to_percentage(@stats[:female_percentage],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>)
|
||||
</p>
|
||||
<p id="total_female_participants" class="big-number-stat">
|
||||
<%= @stats[:total_female_participants] %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="small-12 medium-6 column text-left">
|
||||
<p id="female_percentage">
|
||||
<span class="label" style="background: #FF9E01"></span>
|
||||
<%= t("budgets.stats.total_female_participants").upcase %>
|
||||
(<%= number_to_percentage(@stats[:female_percentage],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>)
|
||||
</p>
|
||||
<p id="total_female_participants" class="big-number-stat">
|
||||
<%= @stats[:total_female_participants] %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="small-12 column margin-top">
|
||||
<h2 class="subtitle"><%= t("budgets.stats.by_age_html") %></h2>
|
||||
</div>
|
||||
|
||||
<hr class="double">
|
||||
|
||||
<table class="age-groups-investment-projects">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-width border-right"><%= t("budgets.stats.age").upcase %></th>
|
||||
<th class="border-left"><%= t("budgets.stats.total").upcase %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% all_ages_count = @stats[:age_groups].values.sum.to_f %>
|
||||
<% @stats[:age_groups].each do |age_group, count| %>
|
||||
<tr id="age_group_<%= age_group.gsub(" - ", "_to_") %>">
|
||||
<td class="border-right">
|
||||
<%= age_group.gsub("+", t("budgets.stats.more_than")) + t("budgets.stats.years") %>
|
||||
</td>
|
||||
<td class="border-left">
|
||||
<strong>
|
||||
<%
|
||||
percentage_age_count = all_ages_count == 0 ? 0 : (count / all_ages_count * 100)
|
||||
formatted_percentage_age_count = number_to_percentage(percentage_age_count,
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2)
|
||||
%>
|
||||
<%= count %>
|
||||
(<%= formatted_percentage_age_count %>)
|
||||
</strong>
|
||||
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="<%= percentage_age_count %>" aria-valuemax="100">
|
||||
<span class="progress-meter" style="width: <%= number_to_percentage(percentage_age_count*4,
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2, locale: :en) %>;"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<hr class="double">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="row margin">
|
||||
<div class="small-12 column">
|
||||
<h2 class="subtitle"><%= t("budgets.stats.by_heading_html") %></h2>
|
||||
</div>
|
||||
<h2 class="margin-bottom"><%= t("budgets.stats.by_age") %></h2>
|
||||
|
||||
<div class="small-12 column">
|
||||
<table class="survey-districts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2"><% t("budgets.stats.heading").upcase %></th>
|
||||
<th rowspan="2"><% t("budgets.stats.investments_sent").upcase %></th>
|
||||
<th colspan="3"><% t("budgets.stats.participants_support_phase").upcase %></th>
|
||||
<th colspan="3"><% t("budgets.stats.participants_voting_phase").upcase %></th>
|
||||
<th colspan="3"><% t("budgets.stats.participants_total").upcase %></th>
|
||||
<th scope="col" class="table-width border-right"><%= t("budgets.stats.age").upcase %></th>
|
||||
<th scope="col" class="border-left"><%= t("budgets.stats.total").upcase %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% all_ages_count = @stats[:age_groups].values.sum.to_f %>
|
||||
<% @stats[:age_groups].each do |age_group, count| %>
|
||||
<tr id="age_group_<%= age_group.gsub(" - ", "_to_") %>">
|
||||
<td class="border-right">
|
||||
<%= age_group.gsub("+", t("budgets.stats.more_than")) + t("budgets.stats.years") %>
|
||||
</td>
|
||||
<td class="border-left">
|
||||
<strong>
|
||||
<%
|
||||
percentage_age_count = all_ages_count == 0 ? 0 : (count / all_ages_count * 100)
|
||||
formatted_percentage_age_count = number_to_percentage(percentage_age_count,
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2)
|
||||
%>
|
||||
<%= count %>
|
||||
(<%= formatted_percentage_age_count %>)
|
||||
</strong>
|
||||
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="<%= percentage_age_count %>" aria-valuemax="100">
|
||||
<span class="progress-meter" style="width: <%= number_to_percentage(percentage_age_count*4,
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2, locale: :en) %>;"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="small-12 column">
|
||||
<h2 class="margin-bottom"><%= t("budgets.stats.by_heading") %></h2>
|
||||
|
||||
<table class="stats-districts">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" rowspan="2"><%= t("budgets.stats.heading") %></th>
|
||||
<th scope="col" rowspan="2"><%= t("budgets.stats.investments_sent") %></th>
|
||||
<th scope="col" colspan="3"><%= t("budgets.stats.participants_support_phase") %></th>
|
||||
<th scope="col" colspan="3"><%= t("budgets.stats.participants_voting_phase") %></th>
|
||||
<th scope="col" colspan="3"><%= t("budgets.stats.participants_total") %></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="tiny"><%= t("budgets.stats.total").upcase %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.total").upcase %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.total").upcase %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.total") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.total") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.total") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_total_participants_html") %></th>
|
||||
<th scope="col" class="tiny"><%= t("budgets.stats.percent_heading_census_html") %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @budget.headings.each do |heading| %>
|
||||
<tr id="<%= heading.name.parameterize %>">
|
||||
<td>
|
||||
<td class="border-left">
|
||||
<strong><%= heading.name %></strong>
|
||||
</td>
|
||||
<td id="total_spending_proposals_heading_<%= heading.id %>"
|
||||
class="text-center border-left-success border-right-success success">
|
||||
class="text-center border-left border-right">
|
||||
<%= heading.investments.count %>
|
||||
</td>
|
||||
|
||||
<% ["support", "vote", "all"].each do |phase| %>
|
||||
<td id="total_participants_<%= phase %>_phase_heading_<%= heading.id %>"
|
||||
class="border-left text-center <%= phase == "all" ? "success" : "" %>">
|
||||
class="border-left text-center">
|
||||
<%= @stats[:headings][heading.id]["total_participants_#{phase}_phase".to_sym] %>
|
||||
</td>
|
||||
<td id="percentage_participants_<%= phase %>_phase_heading_<%= heading.id %>"
|
||||
class="border-left border-right text-center <%= phase == "all" ? "success" : "" %>">
|
||||
class="border-left border-right text-center %>">
|
||||
<%= number_to_percentage(@stats[:headings][heading.id]["percentage_participants_#{phase}_phase".to_sym],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>
|
||||
</td>
|
||||
<td id="percentage_district_population_<%= phase %>_phase_heading_<%= heading.id %>"
|
||||
class="text-center <%= phase == "all" ? "success" : "" %>">
|
||||
class="text-center border-right">
|
||||
<%= number_to_percentage(@stats[:headings][heading.id]["percentage_district_population_#{phase}_phase".to_sym],
|
||||
strip_insignificant_zeros: true,
|
||||
precision: 2) %>
|
||||
@@ -256,26 +222,23 @@
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="small-12 column">
|
||||
<p id="total_unknown_gender_or_age">
|
||||
<em>
|
||||
<%= t("budgets.stats.no_demographic_data_html", total: @stats[:total_unknown_gender_or_age]) %>
|
||||
</em>
|
||||
<br>
|
||||
<em>
|
||||
<%= t("budgets.stats.participatory_disclaimer") %>
|
||||
</em>
|
||||
<br>
|
||||
<em>
|
||||
<%= t("budgets.stats.heading_disclaimer") %>
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row margin">
|
||||
<div class="small-12 column">
|
||||
<div id="total_unknown_gender_or_age">
|
||||
<p class="help-text">
|
||||
<%= t("budgets.stats.no_demographic_data", total: @stats[:total_unknown_gender_or_age]) %>
|
||||
</p>
|
||||
<p class="help-text">
|
||||
<%= t("budgets.stats.participatory_disclaimer") %>
|
||||
</p>
|
||||
<p class="help-text">
|
||||
<%= t("budgets.stats.heading_disclaimer") %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
Reference in New Issue
Block a user