diff --git a/web-ui/src/lib/Graph.svelte b/web-ui/src/lib/Graph.svelte index b851950e15a2c9b4d2f497864b1842960c0cc0df_d2ViLXVpL3NyYy9saWIvR3JhcGguc3ZlbHRl..970acab72161e6536ffc81e115b8893d943d921a_d2ViLXVpL3NyYy9saWIvR3JhcGguc3ZlbHRl 100644 --- a/web-ui/src/lib/Graph.svelte +++ b/web-ui/src/lib/Graph.svelte @@ -26,7 +26,6 @@ onMount(() => { const ctx = myChart.getContext("2d"); - const labels = []; const datasets = []; const [repoName, results] = data; @@ -30,6 +29,5 @@ const datasets = []; const [repoName, results] = data; - console.log(repoName); let graphData = []; for (let result of results) { @@ -34,9 +32,10 @@ let graphData = []; for (let result of results) { - labels.push( - result["bin-env-vars"]["hg"]["version"].split("+")[0] - ); - graphData.push(result["result"]["time"]["median"]); + graphData.push({ + x: result["bin-env-vars"]["hg"]["version"].split("+")[0], + y: result["result"]["time"]["median"], + node: result["bin-env-vars"]["hg"]["changeset"]["node"], + }); } datasets.push({ label: repoName, @@ -49,7 +48,6 @@ new Chart(ctx, { type: "line", data: { - labels: labels, datasets: datasets, }, options: { @@ -53,8 +51,11 @@ datasets: datasets, }, options: { + interaction: { + mode: "point", + }, scales: { y: { beginAtZero: true, }, }, @@ -56,8 +57,29 @@ scales: { y: { beginAtZero: true, }, }, + plugins: { + tooltip: { + callbacks: { + footer: (items) => { + return items.map((item) => item.raw["node"]).join("\n"); + }, + }, + }, + }, + onClick: (e, elements) => { + const nodes = elements + .map((el) => { + const datasetIndex = el.datasetIndex; + const index = el.index; + + return e.chart.data.datasets[datasetIndex].data[index]["node"]; + }) + .join("+"); + if (navigator && navigator.clipboard && navigator.clipboard.writeText) + return navigator.clipboard.writeText(nodes); + }, }, }); });