ALPR Stats (#2)

* set up lambda to get total ALPR counts

* show total counts on map, updated hourly

webapp/src/components/ALPRCounter.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-card>
+    <v-card-text class="text-center">
+      <div class="d-flex flex-row justify-space-between">
+        <div class="px-2">
+          <h6>US</h6>
+          <h4>{{ formatCount(counts.us) }}</h4>
+        </div>
+        <v-divider vertical></v-divider>
+        <div class="px-2">
+          <h6>Worldwide</h6>
+          <h4>{{ formatCount(counts.worldwide) }}</h4>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { getALPRCounts } from '@/services/apiService';
+
+const counts = ref({
+  us: null,
+  worldwide: null,
+});
+
+onMounted(() => {
+  getALPRCounts().then((response) => {
+    counts.value = response;
+  });
+});
+
+function formatCount(count: number | null): string {
+  if (count === null) {
+    return '-';
+  }
+  if (count < 1000) {
+    return Math.round(count / 10) * 10 + '';
+  }
+  const rounded = Math.round(count / 100) / 10;
+  return `${rounded}k+`;
+}
+</script>

webapp/src/services/apiService.ts

@@ -65,6 +65,12 @@ export const getALPRs = async (boundingBox: BoundingBox) => {
   return response.data;
 }
 
+export const getALPRCounts = async () => {
+  const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/alpr-counts.json";
+  const response = await apiService.get(s3Url);
+  return response.data;
+}
+
 export const getClusters = async () => {
   const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/alpr_clusters.json";
   const response = await apiService.get(s3Url);

webapp/src/views/HomeView.vue

@@ -17,6 +17,10 @@
       @ready="mapLoaded"
       :options="{ zoomControl: false, attributionControl: false }"
     >
+      <l-control position="bottomleft">
+        <ALPRCounter />
+      </l-control>
+
       <l-control position="topleft">
         <form @submit.prevent="onSearch">
           <v-text-field
@@ -78,6 +82,7 @@ import { useDisplay, useTheme } from 'vuetify';
 import DFMapMarker from '@/components/DFMapMarker.vue';
 import DFMarkerCluster from '@/components/DFMarkerCluster.vue';
 import NewVisitor from '@/components/NewVisitor.vue';
+import ALPRCounter from '@/components/ALPRCounter.vue';
 import type { ALPR } from '@/types';
 
 const DEFAULT_ZOOM = 12;