Function compareBarChart

tests/loadtest/tools/dashboard/app.js:1013–1055

(label, leftRun, rightRun, key, formatter)

}

function compareBarChart(label, leftRun, rightRun, key, formatter) {
  const tone = buildCompareTone(leftRun.overview?.[key], rightRun.overview?.[key], formatter);
  const values = [
    { label: "A", name: leftRun.name, value: leftRun.overview?.[key] ?? null, color: "#0979c6", toneClass: tone.leftClass },
    { label: "B", name: rightRun.name, value: rightRun.overview?.[key] ?? null, color: "#8b9bb1", toneClass: tone.rightClass },
  ];
  const actual = values.filter((item) => item.value !== null && item.value !== undefined);
  if (!actual.length) {
    return emptyBlock(`Neither report exported ${label.toLowerCase()}.`);
  }

  const maxValue = Math.max(...actual.map((item) => item.value), 1);
  return `
    <div class="bar-chart">
      ${values
        .map(
          (item) => `
            <div class="bar-chart-row ${item.toneClass}">
              <div class="compare-bar-label">
                <strong>${escapeHtml(item.label)}</strong>
                <span>${escapeHtml(item.name)}</span>
              </div>
              <div class="bar-chart-track"><div class="bar-chart-fill" style="width:${item.value ? (item.value / maxValue) * 100 : 0}%; background:${item.color}"></div></div>
              <strong>${escapeHtml(formatter(item.value))}</strong>
            </div>
          `
        )
        .join("")}
    </div>
    <div class="compare-legend">
      ${values
        .map(
          (item) => `
            <span class="compare-legend-item">
              <span class="compare-legend-swatch" style="background:${item.color}"></span>
              ${escapeHtml(item.label)}: ${escapeHtml(item.name)}
            </span>
          `
        )
        .join("")}
    </div>
  `;
}

function buildRunMeta(run, points) {
  const parts = [];