jirametrics 2.4 → 2.30

data/lib/jirametrics/html/index.js

@@ -0,0 +1,164 @@
+// 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');
+  
+  if (foldableElements.length === 0) {
+    return; // No foldable elements found
+  }
+  
+  // Process each foldable element
+  foldableElements.forEach((element, index) => {
+    // Skip if this is the footer element
+    if (element.id === 'footer') {
+      return;
+    }
+    
+    // Create a unique ID for this section
+    const sectionId = `foldable-section-${index}`;
+    const toggleId = `foldable-toggle-${index}`;
+    
+    // Create a container div for the foldable element and its content
+    const container = document.createElement('div');
+    container.className = 'foldable-section';
+    container.id = sectionId;
+    
+    // Create a toggle button
+    const toggleButton = document.createElement(element.tagName); //'button');
+    toggleButton.id = toggleId;
+    toggleButton.className = 'foldable-toggle-btn';
+    toggleButton.innerHTML = '▼ ' + element.innerHTML;
+    
+    // Create a content container
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'foldable-content';
+    contentContainer.style.cssText = `
+      border-left: 2px solid #ccc;
+      padding-left: 15px;
+    `;
+    
+    // Move the foldable element into the container and replace it with the toggle button
+    element.parentNode.insertBefore(container, element);
+    container.appendChild(toggleButton);
+    container.appendChild(contentContainer);
+    
+    // Move all elements between this foldable element and the next foldable element (or end of document) into the content container
+    let nextElement = element.nextElementSibling;
+    while (nextElement && !nextElement.classList.contains('foldable')) {
+      // Skip the footer element
+      if (nextElement.id === 'footer') {
+        break;
+      }
+      
+      const temp = nextElement.nextElementSibling;
+      contentContainer.appendChild(nextElement);
+      nextElement = temp;
+    }
+    
+    // Remove the original foldable element
+    element.remove();
+    
+    // Add click event to toggle visibility
+    toggleButton.addEventListener('click', function() {
+      const content = this.nextElementSibling;
+      if (content.style.display === 'none') {
+        content.style.display = 'block';
+        this.innerHTML = '▼ ' + this.innerHTML.substring(2);
+      } else {
+        content.style.display = 'none';
+        this.innerHTML = '▶ ' + this.innerHTML.substring(2);
+      }
+    });
+    
+    // Initially show the content (you can change this to 'none' if you want sections collapsed by default)
+    contentContainer.style.display = 'block';
+    if(element.classList.contains('startFolded')) {
+      toggleButton.click();
+    }
+  });
+}
+
+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. Skip reload if a manual theme override is set.
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+  if (!document.documentElement.hasAttribute('data-theme')) {
+    location.reload();
+  }
+})
+
+// Draw a diagonal pattern to highlight sections of a bar chart. Based on code found at:
+// https://stackoverflow.com/questions/28569667/fill-chart-js-bar-chart-with-diagonal-stripes-or-other-patterns
+function createDiagonalPattern(color = 'black') {
+  // create a 5x5 px canvas for the pattern's base shape
+  let shape = document.createElement('canvas')
+  shape.width = 5
+  shape.height = 5
+  // get the context for drawing
+  let c = shape.getContext('2d')
+  // draw 1st line of the shape 
+  c.strokeStyle = color
+  c.beginPath()
+  c.moveTo(1, 0)
+  c.lineTo(5, 4)
+  c.stroke()
+  // draw 2nd line of the shape 
+  c.beginPath()
+  c.moveTo(0, 4)
+  c.lineTo(1, 5)
+  c.stroke()
+  // create the pattern from the shape
+  return c.createPattern(shape, 'repeat')
+}

data/lib/jirametrics/html/legacy_colors.css

@@ -0,0 +1,174 @@
+/* Legacy color scheme for jirametrics
+ *
+ * The default colors were updated to improve accessibility for people with
+ * color vision deficiencies. If you prefer the original colors, add this to
+ * your project config:
+ *
+ *   setting['include_css'] = './legacy_colors.css'
+ *
+ * and copy this file to the same directory as your config file.
+ */
+
+/* Light mode */
+:root,
+html[data-theme="light"] {
+  --body-background: white;
+  --default-text-color: black;
+  --grid-line-color: lightgray;
+  --warning-banner: yellow;
+
+  --cycletime-scatterplot-overall-trendline-color: gray;
+
+  --non-working-days-color: #F0F0F0;
+  --expedited-color: red;
+  --blocked-color: #FF7400;
+  --stalled-color: orange;
+  --dead-color: black;
+
+  --type-story-color: #4bc14b;
+  --type-task-color: blue;
+  --type-bug-color: orange;
+  --type-spike-color: #9400D3;
+
+  --status-category-todo-color: gray;
+  --status-category-inprogress-color: #2663ff;
+  --status-category-done-color: #00ff00;
+  --status-category-unknown-color: black;
+
+  --aging-work-bar-chart-percentage-line-color: red;
+  --aging-work-bar-chart-separator-color: white;
+
+  --throughput_chart_total_line_color: gray;
+
+  --aging-work-in-progress-chart-shading-color: lightgray;
+  --aging-work-in-progress-chart-shading-50-color: #2E8BC0;
+  --aging-work-in-progress-chart-shading-85-color: #ADD8E6;
+  --aging-work-in-progress-chart-shading-98-color: #FF8A8A;
+  --aging-work-in-progress-chart-shading-100-color: #FF2E2E;
+
+  --aging-work-in-progress-by-age-trend-line-color: gray;
+
+  --aging-work-table-date-in-jeopardy: yellow;
+  --aging-work-table-date-overdue: red;
+
+  --hierarchy-table-inactive-item-text-color: gray;
+
+  --wip-chart-completed-color: #00ff00;
+  --wip-chart-completed-but-not-started-color: #99FF99;
+  --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;
+  --wip-chart-active-color: #326cff;
+  --wip-chart-border-color: gray;
+
+  --wip-by-column-chart-bar-fill-color: #0072B2;
+  --wip-by-column-chart-bar-text-color: #ffffff;
+  --wip-by-column-chart-limit-line-color: #D55E00;
+  --wip-by-column-chart-recommendation-color: #009E73;
+
+  --estimate-accuracy-chart-completed-fill-color: #00ff00;
+  --estimate-accuracy-chart-completed-border-color: green;
+  --estimate-accuracy-chart-active-fill-color: #FFCCCB;
+  --estimate-accuracy-chart-active-border-color: red;
+
+  --expedited-chart-no-longer-expedited: gray;
+  --expedited-chart-dot-issue-started-color: orange;
+  --expedited-chart-dot-issue-stopped-color: green;
+  --expedited-chart-dot-expedite-started-color: red;
+  --expedited-chart-dot-expedite-stopped-color: green;
+
+  --sprint-burndown-sprint-color-1: blue;
+  --sprint-burndown-sprint-color-2: orange;
+  --sprint-burndown-sprint-color-3: green;
+  --sprint-burndown-sprint-color-4: red;
+  --sprint-burndown-sprint-color-5: brown;
+  --sprint-burndown-sprint-color-6: blue;    /* wraps back to color-1 (legacy had only 5) */
+  --sprint-burndown-sprint-color-7: orange;  /* wraps back to color-2 (legacy had only 5) */
+
+  --sprint-color: lightblue;
+
+  --daily-view-selected-issue-background: lightgray;
+  --daily-view-issue-border: green;
+  --daily-view-selected-issue-border: red;
+
+  --priority-color-highest: #dc2626;
+  --priority-color-high: #ea580c;
+  --priority-color-medium: #9ca3af;
+  --priority-color-low: #0891b2;
+  --priority-color-lowest: #64748b;
+  --priority-color-notset: gray;
+  --priority-color-critical: red;
+}
+
+/* Dark mode */
+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-by-column-chart-bar-fill-color: #56B4E9;
+  --wip-by-column-chart-bar-text-color: #000000;
+  --wip-by-column-chart-limit-line-color: #E69F00;
+  --wip-by-column-chart-recommendation-color: #2DCB9A;
+  --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;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --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;
+    --dead-color: black;
+    --wip-chart-active-color: #2551c1;
+    --status-category-inprogress-color: #1c49bb;
+    --cycletime-scatterplot-overall-trendline-color: gray;
+    --hierarchy-table-inactive-item-text-color: #939393;
+    --wip-by-column-chart-bar-fill-color: #56B4E9;
+    --wip-by-column-chart-bar-text-color: #000000;
+    --wip-by-column-chart-limit-line-color: #E69F00;
+    --wip-by-column-chart-recommendation-color: #2DCB9A;
+    --wip-chart-completed-color: #03cb03;
+    --wip-chart-completed-but-not-started-color: #99FF99;
+    --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-medium: #9ca3af;
+    --priority-color-low: #06b6d4;
+    --priority-color-lowest: #94a3b8;
+  }
+}

data/lib/jirametrics/html/sprint_burndown.erb

@@ -1,5 +1,6 @@
 <h2>Burndown by <%= y_axis_title %></h2>
 
+<%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
@@ -21,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: {
@@ -32,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 %>
@@ -56,32 +47,29 @@ 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: <%= CssVariable.new('--non-working-days-color').to_json %>,
-            borderColor: <%= CssVariable.new('--non-working-days-color').to_json %>
-          },
-          <% end %>
+          <%= working_days_annotation %>
         }
       }
     }
   }
 });
 </script>
+<%= seam_end %>
 
 <%
   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;">
+<section>
+<div class='foldable startFolded'>Show statistics</div>
+<div id="<%= issues_id %>">
+<%= seam_start 'stats_table' %>
 <table class='standard' style="margin-left: 1em;">
   <thead>
     <th>Sprint</th>
+    <th>Started</th>
+    <th>Completed</th>
+    <th>Days</th>
     <th>State</th>
     <th>Started</th>
     <th>Completed</th>
@@ -94,6 +82,9 @@ 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] %>
         <td><%= stats.started %></td>
@@ -110,6 +101,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     <% end %>
   </tbody>
 </table>
+<%= seam_end 'stats_table' %>
 
 <p>Legend:
   <ul>
@@ -118,4 +110,5 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     <% end %>
   </ul>
 </p>
-</div>
+</div>
+</section>

data/lib/jirametrics/html/throughput_chart.erb

@@ -1,8 +1,13 @@
-
+<%= seam_start %>
 <div class="chart">
   <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,28 +45,49 @@ 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: {
-          <% 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: <%= CssVariable.new('--non-working-days-color').to_json %>,
-            borderColor: <%= CssVariable.new('--non-working-days-color').to_json %>
-          },
-          <% end %>
+          <%= 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();
         }
       }
     }
   }
 });
 </script>
-
+<%= seam_end %>

data/lib/jirametrics/html/time_based_histogram.erb

@@ -0,0 +1,123 @@
+<div>
+<%= seam_start %>
+<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: 'bar',
+  data: {
+    datasets: <%= JSON.generate(data_sets) %>
+  },
+  options: {
+    responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
+    scales: {
+      x: {
+        type: 'linear',
+        stacked: true,
+        <%= 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,
+        <%= render_axis_title :y %>
+        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) {
+            return context.dataset.data[context.dataIndex].title
+          }
+        }
+      }
+    }
+  }
+});
+</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>