# HG changeset patch # User Raphaël Gomès <rgomes@octobus.net> # Date 1657202606 -7200 # Thu Jul 07 16:03:26 2022 +0200 # Node ID 970acab72161e6536ffc81e115b8893d943d921a # Parent b851950e15a2c9b4d2f497864b1842960c0cc0df web-ui: add changeset information in tooltip and allow clipboard copy diff --git a/web-ui/src/lib/Graph.svelte b/web-ui/src/lib/Graph.svelte --- a/web-ui/src/lib/Graph.svelte +++ b/web-ui/src/lib/Graph.svelte @@ -26,17 +26,16 @@ onMount(() => { const ctx = myChart.getContext("2d"); - const labels = []; const datasets = []; const [repoName, results] = data; - console.log(repoName); 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,15 +48,38 @@ new Chart(ctx, { type: "line", data: { - labels: labels, datasets: datasets, }, options: { + interaction: { + mode: "point", + }, 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); + }, }, }); });