jirametrics 2.27 → 2.29

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c87212eebf4e22145b8e66741174658bffc3cb1e47bd45bfe3f7590586a42200
-  data.tar.gz: 00fb6c4375e7e6858359fa754af42c697028198dedd2ae8100c98d0564f59db8
+  metadata.gz: 2cf59f19d1ee1de238db86ef01bd46d25c5741a6a85789d62f64c310d97055fd
+  data.tar.gz: 31a15ee2f64eef895dbfd95bd14004b70bec1be5810224f95fee39595022b84f
 SHA512:
-  metadata.gz: aad3747a78dcf530df02244720c676632816a30688045d95c9a701ba946a5573f81a2e3955c5035e745fb197f5c6cff58491a63d35db68b3abf35817c78dc0b8
-  data.tar.gz: fcf17a8c2a4c91e4de45ff15150d1de9147c890d9e80354b490bec2b27fb17ef2b20e7bc6073c503e88fd0ad188c414002d8312500b22dd5207b043d3c253be7
+  metadata.gz: 812c19230db1c44dc41e3b99f32d6d65235de7e620d4faedb4b51ac41c4da220795013b1b80c058f0f85ef6ab6fab6146ad5ed7cb2c48abe6ccddaed92002968
+  data.tar.gz: 1895fc706f93d0ad4cc60a83fb1bc82fa416f389b3b620ca01f9fefb774e11a5f9c1f96d8f9b00a0b2cdd82ca5443a7dd21c4f069fdb45988a5de4669cebf7ae

data/bin/jirametrics-mcp

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'jirametrics'
+JiraMetrics.start(['mcp'] + ARGV)

data/lib/jirametrics/aging_work_in_progress_chart.rb

@@ -6,6 +6,7 @@ require 'jirametrics/board_movement_calculator'
 
 class AgingWorkInProgressChart < ChartBase
   include GroupableIssueChart
+
   attr_accessor :possible_statuses, :board_id
   attr_reader :board_columns
 
@@ -55,7 +56,7 @@ class AgingWorkInProgressChart < ChartBase
   def run
     determine_board_columns
 
-    @header_text += " on board: #{@all_boards[@board_id].name}"
+    @header_text += " on board: #{current_board.name}"
     data_sets = make_data_sets
 
     adjust_visibility_of_unmapped_status_column data_sets: data_sets
@@ -76,7 +77,7 @@ class AgingWorkInProgressChart < ChartBase
 
     @fake_column = BoardColumn.new({
       'name' => '[Unmapped Statuses]',
-      'statuses' => unmapped_statuses.collect { |id| { 'id' => id.to_s } }.uniq # rubocop:disable Performance/ChainArrayAllocation
+      'statuses' => unmapped_statuses.collect { |id| { 'id' => id.to_s } }.uniq
     })
     @board_columns = columns + [@fake_column]
   end
@@ -114,14 +115,7 @@ class AgingWorkInProgressChart < ChartBase
 
     calculator = BoardMovementCalculator.new board: @all_boards[@board_id], issues: issues, today: date_range.end
 
-    column_indexes_to_remove = []
-    unless @show_all_columns
-      column_indexes_to_remove = indexes_of_leading_and_trailing_zeros(calculator.age_data_for(percentage: 100))
-
-      column_indexes_to_remove.reverse_each do |index|
-        @board_columns.delete_at index
-      end
-    end
+    column_indexes_to_remove = trim_board_columns data_sets: data_sets, calculator: calculator
 
     @row_index_offset = data_sets.size
 
@@ -177,6 +171,44 @@ class AgingWorkInProgressChart < ChartBase
     result
   end
 
+  def trim_board_columns data_sets:, calculator:
+    return [] if @show_all_columns
+
+    columns_with_aging_items = data_sets.flat_map do |set|
+      set['data'].filter_map { |d| d['x'] if d.is_a? Hash }
+    end.uniq
+
+    # @fake_column is always the last element and is handled separately.
+    real_column_count = @board_columns.size - 1
+
+    # The last visible column always has artificially inflated age_data because
+    # ages_of_issues_when_leaving_column uses `today` as end_date when there is no
+    # next column. Exclude it from the right-boundary search so it is only kept when
+    # it has current aging items (handled by the last_aging fallback below).
+    age_data = calculator.age_data_for(percentage: 100)
+    last_data = (0...(real_column_count - 1)).to_a.reverse.find { |i| !age_data[i].zero? }
+
+    in_current = ->(i) { columns_with_aging_items.include?(@board_columns[i].name) }
+    first_aging = (0...real_column_count).find(&in_current)
+    last_aging  = (0...real_column_count).to_a.reverse.find(&in_current)
+
+    # Combine: include any column with age_data (up to but not including the last visible
+    # column) and any column with current aging items.
+    first_data = (0...real_column_count).find { |i| !age_data[i].zero? }
+    left_bound  = [first_data, first_aging].compact.min
+    right_bound = [last_data, last_aging].compact.max
+
+    indexes_to_remove =
+      if left_bound && right_bound
+        (0...left_bound).to_a + ((right_bound + 1)...real_column_count).to_a
+      else
+        (0...real_column_count).to_a
+      end
+
+    indexes_to_remove.reverse_each { |index| @board_columns.delete_at index }
+    indexes_to_remove
+  end
+
   def column_for issue:
     @board_columns.find do |board_column|
       board_column.status_ids.include? issue.status.id
@@ -192,7 +224,7 @@ class AgingWorkInProgressChart < ChartBase
       end
     end
 
-    if has_unmapped
+    if has_unmapped && @description_text
       @description_text += "<p>The items shown in #{column_name.inspect} are not visible on the " \
         'board but are still active. Most likely everyone has forgotten about them.</p>'
     else

data/lib/jirametrics/aging_work_table.rb

@@ -45,7 +45,9 @@ class AgingWorkTable < ChartBase
   # This is its own method simply so the tests can initialize the calculator without doing a full run.
   def initialize_calculator
     @today = date_range.end
-    @calculator = BoardMovementCalculator.new board: current_board, issues: issues, today: @today
+    @calculators = @all_boards.transform_values do |board|
+      BoardMovementCalculator.new board: board, issues: issues, today: @today
+    end
   end
 
   def expedited_but_not_started
@@ -123,7 +125,8 @@ class AgingWorkTable < ChartBase
     due = issue.due_date
     message = nil
 
-    days_remaining, error = @calculator.forecasted_days_remaining_and_message issue: issue, today: @today
+    calculator = @calculators[issue.board.id]
+    days_remaining, error = calculator.forecasted_days_remaining_and_message issue: issue, today: @today
 
     unless error
       if due

data/lib/jirametrics/board.rb

@@ -72,7 +72,7 @@ class Board
     return true if board_type == 'scrum'
     return false unless board_type == 'simple'
 
-    @features.any? { |f| f.name == 'jsw.agility.sprints' && f.enabled? }
+    has_sprints_feature?
   end
 
   def kanban?
@@ -82,6 +82,14 @@ class Board
     !scrum?
   end
 
+  def team_managed_kanban?
+    board_type == 'simple' && !has_sprints_feature?
+  end
+
+  def has_sprints_feature?
+    @features.any? { |f| f.name == 'jsw.agility.sprints' && f.enabled? }
+  end
+
   def id
     @raw['id'].to_i
   end

data/lib/jirametrics/cumulative_flow_diagram.rb

@@ -70,7 +70,7 @@ class CumulativeFlowDiagram < ChartBase
         CT and TP cannot be calculated and are hidden; only WIP is shown.
       </div>
       <div class="p">
-        See also: This article on [how to read a CFD](https://blog.mikebowler.ca/2026/03/27/cumulative-flow-diagram/).
+        See also: This article on <a href="https://blog.mikebowler.ca/2026/03/27/cumulative-flow-diagram/">how to read a CFD</a>.
       </div>      
     HTML
     instance_eval(&block)

data/lib/jirametrics/daily_view.rb

@@ -87,13 +87,14 @@ class DailyView < ChartBase
       lines << ["#{marker} Blocked by flag"] if blocked_stalled.flag
       lines << ["#{marker} Blocked by status: #{blocked_stalled.status}"] if blocked_stalled.blocked_by_status?
       blocked_stalled.blocking_issue_keys&.each do |key|
-        blocking_issue = issues.find { |i| i.key == key }
+        blocking_issue = issues.find_by_key key: key, include_hidden: true
         if blocking_issue
-          lines << "<section><div class=\"foldable startFolded\">#{marker} Blocked by issue: #{key}</div>"
+          lines << "<section><div class=\"foldable startFolded\">#{marker} Blocked by issue: " \
+            "#{make_issue_label issue: blocking_issue, done: blocking_issue.done?}</div>"
           lines << blocking_issue
           lines << '</section>'
         else
-          lines << ["#{marker} Blocked by issue: #{key}"]
+          lines << ["#{marker} Blocked by issue: #{key} (no description found)"]
         end
       end
     elsif blocked_stalled.stalled_by_status?

data/lib/jirametrics/downloader_for_cloud.rb

@@ -108,11 +108,24 @@ class DownloaderForCloud < Downloader
       }
       issue = Issue.new(raw: issue_json, board: board)
       data = issue_datas.find { |d| d.key == issue.key }
+      unless data
+        log "  Skipping #{issue.key}: returned by Jira but key not in request (issue may have been moved)"
+        next
+      end
       data.up_to_date = true
       data.last_modified = issue.updated
       data.issue = issue
     end
 
+    # Mark any unmatched requests as up_to_date to prevent infinite re-fetching.
+    # This happens when Jira returns a different key (moved issue) leaving the original unmatched.
+    issue_datas.each do |data|
+      next if data.up_to_date
+
+      log "  Skipping #{data.key}: not returned by Jira (issue may have been deleted or moved)"
+      data.up_to_date = true
+    end
+
     issue_datas
   end
 
@@ -168,15 +181,20 @@ class DownloaderForCloud < Downloader
 
     issue_data_hash = search_for_issues jql: jql, board_id: board.id, path: path
 
+    checked_for_related = Set.new
+    in_related_phase = false
+
     loop do
       related_issue_keys = Set.new
       stale = issue_data_hash.values.reject { |data| data.up_to_date }
       unless stale.empty?
-        log_start '  Downloading more issues '
+        log_start '  Downloading more issues ' unless in_related_phase
         stale.each_slice(100) do |slice|
           slice = bulk_fetch_issues(issue_datas: slice, board: board, in_initial_query: true)
           progress_dot
           slice.each do |data|
+            next unless data.issue
+
             @file_system.save_json(
               json: data.issue.raw, filename: data.cache_path
             )
@@ -184,22 +202,25 @@ class DownloaderForCloud < Downloader
             # to parse the file just to find the timestamp
             @file_system.utime time: data.issue.updated, file: data.cache_path
 
-            issue = data.issue
-            next unless issue
-
-            parent_key = issue.parent_key(project_config: @download_config.project_config)
-            related_issue_keys << parent_key if parent_key
-
-            # Sub-tasks
-            issue.raw['fields']['subtasks']&.each do |raw_subtask|
-              related_issue_keys << raw_subtask['key']
-            end
+            collect_related_issue_keys issue: data.issue, related_issue_keys: related_issue_keys
+            checked_for_related << data.key
           end
         end
-        end_progress
+        end_progress unless in_related_phase
       end
 
-      # Remove all the ones we already downloaded
+      # Also scan up-to-date cached issues we haven't checked yet — they may reference
+      # related issues that are not in the primary query result.
+      issue_data_hash.each_value do |data|
+        next if checked_for_related.include?(data.key)
+        next unless @file_system.file_exist?(data.cache_path)
+
+        checked_for_related << data.key
+        raw = @file_system.load_json(data.cache_path)
+        collect_related_issue_keys issue: Issue.new(raw: raw, board: board), related_issue_keys: related_issue_keys
+      end
+
+      # Remove all the ones we already have
       related_issue_keys.reject! { |key| issue_data_hash[key] }
 
       related_issue_keys.each do |key|
@@ -211,9 +232,15 @@ class DownloaderForCloud < Downloader
       end
       break if related_issue_keys.empty?
 
-      log "  Downloading linked issues for board #{board.id}", both: true
+      unless in_related_phase
+        in_related_phase = true
+        log "  Identifying related issues (parents, subtasks, links) for board #{board.id}", both: true
+        log_start '  Downloading more issues '
+      end
     end
 
+    end_progress if in_related_phase
+
     delete_issues_from_cache_that_are_not_in_server(
       issue_data_hash: issue_data_hash, path: path
     )
@@ -238,6 +265,22 @@ class DownloaderForCloud < Downloader
     end
   end
 
+  def collect_related_issue_keys issue:, related_issue_keys:
+    parent_key = issue.parent_key(project_config: @download_config.project_config)
+    related_issue_keys << parent_key if parent_key
+
+    issue.raw['fields']['subtasks']&.each do |raw_subtask|
+      related_issue_keys << raw_subtask['key']
+    end
+
+    issue.raw['fields']['issuelinks']&.each do |link|
+      next if link['type']['name'] == 'Cloners'
+
+      linked = link['inwardIssue'] || link['outwardIssue']
+      related_issue_keys << linked['key'] if linked
+    end
+  end
+
   def last_modified filename:
     File.mtime(filename) if File.exist?(filename)
   end

data/lib/jirametrics/examples/standard_project.rb

@@ -9,7 +9,7 @@ class Exporter
       show_experimental_charts: false, github_repos: nil
     exporter = self
     project name: name do
-      file_system.log name
+      file_system.log name, also_write_to_stderr: true
       file_prefix file_prefix
 
       self.anonymize if anonymize
@@ -82,6 +82,9 @@ class Exporter
           end
 
           aging_work_in_progress_chart
+          wip_by_column_chart do
+            show_recommendations
+          end
           aging_work_bar_chart
           aging_work_table
           daily_wip_by_age_chart

data/lib/jirametrics/html/index.css

@@ -50,6 +50,11 @@
   --wip-chart-active-color: #326cff;
   --wip-chart-border-color: gray;
 
+  --wip-by-column-chart-bar-fill-color: #0072B2;          /* Okabe-Ito blue */
+  --wip-by-column-chart-bar-text-color: #ffffff;
+  --wip-by-column-chart-limit-line-color: #D55E00;        /* Okabe-Ito vermilion */
+  --wip-by-column-chart-recommendation-color: #009E73;    /* Okabe-Ito bluish green */
+
   --estimate-accuracy-chart-completed-fill-color: #00ff00;
   --estimate-accuracy-chart-completed-border-color: green;
   --estimate-accuracy-chart-active-fill-color: #FFCCCB;
@@ -233,6 +238,10 @@ html[data-theme="dark"] {
   --wip-chart-active-color: #2551c1;
   --status-category-inprogress-color: #1c49bb;
   --hierarchy-table-inactive-item-text-color: #939393;
+  --wip-by-column-chart-bar-fill-color: #56B4E9;          /* Okabe-Ito sky blue */
+  --wip-by-column-chart-bar-text-color: #000000;
+  --wip-by-column-chart-limit-line-color: #E69F00;        /* Okabe-Ito orange */
+  --wip-by-column-chart-recommendation-color: #2DCB9A;    /* lighter bluish green for dark bg */
   --wip-chart-completed-color: #03cb03;
   --wip-chart-duration-less-than-day-color: #d2d988;
   --wip-chart-duration-week-or-less-color: #dfcd00;
@@ -274,6 +283,10 @@ html[data-theme="light"] {
   --wip-chart-active-color: #326cff;
   --status-category-inprogress-color: #2663ff;
   --hierarchy-table-inactive-item-text-color: gray;
+  --wip-by-column-chart-bar-fill-color: #0072B2;
+  --wip-by-column-chart-bar-text-color: #ffffff;
+  --wip-by-column-chart-limit-line-color: #D55E00;
+  --wip-by-column-chart-recommendation-color: #009E73;
   --wip-chart-completed-color: #00ff00;
   --wip-chart-duration-less-than-day-color: #ffef41;
   --wip-chart-duration-week-or-less-color: #dcc900;
@@ -352,6 +365,11 @@ html[data-theme="light"] {
 
     --status-category-inprogress-color: #1c49bb;
 
+    --wip-by-column-chart-bar-fill-color: #56B4E9;
+    --wip-by-column-chart-bar-text-color: #000000;
+    --wip-by-column-chart-limit-line-color: #E69F00;
+    --wip-by-column-chart-recommendation-color: #2DCB9A;
+
     --cycletime-scatterplot-overall-trendline-color: gray;
 
     --hierarchy-table-inactive-item-text-color: #939393;

data/lib/jirametrics/html/index.js

@@ -35,7 +35,7 @@ function makeFoldable() {
     const toggleButton = document.createElement(element.tagName); //'button');
     toggleButton.id = toggleId;
     toggleButton.className = 'foldable-toggle-btn';
-    toggleButton.innerHTML = '▼ ' + element.textContent;
+    toggleButton.innerHTML = '▼ ' + element.innerHTML;
     
     // Create a content container
     const contentContainer = document.createElement('div');

data/lib/jirametrics/html/wip_by_column_chart.erb

@@ -0,0 +1,250 @@
+<%= seam_start %>
+<div class="chart" style="position:relative;">
+  <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
+  <div id="<%= chart_id %>-tooltip" style="
+    display:none; position:absolute; pointer-events:none;
+    background:rgba(0,0,0,0.75); color:#fff; border-radius:4px;
+    padding:4px 8px; font:12px sans-serif; white-space:nowrap;
+  "></div>
+</div>
+<script>
+(function() {
+  var wipData         = <%= @wip_data.to_json %>;
+  var wipLimits       = <%= @wip_limits.to_json %>;
+  var recommendations = <%= @recommendations.to_json %>;
+  var maxWip          = <%= @max_wip %>;
+  var gridColor       = <%= CssVariable['--grid-line-color'].to_json %>;
+  var barFillColor    = <%= CssVariable['--wip-by-column-chart-bar-fill-color'].to_json %>;
+  var barTextColor    = <%= CssVariable['--wip-by-column-chart-bar-text-color'].to_json %>;
+  var limitColor      = <%= CssVariable['--wip-by-column-chart-limit-line-color'].to_json %>;
+  var recColor        = <%= CssVariable['--wip-by-column-chart-recommendation-color'].to_json %>;
+  var tooltipEl       = document.getElementById(<%= "#{chart_id}-tooltip".inspect %>);
+
+  var hitAreas = [];
+
+  var rectPlugin = {
+    id: 'wipRects',
+    afterDraw: function(chart) {
+      var ctx    = chart.ctx;
+      var xScale = chart.scales['x'];
+      var yScale = chart.scales['y'];
+      var slotWidth = xScale.width / Math.max(xScale.ticks.length, 1);
+
+      hitAreas = [];
+
+      // 1. Draw y-axis gridlines at integer band boundaries
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(xScale.left, yScale.top, xScale.right - xScale.left, yScale.bottom - yScale.top);
+      ctx.clip();
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth   = 1;
+      ctx.setLineDash([]);
+      for (var gi = 0; gi <= maxWip + 1; gi++) {
+        var gy = yScale.getPixelForValue(gi);
+        ctx.beginPath();
+        ctx.moveTo(xScale.left, gy);
+        ctx.lineTo(xScale.right, gy);
+        ctx.stroke();
+      }
+      ctx.restore();
+
+      // 2. Draw WIP limit lines (behind rectangles)
+      wipLimits.forEach(function(limits, colIndex) {
+        var xCenter  = xScale.getPixelForValue(colIndex);
+        var halfSlot = slotWidth * 0.45;
+
+        [['min', 'bottom'], ['max', 'top']].forEach(function(pair) {
+          var type     = pair[0];
+          var baseline = pair[1];
+          var val      = limits[type];
+          if (val === null || val === undefined) return;
+
+          var y = yScale.getPixelForValue(val + 0.5);
+
+          ctx.save();
+          ctx.strokeStyle = limitColor;
+          ctx.lineWidth   = 2;
+          ctx.setLineDash([5, 3]);
+          ctx.beginPath();
+          ctx.moveTo(xCenter - halfSlot, y);
+          ctx.lineTo(xCenter + halfSlot, y);
+          ctx.stroke();
+          ctx.restore();
+
+          ctx.save();
+          ctx.fillStyle    = limitColor;
+          ctx.font         = 'bold 10px sans-serif';
+          ctx.textAlign    = 'right';
+          ctx.textBaseline = baseline;
+          ctx.fillText(type + ': ' + val, xCenter + halfSlot, baseline === 'bottom' ? y - 2 : y + 2);
+          ctx.restore();
+        });
+      });
+
+      <% if @show_recommendations %>
+      // 3. Draw recommendation lines (behind rectangles, label on left)
+      recommendations.forEach(function(rec, colIndex) {
+        if (rec === null || rec === undefined || rec === 0) return;
+        var xCenter  = xScale.getPixelForValue(colIndex);
+        var halfSlot = slotWidth * 0.45;
+        var y = yScale.getPixelForValue(rec + 0.5);
+
+        ctx.save();
+        ctx.strokeStyle = recColor;
+        ctx.lineWidth   = 2;
+        ctx.setLineDash([5, 3]);
+        ctx.beginPath();
+        ctx.moveTo(xCenter - halfSlot, y);
+        ctx.lineTo(xCenter + halfSlot, y);
+        ctx.stroke();
+        ctx.restore();
+
+        ctx.save();
+        ctx.fillStyle    = recColor;
+        ctx.font         = 'bold 10px sans-serif';
+        ctx.textAlign    = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText('rec: ' + rec, xCenter - halfSlot, y + 2);
+        ctx.restore();
+      });
+      <% end %>
+
+      // 4. Draw WIP rectangles centered in their bands (wip + 0.5)
+      var yStep = Math.abs(yScale.getPixelForValue(0.5) - yScale.getPixelForValue(1.5));
+
+      wipData.forEach(function(colData, colIndex) {
+        var xCenter = xScale.getPixelForValue(colIndex);
+
+        colData.forEach(function(entry) {
+          var wip       = entry['wip'];
+          var pct       = entry['pct'];
+          var rectWidth  = slotWidth * pct / 100;
+          var rectHeight = yStep * 0.8;
+          var yCenter   = yScale.getPixelForValue(wip + 0.5);
+          var x1 = xCenter - rectWidth / 2;
+          var y1 = yCenter - rectHeight / 2;
+
+          ctx.save();
+          ctx.fillStyle   = barFillColor;
+          ctx.strokeStyle = barFillColor;
+          ctx.lineWidth   = 1;
+          ctx.fillRect(x1, y1, rectWidth, rectHeight);
+          ctx.strokeRect(x1, y1, rectWidth, rectHeight);
+
+          ctx.fillStyle    = barTextColor;
+          ctx.font         = '11px sans-serif';
+          ctx.textAlign    = 'center';
+          ctx.textBaseline = 'middle';
+          if (rectWidth > 25) {
+            ctx.fillText(pct + '%', xCenter, yCenter);
+          }
+          ctx.restore();
+
+          var hitWidth = Math.max(rectWidth, slotWidth);
+          hitAreas.push({
+            x1: xCenter - hitWidth / 2, y1: y1,
+            x2: xCenter + hitWidth / 2, y2: y1 + rectHeight,
+            label: 'WIP ' + wip + ': ' + pct + '%'
+          });
+        });
+      });
+    }
+  };
+
+  var canvas = document.getElementById(<%= chart_id.inspect %>);
+
+  canvas.addEventListener('mousemove', function(e) {
+    var rect = canvas.getBoundingClientRect();
+    var mx = e.clientX - rect.left;
+    var my = e.clientY - rect.top;
+
+    var hit = null;
+    for (var i = 0; i < hitAreas.length; i++) {
+      var a = hitAreas[i];
+      if (mx >= a.x1 && mx <= a.x2 && my >= a.y1 && my <= a.y2) {
+        hit = a;
+        break;
+      }
+    }
+
+    if (hit) {
+      tooltipEl.textContent = hit.label;
+      tooltipEl.style.display = 'block';
+      tooltipEl.style.left = (mx + 10) + 'px';
+      tooltipEl.style.top  = (my - 20) + 'px';
+    } else {
+      tooltipEl.style.display = 'none';
+    }
+  });
+
+  canvas.addEventListener('mouseleave', function() {
+    tooltipEl.style.display = 'none';
+  });
+
+  new Chart(canvas.getContext('2d'),
+  {
+    type: 'bar',
+    plugins: [rectPlugin],
+    data: {
+      labels: <%= @column_names.to_json %>,
+      datasets: [{
+        data: [],
+        backgroundColor: 'transparent'
+      }]
+    },
+    options: {
+      responsive: <%= canvas_responsive? %>,
+      scales: {
+        x: {
+          grid: {
+            color: gridColor,
+            z: 1
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'WIP'
+          },
+          grid: {
+            display: false
+          },
+          min: 0,
+          max: <%= @max_wip + 1 %>,
+          afterBuildTicks: function(scale) {
+            scale.ticks = [];
+            for (var i = 0; i <= maxWip; i++) {
+              scale.ticks.push({ value: i + 0.5 });
+            }
+          },
+          ticks: {
+            callback: function(value) {
+              return Math.round(value - 0.5);
+            }
+          }
+        }
+      },
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false
+        }
+      }
+    }
+  });
+})();
+</script>
+<%= seam_end %>
+<% unless @recommendation_texts.empty? %>
+<div style="margin-top: 0.5em;">
+  <strong>WIP limit recommendations</strong>
+  <ul style="margin: 0.3em 0 0 0; padding-left: 1.5em;">
+    <% @recommendation_texts.each do |text| %>
+      <li><%= text %></li>
+    <% end %>
+  </ul>
+</div>
+<% end %>