# HG changeset patch # User Raphaël Gomès <rgomes@octobus.net> # Date 1657272655 -7200 # Fri Jul 08 11:30:55 2022 +0200 # Node ID b35d146e92f7ef939b243825309dbb44f755e8a0 # Parent fff71a804be58170dccd7c1d9440b50ae585d573 web-ui: use new grouping to have better graphs diff --git a/web-ui/src/App.svelte b/web-ui/src/App.svelte --- a/web-ui/src/App.svelte +++ b/web-ui/src/App.svelte @@ -1,20 +1,31 @@ <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> - {#each Object.entries(results) as [name, variants]} + {#each Object.entries(allResults) as [name, results]} <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 --- 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 --- a/web-ui/src/lib/Benchmark.svelte +++ b/web-ui/src/lib/Benchmark.svelte @@ -1,12 +1,29 @@ <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"> - <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 --- a/web-ui/src/lib/Graph.svelte +++ b/web-ui/src/lib/Graph.svelte @@ -8,14 +8,32 @@ 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(); - 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],