quikcue/justvitamin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3f2b6b6188d2bf971a9f7a66a67f07fc127414ed
justvitamin/static/dashboard/index.html
Omair Saleh 3f2b6b6188 v3: PostgreSQL backend — 20K rows seeded, server-side SQL filtering 
- Added PostgreSQL 16 Alpine service to Docker Swarm stack
- db.py: schema for 17 tables, auto-seed from jv_data.json on first boot
- /api/dashboard/data?start=&end= — server-side SQL filtering
  All Time: 0.43s (was 4MB JSON download stuck loading)
  Filtered (12mo): 0.20s with ~90% less data transferred
- Dashboard HTML patched: calls API instead of static JSON
- Integer casting for IsNewCustomer/HasDiscount/IsFreeShipping
- Advisory lock prevents race condition during parallel worker startup
- Returning Revenue now shows correctly: £14.5M (75% of total)
2026-03-02 20:24:15 +08:00

929 lines
54 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JV Ecommerce — Dynamic Performance Report</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<style>
:root{--bg:#0a0e1a;--card:#111827;--card2:#1a2235;--border:#1e293b;--text:#e2e8f0;--muted:#64748b;--accent:#6366f1;--accent2:#818cf8;--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--purple:#a855f7;--cyan:#06b6d4;--pink:#ec4899}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:14px}
.container{max-width:1440px;margin:0 auto;padding:32px 24px}
header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:20px;flex-wrap:wrap;gap:16px}
h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-meta{text-align:right;color:var(--muted);font-size:12px}
h2{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
h3{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px}
/* Date filter bar */
.filter-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:20px;flex-wrap:wrap}
.filter-bar label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.filter-bar select,.filter-bar input{background:var(--card2);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:6px;font-size:13px;font-family:inherit}
.filter-bar input[type="month"]{cursor:pointer}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--accent)}
.filter-btn{background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s}
.filter-btn:hover{background:var(--accent2)}
.filter-btn.reset{background:transparent;border:1px solid var(--border);color:var(--muted)}
.filter-btn.reset:hover{border-color:var(--accent);color:var(--text)}
.filter-active{display:inline-block;padding:4px 10px;background:rgba(99,102,241,.15);color:var(--accent2);border-radius:4px;font-size:11px;font-weight:600}
.filter-info{font-size:11px;color:var(--muted);margin-left:auto}
.tabs{display:flex;gap:4px;margin-bottom:28px;background:var(--card);padding:4px;border-radius:10px;border:1px solid var(--border)}
.tab{padding:10px 24px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);transition:.2s;flex:1;text-align:center}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#fff}
.panel{display:none}.panel.active{display:block}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:28px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px}
.kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.kpi-value{font-size:24px;font-weight:700;letter-spacing:-.5px}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:2px}
.kpi-value.green{color:var(--green)}.kpi-value.red{color:var(--red)}.kpi-value.accent{color:var(--accent2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:28px}
@media(max-width:1000px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:20px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.chart-box{position:relative;height:280px}
.chart-tall{height:350px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--card)}
td{padding:7px 10px;border-bottom:1px solid rgba(30,41,59,.5)}
tr:hover td{background:rgba(99,102,241,.04)}
.num{text-align:right;font-variant-numeric:tabular-nums;font-family:'SF Mono','Fira Code',monospace;font-size:12px}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.purple{color:var(--purple)}.cyan{color:var(--cyan)}.pink{color:var(--pink)}
.insight{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(6,182,212,.05));border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 10px 10px 0;margin-bottom:14px;font-size:13px}
.insight strong{color:var(--accent2)}
.insight.warn{border-left-color:var(--yellow);background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02))}
.insight.warn strong{color:var(--yellow)}
.insight.good{border-left-color:var(--green);background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02))}
.insight.good strong{color:var(--green)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.compare-col{padding:24px;text-align:center}
.compare-col:first-child{border-right:1px solid var(--border)}
.compare-title{font-size:14px;font-weight:700;margin-bottom:16px}
.compare-stat{margin-bottom:12px}
.compare-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase}
.compare-stat-value{font-size:22px;font-weight:700}
.section-title{font-size:16px;font-weight:600;margin:28px 0 16px;padding-top:16px;border-top:1px solid var(--border)}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase}
.badge-green{background:rgba(16,185,129,.15);color:var(--green)}
.badge-red{background:rgba(239,68,68,.15);color:var(--red)}
.badge-yellow{background:rgba(245,158,11,.15);color:var(--yellow)}
.scrollable{max-height:400px;overflow-y:auto}
.highlight-row{background:rgba(99,102,241,.06)!important}
.footer{text-align:center;color:var(--muted);font-size:11px;padding:32px 0 16px;border-top:1px solid var(--border);margin-top:40px}
.loading{text-align:center;padding:80px;color:var(--muted);font-size:16px}
.loading .spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-right:12px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.presets{display:flex;gap:6px;flex-wrap:wrap}
.preset-btn{background:var(--card2);border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;transition:.2s}
.preset-btn:hover,.preset-btn.active{border-color:var(--accent);color:var(--accent2);background:rgba(99,102,241,.1)}
</style>
</head>
<body>
<div class="container">
<header>
<div>
<h1>JV Vitamins — Ecommerce Performance Report</h1>
<div style="color:var(--muted);font-size:13px;margin-top:4px">Dynamic analysis with date filtering — data loaded from CSV export</div>
</div>
<div class="header-meta">
<div id="dateRange"></div>
<div id="orderCount"></div>
<div id="reportDate"></div>
</div>
</header>
<!-- Date Filter Bar -->
<div class="filter-bar">
<label>📅 Date Range:</label>
<input type="month" id="startDate">
<span style="color:var(--muted)">to</span>
<input type="month" id="endDate">
<button class="filter-btn" onclick="applyFilter()">Apply Filter</button>
<button class="filter-btn reset" onclick="resetFilter()">Reset</button>
<div class="presets">
<button class="preset-btn" onclick="setPreset('last12')">Last 12 Months</button>
<button class="preset-btn" onclick="setPreset('last24')">Last 24 Months</button>
<button class="preset-btn" onclick="setPreset('ytd')">YTD</button>
<button class="preset-btn" onclick="setPreset('2024')">2024</button>
<button class="preset-btn" onclick="setPreset('2023')">2023</button>
<button class="preset-btn" onclick="setPreset('2020')">2020</button>
<button class="preset-btn" onclick="setPreset('all')" id="presetAll">All Time</button>
</div>
<div class="filter-info" id="filterInfo"></div>
<div id="dbBadge" style="margin-left:8px"></div>
</div>
<div id="loadingMsg" class="loading"><span class="spinner"></span>Loading data…</div>
<div id="mainContent" style="display:none">
<div class="tabs">
<div class="tab active" onclick="showPanel('exec',this)">Executive Summary</div>
<div class="tab" onclick="showPanel('growth',this)">Growth & Channels</div>
<div class="tab" onclick="showPanel('products',this)">Products</div>
<div class="tab" onclick="showPanel('shipping',this)">Free Shipping Analysis</div>
<div class="tab" onclick="showPanel('customers',this)">Customers</div>
</div>
<!-- EXECUTIVE -->
<div id="exec" class="panel active">
<div class="kpi-grid" id="kpiGrid"></div>
<div id="execInsights"></div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Revenue & Orders — Monthly</h3></div><div class="chart-box chart-tall"><canvas id="revOrdersChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>AOV Trend</h3></div><div class="chart-box chart-tall"><canvas id="aovTrendChart"></canvas></div></div>
</div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>New vs Returning Customer Revenue</h3></div><div class="chart-box"><canvas id="newRetChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Yearly Performance</h3></div><div class="chart-box"><canvas id="yearlyChart"></canvas></div></div>
</div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Orders by Day of Week</h3></div><div class="chart-box"><canvas id="dowChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Payment Processor Split</h3></div><div class="chart-box"><canvas id="payChart"></canvas></div></div>
</div>
</div>
<!-- GROWTH -->
<div id="growth" class="panel">
<div class="card"><div class="card-header"><h3>Channel Performance</h3></div><div class="scrollable"><table id="channelTable"></table></div></div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Channel Revenue Trend</h3></div><div class="chart-box chart-tall"><canvas id="channelTrendChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Channel Mix Over Time</h3></div><div class="chart-box chart-tall"><canvas id="channelMixChart"></canvas></div></div>
</div>
<div class="section-title">Discount Analysis</div>
<div class="card"><table id="discountCompare"></table></div>
<div class="card"><div class="card-header"><h3>Top 20 Discount Codes</h3></div><div class="scrollable"><table id="discountTable"></table></div></div>
</div>
<!-- PRODUCTS -->
<div id="products" class="panel">
<div class="card"><div class="card-header"><h3>Product Categories</h3></div><div class="scrollable"><table id="catTable"></table></div></div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Revenue by Category</h3></div><div class="chart-box chart-tall"><canvas id="catChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Margin % by Category</h3></div><div class="chart-box chart-tall"><canvas id="catMarginChart"></canvas></div></div>
</div>
<div class="card"><div class="card-header"><h3>Top 50 Products</h3></div><div class="scrollable" style="max-height:600px"><table id="prodTable"></table></div></div>
<div class="card"><div class="card-header"><h3>Frequently Bought Together</h3></div><table id="crossSellTable"></table></div>
</div>
<!-- SHIPPING -->
<div id="shipping" class="panel">
<h2 style="margin-bottom:20px">Free Shipping Hypothesis Testing</h2>
<div id="shipInsights"></div>
<div class="kpi-grid" id="shipKpis"></div>
<div class="card">
<div class="card-header"><h3>Head-to-Head: Free Shipping vs Paid Shipping Orders</h3></div>
<div class="compare-grid" id="shipCompare"></div>
</div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Order Value Distribution</h3></div><div class="chart-box chart-tall"><canvas id="aovDistChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Shipping Cost & Free Ship % by Order Value</h3></div><div class="chart-box chart-tall"><canvas id="shipByAovChart"></canvas></div></div>
</div>
<div class="card">
<div class="card-header"><h3>Free Shipping Threshold Scenarios</h3></div>
<p style="color:var(--muted);font-size:12px;margin-bottom:14px">What happens if you offer free shipping above a minimum order value?</p>
<table id="thresholdTable"></table>
</div>
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Free Shipping % Over Time</h3></div><div class="chart-box"><canvas id="shipTrendChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Free Shipping % by Channel</h3></div><div class="chart-box"><canvas id="shipChannelChart"></canvas></div></div>
</div>
<div class="card"><div class="card-header"><h3>Delivery Methods Breakdown</h3></div><div class="scrollable"><table id="deliveryTable"></table></div></div>
</div>
<!-- CUSTOMERS -->
<div id="customers" class="panel">
<div class="grid-2">
<div class="card"><div class="card-header"><h3>Customer Segments</h3></div><div class="chart-box"><canvas id="custSegChart"></canvas></div></div>
<div class="card"><div class="card-header"><h3>Top Countries</h3></div><div class="chart-box"><canvas id="countryChart"></canvas></div></div>
</div>
<div class="card">
<div class="card-header"><h3>Cohort Retention (Monthly)</h3></div>
<div class="scrollable" style="max-height:500px"><table id="cohortTable"></table></div>
</div>
</div>
<div class="footer" id="footer"></div>
</div>
</div>
<script>
// ═══════════════════════════════════════════════════════════
// GLOBALS
// ═══════════════════════════════════════════════════════════
let RAW = null; // full dataset from JSON
let FSTART = null; // filter start YYYY-MM
let FEND = null; // filter end YYYY-MM
const COLORS = ['#6366f1','#10b981','#f59e0b','#ef4444','#a855f7','#06b6d4','#ec4899','#84cc16','#f97316','#14b8a6'];
const charts = {}; // chart instances for cleanup
// ═══════════════════════════════════════════════════════════
// UTILITIES
// ═══════════════════════════════════════════════════════════
function fmt(n,d=0){if(n==null||isNaN(n))return'-';return new Intl.NumberFormat('en-GB',{minimumFractionDigits:d,maximumFractionDigits:d}).format(n)}
function gbp(n){if(n==null||isNaN(n))return'-';return '\u00a3'+fmt(n,2)}
function pct(n){return n==null?'-':fmt(n,1)+'%'}
function mc(n){return n>=60?'green':n>=40?'yellow':'red'}
function showPanel(id,el){
document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
document.getElementById(id).classList.add('active');
el.classList.add('active');
}
function destroyChart(id){
if(charts[id]){charts[id].destroy();delete charts[id];}
}
const cDef={responsive:true,maintainAspectRatio:false,animation:{duration:300},plugins:{legend:{labels:{color:'#64748b',font:{size:11}}}},scales:{x:{grid:{color:'rgba(30,41,59,.5)'},ticks:{color:'#64748b',font:{size:10},maxRotation:45}},y:{grid:{color:'rgba(30,41,59,.5)'},ticks:{color:'#64748b',font:{size:10}}}}};
// ═══════════════════════════════════════════════════════════
// DATA FILTERING
// ═══════════════════════════════════════════════════════════
function inRange(ym){
if(!FSTART && !FEND) return true;
if(FSTART && ym < FSTART) return false;
if(FEND && ym > FEND) return false;
return true;
}
function filterArr(arr, ymKey='YearMonth'){
return arr.filter(r => inRange(r[ymKey]));
}
// Weighted average helper
function wavg(arr, valKey, weightKey){
let sumW = 0, sumVW = 0;
arr.forEach(r => {
const w = r[weightKey] || 0;
const v = r[valKey];
if(v != null && !isNaN(v)){
sumW += w;
sumVW += v * w;
}
});
return sumW > 0 ? sumVW / sumW : 0;
}
// ═══════════════════════════════════════════════════════════
// DATE FILTER UI
// ═══════════════════════════════════════════════════════════
function applyFilter(){
const s = document.getElementById('startDate').value;
const e = document.getElementById('endDate').value;
FSTART = s || null;
FEND = e || null;
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
// Re-fetch from PostgreSQL with server-side filtering
loadData(FSTART, FEND);
}
function resetFilter(){
FSTART = null; FEND = null;
document.getElementById('startDate').value = '';
document.getElementById('endDate').value = '';
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
document.getElementById('presetAll').classList.add('active');
// Re-fetch full dataset from PostgreSQL
loadData();
}
function setPreset(key){
document.querySelectorAll('.preset-btn').forEach(b=>b.classList.remove('active'));
event.target.classList.add('active');
const now = new Date();
const cy = now.getFullYear();
const cm = String(now.getMonth()+1).padStart(2,'0');
switch(key){
case 'last12': {
const d = new Date(now); d.setMonth(d.getMonth()-12);
FSTART = d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0');
FEND = null; break;
}
case 'last24': {
const d = new Date(now); d.setMonth(d.getMonth()-24);
FSTART = d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0');
FEND = null; break;
}
case 'ytd': FSTART = cy+'-01'; FEND = null; break;
case '2024': FSTART = '2024-01'; FEND = '2024-12'; break;
case '2023': FSTART = '2023-01'; FEND = '2023-12'; break;
case '2020': FSTART = '2020-01'; FEND = '2020-12'; break;
case 'all': FSTART = null; FEND = null; break;
}
document.getElementById('startDate').value = FSTART || '';
document.getElementById('endDate').value = FEND || '';
// Re-fetch from PostgreSQL with server-side filtering
loadData(FSTART, FEND);
}
// ═══════════════════════════════════════════════════════════
// BUILD ALL SECTIONS
// ═══════════════════════════════════════════════════════════
function buildAll(){
const fm = filterArr(RAW.monthly);
updateFilterInfo(fm);
buildExec(fm);
buildGrowth(fm);
buildProducts();
buildShipping(fm);
buildCustomers(fm);
}
function updateFilterInfo(fm){
const totalOrders = fm.reduce((s,r)=>s+r.orders, 0);
const rangeText = FSTART || FEND
? `Filtered: ${FSTART||'start'} → ${FEND||'latest'}`
: `All Time: ${RAW.meta.dateMin} to ${RAW.meta.dateMax}`;
document.getElementById('dateRange').textContent = rangeText;
document.getElementById('orderCount').textContent = `${fmt(totalOrders)} valid orders in range`;
document.getElementById('reportDate').textContent = `Data generated ${RAW.meta.generatedAt?.split('T')[0] || ''}`;
document.getElementById('filterInfo').innerHTML = FSTART || FEND
? `<span class="filter-active">🔍 Filter Active: ${fm.length} months</span>`
: `${fm.length} months loaded`;
document.getElementById('footer').innerHTML = `
JV Vitamins Ecommerce Analysis &middot; Data: ${fmt(RAW.meta.totalRawOrders)} orders (${fmt(RAW.meta.totalValidOrders)} valid) &middot; ${RAW.meta.dateMin} — ${RAW.meta.dateMax}<br>
<span style="color:var(--yellow)">Note: Order line data coverage ${RAW.meta.lineDataCoverage}%. Orderlines capped at Excel 1M row limit.</span>
`;
}
// ═══════════════════════════════════════════════════════════
// EXECUTIVE SUMMARY
// ═══════════════════════════════════════════════════════════
function buildExec(fm){
const totalRev = fm.reduce((s,r) => s + r.revenue, 0);
const totalOrders = fm.reduce((s,r) => s + r.orders, 0);
const avgAOV = totalOrders > 0 ? totalRev / totalOrders : 0;
const totalCustomers = RAW.meta.uniqueCustomers; // approximate for filtered
const totalShipping = fm.reduce((s,r) => s + (r.totalShipping||0), 0);
const totalNewCust = fm.reduce((s,r) => s + r.newCustomers, 0);
const avgMargin = wavg(fm, 'avgMargin', 'orders');
const freeShipPct = fm.reduce((s,r) => s + (r.freeShipOrders||0), 0) / (totalOrders||1) * 100;
const discountPct = fm.reduce((s,r) => s + (r.discountOrders||0), 0) / (totalOrders||1) * 100;
const avgItems = fm.reduce((s,r) => s + (r.totalItems||0), 0) / (totalOrders||1);
// New vs returning revenue from newReturningMonthly
const nrFiltered = filterArr(RAW.newReturningMonthly);
const newRev = nrFiltered.filter(r=>r.IsNewCustomer===1).reduce((s,r)=>s+r.revenue,0);
const retRev = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.revenue,0);
const retOrders = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.orders,0);
const repeatRevPct = totalRev > 0 ? retRev / totalRev * 100 : 0;
const kpis = [
{l:'Gross Revenue', v:gbp(totalRev), s:FSTART||FEND?'Filtered period':'All time', c:''},
{l:'Valid Orders', v:fmt(totalOrders), s:`${fm.length} months`, c:''},
{l:'AOV (Mean)', v:gbp(avgAOV), s:`${fmt(avgItems,1)} items/order`, c:'accent'},
{l:'Avg Gross Margin', v:pct(avgMargin), s:`${RAW.meta.lineDataCoverage}% data coverage`, c:'green'},
{l:'Shipping Revenue', v:gbp(totalShipping), s:`${pct(freeShipPct)} orders ship free`, c:''},
{l:'Discounted Orders', v:pct(discountPct), s:`of orders used a code`, c:'yellow'},
{l:'Returning Revenue', v:gbp(retRev), s:`${pct(repeatRevPct)} of total`, c:'green'},
{l:'New Customers', v:fmt(totalNewCust), s:`First orders in range`, c:'cyan'},
];
document.getElementById('kpiGrid').innerHTML = kpis.map(k =>
`<div class="kpi"><div class="kpi-label">${k.l}</div><div class="kpi-value ${k.c}">${k.v}</div><div class="kpi-sub">${k.s}</div></div>`
).join('');
// Insights
const latestYear = fm.filter(r=>r.YearMonth>='2025-01');
const prevYear = fm.filter(r=>r.YearMonth>='2024-01'&&r.YearMonth<='2024-12');
const lyRev = latestYear.reduce((s,r)=>s+r.revenue,0);
const pyRev = prevYear.reduce((s,r)=>s+r.revenue,0);
const yoyChange = pyRev > 0 ? ((lyRev - pyRev) / pyRev * 100) : 0;
document.getElementById('execInsights').innerHTML = `
<div class="insight ${avgMargin >= 55 ? 'good' : 'warn'}"><strong>Avg Margin ${pct(avgMargin)}:</strong> ${avgMargin >= 55 ? 'Healthy margins across the product range.' : 'Margins are under pressure — review product costs and pricing.'}</div>
<div class="insight"><strong>Returning customer revenue:</strong> ${pct(repeatRevPct)} of revenue comes from repeat buyers. ${repeatRevPct > 40 ? 'Strong loyalty base to leverage.' : 'Opportunity to improve retention.'}</div>
<div class="insight ${avgItems < 2 ? 'warn' : 'good'}"><strong>Items per order: ${fmt(avgItems,1)}.</strong> ${avgItems < 2 ? 'Most orders are single-item. Bundling and cross-sell could lift AOV.' : 'Good cross-sell rate.'}</div>
`;
// Revenue + Orders chart
destroyChart('revOrdersChart');
charts['revOrdersChart'] = new Chart(document.getElementById('revOrdersChart'), {
type:'line', data:{labels:fm.map(r=>r.YearMonth), datasets:[
{label:'Revenue',data:fm.map(r=>r.revenue),borderColor:'#6366f1',backgroundColor:'#6366f133',fill:true,tension:.3,pointRadius:0,yAxisID:'y'},
{label:'Orders',data:fm.map(r=>r.orders),borderColor:'#10b981',tension:.3,pointRadius:0,yAxisID:'y1'}
]}, options:{...cDef,scales:{...cDef.scales,
y:{...cDef.scales.y,position:'left',ticks:{...cDef.scales.y.ticks,callback:v=>'\u00a3'+fmt(v/1000)+'k'}},
y1:{grid:{display:false},ticks:{color:'#10b981',font:{size:10}},position:'right'}
}}
});
// AOV chart
destroyChart('aovTrendChart');
charts['aovTrendChart'] = new Chart(document.getElementById('aovTrendChart'), {
type:'line', data:{labels:fm.map(r=>r.YearMonth), datasets:[
{label:'Mean AOV',data:fm.map(r=>r.aov),borderColor:'#a855f7',tension:.3,pointRadius:0}
]}, options:{...cDef,plugins:{...cDef.plugins,legend:{display:false}},
scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{...cDef.scales.y.ticks,callback:v=>'\u00a3'+v}}}}
});
// New vs Returning
destroyChart('newRetChart');
const nrByMonth = {};
nrFiltered.forEach(r => {
if(!nrByMonth[r.YearMonth]) nrByMonth[r.YearMonth] = {new:0,ret:0};
if(r.IsNewCustomer) nrByMonth[r.YearMonth].new = r.revenue;
else nrByMonth[r.YearMonth].ret = r.revenue;
});
const nrLabels = Object.keys(nrByMonth).sort();
charts['newRetChart'] = new Chart(document.getElementById('newRetChart'), {
type:'bar', data:{labels:nrLabels, datasets:[
{label:'New Customer Revenue',data:nrLabels.map(l=>nrByMonth[l].new),backgroundColor:'#06b6d4cc'},
{label:'Returning Revenue',data:nrLabels.map(l=>nrByMonth[l].ret),backgroundColor:'#6366f1cc'}
]}, options:{...cDef,scales:{...cDef.scales,x:{...cDef.scales.x,stacked:true},y:{...cDef.scales.y,stacked:true,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
});
// Yearly
destroyChart('yearlyChart');
const yearAgg = {};
fm.forEach(r => {
const y = r.YearMonth.substring(0,4);
if(!yearAgg[y]) yearAgg[y] = {revenue:0, orders:0};
yearAgg[y].revenue += r.revenue;
yearAgg[y].orders += r.orders;
});
const years = Object.keys(yearAgg).sort();
charts['yearlyChart'] = new Chart(document.getElementById('yearlyChart'), {
type:'bar', data:{labels:years, datasets:[
{label:'Revenue',data:years.map(y=>yearAgg[y].revenue),backgroundColor:'#6366f1cc',yAxisID:'y'},
{label:'Orders',data:years.map(y=>yearAgg[y].orders),type:'line',borderColor:'#10b981',pointRadius:2,yAxisID:'y1'}
]}, options:{...cDef,scales:{...cDef.scales,
y:{...cDef.scales.y,ticks:{callback:v=>'\u00a3'+fmt(v/1000000,1)+'M'}},
y1:{grid:{display:false},ticks:{color:'#10b981',font:{size:10},callback:v=>fmt(v/1000)+'k'},position:'right'}
}}
});
// Day of week
destroyChart('dowChart');
const dowFiltered = filterArr(RAW.dowMonthly);
const dowAgg = {};
const dowOrder = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
dowFiltered.forEach(r => {
if(!dowAgg[r.DayOfWeek]) dowAgg[r.DayOfWeek] = {orders:0, revenue:0};
dowAgg[r.DayOfWeek].orders += r.orders;
dowAgg[r.DayOfWeek].revenue += r.revenue;
});
charts['dowChart'] = new Chart(document.getElementById('dowChart'), {
type:'bar', data:{labels:dowOrder, datasets:[{data:dowOrder.map(d=>(dowAgg[d]||{orders:0}).orders),backgroundColor:COLORS.slice(0,7).map(c=>c+'cc')}]},
options:{...cDef,plugins:{legend:{display:false}}}
});
// Payment
destroyChart('payChart');
const payFiltered = filterArr(RAW.paymentMonthly);
const payAgg = {};
payFiltered.forEach(r => {
const k = (r.PaymentProcessor||'Unknown').toUpperCase();
if(!payAgg[k]) payAgg[k] = 0;
payAgg[k] += r.orders;
});
const payEntries = Object.entries(payAgg).sort((a,b)=>b[1]-a[1]).slice(0,8);
charts['payChart'] = new Chart(document.getElementById('payChart'), {
type:'doughnut', data:{labels:payEntries.map(e=>e[0]),datasets:[{data:payEntries.map(e=>e[1]),backgroundColor:COLORS}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'right',labels:{color:'#64748b'}}}}
});
}
// ═══════════════════════════════════════════════════════════
// GROWTH & CHANNELS
// ═══════════════════════════════════════════════════════════
function buildGrowth(fm){
const chFiltered = filterArr(RAW.channelMonthly);
// Aggregate channels
const chAgg = {};
chFiltered.forEach(r => {
const k = r.ReferrerSource;
if(!chAgg[k]) chAgg[k] = {orders:0,revenue:0,sumAOV:0,sumItems:0,newCust:0,freeship:0,disc:0};
chAgg[k].orders += r.orders;
chAgg[k].revenue += r.revenue;
chAgg[k].sumAOV += r.avgAOV * r.orders;
chAgg[k].sumItems += r.avgItems * r.orders;
chAgg[k].newCust += r.newPct * r.orders;
chAgg[k].freeship += r.freeShipPct * r.orders;
chAgg[k].disc += r.discountPct * r.orders;
});
const channels = Object.entries(chAgg).map(([k,v])=>({
name:k, orders:v.orders, revenue:v.revenue,
avgAOV:v.orders?v.sumAOV/v.orders:0, avgItems:v.orders?v.sumItems/v.orders:0,
newPct:v.orders?v.newCust/v.orders*100:0, freeShipPct:v.orders?v.freeship/v.orders*100:0,
discountPct:v.orders?v.disc/v.orders*100:0
})).sort((a,b)=>b.revenue-a.revenue);
let h='<thead><tr><th>Channel</th><th class="num">Orders</th><th class="num">Revenue</th><th class="num">AOV</th><th class="num">Items/Order</th><th class="num">% New</th><th class="num">% Discounted</th><th class="num">% Free Ship</th></tr></thead><tbody>';
channels.forEach(c=>{
h+=`<tr><td><strong>${c.name}</strong></td><td class="num">${fmt(c.orders)}</td><td class="num">${gbp(c.revenue)}</td><td class="num">${gbp(c.avgAOV)}</td><td class="num">${fmt(c.avgItems,1)}</td><td class="num">${pct(c.newPct)}</td><td class="num">${pct(c.discountPct)}</td><td class="num">${pct(c.freeShipPct)}</td></tr>`;
});
document.getElementById('channelTable').innerHTML=h+'</tbody>';
// Channel trend (top 4)
const top4 = channels.slice(0,4).map(c=>c.name);
const cmByChannel = {};
top4.forEach(ch=>{cmByChannel[ch]={}});
chFiltered.forEach(r=>{if(cmByChannel[r.ReferrerSource]) cmByChannel[r.ReferrerSource][r.YearMonth]=r.revenue});
const cmLabels = [...new Set(chFiltered.map(r=>r.YearMonth))].sort();
destroyChart('channelTrendChart');
charts['channelTrendChart'] = new Chart(document.getElementById('channelTrendChart'),{
type:'line',data:{labels:cmLabels,datasets:top4.map((ch,i)=>({
label:ch,data:cmLabels.map(l=>cmByChannel[ch][l]||0),borderColor:COLORS[i],tension:.3,pointRadius:0
}))},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
});
destroyChart('channelMixChart');
charts['channelMixChart'] = new Chart(document.getElementById('channelMixChart'),{
type:'bar',data:{labels:cmLabels,datasets:top4.map((ch,i)=>({
label:ch,data:cmLabels.map(l=>cmByChannel[ch][l]||0),backgroundColor:COLORS[i]+'aa'
}))},options:{...cDef,scales:{...cDef.scales,x:{...cDef.scales.x,stacked:true},y:{...cDef.scales.y,stacked:true,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
});
// Discount compare
const discFiltered = filterArr(RAW.discountMonthly);
const discAgg = {0:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumShip:0,rev:0},1:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumShip:0,rev:0}};
discFiltered.forEach(r=>{
const k = r.HasDiscount;
discAgg[k].count += r.count;
discAgg[k].sumAOV += r.avgAOV * r.count;
discAgg[k].sumItems += r.avgItems * r.count;
discAgg[k].sumMargin += r.avgMargin * r.count;
discAgg[k].sumShip += r.avgShipping * r.count;
discAgg[k].rev += r.revenue;
});
let dh='<thead><tr><th>Segment</th><th class="num">Orders</th><th class="num">Avg AOV</th><th class="num">Avg Items</th><th class="num">Avg Margin %</th><th class="num">Avg Shipping</th></tr></thead><tbody>';
[0,1].forEach(k=>{
const d = discAgg[k];
const n = d.count||1;
dh+=`<tr><td>${k?'With Discount Code':'No Discount'}</td><td class="num">${fmt(d.count)}</td><td class="num">${gbp(d.sumAOV/n)}</td><td class="num">${fmt(d.sumItems/n,1)}</td><td class="num ${mc(d.sumMargin/n)}">${pct(d.sumMargin/n)}</td><td class="num">${gbp(d.sumShip/n)}</td></tr>`;
});
document.getElementById('discountCompare').innerHTML=dh+'</tbody>';
// Top discount codes
const dcFiltered = filterArr(RAW.discountCodesMonthly);
const dcAgg = {};
dcFiltered.forEach(r=>{
if(!dcAgg[r.DiscountCode]) dcAgg[r.DiscountCode]={uses:0,revenue:0,sumAOV:0,sumDiscPct:0};
dcAgg[r.DiscountCode].uses += r.uses;
dcAgg[r.DiscountCode].revenue += r.revenue;
dcAgg[r.DiscountCode].sumAOV += r.avgAOV * r.uses;
dcAgg[r.DiscountCode].sumDiscPct += (r.avgDiscountPct||0) * r.uses;
});
const dcSorted = Object.entries(dcAgg).map(([k,v])=>({code:k,...v,avgAOV:v.sumAOV/(v.uses||1),avgDiscPct:v.sumDiscPct/(v.uses||1)})).sort((a,b)=>b.uses-a.uses).slice(0,20);
let ch2='<thead><tr><th>Code</th><th class="num">Uses</th><th class="num">Revenue</th><th class="num">AOV</th><th class="num">Avg Disc %</th></tr></thead><tbody>';
dcSorted.forEach(c=>{
ch2+=`<tr><td><code>${c.code}</code></td><td class="num">${fmt(c.uses)}</td><td class="num">${gbp(c.revenue)}</td><td class="num">${gbp(c.avgAOV)}</td><td class="num">${pct(c.avgDiscPct)}</td></tr>`;
});
document.getElementById('discountTable').innerHTML=ch2+'</tbody>';
}
// ═══════════════════════════════════════════════════════════
// PRODUCTS
// ═══════════════════════════════════════════════════════════
function buildProducts(){
// Categories
const catFiltered = filterArr(RAW.categoryMonthly);
const catAgg = {};
catFiltered.forEach(r=>{
if(!catAgg[r.Category]) catAgg[r.Category]={totalRevenue:0,totalRevenueExVAT:0,totalCost:0,totalQty:0,orderCount:0,uniqueProducts:0};
catAgg[r.Category].totalRevenue += r.totalRevenue;
catAgg[r.Category].totalRevenueExVAT += r.totalRevenueExVAT;
catAgg[r.Category].totalCost += r.totalCost;
catAgg[r.Category].totalQty += r.totalQty;
catAgg[r.Category].orderCount += r.orderCount;
catAgg[r.Category].uniqueProducts = Math.max(catAgg[r.Category].uniqueProducts, r.uniqueProducts||0);
});
const cats = Object.entries(catAgg).map(([k,v])=>{
const margin = v.totalRevenueExVAT - v.totalCost;
const marginPct = v.totalRevenueExVAT > 0 ? margin / v.totalRevenueExVAT * 100 : 0;
return {name:k,...v,margin,marginPct};
}).sort((a,b)=>b.totalRevenue-a.totalRevenue);
let h='<thead><tr><th>Category</th><th class="num">Revenue</th><th class="num">Units</th><th class="num">Orders</th><th class="num">COGS</th><th class="num">Margin</th><th class="num">Margin %</th></tr></thead><tbody>';
cats.forEach(c=>{
h+=`<tr><td><strong>${c.name}</strong></td><td class="num">${gbp(c.totalRevenue)}</td><td class="num">${fmt(c.totalQty)}</td><td class="num">${fmt(c.orderCount)}</td><td class="num">${gbp(c.totalCost)}</td><td class="num">${gbp(c.margin)}</td><td class="num ${mc(c.marginPct)}">${pct(c.marginPct)}</td></tr>`;
});
document.getElementById('catTable').innerHTML=h+'</tbody>';
// Category charts
const top10 = cats.slice(0,10);
destroyChart('catChart');
charts['catChart'] = new Chart(document.getElementById('catChart'),{
type:'bar',data:{labels:top10.map(c=>c.name),datasets:[{data:top10.map(c=>c.totalRevenue),backgroundColor:COLORS.map(c=>c+'cc')}]},
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}},scales:{...cDef.scales,x:{...cDef.scales.x,ticks:{callback:v=>'\u00a3'+fmt(v/1000)+'k'}}}}
});
destroyChart('catMarginChart');
charts['catMarginChart'] = new Chart(document.getElementById('catMarginChart'),{
type:'bar',data:{labels:top10.map(c=>c.name),datasets:[{data:top10.map(c=>c.marginPct),backgroundColor:top10.map(c=>c.marginPct>=60?'#10b981cc':c.marginPct>=40?'#f59e0bcc':'#ef4444cc')}]},
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}},scales:{...cDef.scales,x:{...cDef.scales.x,max:100,ticks:{callback:v=>v+'%'}}}}
});
// Products
const prodFiltered = filterArr(RAW.productMonthly);
const prodAgg = {};
prodFiltered.forEach(r=>{
const k = r.Description+'|||'+r.SKUDescription;
if(!prodAgg[k]) prodAgg[k]={desc:r.Description,sku:r.SKUDescription,cat:r.Category,totalRevenue:0,totalRevenueExVAT:0,totalCost:0,totalQty:0,orderCount:0};
prodAgg[k].totalRevenue += r.totalRevenue;
prodAgg[k].totalRevenueExVAT += r.totalRevenueExVAT;
prodAgg[k].totalCost += r.totalCost;
prodAgg[k].totalQty += r.totalQty;
prodAgg[k].orderCount += r.orderCount;
});
const prods = Object.values(prodAgg).map(v=>{
const margin = v.totalRevenueExVAT - v.totalCost;
const marginPct = v.totalRevenueExVAT > 0 ? margin / v.totalRevenueExVAT * 100 : 0;
return {...v,margin,marginPct};
}).sort((a,b)=>b.totalRevenue-a.totalRevenue).slice(0,50);
let ph='<thead><tr><th>#</th><th>Product</th><th>Variant</th><th>Category</th><th class="num">Revenue</th><th class="num">Units</th><th class="num">Orders</th><th class="num">COGS</th><th class="num">Margin %</th></tr></thead><tbody>';
prods.forEach((p,i)=>{
ph+=`<tr><td>${i+1}</td><td>${p.desc}</td><td>${p.sku}</td><td><span class="badge badge-green">${p.cat}</span></td><td class="num">${gbp(p.totalRevenue)}</td><td class="num">${fmt(p.totalQty)}</td><td class="num">${fmt(p.orderCount)}</td><td class="num">${gbp(p.totalCost)}</td><td class="num ${mc(p.marginPct)}">${pct(p.marginPct)}</td></tr>`;
});
document.getElementById('prodTable').innerHTML=ph+'</tbody>';
// Cross-sell (static — not filterable by date)
let cs='<thead><tr><th>#</th><th>Product A</th><th>Product B</th><th class="num">Times Bought Together</th></tr></thead><tbody>';
(RAW.crossSell||[]).forEach((p,i)=>{
cs+=`<tr><td>${i+1}</td><td>${p.product1}</td><td>${p.product2}</td><td class="num">${fmt(p.count)}</td></tr>`;
});
document.getElementById('crossSellTable').innerHTML=cs+'</tbody>';
}
// ═══════════════════════════════════════════════════════════
// SHIPPING
// ═══════════════════════════════════════════════════════════
function buildShipping(fm){
// Shipping comparison
const scFiltered = filterArr(RAW.shippingCompMonthly);
const scAgg = {0:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumNew:0,sumDisc:0,sumShip:0},
1:{count:0,sumAOV:0,sumItems:0,sumMargin:0,sumNew:0,sumDisc:0,sumShip:0}};
scFiltered.forEach(r=>{
const k = r.IsFreeShipping;
scAgg[k].count += r.count;
scAgg[k].sumAOV += r.avgAOV * r.count;
scAgg[k].sumItems += r.avgItems * r.count;
scAgg[k].sumMargin += r.avgMargin * r.count;
scAgg[k].sumNew += r.newPct * r.count;
scAgg[k].sumDisc += r.discountPct * r.count;
scAgg[k].sumShip += r.avgShipping * r.count;
});
const free = scAgg[1], paid = scAgg[0];
const fn = free.count||1, pn = paid.count||1;
const totalShipRev = fm.reduce((s,r)=>s+(r.totalShipping||0),0);
const totalOrders = fm.reduce((s,r)=>s+r.orders,0);
const freeShipPct = free.count / (totalOrders||1) * 100;
// KPIs
const shipKpis = [
{l:'Total Shipping Revenue',v:gbp(totalShipRev),s:`${fmt(paid.count)} paid orders`,c:''},
{l:'Free Shipping Rate',v:pct(freeShipPct),s:`${fmt(free.count)} free orders`,c:'green'},
{l:'Avg Shipping (Paid)',v:gbp(paid.sumShip/pn),s:'Per paid-shipping order',c:'yellow'},
{l:'Avg Shipping (All)',v:gbp(totalShipRev/(totalOrders||1)),s:'Across all orders',c:''},
];
document.getElementById('shipKpis').innerHTML = shipKpis.map(k =>
`<div class="kpi"><div class="kpi-label">${k.l}</div><div class="kpi-value ${k.c}">${k.v}</div><div class="kpi-sub">${k.s}</div></div>`
).join('');
// Insights
document.getElementById('shipInsights').innerHTML = `
<div class="insight"><strong>Current state:</strong> ${pct(freeShipPct)} of orders ship free. Total shipping revenue: ${gbp(totalShipRev)}.</div>
<div class="insight ${free.sumAOV/fn < paid.sumAOV/pn ? 'warn' : ''}"><strong>AOV comparison:</strong> Free-shipping orders avg ${gbp(free.sumAOV/fn)} vs paid shipping ${gbp(paid.sumAOV/pn)}. ${free.sumAOV/fn < paid.sumAOV/pn ? 'Free shipping orders have lower AOV.' : 'Free shipping orders have higher AOV.'}</div>
<div class="insight good"><strong>Margin comparison:</strong> Free-shipping margin ${pct(free.sumMargin/fn)} vs paid ${pct(paid.sumMargin/pn)}.</div>
`;
// Comparison
document.getElementById('shipCompare').innerHTML = `
<div class="compare-col">
<div class="compare-title green">🆓 Free Shipping</div>
<div class="compare-stat"><div class="compare-stat-label">Orders</div><div class="compare-stat-value">${fmt(free.count)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">AOV (Mean)</div><div class="compare-stat-value">${gbp(free.sumAOV/fn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">Items / Order</div><div class="compare-stat-value">${fmt(free.sumItems/fn,1)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">Gross Margin</div><div class="compare-stat-value green">${pct(free.sumMargin/fn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">% New Customers</div><div class="compare-stat-value">${pct(free.sumNew/fn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">% Discounted</div><div class="compare-stat-value">${pct(free.sumDisc/fn)}</div></div>
</div>
<div class="compare-col">
<div class="compare-title yellow">📦 Paid Shipping</div>
<div class="compare-stat"><div class="compare-stat-label">Orders</div><div class="compare-stat-value">${fmt(paid.count)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">AOV (Mean)</div><div class="compare-stat-value">${gbp(paid.sumAOV/pn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">Items / Order</div><div class="compare-stat-value">${fmt(paid.sumItems/pn,1)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">Gross Margin</div><div class="compare-stat-value yellow">${pct(paid.sumMargin/pn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">% New Customers</div><div class="compare-stat-value">${pct(paid.sumNew/pn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">% Discounted</div><div class="compare-stat-value">${pct(paid.sumDisc/pn)}</div></div>
<div class="compare-stat"><div class="compare-stat-label">Avg Shipping Paid</div><div class="compare-stat-value red">${gbp(paid.sumShip/pn)}</div></div>
</div>
`;
// AOV Distribution
const aovFiltered = filterArr(RAW.aovMonthly);
const aovAgg = {};
aovFiltered.forEach(r=>{
if(!aovAgg[r.AOVBucket]) aovAgg[r.AOVBucket]={count:0,revenue:0,sumShip:0,sumFree:0};
aovAgg[r.AOVBucket].count += r.count;
aovAgg[r.AOVBucket].revenue += r.revenue;
aovAgg[r.AOVBucket].sumShip += r.avgShipping * r.count;
aovAgg[r.AOVBucket].sumFree += r.pctFreeShip * r.count;
});
const bucketOrder = ['<5','5-10','10-15','15-20','20-25','25-30','30-35','35-40','40-50','50-60','60-75','75-100','100-150','150-200','200-500','500+'];
const aovBuckets = bucketOrder.filter(b=>aovAgg[b]&&aovAgg[b].count>0).map(b=>({
bucket:b,...aovAgg[b],
avgShipping:aovAgg[b].sumShip/(aovAgg[b].count||1),
pctFreeShip:aovAgg[b].sumFree/(aovAgg[b].count||1)
}));
destroyChart('aovDistChart');
charts['aovDistChart'] = new Chart(document.getElementById('aovDistChart'),{
type:'bar',data:{labels:aovBuckets.map(a=>'£'+a.bucket),datasets:[{label:'Orders',data:aovBuckets.map(a=>a.count),backgroundColor:aovBuckets.map(a=>{const v=parseFloat(a.bucket);return v>=25&&v<40?'#6366f1cc':'#334155cc'})}]},
options:{...cDef,plugins:{legend:{display:false}}}
});
const aovSig = aovBuckets.filter(a=>a.count>100);
destroyChart('shipByAovChart');
charts['shipByAovChart'] = new Chart(document.getElementById('shipByAovChart'),{
type:'bar',data:{labels:aovSig.map(a=>'£'+a.bucket),datasets:[
{label:'Avg Shipping £',data:aovSig.map(a=>a.avgShipping),backgroundColor:'#ef4444aa',yAxisID:'y'},
{label:'% Free Shipping',data:aovSig.map(a=>a.pctFreeShip*100),backgroundColor:'#10b981aa',yAxisID:'y1'}
]},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,position:'left',ticks:{callback:v=>'£'+v}},y1:{grid:{display:false},ticks:{color:'#10b981',callback:v=>v+'%'},position:'right',max:100}}}
});
// Threshold analysis
const thFiltered = filterArr(RAW.thresholdMonthly);
const thAgg = {totalOrders:0, totalShipRev:0};
[15,20,25,30,35,40,50].forEach(t=>{thAgg['t'+t]={eligible:0,shipAbsorbed:0,near:0,sumNearGap:0}});
thFiltered.forEach(r=>{
thAgg.totalOrders += r.totalOrders;
thAgg.totalShipRev += r.totalShippingRev;
[15,20,25,30,35,40,50].forEach(t=>{
thAgg['t'+t].eligible += r['t'+t+'_eligible']||0;
thAgg['t'+t].shipAbsorbed += r['t'+t+'_shipAbsorbed']||0;
thAgg['t'+t].near += r['t'+t+'_near']||0;
thAgg['t'+t].sumNearGap += (r['t'+t+'_nearGap']||0) * (r['t'+t+'_near']||0);
});
});
let th='<thead><tr><th>Scenario</th><th class="num">Orders Qualifying</th><th class="num">% of Total</th><th class="num">Shipping Cost Absorbed</th><th class="num">Remaining Ship Rev</th><th class="num">Near-Threshold Orders</th><th class="num">Avg Gap to Qualify</th></tr></thead><tbody>';
th+=`<tr><td><strong>🟢 Current</strong></td><td class="num">${fmt(free.count)}</td><td class="num">${pct(freeShipPct)}</td><td class="num">-</td><td class="num">${gbp(thAgg.totalShipRev)}</td><td class="num">-</td><td class="num">-</td></tr>`;
[15,20,25,30,35,40,50].forEach(t=>{
const d = thAgg['t'+t];
const hl = [25,30,35].includes(t) ? 'class="highlight-row"' : '';
th+=`<tr ${hl}><td><strong>🟡 Free ship ≥£${t}</strong></td><td class="num">${fmt(d.eligible)}</td><td class="num">${pct(d.eligible/(thAgg.totalOrders||1)*100)}</td><td class="num red">${gbp(d.shipAbsorbed)}</td><td class="num">${gbp(thAgg.totalShipRev - d.shipAbsorbed)}</td><td class="num cyan">${fmt(d.near)}</td><td class="num">${d.near>0?gbp(d.sumNearGap/d.near):'-'}</td></tr>`;
});
document.getElementById('thresholdTable').innerHTML=th+'</tbody>';
// Shipping trend
destroyChart('shipTrendChart');
charts['shipTrendChart'] = new Chart(document.getElementById('shipTrendChart'),{
type:'line',data:{labels:fm.map(r=>r.YearMonth),datasets:[
{label:'% Free Shipping',data:fm.map(r=>r.freeShipPct*100),borderColor:'#10b981',tension:.3,pointRadius:0},
{label:'Avg Shipping/Order',data:fm.map(r=>r.avgShipping),borderColor:'#ef4444',tension:.3,pointRadius:0,yAxisID:'y1'}
]},options:{...cDef,scales:{...cDef.scales,y:{...cDef.scales.y,ticks:{callback:v=>v+'%'}},y1:{grid:{display:false},ticks:{color:'#ef4444',callback:v=>'£'+v},position:'right'}}}
});
// Shipping by channel
destroyChart('shipChannelChart');
const chFiltered2 = filterArr(RAW.channelMonthly);
const chShipAgg = {};
chFiltered2.forEach(r=>{
if(!chShipAgg[r.ReferrerSource]) chShipAgg[r.ReferrerSource]={orders:0,freeOrders:0};
chShipAgg[r.ReferrerSource].orders += r.orders;
chShipAgg[r.ReferrerSource].freeOrders += r.freeShipPct * r.orders;
});
const chShip = Object.entries(chShipAgg).filter(([k,v])=>v.orders>500).map(([k,v])=>({name:k,pct:v.freeOrders/v.orders*100})).sort((a,b)=>b.pct-a.pct);
charts['shipChannelChart'] = new Chart(document.getElementById('shipChannelChart'),{
type:'bar',data:{labels:chShip.map(c=>c.name),datasets:[{label:'% Free Shipping',data:chShip.map(c=>c.pct),backgroundColor:COLORS.map(c=>c+'cc')}]},
options:{...cDef,plugins:{legend:{display:false}},scales:{...cDef.scales,y:{...cDef.scales.y,max:100,ticks:{callback:v=>v+'%'}}}}
});
// Delivery methods
const delFiltered = filterArr(RAW.deliveryMonthly);
const delAgg = {};
delFiltered.forEach(r=>{
if(!delAgg[r.DeliveryMethod]) delAgg[r.DeliveryMethod]={orders:0,revenue:0,sumShip:0,sumAOV:0};
delAgg[r.DeliveryMethod].orders += r.orders;
delAgg[r.DeliveryMethod].revenue += r.revenue;
delAgg[r.DeliveryMethod].sumShip += r.avgShipping * r.orders;
delAgg[r.DeliveryMethod].sumAOV += r.avgAOV * r.orders;
});
const dels = Object.entries(delAgg).map(([k,v])=>({name:k,...v,avgShipping:v.sumShip/(v.orders||1),avgAOV:v.sumAOV/(v.orders||1)})).sort((a,b)=>b.orders-a.orders);
let dh='<thead><tr><th>Delivery Method</th><th class="num">Orders</th><th class="num">Revenue</th><th class="num">Avg Shipping</th><th class="num">Avg AOV</th></tr></thead><tbody>';
dels.forEach(d=>{
const isFree = d.name.toLowerCase().includes('free');
dh+=`<tr><td>${isFree?'🆓 ':'📦 '}${d.name}</td><td class="num">${fmt(d.orders)}</td><td class="num">${gbp(d.revenue)}</td><td class="num">${gbp(d.avgShipping)}</td><td class="num">${gbp(d.avgAOV)}</td></tr>`;
});
document.getElementById('deliveryTable').innerHTML=dh+'</tbody>';
}
// ═══════════════════════════════════════════════════════════
// CUSTOMERS
// ═══════════════════════════════════════════════════════════
function buildCustomers(fm){
// Customer segments (approximate from filter)
const nrFiltered = filterArr(RAW.newReturningMonthly);
const newOrders = nrFiltered.filter(r=>r.IsNewCustomer===1).reduce((s,r)=>s+r.orders,0);
const retOrders = nrFiltered.filter(r=>r.IsNewCustomer===0).reduce((s,r)=>s+r.orders,0);
destroyChart('custSegChart');
charts['custSegChart'] = new Chart(document.getElementById('custSegChart'),{
type:'doughnut',data:{labels:['New Customer Orders','Returning Customer Orders'],
datasets:[{data:[newOrders,retOrders],backgroundColor:['#64748b','#6366f1']}]},
options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'bottom',labels:{color:'#64748b'}}}}
});
// Countries
destroyChart('countryChart');
const cFiltered = filterArr(RAW.countryMonthly);
const countryAgg = {};
cFiltered.forEach(r=>{
if(!countryAgg[r.CustomerCountry]) countryAgg[r.CustomerCountry]={orders:0,revenue:0};
countryAgg[r.CustomerCountry].orders += r.orders;
countryAgg[r.CustomerCountry].revenue += r.revenue;
});
const countries = Object.entries(countryAgg).map(([k,v])=>({name:k,...v})).sort((a,b)=>b.orders-a.orders).slice(0,10);
charts['countryChart'] = new Chart(document.getElementById('countryChart'),{
type:'bar',data:{labels:countries.map(c=>c.name),datasets:[{data:countries.map(c=>c.orders),backgroundColor:COLORS.map(c=>c+'cc')}]},
options:{...cDef,indexAxis:'y',plugins:{legend:{display:false}}}
});
// Cohort retention
const cohorts = (RAW.cohortRetention||[]).filter(c=>{
if(c.size < 100) return false;
// Filter cohorts within date range if applicable
if(FSTART && c.cohort < FSTART) return false;
if(FEND && c.cohort > FEND) return false;
return true;
});
let ch='<thead><tr><th>Cohort</th><th class="num">Size</th>';
for(let i=0;i<=12;i++) ch+=`<th class="num">M${i}</th>`;
ch+='</tr></thead><tbody>';
cohorts.forEach(c=>{
ch+=`<tr><td>${c.cohort}</td><td class="num">${fmt(c.size)}</td>`;
for(let i=0;i<=12;i++){
const v = c['m'+i];
if(v==null){ch+='<td class="num" style="color:#334155">-</td>';continue;}
const bg = v>50?'rgba(16,185,129,.3)':v>20?'rgba(16,185,129,.15)':v>10?'rgba(16,185,129,.07)':'transparent';
ch+=`<td class="num" style="background:${bg}">${pct(v)}</td>`;
}
ch+='</tr>';
});
document.getElementById('cohortTable').innerHTML=ch+'</tbody>';
}
// ═══════════════════════════════════════════════════════════
// LOAD DATA
// ═══════════════════════════════════════════════════════════
async function loadData(start, end){
try {
// Build API URL with optional date filters — data served from PostgreSQL
let url = '/api/dashboard/data';
const params = [];
if(start) params.push('start=' + encodeURIComponent(start));
if(end) params.push('end=' + encodeURIComponent(end));
if(params.length) url += '?' + params.join('&');
const t0 = performance.now();
const res = await fetch(url);
if(!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
RAW = await res.json();
const elapsed = ((performance.now()-t0)/1000).toFixed(2);
// Sort monthly data
RAW.monthly.sort((a,b) => a.YearMonth.localeCompare(b.YearMonth));
// Set date picker min/max from meta (full range)
if(RAW.meta && RAW.meta.dateMin){
document.getElementById('startDate').min = RAW.meta.dateMin;
document.getElementById('startDate').max = RAW.meta.dateMax;
document.getElementById('endDate').min = RAW.meta.dateMin;
document.getElementById('endDate').max = RAW.meta.dateMax;
}
document.getElementById('loadingMsg').style.display = 'none';
document.getElementById('mainContent').style.display = 'block';
if(!start && !end) document.getElementById('presetAll').classList.add('active');
// Show data source badge
const src = RAW._source || 'json';
const qt = RAW._query_time || elapsed+'s';
const badge = document.getElementById('dbBadge');
if(badge) badge.innerHTML = `<span style="font-size:10px;color:var(--green);background:rgba(16,185,129,.1);padding:2px 8px;border-radius:4px;font-family:monospace">⚡ PostgreSQL · ${qt} · ${RAW.monthly.length} months</span>`;
buildAll();
} catch(err) {
document.getElementById('loadingMsg').innerHTML = `
<div style="color:var(--red);font-size:16px;margin-bottom:12px">⚠ Failed to load data</div>
<div style="color:var(--muted);font-size:13px">${err.message}</div>
<div style="color:var(--muted);font-size:12px;margin-top:12px">
Data is served from PostgreSQL via <code>/api/dashboard/data</code>.<br>
Check that the database service is running.
</div>
`;
}
}
loadData();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink