diff --git a/app/views/reports/_details.html.erb b/app/views/reports/_details.html.erb index d9d9a3614..ede9dcb4b 100644 --- a/app/views/reports/_details.html.erb +++ b/app/views/reports/_details.html.erb @@ -25,4 +25,40 @@ <% end %> +
+ +
+<%= javascript_tag do %> + $(document).ready(function(){ + var backgroundColors = ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)']; + var borderColors = ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)']; + var chartData = { + labels: <%= raw rows.collect{|row| row.name}.to_json %>, + datasets: <%= raw @statuses.collect{|status| {"label" => status.name, "data" => rows.collect{|row| aggregate(data, {field_name => row.id, "status_id" => status.id})}}}.to_json %> + }; + for (var i = 0; i < chartData.datasets.length; i++) { + chartData.datasets[i].backgroundColor = backgroundColors[i % backgroundColors.length]; + chartData.datasets[i].borderColor = borderColors[i % borderColors.length]; + chartData.datasets[i].borderWidth = 1; + } + new Chart($('#issues_per_status'), { + type: 'horizontalBar', + data: chartData, + options: { + elements: { + rectangle: {borderWidth: 2} + }, + responsive: true, + legend: {position: 'right'}, + scales: { + yAxes: [{ stacked: true }], + xAxes: [{ stacked: true }] + } + } + }); + }); +<% end %> +<% content_for :header_tags do %> + <%= javascript_include_tag "Chart.bundle.min" %> +<% end %> <% end %> diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 03fd81441..89b4c9653 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -277,6 +277,7 @@ tr.issue.idnt-8 td.subject {padding-left: 136px; background-position: 120px 50%; tr.issue.idnt-9 td.subject {padding-left: 152px; background-position: 136px 50%;} table.issue-report {table-layout:fixed;} +.report-bar-graph {width:75%; margin-bottom:2em;} tr.entry { border: 1px solid #f8f8f8; } tr.entry td { white-space: nowrap; }