jirametrics 2.14 → 2.30

data/lib/jirametrics/html/cumulative_flow_diagram.erb

@@ -0,0 +1,503 @@
+<%= seam_start %>
+<div class="chart">
+  <label style="font-size:0.85em;display:block;text-align:right;margin-bottom:2px">
+    <input type="checkbox" id="<%= chart_id %>_triangle_toggle" checked>
+    Show flow metrics triangle
+  </label>
+  <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);
+  };
+}
+(function() {
+  const hatchWindows = <%= hatch_windows.to_json %>;
+
+  // Custom plugin: draws diagonal hatching over correction windows in the affected band.
+  // Uses createDiagonalPattern() defined in index.js.
+  const cfdHatchPlugin = {
+    id: 'cfdHatch',
+    afterDatasetsDraw: function(chart) {
+      // Redraw each correction-window border line so that the gaps between
+      // dashes show the band fill colour rather than being transparent.
+      // Strategy: draw a solid line in the fill colour first, then the dashed
+      // border line on top. afterDraw (hatching) fires after this, so the
+      // hatch pattern still appears over both lines.
+      const ctx = chart.ctx;
+      const ca  = chart.chartArea;
+      hatchWindows.forEach(function(win) {
+        const meta = chart.getDatasetMeta(win.dataset_index);
+        if (!meta || !meta.data.length) return;
+
+        const startX = chart.scales.x.getPixelForValue(new Date(win.start_date).getTime());
+        const endX   = chart.scales.x.getPixelForValue(new Date(win.end_date).getTime());
+        const lw     = chart.data.datasets[win.dataset_index].borderWidth || 2;
+        const points = meta.data.filter(function(p) { return p.x >= startX - 1 && p.x <= endX + 1; });
+        if (points.length < 2) return;
+
+        function drawSegment(color, dash) {
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(ca.left, ca.top, ca.width, ca.height);
+          ctx.clip();
+          ctx.strokeStyle = color;
+          ctx.setLineDash(dash);
+          ctx.lineWidth = lw;
+          ctx.beginPath();
+          ctx.moveTo(points[0].x, points[0].y);
+          for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+          ctx.stroke();
+          ctx.restore();
+        }
+
+        drawSegment(win.fill_color, []);      // solid fill colour fills the gaps
+        drawSegment(win.color,      [6, 4]);  // dashed border colour on top
+      });
+    },
+    afterDraw: function(chart) {
+      const ctx = chart.ctx;
+      const ca  = chart.chartArea;
+      hatchWindows.forEach(function(win) {
+        const meta = chart.getDatasetMeta(win.dataset_index);
+        if (!meta || !meta.data.length) return;
+
+        const startX = chart.scales.x.getPixelForValue(new Date(win.start_date).getTime());
+        const endX   = chart.scales.x.getPixelForValue(new Date(win.end_date).getTime());
+
+        // Draw hatched slices over the correction window.
+        // For stacked line charts, PointElement has no .base — derive the band bottom from the
+        // dataset directly below in the visual stack (dataset_index - 1, since datasets are
+        // stored reversed), or chart.chartArea.bottom for the lowest dataset.
+        // Use a trapezoid clip path per slice so hatching stays within the actual band boundary
+        // even when band height changes between data points.
+        const belowMeta = win.dataset_index > 0 ? chart.getDatasetMeta(win.dataset_index - 1) : null;
+        meta.data.forEach(function(point, i) {
+          if (point.x < startX || point.x > endX) return;
+          const prev       = i > 0 ? meta.data[i - 1] : null;
+          const sliceLeft  = Math.max(prev ? prev.x : startX, startX);
+          const sliceRight = Math.min(point.x, endX);
+          if (sliceLeft >= sliceRight) return;
+
+          const topLeft    = prev ? prev.y : point.y;
+          const topRight   = point.y;
+          const bottomLeft = belowMeta && prev && belowMeta.data[i - 1]
+            ? belowMeta.data[i - 1].y : chart.chartArea.bottom;
+          const bottomRight = belowMeta && belowMeta.data[i]
+            ? belowMeta.data[i].y : chart.chartArea.bottom;
+
+          if (Math.min(topLeft, topRight) >= Math.max(bottomLeft, bottomRight)) return;
+
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(ca.left, ca.top, ca.width, ca.height);
+          ctx.clip();
+          ctx.beginPath();
+          ctx.moveTo(sliceLeft,  topLeft);
+          ctx.lineTo(sliceRight, topRight);
+          ctx.lineTo(sliceRight, bottomRight);
+          ctx.lineTo(sliceLeft,  bottomLeft);
+          ctx.closePath();
+          ctx.clip();
+          ctx.fillStyle = createDiagonalPattern(win.color);
+          ctx.fillRect(sliceLeft, Math.min(topLeft, topRight),
+            sliceRight - sliceLeft, Math.max(bottomLeft, bottomRight) - Math.min(topLeft, topRight));
+          ctx.restore();
+        });
+      });
+    }
+  };
+
+  const cfdFlowMetricsPlugin = (function () {
+    const triangleColor  = <%= @triangle_color.to_json %>;
+    const arrivalColor   = <%= @arrival_rate_line_color.nil?   ? 'null' : @arrival_rate_line_color.to_json %>;
+    const departureColor = <%= @departure_rate_line_color.nil? ? 'null' : @departure_rate_line_color.to_json %>;
+    function buildArrays(chart) {
+      const ds = chart.data.datasets;
+      const n = ds[0].data.length;
+      const arrivals = [], departures = [];
+      for (let j = 0; j < n; j++) {
+        arrivals[j]   = ds.reduce((s, d) => s + (d.data[j]?.y || 0), 0);
+        // ds[0] is the Done (rightmost) column after dataset reversal.
+        // Its marginal equals its cumulative count (no column to its right),
+        // so this directly gives total departures. Assumes Done is not ignored via column_rules.
+        departures[j] = ds[0].data[j]?.y || 0;
+      }
+      return { arrivals, departures };
+    }
+
+    function linearRegression(yValues) {
+      const n = yValues.length;
+      const sumX  = n * (n - 1) / 2;
+      const sumX2 = n * (n - 1) * (2 * n - 1) / 6;
+      const sumY  = yValues.reduce((s, y) => s + y, 0);
+      const sumXY = yValues.reduce((s, y, i) => s + i * y, 0);
+      const denom = n * sumX2 - sumX * sumX;
+      if (denom === 0) return { slope: 0, intercept: sumY / n };
+      const slope = (n * sumXY - sumX * sumY) / denom;
+      return { slope, intercept: (sumY - slope * sumX) / n };
+    }
+
+    function trendPixelY(chart, reg, dayIndex) {
+      return chart.scales.y.getPixelForValue(reg.slope * dayIndex + reg.intercept);
+    }
+
+    function drawTrendLines(chart, fm) {
+      const ctx = chart.ctx;
+      const ca  = chart.chartArea;
+      const ds  = chart.data.datasets;
+      const n   = ds[0].data.length;
+      const x0  = chart.scales.x.getPixelForValue(new Date(ds[0].data[0].x).getTime());
+      const x1  = chart.scales.x.getPixelForValue(new Date(ds[0].data[n - 1].x).getTime());
+
+      function drawLine(reg, color) {
+        const y0 = trendPixelY(chart, reg, 0);
+        const y1 = trendPixelY(chart, reg, n - 1);
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(ca.left, ca.top, ca.width, ca.height);
+        ctx.clip();
+        ctx.setLineDash([6, 4]);
+        ctx.lineWidth = 1.5;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x1, y1);
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      if (arrivalColor !== null)   drawLine(fm.arrivalReg,   arrivalColor);
+      if (departureColor !== null) drawLine(fm.departureReg, departureColor);
+
+      // Edge labels (inside chart area, right-aligned to avoid canvas clipping)
+      if (arrivalColor !== null || departureColor !== null) {
+        ctx.save();
+        ctx.font = '10px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        const labelX = ca.right - 4;
+        if (arrivalColor !== null) {
+          ctx.fillStyle = arrivalColor;
+          ctx.fillText('Arrivals',   labelX, trendPixelY(chart, fm.arrivalReg,   n - 1));
+        }
+        if (departureColor !== null) {
+          ctx.fillStyle = departureColor;
+          ctx.fillText('Departures', labelX, trendPixelY(chart, fm.departureReg, n - 1));
+        }
+        ctx.restore();
+      }
+    }
+
+    function bgLabel(ctx, text, cx, cy) {
+      ctx.save();
+      ctx.font = '11px sans-serif';
+      const w = ctx.measureText(text).width;
+      ctx.fillStyle = 'rgba(0,0,0,0.55)';
+      ctx.fillRect(cx - w / 2 - 3, cy - 9, w + 6, 14);
+      ctx.fillStyle = '#ffffff';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(text, cx, cy - 2);
+      ctx.restore();
+    }
+
+    function drawTriangle(ctx, chart, fm) {
+      const ca    = chart.chartArea;
+      const ds    = chart.data.datasets;
+      const n     = ds[0].data.length;
+      const { arrivals, departures, dates } = fm;
+
+      // Locate cursor data index j
+      const cursorMs = chart.scales.x.getValueForPixel(fm.mouseX);
+      const j = dates.reduce((best, t, i) =>
+        Math.abs(t - cursorMs) < Math.abs(dates[best] - cursorMs) ? i : best, 0);
+
+      const wip = arrivals[j] - departures[j];
+      if (wip === 0) return;
+
+      // Find j_c: first index > j where departures[k] >= arrivals[j] (fixed threshold)
+      const threshold = arrivals[j];
+      let j_c = -1;
+      for (let k = j + 1; k < n; k++) {
+        if (departures[k] >= threshold) { j_c = k; break; }
+      }
+
+      const xA = chart.scales.x.getPixelForValue(dates[j]);
+      // Use Chart.js's own rendered pixel positions so the triangle edges
+      // align exactly with the drawn band edges rather than relying on
+      // getPixelForValue(arrivals/departures[j]), which can differ slightly
+      // from the internal stacked totals Chart.js uses when drawing.
+      const yA = chart.getDatasetMeta(ds.length - 1).data[j].y; // top of full stack
+      const yB = chart.getDatasetMeta(0).data[j].y;             // top of done band
+      const xC = j_c >= 0 ? chart.scales.x.getPixelForValue(dates[j_c]) : null;
+
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(ca.left, ca.top, ca.width, ca.height);
+      ctx.clip();
+
+      // Triangle fill (only when C is within range)
+      if (xC !== null) {
+        ctx.beginPath();
+        ctx.moveTo(xA, yA);
+        ctx.lineTo(xA, yB);
+        ctx.lineTo(xC, yA);
+        ctx.closePath();
+        ctx.fillStyle = 'rgba(255,255,255,0.06)';
+        ctx.fill();
+      }
+
+      // AB: vertical (WIP)
+      ctx.setLineDash([]);
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = triangleColor;
+      ctx.beginPath();
+      ctx.moveTo(xA, yA);
+      ctx.lineTo(xA, yB);
+      ctx.stroke();
+
+      if (xC !== null) {
+        // AC: horizontal (cycle time)
+        ctx.beginPath();
+        ctx.moveTo(xA, yA);
+        ctx.lineTo(xC, yA);
+        ctx.stroke();
+        // BC: dashed hypotenuse (throughput)
+        ctx.setLineDash([4, 2]);
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(xA, yB);
+        ctx.lineTo(xC, yA);
+        ctx.stroke();
+      }
+
+      ctx.restore();
+
+      // Labels
+      const abMidY = (yA + yB) / 2;
+      // WIP: right-aligned, left of AB
+      ctx.save();
+      ctx.font = '11px sans-serif';
+      const wipText = 'WIP: ' + wip;
+      const wipW = ctx.measureText(wipText).width;
+      ctx.fillStyle = 'rgba(0,0,0,0.55)';
+      ctx.fillRect(xA - wipW - 8, abMidY - 9, wipW + 6, 14);
+      ctx.fillStyle = '#ffffff';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(wipText, xA - 5, abMidY - 2);
+      ctx.restore();
+
+      if (xC !== null) {
+        const cycleTime = j_c - j;
+        const throughput = (wip / cycleTime).toFixed(2);
+        bgLabel(ctx, '~CT: ' + cycleTime + ' days', (xA + xC) / 2, yA - 10);
+        bgLabel(ctx, '~TP: ' + throughput + '/day', (xA + xC) / 2, (yA + yB) / 2 + 12);
+      }
+    }
+
+    return {
+      id: 'cfdFlowMetrics',
+
+      afterInit(chart) {
+        // Guard against being applied to non-CFD charts (Chart.js may fire
+        // inline plugin hooks on other charts when plugins share an id with
+        // a cached entry).
+        const ds = chart.data.datasets;
+        if (!ds || !ds[0] || !ds[0].data || !ds[0].data.length) return;
+
+        const { arrivals, departures } = buildArrays(chart);
+        const dates = chart.data.datasets[0].data.map(d => new Date(d.x).getTime());
+        chart._flowMetrics = {
+          mouseX:      null,
+          arrivals,
+          departures,
+          dates,
+          arrivalReg:  linearRegression(arrivals),
+          departureReg: linearRegression(departures)
+        };
+        const fm = chart._flowMetrics;
+        const canvas = chart.canvas;
+
+        // The triangle is drawn on a separate overlay canvas using native DOM
+        // events, completely bypassing Chart.js's render/event cycle (which
+        // behaves unreliably in Safari). The triangle is hidden immediately on
+        // mouse move and redrawn after a short pause (debounce), preventing the
+        // browser from being overwhelmed by rapid redraws.
+        const dpr     = window.devicePixelRatio || 1;
+        const parent = canvas.parentNode;
+        if (getComputedStyle(parent).position === 'static') parent.style.position = 'relative';
+        // Read canvas.offsetTop/Left after parent is positioned so they are
+        // relative to parent — this accounts for the label/checkbox above the
+        // canvas that would otherwise shift the overlay upward.
+        const overlay = document.createElement('canvas');
+        overlay.width  = canvas.width;
+        overlay.height = canvas.height;
+        overlay.style.cssText = 'position:absolute;top:' + canvas.offsetTop + 'px;' +
+          'left:' + canvas.offsetLeft + 'px;pointer-events:none;' +
+          'width:'  + (canvas.style.width  || (canvas.width  / dpr) + 'px') + ';' +
+          'height:' + (canvas.style.height || (canvas.height / dpr) + 'px') + ';';
+        parent.insertBefore(overlay, canvas.nextSibling);
+
+        const octx  = overlay.getContext('2d');
+        octx.scale(dpr, dpr);
+        const cssW = canvas.width  / dpr;
+        const cssH = canvas.height / dpr;
+        fm._overlay = overlay;
+
+        // Store overlay state on fm so afterDraw can reach it.
+        fm._overlayCtx     = octx;
+        fm._cssW           = cssW;
+        fm._cssH           = cssH;
+        fm._triangleEnabled = true;
+        fm._rafId          = null;
+
+        // Checkbox toggles between triangle mode and tooltip mode. They are
+        // mutually exclusive: in triangle mode, Chart.js event processing is
+        // disabled entirely so its internal hover/tooltip logic cannot interfere
+        // with the overlay canvas rAF (which hangs Safari at certain positions).
+        // Our native canvas mousemove handler is unaffected by this setting.
+        const defaultEvents = ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'];
+
+        function setTriangleMode(enabled) {
+          fm._triangleEnabled = enabled;
+          if (enabled) {
+            chart.options.events = [];
+            chart.options.plugins.tooltip.enabled = false;
+          } else {
+            chart.options.events = defaultEvents;
+            chart.options.plugins.tooltip.enabled = true;
+            octx.clearRect(0, 0, cssW, cssH);
+          }
+          chart.update('none');
+        }
+
+        const checkbox = document.getElementById('<%= chart_id %>_triangle_toggle');
+        if (checkbox) {
+          checkbox.addEventListener('change', function () { setTriangleMode(this.checked); });
+        }
+        // Apply initial triangle mode without triggering a redundant update
+        // (tooltip is already disabled in the chart config; just silence events).
+        chart.options.events = [];
+
+        function scheduleOverlayRedraw() {
+          if (fm._rafId !== null) return;
+          fm._rafId = requestAnimationFrame(function () {
+            fm._rafId = null;
+            if (fm._triangleEnabled) {
+              octx.clearRect(0, 0, cssW, cssH);
+              if (fm.mouseX !== null) drawTriangle(octx, chart, fm);
+            }
+          });
+        }
+
+        function onMouseMove(e) {
+          const rect = canvas.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+          const ca = chart.chartArea;
+          if (!ca) return;
+          fm.mouseX = (x >= ca.left && x <= ca.right && y >= ca.top && y <= ca.bottom) ? x : null;
+          scheduleOverlayRedraw();
+        }
+
+        function onMouseLeave() {
+          fm.mouseX = null;
+          scheduleOverlayRedraw();
+        }
+
+        canvas.addEventListener('mousemove',  onMouseMove);
+        canvas.addEventListener('mouseleave', onMouseLeave);
+        fm._onMouseMove  = onMouseMove;
+        fm._onMouseLeave = onMouseLeave;
+      },
+
+      destroy(chart) {
+        const fm = chart._flowMetrics;
+        if (!fm) return;
+        chart.canvas.removeEventListener('mousemove',  fm._onMouseMove);
+        chart.canvas.removeEventListener('mouseleave', fm._onMouseLeave);
+        if (fm._overlay && fm._overlay.parentNode) fm._overlay.parentNode.removeChild(fm._overlay);
+      },
+
+      afterDraw(chart) {
+        const fm = chart._flowMetrics;
+        if (!fm) return;
+        drawTrendLines(chart, fm);
+        // Triangle is on the overlay canvas — no drawing needed here.
+      }
+    };
+  })();
+
+  new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
+    type: 'line',
+    plugins: [cfdHatchPlugin, cfdFlowMetricsPlugin],
+    data: {
+      datasets: <%= JSON.generate(data_sets) %>
+    },
+    options: {
+      responsive: <%= canvas_responsive? %>,
+      scales: {
+        x: {
+          type: 'time',
+          time: { format: 'YYYY-MM-DD' },
+          min: "<%= date_range.begin.to_s %>",
+          max: "<%= (date_range.end + 1).to_s %>",
+          grid: { color: <%= CssVariable['--grid-line-color'].to_json %> }
+        },
+        y: {
+          stacked: true,
+          min: 0,
+          title: { display: true, text: 'Number of items' },
+          grid: { color: <%= CssVariable['--grid-line-color'].to_json %> }
+        }
+      },
+      elements: {
+        point: { radius: 0 }
+      },
+      plugins: {
+        tooltip: {
+          enabled: false,
+          position: 'legendItem',
+          callbacks: {
+            title: function(contexts) {
+              if (contexts[0]?.chart._legendHoverIndex != null) return '';
+            },
+            label: function(context) {
+              if (context.chart._legendHoverIndex != null) {
+                return context.dataset.label_hint || '';
+              }
+            }
+          }
+        },
+        legend: {
+          reverse: true,
+          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/daily_wip_chart.erb

@@ -1,7 +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: 'bar',
@@ -20,7 +26,10 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
         time: {
           unit: 'day'
         },
+        min: "<%= date_range.begin.to_s %>",
+        max: "<%= (date_range.end + 1).to_s %>",
         stacked: true,
+        <%= render_axis_title :x %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -31,10 +40,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
           display: true,
           labelString: 'WIP'
         },
-        title: {
-          display: true,
-          text: 'Count of items'
-        },
+        <%= render_axis_title :y %>
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
@@ -42,18 +48,46 @@ 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();
+        },
         labels: {
           filter: function(item, chart) {
             // Logic to remove a particular legend item goes here
@@ -65,3 +99,4 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'),
   }
 });
 </script>
+<%= seam_end %>

data/lib/jirametrics/html/estimate_accuracy_chart.erb

@@ -1,3 +1,4 @@
+<%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
@@ -8,10 +9,6 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     datasets: <%= JSON.generate(data_sets) %>
   },
   options: {
-    title: {
-      display: true,
-      text: "Sprint Burndown"
-    },
     responsive: <%= canvas_responsive? %>, // If responsive is true then it fills the screen
     scales: {
       x: {
@@ -20,10 +17,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           labelString: 'Date'
         },
-        title: {
-          display: true,
-          text: "Cycletime (days)"
-        },
+        <%= render_axis_title :x %>
         min: 0,
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
@@ -38,10 +32,7 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
           display: true,
           labelString: 'Items remaining'
         },
-        title: {
-          display: true,
-          text: "<%= @y_axis_label %>"
-        },
+        <%= render_axis_title :y %>
         min: 0.0,
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
@@ -60,3 +51,4 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
   }
 });
 </script>
+<%= seam_end %>

data/lib/jirametrics/html/expedited_chart.erb

@@ -1,3 +1,4 @@
+<%= seam_start %>
 <div class="chart">
   <canvas id="<%= chart_id %>" width="<%= canvas_width %>" height="<%= canvas_height %>"></canvas>
 </div>
@@ -19,25 +20,15 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     scales: {
       x: {
         type: "time",
-        scaleLabel: {
-          display: true,
-          labelString: 'Date Completed'
-        },
+        <%= render_axis_title :x %>
         min: "<%= date_range.begin.to_s %>",
-        max: "<%= date_range.end.to_s %>",
+        max: "<%= (date_range.end + 1).to_s %>",
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
         },
       },
       y: {
-        scaleLabel: {
-          display: true,
-          labelString: 'Days'
-        },
-        title: {
-          display: true,
-          text: 'Age in days'
-        },        
+        <%= render_axis_title :y %>
         min: 0,
         grid: {
           color: <%= CssVariable['--grid-line-color'].to_json %>
@@ -61,4 +52,5 @@ new Chart(document.getElementById('<%= chart_id %>').getContext('2d'), {
     }
   }
 });
-</script>
+</script>
+<%= seam_end %>