Function drawMemGraph

packages/debug-plugin/src/graphs.js:105–150

(canvas, memHistory, historyIndex, peakEl)

 * @param {HTMLElement} peakEl - element to display peak value
 */
export function drawMemGraph(canvas, memHistory, historyIndex, peakEl) {
	const g = prepareGraph(canvas);
	if (g === null) {
		return;
	}
	const { ctx, w, h, barW } = g;

	let peak = 1;
	for (let i = 0; i < GRAPH_SAMPLES; i++) {
		if (memHistory[i] > peak) {
			peak = memHistory[i];
		}
	}
	peak = roundPeak(peak);
	peakEl.textContent = `peak ${peak}MB`;

	// filled area graph
	ctx.fillStyle = "rgba(198,120,221,0.3)";
	ctx.strokeStyle = "#c678dd";
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(0, h);
	for (let i = 0; i < GRAPH_SAMPLES; i++) {
		const idx = (historyIndex + i) % GRAPH_SAMPLES;
		const y = h - (memHistory[idx] / peak) * h;
		const x = Math.round(i * barW);
		ctx.lineTo(x, y);
	}
	ctx.lineTo(w, h);
	ctx.closePath();
	ctx.fill();

	// stroke the top edge
	ctx.beginPath();
	for (let i = 0; i < GRAPH_SAMPLES; i++) {
		const idx = (historyIndex + i) % GRAPH_SAMPLES;
		const y = h - (memHistory[idx] / peak) * h;
		const x = Math.round(i * barW);
		if (i === 0) {
			ctx.moveTo(x, y);
		} else {
			ctx.lineTo(x, y);
		}
	}
	ctx.stroke();
}