3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: put the traffic screen in the admin frame

Browse Source 
installTracking() beacons one view per page load and one click per control that
carries a data-key, so every existing button is already counted. The new STATS
pane reads it back: a 7/30/90-day range, the three totals, an SVG timeline and
eight proportional bar lists (pages, clicked features, country, region, city,
browser, system, device).
This commit is contained in:
3dtours
2026-09-18 14:23:25 +07:00
parent 8a7192eae8
commit 89beb5f160
8 changed files with 305 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+32
View File
@@ -463,6 +463,38 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
/* The signed-in name rides the accent with the face beside it. */
.btn.account-btn { color: var(--accent); }
/* --- stats (admin) ------------------------------------------------------- */
/* The traffic screen: one SVG chart and a column of proportional bar lists.
No charting dependency — a couple of polylines and styled divs are enough. */
.stats-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.stats-bar .hint { margin: 0; }
.stats-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.stats-kpi {
display: flex; flex-direction: column; gap: 2px; min-width: 104px;
padding: 10px 14px; border: 1px solid var(--border);
border-radius: var(--radius-sm); background: var(--bg-elev);
}
.stats-kpi b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stats-kpi span { font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); }
.stats-chart {
display: block; width: 100%; height: 180px;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-sunken);
}
.stats-area { fill: var(--accent); opacity: 0.12; }
.stats-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.stats-line-2 { stroke: var(--text-dim); }
.stats-legend { display: flex; gap: 14px; margin: 8px 0 18px; font-size: 11px; color: var(--text-dim); }
.stats-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.stats-axis { margin: 0 0 18px; }
.stats-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 26px; }
.stats-h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-dim); }
.stats-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.stats-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.stats-key { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.stats-track { height: 8px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; }
.stats-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.stats-n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* --- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
.workspace { flex-direction: column; }