jirametrics 2.13 → 2.30

data/lib/jirametrics/html/flow_efficiency_scatterplot.erb

@@ -1,3 +1,4 @@
+<%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
@@ -19,10 +20,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           labelString: 'Days'
         },
-        title: {
-          display: true,
-          text: 'Total time (days)'
-        },
+        <%= render_axis_title :x %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -35,10 +33,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           min: 0,
           max: <%= @highest_cycletime %>
         },
-        title: {
-          display: true,
-          text: 'Time adding value (days)'
-        },
+        <%= render_axis_title :y %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -83,3 +78,4 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   }
 });
 </script>
+<%= seam_start %>

data/lib/jirametrics/html/index.css

@@ -7,82 +7,98 @@
   --cycletime-scatterplot-overall-trendline-color: gray;
 
   --non-working-days-color: #F0F0F0;
-  --expedited-color: red;
-  --blocked-color: #FF7400;
-  --stalled-color: orange;
+  --expedited-color: #D55E00;        /* Okabe-Ito vermilion */
+  --blocked-color: #D55E00;          /* Okabe-Ito vermilion */
+  --stalled-color: #E69F00;          /* Okabe-Ito orange */
   --dead-color: black;
 
-  --type-story-color: #4bc14b;
-  --type-task-color: blue;
-  --type-bug-color: orange;
-  --type-spike-color: #9400D3;
+  --type-story-color: #009E73;       /* Okabe-Ito bluish green */
+  --type-task-color: #0072B2;        /* Okabe-Ito blue */
+  --type-bug-color: #D55E00;         /* Okabe-Ito vermilion */
+  --type-spike-color: #CC79A7;       /* Okabe-Ito reddish purple */
 
   --status-category-todo-color: gray;
-  --status-category-inprogress-color: #2663ff;
-  --status-category-done-color: #00ff00;
+  --status-category-inprogress-color: #0072B2;  /* Okabe-Ito blue */
+  --status-category-done-color: #009E73;         /* Okabe-Ito bluish green */
   --status-category-unknown-color: black;
 
-  --aging-work-bar-chart-percentage-line-color: red;
+  --aging-work-bar-chart-percentage-line-color: #D55E00;  /* Okabe-Ito vermilion */
   --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-chart-shading-50-color: #56B4E9;   /* Okabe-Ito sky blue */
+  --aging-work-in-progress-chart-shading-85-color: #F0E442;   /* Okabe-Ito yellow */
+  --aging-work-in-progress-chart-shading-98-color: #E69F00;   /* Okabe-Ito orange */
+  --aging-work-in-progress-chart-shading-100-color: #D55E00;  /* Okabe-Ito vermilion */
+
   --aging-work-in-progress-by-age-trend-line-color: gray;
-  
-  --aging-work-table-date-in-jeopardy: yellow;
-  --aging-work-table-date-overdue: red;
+
+  --aging-work-table-date-in-jeopardy: #F0E442;  /* Okabe-Ito yellow */
+  --aging-work-table-date-overdue: #D55E00;       /* Okabe-Ito vermilion */
 
   --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-completed-color: #009E73;                     /* Okabe-Ito bluish green */
+  --wip-chart-completed-but-not-started-color: #92D9C0;     /* light bluish green */
+  --wip-chart-duration-less-than-day-color: #56B4E9;        /* Okabe-Ito sky blue */
+  --wip-chart-duration-week-or-less-color: #F0E442;         /* Okabe-Ito yellow */
+  --wip-chart-duration-two-weeks-or-less-color: #E69F00;    /* Okabe-Ito orange */
+  --wip-chart-duration-four-weeks-or-less-color: #D55E00;   /* Okabe-Ito vermilion */
+  --wip-chart-duration-more-than-four-weeks-color: #CC79A7; /* Okabe-Ito reddish purple */
+  --wip-chart-active-color: #0072B2;                        /* Okabe-Ito blue */
   --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;
+  --wip-by-column-chart-bar-fill-color: #0072B2;          /* Okabe-Ito blue */
+  --wip-by-column-chart-bar-text-color: #ffffff;
+  --wip-by-column-chart-limit-line-color: #D55E00;        /* Okabe-Ito vermilion */
+  --wip-by-column-chart-recommendation-color: #009E73;    /* Okabe-Ito bluish green */
+
+  --estimate-accuracy-chart-completed-fill-color: #92D9C0;    /* light bluish green */
+  --estimate-accuracy-chart-completed-border-color: #009E73;  /* Okabe-Ito bluish green */
+  --estimate-accuracy-chart-active-fill-color: #F4C6AD;       /* light vermilion */
+  --estimate-accuracy-chart-active-border-color: #D55E00;     /* Okabe-Ito vermilion */
 
   --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;
+  --expedited-chart-dot-issue-started-color: #E69F00;     /* Okabe-Ito orange */
+  --expedited-chart-dot-issue-stopped-color: #009E73;     /* Okabe-Ito bluish green */
+  --expedited-chart-dot-expedite-started-color: #D55E00;  /* Okabe-Ito vermilion */
+  --expedited-chart-dot-expedite-stopped-color: #009E73;  /* Okabe-Ito bluish 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-1: #0072B2;  /* Okabe-Ito blue */
+  --sprint-burndown-sprint-color-2: #E69F00;  /* Okabe-Ito orange */
+  --sprint-burndown-sprint-color-3: #009E73;  /* Okabe-Ito bluish green */
+  --sprint-burndown-sprint-color-4: #D55E00;  /* Okabe-Ito vermilion */
+  --sprint-burndown-sprint-color-5: #CC79A7;  /* Okabe-Ito reddish purple */
+  --sprint-burndown-sprint-color-6: #56B4E9;  /* Okabe-Ito sky blue */
+  --sprint-burndown-sprint-color-7: #F0E442;  /* Okabe-Ito yellow */
 
-  --daily-view-selected-issue-background: lightgray;
-  --daily-view-issue-border: green;
-  --daily-view-selected-issue-border: red;
+  --sprint-color: #56B4E9;  /* Okabe-Ito sky blue */
 
+  --daily-view-selected-issue-background: lightgray;
+  --daily-view-issue-border: #009E73;          /* Okabe-Ito bluish green */
+  --daily-view-selected-issue-border: #D55E00; /* Okabe-Ito vermilion */
+
+  /* The first five are the standard priorities that Jira creates by default. */
+  --priority-color-highest: #dc2626;  /* red-600 - urgent red */
+  --priority-color-high: #ea580c;     /* orange-600 - warning orange */
+  --priority-color-medium: #9ca3af;   /* gray-400 - neutral light gray */
+  --priority-color-low: #0891b2;      /* cyan-600 - calm blue */
+  --priority-color-lowest: #64748b;   /* slate-500 - muted slate */
+  /* Then here are some values we've seen in multiple instances. */
+  --priority-color-notset: gray;
+  --priority-color-critical: red;
 }
 
 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;
 }
 
-h1 {
-  border: 1px solid black;
-  background: lightgray;
-  padding-left: 0.2em;
-}
 dl, dd, dt {
   padding: 0;
   margin: 0;
@@ -191,6 +207,11 @@ div.daily_issue {
     padding-right: 0.2em;
     border-radius: 0.2em;
   }
+  h1 {
+    border: none;
+    background: none;
+    padding-left: 0;
+  }
   margin-bottom: 0.5em;
 }
 div.child_issue:hover {
@@ -203,45 +224,204 @@ 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: #2DCB9A;       /* lighter bluish green for dark bg */
+  --type-task-color: #56B4E9;        /* sky blue for dark bg */
+  --type-bug-color: #E69F00;         /* orange instead of vermilion for dark bg */
+  --body-background: #343434;
+  --default-text-color: #aaa;
+  --grid-line-color: #424242;
+  --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 */
+  --wip-chart-active-color: #56B4E9; /* sky blue for dark bg */
+  --status-category-inprogress-color: #56B4E9;  /* sky blue for dark bg */
+  --status-category-done-color: #2DCB9A;         /* lighter bluish green for dark bg */
+  --hierarchy-table-inactive-item-text-color: #939393;
+  --wip-by-column-chart-bar-fill-color: #56B4E9;          /* Okabe-Ito sky blue */
+  --wip-by-column-chart-bar-text-color: #000000;
+  --wip-by-column-chart-limit-line-color: #E69F00;        /* Okabe-Ito orange */
+  --wip-by-column-chart-recommendation-color: #2DCB9A;    /* lighter bluish green for dark bg */
+  --wip-chart-completed-color: #2DCB9A;                   /* lighter bluish green */
+  --wip-chart-duration-more-than-four-weeks-color: #DE9AC4; /* lighter reddish purple */
+  --estimate-accuracy-chart-completed-border-color: #2DCB9A;
+  --estimate-accuracy-chart-active-border-color: #E69F00;
+  --expedited-chart-dot-issue-stopped-color: #2DCB9A;
+  --expedited-chart-dot-expedite-started-color: #E69F00;
+  --expedited-chart-dot-expedite-stopped-color: #2DCB9A;
+  --sprint-burndown-sprint-color-1: #56B4E9;  /* sky blue */
+  --sprint-burndown-sprint-color-3: #2DCB9A;  /* lighter bluish green */
+  --sprint-burndown-sprint-color-4: #CC79A7;  /* reddish purple (vermilion → orange conflicts with color-2) */
+  --sprint-burndown-sprint-color-5: #F0E442;  /* yellow */
+  --sprint-burndown-sprint-color-6: #D55E00;  /* vermilion (sky blue conflicts with color-1) */
+  --sprint-burndown-sprint-color-7: #92D9C0;  /* light teal (yellow conflicts with color-5) */
+  --daily-view-selected-issue-background: #474747;
+  --daily-view-issue-border: #2DCB9A;
+  --daily-view-selected-issue-border: #E69F00;
+  --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: #009E73;       /* Okabe-Ito bluish green */
+  --type-task-color: #0072B2;        /* Okabe-Ito blue */
+  --type-bug-color: #D55E00;         /* Okabe-Ito vermilion */
+  --body-background: white;
+  --default-text-color: black;
+  --grid-line-color: lightgray;
+  --expedited-color: #D55E00;        /* Okabe-Ito vermilion */
+  --blocked-color: #D55E00;          /* Okabe-Ito vermilion */
+  --stalled-color: #E69F00;          /* Okabe-Ito orange */
+  --wip-chart-active-color: #0072B2; /* Okabe-Ito blue */
+  --status-category-inprogress-color: #0072B2;  /* Okabe-Ito blue */
+  --status-category-done-color: #009E73;         /* Okabe-Ito bluish green */
+  --hierarchy-table-inactive-item-text-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;
+  --wip-chart-completed-color: #009E73;                     /* Okabe-Ito bluish green */
+  --wip-chart-completed-but-not-started-color: #92D9C0;
+  --wip-chart-duration-less-than-day-color: #56B4E9;
+  --wip-chart-duration-week-or-less-color: #F0E442;
+  --wip-chart-duration-two-weeks-or-less-color: #E69F00;
+  --wip-chart-duration-four-weeks-or-less-color: #D55E00;
+  --wip-chart-duration-more-than-four-weeks-color: #CC79A7;
+  --daily-view-selected-issue-background: lightgray;
+  --daily-view-issue-border: #009E73;
+  --daily-view-selected-issue-border: #D55E00;
+  --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;
 
     --non-working-days-color: #2f2f2f;
-    --type-story-color: #6fb86f;
-    --type-task-color: #0021b3;
-    --type-bug-color: #bb5603;
+    --type-story-color: #2DCB9A;       /* lighter bluish green for dark bg */
+    --type-task-color: #56B4E9;        /* sky blue for dark bg */
+    --type-bug-color: #E69F00;         /* orange instead of vermilion for dark bg */
 
     --body-background: #343434;
     --default-text-color: #aaa;
     --grid-line-color: #424242;
 
-    --expedited-color: #b90000;
-    --blocked-color: #c75b02;
-    --stalled-color: #ae7202;
+    --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 */
     --dead-color: black;
-    --wip-chart-active-color: #2551c1;
+    --wip-chart-active-color: #56B4E9; /* sky blue for dark bg */
+
+    --status-category-inprogress-color: #56B4E9;  /* sky blue for dark bg */
+    --status-category-done-color: #2DCB9A;         /* lighter bluish green for dark bg */
 
-    --status-category-inprogress-color: #1c49bb;
+    --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;
 
     --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;
+    --wip-chart-completed-color: #2DCB9A;                   /* lighter bluish green */
+    --wip-chart-completed-but-not-started-color: #92D9C0;
+    --wip-chart-duration-less-than-day-color: #56B4E9;
+    --wip-chart-duration-week-or-less-color: #F0E442;
+    --wip-chart-duration-two-weeks-or-less-color: #E69F00;
+    --wip-chart-duration-four-weeks-or-less-color: #D55E00;
+    --wip-chart-duration-more-than-four-weeks-color: #DE9AC4; /* lighter reddish purple */
 
-    --daily-view-selected-issue-background: #474747;
-  }
+    --estimate-accuracy-chart-completed-border-color: #2DCB9A;
+    --estimate-accuracy-chart-active-border-color: #E69F00;
 
-  h1 {
-    color: #e0e0e0;
-    background-color: #656565;
+    --expedited-chart-dot-issue-stopped-color: #2DCB9A;
+    --expedited-chart-dot-expedite-started-color: #E69F00;
+    --expedited-chart-dot-expedite-stopped-color: #2DCB9A;
+
+    --sprint-burndown-sprint-color-1: #56B4E9;  /* sky blue */
+    --sprint-burndown-sprint-color-3: #2DCB9A;  /* lighter bluish green */
+    --sprint-burndown-sprint-color-4: #CC79A7;  /* reddish purple (vermilion → orange conflicts with color-2) */
+    --sprint-burndown-sprint-color-5: #F0E442;  /* yellow */
+    --sprint-burndown-sprint-color-6: #D55E00;  /* vermilion (sky blue conflicts with color-1) */
+    --sprint-burndown-sprint-color-7: #92D9C0;  /* light teal (yellow conflicts with color-5) */
+
+    --daily-view-selected-issue-background: #474747;
+    --daily-view-issue-border: #2DCB9A;
+    --daily-view-selected-issue-border: #E69F00;
+
+    --priority-color-highest: #ef4444;  /* red-500 - bright urgent red */
+    --priority-color-high: #f97316;     /* orange-500 - bright orange */
+    --priority-color-medium: #9ca3af;   /* gray-400 - neutral light gray */
+    --priority-color-low: #06b6d4;      /* cyan-500 - bright calm blue */
+    --priority-color-lowest: #94a3b8;   /* slate-400 - muted light slate */
   }
 
   a[href] {
@@ -277,4 +457,4 @@ div.child_issue {
   }
 }
 
-}
+}

data/lib/jirametrics/html/index.erb

@@ -1,45 +1,14 @@
 <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>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.2.2/chartjs-plugin-annotation.min.js" integrity="sha512-HycvvBSFvDEVyJ0tjE2rPmymkt6XqsP/Zo96XgLRjXwn6SecQqsn+6V/7KYev66OshZZ9+f9AttCGmYqmzytiw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.1.0/chartjs-plugin-annotation.min.js"></script>
     <script type="text/javascript">
-      function expand_collapse(link_id, issues_id)  {
-        link_text = document.getElementById(link_id).textContent
-        if( link_text == 'Show details') {
-          document.getElementById(link_id).textContent = 'Hide details'
-          document.getElementById(issues_id).style.display = 'block'
-        }
-        else {
-          document.getElementById(link_id).textContent = 'Show details'
-          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()
-      })
+<%= javascript %>
     </script>
     <style>
 <%= css %>
@@ -49,12 +18,17 @@
     </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.
       </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") %>
+    <%= "\n" + @sections.collect { |text, type| text if type != :header }.compact.join("\n\n") %>
   </body>
 </html>

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')
+}