Merge pull request #60 from UW-Macrostrat/heatmap

Heatmap

Author: davidsklar99

.env.example

@@ -4,6 +4,7 @@ VITE_MACROSTRAT_TILESERVER_DOMAIN='https://tileserver.staging.svc.macrostrat.org
 VITE_MACROSTRAT_INSTANCE='Development'
 VITE_MACROSTRAT_API_DOMAIN='https://macrostrat.org'
 VITE_ROCKD_API_URL='https://dev.rockd.org/api/v2/'
+VITE_MATOMO_API_TOKEN='<your-matomo-api-token>'
 
 # Needed for map ingestion system
 # SECRET_KEY='Replace with api signing key'

packages/settings/index.ts

@@ -27,6 +27,8 @@ export const ingestPrefix = getRuntimeConfig(
   apiDomain + "/api/ingest"
 );
 
+export const matomoToken = getRuntimeConfig("MATOMO_API_TOKEN");
+
 /** Legacy settings object */
 export const SETTINGS = {
   rockdApiURL,
@@ -36,4 +38,5 @@ export const SETTINGS = {
   burwellTileDomain,
   mapboxAccessToken,
   rockdApiOldURL,
+  matomoToken,
 };

pages/heatmap/+Page.client.ts

@@ -0,0 +1,168 @@
+import h from "./main.module.sass";
+import { useAPIResult } from "@macrostrat/ui-components";
+import {
+  MapAreaContainer,
+  MapView,
+} from "@macrostrat/map-interface";
+import { mapboxAccessToken } from "@macrostrat-web/settings";
+import { Footer } from "~/components/general";
+import { Divider, Spinner } from "@blueprintjs/core";
+
+export function Page() {
+    const coords = getAllCoords();
+
+    return h('div.main', [
+        h('div.heatmap-page', [
+            h(PageHeader, { coords }),
+            h(Map, { coords })
+        ]),
+        h(Footer)
+    ]) 
+}
+
+function PageHeader({ coords }) {
+    const visitsToday = getVisitsToday();
+
+    const { visits, visitors } = visitsToday || {};
+
+    const Visit = !visitsToday ? 
+        h('p', 'Loading visits...') : 
+        h('div.visits-today', [
+            h('h3', `${visits.toLocaleString()} visits today`),
+            h.if(coords?.length)('h3', `${coords?.length.toLocaleString()} visits this year`),
+        ])
+
+    return h('div.page-header', [
+        h('h1', 'Heatmap'),
+        Visit,
+        h(Divider),
+        h('p', 'This is a heatmap of all the locations where Macrostrat has been accessed.'),
+        h('p', 'The blue markers indicate today\'s accesses, while the grey markers indicate accesses from other days.'),
+    ]);
+}
+
+function Map({coords}) {   
+    const today = getTodayCoords();
+
+    const style = 'mapbox://styles/mapbox/dark-v10';
+
+    if (!coords || !today) {
+      return h("div.map-area-container.loading", [
+        h(Spinner, { size: 50 }),
+      ]);
+    }
+
+    const handleMapLoaded = (map) => {
+        map.on('load', () => {
+            // Combine coords and today coords, marking today's points
+            const allFeatures = coords.map((coord) => ({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [coord.longitude, coord.latitude],
+                },
+                properties: {
+                    isToday: false,
+                },
+            })).concat(
+                today.map((coord) => ({
+                    type: 'Feature',
+                    geometry: {
+                    type: 'Point',
+                    coordinates: [coord.longitude, coord.latitude],
+                    },
+                    properties: {
+                    isToday: true,
+                    },
+                }))
+            );
+
+            map.addSource('markers', {
+                type: 'geojson',
+                data: {
+                    type: 'FeatureCollection',
+                    features: allFeatures,
+                },
+            });
+
+            // Individual points - others (grey)
+            map.addLayer({
+                id: 'markers-other',
+                type: 'circle',
+                source: 'markers',
+                filter: ['all', ['!', ['has', 'point_count']], ['==', ['get', 'isToday'], false]],
+                paint: {
+                    'circle-radius': 2,
+                    'circle-color': '#888',
+                },
+            });
+
+            // Individual points - today (blue)
+            map.addLayer({
+                id: 'markers-today',
+                type: 'circle',
+                source: 'markers',
+                filter: ['all', ['!', ['has', 'point_count']], ['==', ['get', 'isToday'], true]],
+                paint: {
+                    'circle-radius': 3,
+                    'circle-color': '#007cbf',
+                },
+            });
+        });
+    };
+
+    return h(
+        "div.map-container",
+        [
+            h(
+            MapAreaContainer,
+            {
+                className: "map-area-container",
+            },
+            [
+                h(MapView, { 
+                    style, 
+                    mapboxToken: mapboxAccessToken, 
+                    onMapLoaded: handleMapLoaded,
+                    mapPosition:  {
+                        camera: {
+                            lat: 39, 
+                            lng: -98, 
+                            altitude: 6000000,
+                        },
+                    },
+                }),
+            ]),
+        ]
+    );
+}
+
+function getAllCoords() {
+    return useAPIResult('/api/matomo', {
+        date: '2025-01-01,today',
+        period: 'range',
+        filter_limit: 10000,
+        filter_offset: 0,
+        showColumns: 'latitude,longitude',
+        doNotFetchActions: true,
+    })
+}
+
+function getTodayCoords(): Array<{ latitude: number, longitude: number }> | undefined {
+    return useAPIResult('/api/matomo', {
+        date: 'today',
+        period: 'day',
+        filter_limit: 10000,
+        filter_offset: 0,
+        showColumns: 'latitude,longitude',
+        doNotFetchActions: true,
+    })
+}
+
+function getVisitsToday(): { visits: number, visitors: number } | undefined {
+    return useAPIResult('/api/matomo', {
+        method: "Live.getCounters",
+        idSite: 1,
+        lastMinutes: 1440
+    })?.[0]
+}

pages/heatmap/main.module.sass

@@ -0,0 +1,16 @@
+.heatmap-page
+    margin: 2em 20%
+
+#map
+    height: 100%
+    width: 100%
+    aspect-ratio: 3/2
+    cursor: pointer
+    z-index: 100
+
+.map-area-container
+  width: 100% !important
+  height: 50vh !important
+
+.loading
+    padding-top: 100px

server/index.ts

@@ -95,20 +95,38 @@ async function startServer() {
     process.env.VITE_MACROSTRAT_INSTANCE
   );
 
-  /*
-  // Redirect from /trip/:trip to /trip with query parameter
-  app.get("/trip/:trip", (req, res) => {
-    const { trip } = req.params;
-    res.redirect(`/trip?trip=${trip}`);
-  });
+  
+  app.get('/api/matomo', async (req, res) => {
+    const { date, period, filter_limit, filter_offset, lastMinutes = null, doNotFetchActions, method = 'Live.getLastVisitsDetails'} = req.query;
+
+    const baseUrl = 'https://analytics.svc.macrostrat.org/';
+    const params = {
+      module: 'API',
+      idSite: '1',
+      period,
+      method,
+      date,
+      format: 'json',
+      filter_limit,
+      lastMinutes,
+      token_auth: process.env.VITE_MATOMO_API_TOKEN
+    };
+
+    // Conditionally add doNotFetchActions param
+    if (doNotFetchActions) {
+      params.doNotFetchActions = '1';
+    }
+
+    const matomoUrl = `${baseUrl}?${new URLSearchParams(params).toString()}`;
 
-  // Redirect from /checkin/:checkin to /checkin with query parameter
-  app.get("/checkin/:checkin", (req, res) => {
-    const { checkin } = req.params;
-    // Redirect to /test with query parameter `id`
-    res.redirect(`/checkin?checkin=${checkin}`);
+    try {
+      const response = await fetch(matomoUrl);
+      const data = await response.json();
+      res.json(data);
+    } catch (err) {
+      res.status(500).json({ error: 'Matomo fetch failed', details: err });
+    }
   });
-  */
 
   /**
    * Vike route