jirametrics 2.22 → 2.30

data/lib/jirametrics/html/sprint_burndown.erb

@@ -22,10 +22,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         time: {
             format: 'YYYY-MM-DD'
         },
-        scaleLabel: {
-          display: true,
-          labelString: 'Date'
-        },
+        <%= render_axis_title :x %>
         min: "<%= date_range.begin.to_s %>",
         max: "<%= (date_range.end + 1).to_s %>",
         grid: {
@@ -33,14 +30,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         },
       },
       y: {
-        scaleLabel: {
-          display: true,
-          labelString: 'Items remaining'
-        },
-        title: {
-          display: true,
-          text: "<%= y_axis_title %>"
-        },
+        <%= render_axis_title :y %>
         min: 0.0,
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
@@ -77,7 +67,9 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
 <table class='standard' style="margin-left: 1em;">
   <thead>
     <th>Sprint</th>
-    <th>Length</th>
+    <th>Started</th>
+    <th>Completed</th>
+    <th>Days</th>
     <th>State</th>
     <th>Started</th>
     <th>Completed</th>
@@ -90,6 +82,8 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     <% @summary_stats.keys.sort_by(&:start_time).each do |sprint| %>
       <tr>
         <td><%= sprint.name %></td>
+        <td><%= sprint.start_time.to_date %></td>
+        <td><%= sprint.completed_time&.to_date %></td>
         <td><%= sprint.day_count %></td>
         <td><%= sprint.raw['state'] %></td>
         <% stats = @summary_stats[sprint] %>

data/lib/jirametrics/html/throughput_chart.erb

@@ -3,6 +3,11 @@
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
+if (!Chart.Tooltip.positioners.legendItem) {
+  Chart.Tooltip.positioners.legendItem = function(items) {
+    return this.chart._legendHoverPosition || Chart.Tooltip.positioners.average.call(this, items);
+  };
+}
 new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   type: 'scatter',
   data: {
@@ -20,10 +25,9 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         time: {
             format: 'YYYY-MM-DD'
         },
-        scaleLabel: {
-          display: true,
-          labelString: 'Date Completed'
-        },
+        min: "<%= date_range.begin.to_s %>",
+        max: "<%= (date_range.end + 1).to_s %>",
+        <%= render_axis_title :x %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -32,10 +36,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         scaleLabel: {
           display: true,
         },
-        title: {
-          display: true,
-          text: 'Count of items'
-        },
+        <%= render_axis_title :y %>
         min: 0,
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
@@ -44,15 +45,45 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     },
     plugins: {
       tooltip: {
+        position: 'legendItem',
         callbacks: {
+          title: function(contexts) {
+            if (contexts[0]?.chart._legendHoverIndex != null) return '';
+          },
           label: function(context) {
-            return context.dataset.data[context.dataIndex].title
+            if (context.chart._legendHoverIndex != null) {
+              return context.dataset.label_hint || '';
+            }
+            return context.dataset.data[context.dataIndex].title;
           }
         }
       },
       annotation: {
         annotations: {
           <%= working_days_annotation %>
+          <%= date_annotation %>
+        }
+      },
+      legend: {
+        onHover: function(event, legendItem, legend) {
+          const chart = legend.chart;
+          const dataset = chart.data.datasets[legendItem.datasetIndex];
+          if (!dataset?.label_hint) return;
+          chart._legendHoverIndex = legendItem.datasetIndex;
+          chart._legendHoverPosition = { x: event.x, y: event.y };
+          const firstNonZero = dataset.data.findIndex(d => d?.y !== 0);
+          if (firstNonZero === -1) return;
+          chart.tooltip.setActiveElements(
+            [{ datasetIndex: legendItem.datasetIndex, index: firstNonZero }],
+            { x: event.x, y: event.y }
+          );
+          chart.update();
+        },
+        onLeave: function(event, legendItem, legend) {
+          legend.chart._legendHoverIndex = null;
+          legend.chart._legendHoverPosition = null;
+          legend.chart.tooltip.setActiveElements([], { x: 0, y: 0 });
+          legend.chart.update();
         }
       }
     }

data/lib/jirametrics/html/{cycletime_histogram.erb → time_based_histogram.erb}

@@ -1,58 +1,8 @@
+<div>
 <%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
-<%
-if show_stats 
-  link_id = next_id
-  issues_id = next_id
-%>
-<div class='foldable' style="padding-left: 1em;">Statistics</div>
-<div id="<%= issues_id %>" style="padding-left: 1em;">
-  <div>
-     <table class="standard">
-      <tr>
-        <th>Issue Type</th>
-        <th>Min</th>
-        <th>Max</th>
-        <th>Avg</th>
-        <th>Mode</th>
-        <% percentiles.each do |p| %>
-           <th><%= p %>th</th>
-        <% end %>
-      </tr>
-      <% the_stats.each do |k, v| %>
-          <tr>
-            <td><%= k %></td>
-            <td style="text-align: right;"><%= v[:min] %></td>
-            <td style="text-align: right;"><%= v[:max] %></td>
-            <td style="text-align: right;"><%= sprintf('%.2f', v[:average]) %></td>
-            <td><%= v[:mode].join(', ') %></td>
-            <% percentiles.each do |p| %>
-               <td style="text-align: right;"><%= v[:percentiles][p] %></td>
-            <% end %>
-          </tr>
-       <% end %>
-     </table>
-  </div>
-  <div>
-    <p>These statistics help understand the <i>"shape"</i> of the cycletime histogram distribution, to help us with predictions.</p>
-    <ul>
-      <li><b>Min & Max:</b> the observed spread for the data set. Useful to judge how wide the variation is. </li>
-      <li><b>Average:</b> the arithmetic mean of the data set. Useful as a <i>"typical representative"</i> of the complete set.</li>
-      <li><b>Mode:</b> the most repeated value(s) in the data set. This is the value we're most likely to remember. </li>
-      <li><b>Percentiles:</b> they partition the data set. If X is the Nth percentile, it means that N% of cycletime values are X or less. Typical percentiles of interest are:</li>
-      <ul>
-        <li><b>50%</b>: also known as the <b>Median</b>. Useful to establish short feedback loops, to monitor that it's not drifting to the right.</li>
-        <li><b>85%</b>: useful to establish service level expectations, accounting for rare events..</li>
-        <li><b>98% (or higher)</b>: useful to gauge worst case expectations..</li>
-      </ul>
-    </ul>
-  </div>
-</div>
-<%
-end
-%>
 <script>
 new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
 {
@@ -66,22 +16,17 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
       x: {
         type: 'linear',
         stacked: true,
-        title: {
-          display: true,
-          text: 'Cycletime in days'
-        },
+        <%= render_axis_title :x %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
         min: 0,
+        <%= @max_x_value.nil? ? '' : "max: #{@max_x_value}," %>
         offset: false, // Gets rid of the ugly padding on left.
       },
       y: {
         stacked: true,
-        title: {
-          display: true,
-          text: 'Number of items that had that cycletime'
-        },
+        <%= render_axis_title :y %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -121,3 +66,58 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
 });
 </script>
 <%= seam_end %>
+
+<%= seam_start 'stats_table' %>
+<%
+if show_stats
+  link_id = next_id
+  issues_id = next_id
+%>
+<div class='foldable' style="padding-left: 1em;">Statistics</div>
+<div id="<%= issues_id %>" style="padding-left: 1em;">
+  <div>
+     <table class="standard">
+      <tr>
+        <th>Type</th>
+        <th>Min</th>
+        <th>Max</th>
+        <th>Avg</th>
+        <th>Mode</th>
+        <% percentiles.each do |p| %>
+           <th><%= p %>th</th>
+        <% end %>
+      </tr>
+      <% the_stats.each do |k, v| %>
+          <tr>
+            <td><%= k %></td>
+            <td style="text-align: right;"><%= v[:min] %></td>
+            <td style="text-align: right;"><%= v[:max] %></td>
+            <td style="text-align: right;"><%= sprintf('%.2f', v[:average]) %></td>
+            <td><%= v[:mode].join(', ') %></td>
+            <% percentiles.each do |p| %>
+               <td style="text-align: right;"><%= v[:percentiles][p] %></td>
+            <% end %>
+          </tr>
+       <% end %>
+     </table>
+  </div>
+  <div>
+    <p>These statistics help understand the <i>"shape"</i> of the histogram distribution, to help us with predictions.</p>
+    <ul>
+      <li><b>Min & Max:</b> the observed spread for the data set. Useful to judge how wide the variation is. </li>
+      <li><b>Average:</b> the arithmetic mean of the data set. Useful as a <i>"typical representative"</i> of the complete set.</li>
+      <li><b>Mode:</b> the most repeated value(s) in the data set. This is the value we're most likely to remember. </li>
+      <li><b>Percentiles:</b> they partition the data set. If X is the Nth percentile, it means that N% of values are X or less. Typical percentiles of interest are:</li>
+      <ul>
+        <li><b>50%</b>: also known as the <b>Median</b>. Useful to establish short feedback loops, to monitor that it's not drifting to the right.</li>
+        <li><b>85%</b>: useful to establish service level expectations, accounting for rare events..</li>
+        <li><b>98% (or higher)</b>: useful to gauge worst case expectations..</li>
+      </ul>
+    </ul>
+  </div>
+</div>
+<%
+end
+%>
+<%= seam_end 'stats_table' %>
+</div>

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

@@ -23,22 +23,25 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         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,
-          min: 0,
-          max: <%= @highest_y_value %>
-        },
-        title: {
-          display: true,
-          text: '<%= y_axis_heading %>'
+          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: {
@@ -53,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 %>

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

@@ -3,8 +3,9 @@
 class HtmlGenerator
   attr_accessor :file_system, :settings
 
-  def create_html output_filename:, 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'))