diff --git a/web-ui/src/App.svelte b/web-ui/src/App.svelte index fff71a804be58170dccd7c1d9440b50ae585d573_d2ViLXVpL3NyYy9BcHAuc3ZlbHRl..b35d146e92f7ef939b243825309dbb44f755e8a0_d2ViLXVpL3NyYy9BcHAuc3ZlbHRl 100644 --- a/web-ui/src/App.svelte +++ b/web-ui/src/App.svelte @@ -1,9 +1,23 @@ <script lang="ts"> import Benchmark from "./lib/Benchmark.svelte"; - import results from "../../results-small.json"; + import allResults from "../../results-new.json"; + + /** + * Group results as expected by `Benchmark` + */ + const groupResults = (results) => { + return results.reduce((acc, result) => { + const key = result["bin-env-vars"]["hg"]["flavor"]; + if (!acc.hasOwnProperty(key)) { + acc[key] = []; + } + acc[key].push(result); + return acc; + }, {}); + }; </script> <main> <h1>Poulpe!</h1> @@ -5,7 +19,7 @@ </script> <main> <h1>Poulpe!</h1> - {#each Object.entries(results) as [name, variants]} + {#each Object.entries(allResults) as [name, results]} <h2>{name}</h2> @@ -11,10 +25,7 @@ <h2>{name}</h2> - {#each Object.entries(variants) as [variantName, branches]} - <h3>Variant: {variantName}</h3> - {#each Object.entries(branches) as [branchName, data]} - <h3>Branch: {branchName}</h3> - <Benchmark {data} /> - {/each} + {#each Object.entries(groupResults(results)) as [flavor, results]} + <h3>Flavor: {flavor}</h3> + <Benchmark {results} /> {/each} {/each} </main> diff --git a/web-ui/src/config.ts b/web-ui/src/config.ts index fff71a804be58170dccd7c1d9440b50ae585d573_d2ViLXVpL3NyYy9jb25maWcudHM=..b35d146e92f7ef939b243825309dbb44f755e8a0_d2ViLXVpL3NyYy9jb25maWcudHM= 100644 --- a/web-ui/src/config.ts +++ b/web-ui/src/config.ts @@ -1,6 +1,5 @@ export const COLORS = [ "#FF6633", - "#FFB399", "#FF33FF", "#00B3E6", "#1AB399", @@ -18,6 +17,7 @@ "#33FFCC", "#66994D", "#E6331A", + "#FFB399", "#B366CC", "#99FF99", "#E6B3B3", diff --git a/web-ui/src/lib/Benchmark.svelte b/web-ui/src/lib/Benchmark.svelte index fff71a804be58170dccd7c1d9440b50ae585d573_d2ViLXVpL3NyYy9saWIvQmVuY2htYXJrLnN2ZWx0ZQ==..b35d146e92f7ef939b243825309dbb44f755e8a0_d2ViLXVpL3NyYy9saWIvQmVuY2htYXJrLnN2ZWx0ZQ== 100644 --- a/web-ui/src/lib/Benchmark.svelte +++ b/web-ui/src/lib/Benchmark.svelte @@ -1,8 +1,22 @@ <script lang="ts"> import Graph from "./Graph.svelte"; - export let data; + export let results; + + /** + * Group results as expected by `Graph` + */ + const groupResults = (results) => { + return results.reduce((acc, result) => { + const key = result["data-env-vars"]["name"].split("-", 1)[0]; + if (!acc.hasOwnProperty(key)) { + acc[key] = []; + } + acc[key].push(result); + return acc; + }, {}); + }; </script> <div class="benchmark"> <div class="graphs"> @@ -5,8 +19,11 @@ </script> <div class="benchmark"> <div class="graphs"> - <Graph {data} /> + {#each Object.entries(groupResults(results)) as [repoName, data]} + <h4>{repoName}</h4> + <Graph {data} /> + {/each} </div> </div> diff --git a/web-ui/src/lib/Graph.svelte b/web-ui/src/lib/Graph.svelte index fff71a804be58170dccd7c1d9440b50ae585d573_d2ViLXVpL3NyYy9saWIvR3JhcGguc3ZlbHRl..b35d146e92f7ef939b243825309dbb44f755e8a0_d2ViLXVpL3NyYy9saWIvR3JhcGguc3ZlbHRl 100644 --- a/web-ui/src/lib/Graph.svelte +++ b/web-ui/src/lib/Graph.svelte @@ -8,9 +8,27 @@ export let data; let myChart; + /** + * Group results as expected by `Chart` + */ + const groupResults = (results) => { + return results.reduce((acc, result) => { + const dataEnvName = result["data-env-vars"]["name"]; + const key = + dataEnvName.slice(dataEnvName.split("-", 1)[0].length + 1) + + "-" + + result["bin-env-vars"]["hg"]["changeset"]["branch"]; + if (!acc.hasOwnProperty(key)) { + acc[key] = []; + } + acc[key].push(result); + return acc; + }, {}); + }; + onMount(() => { const ctx = myChart.getContext("2d"); const datasets = []; const labels = new Set(); @@ -11,11 +29,11 @@ onMount(() => { const ctx = myChart.getContext("2d"); const datasets = []; const labels = new Set(); - for (const [index, [repoVariant, results]] of Object.entries( - data + for (const [index, [dataEnvName, results]] of Object.entries( + groupResults(data) ).entries()) { const graphData = []; const sorted = [...results].sort((a, b) => { @@ -33,7 +51,7 @@ labels.add(label); } datasets.push({ - label: repoVariant, + label: dataEnvName, data: graphData, backgroundColor: COLORS[index], borderColor: COLORS[index],