[feat] Integrate analytics as embedded page

.github/workflows/firebase-hosting-merge-prod.yml

@@ -10,6 +10,7 @@ env:
   VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID_PROD }}
   VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY_PROD }}
   VITE_STADIA_KEY: ${{ secrets.VITE_STADIA_KEY }}
+  VITE_ANALYTICS_URL: ${{ secrets.VITE_ANALYTICS_URL }}
 'on':
   push:
     branches:

.github/workflows/firebase-hosting-merge-qa.yml

@@ -10,6 +10,7 @@ env:
   VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
   VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
   VITE_STADIA_KEY: ${{ secrets.VITE_STADIA_KEY }}
+  VITE_ANALYTICS_URL: ${{ secrets.VITE_ANALYTICS_URL }}
 'on':
   push:
     branches:

.github/workflows/firebase-hosting-pull-request.yml

@@ -10,6 +10,7 @@ env:
   VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
   VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
   VITE_STADIA_KEY: ${{ secrets.VITE_STADIA_KEY }}
+  VITE_ANALYTICS_URL: ${{ secrets.VITE_ANALYTICS_URL }}
 'on': pull_request
 jobs:
   build_and_preview:

README.md

@@ -9,8 +9,6 @@ Interactive map of organized crime in South America.
 
 See the [Google Drive Folder](https://drive.google.com/drive/folders/1U2VPsuXm2Jfzjbf39y73rK3O6BKxV4Jy) for details. The Architecture document is most relevant.
 
-Analytics for the web app can be viewed at https://net.tsuni.dev/redcoralmap.web.app.
-
 ## Contributing
 
 Assign an issue to yourself, or work on one that has been assigned to you by cloning this repository, creating a new branch, pushing your changes, and creating a pull request into main. You'll get a preview link on the PR linked to the QA environment. Once you recieve an approval, feel free to merge into main! This will build deploy your code to production.

src/App.tsx

@@ -116,7 +116,7 @@ const App: React.FC = () => {
 
   function Layout() {
     return (
-      <div className="relative h-screen max-h-screen">
+      <div className="relative h-screen max-h-screen pt-5">
         <Navigation isLoggedIn={isLoggedIn} auth={auth} />
         <Outlet />
         <LoadingOverlay isVisible={loadCount > 0} color={'#888888'} />
@@ -142,6 +142,15 @@ const App: React.FC = () => {
     )
   }
 
+  function Analytics() {
+    const url = import.meta.env.VITE_ANALYTICS_URL
+    return (
+      <>
+        <iframe plausible-embed src={`${url}&embed=true&theme=light`} loading="lazy" className="h-full w-full"></iframe>
+      </>
+    )
+  }
+
   return (
     <>
       <Router>
@@ -155,6 +164,7 @@ const App: React.FC = () => {
             <Route path="/stats" element={<StatsDashboard data={data} />} />
             <Route path="/admin" element={<Navigate to="/login" />} />
             <Route path="/admin/dash" element={<AdminDash />} />
+            <Route path="/admin/analytics" element={<Analytics />} />
           </Route>
         </Routes>
       </Router>

src/components/Navigation.tsx

@@ -9,16 +9,14 @@ const Navigation = ({ isLoggedIn, auth }: { isLoggedIn: boolean; auth: Auth }) =
     </Link>
   )
   return (
-    <div className="flex h-5 w-full items-center gap-1 overflow-hidden border-b-2 border-gray-400 bg-white px-2 text-xs leading-none">
+    <div className="absolute top-0 z-[1000] flex h-5 w-full items-center gap-1 overflow-hidden border-b-2 border-gray-400 bg-white px-2 text-xs leading-none">
       <NavLink to="/" text="Mapa" />
       <NavLink to="/stats" text="Estadísticas" />
       {isLoggedIn && (
         <>
           <div className="h-3 border-l-2 border-gray-400" />
           <NavLink to="/admin/dash" text="Administrar categorías" />
-          <a href="https://net.tsuni.dev/redcoralmap.web.app" className="px-2 py-1 hover:bg-black/10" target="_blank" rel="noopener noreferrer">
-            Analítica web
-          </a>
+          <NavLink to="/admin/analytics" text="Analítica web" />
         </>
       )}
       <div className="flex-grow" />

src/pages/StatsDashboard.tsx

@@ -30,6 +30,16 @@ interface StatsDashboardProps {
   data: DB
 }
 
+/**
+ * The idea is that the user can add and layer filters on top of each other to filter the incidents. 
+ * Each filter has...
+ * - an id - a unique identifier for the filter used to remove or update it
+ * - a component that is displayed in the filter bar, displays the state of its filter, and can be clicked on to modify or remove the filter.
+ * - a state - some filters might need to store some state, maybe.
+ * - an operation - a function that takes an incident and returns a boolean. If the incident passes the filter, the function should return true.
+ * 
+ * The filter bar is a horizontal bar that displays all the filters that have been added. It also has a button to add a new filter from a list.
+ */
 const filterReducer = (state: filterState, action: filterDispatchType) => {
   let newState = state
   switch (action.type) {