<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>数据周报 · 2025 年 5 月</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  body { background:#fafaf7; font-family:'Inter','Noto Sans SC',sans-serif; color:#15140f; -webkit-font-smoothing:antialiased; }
  .num { font-family:'Inter',sans-serif; font-feature-settings:'tnum' on; letter-spacing:-0.02em; }
  .section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#5a564e; margin:0 0 16px; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  thead th { background:#f4f1ec; text-align:left; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#5a564e; position:sticky; top:0; }
  tbody td { padding:10px 14px; border-bottom:1px solid #e7e5e0; }
  tbody tr:nth-child(even) { background:#fbfaf7; }
  tbody tr:hover { background:#f4f1ec; }
  .delta-up { color:#1f7a3a; font-weight:600; }
  .delta-down { color:#9c2a25; font-weight:600; }
</style>
</head>
<body>

<div class="max-w-6xl mx-auto px-8 py-12">

  <header class="pb-7 mb-8 border-b border-[#e7e5e0]">
    <div class="flex items-baseline justify-between flex-wrap gap-3">
      <div>
        <div class="text-[11px] font-semibold tracking-[0.22em] uppercase text-[#c96442] mb-2">Weekly Report · Week 19</div>
        <h1 class="text-4xl font-extrabold tracking-tight">数据周报 · 2025 年 5 月</h1>
      </div>
      <div class="text-xs text-[#5a564e] text-right">
        <div>来源: <span class="font-semibold text-[#15140f]">内部 BI</span></div>
        <div>截止 <span class="font-mono text-[#15140f]">2025-05-11</span></div>
      </div>
    </div>
    <p class="mt-3 text-sm text-[#5a564e] max-w-2xl leading-relaxed">本周关键指标全部向好。MAU 同比增长 184%, 付费转化与流失双双改善。</p>
  </header>

  <section class="section mb-10">
    <h2>核心指标 · KPI</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">月活用户 · MAU</div>
        <div class="text-3xl font-extrabold num">23,950</div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 16.0%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">新增 · Signups</div>
        <div class="text-3xl font-extrabold num">4,250</div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 15.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi2"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">付费 · Paying</div>
        <div class="text-3xl font-extrabold num">2,418 <span class="text-base text-[#5a564e]">/ 10.1%</span></div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 18.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi3"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">流失 · Churn</div>
        <div class="text-3xl font-extrabold num">1.8%</div>
        <div class="text-xs mt-2"><span class="delta-up">▼ 0.1pp</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi4"></canvas></div>
      </div>
    </div>
  </section>

  <section class="section mb-10">
    <h2>趋势 · Growth</h2>
    <div class="grid lg:grid-cols-3 gap-4">
      <div class="lg:col-span-2 rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-sm font-semibold mb-3">MAU & 付费用户增长</div>
        <div style="position:relative;height:260px"><canvas id="chart-main"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-sm font-semibold mb-3">流失率 · 月度</div>
        <div style="position:relative;height:260px"><canvas id="chart-churn"></canvas></div>
      </div>
    </div>
  </section>

  <section class="section mb-10">
    <h2>明细 · Raw data</h2>
    <div class="rounded-2xl border border-[#e7e5e0] overflow-hidden bg-white">
      <table>
        <thead><tr><th>月份</th><th class="text-right">MAU</th><th class="text-right">新增</th><th class="text-right">付费</th><th class="text-right">流失率</th></tr></thead>
        <tbody id="rows"></tbody>
      </table>
    </div>
  </section>

  <section class="section mb-10">
    <h2>洞察 · Insights</h2>
    <div class="grid md:grid-cols-3 gap-4">
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">📈</div>
        <div class="font-semibold mb-1.5">MAU 半年增长 184%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">主要来自小红书自然流量, 单条爆款笔记带来 8k+ 新增。</div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">💰</div>
        <div class="font-semibold mb-1.5">付费转化 7.3% → 10.1%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">团队 Pro 套餐贡献最大。新引导流程 + 30 天试用是关键。</div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">🎯</div>
        <div class="font-semibold mb-1.5">月流失 3.4% → 1.8%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">AI 起草功能上线后, 沉默用户激活率翻倍。</div>
      </div>
    </div>
  </section>

  <details class="mt-12 rounded-xl border border-[#e7e5e0] bg-white p-5">
    <summary class="cursor-pointer text-sm font-semibold text-[#5a564e] flex items-center justify-between">
      方法论 · Methodology <span class="text-[#5a564e]">▾</span>
    </summary>
    <div class="text-xs text-[#5a564e] leading-relaxed mt-3 max-w-3xl">
      MAU = 30 天内至少打开一次产品的去重用户。付费 = 当月有效付费订阅。流失率 = 上月付费但本月未续的比例。数据来自内部 BI, 已剔除测试账号与 bot。
    </div>
  </details>

</div>

<script>
const data = [
  {month:'2024-09', mau:8420,  signups:1240, paying:612,  churn:0.034},
  {month:'2024-10', mau:9180,  signups:1380, paying:701,  churn:0.031},
  {month:'2024-11', mau:10240, signups:1610, paying:840,  churn:0.028},
  {month:'2024-12', mau:11800, signups:1890, paying:1012, churn:0.025},
  {month:'2025-01', mau:13620, signups:2240, paying:1218, churn:0.023},
  {month:'2025-02', mau:15440, signups:2680, paying:1455, churn:0.021},
  {month:'2025-03', mau:17890, signups:3120, paying:1722, churn:0.020},
  {month:'2025-04', mau:20640, signups:3680, paying:2041, churn:0.019},
  {month:'2025-05', mau:23950, signups:4250, paying:2418, churn:0.018},
];

document.getElementById('rows').innerHTML = data.map(d => `
  <tr>
    <td class="font-mono text-xs">${d.month}</td>
    <td class="text-right num">${d.mau.toLocaleString()}</td>
    <td class="text-right num">${d.signups.toLocaleString()}</td>
    <td class="text-right num">${d.paying.toLocaleString()}</td>
    <td class="text-right num">${(d.churn*100).toFixed(1)}%</td>
  </tr>
`).join('');

const sparkOpts = { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false},tooltip:{enabled:false}}, scales:{x:{display:false},y:{display:false}}, elements:{point:{radius:0},line:{tension:0.4,borderWidth:2}} };
new Chart(document.getElementById('kpi1'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.mau), borderColor:'#c96442', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi2'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.signups), borderColor:'#e9b94a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi3'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.paying), borderColor:'#1f7a3a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi4'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.churn*100), borderColor:'#2348b8', fill:false}]}, options:sparkOpts });

new Chart(document.getElementById('chart-main'), {
  type:'bar',
  data:{
    labels:data.map(d=>d.month),
    datasets:[
      {label:'MAU', data:data.map(d=>d.mau), backgroundColor:'rgba(201,100,66,0.18)', borderColor:'#c96442', borderWidth:1.5, borderRadius:4, yAxisID:'y'},
      {label:'付费', type:'line', data:data.map(d=>d.paying), borderColor:'#1f7a3a', backgroundColor:'#1f7a3a', tension:0.35, borderWidth:2.5, pointRadius:3, yAxisID:'y'},
    ]
  },
  options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8}}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v.toLocaleString()}}} }
});

new Chart(document.getElementById('chart-churn'), {
  type:'line',
  data:{ labels:data.map(d=>d.month), datasets:[{label:'流失率 %', data:data.map(d=>(d.churn*100).toFixed(2)), borderColor:'#9c2a25', backgroundColor:'rgba(156,42,37,0.08)', tension:0.4, borderWidth:2.5, fill:true, pointRadius:3}] },
  options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v+'%'}, beginAtZero:true}} }
});
</script>

</body>
</html>