Function compareLineChart

tests/loadtest/tools/dashboard/app.js:940–1011

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

}

function compareLineChart({ runs, valueKey, label, formatter, min = null, max = null }) {
  const datasets = runs.map((run, index) => {
    const points = (run.series || [])
      .map((point, pointIndex) => ({
        label: point.label || point.minute || String(pointIndex + 1),
        value: toNumber(point[valueKey]),
      }))
      .filter((point) => point.value !== null);
    return {
      name: run.name,
      color: index === 0 ? "#0979c6" : "#8b9bb1",
      points,
    };
  });

  if (datasets.some((dataset) => dataset.points.length < 2)) {
    return emptyBlock(`Both reports need timeline data to compare ${label.toLowerCase()}.`);
  }

  const width = 620;
  const height = 220;
  const padding = 24;
  const allValues = datasets.flatMap((dataset) => dataset.points.map((point) => point.value));
  const yMin = min !== null ? min : Math.min(...allValues);
  const yMax = max !== null ? max : Math.max(...allValues);
  const yRange = Math.max(yMax - yMin, 0.0001);

  const polylines = datasets
    .map((dataset) => {
      const xStep = (width - padding * 2) / Math.max(dataset.points.length - 1, 1);
      const plotted = dataset.points.map((point, index) => {
        const x = padding + index * xStep;
        const y = height - padding - ((point.value - yMin) / yRange) * (height - padding * 2);
        return { ...point, x, y };
      });
      return {
        ...dataset,
        plotted,
        polyline: plotted.map((point) => `${point.x},${point.y}`).join(" "),
      };
    });

  return `
    <svg class="svg-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="${escapeHtml(label)} comparison">
      <line x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}" stroke="currentColor" opacity="0.15"></line>
      ${polylines
        .map(
          (dataset) => `
            <polyline points="${dataset.polyline}" fill="none" stroke="${dataset.color}" stroke-width="3"></polyline>
            ${dataset.plotted
              .map(
                (point) => `<circle cx="${point.x}" cy="${point.y}" r="3" fill="${dataset.color}"><title>${escapeHtml(dataset.name)} - ${escapeHtml(point.label)}: ${escapeHtml(formatter(point.value))}</title></circle>`
              )
              .join("")}
          `
        )
        .join("")}
    </svg>