<div class="chart">
  <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
</div>
<script>
new Chart(document.getElementById(<%= chart_id.inspect %>).getContext('2d'),
{
  type: 'bar',
  data: {
    labels: [<%= @board_columns.collect { |c| c.name.inspect }.join(',') %>],
    datasets: <%= JSON.generate(data_sets) %>
  },
  options: {
    title: {
      display: true,
      text:    "Aging work in progress"
    },
    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
    scales: {
      x: {
        scaleLabel: {
          display: true,
          labelString: 'Date Completed'
        },
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>,
          z: 1 // draw the grid lines on top of the bars
        },
        stacked: true
      },
      y: {
        scaleLabel: {
          display: true,
          labelString: 'Days'
        },
        title: {
          display: true,
          text: 'Age in days'
        },
        grid: {
          color: <%= CssVariable['--grid-line-color'].to_json %>,
          z: 1 // draw the grid lines on top of the bars
        },
        stacked: false,
        max: <%= (@max_age * 1.1).to_i %>
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            if( typeof(context.dataset.data[context.dataIndex]) == "number" ) {
              let full_data = <%= @bar_data.inspect %>;
              let columnIndex = context.dataIndex;
              let rowIndex = context.datasetIndex - <%= @row_index_offset %>;
              return context.dataset.label + " of completed work items left this column in " +full_data[rowIndex][columnIndex] + " days or less";
            }
            else {
              return context.dataset.data[context.dataIndex].title;
            }
          }
        }
      },
      legend: {
        labels: {
          filter: function(item, chart) {
            // Logic to remove a particular legend item goes here
            return !item.text.includes('%');
          }
        }
      }

    }
  }
});
</script>
