Stacked bar charts in the issue details report (#31418).

Patch by Takenori TAKAKI.

git-svn-id: http://svn.redmine.org/redmine/trunk@18200 e93f8b46-1217-0410-a6f0-8f06a7374b81

diff --git a/app/views/reports/_details.html.erb b/app/views/reports/_details.html.erb
index d9d9a3614b877e4ed1f197cdecfa330ca732eca5..98f20dd7c91c0c416981229ff94e6feeafc7c64c 100644 (file)
--- a/app/views/reports/_details.html.erb
+++ b/app/views/reports/_details.html.erb
@@ -25,4 +25,55 @@
 <% end %>
 </tbody>
 </table>
+<div class="issue-report-graph">
+  <canvas id="issues_by_<%= params[:detail] %>"></canvas>
+</div>
+<div class="issue-report-graph">
+  <canvas id="issues_by_status"></canvas>
+</div>
+<%= javascript_tag do %>
+  function renderChart(canvas_id, title, chartData){
+    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)'];
+    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($(canvas_id), {
+      type: 'horizontalBar',
+      data: chartData,
+      options: {
+        elements: {
+          rectangle: {borderWidth: 2}
+        },
+        responsive: true,
+        legend: {position: 'right'},
+        title: {
+          display: true,
+          text: title
+        },
+        scales: {
+          yAxes: [{ stacked: true }],
+          xAxes: [{ stacked: true }]
+        }
+      }
+    });
+  }
+  $(document).ready(function(){
+    var chartData1 = {
+      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 %>
+    };
+    var chartData2 = {
+      labels: <%= raw @statuses.collect{|status| status.name}.to_json %>,
+      datasets: <%= raw rows.collect{|row| {"label" => row.name, "data" => @statuses.collect{|status| aggregate(data, {field_name => row.id, "status_id" => status.id})}}}.to_json %>
+    };
+    renderChart("#issues_by_<%= params[:detail] %>", "<%= l(:label_issues_by, @report_title) %>", chartData1);
+    renderChart("#issues_by_status", "<%= l(:label_issues_by, l(:field_status)) %>", chartData2);
+  });
+<% 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 29750d448efbea8d6150ebf7b8c54343f739523a..5f8aea732cec24b20c9d432b24e590bada9928c1 100644 (file)
--- 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;}
+.issue-report-graph {width: 75%; margin: 2em 0;}
 
 tr.entry { border: 1px solid #f8f8f8; }
 tr.entry td { white-space: nowrap; }