jirametrics 2.0 → 2.11

data/lib/jirametrics/html/aging_work_in_progress_chart.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -6,7 +6,7 @@ new Chart(document.getElementById(<%= chart_id.inspect %>).getContext('2d'),
 {
   type: 'bar',
   data: {
-    labels: [<%= column_headings.collect(&:inspect).join(',') %>],
+    labels: [<%= @board_columns.collect { |c| c.name.inspect }.join(',') %>],
     datasets: <%= JSON.generate(data_sets) %>
   },
   options: {
@@ -20,7 +20,12 @@ new Chart(document.getElementById(<%= chart_id.inspect %>).getContext('2d'),
         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: {
@@ -31,6 +36,12 @@ new Chart(document.getElementById(<%= chart_id.inspect %>).getContext('2d'),
           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: true,
+        max: <%= (@max_age * 1.1).to_i %>
       }
     },
     plugins: {
@@ -38,14 +49,26 @@ new Chart(document.getElementById(<%= chart_id.inspect %>).getContext('2d'),
         callbacks: {
           label: function(context) {
             if( typeof(context.dataset.data[context.dataIndex]) == "number" ) {
-              return "85% of the issues, leave this column in "+context.dataset.data[context.dataIndex]+" days";
+              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
+              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('%');
+          }
+        }
       }
+
     }
   }
 });

data/lib/jirametrics/html/aging_work_table.erb

@@ -1,44 +1,37 @@
-<h1>Aging Work Table</h1>
-<p>
-  This chart shows all active (started but not completed) work, ordered from oldest at the top to 
-  newest at the bottom.
-</p>
-<p>
-  If there are expedited items that haven't yet started then they're at the bottom of the table. By the
-  very definition of expedited, if we haven't started them already, we'd better get on that.
-</p>
-<p>
-  <% if age_cutoff > 0 %>
-    Items less than <%= label_days age_cutoff %> old have been excluded from this chart to provide more
-    focus on the older items. The exception are items that are either expedited or blocked - these are
-    shown no matter how old they are.
-  <% end %>
-</p>
-
 <table class='standard'>
   <thead>
     <tr>
-      <th>Age (days)</th>
-      <th>E</th>
-      <th>B</th>
+      <th title="Age in days">Age</th>
+      <th title="Expedited">E</th>
+      <th title="Blocked / Stalled">B/S</th>
       <th>Issue</th>
       <th>Status</th>
+      <th>Forecast</th>
       <th>Fix versions</th>
-      <% if any_scrum_boards? %>
+      <% if any_scrum_boards %>
         <th>Sprints</th>
       <% end %>
       <th><%= aggregated_project? ? 'Board' : 'Who' %></th>
     </tr>
   </thead>
   <tbody>
+    <% show_age_cutoff_bar_at = age_cutoff %>
     <% aging_issues.each do |issue| %>
+      <% issue_age = issue.board.cycletime.age(issue, today: @today) %>
+      <% if show_age_cutoff_bar_at && issue_age&.<(show_age_cutoff_bar_at) %>
+        <tr><th colspan=100 style="text-align: left; padding-top: 1em;">
+          The items below are less than <%= label_days age_cutoff %> old, and are only on this report
+          because they're either expedited or blocked.
+        </th></tr>
+        <% show_age_cutoff_bar_at = nil %>
+      <% end %>
       <tr>
-        <td style="text-align: right;"><%= issue.board.cycletime.age(issue, today: @today) || 'Not started' %></td>
+        <td style="text-align: right;"><%= issue_age || 'Not started' %></td>
         <td><%= expedited_text(issue) %></td>
         <td><%= blocked_text(issue) %></td>
         <td>
           <% parent_hierarchy(issue).each_with_index do |parent, index| %>
-            <% color = (parent == issue ? 'black' : 'gray') %>
+            <% color = parent != issue ? "var(--hierarchy-table-inactive-item-text-color)" : 'var(--default-text-color)' %>
             <div style="padding-left: <%= index %>em; color: <%= color %>">
               <span style="white-space: nowrap;">
                 <img src="<%= parent.type_icon_url %>" title="<%= parent.type %>"/>
@@ -48,9 +41,10 @@
             </div>
           <% end %>
         </td>
-        <td><%= format_status issue.status.name, board: issue.board %><%= unmapped_status_text(issue) unless current_status_visible? issue %></td>
+        <td><%= format_status issue.status, board: issue.board %></td>
+        <td><%= dates_text(issue) %></td>
         <td><%= fix_versions_text(issue) %></td>
-        <% if any_scrum_boards? %>
+        <% if any_scrum_boards %>
           <td><%= sprints_text(issue) %></td>
         <% end %>
         <td><%= aggregated_project? ? issue.board.name : issue.assigned_to %></td>

data/lib/jirametrics/html/cycletime_histogram.erb

@@ -1,6 +1,57 @@
-<div>
+<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
+%>
+[<a id='<%= link_id %>' href="#" onclick='expand_collapse("<%= link_id %>", "<%= issues_id %>"); return false;'>Show details</a>]
+<div id="<%= issues_id %>" style="display: none;">
+  <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'),
 {
@@ -17,17 +68,46 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
         title: {
           display: true,
           text: 'Cycletime in days'
-        }
+        },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
+        min: 0,
+        offset: false, // Gets rid of the ugly padding on left.
       },
       y: {
         stacked: true,
         title: {
           display: true,
           text: 'Number of items that had that cycletime'
-        }
+        },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {
+      annotation: {
+        annotations: {
+          <%
+            results = the_stats[:all][:percentiles]
+            results.each do |percentile, value|
+          %>
+          percentile<%= percentile.to_s %>: {
+            type: 'line',
+            scaleID: 'x',
+            value: <%= value %>,
+            borderWidth: 1,
+            drawTime: 'beforeDatasetsDraw',
+            label: {
+              enabled: true,
+              content: '<%= "#{percentile}%" %>',
+              position: 'start',
+            }
+          },
+          <% end %>
+        },
+      },
       tooltip: {
         callbacks: {
           label: function(context) {

data/lib/jirametrics/html/cycletime_scatterplot.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -20,6 +20,9 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           labelString: 'Date Completed'
         },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
         min: "<%= date_range.begin.to_s %>",
         max: "<%= (date_range.end + 1).to_s %>"
       },
@@ -34,6 +37,9 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: 'Cycle time in days'
         },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {
@@ -47,16 +53,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
       autocolors: false,
       annotation: {
         annotations: {
-          <% holidays.each_with_index do |range, index| %>
-          holiday<%= index %>: {
-            drawTime: 'beforeDraw',
-            type: 'box',
-            xMin: '<%= range.begin %>T00:00:00',
-            xMax: '<%= range.end %>T23:59:59',
-            backgroundColor: '#F0F0F0',
-            borderColor: '#F0F0F0'
-          },
-          <% end %>
+          <%= working_days_annotation %>
 
           <% @percentage_lines.each_with_index do |args, index| %>
           <%   percent, color = args %>
@@ -64,7 +61,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
             type: 'line',
             yMin: <%= percent %>,
             yMax: <%= percent %>,
-            borderColor: '<%= color %>',
+            borderColor: <%= color.to_json %>,
             borderWidth: 1,
             drawTime: 'beforeDraw'
           },

data/lib/jirametrics/html/daily_wip_chart.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -20,7 +20,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
         time: {
           unit: 'day'
         },
-        stacked: true
+        stacked: true,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
       y: {
         stacked: true,
@@ -32,7 +35,9 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
           display: true,
           text: 'Count of items'
         },
-
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {
@@ -45,16 +50,15 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
       },
       annotation: {
         annotations: {
-          <% holidays.each_with_index do |range, index| %>
-          holiday<%= index %>: {
-            drawTime: 'beforeDraw',
-            type: 'box',
-            xMin: '<%= range.begin %>T00:00:00',
-            xMax: '<%= range.end %>T23:59:59',
-            backgroundColor: '#F0F0F0',
-            borderColor: '#F0F0F0'
-          },
-          <% end %>
+          <%= working_days_annotation %>
+        }
+      },
+      legend: {
+        labels: {
+          filter: function(item, chart) {
+            // Logic to remove a particular legend item goes here
+            return !item.text.includes('Trendline');
+          }
         }
       }
     }

data/lib/jirametrics/html/{story_point_accuracy_chart.erb → estimate_accuracy_chart.erb}

@@ -1,4 +1,4 @@
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -24,8 +24,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: "Cycletime (days)"
         },
-        min: 0
-
+        min: 0,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
       y: {
         type: "<%= @y_axis_type %>",
@@ -40,7 +42,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: "<%= @y_axis_label %>"
         },
-        min: 0.0
+        min: 0.0,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {

data/lib/jirametrics/html/expedited_chart.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -24,7 +24,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           labelString: 'Date Completed'
         },
         min: "<%= date_range.begin.to_s %>",
-        max: "<%= date_range.end.to_s %>"
+        max: "<%= date_range.end.to_s %>",
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
       y: {
         scaleLabel: {
@@ -35,7 +38,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: 'Age in days'
         },        
-        min: 0
+        min: 0,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {
@@ -49,16 +55,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
       autocolors: false,
       annotation: {
         annotations: {
-          <% holidays.each_with_index do |range, index| %>
-          holiday<%= index %>: {
-            drawTime: 'beforeDraw',
-            type: 'box',
-            xMin: '<%= range.begin %>T00:00:00',
-            xMax: '<%= range.end %>T23:59:59',
-            backgroundColor: '#F0F0F0',
-            borderColor: '#F0F0F0'
-          },
-          <% end %>
+          <%= working_days_annotation %>
         }
       }
     }

data/lib/jirametrics/html/flow_efficiency_scatterplot.erb

@@ -0,0 +1,85 @@
+<div class="chart">
+  <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
+</div>
+<script>
+new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
+  type: 'scatter',
+  data: {
+    datasets: <%= JSON.generate(data_sets) %>
+  },
+  options: {
+    title: {
+      display: true,
+      text: "Cycletime Scatterplot"
+    },
+    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
+    scales: {
+      x: {
+        scaleLabel: {
+          display: true,
+          labelString: 'Days'
+        },
+        title: {
+          display: true,
+          text: 'Total time (days)'
+        },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
+
+      },
+      y: {
+        scaleLabel: {
+          display: true,
+          labelString: 'Percentage',
+          min: 0,
+          max: <%= @highest_cycletime %>
+        },
+        title: {
+          display: true,
+          text: 'Time adding value (days)'
+        },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
+      }
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          label: function(context) {
+            return context.dataset.data[context.dataIndex].title
+          }
+        }
+      },
+      autocolors: false,
+      legend: {
+        onClick: (evt, legendItem, legend) => {
+          // Find the datasetMeta that corresponds to the item clicked
+          var i = 0
+          while(legendItem.text != legend.chart.getDatasetMeta(i).label) {
+            i++;
+          }
+          nextVisibility = !!legend.chart.getDatasetMeta(i).hidden;
+
+          // Hide/show the 85% line for that dataset
+          legend.chart.options.plugins.annotation.annotations["line"+(i/2)].display = nextVisibility;
+
+          // Hide/show the trendline for this dataset, if they were enabled. The trendline is always
+          // there but not always visible.
+          legend.chart.setDatasetVisibility(i+1, <%= !!@show_trend_lines %> && nextVisibility);
+
+          // Still run the default behaviour
+          Chart.defaults.plugins.legend.onClick(evt, legendItem, legend);
+        },
+        labels: {
+          filter: function(item, chart) {
+            // Logic to remove a particular legend item goes here
+            return !item.text.includes('Trendline');
+          }
+        }
+      }
+    }
+  }
+});
+</script>

data/lib/jirametrics/html/hierarchy_table.erb

@@ -14,7 +14,7 @@
       <tr>
         <td style="text-align: right;"><%= issue.board.cycletime.age(issue, today: @today) || 'Not started' %></td>
         <td>
-          <% color = (node.children? ? 'gray' : 'black') %>
+          <% color = "var(--hierarchy-table-#{ 'in' if node.children? }active-item-text-color)" %>
           <span style="padding-left: <%= depth - 1 %>em;" />
           <span style="white-space: nowrap;">
             <img src="<%= issue.type_icon_url %>" title="<%= issue.type %>"/>
@@ -22,7 +22,7 @@
           </span>
         </td>
         <td><span style="color: <%= color %>; font-style: italic;"><%= issue.summary[0..80] %></span></td>
-        <td><%= format_status issue.status.name, board: issue.board %></td>
+        <td><%= format_status issue.status, board: issue.board %></td>
       </tr>
     <% end %>
   </tbody>