jirametrics 2.11 → 2.30

data/lib/jirametrics/html/{cycletime_scatterplot.erb → time_based_scatterplot.erb}

@@ -1,3 +1,4 @@
+<%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
@@ -10,36 +11,37 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   options: {
     title: {
       display: true,
-      text: "Cycletime Scatterplot"
+      text: "<%= @header_text %>"
     },
     responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
     scales: {
       x: {
         type: "time",
         scaleLabel: {
-          display: true,
-          labelString: 'Date Completed'
+          display: true
         },
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
+        <%= render_axis_title :x %>
         min: "<%= date_range.begin.to_s %>",
         max: "<%= (date_range.end + 1).to_s %>"
       },
       y: {
+        min: 0,
+        max: <%= (@highest_y_value * 1.1).ceil %>,
         scaleLabel: {
-          display: true,
-          labelString: 'Days',
-          min: 0,
-          max: <%= @highest_cycletime %>
-        },
-        title: {
-          display: true,
-          text: 'Cycle time in days'
+          display: true
         },
+        <%= render_axis_title :y %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
+        ticks: {
+          callback: function(value, index, ticks) {
+            return index === ticks.length - 1 ? null : value;
+          }
+        }
       }
     },
     plugins: {
@@ -54,6 +56,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
       annotation: {
         annotations: {
           <%= working_days_annotation %>
+          <%= date_annotation %>
 
           <% @percentage_lines.each_with_index do |args, index| %>
           <%   percent, color = args %>
@@ -98,3 +101,4 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   }
 });
 </script>
+<%= seam_end %>

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 %>

data/lib/jirametrics/html_generator.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class HtmlGenerator
+  attr_accessor :file_system, :settings
+
+  def create_html output_filename:, settings:, project_name: ''
+    @settings = settings
+    project_name = project_name.to_s
+    html_directory = "#{Pathname.new(File.realpath(__FILE__)).dirname}/html"
+    css = load_css html_directory: html_directory
+    javascript = file_system.load(File.join(html_directory, 'index.js'))
+    erb = ERB.new file_system.load(File.join(html_directory, 'index.erb'))
+    file_system.save_file content: erb.result(binding), filename: output_filename
+  end
+
+  def load_css html_directory:
+    base_css_filename = File.join(html_directory, 'index.css')
+    base_css = file_system.load(base_css_filename)
+
+    extra_css_filename = settings['include_css']
+    if extra_css_filename
+      if File.exist?(extra_css_filename)
+        base_css << "\n\n" << file_system.load(extra_css_filename)
+        log("Loaded CSS:  #{extra_css_filename}")
+      else
+        log("Unable to find specified CSS file: #{extra_css_filename}")
+      end
+    end
+
+    base_css
+  end
+end

data/lib/jirametrics/html_report_config.rb

@@ -3,7 +3,7 @@
 require 'erb'
 require 'jirametrics/self_or_issue_dispatcher'
 
-class HtmlReportConfig
+class HtmlReportConfig < HtmlGenerator
   include SelfOrIssueDispatcher
 
   attr_reader :file_config, :sections, :charts
@@ -20,37 +20,66 @@ class HtmlReportConfig
     module_eval lines.join("\n"), __FILE__, __LINE__
   end
 
-  define_chart name: 'aging_work_bar_chart', classname: 'AgingWorkBarChart'
-  define_chart name: 'aging_work_table', classname: 'AgingWorkTable'
-  define_chart name: 'cycletime_scatterplot', classname: 'CycletimeScatterplot'
-  define_chart name: 'daily_wip_chart', classname: 'DailyWipChart'
-  define_chart name: 'daily_wip_by_age_chart', classname: 'DailyWipByAgeChart'
-  define_chart name: 'daily_wip_by_blocked_stalled_chart', classname: 'DailyWipByBlockedStalledChart'
-  define_chart name: 'daily_wip_by_parent_chart', classname: 'DailyWipByParentChart'
-  define_chart name: 'throughput_chart', classname: 'ThroughputChart'
-  define_chart name: 'expedited_chart', classname: 'ExpeditedChart'
-  define_chart name: 'cycletime_histogram', classname: 'CycletimeHistogram'
-  define_chart name: 'estimate_accuracy_chart', classname: 'EstimateAccuracyChart'
-  define_chart name: 'hierarchy_table', classname: 'HierarchyTable'
-  define_chart name: 'flow_efficiency_scatterplot', classname: 'FlowEfficiencyScatterplot'
-
   define_chart name: 'daily_wip_by_type', classname: 'DailyWipChart',
     deprecated_warning: 'This is the same as daily_wip_chart. Please use that one', deprecated_date: '2024-05-23'
   define_chart name: 'story_point_accuracy_chart', classname: 'EstimateAccuracyChart',
     deprecated_warning: 'Renamed to estimate_accuracy_chart. Please use that one', deprecated_date: '2024-05-23'
 
   def initialize file_config:, block:
+    super()
     @file_config = file_config
     @block = block
     @sections = [] # Where we store the chunks of text that will be assembled into the HTML
     @charts = [] # Where we store all the charts we executed so we can assert against them.
   end
 
+  def method_missing name, *_args, board_id: nil, **_kwargs, &block
+    class_name = name.to_s.split('_').map(&:capitalize).join
+    klass = resolve_chart_class(class_name)
+    return super if klass.nil?
+
+    block ||= ->(_) {}
+
+    if klass.instance_method(:board_id=).owner == klass
+      execute_chart_per_board klass: klass, block: block, board_id: board_id
+    else
+      execute_chart klass.new(block)
+    end
+  end
+
+  def resolve_chart_class class_name
+    klass = Object.const_get(class_name)
+    klass < ChartBase ? klass : nil
+  rescue NameError
+    nil
+  end
+
+  def execute_chart_per_board klass:, block:, board_id:
+    all_boards = @file_config.project_config.all_boards
+    ids = board_id ? [board_id] : issues.collect { |i| i.board.id }.uniq
+    ids = ids.sort_by { |id| all_boards[id]&.name || '' }
+    ids.each_with_index do |id, index|
+      execute_chart(klass.new(block)) do |chart|
+        chart.board_id = id
+        # We're showing the description only on the first one in order to reduce noise on the report
+        chart.description_text nil unless index.zero?
+      end
+    end
+  end
+
+  def respond_to_missing? name, include_private = false
+    class_name = name.to_s.split('_').map(&:capitalize).join
+    !resolve_chart_class(class_name).nil? || super
+  end
+
   def cycletime label = nil, &block
     @file_config.project_config.all_boards.each_value do |board|
       raise 'Multiple cycletimes not supported' if board.cycletime
 
-      board.cycletime = CycleTimeConfig.new(parent_config: self, label: label, block: block, file_system: file_system)
+      board.cycletime = CycleTimeConfig.new(
+        possible_statuses: file_config.project_config, label: label, block: block,
+        file_system: file_system, settings: settings
+      )
     end
   end
 
@@ -69,10 +98,8 @@ class HtmlReportConfig
 
     html create_footer
 
-    html_directory = "#{Pathname.new(File.realpath(__FILE__)).dirname}/html"
-    css = load_css html_directory: html_directory
-    erb = ERB.new file_system.load(File.join(html_directory, 'index.erb'))
-    file_system.save_file content: erb.result(binding), filename: @file_config.output_filename
+    create_html output_filename: @file_config.output_filename, settings: settings,
+                project_name: @file_config.project_config.name
   end
 
   def file_system
@@ -83,24 +110,6 @@ class HtmlReportConfig
     file_system.log message
   end
 
-  def load_css html_directory:
-    base_css_filename = File.join(html_directory, 'index.css')
-    base_css = file_system.load(base_css_filename)
-    log("Loaded CSS:  #{base_css_filename}")
-
-    extra_css_filename = settings['include_css']
-    if extra_css_filename
-      if File.exist?(extra_css_filename)
-        base_css << "\n\n" << file_system.load(extra_css_filename)
-        log("Loaded CSS:  #{extra_css_filename}")
-      else
-        log("Unable to find specified CSS file: #{extra_css_filename}")
-      end
-    end
-
-    base_css
-  end
-
   def board_id id
     @board_id = id
   end
@@ -109,24 +118,9 @@ class HtmlReportConfig
     @file_config.project_config.exporter.timezone_offset
   end
 
-  def aging_work_in_progress_chart board_id: nil, &block
-    block ||= ->(_) {}
-
-    if board_id.nil?
-      ids = issues.collect { |i| i.board.id }.uniq.sort
-    else
-      ids = [board_id]
-    end
-
-    ids.each do |id|
-      execute_chart(AgingWorkInProgressChart.new(block)) do |chart|
-        chart.board_id = id
-      end
-    end
-  end
-
   def random_color
-    "##{Random.bytes(3).unpack1('H*')}"
+    @palette_index = (@palette_index || -1) + 1
+    ChartBase::OKABE_ITO_PALETTE[@palette_index % ChartBase::OKABE_ITO_PALETTE.size]
   end
 
   def html string, type: :body
@@ -159,10 +153,12 @@ class HtmlReportConfig
     chart.time_range = project_config.time_range
     chart.timezone_offset = timezone_offset
     chart.settings = settings
+    chart.atlassian_document_format = project_config.atlassian_document_format
 
     chart.all_boards = project_config.all_boards
     chart.board_id = find_board_id
     chart.holiday_dates = project_config.exporter.holiday_dates
+    chart.fix_versions = project_config.fix_versions
 
     time_range = @file_config.project_config.time_range
     chart.date_range = time_range.begin.to_date..time_range.end.to_date
@@ -171,6 +167,7 @@ class HtmlReportConfig
     after_init_block&.call chart
 
     @charts << chart
+    chart.before_run
     html chart.run
   end