This commit is contained in:
@@ -54,7 +54,7 @@
|
||||
|
||||
<div class="analytics-metric-toggles">
|
||||
<span class="toggles-label">{{ t.analytics_metrics_label }}:</span>
|
||||
<label><input type="checkbox" class="metric-toggle" data-key="landing_views" checked> {{ t.analytics_metric_landing_views }}</label>
|
||||
<label><input type="checkbox" class="metric-toggle" data-key="landing_views"> {{ t.analytics_metric_landing_views }}</label>
|
||||
<label><input type="checkbox" class="metric-toggle" data-key="landing_unique" checked> {{ t.analytics_metric_landing_unique }}</label>
|
||||
<label><input type="checkbox" class="metric-toggle" data-key="portal_opens" checked> {{ t.analytics_metric_portal_opens }}</label>
|
||||
<label><input type="checkbox" class="metric-toggle" data-key="media_views" checked> {{ t.analytics_metric_media_views }}</label>
|
||||
@@ -128,20 +128,26 @@
|
||||
.analytics-log-card h2 { font-size:1rem; margin:0; }
|
||||
.analytics-log-head { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-bottom:10px; }
|
||||
.analytics-log-filters { margin-bottom:0; }
|
||||
.analytics-log { max-height:460px; overflow-y:auto; border:1px solid #f0f0f0; border-radius:8px; }
|
||||
.an-log-row { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-bottom:1px solid #f5f5f5; font-size:.85rem; }
|
||||
.analytics-log { height:460px; overflow-y:auto; overflow-x:hidden; border:1px solid #f0f0f0; border-radius:8px; }
|
||||
.an-log-row { display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:start; padding:11px 12px; border-bottom:1px solid #f2f2f4; font-size:.85rem; }
|
||||
.an-log-row:last-child { border-bottom:none; }
|
||||
.an-log-icon { font-size:1.1rem; line-height:1.4; flex:0 0 auto; }
|
||||
.an-log-main { flex:1 1 auto; min-width:0; }
|
||||
.an-log-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
|
||||
.an-log-event { font-weight:600; }
|
||||
.an-log-client { color:#7c6ed4; }
|
||||
.an-log-time { color:#999; font-size:.78rem; margin-left:auto; white-space:nowrap; }
|
||||
.an-log-meta { color:#888; font-size:.78rem; margin-top:3px; word-break:break-word; }
|
||||
.an-log-meta span { margin-right:12px; }
|
||||
.an-log-meta code { background:rgba(0,0,0,.04); padding:1px 4px; border-radius:3px; }
|
||||
.an-log-thumb { width:44px; height:44px; border-radius:6px; object-fit:cover; background:#eceaf5; flex:0 0 auto; }
|
||||
.an-log-status { text-align:center; color:#aaa; padding:14px; font-size:.85rem; }
|
||||
.an-log-figure { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--admin-accent-soft,#eef0fb); overflow:hidden; }
|
||||
.an-log-figure img { width:100%; height:100%; object-fit:cover; display:block; }
|
||||
.an-log-main { min-width:0; }
|
||||
.an-log-head { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
|
||||
.an-log-event { font-weight:650; }
|
||||
.an-log-client { color:#7c6ed4; font-weight:600; }
|
||||
.an-log-time { color:#9a9aa6; font-size:.75rem; white-space:nowrap; margin-left:auto; }
|
||||
.an-log-meta { color:#8a8a95; font-size:.76rem; margin-top:4px; display:flex; flex-direction:column; gap:2px; }
|
||||
.an-log-meta .an-log-line { display:flex; flex-wrap:wrap; gap:4px 12px; }
|
||||
.an-log-meta code { background:rgba(0,0,0,.045); padding:1px 5px; border-radius:4px; word-break:break-all; overflow-wrap:anywhere; max-width:100%; }
|
||||
.an-log-ref { overflow-wrap:anywhere; word-break:break-word; }
|
||||
.an-log-status { text-align:center; color:#aaa; padding:16px; font-size:.85rem; }
|
||||
@media (max-width:600px) {
|
||||
.an-log-row { grid-template-columns:34px 1fr; gap:9px; padding:10px; }
|
||||
.an-log-figure { width:34px; height:34px; font-size:1rem; }
|
||||
.an-log-time { flex-basis:100%; margin-left:0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/static/chart.min.js?v={{ t.app_version() }}"></script>
|
||||
@@ -233,6 +239,10 @@
|
||||
|
||||
function initChart() {
|
||||
var ctx = document.getElementById('anChart').getContext('2d');
|
||||
var enabled = {};
|
||||
document.querySelectorAll('.metric-toggle').forEach(function (cb) {
|
||||
enabled[cb.getAttribute('data-key')] = cb.checked;
|
||||
});
|
||||
var datasets = META.map(function (m) {
|
||||
return {
|
||||
label: metricLabel(m.key),
|
||||
@@ -243,7 +253,7 @@
|
||||
pointRadius: 2,
|
||||
tension: 0.25,
|
||||
fill: true,
|
||||
hidden: false,
|
||||
hidden: enabled[m.key] === false,
|
||||
_key: m.key
|
||||
};
|
||||
});
|
||||
@@ -444,27 +454,33 @@
|
||||
return s;
|
||||
}
|
||||
|
||||
function metaLine() {
|
||||
var line = document.createElement('div');
|
||||
line.className = 'an-log-line';
|
||||
return line;
|
||||
}
|
||||
|
||||
function renderLogRow(e) {
|
||||
var row = document.createElement('div');
|
||||
row.className = 'an-log-row';
|
||||
|
||||
var icon = document.createElement('div');
|
||||
icon.className = 'an-log-icon';
|
||||
icon.textContent = eventIcon(e.event_type);
|
||||
row.appendChild(icon);
|
||||
|
||||
if (e.media && e.media.exists && e.media.url) {
|
||||
var a = document.createElement('a');
|
||||
a.href = e.media.url;
|
||||
a.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo');
|
||||
// Single leading figure: media preview (clickable) or a type emoji.
|
||||
var figure;
|
||||
if (e.media && e.media.exists && e.media.url && e.media.thumbnail_url) {
|
||||
figure = document.createElement('a');
|
||||
figure.href = e.media.url;
|
||||
figure.setAttribute('data-lightbox', e.media.file_type === 'video' ? 'video' : 'photo');
|
||||
var img = document.createElement('img');
|
||||
img.className = 'an-log-thumb';
|
||||
img.src = e.media.thumbnail_url;
|
||||
img.alt = '';
|
||||
img.loading = 'lazy';
|
||||
a.appendChild(img);
|
||||
row.appendChild(a);
|
||||
figure.appendChild(img);
|
||||
} else {
|
||||
figure = document.createElement('div');
|
||||
figure.textContent = eventIcon(e.event_type);
|
||||
}
|
||||
figure.className = 'an-log-figure';
|
||||
row.appendChild(figure);
|
||||
|
||||
var main = document.createElement('div');
|
||||
main.className = 'an-log-main';
|
||||
@@ -489,17 +505,30 @@
|
||||
|
||||
var meta = document.createElement('div');
|
||||
meta.className = 'an-log-meta';
|
||||
if (e.visitor) { meta.appendChild(metaSpan(L.visitor + ': ' + e.visitor)); }
|
||||
|
||||
var line1 = metaLine();
|
||||
if (e.visitor) { line1.appendChild(metaSpan(L.visitor + ': ' + e.visitor)); }
|
||||
var ua = shortUa(e.user_agent);
|
||||
if (ua) { meta.appendChild(metaSpan(ua)); }
|
||||
if (ua) { line1.appendChild(metaSpan(ua)); }
|
||||
if (line1.childNodes.length) { meta.appendChild(line1); }
|
||||
|
||||
if (e.path && e.path !== '/') {
|
||||
var p = document.createElement('span');
|
||||
var line2 = metaLine();
|
||||
var code = document.createElement('code');
|
||||
code.textContent = e.path;
|
||||
p.appendChild(code);
|
||||
meta.appendChild(p);
|
||||
line2.appendChild(code);
|
||||
meta.appendChild(line2);
|
||||
}
|
||||
if (e.referer) { meta.appendChild(metaSpan('← ' + e.referer)); }
|
||||
|
||||
if (e.referer) {
|
||||
var line3 = metaLine();
|
||||
var ref = document.createElement('span');
|
||||
ref.className = 'an-log-ref';
|
||||
ref.textContent = '← ' + e.referer;
|
||||
line3.appendChild(ref);
|
||||
meta.appendChild(line3);
|
||||
}
|
||||
|
||||
if (meta.childNodes.length) { main.appendChild(meta); }
|
||||
|
||||
row.appendChild(main);
|
||||
|
||||
Reference in New Issue
Block a user