CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

添加延迟显示支持

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-05 23:38:53 +08:00
parent 84972cdaeb
commit 058a6c73a1
7 changed files with 450 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
public/js/app.js
View File

@@ -36,6 +36,7 @@
sourceDesc: document.getElementById('sourceDesc'),
btnTest: document.getElementById('btnTest'),
btnAdd: document.getElementById('btnAdd'),
isServerSource: document.getElementById('isServerSource'),
formMessage: document.getElementById('formMessage'),
sourceItems: document.getElementById('sourceItems'),
// Site Settings
@@ -66,6 +67,10 @@
legendTx: document.getElementById('legendTx'),
p95LabelText: document.getElementById('p95LabelText'),
p95TypeSelect: document.getElementById('p95TypeSelect'),
blackboxSourceSelect: document.getElementById('blackboxSourceSelect'),
latencySourceInput: document.getElementById('latencySourceInput'),
latencyDestInput: document.getElementById('latencyDestInput'),
latencyTargetInput: document.getElementById('latencyTargetInput'),
detailDiskTotal: document.getElementById('detailDiskTotal'),
// Server Details Modal
serverDetailModal: document.getElementById('serverDetailModal'),
@@ -105,6 +110,8 @@
let currentSourceFilter = 'all';
let currentPage = 1;
let pageSize = 20;
let currentLatency = null;
let latencyTimer = null;
// Load sort state from localStorage or use default
let currentSort = { column: 'up', direction: 'desc' };
@@ -285,6 +292,7 @@
// Start data fetching
fetchMetrics();
fetchNetworkHistory();
fetchLatency();
// Site settings
if (window.SITE_SETTINGS) {
@@ -301,6 +309,10 @@
dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
dom.show95BandwidthInput.value = window.SITE_SETTINGS.show_95_bandwidth ? "1" : "0";
dom.p95TypeSelect.value = window.SITE_SETTINGS.p95_type || 'tx';
// blackboxSourceSelect will be set after sources are fetched in updateSourceFilterOptions
dom.latencySourceInput.value = window.SITE_SETTINGS.latency_source || '';
dom.latencyDestInput.value = window.SITE_SETTINGS.latency_dest || '';
dom.latencyTargetInput.value = window.SITE_SETTINGS.latency_target || '';
}
loadSiteSettings();
@@ -308,6 +320,7 @@
// setInterval(fetchMetrics, REFRESH_INTERVAL); - Now using WebSockets
initWebSocket();
setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
setInterval(fetchLatency, REFRESH_INTERVAL);
}
// ---- Real-time WebSocket ----
@@ -476,6 +489,19 @@
}
}
async function fetchLatency() {
try {
const response = await fetch('/api/metrics/latency');
const data = await response.json();
currentLatency = data.latency;
if (allServersData.length > 0) {
updateMap2D(allServersData);
}
} catch (err) {
console.error('Error fetching latency:', err);
}
}
// ---- Global 2D Map ----
async function initMap2D() {
if (!dom.globeContainer) return;
@@ -577,7 +603,6 @@
}
});
}
function updateMap2D(servers) {
if (!myMap2D) return;
@@ -594,13 +619,96 @@
netTx: s.netTx
}));
// Draw latency line if configured
if (window.SITE_SETTINGS && window.SITE_SETTINGS.latency_source && window.SITE_SETTINGS.latency_dest) {
const sourceName = window.SITE_SETTINGS.latency_source;
const destName = window.SITE_SETTINGS.latency_dest;
// Coordinates for countries (fallback to common ones or try to find in geoJSON)
const countryCoords = {
'China': [116.4074, 39.9042],
'United States': [-95.7129, 37.0902],
'Japan': [138.2529, 36.2048],
'Singapore': [103.8198, 1.3521],
'Germany': [10.4515, 51.1657],
'United Kingdom': [-3.436, 55.3781],
'France': [2.2137, 46.2276],
'Hong Kong': [114.1694, 22.3193],
'Taiwan': [120.9605, 23.6978],
'Korea': [127.7669, 35.9078]
};
const getCoords = (name) => {
if (countryCoords[name]) return countryCoords[name];
// Try to find in current server data
const s = servers.find(sv => sv.countryName === name || sv.country === name);
if (s && s.lng && s.lat) return [s.lng, s.lat];
return null;
};
const startCoords = getCoords(sourceName);
const endCoords = getCoords(destName);
if (startCoords && endCoords) {
const lineData = [{
fromName: sourceName,
toName: destName,
coords: [startCoords, endCoords],
latency: currentLatency
}];
const lineSeries = {
type: 'lines',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 2,
effect: {
show: true,
period: 4,
trailLength: 0.1,
color: 'rgba(99, 102, 241, 0.8)',
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
color: 'rgba(99, 102, 241, 0.3)',
width: 2,
curveness: 0.2
},
tooltip: {
formatter: () => {
const latVal = (currentLatency !== null && currentLatency !== undefined) ? `${currentLatency.toFixed(2)} ms` : '测量中...';
return `
<div style="padding: 4px;">
<div style="font-weight: 700;">${sourceName} ↔ ${destName}</div>
<div style="font-size: 0.75rem; color: var(--accent-indigo); margin-top: 4px;">延时: ${latVal}</div>
</div>
`;
}
},
data: lineData
};
// Add or update line series
const options = myMap2D.getOption();
const series = options.series;
// Filter out existing latency lines to update
const newSeries = series.filter(s => s.type !== 'lines' || !s.latencyLine);
lineSeries.latencyLine = true;
newSeries.push(lineSeries);
myMap2D.setOption({ series: newSeries });
}
}
myMap2D.setOption({
series: [{
coordinateSystem: 'geo',
geoIndex: 0,
data: geoData
}]
});
}, { replaceMerge: ['series'] });
// Update footer stats
if (dom.globeTotalNodes) dom.globeTotalNodes.textContent = geoData.length;
@@ -1324,7 +1432,11 @@
logo_url: dom.logoUrlInput.value.trim(),
default_theme: dom.defaultThemeInput.value,
show_95_bandwidth: dom.show95BandwidthInput.value === "1" ? 1 : 0,
p95_type: dom.p95TypeSelect.value
p95_type: dom.p95TypeSelect.value,
blackbox_source_id: dom.blackboxSourceSelect.value ? parseInt(dom.blackboxSourceSelect.value) : null,
latency_source: dom.latencySourceInput.value.trim(),
latency_dest: dom.latencyDestInput.value.trim(),
latency_target: dom.latencyTargetInput.value.trim()
};
dom.btnSaveSiteSettings.disabled = true;
@@ -1434,18 +1546,30 @@
}
function updateSourceFilterOptions(sources) {
if (!dom.sourceFilter) return;
const current = dom.sourceFilter.value;
let html = '<option value="all">所有数据源</option>';
sources.forEach(source => {
html += `<option value="${escapeHtml(source.name)}">${escapeHtml(source.name)}</option>`;
});
dom.sourceFilter.innerHTML = html;
if (sources.some(s => s.name === current)) {
dom.sourceFilter.value = current;
} else {
dom.sourceFilter.value = 'all';
currentSourceFilter = 'all';
if (dom.sourceFilter) {
const current = dom.sourceFilter.value;
let html = '<option value="all">所有数据源</option>';
sources.forEach(source => {
html += `<option value="${escapeHtml(source.name)}">${escapeHtml(source.name)}</option>`;
});
dom.sourceFilter.innerHTML = html;
if (sources.some(s => s.name === current)) {
dom.sourceFilter.value = current;
} else {
dom.sourceFilter.value = 'all';
currentSourceFilter = 'all';
}
}
if (dom.blackboxSourceSelect) {
let html = '<option value="">-- 请选择延迟数据源 --</option>';
sources.forEach(source => {
html += `<option value="${source.id}">${escapeHtml(source.name)}</option>`;
});
dom.blackboxSourceSelect.innerHTML = html;
if (window.SITE_SETTINGS && window.SITE_SETTINGS.blackbox_source_id) {
dom.blackboxSourceSelect.value = window.SITE_SETTINGS.blackbox_source_id;
}
}
}
@@ -1475,6 +1599,9 @@
<span class="source-status ${source.status === 'online' ? 'source-status-online' : 'source-status-offline'}">
${source.status === 'online' ? '在线' : '离线'}
</span>
<span class="source-type-badge ${source.is_server_source ? 'type-server' : 'type-other'}" title="${source.is_server_source ? '该数据源用于展示服务器列表和指标' : '该数据源仅用于特定目的（如 Blackbox 延迟），不参与服务器列表统计'}">
${source.is_server_source ? '服务器看板' : '独立数据源'}
</span>
</div>
<div class="source-item-url">${escapeHtml(source.url)}</div>
${source.description ? `<div class="source-item-desc">${escapeHtml(source.description)}</div>` : ''}
@@ -1533,6 +1660,7 @@
const name = dom.sourceName.value.trim();
const url = dom.sourceUrl.value.trim();
const description = dom.sourceDesc.value.trim();
const is_server_source = dom.isServerSource.checked;
if (!name || !url) {
showMessage('请填写名称和URL', 'error');
@@ -1546,7 +1674,7 @@
const response = await fetch('/api/sources', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, url, description })
body: JSON.stringify({ name, url, description, is_server_source })
});
if (response.ok) {

284
public/js/chart.js
View File

@@ -9,13 +9,13 @@ class AreaChart {
this.data = { timestamps: [], rx: [], tx: [] };
this.animProgress = 0;
this.animFrame = null;
this.showP95 = false;
this.showP95 = false;
this.showRx = true;
this.showTx = true;
this.p95Type = 'tx'; // 'tx', 'rx', 'both'
this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 20, right: 16, bottom: 32, left: 56 };
this.currentMaxVal = 0;
this.prevMaxVal = 0;
@@ -38,7 +38,7 @@ class AreaChart {
setData(data) {
if (!data || !data.timestamps) return;
// Store old data for smooth transition before updating this.data
// Only clone if there is data to clone; otherwise use empty set
if (this.data && this.data.timestamps && this.data.timestamps.length > 0) {
@@ -50,7 +50,7 @@ class AreaChart {
} else {
this.prevData = { timestamps: [], rx: [], tx: [] };
}
// Smoothly transition max value context too
this.prevMaxVal = this.currentMaxVal || 0;
@@ -72,19 +72,19 @@ class AreaChart {
// Refresh currentMaxVal target for interpolation in draw()
let rawMax = 1024;
for (let i = 0; i < this.data.rx.length; i++) {
if (this.showRx) rawMax = Math.max(rawMax, this.data.rx[i] || 0);
if (this.showTx) rawMax = Math.max(rawMax, this.data.tx[i] || 0);
if (this.showRx) rawMax = Math.max(rawMax, this.data.rx[i] || 0);
if (this.showTx) rawMax = Math.max(rawMax, this.data.tx[i] || 0);
}
this.currentMaxVal = rawMax;
// Calculate P95 (95th percentile)
let combined = [];
if (this.p95Type === 'tx') {
combined = data.tx.map(t => t || 0);
combined = data.tx.map(t => t || 0);
} else if (this.p95Type === 'rx') {
combined = data.rx.map(r => r || 0);
combined = data.rx.map(r => r || 0);
} else {
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
}
if (combined.length > 0) {
@@ -141,12 +141,12 @@ class AreaChart {
// Determine consistent unit based on max data value
let maxDataVal = 1024;
if (this.prevMaxVal && this.animProgress < 1) {
// Interpolate the max value context to keep vertical scale smooth
maxDataVal = this.prevMaxVal + (this.currentMaxVal - this.prevMaxVal) * (this.animProgress || 0);
// Interpolate the max value context to keep vertical scale smooth
maxDataVal = this.prevMaxVal + (this.currentMaxVal - this.prevMaxVal) * (this.animProgress || 0);
} else {
maxDataVal = this.currentMaxVal;
maxDataVal = this.currentMaxVal;
}
const k = 1024;
const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
let unitIdx = Math.floor(Math.log(Math.max(1, maxDataVal)) / Math.log(k));
@@ -158,7 +158,7 @@ class AreaChart {
// Use 1.15 cushion
const rawValInUnit = (maxDataVal * 1.15) / unitFactor;
let niceMaxInUnit;
if (rawValInUnit <= 1) niceMaxInUnit = 1;
else if (rawValInUnit <= 2) niceMaxInUnit = 2;
else if (rawValInUnit <= 5) niceMaxInUnit = 5;
@@ -200,7 +200,7 @@ class AreaChart {
ctx.fillStyle = '#5a6380';
ctx.font = '10px "JetBrains Mono", monospace';
ctx.textAlign = 'right';
// Format: "X.X MB/s" or "X MB/s"
const label = (valInUnit % 1 === 0 ? valInUnit : valInUnit.toFixed(1)) + ' ' + unitLabel;
ctx.fillText(label, p.left - 10, y + 3);
@@ -247,14 +247,14 @@ class AreaChart {
ctx.moveTo(p.left, p95Y);
ctx.lineTo(p.left + chartW, p95Y);
ctx.stroke();
// P95 label background
const label = '95计费: ' + (window.formatBandwidth ? window.formatBandwidth(this.p95) : this.p95.toFixed(2));
ctx.font = 'bold 11px "JetBrains Mono", monospace';
const metrics = ctx.measureText(label);
ctx.fillStyle = 'rgba(244, 63, 94, 0.15)';
ctx.fillRect(p.left + 8, p95Y - 20, metrics.width + 12, 18);
// P95 label text
ctx.fillStyle = '#f43f5e';
ctx.textAlign = 'left';
@@ -274,7 +274,7 @@ class AreaChart {
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0] || 0, getPVal(0)));
for (let i = 1; i < len; i++) {
const currY = getY(values[i] || 0, getPVal(i));
const currY = getY(values[i] || 0, getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
@@ -299,7 +299,7 @@ class AreaChart {
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0] || 0, getPVal(0)));
for (let i = 1; i < len; i++) {
const currY = getY(values[i] || 0, getPVal(i));
const currY = getY(values[i] || 0, getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
@@ -331,7 +331,7 @@ class MetricChart {
this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
this.animProgress = 0;
this.prevMaxVal = 0;
this.currentMaxVal = 0;
@@ -357,27 +357,27 @@ class MetricChart {
setData(data) {
if (this.data && this.data.values && this.data.values.length > 0) {
this.prevData = JSON.parse(JSON.stringify(this.data));
this.prevData = JSON.parse(JSON.stringify(this.data));
} else {
this.prevData = { timestamps: [], values: [], series: null };
this.prevData = { timestamps: [], values: [], series: null };
}
this.prevMaxVal = this.currentMaxVal || 0;
this.data = data || { timestamps: [], values: [], series: null };
// Target max
if (this.data.series) {
this.currentMaxVal = 100;
this.currentMaxVal = 100;
} else {
const raw = Math.max(...(this.data.values || []), 0.1);
if (this.unit === '%' && raw <= 100) {
if (raw > 80) this.currentMaxVal = 100;
else if (raw > 40) this.currentMaxVal = 80;
else if (raw > 20) this.currentMaxVal = 50;
else this.currentMaxVal = 25;
} else {
this.currentMaxVal = raw * 1.25;
}
const raw = Math.max(...(this.data.values || []), 0.1);
if (this.unit === '%' && raw <= 100) {
if (raw > 80) this.currentMaxVal = 100;
else if (raw > 40) this.currentMaxVal = 80;
else if (raw > 20) this.currentMaxVal = 50;
else this.currentMaxVal = 25;
} else {
this.currentMaxVal = raw * 1.25;
}
}
this.animate();
@@ -425,8 +425,8 @@ class MetricChart {
const xStep = chartW / (len - 1);
const getX = (i) => p.left + i * xStep;
const getY = (val, prevVal = 0) => {
const actualVal = prevVal + (val - prevVal) * this.animProgress;
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
const actualVal = prevVal + (val - prevVal) * this.animProgress;
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
};
// Grid
@@ -438,135 +438,135 @@ class MetricChart {
ctx.moveTo(p.left, y);
ctx.lineTo(p.left + chartW, y);
ctx.stroke();
const v = (maxVal * (1 - i / 3));
ctx.fillStyle = '#5a6380';
ctx.font = '9px "JetBrains Mono", monospace';
ctx.textAlign = 'right';
let label = '';
if (this.unit === 'B/s' || this.unit === 'B') {
const isRate = this.unit === 'B/s';
if (window.formatBandwidth && isRate) {
label = window.formatBandwidth(v);
} else if (window.formatBytes) {
label = window.formatBytes(v) + (isRate ? '/s' : '');
} else {
label = v.toFixed(0) + this.unit;
}
const isRate = this.unit === 'B/s';
if (window.formatBandwidth && isRate) {
label = window.formatBandwidth(v);
} else if (window.formatBytes) {
label = window.formatBytes(v) + (isRate ? '/s' : '');
} else {
label = v.toFixed(0) + this.unit;
}
} else {
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
}
ctx.fillText(label, p.left - 8, y + 3);
}
if (series) {
// Draw Stacked Area
const modes = [
{ name: 'idle', color: 'rgba(34, 197, 94, 0.4)', stroke: '#22c55e' }, // Green
{ name: 'other', color: 'rgba(168, 85, 247, 0.4)', stroke: '#a855f7' }, // Purple
{ name: 'irq', color: 'rgba(249, 115, 22, 0.4)', stroke: '#f97316' }, // Orange
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.4)', stroke: '#ef4444' }, // Red
{ name: 'system', color: 'rgba(234, 179, 8, 0.4)', stroke: '#eab308' }, // Yellow
{ name: 'user', color: 'rgba(99, 102, 241, 0.4)', stroke: '#6366f1' } // Indigo
];
// Draw Stacked Area
const modes = [
{ name: 'idle', color: 'rgba(34, 197, 94, 0.4)', stroke: '#22c55e' }, // Green
{ name: 'other', color: 'rgba(168, 85, 247, 0.4)', stroke: '#a855f7' }, // Purple
{ name: 'irq', color: 'rgba(249, 115, 22, 0.4)', stroke: '#f97316' }, // Orange
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.4)', stroke: '#ef4444' }, // Red
{ name: 'system', color: 'rgba(234, 179, 8, 0.4)', stroke: '#eab308' }, // Yellow
{ name: 'user', color: 'rgba(99, 102, 241, 0.4)', stroke: '#6366f1' } // Indigo
];
let currentBase = new Array(len).fill(0);
let prevBase = new Array(len).fill(0);
modes.forEach(mode => {
const vals = series[mode.name];
if (!vals) return;
const prevVals = (this.prevData && this.prevData.series) ? this.prevData.series[mode.name] : null;
const getPVal = (arr, idx) => (arr && idx < arr.length) ? arr[idx] : 0;
let currentBase = new Array(len).fill(0);
let prevBase = new Array(len).fill(0);
ctx.beginPath();
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
for (let i = 1; i < len; i++) {
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
}
ctx.lineTo(getX(len - 1), getY(currentBase[len - 1], getPVal(prevBase, len - 1)));
for (let i = len - 1; i >= 0; i--) {
ctx.lineTo(getX(i), getY(currentBase[i], getPVal(prevBase, i)));
}
ctx.closePath();
ctx.fillStyle = mode.color;
ctx.fill();
modes.forEach(mode => {
const vals = series[mode.name];
if (!vals) return;
// Stroke
ctx.beginPath();
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
for (let i = 1; i < len; i++) {
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
}
ctx.strokeStyle = mode.stroke;
ctx.lineWidth = 1;
ctx.stroke();
// Update boxes for next series
for (let i = 0; i < len; i++) {
currentBase[i] += vals[i];
if (prevBase) prevBase[i] = (prevBase[i] || 0) + getPVal(prevVals, i);
}
});
// Add Legend at bottom right (moved up slightly)
ctx.font = '9px sans-serif';
ctx.textAlign = 'right';
let lx = w - 10;
let ly = h - 20; // Increased padding from bottom
[...modes].reverse().forEach(m => {
ctx.fillStyle = m.stroke;
ctx.fillRect(lx - 10, ly - 8, 8, 8);
ctx.fillStyle = '#5a6380';
ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
lx -= 70; // Increased gap for safety
});
} else {
const useSimple = len > 250;
const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;
const prevVals = (this.prevData && this.prevData.series) ? this.prevData.series[mode.name] : null;
const getPVal = (arr, idx) => (arr && idx < arr.length) ? arr[idx] : 0;
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0], getPVal(0)));
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
for (let i = 1; i < len; i++) {
const currY = getY(values[i], getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1], getPVal(i - 1));
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
}
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
}
ctx.lineTo(getX(len - 1), getY(currentBase[len - 1], getPVal(prevBase, len - 1)));
for (let i = len - 1; i >= 0; i--) {
ctx.lineTo(getX(i), getY(currentBase[i], getPVal(prevBase, i)));
}
ctx.closePath();
ctx.fillStyle = mode.color;
ctx.fill();
// Stroke
ctx.strokeStyle = '#6366f1';
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(getX(0), getY(currentBase[0] + vals[0], getPVal(prevBase, 0) + getPVal(prevVals, 0)));
for (let i = 1; i < len; i++) {
ctx.lineTo(getX(i), getY(currentBase[i] + vals[i], getPVal(prevBase, i) + getPVal(prevVals, i)));
}
ctx.strokeStyle = mode.stroke;
ctx.lineWidth = 1;
ctx.stroke();
// Fill
ctx.lineTo(getX(len - 1), p.top + chartH);
ctx.lineTo(getX(0), p.top + chartH);
ctx.closePath();
const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
ctx.fillStyle = grad;
ctx.fill();
// Last point pulse
const lastX = getX(len - 1);
const lastY = getY(values[len - 1]);
ctx.beginPath();
ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
ctx.fillStyle = '#6366f1';
ctx.fill();
// Update boxes for next series
for (let i = 0; i < len; i++) {
currentBase[i] += vals[i];
if (prevBase) prevBase[i] = (prevBase[i] || 0) + getPVal(prevVals, i);
}
});
// Add Legend at bottom right (moved up slightly)
ctx.font = '9px sans-serif';
ctx.textAlign = 'right';
let lx = w - 10;
let ly = h - 20; // Increased padding from bottom
[...modes].reverse().forEach(m => {
ctx.fillStyle = m.stroke;
ctx.fillRect(lx - 10, ly - 8, 8, 8);
ctx.fillStyle = '#5a6380';
ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
lx -= 70; // Increased gap for safety
});
} else {
const useSimple = len > 250;
const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0], getPVal(0)));
for (let i = 1; i < len; i++) {
const currY = getY(values[i], getPVal(i));
if (useSimple) {
ctx.lineTo(getX(i), currY);
} else {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1], getPVal(i - 1));
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
}
}
// Stroke
ctx.strokeStyle = '#6366f1';
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.stroke();
// Fill
ctx.lineTo(getX(len - 1), p.top + chartH);
ctx.lineTo(getX(0), p.top + chartH);
ctx.closePath();
const grad = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
grad.addColorStop(0, 'rgba(99, 102, 241, 0.15)');
grad.addColorStop(1, 'rgba(99, 102, 241, 0)');
ctx.fillStyle = grad;
ctx.fill();
// Last point pulse
const lastX = getX(len - 1);
const lastY = getY(values[len - 1]);
ctx.beginPath();
ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
ctx.fillStyle = '#6366f1';
ctx.fill();
}
}