Fix coverage sort order

The line and branch percentages were introduced in #3348 as text columns instead of numeric columns.  This PR fixes the issue by casting the value to a float, allowing the values to be sorted numerically instead of alphabetically.

Author: williamjallen

resources/js/vue/components/BuildCoveragePage.vue

@@ -150,15 +150,15 @@
               <font-awesome-icon :icon="FA.faFile" /> {{ obj.path }}
             </a>
           </template>
-          <template #linePercentage="{ props: pct }">
+          <template #linePercentage="{ props: { text: pct } }">
             <progress
               class="tw-progress tw-w-24"
               :class="percentToProgressBarColorClass(pct)"
               :value="pct"
               max="100"
             /> {{ pct }}%
           </template>
-          <template #branchPercentage="{ props: pct }">
+          <template #branchPercentage="{ props: { text: pct } }">
             <progress
               class="tw-progress tw-w-24"
               :class="percentToProgressBarColorClass(pct)"
@@ -384,11 +384,20 @@ export default {
       });
 
       return Object.values(coverageByPrefix).map(obj => {
+        const linePct = this.computePercentage(obj.linesOfCodeTested, obj.linesOfCodeUntested);
+        const branchPct = this.computePercentage(obj.branchesTested, obj.branchesUntested);
+
         return {
           ...obj,
-          linePercentage: this.computePercentage(obj.linesOfCodeTested, obj.linesOfCodeUntested),
+          linePercentage: {
+            text: linePct,
+            value: parseFloat(linePct),
+          },
           lines: `${obj.linesOfCodeTested} / ${obj.linesOfCodeTested + obj.linesOfCodeUntested}`,
-          branchPercentage: this.computePercentage(obj.branchesTested, obj.branchesUntested),
+          branchPercentage: {
+            text: branchPct,
+            value: parseFloat(branchPct),
+          },
           branches: `${obj.branchesTested} / ${obj.branchesTested + obj.branchesUntested}`,
         };
       });