Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard: add trend arrows (▲/▼/●) with color to Website stats — compares day-over-day + update-to-update

Browse Source
This commit is contained in:
Oliver
2026-06-11 06:00:59 -03:00
parent e06572d0a6
commit 52dd17384a
3 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
operations.html
+23 -4
View File
@@ -1062,17 +1062,31 @@
period: '—',
updated: '',
visitors: 0,
visitors_trend: {dir: 'same', change: '', pct: ''},
pageviews: 0,
pageviews_trend: {dir: 'same', change: '', pct: ''},
latest_day: '',
latest_day_visitors: 0,
dod_trend: {dir: 'same', change: '', pct: ''},
bounce_rate: '—',
visit_duration: '—',
top_referrers: [{source: 'Direct', visitors: 0}],
countries: [],
events: [],
visitors_by_day: []
visitors_by_day: [],
agents_sold: 0
};
let websiteStats = { ...defaultStats };
function trendArrow(t) {
if (!t || t.dir === 'same') return '<span style="color:var(--text-muted);font-size:12px">●</span>';
if (t.dir === 'new') return '<span style="color:var(--accent);font-size:12px" title="New">●</span>';
const arrow = t.dir === 'up' ? '▲' : '▼';
const color = t.dir === 'up' ? 'var(--success)' : 'var(--danger)';
return `<span style="color:${color};font-size:11px">${arrow} ${t.pct}</span>`;
}
function renderWebsite() {
const s = websiteStats;
const overview = document.getElementById('stats-overview');
@@ -1084,18 +1098,23 @@
<div class="stat-overview-card">
<div class="stat-val">${s.visitors}</div>
<div class="stat-lbl">Unique Visitors</div>
<div class="stat-sub">${s.period}</div>
<div class="stat-sub">${trendArrow(s.visitors_trend)} ${s.period}</div>
</div>
<div class="stat-overview-card">
<div class="stat-val">${s.pageviews}</div>
<div class="stat-lbl">Pageviews</div>
<div class="stat-sub">${s.pageviews_per_visitor || (s.visitors > 0 ? (s.pageviews / s.visitors).toFixed(1) : '—')} avg</div>
<div class="stat-sub">${trendArrow(s.pageviews_trend)} ${s.pageviews_per_visitor || (s.visitors > 0 ? (s.pageviews / s.visitors).toFixed(1) : '—')} avg</div>
</div>
<div class="stat-overview-card">
<div class="stat-val">${s.agents_sold || 2}</div>
<div class="stat-lbl">Agents Sold</div>
<div class="stat-sub">via Stripe</div>
</div>
<div class="stat-overview-card">
<div class="stat-val">${s.latest_day_visitors}</div>
<div class="stat-lbl">${s.latest_day || 'Latest Day'}</div>
<div class="stat-sub">${trendArrow(s.dod_trend)} vs prev day</div>
</div>
`;
}
@@ -1122,7 +1141,7 @@
// Events card
let eventRows = (s.events && s.events.length)
? s.events.map(e => `<div class="stat-row-item"><span class="stat-name">${e.name}</span><span class="stat-num">${e.total} <span style="color:var(--text-muted);font-size:10px">(${e.unique})</span></span></div>`).join('')
? s.events.map(e => `<div class="stat-row-item"><span class="stat-name">${e.name}</span><span class="stat-num">${e.total} <span style="color:var(--text-muted);font-size:10px">(${e.unique} uniq)</span></span></div>`).join('')
: '<div class="stat-row-item" style="color:var(--text-muted);font-size:11px">No event data yet</div>';
html += `<div class="stats-events-card">
<h3>Custom Events</h3>