<h2>Burndown by <%= y_axis_title %></h2>

<div class="chart">
  <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
</div>
<script>
new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
  type: 'scatter',
  data: {
    datasets: <%= JSON.generate(data_sets) %>
  },
  options: {
    title: {
      display: true,
      text: "Sprint Burndown"
    },
    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
    scales: {
      x: {
        type: "time",
        time: {
            format: 'YYYY-MM-DD'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        },
        min: "<%= date_range.begin.to_s %>",
        max: "<%= (date_range.end + 1).to_s %>",
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      },
      y: {
        scaleLabel: {
          display: true,
          labelString: 'Items remaining'
        },
        title: {
          display: true,
          text: "<%= y_axis_title %>"
        },
        min: 0.0,
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>
        },
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.dataset.data[context.dataIndex].title
          }
        }
      },
      annotation: {
        annotations: {
          <%= working_days_annotation %>
        }
      }
    }
  }
});
</script>

<%
  link_id = next_id
  issues_id = next_id
%>
<section>
<div class='foldable startFolded'>Show statistics</div>
<div id="<%= issues_id %>">
<table class='standard' style="margin-left: 1em;">
  <thead>
    <th>Sprint</th>
    <th>State</th>
    <th>Started</th>
    <th>Completed</th>
    <th>Added</th>
    <th>Removed</th>
    <th>Remaining</th>
    <th>Note</th>
  </thead>
  <tbody>
    <% @summary_stats.keys.sort_by(&:start_time).each do |sprint| %>
      <tr>
        <td><%= sprint.name %></td>
        <td><%= sprint.raw['state'] %></td>
        <% stats = @summary_stats[sprint] %>
        <td><%= stats.started %></td>
        <td><%= stats.completed %></td>
        <td><%= stats.added %></td>
        <td><%= stats.removed %></td>
        <td><%= stats.remaining %></td>
        <td>
          <% if stats.points_values_changed %>
            Points values changed mid-sprint. Numbers may not add up
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<p>Legend:
  <ul>
    <% legend.each do |line| %>
      <li><%= line %></li>
    <% end %>
  </ul>
</p>
</div>
</section>