Function lineChart

tests/loadtest/tools/dashboard/app.js:894–938

({ series, valueKey, label, formatter, min = null, max = null })

}

function lineChart({ series, valueKey, label, formatter, min = null, max = null }) {
  const values = series
    .map((point, index) => ({
      index,
      label: point.label || point.minute || String(index + 1),
      value: toNumber(point[valueKey]),
    }))
    .filter((point) => point.value !== null);

  if (values.length < 2) {
    return emptyBlock(`Not enough data to draw ${label.toLowerCase()}.`);
  }

  const width = 620;
  const height = 220;
  const padding = 24;
  const yMin = min !== null ? min : Math.min(...values.map((point) => point.value));
  const yMax = max !== null ? max : Math.max(...values.map((point) => point.value));
  const yRange = Math.max(yMax - yMin, 0.0001);
  const xStep = (width - padding * 2) / Math.max(values.length - 1, 1);

  const points = values.map((point, index) => {
    const x = padding + index * xStep;
    const y = height - padding - ((point.value - yMin) / yRange) * (height - padding * 2);
    return { ...point, x, y };
  });

  const polyline = points.map((point) => `${point.x},${point.y}`).join(" ");

  return `
    <svg class="svg-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="${escapeHtml(label)}">
      <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="currentColor" opacity="0.15"></line>
      <polyline points="${polyline}" fill="none" stroke="currentColor" stroke-width="3"></polyline>
      ${points
        .map(
          (point) => `<circle cx="${point.x}" cy="${point.y}" r="3.5" fill="currentColor"><title>${escapeHtml(point.label)}: ${escapeHtml(formatter(point.value))}</title></circle>`
        )
        .join("")}
    </svg>
    <div class="chart-caption">
      <span>${escapeHtml(label)}</span>
      <span>${escapeHtml(formatter(points[0].value))} to ${escapeHtml(formatter(points[points.length - 1].value))}</span>
    </div>
  `;
}

function compareLineChart({ runs, valueKey, label, formatter, min = null, max = null }) {
  const datasets = runs.map((run, index) => {