jirametrics 2.22 → 2.27

data/lib/jirametrics/html/index.css

@@ -87,6 +87,9 @@
 body {
   background-color: var(--body-background);
   color: var(--default-text-color);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 dl, dd, dt {
@@ -214,6 +217,120 @@ div.child_issue {
   padding: 0.5em;
 }
 
+/* Dark CSS variables — shared by the media query and the forced dark theme */
+html[data-theme="dark"] {
+  --warning-banner: #9F2B00;
+  --non-working-days-color: #2f2f2f;
+  --type-story-color: #6fb86f;
+  --type-task-color: #0021b3;
+  --type-bug-color: #bb5603;
+  --body-background: #343434;
+  --default-text-color: #aaa;
+  --grid-line-color: #424242;
+  --expedited-color: #b90000;
+  --blocked-color: #c75b02;
+  --stalled-color: #ae7202;
+  --wip-chart-active-color: #2551c1;
+  --status-category-inprogress-color: #1c49bb;
+  --hierarchy-table-inactive-item-text-color: #939393;
+  --wip-chart-completed-color: #03cb03;
+  --wip-chart-duration-less-than-day-color: #d2d988;
+  --wip-chart-duration-week-or-less-color: #dfcd00;
+  --wip-chart-duration-two-weeks-or-less-color: #cf9400;
+  --wip-chart-duration-four-weeks-or-less-color: #c25e00;
+  --wip-chart-duration-more-than-four-weeks-color: #8e0000;
+  --daily-view-selected-issue-background: #474747;
+  --priority-color-highest: #ef4444;
+  --priority-color-high: #f97316;
+  --priority-color-low: #06b6d4;
+  --priority-color-lowest: #94a3b8;
+
+  a[href] { color: #1e8ad6; }
+  a[href]:hover { color: #3ba0e6; }
+  .chart { background: var(--body-background); }
+  table.standard {
+    th { background: var(--body-background); }
+    tr:nth-child(odd) { background-color: #656565; }
+  }
+  div.color_block { border: 1px solid lightgray; }
+  div.daily_issue {
+    .field { color: var(--default-text-color); }
+  }
+}
+
+/* Force light mode — overrides the dark media query when user explicitly picks light */
+html[data-theme="light"] {
+  --warning-banner: yellow;
+  --non-working-days-color: #F0F0F0;
+  --type-story-color: #4bc14b;
+  --type-task-color: blue;
+  --type-bug-color: orange;
+  --body-background: white;
+  --default-text-color: black;
+  --grid-line-color: lightgray;
+  --expedited-color: red;
+  --blocked-color: #FF7400;
+  --stalled-color: orange;
+  --wip-chart-active-color: #326cff;
+  --status-category-inprogress-color: #2663ff;
+  --hierarchy-table-inactive-item-text-color: gray;
+  --wip-chart-completed-color: #00ff00;
+  --wip-chart-duration-less-than-day-color: #ffef41;
+  --wip-chart-duration-week-or-less-color: #dcc900;
+  --wip-chart-duration-two-weeks-or-less-color: #dfa000;
+  --wip-chart-duration-four-weeks-or-less-color: #eb7200;
+  --wip-chart-duration-more-than-four-weeks-color: #e70000;
+  --daily-view-selected-issue-background: lightgray;
+  --priority-color-highest: #dc2626;
+  --priority-color-high: #ea580c;
+  --priority-color-low: #0891b2;
+  --priority-color-lowest: #64748b;
+
+  a[href] { color: revert; }
+  a[href]:hover { color: revert; }
+  .chart { background: white; }
+  table.standard {
+    th { background: white; }
+    tr:nth-child(odd) { background-color: #eee; }
+  }
+  div.color_block { border: 1px solid black; }
+}
+
+/* Theme toggle widget */
+#theme-toggle {
+  position: fixed;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 2px;
+  background: var(--body-background);
+  border: 1px solid var(--grid-line-color);
+  border-radius: 6px;
+  padding: 3px;
+  z-index: 1000;
+
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 1rem;
+    color: var(--default-text-color);
+    opacity: 0.5;
+  }
+
+  button:hover {
+    opacity: 1;
+    background: var(--grid-line-color);
+  }
+
+  button.active {
+    opacity: 1;
+    background: var(--grid-line-color);
+  }
+}
+
 @media screen and (prefers-color-scheme: dark) {
   :root {
     --warning-banner: #9F2B00;

data/lib/jirametrics/html/index.erb

@@ -1,6 +1,7 @@
 <html>
   <head>
     <meta charset="UTF-8">
+    <title><%= project_name.empty? ? 'JiraMetrics' : "JiraMetrics - #{project_name}" %></title>
     <link rel="icon" type="image/png" href="https://github.com/mikebowler/jirametrics/blob/main/favicon.png?raw=true" />
     <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -17,6 +18,11 @@
     </script>
   </head>
   <body>
+    <div id="theme-toggle">
+      <button id="theme-btn-system" title="Use system preference">⊙</button>
+      <button id="theme-btn-light" title="Light mode">☀</button>
+      <button id="theme-btn-dark" title="Dark mode">☾</button>
+    </div>
     <noscript>
       <div style="padding: 1em; background: red; color: white; font-size: 2em;">
         Javascript is currently disabled and that means that almost all of the charts in this report won't render. If you've loaded this from a folder on SharePoint then save it locally and load it again.

data/lib/jirametrics/html/index.js

@@ -1,3 +1,12 @@
+// Apply saved theme immediately (before Chart.js reads CSS variables) so charts
+// initialize with the correct colour scheme.
+(function () {
+  const saved = localStorage.getItem('jirametrics:theme');
+  if (saved) {
+    document.documentElement.setAttribute('data-theme', saved);
+  }
+}());
+
 function makeFoldable() {
   // Get all elements with the "foldable" class
   const foldableElements = document.querySelectorAll('.foldable');
@@ -77,16 +86,57 @@ function makeFoldable() {
   });
 }
 
+function initThemeToggle() {
+  const html = document.documentElement;
+  const saved = localStorage.getItem('jirametrics:theme');
+  if (saved) {
+    html.setAttribute('data-theme', saved);
+  }
+
+  function updateActiveButton(theme) {
+    ['system', 'light', 'dark'].forEach(t => {
+      const btn = document.getElementById(`theme-btn-${t}`);
+      if (btn) {
+        btn.classList.toggle('active', t === theme);
+      }
+    });
+  }
+
+  function setTheme(theme) {
+    if (theme === 'system') {
+      html.removeAttribute('data-theme');
+      localStorage.removeItem('jirametrics:theme');
+    } else {
+      html.setAttribute('data-theme', theme);
+      localStorage.setItem('jirametrics:theme', theme);
+    }
+    updateActiveButton(theme);
+    location.reload();
+  }
+
+  updateActiveButton(saved || 'system');
+
+  ['system', 'light', 'dark'].forEach(theme => {
+    const btn = document.getElementById(`theme-btn-${theme}`);
+    if (btn) {
+      btn.addEventListener('click', () => setTheme(theme));
+    }
+  });
+}
+
 // Auto-initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
   makeFoldable();
+  initThemeToggle();
 });
 
 
 // If we switch between light/dark mode then force a refresh so all charts will redraw correctly
-// in the other colour scheme.
+// in the other colour scheme. Skip reload if a manual theme override is set.
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-  location.reload()
+  if (!document.documentElement.hasAttribute('data-theme')) {
+    location.reload();
+  }
 })
 
 // Draw a diagonal pattern to highlight sections of a bar chart. Based on code found at:

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_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'))

data/lib/jirametrics/html_report_config.rb

@@ -20,33 +20,38 @@ class HtmlReportConfig < HtmlGenerator
     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_view', classname: 'DailyView'
-
   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, &block
+    class_name = name.to_s.split('_').map(&:capitalize).join
+    klass = Object.const_get(class_name)
+    raise NameError unless klass < ChartBase
+
+    block ||= ->(_) {}
+    execute_chart klass.new(block)
+  rescue NameError
+    super
+  end
+
+  def respond_to_missing? name, include_private = false
+    class_name = name.to_s.split('_').map(&:capitalize).join
+    klass = Object.const_get(class_name)
+    klass < ChartBase
+  rescue NameError
+    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
@@ -73,7 +78,8 @@ class HtmlReportConfig < HtmlGenerator
 
     html create_footer
 
-    create_html output_filename: @file_config.output_filename, settings: settings
+    create_html output_filename: @file_config.output_filename, settings: settings,
+                project_name: @file_config.project_config.name
   end
 
   def file_system
@@ -147,6 +153,7 @@ class HtmlReportConfig < HtmlGenerator
     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