jirametrics 2.0 → 2.12.1

data/lib/jirametrics/html/index.css

@@ -0,0 +1,280 @@
+:root {
+  --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; // green;
+  --aging-work-in-progress-chart-shading-85-color: #ADD8E6; // yellow;
+  --aging-work-in-progress-chart-shading-98-color: #FF8A8A; // orange;
+  --aging-work-in-progress-chart-shading-100-color: #FF2E2E; // red;
+  
+  --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;
+
+  --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;
+
+  --daily-view-selected-issue-background: lightgray;
+  --daily-view-issue-border: green;
+  --daily-view-selected-issue-border: red;
+
+}
+
+body {
+  background-color: var(--body-background);
+  color: var(--default-text-color);
+}
+
+h1 {
+  border: 1px solid black;
+  background: lightgray;
+  padding-left: 0.2em;
+}
+dl, dd, dt {
+  padding: 0;
+  margin: 0;
+}
+dd {
+  margin-bottom:  0.4em;
+}
+span.highlight {
+  background: #FDD5B1;
+}
+a.issue_key {
+  white-space: nowrap;
+}
+table.standard {
+  th {
+    border-bottom: 1px solid gray;
+    position: sticky;
+    top: 0;
+    background: white;
+  }
+  td {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    vertical-align: top;
+  }
+  tr:nth-child(odd){
+    background-color: #eee;
+  }
+}
+
+.chart {
+  background-color: white;
+}
+
+div.p {
+  margin: 0.5em 0;
+  padding: 0;
+}
+
+div.color_block {
+  display: inline-block;
+  width: 0.9em;
+  height: 0.9em;
+  border: 1px solid black;
+}
+
+ul.quality_report {
+  list-style-type: '⮕';
+  ::marker {
+    color: red;
+  }
+  li {
+    padding: 0.2em;
+  }
+}
+
+#footer {
+  text-align: center;
+  margin-top: 1em;
+  border-top: 1px solid gray;
+}
+
+div.daily_issue:hover {
+  background: var(--daily-view-selected-issue-background);
+  border-color: var(--daily-view-selected-issue-border);
+}
+
+div.daily_issue {
+  border: 1px solid var(--daily-view-issue-border);
+  padding: 0.5em;
+  .heading {
+    vertical-align: middle;
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 0.5em;
+    align-items: center;
+  }
+  table {
+    margin-left: 1em;
+    td {
+      vertical-align: top;
+    }
+    .time {
+      white-space: nowrap;
+      font-size: 0.8em;
+    }
+  }
+  .icon {
+    width: 1em;
+    height: 1em;
+  }
+  .account_id {
+    font-weight: bold;
+  }
+  .field {
+    border: 1px solid black;
+    color: white;
+    background: black;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    border-radius: 0.2em;
+  }
+  .label {
+    border: 1px solid black;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+    border-radius: 0.2em;
+  }
+  margin-bottom: 0.5em;
+}
+div.child_issue:hover {
+  background: var(--body-background);
+}
+div.child_issue {
+  border: 1px dashed green;
+  margin: 0.2em;
+  margin-left: 1.5em;
+  padding: 0.5em;
+}
+
+@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-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;
+  }
+
+  h1 {
+    color: #e0e0e0;
+    background-color: #656565;
+  }
+
+  a[href] {
+    color: #1e8ad6;
+  }
+
+  a[href]:hover {
+    color: #3ba0e6;
+  }
+
+  .chart {
+    background: var(--body-background);
+  }
+
+  table.standard {
+    th {
+      border-bottom: 1px solid gray;
+      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);
+    }
+  }
+}
+
+}

data/lib/jirametrics/html/index.erb

@@ -1,6 +1,7 @@
 <html>
   <head>
     <meta charset="UTF-8">
+    <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>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
@@ -17,49 +18,42 @@
           document.getElementById(issues_id).style.display = 'none'
         }
       }
+
+      function toggle_visibility(open_link_id, close_link_id, toggleable_id) {
+        let open_link = document.getElementById(open_link_id)
+        let close_link = document.getElementById(close_link_id)
+        let toggleable_element = document.getElementById(toggleable_id)
+
+        if(open_link.style.display == 'none') {
+          open_link.style.display = 'block'
+          close_link.style.display = 'none'
+          toggleable_element.style.display = 'none'
+        }
+        else {
+          open_link.style.display = 'none'
+          close_link.style.display = 'block'
+          toggleable_element.style.display = 'block'
+        }
+      }
+      // If we switch between light/dark mode then force a refresh so all charts will redraw correctly
+      // in the other colour scheme.
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        location.reload()
+      })
     </script>
     <style>
-      h1 {
-        border: 1px solid black;
-        background: lightgray;
-        padding-left: 0.2em;
-      }
-      dl, dd, dt {
-        padding: 0;
-        margin: 0;
-      }
-      dd {
-        margin-bottom:  0.4em;
-      }
-      span.highlight {
-        background: #FDD5B1;
-      }
-      a.issue_key {
-        white-space: nowrap;
-      }
-      table.standard thead tr th {
-        border-bottom: 1px solid gray;
-        position: sticky;
-        top: 0;
-        background: white;
-      }
-      table.standard tbody tr td {
-        padding-left: 0.5em;
-        padding-right: 0.5em;
-        vertical-align: top;
-      }
-      table.standard tbody tr:nth-child(odd){
-        background-color: #eee;
-      }
-      .quality_note_bullet {
-        color: red;
-      }
-      </style>
+<%= css %>
+    </style>
+    <script type="text/javascript">
+      Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--default-text-color');
+    </script>
   </head>
   <body>
-    <div>
-      Page generated <%= (timezone_offset.nil? ? DateTime.now : DateTime.now.new_offset(timezone_offset)).strftime('%Y-%b-%d at %I:%M:%S%P') %>
-    </div>
+    <noscript>
+      <div style="padding: 1em; background: gray; 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'd loaded this from a folder on SharePoint then save it locally and load it again.
+      </div>
+    </noscript>
     <%= "\n" + @sections.collect { |text, type| text if type == :header }.compact.join("\n\n") %>
     <%= "\n" + @sections.collect { |text, type| text if type == :body }.compact.join("\n\n") %>
   </body>

data/lib/jirametrics/html/sprint_burndown.erb

@@ -1,6 +1,6 @@
 <h2>Burndown by <%= y_axis_title %></h2>
 
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -26,8 +26,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           labelString: 'Date'
         },
         min: "<%= date_range.begin.to_s %>",
-        max: "<%= (date_range.end + 1).to_s %>"
-
+        max: "<%= (date_range.end + 1).to_s %>",
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
       y: {
         scaleLabel: {
@@ -38,7 +40,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: "<%= y_axis_title %>"
         },
-        min: 0.0
+        min: 0.0,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       }
     },
     plugins: {
@@ -51,16 +56,7 @@ 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 %>
         }
       }
     }

data/lib/jirametrics/html/throughput_chart.erb

@@ -1,5 +1,5 @@
 
-<div>
+<div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
 <script>
@@ -23,7 +23,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
         scaleLabel: {
           display: true,
           labelString: 'Date Completed'
-        }
+        },
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
       y: {
         scaleLabel: {
@@ -33,7 +36,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           text: 'Count of items'
         },
-        min: 0
+        min: 0,
+        grid: {
+          color: <%= CssVariable['--grid-line-color'].to_json %>
+        },
       },
     },
     plugins: {
@@ -46,16 +52,7 @@ 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 %>
         }
       }
     }