Display visitor stats on stats page

Signed-off-by: Brian Evans <ebrian101@gmail.com>
mrbrianevans · Sep 9, 2023 · 25eafcd · 25eafcd
1 parent 2dd6361
commit 25eafcd
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 14 deletions.
diff --git a/client-pure/src/about.html b/client-pure/src/about.html
@@ -3,7 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>About companies.stream</title>
-  <meta name="description" content="Companies House streaming API can be used to develop applications that respond to real time changes to the companies register, such as keeping a database always up-to-date.">
+  <meta name="description"
+        content="Companies House streaming API can be used to develop applications that respond to real time changes to the companies register, such as keeping a database always up-to-date.">
 </head>
 <body>
 
@@ -13,19 +14,24 @@
       <h1 class="title">About</h1>
       <div class="badges">
         <a href="/">Home</a>
+        <a href="/stats">Stats</a>
       </div>
     </header>
 
     <section>
       <h2>About the Streaming API</h2>
-      <p>The Streaming API offered by Companies House makes it possible to listen for changes to the companies register.</p>
-      <p>It uses a long-running HTTP endpoint, similar to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events" target="_blank">Server Sent Events</a> (SSE).</p>
+      <p>The Streaming API offered by Companies House makes it possible to listen for changes to the companies
+        register.</p>
+      <p>It uses a long-running HTTP endpoint, similar to <a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events" target="_blank">Server Sent
+        Events</a> (SSE).</p>
       <p>
         Related links:
       </p>
 
       <ul>
-        <li><a href="https://developer-specs.company-information.service.gov.uk/streaming-api/guides/overview" target="_blank">Official documentation</a></li>
+        <li><a href="https://developer-specs.company-information.service.gov.uk/streaming-api/guides/overview"
+               target="_blank">Official documentation</a></li>
         <li><a href="https://chguide.co.uk/streams" target="_blank">CH Guide</a></li>
       </ul>
     </section>
@@ -51,12 +57,16 @@ <h2>About Companies House</h2>
       </p>
       <p>
         A non-technical interface for this data can be found at
-        <a href="https://find-and-update.company-information.service.gov.uk/" target="_blank">Find and update company information</a>.
+        <a href="https://find-and-update.company-information.service.gov.uk/" target="_blank">Find and update company
+          information</a>.
       </p>
       <p>
-        Companies House offers multiple data products, which can be used by software developers to extract useful datasets about UK companies.
-        More information about each of their data products can be found on <a href="https://chguide.co.uk/streams" target="_blank">CH Guide</a>,
-        which I started to collect related information about the data products. At a high level, there are three main ways to access Companies House data:
+        Companies House offers multiple data products, which can be used by software developers to extract useful
+        datasets about UK companies.
+        More information about each of their data products can be found on <a href="https://chguide.co.uk/streams"
+                                                                              target="_blank">CH Guide</a>,
+        which I started to collect related information about the data products. At a high level, there are three main
+        ways to access Companies House data:
       </p>
       <ul>
         <li>bulk data files</li>
@@ -68,15 +78,19 @@ <h2>About Companies House</h2>
     <section>
       <h2>About the creator</h2>
       <p>This website was created by Brian Evans in January 2021.</p>
-      <p>Brian Evans is a software developer with a focus on the JavaScript/TypeScript languages, and has used the Companies House data products since late 2020.</p>
+      <p>Brian Evans is a software developer with a focus on the JavaScript/TypeScript languages, and has used the
+        Companies House data products since late 2020.</p>
       <ul>
         <li><a href="https://brianevans.tech" target="_blank">Personal website</a></li>
         <li><a href="https://github.com/mrbrianevans" target="_blank">GitHub profile</a></li>
-        <li>Time coding: <a href="https://wakatime.com/@f8dd9b3d-8b67-421e-8f3e-ab941b402e60" target="_blank"><img src="https://wakatime.com/badge/user/f8dd9b3d-8b67-421e-8f3e-ab941b402e60.svg?style=flat-square" alt="Total time coded since Jul 23 2020"></a></li>
+        <li>Time coding: <a href="https://wakatime.com/@f8dd9b3d-8b67-421e-8f3e-ab941b402e60" target="_blank"><img
+          src="https://wakatime.com/badge/user/f8dd9b3d-8b67-421e-8f3e-ab941b402e60.svg?style=flat-square"
+          alt="Total time coded since Jul 23 2020"></a></li>
         <li><a href="https://www.linkedin.com/in/brianevanstech/" target="_blank">LinkedIn profile</a></li>
       </ul>
       <p>
-        I've worked with all the major Companies House public data products including their bulk data products, the REST API and the Streaming API.
+        I've worked with all the major Companies House public data products including their bulk data products, the REST
+        API and the Streaming API.
       </p>
     </section>
   </article>

diff --git a/client-pure/src/pages/stats.ts b/client-pure/src/pages/stats.ts
@@ -1,6 +1,7 @@
 import "../styles/theme.scss"
 import "../styles/events.scss"
 import "../styles/samples.scss"
+import "../styles/layout.css"
 import * as echarts from "echarts/core"
 
 // Import bar charts, all suffixed with Chart
@@ -52,7 +53,7 @@ type ECOption = ComposeOption<
   | DatasetComponentOption
 >;
 
-const streamPaths = new Set(["filings", "companies", "persons-with-significant-control", "officers"])
+const streamPaths = new Set(["filings", "companies", "persons-with-significant-control", "officers", "insolvency-cases"])
 
 { // downloads
   const container = document.getElementById("download-stats-container")
@@ -111,3 +112,23 @@ const streamPaths = new Set(["filings", "companies", "persons-with-significant-c
 
   loadChartData()
 }
+
+{
+  async function getVisitorStats() {
+    const { total, today } = await fetch("/events/visitors").then(r => r.json())
+    return { total, today }
+  }
+
+  async function updateVisitorStatsOnPage() {
+    try {
+      const { total, today } = await getVisitorStats()
+      document.getElementById("visitors-total").innerText = total
+      document.getElementById("visitors-today").innerText = today
+    } catch (e) {
+      console.error("Failed to update usage stats:", e)
+    }
+
+  }
+
+  updateVisitorStatsOnPage()
+}
diff --git a/client-pure/src/stats.html b/client-pure/src/stats.html
@@ -14,6 +14,12 @@ <h1 class="title">Statistics</h1>
     <div class="badges">
       <a href="/">Home</a>
     </div>
+
+    <div class="row">
+      <span>Total unique visitors: <span id="visitors-total">?</span></span>
+      <span>Unique visitors today: <span id="visitors-today">?</span></span>
+    </div>
+
     <p>Statistics of the events that come through on the Companies House streaming API. This is to help design better
       systems for consuming the Streaming APIs.</p>
   </header>

diff --git a/client-pure/vite.config.ts b/client-pure/vite.config.ts
@@ -19,7 +19,7 @@ const pages = await readdir("src").then(ps => ps.filter(p => p.endsWith(".html")
 const sitemap = pages.map(p => p.replace("index.html", "")).map(p => `https://companies.stream/${p.slice(0, -5)}`).join("\n")
 await writeFile("src/public/sitemap.txt", sitemap)
 
-const useLocalBackend = false
+const useLocalBackend = true
 const backendHttpUrl = useLocalBackend ? "http://localhost" : "https://companies.stream"
 
 export default defineConfig({
@@ -38,6 +38,7 @@ export default defineConfig({
       "/events/health": backendHttpUrl,
       "/events/downloadHistory": backendHttpUrl,
       "/events/stats": backendHttpUrl,
+      "/events/visitors": backendHttpUrl,
       "/events": { ws: true, target: "ws://localhost/events" } // can't be proxied to companies.stream
     }
   },
@@ -46,7 +47,7 @@ export default defineConfig({
     format: "es"
   },
   optimizeDeps: {
-    esbuildOptions : {
+    esbuildOptions: {
       target: "es2020"
     }
   }