sparkline: render as continuous filled polygon with gradient color interpolation

This commit is contained in:
Damocles 2026-04-25 10:10:59 +02:00
parent 85e62c6eeb
commit e1d20c2407

View file

@ -133,22 +133,30 @@ Canvas {
ctx.lineWidth = root.lineWidth; ctx.lineWidth = root.lineWidth;
ctx.stroke(); ctx.stroke();
} else { } else {
// Bar chart - bars grow from zero line (or bottom if all positive) // Filled area - continuous polygon, no visible bar boundaries
const hasCF = typeof colorFunction === "function"; const hasCF = typeof colorFunction === "function";
const zy = lo < 0 ? yOf(0) : height; const baseY = lo < 0 ? yOf(0) : height;
if (!hasCF) ctx.beginPath();
ctx.fillStyle = color.toString(); ctx.moveTo(0, baseY);
for (let i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
if (hasCF)
ctx.fillStyle = colorFunction(d[i]).toString();
const [bx, bw] = xOf(i); const [bx, bw] = xOf(i);
const x0 = Math.floor(bx); const y = yOf(d[i]);
const x1 = Math.floor(bx + bw); ctx.lineTo(bx, y);
const dy = yOf(d[i]); ctx.lineTo(bx + bw, y);
const barTop = Math.min(dy, zy); }
const barH = Math.max(1, Math.abs(dy - zy)); ctx.lineTo(width, baseY);
ctx.fillRect(x0, barTop, Math.max(1, x1 - x0), barH); ctx.closePath();
} if (hasCF) {
const grad = ctx.createLinearGradient(0, 0, width, 0);
for (let i = 0; i < n; i++) {
const [bx, bw] = xOf(i);
grad.addColorStop(Math.min(1, (bx + bw / 2) / width), colorFunction(d[i]).toString());
}
ctx.fillStyle = grad;
} else {
ctx.fillStyle = color.toString();
}
ctx.fill();
} }
} }
} }