···
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cachet Analytics Dashboard</title>
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
+
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
···
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
justify-content: space-between;
+
border-bottom: 1px solid #e2e8f0;
···
+
justify-content: center;
+
padding: 0.75rem 1.25rem;
+
border: 1px solid #d1d5db;
+
transition: all 0.2s ease;
+
.controls select:hover,
+
.controls select:focus {
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+
transform: translateY(-1px);
+
.controls button:disabled {
···
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
border: 1px solid #e2e8f0;
+
transition: all 0.2s ease;
+
flex-direction: column;
+
justify-content: center;
+
transform: translateY(-2px);
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
.stat-card.loading::after {
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+
animation: shimmer 1.5s infinite;
+
margin-bottom: 0.25rem;
+
word-break: break-word;
+
overflow-wrap: break-word;
+
/* Responsive font sizing using clamp() */
+
font-size: clamp(1.25rem, 4vw, 2.5rem);
+
/* Responsive font sizing for labels */
+
font-size: clamp(0.75rem, 2vw, 0.875rem);
+
/* Container query support for modern browsers */
+
@supports (container-type: inline-size) {
+
container-type: inline-size;
+
@container (max-width: 250px) {
+
@container (min-width: 300px) {
+
@container (min-width: 400px) {
···
+
@media (max-width: 480px) {
+
grid-template-columns: 1fr;
+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+
font-size: clamp(0.9rem, 4vw, 1.5rem) !important;
+
font-size: clamp(0.65rem, 2.5vw, 0.75rem) !important;
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
border: 1px solid #e2e8f0;
+
flex-direction: column;
+
.chart-container.loading {
+
justify-content: center;
+
.chart-container.loading::before {
+
content: 'Loading chart...';
+
word-break: break-word;
+
overflow-wrap: break-word;
+
.chart-title-with-indicator {
+
justify-content: space-between;
+
.chart-title-with-indicator .chart-title {
+
border: 3px solid #e2e8f0;
+
border-top-color: #3b82f6;
+
animation: spin 1s ease-in-out infinite;
+
to { transform: rotate(360deg); }
+
border: 1px solid #fecaca;
.auto-refresh input[type="checkbox"] {
+
.performance-indicator {
+
.performance-indicator.good { color: #059669; }
+
.performance-indicator.warning { color: #d97706; }
+
.performance-indicator.error { color: #dc2626; }
+
justify-content: center;
+
background: transparent;
@media (max-width: 768px) {
···
+
flex-direction: column;
+
font-size: clamp(1rem, 5vw, 1.75rem) !important;
+
font-size: clamp(0.7rem, 3vw, 0.8rem) !important;
+
flex-direction: column;
+
align-items: flex-start;
+
transform: translateX(100%);
+
transition: transform 0.3s ease;
+
transform: translateX(0);
···
<option value="7" selected>Last 7 days</option>
<option value="30">Last 30 days</option>
+
<button id="refreshBtn" onclick="loadData()">Refresh</button>
<div class="auto-refresh">
<input type="checkbox" id="autoRefresh" />
<label for="autoRefresh">Auto-refresh (30s)</label>
+
<div id="loading" class="loading">
+
<div class="loading-spinner"></div>
+
Loading analytics data...
<div id="error" class="error" style="display: none"></div>
<div id="content" style="display: none">
+
<!-- Key Metrics Overview -->
<div class="chart-container" style="margin-bottom: 2rem; height: 450px">
+
<div class="chart-title-with-indicator">
+
<div class="chart-title">Traffic Overview - All Routes Over Time</div>
+
<span class="performance-indicator" id="trafficPerformance"></span>
id="trafficOverviewChart"
style="padding-bottom: 2rem"
+
<div class="stat-card" id="totalRequestsCard">
<div class="stat-number" id="totalRequests">-</div>
<div class="stat-label">Total Requests</div>
+
<div class="stat-card" id="avgResponseTimeCard">
<div class="stat-number" id="avgResponseTime">-</div>
<div class="stat-label">Avg Response Time (ms)</div>
+
<div class="stat-card" id="p95ResponseTimeCard">
<div class="stat-number" id="p95ResponseTime">-</div>
<div class="stat-label">P95 Response Time (ms)</div>
+
<div class="stat-card" id="uniqueEndpointsCard">
<div class="stat-number" id="uniqueEndpoints">-</div>
<div class="stat-label">Unique Endpoints</div>
+
<div class="stat-card" id="errorRateCard">
<div class="stat-number" id="errorRate">-</div>
<div class="stat-label">Error Rate (%)</div>
+
<div class="stat-card" id="fastRequestsCard">
<div class="stat-number" id="fastRequests">-</div>
<div class="stat-label">Fast Requests (<100ms)</div>
+
<div class="stat-card" id="uptimeCard">
<div class="stat-number" id="uptime">-</div>
<div class="stat-label">Uptime (%)</div>
+
<div class="stat-card" id="throughputCard">
<div class="stat-number" id="throughput">-</div>
<div class="stat-label">Throughput (req/hr)</div>
+
<div class="stat-card" id="apdexCard">
<div class="stat-number" id="apdex">-</div>
<div class="stat-label">APDEX Score</div>
+
<div class="stat-card" id="cacheHitRateCard">
<div class="stat-number" id="cacheHitRate">-</div>
<div class="stat-label">Cache Hit Rate (%)</div>
+
<!-- Peak Traffic Stats -->
+
<div class="stat-card" id="peakHourCard">
<div class="stat-number" id="peakHour">-</div>
<div class="stat-label">Peak Hour</div>
+
<div class="stat-card" id="peakHourRequestsCard">
<div class="stat-number" id="peakHourRequests">-</div>
<div class="stat-label">Peak Hour Requests</div>
+
<div class="stat-card" id="peakDayCard">
<div class="stat-number" id="peakDay">-</div>
<div class="stat-label">Peak Day</div>
+
<div class="stat-card" id="peakDayRequestsCard">
<div class="stat-number" id="peakDayRequests">-</div>
<div class="stat-label">Peak Day Requests</div>
+
<div class="stat-card" id="dashboardRequestsCard">
<div class="stat-number" id="dashboardRequests">-</div>
<div class="stat-label">Dashboard Requests</div>
+
<!-- Charts Grid with Lazy Loading -->
<div class="charts-grid">
+
<div class="chart-container lazy-chart" data-chart="timeChart">
<div class="chart-title">Requests Over Time</div>
<canvas id="timeChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="latencyTimeChart">
<div class="chart-title">Latency Over Time (Hourly)</div>
<canvas id="latencyTimeChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="latencyDistributionChart">
<div class="chart-title">Response Time Distribution</div>
<canvas id="latencyDistributionChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="percentilesChart">
<div class="chart-title">Latency Percentiles</div>
<canvas id="percentilesChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="endpointChart">
<div class="chart-title">Top Endpoints</div>
<canvas id="endpointChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="slowestEndpointsChart">
<div class="chart-title">Slowest Endpoints</div>
<canvas id="slowestEndpointsChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="statusChart">
<div class="chart-title">Status Codes</div>
<canvas id="statusChart"></canvas>
+
<div class="chart-container lazy-chart" data-chart="userAgentChart">
<div class="chart-title">Top User Agents</div>
<canvas id="userAgentChart"></canvas>
···
+
let currentData = null;
+
let visibleCharts = new Set();
+
let intersectionObserver;
+
// Performance monitoring
+
// Initialize intersection observer for lazy loading
+
function initLazyLoading() {
+
intersectionObserver = new IntersectionObserver((entries) => {
+
entries.forEach(entry => {
+
if (entry.isIntersecting) {
+
const chartContainer = entry.target;
+
const chartType = chartContainer.dataset.chart;
+
if (!visibleCharts.has(chartType) && currentData) {
+
visibleCharts.add(chartType);
+
chartContainer.classList.add('visible');
+
loadChart(chartType, currentData);
+
// Observe all lazy chart containers
+
document.querySelectorAll('.lazy-chart').forEach(container => {
+
intersectionObserver.observe(container);
+
// Show toast notification
+
function showToast(message, type = 'info') {
+
const toast = document.createElement('div');
+
toast.className = `toast ${type}`;
+
toast.textContent = message;
+
document.body.appendChild(toast);
+
setTimeout(() => toast.classList.add('show'), 100);
+
toast.classList.remove('show');
+
setTimeout(() => document.body.removeChild(toast), 300);
+
// Update loading states for stat cards
+
function setStatCardLoading(cardId, loading) {
+
const card = document.getElementById(cardId);
+
card.classList.add('loading');
+
card.classList.remove('loading');
+
// Debounced resize handler for charts
+
function handleResize() {
+
clearTimeout(resizeTimeout);
+
resizeTimeout = setTimeout(() => {
+
Object.values(charts).forEach(chart => {
+
if (chart && typeof chart.resize === 'function') {
+
window.addEventListener('resize', handleResize);
async function loadData() {
+
performance.startTime = Date.now();
const days = document.getElementById("daysSelect").value;
const loading = document.getElementById("loading");
const error = document.getElementById("error");
const content = document.getElementById("content");
+
const refreshBtn = document.getElementById("refreshBtn");
loading.style.display = "block";
error.style.display = "none";
content.style.display = "none";
+
refreshBtn.disabled = true;
+
refreshBtn.textContent = "Loading...";
+
// Set all stat cards to loading state
+
'totalRequestsCard', 'avgResponseTimeCard', 'p95ResponseTimeCard',
+
'uniqueEndpointsCard', 'errorRateCard', 'fastRequestsCard',
+
'uptimeCard', 'throughputCard', 'apdexCard', 'cacheHitRateCard',
+
'peakHourCard', 'peakHourRequestsCard', 'peakDayCard',
+
'peakDayRequestsCard', 'dashboardRequestsCard'
+
statCards.forEach(cardId => setStatCardLoading(cardId, true));
const response = await fetch(`/stats?days=${days}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
+
performance.endTime = Date.now();
+
performance.loadTime = performance.endTime - performance.startTime;
loading.style.display = "none";
content.style.display = "block";
+
showToast(`Dashboard updated in ${performance.loadTime}ms`, 'success');
loading.style.display = "none";
error.style.display = "block";
error.textContent = `Failed to load data: ${err.message}`;
+
showToast(`Error: ${err.message}`, 'error');
+
refreshBtn.disabled = false;
+
refreshBtn.textContent = "Refresh";
+
// Remove loading state from stat cards
+
statCards.forEach(cardId => setStatCardLoading(cardId, false));
function updateDashboard(data) {
+
// Update main metrics with animation
+
updateStatWithAnimation("totalRequests", data.totalRequests.toLocaleString());
+
updateStatWithAnimation("avgResponseTime",
+
data.averageResponseTime ? Math.round(data.averageResponseTime) : "N/A");
+
updateStatWithAnimation("p95ResponseTime",
+
data.latencyAnalytics.percentiles.p95 ? Math.round(data.latencyAnalytics.percentiles.p95) : "N/A");
+
updateStatWithAnimation("uniqueEndpoints", data.requestsByEndpoint.length);
const errorRequests = data.requestsByStatus
.filter((s) => s.status >= 400)
.reduce((sum, s) => sum + s.count, 0);
+
const errorRate = data.totalRequests > 0
+
? ((errorRequests / data.totalRequests) * 100).toFixed(1)
+
updateStatWithAnimation("errorRate", errorRate);
// Calculate fast requests percentage
const fastRequestsData = data.latencyAnalytics.distribution
.filter((d) => d.range === "0-50ms" || d.range === "50-100ms")
.reduce((sum, d) => sum + d.percentage, 0);
+
updateStatWithAnimation("fastRequests", fastRequestsData.toFixed(1) + "%");
+
updateStatWithAnimation("uptime", data.performanceMetrics.uptime.toFixed(1));
+
updateStatWithAnimation("throughput", Math.round(data.performanceMetrics.throughput));
+
updateStatWithAnimation("apdex", data.performanceMetrics.apdex.toFixed(2));
+
updateStatWithAnimation("cacheHitRate", data.performanceMetrics.cachehitRate.toFixed(1));
+
updateStatWithAnimation("peakHour", data.peakTraffic.peakHour);
+
updateStatWithAnimation("peakHourRequests", data.peakTraffic.peakRequests.toLocaleString());
+
updateStatWithAnimation("peakDay", data.peakTraffic.peakDay);
+
updateStatWithAnimation("peakDayRequests", data.peakTraffic.peakDayRequests.toLocaleString());
+
updateStatWithAnimation("dashboardRequests", data.dashboardMetrics.statsRequests.toLocaleString());
+
// Update performance indicator
+
updatePerformanceIndicator(data);
+
// Load main traffic overview chart immediately
+
const days = parseInt(document.getElementById("daysSelect").value);
+
updateTrafficOverviewChart(data.trafficOverview, days);
+
// Other charts will be loaded lazily when they come into view
+
function updateStatWithAnimation(elementId, value) {
+
const element = document.getElementById(elementId);
+
if (element && element.textContent !== value.toString()) {
+
element.style.transform = 'scale(1.1)';
+
element.style.transition = 'transform 0.2s ease';
+
element.textContent = value;
+
element.style.transform = 'scale(1)';
+
function updatePerformanceIndicator(data) {
+
const indicator = document.getElementById('trafficPerformance');
+
const avgResponseTime = data.averageResponseTime || 0;
+
const errorRate = data.requestsByStatus
+
.filter((s) => s.status >= 400)
+
.reduce((sum, s) => sum + s.count, 0) / data.totalRequests * 100;
+
if (avgResponseTime < 100 && errorRate < 1) {
+
} else if (avgResponseTime < 300 && errorRate < 5) {
+
text = '🔴 Needs Attention';
+
indicator.className = `performance-indicator ${status}`;
+
indicator.textContent = text;
+
// Load individual charts (called by intersection observer)
+
function loadChart(chartType, data) {
const days = parseInt(document.getElementById("daysSelect").value);
const isHourly = days === 1;
+
updateTimeChart(data.requestsByDay, isHourly);
+
case 'latencyTimeChart':
+
updateLatencyTimeChart(data.latencyAnalytics.latencyOverTime, isHourly);
+
case 'latencyDistributionChart':
+
updateLatencyDistributionChart(data.latencyAnalytics.distribution);
+
case 'percentilesChart':
+
updatePercentilesChart(data.latencyAnalytics.percentiles);
+
updateEndpointChart(data.requestsByEndpoint.slice(0, 10));
+
case 'slowestEndpointsChart':
+
updateSlowestEndpointsChart(data.latencyAnalytics.slowestEndpoints);
+
updateStatusChart(data.requestsByStatus);
+
updateUserAgentChart(data.topUserAgents.slice(0, 5));
+
console.error(`Error loading chart ${chartType}:`, error);
+
const container = document.querySelector(`[data-chart="${chartType}"]`);
+
container.innerHTML = `<div class="chart-error">Error loading chart: ${error.message}</div>`;
function updateTrafficOverviewChart(data, days) {
+
const canvas = document.getElementById("trafficOverviewChart");
+
console.warn('trafficOverviewChart canvas not found');
+
const ctx = canvas.getContext("2d");
+
console.warn('Could not get 2d context for trafficOverviewChart');
+
if (charts.trafficOverview) {
+
charts.trafficOverview.destroy();
// Update chart title based on granularity
+
const chartTitleElement = document.querySelector(".chart-title-with-indicator .chart-title");
let titleText = "Traffic Overview - All Routes Over Time";
titleText += " (Hourly)";
···
+
if (chartTitleElement) {
+
chartTitleElement.textContent = titleText;
// Get all unique routes across all time periods
const allRoutes = new Set();
···
// Define colors for different route types
+
"User Data": "#10b981",
+
"User Redirects": "#059669",
+
"Emoji Data": "#ef4444",
+
"Emoji Redirects": "#dc2626",
+
"Emoji List": "#f97316",
+
"Health Check": "#f59e0b",
+
"API Documentation": "#8b5cf6",
+
"Cache Management": "#6b7280",
// Create datasets for each route
const datasets = Array.from(allRoutes).map((route) => {
+
const color = routeColors[route] || "#9ca3af";
data: data.map((timePoint) => timePoint.routes[route] || 0),
+
backgroundColor: color + "20",
···
// Format labels based on time granularity
const labels = data.map((timePoint) => {
return timePoint.time.split(" ")[1] || timePoint.time;
const parts = timePoint.time.split(" ");
+
const date = parts[0].split("-")[2];
const hour = parts[1] || "00:00";
return `${date} ${hour}`;
···
maintainAspectRatio: false,
+
easing: 'easeInOutQuart'
···
+
generateLabels: function(chart) {
+
const original = Chart.defaults.plugins.legend.labels.generateLabels;
+
const labels = original.call(this, chart);
+
// Add total request count to legend labels
+
labels.forEach((label, index) => {
+
const dataset = chart.data.datasets[index];
+
const total = dataset.data.reduce((sum, val) => sum + val, 0);
+
label.text += ` (${total.toLocaleString()})`;
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
title: function(context) {
+
return `Time: ${context[0].label}`;
+
afterBody: function(context) {
+
const timePoint = data[context[0].dataIndex];
+
`Total Requests: ${timePoint.total.toLocaleString()}`,
+
`Peak Route: ${Object.entries(timePoint.routes).sort((a, b) => b[1] - a[1])[0]?.[0] || 'N/A'}`
···
text: days === 1 ? "Hour" : days <= 7 ? "Day & Hour" : "Date",
+
maxTicksLimit: window.innerWidth < 768 ? 8 : 20,
+
maxRotation: 0, // Don't rotate labels
+
callback: function(value, index, values) {
+
const label = this.getLabelForValue(value);
+
// Truncate long labels
+
if (label.length > 8) {
+
return label; // Hours are usually short
+
// For longer periods, abbreviate
+
return label.substring(0, 6) + '...';
+
color: 'rgba(0, 0, 0, 0.05)',
···
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return value.toLocaleString();
function updateTimeChart(data, isHourly) {
+
const canvas = document.getElementById("timeChart");
+
console.warn('timeChart canvas not found');
+
const ctx = canvas.getContext("2d");
+
console.warn('Could not get 2d context for timeChart');
if (charts.time) charts.time.destroy();
const chartTitle = document
.querySelector("#timeChart")
.parentElement.querySelector(".chart-title");
+
chartTitle.textContent = isHourly
+
? "Requests Over Time (Hourly)"
+
: "Requests Over Time (Daily)";
charts.time = new Chart(ctx, {
···
data: data.map((d) => d.count),
+
borderColor: "#3b82f6",
+
backgroundColor: "rgba(59, 130, 246, 0.1)",
+
pointBackgroundColor: "#3b82f6",
+
pointBorderColor: "#ffffff",
+
maintainAspectRatio: false,
+
bottom: 50 // Extra space for rotated labels
+
easing: 'easeInOutQuart'
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
title: function(context) {
+
const point = data[context[0].dataIndex];
+
return isHourly ? `Hour: ${context[0].label}` : `Date: ${context[0].label}`;
+
label: function(context) {
+
const point = data[context.dataIndex];
+
`Requests: ${context.parsed.y.toLocaleString()}`,
+
`Avg Response Time: ${Math.round(point.averageResponseTime || 0)}ms`
+
generateLabels: function(chart) {
+
const total = data.reduce((sum, d) => sum + d.count, 0);
+
const avg = Math.round(data.reduce((sum, d) => sum + (d.averageResponseTime || 0), 0) / data.length);
+
text: `Requests (Total: ${total.toLocaleString()}, Avg RT: ${avg}ms)`,
+
strokeStyle: '#3b82f6',
+
text: isHourly ? 'Hour of Day' : 'Date',
+
font: { weight: 'bold' }
+
maxTicksLimit: window.innerWidth < 768 ? 6 : 12,
+
maxRotation: 0, // Don't rotate labels
+
callback: function(value, index, values) {
+
const label = this.getLabelForValue(value);
+
// Truncate long labels for better fit
+
return label; // Hours are short
+
// For dates, show abbreviated format
+
const date = new Date(label);
+
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
color: 'rgba(0, 0, 0, 0.05)',
+
text: 'Number of Requests',
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return value.toLocaleString();
···
function updateEndpointChart(data) {
+
const canvas = document.getElementById("endpointChart");
+
console.warn('endpointChart canvas not found');
+
const ctx = canvas.getContext("2d");
+
console.warn('Could not get 2d context for endpointChart');
if (charts.endpoint) charts.endpoint.destroy();
···
data: data.map((d) => d.count),
+
backgroundColor: "#10b981",
+
maintainAspectRatio: false,
+
bottom: 60 // Extra space for labels
+
easing: 'easeInOutQuart'
+
font: { weight: 'bold' }
+
maxRotation: 0, // Don't rotate
+
callback: function(value, index, values) {
+
const label = this.getLabelForValue(value);
+
// Truncate long labels but show full in tooltip
+
return label.length > 12 ? label.substring(0, 9) + '...' : label;
+
color: 'rgba(0, 0, 0, 0.05)',
+
text: 'Number of Requests',
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return value.toLocaleString();
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
title: function(context) {
+
return context[0].label; // Show full label in tooltip
+
label: function(context) {
+
return `Requests: ${context.parsed.y.toLocaleString()}`;
+
generateLabels: function(chart) {
+
const total = data.reduce((sum, d) => sum + d.count, 0);
+
text: `Total Requests: ${total.toLocaleString()}`,
+
strokeStyle: '#10b981',
···
if (charts.status) charts.status.destroy();
const colors = data.map((d) => {
+
if (d.status >= 200 && d.status < 300) return "#10b981";
+
if (d.status >= 300 && d.status < 400) return "#f59e0b";
+
if (d.status >= 400 && d.status < 500) return "#ef4444";
charts.status = new Chart(ctx, {
···
data: data.map((d) => d.count),
+
easing: 'easeInOutQuart'
···
data: data.map((d) => d.count),
+
easing: 'easeInOutQuart'
function updateLatencyTimeChart(data, isHourly) {
+
const ctx = document.getElementById("latencyTimeChart").getContext("2d");
if (charts.latencyTime) charts.latencyTime.destroy();
const chartTitle = document
.querySelector("#latencyTimeChart")
.parentElement.querySelector(".chart-title");
+
chartTitle.textContent = isHourly
+
? "Latency Over Time (Hourly)"
+
: "Latency Over Time (Daily)";
charts.latencyTime = new Chart(ctx, {
···
label: "Average Response Time",
data: data.map((d) => d.averageResponseTime),
+
borderColor: "#3b82f6",
+
backgroundColor: "rgba(59, 130, 246, 0.1)",
+
pointBackgroundColor: "#3b82f6",
+
pointBorderColor: "#ffffff",
label: "P95 Response Time",
data: data.map((d) => d.p95),
+
borderColor: "#ef4444",
+
backgroundColor: "rgba(239, 68, 68, 0.1)",
+
pointBackgroundColor: "#ef4444",
+
pointBorderColor: "#ffffff",
+
maintainAspectRatio: false,
+
easing: 'easeInOutQuart'
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
title: function(context) {
+
return isHourly ? `Hour: ${context[0].label}` : `Date: ${context[0].label}`;
+
afterBody: function(context) {
+
const point = data[context[0].dataIndex];
+
`Request Count: ${point.count.toLocaleString()}`,
+
`Performance: ${point.averageResponseTime < 100 ? 'Excellent' : point.averageResponseTime < 300 ? 'Good' : 'Needs Attention'}`
+
generateLabels: function(chart) {
+
const avgAvg = Math.round(data.reduce((sum, d) => sum + d.averageResponseTime, 0) / data.length);
+
const avgP95 = Math.round(data.reduce((sum, d) => sum + (d.p95 || 0), 0) / data.length);
+
text: `Average Response Time (Overall: ${avgAvg}ms)`,
+
strokeStyle: '#3b82f6',
+
text: `P95 Response Time (Overall: ${avgP95}ms)`,
+
strokeStyle: '#ef4444',
+
text: isHourly ? 'Hour of Day' : 'Date',
+
font: { weight: 'bold' }
+
maxTicksLimit: window.innerWidth < 768 ? 6 : 12,
+
callback: function(value, index, values) {
+
const label = this.getLabelForValue(value);
+
const date = new Date(label);
+
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
color: 'rgba(0, 0, 0, 0.05)',
text: "Response Time (ms)",
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return Math.round(value) + 'ms';
···
function updateLatencyDistributionChart(data) {
+
const ctx = document.getElementById("latencyDistributionChart").getContext("2d");
if (charts.latencyDistribution) charts.latencyDistribution.destroy();
···
data: data.map((d) => d.count),
+
backgroundColor: "#10b981",
+
easing: 'easeInOutQuart'
···
function updatePercentilesChart(percentiles) {
+
const ctx = document.getElementById("percentilesChart").getContext("2d");
if (charts.percentiles) charts.percentiles.destroy();
+
{ label: "P50 (Median)", value: percentiles.p50 },
{ label: "P75", value: percentiles.p75 },
{ label: "P90", value: percentiles.p90 },
{ label: "P95", value: percentiles.p95 },
···
label: "Response Time (ms)",
data: data.map((d) => d.value),
+
"#10b981", // P50 - Green (good)
+
"#3b82f6", // P75 - Blue
+
"#f59e0b", // P90 - Yellow (warning)
+
"#ef4444", // P95 - Red (concerning)
+
"#8b5cf6", // P99 - Purple (critical)
+
borderColor: '#ffffff',
+
maintainAspectRatio: false,
+
easing: 'easeInOutQuart'
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
label: function(context) {
+
const percentile = context.label;
+
const value = Math.round(context.parsed.y);
+
let interpretation = '';
+
if (percentile.includes('P50')) {
+
interpretation = '50% of requests are faster than this';
+
} else if (percentile.includes('P95')) {
+
interpretation = '95% of requests are faster than this';
+
} else if (percentile.includes('P99')) {
+
interpretation = '99% of requests are faster than this';
+
`${percentile}: ${value}ms`,
+
display: false // Hide legend since colors are self-explanatory
+
text: 'Response Time Percentiles',
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
text: 'Response Time (ms)',
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return Math.round(value) + 'ms';
···
function updateSlowestEndpointsChart(data) {
+
const ctx = document.getElementById("slowestEndpointsChart").getContext("2d");
if (charts.slowestEndpoints) charts.slowestEndpoints.destroy();
···
label: "Avg Response Time (ms)",
data: data.map((d) => d.averageResponseTime),
+
backgroundColor: "#ef4444",
+
maintainAspectRatio: false,
+
easing: 'easeInOutQuart'
+
indexAxis: "x", // Changed from "y" to "x" to put labels on top
+
font: { weight: 'bold' }
+
callback: function(value, index, values) {
+
const label = this.getLabelForValue(value);
+
return label.length > 15 ? label.substring(0, 12) + '...' : label;
+
color: 'rgba(0, 0, 0, 0.05)',
+
text: 'Response Time (ms)',
+
font: { weight: 'bold' }
+
color: 'rgba(0, 0, 0, 0.05)',
+
callback: function(value) {
+
return Math.round(value) + 'ms';
+
backgroundColor: 'rgba(0, 0, 0, 0.8)',
+
borderColor: 'rgba(255, 255, 255, 0.1)',
+
title: function(context) {
+
return context[0].label; // Show full label in tooltip
+
label: function(context) {
+
const point = data[context.dataIndex];
+
`Avg Response Time: ${Math.round(context.parsed.y)}ms`,
+
`Request Count: ${point.count.toLocaleString()}`
+
generateLabels: function(chart) {
+
const avgTime = Math.round(data.reduce((sum, d) => sum + d.averageResponseTime, 0) / data.length);
+
text: `Average Response Time: ${avgTime}ms`,
+
strokeStyle: '#ef4444',
+
document.getElementById("autoRefresh").addEventListener("change", function () {
+
autoRefreshInterval = setInterval(loadData, 30000);
+
showToast('Auto-refresh enabled', 'success');
+
clearInterval(autoRefreshInterval);
+
showToast('Auto-refresh disabled', 'info');
+
// Days selector change handler
+
document.getElementById("daysSelect").addEventListener("change", function() {
+
// Reset visible charts when changing time period
+
// Initialize dashboard
+
document.addEventListener('DOMContentLoaded', function() {
+
// Cleanup on page unload
+
window.addEventListener('beforeunload', function() {
+
if (intersectionObserver) {
+
intersectionObserver.disconnect();
+
clearInterval(autoRefreshInterval);
+
// Destroy all charts to prevent memory leaks
+
Object.values(charts).forEach(chart => {
+
if (chart && typeof chart.destroy === 'function') {
dunkirk.sh