From 215ebff0a2a9c37a2f89b70d371c5b399d4354f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Mon, 18 Dec 2023 19:59:59 +0100
Subject: [PATCH] Include percent durations in fraction chart legend

---
 .../src/pages/compare/compile/table/sections-chart.vue    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/frontend/src/pages/compare/compile/table/sections-chart.vue b/site/frontend/src/pages/compare/compile/table/sections-chart.vue
index b5190b560..23758d649 100644
--- a/site/frontend/src/pages/compare/compile/table/sections-chart.vue
+++ b/site/frontend/src/pages/compare/compile/table/sections-chart.vue
@@ -54,12 +54,16 @@ const chartRows: ComputedRef<Array<[string, CompilationSections]>> = computed(
   ]
 );
 const legendItems: ComputedRef<
-  Array<{section: CompilationSection; color: string}>
+  Array<{section: CompilationSection; label: string; color: string}>
 > = computed(() => {
   const items = [];
   for (const section of props.before.sections) {
     items.push({
       section,
+      label: `${section.name} (${formatPercent(
+        props.before,
+        section.name
+      )} -> ${formatPercent(props.after, section.name)})`,
       color: getSectionColor(items.length),
     });
   }
@@ -122,7 +126,7 @@ function deactivate() {
           :class="{color: true, active: activeSection === item.section.name}"
           :style="{backgroundColor: item.color}"
         ></div>
-        <div class="name">{{ item.section.name }}</div>
+        <div class="name">{{ item.label }}</div>
       </div>
     </div>
   </div>