Display database generation time in relative format

src/paths/index/components/IndexHeader.js

@@ -39,14 +39,53 @@ export default class IndexHeader extends LitElement {
 
     @property({ type: Date }) generated_at = null;
 
+    constructor() {
+        super();
+
+        // Auto-refresh about once a minute so that the relative time of generation is always actual.
+        this._refreshTimeout = setTimeout(this._refresh.bind(this), 60 * 1000);
+    }
+
+    _refresh() {
+        this.requestUpdate();
+
+        // Continue updating.
+        this._refreshTimeout = setTimeout(this._refresh.bind(this), 60 * 1000);
+    }
+
     render() {
+        let generatedAt = "";
+        let generatedRel = "";
+
+        if (this.generated_at) {
+            generatedAt = greports.format.formatTimestamp(this.generated_at);
+
+            let timeValue = (Date.now() - this.generated_at) / (1000 * 60);
+            let timeUnit = "minute";
+
+            if (timeValue < 1) {
+                generatedRel = "just now";
+            } else {
+                if (timeValue > 60) {
+                    timeValue = timeValue / 60;
+                    timeUnit = "hour";
+                }
+
+                generatedRel = greports.format.formatTimespan(-Math.round(timeValue), timeUnit);
+            }
+        }
+
         return html`
             <div class="header">
                 <h1>
                     Godot Team Reports
                 </h1>
                 <div class="header-metadata">
-                    <span>data generated on ${greports.format.formatTimestamp(this.generated_at)}</span>
+                    ${(this.generated_at ? html`
+                        <span title="${generatedAt}">
+                            data generated ${generatedRel}
+                        </span>
+                    ` : '')}
                     <br/>
                     <a
                             href="https://github.com/pycbouh/godot-team-reports"

src/shared/scripts/global.js

@@ -20,9 +20,9 @@ const ReportsAPI = {
 const ReportsFormatter = {
   formatDate(dateString) {
     const options = {
-      year: 'numeric', month: 'long', day: 'numeric'
+      year: 'numeric', month: 'long', day: 'numeric',
     };
-    const dateFormatter =  new Intl.DateTimeFormat('en-US', options);
+    const dateFormatter = new Intl.DateTimeFormat('en-US', options);
 
     const date = new Date(dateString);
     return dateFormatter.format(date);
@@ -32,14 +32,23 @@ const ReportsFormatter = {
     const options = {
       year: 'numeric', month: 'long', day: 'numeric',
       hour: 'numeric', hour12: false, minute: 'numeric',
-      timeZone: 'UTC', timeZoneName: 'short'
+      timeZone: 'UTC', timeZoneName: 'short',
     };
-    const dateFormatter =  new Intl.DateTimeFormat('en-US', options);
+    const dateFormatter = new Intl.DateTimeFormat('en-US', options);
 
     const date = new Date(timeString);
     return dateFormatter.format(date);
   },
 
+  formatTimespan(timeValue, timeUnit) {
+    const options = {
+      style: 'long',
+    };
+    const timeFormatter = new Intl.RelativeTimeFormat('en-US', options);
+
+    return timeFormatter.format(timeValue, timeUnit);
+  },
+
   getDaysSince(dateString) {
     const date = new Date(dateString);
     const msBetween = (new Date()) - date;