gru/leox-gpon-monitoring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tx bias chart

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-01-03 20:13:05 +01:00
parent bea108c593
commit 840d41bbb8
3 changed files with 503 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

675
static/js/charts.js
View File

File diff suppressed because it is too large Load Diff

185
templates/index.html
View File

@@ -4,69 +4,75 @@
<!-- Alerts Container -->
<div id="alerts-container" class="mb-4"></div>
<!-- Global Period Selector -->
<div class="card-body py-3">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="flex-shrink-0 text-white-50">
<i class="bi bi-calendar-range me-2"></i>
<strong class="text-white">Global Time Range</strong>
</div>
<div class="d-flex gap-1 flex-shrink-0 p-1 bg-dark bg-opacity-50 border border-secondary border-opacity-25 rounded-1"
style="max-width: 70%;">
<div class="btn-toolbar d-none d-sm-flex" role="toolbar" id="global-quick-pickers"
style="overflow-x: auto; scrollbar-width: thin; max-width: 100%;">
<div class="btn-group btn-group-sm me-1" role="group">
<input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-1h">1h</label>
<input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-6h">6h</label>
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-12h">12h</label>
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-24h">24h</label>
</div>
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-3d">3d</label>
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-7d">7d</label>
<input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-30d">30d</label>
<input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-90d">90d</label>
<!-- Global Period Selector -->
<div class="row mb-3">
<div class="col-md-12">
<div class="card">
<div class="card-body py-3">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div class="flex-shrink-0 text-white-50">
<i class="bi bi-calendar-range me-2"></i>
<strong class="text-white">Global Time Range</strong>
</div>
<div class="d-flex gap-1 flex-shrink-0 p-1 bg-dark bg-opacity-50 border border-secondary border-opacity-25 rounded-1"
style="max-width: 70%;">
<div class="btn-toolbar d-none d-sm-flex" role="toolbar" id="global-quick-pickers"
style="overflow-x: auto; scrollbar-width: thin; max-width: 100%;">
<div class="btn-group btn-group-sm me-1" role="group">
<input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-1h">1h</label>
<input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-6h">6h</label>
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-12h">12h</label>
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-24h">24h</label>
</div>
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-3d">3d</label>
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-7d">7d</label>
<input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-30d">30d</label>
<input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-90d">90d</label>
</div>
</div>
<select class="form-select form-select-sm d-md-none ms-2 bg-dark text-white border-secondary"
id="global-period-select" style="min-width: 100px;">
<option value="1h" class="bg-dark text-white">1h</option>
<option value="6h" class="bg-dark text-white">6h</option>
<option value="12h" class="bg-dark text-white">12h</option>
<option value="24h" class="bg-dark text-white">24h</option>
<option value="3d" class="bg-dark text-white">3d</option>
<option value="7d" class="bg-dark text-white">7d</option>
<option value="14d" class="bg-dark text-white">14d</option>
<option value="30d" class="bg-dark text-white">30d</option>
<option value="60d" class="bg-dark text-white">60d</option>
<option value="90d" class="bg-dark text-white">90d</option>
<option value="120d" class="bg-dark text-white">120d</option>
<option value="1y" class="bg-dark text-white">1Y</option>
<option value="2y" class="bg-dark text-white">2Y</option>
<option value="5y" class="bg-dark text-white">5Y</option>
</select>
</div>
<input type="hidden" id="global-period-hidden" name="global-period" value="1h">
</div>
</div>
<select class="form-select form-select-sm d-md-none ms-2 bg-dark text-white border-secondary"
id="global-period-select" style="min-width: 100px;">
<option value="1h" class="bg-dark text-white">1h</option>
<option value="6h" class="bg-dark text-white">6h</option>
<option value="12h" class="bg-dark text-white">12h</option>
<option value="24h" class="bg-dark text-white">24h</option>
<option value="3d" class="bg-dark text-white">3d</option>
<option value="7d" class="bg-dark text-white">7d</option>
<option value="14d" class="bg-dark text-white">14d</option>
<option value="30d" class="bg-dark text-white">30d</option>
<option value="60d" class="bg-dark text-white">60d</option>
<option value="90d" class="bg-dark text-white">90d</option>
<option value="120d" class="bg-dark text-white">120d</option>
<option value="1y" class="bg-dark text-white">1Y</option>
<option value="2y" class="bg-dark text-white">2Y</option>
<option value="5y" class="bg-dark text-white">5Y</option>
</select>
</div>
<input type="hidden" id="global-period-hidden" name="global-period" value="1h">
</div>
</div>
@@ -85,7 +91,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
@@ -99,7 +105,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
@@ -113,7 +119,7 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
@@ -173,7 +179,7 @@
</div>
</div>
<!-- Charts Row -->
<!-- Optical Metrics Row (RX/TX Power + Temperature + TX Bias) -->
<div class="row g-3 mb-4">
<!-- Optical Power -->
<div class="col-md-4">
@@ -202,7 +208,7 @@
</div>
</div>
</div>
<!-- Temperature -->
<div class="col-md-4">
<div class="card">
@@ -230,12 +236,43 @@
</div>
</div>
</div>
<!-- Traffic -->
<!-- TX Bias -->
<div class="col-md-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-activity"></i> Traffic</span>
<span><i class="bi bi-lightning-charge"></i> TX Bias Current</span>
<select class="form-select form-select-sm w-auto" id="period-txbias">
<option value="1h">1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d" selected>7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-txbias" height="250"></canvas>
</div>
</div>
</div>
</div>
<!-- Traffic Row -->
<div class="row g-3 mb-4">
<!-- Traffic Packets -->
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-activity"></i> Traffic (Packets/s)</span>
<select class="form-select form-select-sm w-auto" id="period-traffic">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
@@ -254,7 +291,7 @@
</select>
</div>
<div class="card-body">
<canvas id="chart-traffic" height="250"></canvas>
<canvas id="chart-traffic" height="200"></canvas>
</div>
</div>
</div>
@@ -289,7 +326,7 @@
</div>
</div>
</div>
<!-- FEC Errors -->
<div class="col-md-6">
<div class="card">
@@ -326,19 +363,19 @@
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-database"></i> Data Volume (Cumulative)</span>
<div class="d-flex gap-2 align-items-center">
<!-- Przełącznik Line/Bar -->
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="volume-chart-type" id="volume-line" value="line" checked>
<label class="btn btn-outline-secondary" for="volume-line">
<i class="bi bi-graph-up"></i> Line
</label>
<input type="radio" class="btn-check" name="volume-chart-type" id="volume-bar" value="bar">
<label class="btn btn-outline-secondary" for="volume-bar">
<i class="bi bi-bar-chart"></i> Bar
</label>
</div>
<!-- Period selector -->
<select class="form-select form-select-sm w-auto" id="period-volume">
<option value="1h" selected>1h</option>
@@ -365,4 +402,4 @@
</div>
</div>
{% endblock %}
{% endblock %}