Make fraction chart relative to its corresponding artifact

site/frontend/src/pages/compare/compile/table/sections-chart.vue

@@ -7,16 +7,17 @@ const props = defineProps<{
   after: CompilationSections;
 }>();
 
-const maxTotalDuration = computed(() => {
-  const before = calculateTotalSectionsDuration(props.before);
-  const after = calculateTotalSectionsDuration(props.after);
-  return Math.max(before, after);
-});
-
 function calculateTotalSectionsDuration(sections: CompilationSections): number {
   return sections.sections.reduce((accum, section) => accum + section.value, 0);
 }
 
+const beforeTotalWidth = computed(() => {
+  return calculateTotalSectionsDuration(props.before);
+});
+const afterTotalWidth = computed(() => {
+  return calculateTotalSectionsDuration(props.after);
+});
+
 const SECTIONS_PALETTE = [
   "#7768AE",
   "#FFCf96",
@@ -29,8 +30,8 @@ function getSectionColor(index: number): string {
   return SECTIONS_PALETTE[index % SECTIONS_PALETTE.length];
 }
 
-function calculate_width(value: number): string {
-  const fraction = value / maxTotalDuration.value;
+function calculate_width(value: number, totalDuration: number): string {
+  const fraction = value / totalDuration;
   return `${(fraction * 100).toFixed(2)}%`;
 }
 
@@ -53,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),
     });
   }
@@ -87,7 +92,10 @@ function deactivate() {
             @mouseenter="activate(section.name)"
             @mouseleave="deactivate"
             :style="{
-              width: calculate_width(section.value),
+              width: calculate_width(
+                section.value,
+                rowIndex == 0 ? beforeTotalWidth : afterTotalWidth
+              ),
               backgroundColor: getSectionColor(index),
             }"
           >
@@ -118,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>
@@ -147,7 +155,6 @@ function deactivate() {
     width: calc(100% - 60px);
     display: flex;
     flex-direction: row;
-    border-right: 1px dashed #333333;
 
     .section {
       height: 30px;