feat(utils): sort changed categories/groups/audits by most affected

Author: matejchalk

packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md

@@ -6,9 +6,9 @@
 
 |🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--:|:--:|:--:|
-|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
-|Bug prevention|🟢 **95**|🟡 68|<span style="color: green">▲ **+27**</span>|
 |Code style|🟢 **100**|🟡 54|<span style="color: green">▲ **+46**</span>|
+|Bug prevention|🟢 **95**|🟡 68|<span style="color: green">▲ **+27**</span>|
+|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
 
 ## 🎗️ Groups
 
@@ -30,17 +30,17 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
+|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
+|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
+|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
 |ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|<span style="color: green">▼ **-100%**</span>|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
 |Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
+|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
 |Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
 
 40 other audits are unchanged.

packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md

@@ -6,8 +6,8 @@
 
 |🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--:|:--:|:--:|
-|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
 |Bug prevention|🟡 **63**|🟡 68|<span style="color: red">▼ **-5**</span>|
+|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
 
 <details>
 <summary>1 other category is unchanged.</summary>
@@ -39,8 +39,8 @@
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
 |ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|<span style="color: red">▲ **+∞%**</span>|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
 |Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
+|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
 |Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
 
 48 other audits are unchanged.

packages/utils/src/lib/reports/generate-md-reports-diff.ts

@@ -80,7 +80,7 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
             '⭐ Previous score',
             '🗠 Score change',
           ],
-          ...changed.map(category => [
+          ...sortChanges(changed).map(category => [
             category.title,
             formatScoreWithColor(category.scores.after),
             formatScoreWithColor(category.scores.before, { skipBold: true }),
@@ -115,7 +115,7 @@ function formatDiffGroupsSection(diff: ReportsDiff): string {
         '⭐ Previous score',
         '🗠 Score change',
       ],
-      rows: diff.groups.changed.map(group => [
+      rows: sortChanges(diff.groups.changed).map(group => [
         group.plugin.title,
         group.title,
         formatScoreWithColor(group.scores.after),
@@ -138,7 +138,7 @@ function formatDiffAuditsSection(diff: ReportsDiff): string {
         '📏 Previous value',
         '🗠 Value change',
       ],
-      rows: diff.audits.changed.map(audit => [
+      rows: sortChanges(diff.audits.changed).map(audit => [
         audit.plugin.title,
         audit.title,
         `${getSquaredScoreMarker(audit.scores.after)} ${style(
@@ -238,9 +238,20 @@ function summarizeDiffOutcomes(outcomes: DiffOutcome[], token: string): string {
     .join(', ');
 }
 
-function changesToDiffOutcomes(
-  changes: { scores: { diff: number }; values?: { diff: number } }[],
-): DiffOutcome[] {
+type Change = {
+  scores: { diff: number };
+  values?: { diff: number };
+};
+
+function sortChanges<T extends Change>(changes: T[]): T[] {
+  return [...changes].sort(
+    (a, b) =>
+      Math.abs(b.scores.diff) - Math.abs(a.scores.diff) ||
+      Math.abs(b.values?.diff ?? 0) - Math.abs(a.values?.diff ?? 0),
+  );
+}
+
+function changesToDiffOutcomes(changes: Change[]): DiffOutcome[] {
   return changes.map((change): DiffOutcome => {
     if (change.scores.diff > 0) {
       return 'positive';