From 4142567d5b0541502fb30f38fdf52e8309c32227 Mon Sep 17 00:00:00 2001
From: Daniel Garcia Briseno <daniel.garciabriseno@nasa.gov>
Date: Thu, 26 Mar 2026 14:07:01 -0400
Subject: [PATCH 1/4] Add link to new dashboard to stats dashboard

---
 docroot/statistics/index.php | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docroot/statistics/index.php b/docroot/statistics/index.php
index cbe30746..ca684f7f 100644
--- a/docroot/statistics/index.php
+++ b/docroot/statistics/index.php
@@ -13,7 +13,7 @@
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript" src="statistics.js?v=<?php echo md5_file(__DIR__ . '/statistics.js'); ?>"></script>
     <title>Helioviewer.org - Usage Statistics</title>
-    <link rel='stylesheet' href='statistics.css' />
+    <link rel='stylesheet' href='statistics.css?v=<?php echo md5_file(__DIR__ . "/statistics.css"); ?>' />
     <script type="text/javascript">
         google.load("jquery", "1.5");
         google.load("visualization", "1", {packages:["corechart"]});
@@ -39,6 +39,9 @@
             <div id='headerText'>The Helioviewer Project - Recent Activity</div>
         </div>
         <div id="overview"></div>
+        <div id="dashboard-links">
+            <a href="statistics.php">New Statistics Dashboard</a>
+        </div>
         <div id="visualizations">
             <div id="pieChartsGroup">
                 <div id="versionsChart"></div>

From cbb829383b6b63053957b5a98d6df44db8e2802c Mon Sep 17 00:00:00 2001
From: Daniel Garcia Briseno <daniel.garciabriseno@nasa.gov>
Date: Thu, 26 Mar 2026 14:25:36 -0400
Subject: [PATCH 2/4] Common embedding code in superset.js

---
 docroot/statistics/superset.js | 55 ++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 docroot/statistics/superset.js

diff --git a/docroot/statistics/superset.js b/docroot/statistics/superset.js
new file mode 100644
index 00000000..d50b5f4e
--- /dev/null
+++ b/docroot/statistics/superset.js
@@ -0,0 +1,55 @@
+async function fetchGuestToken(guest_token_url, dashboard_id) {
+    try {
+        const response = await fetch(guest_token_url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                dashboard_id: dashboard_id
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success || !data.token) {
+            throw new Error('Failed to retrieve guest token from response');
+        }
+
+        return data.token;
+    } catch (error) {
+        console.error('Error fetching guest token:', error);
+        throw error;
+    }
+}
+
+async function embedDashboard(dashboard_container, loading_element, error_div, superset_url, getGuestToken) {
+    try {
+        const guestToken = await getGuestToken();
+
+        // Hide loading message
+        loading_element.style.display = 'none';
+
+        // Embed the dashboard
+        supersetEmbeddedSdk.embedDashboard({
+            id: DASHBOARD_ID,
+            supersetDomain: superset_url,
+            mountPoint: dashboard_container,
+            fetchGuestToken: () => guestToken,
+            dashboardUiConfig: {
+                hideTitle: true,
+                hideChartControls: false,
+                hideTab: false,
+            },
+        });
+    } catch (error) {
+        console.error('Error embedding dashboard:', error);
+        loading_element.style.display = 'none';
+        error_div.style.display = 'block';
+        error_div.textContent = 'Failed to load dashboard: ' + error.message;
+    }
+}

From 51f285d6afee084b59855e2e897fc4ff2d5f2151 Mon Sep 17 00:00:00 2001
From: Daniel Garcia Briseno <daniel.garciabriseno@nasa.gov>
Date: Fri, 27 Mar 2026 11:22:22 -0400
Subject: [PATCH 3/4] Add statistics page with embedded dashboards

---
 docroot/statistics/coverage.php   | 137 +++---------------------------
 docroot/statistics/statistics.css |   2 +
 docroot/statistics/statistics.php |  69 +++++++++++++++
 docroot/statistics/superset.css   |  82 ++++++++++++++++++
 docroot/statistics/superset.js    |   4 +-
 settings/Config.Example.ini       |   3 +
 6 files changed, 171 insertions(+), 126 deletions(-)
 create mode 100644 docroot/statistics/statistics.php
 create mode 100644 docroot/statistics/superset.css

diff --git a/docroot/statistics/coverage.php b/docroot/statistics/coverage.php
index 003af193..dc32e709 100644
--- a/docroot/statistics/coverage.php
+++ b/docroot/statistics/coverage.php
@@ -6,67 +6,8 @@
 <html lang="en">
 <head>
     <meta charset="utf-8" />
-    <title>Helioviewer.org - Data Coverage Statistics</title>
-    <style>
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            background-color: #1a1a1a;
-            color: #e0e0e0;
-        }
-        #main {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            background-color: #1a1a1a;
-        }
-        #header {
-            flex-shrink: 0;
-            background-color: #2a2a2a;
-            padding: 5px 10px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        #header img {
-            height: 30px;
-            width: auto;
-        }
-        #headerText {
-            color: #e0e0e0;
-            font-size: 14px;
-            margin: 0;
-        }
-        #dashboard-container {
-            flex: 1;
-            width: 100vw;
-            min-height: 0;
-            margin: 0;
-            padding: 0;
-        }
-        #dashboard-container iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-            display: block;
-        }
-        #error-message {
-            display: none;
-            padding: 10px;
-            margin: 10px;
-            background-color: #5c1c1c;
-            color: #ff8a80;
-            border-radius: 4px;
-        }
-        #loading-message {
-            padding: 10px;
-            margin: 10px;
-            text-align: center;
-            font-size: 14px;
-            color: #e0e0e0;
-        }
-    </style>
+    <title>Helioviewer.org - Data Coverage</title>
+    <link rel="stylesheet" href="superset.css" />
 </head>
 
 <body>
@@ -76,76 +17,24 @@
             <div id='headerText'>The Helioviewer Project - Data Coverage</div>
         </div>
 
-        <div id="loading-message">Loading dashboard...</div>
-        <div id="error-message"></div>
-        <div id="dashboard-container"></div>
+        <div class="loader" id="loading-message">Loading dashboard...</div>
+        <div class="error" id="error-message"></div>
+        <div class="dashboard" id="dashboard-container"></div>
     </div>
 
     <script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
+    <script type="text/javascript" src="superset.js"></script>
     <script type="text/javascript">
         const DASHBOARD_ID = '<?= HV_SUPERSET_COVERAGE_DASHBOARD_ID ?>';
         const GUEST_TOKEN_URL = '<?= HV_SUPERSET_SIDECAR_URL ?>/guest_token.php';
         const SUPERSET_URL = '<?= HV_SUPERSET_URL ?>';
-
-        async function fetchGuestToken() {
-            try {
-                const response = await fetch(GUEST_TOKEN_URL, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        dashboard_id: DASHBOARD_ID
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const data = await response.json();
-
-                if (!data.success || !data.token) {
-                    throw new Error('Failed to retrieve guest token from response');
-                }
-
-                return data.token;
-            } catch (error) {
-                console.error('Error fetching guest token:', error);
-                throw error;
-            }
-        }
-
-        async function embedDashboard() {
-            try {
-                const guestToken = await fetchGuestToken();
-
-                // Hide loading message
-                document.getElementById('loading-message').style.display = 'none';
-
-                // Embed the dashboard
-                supersetEmbeddedSdk.embedDashboard({
-                    id: DASHBOARD_ID,
-                    supersetDomain: SUPERSET_URL,
-                    mountPoint: document.getElementById('dashboard-container'),
-                    fetchGuestToken: () => guestToken,
-                    dashboardUiConfig: {
-                        hideTitle: true,
-                        hideChartControls: false,
-                        hideTab: false,
-                    },
-                });
-            } catch (error) {
-                console.error('Error embedding dashboard:', error);
-                document.getElementById('loading-message').style.display = 'none';
-                const errorDiv = document.getElementById('error-message');
-                errorDiv.style.display = 'block';
-                errorDiv.textContent = 'Failed to load dashboard: ' + error.message;
-            }
-        }
-
-        // Initialize dashboard when page loads
-        window.addEventListener('load', embedDashboard);
+        window.addEventListener('load', () => embedDashboard(
+          DASHBOARD_ID,
+          document.getElementById('dashboard-container'),
+          document.getElementById('loading-message'),
+          document.getElementById('error-message'),
+          SUPERSET_URL,
+          () => fetchGuestToken(GUEST_TOKEN_URL, DASHBOARD_ID)));
     </script>
 </body>
 </html>
diff --git a/docroot/statistics/statistics.css b/docroot/statistics/statistics.css
index 90f7fd9e..84325479 100644
--- a/docroot/statistics/statistics.css
+++ b/docroot/statistics/statistics.css
@@ -51,6 +51,8 @@ body{font-family:Arial, Helvetica, sans-serif;}
   }
 
 
+#dashboard-links { margin-top: 20px; font-size: 1.2em; }
+
 @media screen and (max-width: 800px) {  
     #header {font-size: 24px;}
 }
diff --git a/docroot/statistics/statistics.php b/docroot/statistics/statistics.php
new file mode 100644
index 00000000..d9fafd91
--- /dev/null
+++ b/docroot/statistics/statistics.php
@@ -0,0 +1,69 @@
+<?php
+require_once '../../src/Config.php';
+$config = new Config('../../settings/Config.ini');
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Helioviewer.org - Statistics</title>
+    <link rel="stylesheet" href="superset.css?v=2" />
+</head>
+
+<body>
+    <div id="main">
+        <div id="header">
+            <img src="../resources/images/logos/hvlogo1s_transparent_logo.png" alt="Helioviewer logo" />
+            <div id='headerText'>The Helioviewer Project - Data Coverage</div>
+        </div>
+
+        <div class="dashboard-box">
+            <div id="endpoints-loader" class="loader">Loading endpoints dashboard...</div>
+            <div id="endpoints-error" class="error"></div>
+            <div id="endpoints-container" class="dashboard"></div>
+
+            <div id="movies-loader" class="loader">Loading movies dashboard...</div>
+            <div id="movies-error" class="error"></div>
+            <div id="movies-container" class="dashboard"></div>
+
+            <div id="movies-jpx-loader" class="loader">Loading jhelioviewer dashboard...</div>
+            <div id="movies-jpx-error" class="error"></div>
+            <div id="movies-jpx-container" class="dashboard"></div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
+    <script type="text/javascript" src="superset.js?v=1"></script>
+    <script type="text/javascript">
+        const GUEST_TOKEN_URL = '<?= HV_SUPERSET_SIDECAR_URL ?>/guest_token.php';
+        const SUPERSET_URL = '<?= HV_SUPERSET_URL ?>';
+        const dashboards = [{
+            'container': document.getElementById('endpoints-container'),
+            'loader': document.getElementById('endpoints-loader'),
+            'error': document.getElementById('endpoints-error'),
+            'id': '<?=  HV_SUPERSET_STATISTICS_DASHBOARD_ID ?>',
+        }, {
+            'container': document.getElementById('movies-container'),
+            'loader': document.getElementById('movies-loader'),
+            'error': document.getElementById('movies-error'),
+            'id': '<?= HV_SUPERSET_MOVIES_DASHBOARD_ID ?>'
+        }, {
+            'container': document.getElementById('movies-jpx-container'),
+            'loader': document.getElementById('movies-jpx-loader'),
+            'error': document.getElementById('movies-jpx-error'),
+            'id': '<?= HV_SUPERSET_MOVIES_JPX_DASHBOARD_ID ?>'
+        }]
+
+        dashboards.forEach((dashboard) => {
+            embedDashboard(
+                dashboard.id,
+                dashboard.container,
+                dashboard.loader,
+                dashboard.error,
+                SUPERSET_URL,
+                () => fetchGuestToken(GUEST_TOKEN_URL, dashboard.id)
+            )
+        });
+    </script>
+</body>
+</html>
diff --git a/docroot/statistics/superset.css b/docroot/statistics/superset.css
new file mode 100644
index 00000000..8f532602
--- /dev/null
+++ b/docroot/statistics/superset.css
@@ -0,0 +1,82 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+}
+#main {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: #1a1a1a;
+}
+#header {
+    flex-shrink: 0;
+    background-color: #2a2a2a;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+#header img {
+    height: 30px;
+    width: auto;
+}
+#headerText {
+    color: #e0e0e0;
+    font-size: 14px;
+    margin: 0;
+}
+.dashboard-box {
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.dashboard {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+}
+.dashboard iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+}
+.error {
+    display: none;
+    padding: 10px;
+    margin: 10px;
+    background-color: #5c1c1c;
+    color: #ff8a80;
+    border-radius: 4px;
+}
+.loader {
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: #e0e0e0;
+    animation-name: wiggle;
+    animation-duration: 1s;
+    animation-direction: alternate-reverse;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
+@keyframes wiggle {
+    from {
+        transform: translateX(-10px);
+    }
+    to {
+        transform: translateX(10px);
+    }
+}
+
diff --git a/docroot/statistics/superset.js b/docroot/statistics/superset.js
index d50b5f4e..f296e229 100644
--- a/docroot/statistics/superset.js
+++ b/docroot/statistics/superset.js
@@ -27,7 +27,7 @@ async function fetchGuestToken(guest_token_url, dashboard_id) {
     }
 }
 
-async function embedDashboard(dashboard_container, loading_element, error_div, superset_url, getGuestToken) {
+async function embedDashboard(id, dashboard_container, loading_element, error_div, superset_url, getGuestToken) {
     try {
         const guestToken = await getGuestToken();
 
@@ -36,7 +36,7 @@ async function embedDashboard(dashboard_container, loading_element, error_div, s
 
         // Embed the dashboard
         supersetEmbeddedSdk.embedDashboard({
-            id: DASHBOARD_ID,
+            id: id,
             supersetDomain: superset_url,
             mountPoint: dashboard_container,
             fetchGuestToken: () => guestToken,
diff --git a/settings/Config.Example.ini b/settings/Config.Example.ini
index 6d943c98..58e74f3c 100644
--- a/settings/Config.Example.ini
+++ b/settings/Config.Example.ini
@@ -197,3 +197,6 @@ coordinator_url = 'http://coordinator'
 superset_url = 'http://localhost:8088'
 superset_sidecar_url = 'http://localhost:8087'
 superset_coverage_dashboard_id = 'your-dashboard-id-here'
+superset_statistics_dashboard_id = 'your-dashboard-id-here'
+superset_movies_dashboard_id = 'your-dashboard-id-here'
+superset_movies_jpx_dashboard_id = 'your-dashboard-id-here'

From 41998054ab77553e11a49e2f4f17025bfcbf31e8 Mon Sep 17 00:00:00 2001
From: Daniel Garcia Briseno <daniel.garciabriseno@nasa.gov>
Date: Fri, 27 Mar 2026 11:32:26 -0400
Subject: [PATCH 4/4] Add tabs for statistics charts

---
 docroot/statistics/statistics.php | 41 +++++++++++++++++++++++--------
 docroot/statistics/superset.css   | 39 ++++++++++++++++++++++++++---
 2 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/docroot/statistics/statistics.php b/docroot/statistics/statistics.php
index d9fafd91..81e1a65b 100644
--- a/docroot/statistics/statistics.php
+++ b/docroot/statistics/statistics.php
@@ -14,21 +14,33 @@
     <div id="main">
         <div id="header">
             <img src="../resources/images/logos/hvlogo1s_transparent_logo.png" alt="Helioviewer logo" />
-            <div id='headerText'>The Helioviewer Project - Data Coverage</div>
+            <div id='headerText'>The Helioviewer Project - Statistics</div>
+        </div>
+
+        <div id="tab-bar">
+            <button class="tab active" data-tab="endpoints">API Usage</button>
+            <button class="tab" data-tab="movies">Movies</button>
+            <button class="tab" data-tab="movies-jpx">JHelioviewer Movies</button>
         </div>
 
         <div class="dashboard-box">
-            <div id="endpoints-loader" class="loader">Loading endpoints dashboard...</div>
-            <div id="endpoints-error" class="error"></div>
-            <div id="endpoints-container" class="dashboard"></div>
+            <div id="endpoints-tab" class="tab-panel active">
+                <div id="endpoints-loader" class="loader">Loading endpoints dashboard...</div>
+                <div id="endpoints-error" class="error"></div>
+                <div id="endpoints-container" class="dashboard"></div>
+            </div>
 
-            <div id="movies-loader" class="loader">Loading movies dashboard...</div>
-            <div id="movies-error" class="error"></div>
-            <div id="movies-container" class="dashboard"></div>
+            <div id="movies-tab" class="tab-panel">
+                <div id="movies-loader" class="loader">Loading movies dashboard...</div>
+                <div id="movies-error" class="error"></div>
+                <div id="movies-container" class="dashboard"></div>
+            </div>
 
-            <div id="movies-jpx-loader" class="loader">Loading jhelioviewer dashboard...</div>
-            <div id="movies-jpx-error" class="error"></div>
-            <div id="movies-jpx-container" class="dashboard"></div>
+            <div id="movies-jpx-tab" class="tab-panel">
+                <div id="movies-jpx-loader" class="loader">Loading jhelioviewer dashboard...</div>
+                <div id="movies-jpx-error" class="error"></div>
+                <div id="movies-jpx-container" class="dashboard"></div>
+            </div>
         </div>
     </div>
 
@@ -64,6 +76,15 @@
                 () => fetchGuestToken(GUEST_TOKEN_URL, dashboard.id)
             )
         });
+
+        document.querySelectorAll('.tab').forEach((tab) => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(tab.dataset.tab + '-tab').classList.add('active');
+            });
+        });
     </script>
 </body>
 </html>
diff --git a/docroot/statistics/superset.css b/docroot/statistics/superset.css
index 8f532602..43923e0f 100644
--- a/docroot/statistics/superset.css
+++ b/docroot/statistics/superset.css
@@ -28,13 +28,46 @@ html, body {
     font-size: 14px;
     margin: 0;
 }
+#tab-bar {
+    flex-shrink: 0;
+    display: flex;
+    background-color: #2a2a2a;
+    border-bottom: 2px solid #444;
+}
+.tab {
+    padding: 8px 20px;
+    background: none;
+    border: none;
+    color: #aaa;
+    font-size: 14px;
+    cursor: pointer;
+}
+.tab:hover {
+    color: #e0e0e0;
+    background-color: #333;
+}
+.tab.active {
+    color: #fff;
+    border-bottom: 2px solid #4da6ff;
+    margin-bottom: -2px;
+}
+.tab-panel {
+    display: none;
+    flex: 1;
+    min-height: 0;
+}
+.tab-panel.active {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
 .dashboard-box {
-    text-align: center;
+    flex: 1;
+    min-height: 0;
     width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
 }
 .dashboard {
     flex: 1;