gru/autoban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release

Browse Source
This commit is contained in:
root
2026-01-01 02:13:34 +01:00
commit b05793228a
29 changed files with 4608 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
templates/charts.html Normal file
View File

@@ -0,0 +1,182 @@
{% extends "base.html" %}
{% block title %}Wykresy{% endblock %}
{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
<div>
<h1 class="h3 text-white mb-1">Wykresy</h1>
<p class="text-secondary mb-0">Podgląd trendów, najczęstszych powodów i źródeł banów.</p>
</div>
<form id="options-form" method="get" class="d-flex align-items-center gap-2">
<label for="top_n" class="text-secondary small">TOP:</label>
<select id="top_n" name="top_n" class="form-select form-select-sm bg-dark text-white border-secondary"
style="width:auto">
{% for n in [5,10,25,50,100] %}
<option value="{{ n }}" {% if n==top_n %}selected{% endif %}>{{ n }}</option>
{% endfor %}
</select>
<label for="period" class="text-secondary small ms-2">Okres:</label>
<select id="period" name="period" class="form-select form-select-sm bg-dark text-white border-secondary"
style="width:auto">
{% for p in [("week","Tydzień"),("month","Miesiąc"),("year","Rok")] %}
<option value="{{ p[0] }}" {% if p[0]==period %}selected{% endif %}>{{ p[1] }}</option>
{% endfor %}
</select>
<div class="btn-group btn-group-sm ms-1" role="group" aria-label="Szybkie TOP">
{% for n in [5,10,25,50,100] %}
<button type="button" class="btn btn-outline-secondary quick-top {% if n == top_n %}active{% endif %}"
data-value="{{ n }}">{{ n }}</button>
{% endfor %}
</div>
<div class="btn-group btn-group-sm ms-1" role="group" aria-label="Szybki okres">
{% for p in [("week","Tydzień"),("month","Miesiąc"),("year","Rok")] %}
<button type="button" class="btn btn-outline-secondary quick-period {% if p[0] == period %}active{% endif %}"
data-value="{{ p[0] }}">{{ p[1] }}</button>
{% endfor %}
</div>
<!-- <button type="submit" class="btn btn-primary btn-sm ms-1">Zastosuj</button> -->
</form>
</div>
<!-- skeleton podczas ładowania -->
<div id="charts-skeleton" class="placeholder-glow mb-3">
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12"></span>
</div>
<div id="charts-root" class="d-none">
<div class="card bg-dark border-secondary mb-4">
<div class="card-header d-flex align-items-center justify-content-between">
<span>Top {{ top_n }} powody banów</span>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-secondary chart-download" data-target="reasonsChart" data-type="png">PNG</button>
<button class="btn btn-outline-secondary chart-download" data-target="reasonsChart" data-type="csv">CSV</button>
<button class="btn btn-outline-secondary chart-fullscreen" data-target="reasonsChart">Fullscreen</button>
</div>
</div>
<div class="card-body">
<canvas id="reasonsChart" height="120"></canvas>
<div class="text-center text-secondary small d-none" id="reasonsEmpty">Brak danych do wyświetlenia.</div>
</div>
</div>
<div class="card bg-dark border-secondary mb-4">
<div class="card-header d-flex align-items-center justify-content-between">
<span>Top {{ top_n }} URL (bany)</span>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-secondary chart-download" data-target="urlsChart" data-type="png">PNG</button>
<button class="btn btn-outline-secondary chart-download" data-target="urlsChart" data-type="csv">CSV</button>
<button class="btn btn-outline-secondary chart-fullscreen" data-target="urlsChart">Fullscreen</button>
</div>
</div>
<div class="card-body">
<canvas id="urlsChart" height="120"></canvas>
<div class="text-center text-secondary small d-none" id="urlsEmpty">Brak danych do wyświetlenia.</div>
</div>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card bg-dark border-secondary h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<span>Kraje pochodzenia (bany)</span>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-secondary chart-download" data-target="countriesChart"
data-type="png">PNG</button>
<button class="btn btn-outline-secondary chart-download" data-target="countriesChart"
data-type="csv">CSV</button>
<button class="btn btn-outline-secondary chart-fullscreen" data-target="countriesChart">Fullscreen</button>
</div>
</div>
<div class="card-body d-flex justify-content-center">
<canvas id="countriesChart" style="max-width: 340px; max-height: 340px;"></canvas>
</div>
<div class="text-center text-secondary small d-none" id="countriesEmpty">Brak danych do wyświetlenia.</div>
</div>
</div>
<div class="col-md-6">
<div class="card bg-dark border-secondary h-100">
<div class="card-header">Legenda krajów</div>
<div class="card-body">
<ul class="list-group list-group-flush">
{% for item in stats.top_countries %}
<li
class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center border-secondary">
{{ item.country }}
<span class="badge bg-primary rounded-pill">{{ item.count }}</span>
</li>
{% endfor %}
{% if stats.top_countries|length == 0 %}
<li class="list-group-item bg-dark text-secondary border-secondary text-center">Brak danych</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
<div class="card bg-dark border-secondary my-4">
<div class="card-header d-flex align-items-center justify-content-between">
<span>Bany w czasie (ostatnie 6 tygodni)</span>
<div class="btn-group btn-group-sm" role="group">
<button class="btn btn-outline-secondary chart-download" data-target="bansOverTimeChart"
data-type="png">PNG</button>
<button class="btn btn-outline-secondary chart-download" data-target="bansOverTimeChart"
data-type="csv">CSV</button>
<button class="btn btn-outline-secondary chart-fullscreen" data-target="bansOverTimeChart">Fullscreen</button>
</div>
</div>
<div class="card-body">
<canvas id="bansOverTimeChart" height="120"></canvas>
<div class="text-center text-secondary small d-none" id="timeEmpty">Brak danych do wyświetlenia.</div>
</div>
</div>
</div>
<!-- Modal fullscreen dla dowolnego canvas -->
<div class="modal fade" id="chartModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content bg-dark text-white">
<div class="modal-header">
<h5 class="modal-title">Podgląd wykresu</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
</div>
<div class="modal-body d-flex align-items-center justify-content-center">
<canvas id="chartModalCanvas" style="max-width:95vw; max-height:80vh;"></canvas>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6"></script>
<script>
const statsData = {{ stats | tojson }};
document.getElementById('top_n')?.addEventListener('change', () => {
document.getElementById('options-form').requestSubmit();
});
window.addEventListener('DOMContentLoaded', () => {
const sk = document.getElementById('charts-skeleton');
const root = document.getElementById('charts-root');
try {
renderCharts(statsData);
sk?.classList.add('d-none');
root?.classList.remove('d-none');
} catch (e) {
window.showToast?.({ text: 'Błąd renderowania wykresów', variant: 'danger' });
console.error(e);
}
});
</script>
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% endblock %}