orders the attendance by date

src/lib/rendering.ts

@@ -685,21 +685,34 @@ export function generateAttendanceHtml(
 
 function generateAttendanceRowHtml(name: string, data: Attendance): string {
     const sum = data.sum() / 100;
-
-    const bar = `
-      <div class="percentage-bar">
-        <div style="width: ${data.present / sum}%;background-color: darkgreen"></div>
-        <div style="width: ${data.noshow_excused / sum}%;background-color: yellow"></div>
-        <div style="width: ${data.noshow / sum}%;background-color: red"></div>
-      </div>`;
-
     return `
       <tr>
         <td> ${name} </td> 
-        <td> ${bar} </td> 
+        <td> ${generatePercentageBar(data)} </td> 
         <td> ${data.present} </td> 
         <td> ${data.noshow_excused} </td> 
         <td> ${data.noshow}</td> 
         <td> ${(data.present / sum).toFixed(1)}% </td> 
       </tr>`;
 }
+
+function generatePercentageBar(data: Attendance): string {
+    const width = 100 / data.sum();
+
+    const tagged: { value: number; color: string }[] = [
+        ...data.presents.map((value) => ({ value, color: "darkgreen" })),
+        ...data.noshows.map((value) => ({ value, color: "red" })),
+        ...data.noshow_excuseds.map((value) => ({ value, color: "yellow" })),
+    ];
+
+    // Sort by number
+    tagged.sort((a, b) => a.value - b.value);
+
+    var barHtml = '<div class="percentage-bar">';
+    // Iterate in order
+    for (const { color } of tagged) {
+        barHtml += `<div style="width: ${width}%;background-color: ${color}"></div>`;
+    }
+    barHtml += "</div>";
+    return barHtml;
+}