fhirsmith 0.18.2 → 1.0.0

package/tx/html/home-metrics.liquid

@@ -1,225 +0,0 @@
-<div style="display: flex; gap: 20px; margin-bottom: 20px;">
-  <div style="flex: 1;">
-    <h6>Memory Usage (Heap Used)</h6>
-    <canvas id="memoryChart" height="200"></canvas>
-  </div>
-  <div style="flex: 1;">
-    <h6>Requests per Minute</h6>
-    <canvas id="requestChart" height="200"></canvas>
-  </div>
-  <div style="flex: 1;">
-    <h6>Turnaround Time</h6>
-    <canvas id="tatChart" height="200"></canvas>
-  </div>
-</div>
-<div style="display: flex; gap: 20px; margin-bottom: 20px;">
-  <div style="flex: 1;">
-    <h6>Client Cache</h6>
-    <canvas id="clientCacheChart" height="200"></canvas>
-  </div>
-  <div style="flex: 1;">
-    <h6>Node Blocking (mean)</h6>
-    <canvas id="blockChart" height="200"></canvas>
-  </div>
-  <div style="flex: 1;">
-    <h6>Node Blocking (max)</h6>
-    <canvas id="blockMaxChart" height="200"></canvas>
-  </div>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script>
-(function() {
-  const historyData = {{ historyJson }};
-  const startTime = {{ startTime }};
-
-  function formatTime(timestamp) {
-    const d = new Date(timestamp);
-    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
-
-  function formatMB(bytes) {
-    return (bytes / 1024 / 1024).toFixed(1);
-  }
-
-  function formatDuration(ms) {
-    const hours = ms / 3600000;
-    if (hours < 1) {
-      return Math.round(ms / 60000) + 'm ago';
-    }
-    return hours.toFixed(1) + 'h ago';
-  }
-
-  const chartOptions = {
-    responsive: false,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        ticks: {
-          maxTicksAuto: 6
-        }
-      },
-      y: {
-        beginAtZero: true
-      }
-    },
-    plugins: {
-      legend: {
-        display: false
-      }
-    }
-  };
-
-  // Memory chart
-  new Chart(document.getElementById('memoryChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        data: historyData.map(d => parseFloat(formatMB(d.mem))),
-        borderColor: '#007bff',
-        backgroundColor: 'rgba(0, 123, 255, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'MB (𝚫 from start)'
-          }
-        }
-      }
-    }
-  });
-
-  // Tat chart
-  new Chart(document.getElementById('tatChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        data: historyData.map(d => d.tat),
-        borderColor: '#7b7b7b',
-        backgroundColor: 'rgba(123, 123, 123, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'ms'
-          }
-        }
-      }
-    }
-  });
-
-  // Client cache concepts chart
-  new Chart(document.getElementById('clientCacheChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        data: historyData.map(d => d.clientConcepts),
-        borderColor: '#ff7b00',
-        backgroundColor: 'rgba(255, 123, 0, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'Client Cache # concepts'
-          }
-        }
-      }
-    }
-  });
-
-  // Requests chart
-  new Chart(document.getElementById('requestChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        data: historyData.map(d => d.rpm.toFixed(2)),
-        borderColor: '#28a745',
-        backgroundColor: 'rgba(40, 167, 69, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'req/min'
-          }
-        }
-      }
-    }
-  });
-  // Blocking charts. Mean and max are separate charts because they are on different
-  // scales: a multi-second stall puts max in the thousands of ms while the mean sits at
-  // a few ms, so on one chart the mean is a flat line along the bottom.
-  function blockChart(id, field, colour, fill) {
-    new Chart(document.getElementById(id), {
-      type: 'line',
-      data: {
-        labels: historyData.map(d => formatTime(d.time)),
-        datasets: [{
-          data: historyData.map(d => d[field]),
-          borderColor: colour,
-          backgroundColor: fill,
-          fill: true,
-          tension: 0.3,
-          pointRadius: 2
-        }]
-      },
-      options: {
-        ...chartOptions,
-        scales: {
-          ...chartOptions.scales,
-          y: {
-            ...chartOptions.scales.y,
-            title: {
-              display: true,
-              text: 'ms'
-            }
-          }
-        }
-      }
-    });
-  }
-  // the average event-loop delay over each interval
-  blockChart('blockChart', 'block', '#2845a7', 'rgba(40, 69, 167, 0.1)');
-  // the worst single stall in each interval: the one that shows request-freezing blocks
-  blockChart('blockMaxChart', 'blockMax', '#a72828', 'rgba(167, 40, 40, 0.1)');
-})();
-</script>