# 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],