{
const columns = ["comb", "result"];
let data = {
comb1: [
{ queryId: 1, duckDBTime: 20, arqueroTime: 15 },
{ queryId: 2, duckDBTime: 26, arqueroTime: 15 },
{ queryId: 3, duckDBTime: 30, arqueroTime: 15 }
],
comb2: [
{ queryId: 4, duckDBTime: 20, arqueroTime: 15 },
{ queryId: 5, duckDBTime: 26, arqueroTime: 15 },
{ queryId: 6, duckDBTime: 30, arqueroTime: 15 }
]
};
let table = `<table>
<th>
<td>
${columns.join("</td><td>")}
</td>
</th>`;
const drawPlot = async (arr) => {
let plot = await vl
.markLine()
.data(arr)
.encode(vl.x().fieldO("queryId"), vl.y().average("cylinders"))
.render({ renderer: "svg" });
return plot.innerHTML;
};
for (let [comb, results] of Object.entries(data)) {
const values = {
comb,
result: await drawPlot(comb, results)
};
table += `<tr>
<td>
${columns.map((d) => values[d]).join("</td><td>")}
</td>
</tr>`;
}
table += "</table>";
return html`${table}`;
}