render-reports-details-in-bar-chart_v2.patch

Takenori TAKAKI, 2019-05-24 09:46

Download (3.02 KB)

View differences:

app/views/reports/_details.html.erb
25 25
<% end %>
26 26
</tbody>
27 27
</table>
28
<div class="issue-report-graph">
29
  <canvas id="issues_by_<%= params[:detail] %>"></canvas>
30
  <canvas id="issues_by_status"></canvas>
31
</div>
32
<%= javascript_tag do %>
33
  function renderChart(canvas_id, title, chartData){
34
    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)'];
35
    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)'];
36
    for (var i = 0; i < chartData.datasets.length; i++) {
37
      chartData.datasets[i].backgroundColor = backgroundColors[i % backgroundColors.length];
38
      chartData.datasets[i].borderColor = borderColors[i % borderColors.length];
39
      chartData.datasets[i].borderWidth = 1;
40
    }
41
    new Chart($(canvas_id), {
42
      type: 'horizontalBar',
43
      data: chartData,
44
      options: {
45
        elements: {
46
          rectangle: {borderWidth: 2}
47
        },
48
        responsive: true,
49
        legend: {position: 'right'},
50
        title: {
51
          display: true,
52
          text: title
53
        },
54
        scales: {
55
          yAxes: [{ stacked: true }],
56
          xAxes: [{ stacked: true }]
57
        }
58
      }
59
    });
60
  }
61
  $(document).ready(function(){
62
    var chartData1 = {
63
      labels: <%= raw rows.collect{|row| row.name}.to_json %>,
64
      datasets: <%= raw @statuses.collect{|status| {"label" => status.name, "data" => rows.collect{|row| aggregate(data, {field_name => row.id, "status_id" => status.id})}}}.to_json %>
65
    };
66
    var chartData2 = {
67
      labels: <%= raw @statuses.collect{|status| status.name}.to_json %>,
68
      datasets: <%= raw rows.collect{|row| {"label" => row.name, "data" => @statuses.collect{|status| aggregate(data, {field_name => row.id, "status_id" => status.id})}}}.to_json %>
69
    };
70
    renderChart("#issues_by_<%= params[:detail] %>", "<%= l(:label_issues_by, @report_title) %>", chartData1);
71
    renderChart("#issues_by_status", "<%= l(:label_issues_by, l(:field_status)) %>", chartData2);
72
  });
73
<% end %>
74
<% content_for :header_tags do %>
75
  <%= javascript_include_tag "Chart.bundle.min" %>
76
<% end %>
28 77
<% end %>
public/stylesheets/application.css
277 277
tr.issue.idnt-9 td.subject {padding-left: 152px; background-position: 136px 50%;}
278 278

  
279 279
table.issue-report {table-layout:fixed;}
280
.issue-report-graph {width:75%; margin-bottom:2em;}
280 281

  
281 282
tr.entry { border: 1px solid #f8f8f8; }
282 283
tr.entry td { white-space: nowrap; }