580 lines
19 KiB
JavaScript
580 lines
19 KiB
JavaScript
/**
|
|
* Custom Canvas Chart Renderer
|
|
* Lightweight, no-dependency chart for the network traffic area chart
|
|
*/
|
|
class AreaChart {
|
|
constructor(canvas) {
|
|
this.canvas = canvas;
|
|
this.ctx = canvas.getContext('2d');
|
|
this.data = { timestamps: [], rx: [], tx: [] };
|
|
this.animProgress = 0;
|
|
this.animFrame = null;
|
|
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.prevMaxVal = 0;
|
|
this.currentMaxVal = 0;
|
|
|
|
// Use debounced resize for performance and safety
|
|
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
|
window.addEventListener('resize', this._resize);
|
|
this.resize();
|
|
}
|
|
|
|
resize() {
|
|
const rect = this.canvas.parentElement.getBoundingClientRect();
|
|
this.width = rect.width;
|
|
this.height = rect.height;
|
|
this.canvas.width = this.width * this.dpr;
|
|
this.canvas.height = this.height * this.dpr;
|
|
this.canvas.style.width = this.width + 'px';
|
|
this.canvas.style.height = this.height + 'px';
|
|
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
|
this.draw();
|
|
}
|
|
|
|
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) {
|
|
this.prevData = {
|
|
timestamps: [...this.data.timestamps],
|
|
rx: [...this.data.rx],
|
|
tx: [...this.data.tx]
|
|
};
|
|
} else {
|
|
this.prevData = { timestamps: [], rx: [], tx: [] };
|
|
}
|
|
|
|
// Smoothly transition max value context too
|
|
this.prevMaxVal = this.currentMaxVal || 0;
|
|
|
|
// Downsample if data is too dense (target ~1500 points for performance)
|
|
const MAX_POINTS = 1500;
|
|
if (data.timestamps.length > MAX_POINTS) {
|
|
const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
|
|
const downsampled = { timestamps: [], rx: [], tx: [] };
|
|
for (let i = 0; i < data.timestamps.length; i += skip) {
|
|
downsampled.timestamps.push(data.timestamps[i]);
|
|
downsampled.rx.push(data.rx[i]);
|
|
downsampled.tx.push(data.tx[i]);
|
|
}
|
|
this.data = downsampled;
|
|
} else {
|
|
this.data = data;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
this.currentMaxVal = rawMax;
|
|
|
|
// Calculate P95 (95th percentile)
|
|
let combined = [];
|
|
if (this.p95Type === 'tx') {
|
|
combined = data.tx.map(t => t || 0);
|
|
} else if (this.p95Type === 'rx') {
|
|
combined = data.rx.map(r => r || 0);
|
|
} else {
|
|
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
|
|
}
|
|
|
|
if (combined.length > 0) {
|
|
const sorted = [...combined].sort((a, b) => a - b);
|
|
const p95Idx = Math.floor(sorted.length * 0.95);
|
|
this.p95 = sorted[p95Idx];
|
|
} else {
|
|
this.p95 = null;
|
|
}
|
|
|
|
this.animProgress = 0;
|
|
this.animate();
|
|
}
|
|
|
|
animate() {
|
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
|
const start = performance.now();
|
|
const duration = 800;
|
|
|
|
const step = (now) => {
|
|
const elapsed = now - start;
|
|
this.animProgress = Math.min(elapsed / duration, 1);
|
|
// Ease out cubic
|
|
this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
|
|
this.draw();
|
|
if (this.animProgress < 1) {
|
|
this.animFrame = requestAnimationFrame(step);
|
|
}
|
|
};
|
|
|
|
this.animFrame = requestAnimationFrame(step);
|
|
}
|
|
|
|
draw() {
|
|
const ctx = this.ctx;
|
|
const w = this.width;
|
|
const h = this.height;
|
|
this.padding = { top: 20, right: 16, bottom: 32, left: 64 };
|
|
const p = this.padding;
|
|
const chartW = w - p.left - p.right;
|
|
const chartH = h - p.top - p.bottom;
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
const { timestamps, rx, tx } = this.data;
|
|
if (!timestamps || timestamps.length < 2) {
|
|
ctx.fillStyle = '#5a6380';
|
|
ctx.font = '13px Inter, sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('等待数据...', w / 2, h / 2);
|
|
return;
|
|
}
|
|
|
|
// 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);
|
|
} else {
|
|
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));
|
|
unitIdx = Math.max(0, Math.min(unitIdx, sizes.length - 1));
|
|
const unitFactor = Math.pow(k, unitIdx);
|
|
const unitLabel = sizes[unitIdx];
|
|
|
|
// Get value in current units and find a "nice" round max
|
|
// 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;
|
|
else if (rawValInUnit <= 10) niceMaxInUnit = 10;
|
|
else if (rawValInUnit <= 20) niceMaxInUnit = 20;
|
|
else if (rawValInUnit <= 50) niceMaxInUnit = 50;
|
|
else if (rawValInUnit <= 100) niceMaxInUnit = 100;
|
|
else if (rawValInUnit <= 200) niceMaxInUnit = 200;
|
|
else if (rawValInUnit <= 500) niceMaxInUnit = 500;
|
|
else if (rawValInUnit <= 1000) niceMaxInUnit = 1000;
|
|
else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100;
|
|
|
|
const maxVal = niceMaxInUnit * unitFactor;
|
|
|
|
const len = timestamps.length;
|
|
const xStep = chartW / (len - 1);
|
|
|
|
// Helper to get point with smooth value transition
|
|
const getX = (i) => p.left + i * xStep;
|
|
const getY = (val, prevVal = 0) => {
|
|
// Interpolate value from previous state to new state
|
|
const actualVal = prevVal + (val - prevVal) * this.animProgress;
|
|
return p.top + chartH - (actualVal / (maxVal || 1)) * chartH;
|
|
};
|
|
|
|
// Draw grid lines
|
|
ctx.strokeStyle = 'rgba(99, 102, 241, 0.08)';
|
|
ctx.lineWidth = 1;
|
|
const gridLines = 4;
|
|
for (let i = 0; i <= gridLines; i++) {
|
|
const y = p.top + (chartH / gridLines) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.left, y);
|
|
ctx.lineTo(p.left + chartW, y);
|
|
ctx.stroke();
|
|
|
|
// Y-axis labels - share the same unit for readability
|
|
const valInUnit = niceMaxInUnit * (1 - i / gridLines);
|
|
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);
|
|
}
|
|
|
|
// X-axis labels (every ~4 hours)
|
|
ctx.fillStyle = '#5a6380';
|
|
ctx.font = '10px "JetBrains Mono", monospace';
|
|
ctx.textAlign = 'center';
|
|
const labelInterval = Math.max(1, Math.floor(len / 6));
|
|
for (let i = 0; i < len; i += labelInterval) {
|
|
const x = getX(i);
|
|
ctx.fillText(formatTime(timestamps[i]), x, h - 8);
|
|
}
|
|
// Always show last label
|
|
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
|
|
|
|
const getPVal = (arr, i) => (arr && i < arr.length) ? arr[i] : 0;
|
|
|
|
// Draw TX area
|
|
if (this.showTx) {
|
|
this.drawArea(ctx, tx, this.prevData ? this.prevData.tx : null, getX, getY, chartH, p,
|
|
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)',
|
|
'#6366f1', len);
|
|
}
|
|
|
|
// Draw RX area (on top)
|
|
if (this.showRx) {
|
|
this.drawArea(ctx, rx, this.prevData ? this.prevData.rx : null, getX, getY, chartH, p,
|
|
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)',
|
|
'#06b6d4', len);
|
|
}
|
|
|
|
// Draw P95 line
|
|
if (this.showP95 && this.p95 && this.animProgress === 1) {
|
|
const p95Y = getY(this.p95);
|
|
// Only draw if within visible range
|
|
if (p95Y >= p.top && p95Y <= p.top + chartH) {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.setLineDash([6, 4]);
|
|
ctx.strokeStyle = 'rgba(244, 63, 94, 0.85)'; // --accent-rose
|
|
ctx.lineWidth = 1.5;
|
|
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';
|
|
ctx.fillText(label, p.left + 14, p95Y - 7);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
}
|
|
|
|
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
|
|
if (!values || values.length === 0) return;
|
|
|
|
const useSimple = len > 250;
|
|
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
|
|
|
|
// Fill
|
|
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));
|
|
if (useSimple) {
|
|
ctx.lineTo(getX(i), currY);
|
|
} else {
|
|
const prevX = getX(i - 1);
|
|
const currX = getX(i);
|
|
const prevY = getY(values[i - 1] || 0, getPVal(i - 1));
|
|
const midX = (prevX + currX) / 2;
|
|
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
|
}
|
|
}
|
|
ctx.lineTo(getX(len - 1), p.top + chartH);
|
|
ctx.lineTo(getX(0), p.top + chartH);
|
|
ctx.closePath();
|
|
|
|
const gradient = ctx.createLinearGradient(0, p.top, 0, p.top + chartH);
|
|
gradient.addColorStop(0, fillColorTop);
|
|
gradient.addColorStop(1, fillColorBottom);
|
|
ctx.fillStyle = gradient;
|
|
ctx.fill();
|
|
|
|
// Stroke
|
|
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));
|
|
if (useSimple) {
|
|
ctx.lineTo(getX(i), currY);
|
|
} else {
|
|
const prevX = getX(i - 1);
|
|
const currX = getX(i);
|
|
const prevY = getY(values[i - 1] || 0, getPVal(i - 1));
|
|
const midX = (prevX + currX) / 2;
|
|
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
|
|
}
|
|
}
|
|
ctx.strokeStyle = strokeColor;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineJoin = 'round';
|
|
ctx.stroke();
|
|
}
|
|
|
|
destroy() {
|
|
window.removeEventListener('resize', this._resize);
|
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
|
}
|
|
}
|
|
|
|
class MetricChart {
|
|
constructor(canvas, unit = '') {
|
|
this.canvas = canvas;
|
|
this.ctx = canvas.getContext('2d');
|
|
this.data = { timestamps: [], values: [], series: null };
|
|
this.unit = unit; // '%', 'B/s', etc.
|
|
this.dpr = window.devicePixelRatio || 1;
|
|
this.padding = { top: 10, right: 10, bottom: 20, left: 60 };
|
|
this.animProgress = 0;
|
|
|
|
this.prevMaxVal = 0;
|
|
this.currentMaxVal = 0;
|
|
|
|
// Use debounced resize for performance and safety
|
|
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
|
window.addEventListener('resize', this._resize);
|
|
this.resize();
|
|
}
|
|
|
|
resize() {
|
|
const parent = this.canvas.parentElement;
|
|
if (!parent) return;
|
|
const rect = parent.getBoundingClientRect();
|
|
if (rect.width === 0) return;
|
|
this.width = rect.width;
|
|
this.height = rect.height;
|
|
this.canvas.width = this.width * this.dpr;
|
|
this.canvas.height = this.height * this.dpr;
|
|
this.canvas.style.width = this.width + 'px';
|
|
this.canvas.style.height = this.height + 'px';
|
|
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
|
this.draw();
|
|
}
|
|
|
|
setData(data) {
|
|
if (this.data && this.data.values && this.data.values.length > 0) {
|
|
this.prevData = JSON.parse(JSON.stringify(this.data));
|
|
} else {
|
|
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;
|
|
} 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;
|
|
}
|
|
}
|
|
|
|
this.animate();
|
|
}
|
|
|
|
animate() {
|
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
|
const start = performance.now();
|
|
const duration = 500;
|
|
const step = (now) => {
|
|
const elapsed = now - start;
|
|
this.animProgress = Math.min(elapsed / duration, 1);
|
|
this.animProgress = 1 - Math.pow(1 - this.animProgress, 3);
|
|
this.draw();
|
|
if (elapsed < duration) this.animFrame = requestAnimationFrame(step);
|
|
};
|
|
this.animFrame = requestAnimationFrame(step);
|
|
}
|
|
|
|
draw() {
|
|
const ctx = this.ctx;
|
|
const w = this.width;
|
|
const h = this.height;
|
|
const p = this.padding;
|
|
const chartW = w - p.left - p.right;
|
|
const chartH = h - p.top - p.bottom;
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
const { timestamps, values, series } = this.data;
|
|
if (!timestamps || timestamps.length < 2) {
|
|
ctx.fillStyle = '#5a6380';
|
|
ctx.font = '11px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('正在加载或暂无数据...', w / 2, h / 2);
|
|
return;
|
|
}
|
|
|
|
// Determine Y max (interpolated)
|
|
const targetMax = this.currentMaxVal || 0.1;
|
|
const startMax = this.prevMaxVal || targetMax;
|
|
const maxVal = startMax + (targetMax - startMax) * this.animProgress;
|
|
|
|
const len = timestamps.length;
|
|
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;
|
|
};
|
|
|
|
// Grid
|
|
ctx.strokeStyle = 'rgba(99, 102, 241, 0.05)';
|
|
ctx.lineWidth = 1;
|
|
for (let i = 0; i <= 3; i++) {
|
|
const y = p.top + (chartH / 3) * i;
|
|
ctx.beginPath();
|
|
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;
|
|
}
|
|
} else {
|
|
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
|
|
];
|
|
|
|
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;
|
|
|
|
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();
|
|
|
|
// 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;
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
destroy() {
|
|
window.removeEventListener('resize', this._resize);
|
|
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
|
}
|
|
}
|