Skip to content

Add new dashboards for data coverage and statistics #476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dgarciabriseno wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add new dashboards for data coverage and statistics #476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4142567
Add link to new dashboard to stats dashboard
Mar 26, 2026
cbb8293
Common embedding code in superset.js
Mar 26, 2026
51f285d
Add statistics page with embedded dashboards
Mar 27, 2026
4199805
Add tabs for statistics charts
Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 13 additions & 124 deletions docroot/statistics/coverage.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
5 changes: 4 additions & 1 deletion docroot/statistics/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"]});
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions docroot/statistics/statistics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
}
90 changes: 90 additions & 0 deletions docroot/statistics/statistics.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<?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 - 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-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-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-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>

<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)
)
});

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>
115 changes: 115 additions & 0 deletions docroot/statistics/superset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
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;
}
#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 {
flex: 1;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.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);
}
}

Loading
Loading