jirametrics 3.1.1 → 3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46c9c370181743889ae079b5c6ed872644110c23bf5113118dd1fbb9bac217cd
-  data.tar.gz: 1b40c073695046589fe0d8ca996d0337eb81fda0ffb44ac7875f238369a88d11
+  metadata.gz: 9952ccca62cfc09c062633e0ee50828016681b77b537e736e77046a0365a47ca
+  data.tar.gz: 577b27edc9b07c42285339995ea3a23f2082d62feaa34a1d225cf7c61300fda0
 SHA512:
-  metadata.gz: 79995d870fb4282b57919bcf05cdc77bc8a7c45d83a142fef60ae3313382a098b204f810fe1515b4ac2e799c015a068cff55cd68e0e6affb4834148f6be52739
-  data.tar.gz: bba299cd94305c9bd0cac2f271235eca287b44b33a77e7e86597aecb662373e71b82b91a074b1ba1e773a4011620a7335cf33b1540810ffe283b89be6554b18f
+  metadata.gz: 29ec03cf3689cd29d772ca781dd750fe33c54d203307b1ce0bb378b35b211a70b33c7d81503b688fad0cd1f7204b14b3fdaebfcc7fd2375ff3dbbc42ed6615c5
+  data.tar.gz: b73780c0e68abea384a151d2f194c17e9705f9e507fd1587809d7ddb6691b9157aa82b6ab3a3cdd86ca513acd489b7c5dac733184cd1774887f0e2d6c6e5d990

data/lib/jirametrics/html/index.css

@@ -5,6 +5,8 @@
   --warning-banner: yellow;
 
   --cycletime-scatterplot-overall-trendline-color: gray;
+  --cycletime-scatterplot-cap-rule-color: #555555;
+  --cycletime-scatterplot-cap-gutter-color: rgba(0, 0, 0, 0.05);
 
   --non-working-days-color: #F0F0F0;
   --expedited-color: #D55E00;        /* Okabe-Ito vermilion */
@@ -238,6 +240,8 @@ html[data-theme="dark"] {
   --body-background: #343434;
   --default-text-color: #aaa;
   --grid-line-color: #424242;
+  --cycletime-scatterplot-cap-rule-color: #b8b8b8;
+  --cycletime-scatterplot-cap-gutter-color: rgba(255, 255, 255, 0.08);
   --expedited-color: #E69F00;        /* Okabe-Ito orange for dark bg */
   --blocked-color: #E69F00;          /* Okabe-Ito orange for dark bg */
   --stalled-color: #F0E442;          /* Okabe-Ito yellow - distinct from blocked */
@@ -294,6 +298,8 @@ html[data-theme="light"] {
   --body-background: white;
   --default-text-color: black;
   --grid-line-color: lightgray;
+  --cycletime-scatterplot-cap-rule-color: #555555;
+  --cycletime-scatterplot-cap-gutter-color: rgba(0, 0, 0, 0.05);
   --expedited-color: #D55E00;        /* Okabe-Ito vermilion */
   --blocked-color: #D55E00;          /* Okabe-Ito vermilion */
   --stalled-color: #E69F00;          /* Okabe-Ito orange */
@@ -377,6 +383,8 @@ html[data-theme="light"] {
     --body-background: #343434;
     --default-text-color: #aaa;
     --grid-line-color: #424242;
+    --cycletime-scatterplot-cap-rule-color: #b8b8b8;
+    --cycletime-scatterplot-cap-gutter-color: rgba(255, 255, 255, 0.08);
 
     --expedited-color: #E69F00;        /* Okabe-Ito orange for dark bg */
     --blocked-color: #E69F00;          /* Okabe-Ito orange for dark bg */

data/lib/jirametrics/html/time_based_scatterplot.erb

@@ -5,8 +5,52 @@
 <script>
 new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   type: 'scatter',
+  <% if @cap %>
+  plugins: [{
+    id: 'capRule<%= chart_id %>',
+    afterDatasetsDraw: function(chart) {
+      const yPixel = chart.scales.y.getPixelForValue(<%= @cap[:sep] %>);
+      const area = chart.chartArea;
+      const pen = chart.ctx;
+      pen.save();
+      pen.strokeStyle = <%= CssVariable['--cycletime-scatterplot-cap-rule-color'].to_json %>;
+      pen.lineWidth = 1.5;
+      [0, 3].forEach(function(offset) {
+        pen.beginPath();
+        pen.moveTo(area.left, yPixel - offset);
+        pen.lineTo(area.right, yPixel - offset);
+        pen.stroke();
+      });
+      pen.restore();
+    }
+  }],
+  <% end %>
   data: {
-    datasets: <%= JSON.generate(data_sets) %>
+    datasets: (function() {
+      const dataSets = <%= JSON.generate(data_sets) %>;
+      <% if @cap %>
+      // draw an up-arrow glyph in the given colour, usable as a Chart.js pointStyle.
+      // The arrow says "the real value continues upward beyond the cap".
+      function capArrow(color) {
+        const size = 18, glyph = document.createElement('canvas');
+        glyph.width = size; glyph.height = size;
+        const pen = glyph.getContext('2d');
+        pen.strokeStyle = color; pen.lineWidth = 2.5; pen.lineCap = 'round'; pen.lineJoin = 'round';
+        pen.beginPath();
+        pen.moveTo(size / 2, size - 3); pen.lineTo(size / 2, 3);
+        pen.moveTo(size / 2 - 5, 8); pen.lineTo(size / 2, 3); pen.lineTo(size / 2 + 5, 8);
+        pen.stroke();
+        return glyph;
+      }
+      dataSets.forEach(function(dataSet) {
+        if (dataSet.type === 'line') return; // skip the interleaved trend lines
+        const arrow = capArrow(dataSet.backgroundColor);
+        dataSet.pointStyle = dataSet.data.map(function(point) { return point.over ? arrow : 'circle'; });
+        dataSet.pointRadius = dataSet.data.map(function(point) { return point.over ? 9 : 3; });
+      });
+      <% end %>
+      return dataSets;
+    })()
   },
   options: {
     title: {
@@ -29,7 +73,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
       },
       y: {
         min: 0,
-        max: <%= (@highest_y_value * 1.1).ceil %>,
+        max: <%= @cap ? @cap[:axis_max] : (@highest_y_value * 1.1).ceil %>,
         scaleLabel: {
           display: true
         },
@@ -39,6 +83,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         },
         ticks: {
           callback: function(value, index, ticks) {
+            <% if @cap %>if (value > <%= @cap[:cutoff] %>) return null;<% end %>
             return index === ticks.length - 1 ? null : value;
           }
         }
@@ -58,6 +103,32 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           <%= working_days_annotation %>
           <%= date_annotation %>
 
+          <% if @cap %>
+          capGutter: {
+            type: 'box',
+            yMin: <%= @cap[:sep] %>,
+            yMax: <%= @cap[:axis_max] %>,
+            backgroundColor: <%= CssVariable['--cycletime-scatterplot-cap-gutter-color'].to_json %>,
+            borderWidth: 0
+          },
+          capLabel: {
+            type: 'line',
+            yMin: <%= @cap[:sep] %>,
+            yMax: <%= @cap[:sep] %>,
+            borderWidth: 0,
+            drawTime: 'afterDraw',
+            label: {
+              display: true,
+              content: '<%= @cap[:label] %>',
+              position: 'start',
+              yAdjust: 0,
+              backgroundColor: 'rgba(0,0,0,0.85)',
+              color: '#fff',
+              font: { size: 11 }
+            }
+          },
+          <% end %>
+
           <% @percentage_lines.each_with_index do |args, index| %>
           <%   percent, color = args %>
           line<%= index %>: {

data/lib/jirametrics/time_based_scatterplot.rb

@@ -6,6 +6,8 @@ require 'jirametrics/time_based_chart'
 class TimeBasedScatterplot < TimeBasedChart
   include GroupableIssueChart
 
+  attr_reader :y_axis_cap_percentile
+
   def initialize
     super
 
@@ -18,6 +20,10 @@ class TimeBasedScatterplot < TimeBasedChart
     @y_axis_title = title
   end
 
+  def cap_y_axis percentile: 98
+    @y_axis_cap_percentile = percentile
+  end
+
   def run
     items = all_items
     data_sets = create_datasets items
@@ -33,6 +39,7 @@ class TimeBasedScatterplot < TimeBasedChart
   end
 
   def create_datasets items
+    @cap = compute_cap items
     data_sets = []
 
     group_issues(items).each do |rules, items_by_type|
@@ -61,14 +68,14 @@ class TimeBasedScatterplot < TimeBasedChart
 
   def trend_line_data_set label:, data:, color:
     points = data.collect do |hash|
-      [Time.parse(hash[:x]).to_i, hash[:y]]
+      [Time.parse(hash[:x]).to_i, hash[:true_y] || hash[:y]]
     end
 
     # The trend calculation works with numbers only so convert Time to an int and back
     calculator = TrendLineCalculator.new(points)
     data_points = calculator.chart_datapoints(
       range: time_range.begin.to_i..time_range.end.to_i,
-      max_y: @highest_y_value
+      max_y: (@cap ? @cap[:cutoff] : @highest_y_value)
     )
     data_points.each do |point_hash|
       point_hash[:x] = chart_format Time.at(point_hash[:x])
@@ -97,20 +104,68 @@ class TimeBasedScatterplot < TimeBasedChart
     min = minimum_y_value
     return nil if min && y < min
 
-    @highest_y_value = y if @highest_y_value < y
+    over = @cap && y > @cap[:cutoff]
+    plotted_y = over ? @cap[:pin_row] : y
+    @highest_y_value = plotted_y if @highest_y_value < plotted_y
 
-    {
-      y: y,
+    point = {
+      y: plotted_y,
       x: chart_format(x_value(item)),
       title: [title_value(item, rules: rules)]
     }
+    if over
+      point[:over] = true
+      point[:true_y] = y
+    end
+    point
   end
 
   def calculate_percent_line items
+    percentile_value items, 85
+  end
+
+  def percentile_value items, percentile
+    values = filtered_values(items)
+    return nil if values.empty?
+
+    index = [values.size * percentile / 100, values.size - 1].min
+    values.sort[index]
+  end
+
+  def compute_cap items
+    return nil unless @y_axis_cap_percentile
+
+    cutoff = percentile_value items, @y_axis_cap_percentile
+    return nil unless cutoff
+
+    values = filtered_values(items)
+    outlier_count = values.count { |value| value > cutoff }
+    return nil if outlier_count.zero?
+
+    pad = cutoff * 0.06        # breathing room so the top real dot does not touch the break
+    gutter_height = cutoff * 0.15
+    sep = cutoff + pad
+    {
+      cutoff: cutoff,
+      sep: sep,
+      pin_row: sep + (gutter_height * 0.55),
+      axis_max: (sep + gutter_height).ceil,
+      outlier_count: outlier_count,
+      label: cap_label(outlier_count: outlier_count, cutoff: cutoff)
+    }
+  end
+
+  private
+
+  def cap_label outlier_count:, cutoff:
+    item_word = outlier_count == 1 ? 'item' : 'items'
+    "#{outlier_count} #{item_word} above #{cutoff.round} days"
+  end
+
+  def filtered_values items
     min = minimum_y_value
-    times = items.collect { |item| y_value(item) }
-    times.reject! { |y| min && y < min }
-    index = times.size * 85 / 100
-    times.sort[index]
+    values = items.collect { |item| y_value(item) }
+    values.reject! { |value| min && value < min }
+    values
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jirametrics
 version: !ruby/object:Gem::Version
-  version: 3.1.1
+  version: '3.2'
 platform: ruby
 authors:
 - Mike Bowler