wagesj45/ngxstat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch to snippet-based reports

Browse source
This commit is contained in:
Jordan Wages 2025-07-18 23:20:13 -05:00
commit ab2af1015a
6 changed files with 97 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

87
templates/index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8">
<title>ngxstat Reports</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
</head>
<body class="section">
<div class="container">
@ -31,42 +32,102 @@
<span class="icon is-small is-left"><i data-feather="server"></i></span>
</div>
</div>
<iframe id="report-frame" src="" style="width:100%;border:none;"></iframe>
<div id="reports-container"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
const intervalSelect = document.getElementById('interval-select');
const domainSelect = document.getElementById('domain-select');
const iframe = document.getElementById('report-frame');
const container = document.getElementById('reports-container');
let currentInterval = intervalSelect.value;
let currentDomain = domainSelect.value;
function updateFrame() {
function initReport(rep, base) {
fetch(base + '/' + rep.json)
.then(r => r.json())
.then(data => {
if (rep.chart === 'table') {
const rows = data.map(x => [x.bucket, x.value]);
new DataTable('#table-' + rep.name, {
data: rows,
columns: [
{ title: 'Bucket' },
{ title: 'Value' }
]
});
return;
}
const labels = data.map(x => x.bucket);
const values = data.map(x => x.value);
const chartType = rep.chart === 'stackedBar' ? 'bar' : rep.chart;
const options = { scales: { y: { beginAtZero: true } } };
if (rep.chart === 'stackedBar') {
options.scales.x = { stacked: true };
options.scales.y.stacked = true;
}
const dataset = {
label: rep.label,
data: values,
borderWidth: 1,
fill: rep.chart !== 'bar' && rep.chart !== 'stackedBar'
};
if (rep.colors) {
dataset.backgroundColor = rep.colors;
dataset.borderColor = rep.colors;
} else if (rep.color) {
dataset.backgroundColor = rep.color;
dataset.borderColor = rep.color;
} else {
dataset.backgroundColor = 'rgba(54, 162, 235, 0.5)';
dataset.borderColor = 'rgba(54, 162, 235, 1)';
}
new Chart(document.getElementById('chart-' + rep.name), {
type: chartType,
data: {
labels: labels,
datasets: [dataset]
},
options: options
});
});
}
function loadReports() {
let path = currentInterval;
if (currentDomain) {
path = 'domains/' + currentDomain + '/' + currentInterval;
}
iframe.src = path + '/index.html';
fetch(path + '/reports.json')
.then(r => r.json())
.then(reports => {
container.innerHTML = '';
reports.forEach(rep => {
fetch(path + '/' + rep.html)
.then(r => r.text())
.then(html => {
container.insertAdjacentHTML('beforeend', html);
initReport(rep, path);
});
});
});
}
intervalSelect.addEventListener('change', () => {
currentInterval = intervalSelect.value;
updateFrame();
loadReports();
});
domainSelect.addEventListener('change', () => {
currentDomain = domainSelect.value;
updateFrame();
loadReports();
});
iframe.addEventListener('load', () => {
try {
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
} catch (e) {}
});
updateFrame();
loadReports();
feather.replace();
</script>
</body>

84
templates/report.html
View file

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ interval.title() }} Report</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<body class="section">
<div class="container">
<h1 class="title">{{ interval.title() }} Report</h1>
{% for report in reports %}
<div class="box">
<h2 class="subtitle">{{ report.label }}</h2>
{% if report.chart == 'table' %}
<table id="table-{{ report.name }}" class="table is-striped"></table>
{% else %}
<canvas id="chart-{{ report.name }}"></canvas>
{% endif %}
</div>
{% endfor %}
</div>
<script>
const reports = {{ reports | tojson }};
reports.forEach(rep => {
fetch(rep.json)
.then(r => r.json())
.then(data => {
if (rep.chart === 'table') {
const rows = data.map(x => [x.bucket, x.value]);
new DataTable('#table-' + rep.name, {
data: rows,
columns: [
{ title: 'Bucket' },
{ title: 'Value' }
]
});
return;
}
const labels = data.map(x => x.bucket);
const values = data.map(x => x.value);
const chartType = rep.chart === 'stackedBar' ? 'bar' : rep.chart;
const options = {
scales: {
y: { beginAtZero: true }
}
};
if (rep.chart === 'stackedBar') {
options.scales.x = { stacked: true };
options.scales.y.stacked = true;
}
const dataset = {
label: rep.label,
data: values,
borderWidth: 1,
fill: rep.chart !== 'bar' && rep.chart !== 'stackedBar'
};
if (rep.colors) {
dataset.backgroundColor = rep.colors;
dataset.borderColor = rep.colors;
} else if (rep.color) {
dataset.backgroundColor = rep.color;
dataset.borderColor = rep.color;
} else {
dataset.backgroundColor = 'rgba(54, 162, 235, 0.5)';
dataset.borderColor = 'rgba(54, 162, 235, 1)';
}
new Chart(document.getElementById('chart-' + rep.name), {
type: chartType,
data: {
labels: labels,
datasets: [dataset]
},
options: options
});
});
});
</script>
</body>
</html>

8
templates/report_snippet.html Normal file
View file

@ -0,0 +1,8 @@
<div class="box">
<h2 class="subtitle">{{ report.label }}</h2>
{% if report.chart == 'table' %}
<table id="table-{{ report.name }}" class="table is-striped"></table>
{% else %}
<canvas id="chart-{{ report.name }}"></canvas>
{% endif %}
</div>