Function paint

app/rcc/scripts/painter/sparklines.js:35–160

(ctx, w, h)

}

function paint(ctx, w, h) {
  // Cream paper background.
  ctx.fillStyle = theme.widget_base;
  ctx.fillRect(0, 0, w, h);

  if (datasets.length === 0) return;

  const cols = Math.max(1, Math.ceil(Math.sqrt(datasets.length * w / h)));
  const rows = Math.ceil(datasets.length / cols);
  const padX = 12;
  const padY = 12;
  const gap  = 8;
  const cw   = (w - padX * 2 - gap * (cols - 1)) / cols;
  const ch   = (h - padY * 2 - gap * (rows - 1)) / rows;

  for (let i = 0; i < datasets.length; ++i) {
    const r  = Math.floor(i / cols);
    const c  = i % cols;
    const x  = padX + c * (cw + gap);
    const y  = padY + r * (ch + gap);
    const ds = datasets[i];
    const traceColor = theme.widget_colors[i % theme.widget_colors.length];

    // Card with shadow.
    ctx.fillStyle = theme.widget_border;
    ctx.fillRect(x + 1, y + 2, cw, ch);
    ctx.fillStyle = theme.alternate_base;
    ctx.fillRect(x, y, cw, ch);
    ctx.strokeStyle = theme.widget_border;
    ctx.lineWidth = 1;
    ctx.strokeRect(x + 0.5, y + 0.5, cw - 1, ch - 1);

    // Title.
    ctx.fillStyle    = theme.placeholder_text;
    ctx.font         = "bold 10px sans-serif";
    ctx.textAlign    = "start";
    ctx.textBaseline = "alphabetic";
    ctx.fillText((ds.title || "").substring(0, 22), x + 10, y + 16);

    // Trend arrow on the right.
    const dir = trend_dir(traces[i]);
    if (dir !== 0) {
      const ax = x + cw - 14;
      const ay = y + 14;
      ctx.fillStyle = dir > 0 ? theme.widget_highlight : theme.alarm;
      ctx.beginPath();
      if (dir > 0) {
        ctx.moveTo(ax, ay - 4);
        ctx.lineTo(ax + 5, ay + 3);
        ctx.lineTo(ax - 5, ay + 3);
      } else {
        ctx.moveTo(ax, ay + 4);
        ctx.lineTo(ax + 5, ay - 3);
        ctx.lineTo(ax - 5, ay - 3);
      }
      ctx.closePath();
      ctx.fill();
    }