More formatting for annual report

src/locales/en.po

@@ -2268,7 +2268,7 @@ msgid "Failed to load history"
 msgstr ""
 
 #: src/components/status.jsx:3006
-#: src/pages/annual-report.jsx:44
+#: src/pages/annual-report.jsx:46
 msgid "Loading…"
 msgstr ""
 
@@ -2410,7 +2410,7 @@ msgid "Login required."
 msgstr "Login required."
 
 #: src/compose.jsx:90
-#: src/pages/annual-report.jsx:136
+#: src/pages/annual-report.jsx:165
 #: src/pages/http-route.jsx:91
 #: src/pages/login.jsx:270
 msgid "Go home"

src/pages/annual-report.css

@@ -31,8 +31,13 @@
     table {
       width: 100%;
 
-      td, th {
+      td,
+      th {
         vertical-align: top;
+
+        &.number {
+          text-align: end;
+        }
       }
 
       th {
@@ -44,6 +49,10 @@
 
       tr > * {
         border-top: 1px dashed var(--outline-color);
+
+        ~ * {
+          padding-inline-start: 1ch;
+        }
       }
     }
 
@@ -68,10 +77,9 @@
 
         .status {
           pointer-events: none;
-          font-size: calc(var(--text-size) * .8);
+          font-size: calc(var(--text-size) * 0.8);
         }
       }
-
     }
   }
-}
+}

src/pages/annual-report.jsx

@@ -35,6 +35,8 @@ export default function AnnualReport() {
   const { accounts, annualReports, statuses } = results || {};
   const report = annualReports?.find((report) => report.year == year)?.data;
 
+  const datePlaceholder = new Date();
+
   return (
     <div id="annual-report-page" class="deck-container" tabIndex="-1">
       <div class="report">
@@ -54,8 +56,16 @@ export default function AnnualReport() {
                     <table>
                       <thead>
                         <tr>
-                          {Object.keys(value[0]).map((key) => (
-                            <th>{key}</th>
+                          {Object.entries(value[0]).map(([key, value]) => (
+                            <th
+                              class={
+                                key !== 'month' && typeof value === 'number'
+                                  ? 'number'
+                                  : ''
+                              }
+                            >
+                              {key}
+                            </th>
                           ))}
                         </tr>
                       </thead>
@@ -63,7 +73,13 @@ export default function AnnualReport() {
                         {value.map((item) => (
                           <tr>
                             {Object.entries(item).map(([k, value]) => (
-                              <td>
+                              <td
+                                class={
+                                  k !== 'month' && typeof value === 'number'
+                                    ? 'number'
+                                    : ''
+                                }
+                              >
                                 {value &&
                                 /(accountId)/i.test(k) &&
                                 /^(mostRebloggedAccounts|commonlyInteractedWithAccounts)$/i.test(
@@ -75,6 +91,13 @@ export default function AnnualReport() {
                                     )}
                                     showAvatar
                                   />
+                                ) : k === 'month' ? (
+                                  datePlaceholder.setMonth(value - 1) &&
+                                  datePlaceholder.toLocaleString(undefined, {
+                                    month: 'long',
+                                  })
+                                ) : typeof value === 'number' ? (
+                                  value.toLocaleString()
                                 ) : (
                                   value
                                 )}
@@ -112,7 +135,13 @@ export default function AnnualReport() {
                           {Object.entries(value).map(([k, value]) => (
                             <tr>
                               <th>{k}</th>
-                              <td>{value}</td>
+                              <td
+                                class={
+                                  typeof value === 'number' ? 'number' : ''
+                                }
+                              >
+                                {value}
+                              </td>
                             </tr>
                           ))}
                         </tbody>